/* rt-howto v1 - self-contained How to Play overlay (Robot Taxi) */
#rt-howto{position:absolute;inset:0;container-type:size;z-index:60;display:grid;place-items:center;background:rgba(10,16,34,.55);backdrop-filter:blur(3px);font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;color:#1d2440;padding:2.5%}
#rt-howto[hidden]{display:none}
#rt-howto .rh-panel{position:relative;--pw:min(100cqw,calc(100cqh * 1.5409),1000px);width:var(--pw);aspect-ratio:960/623;max-height:100%;box-sizing:border-box;container-type:inline-size;
 background:linear-gradient(180deg,#fffaf0,#fcf3e1);border:calc(var(--pw) * .45 / 100) solid #c9a35a;border-radius:calc(var(--pw) * 4.6 / 100);box-shadow:0 0 0 calc(var(--pw) * .25 / 100) #fff6e0 inset,0 0 0 calc(var(--pw) * .35 / 100) #8a6a32,0 calc(var(--pw) * 2 / 100) calc(var(--pw) * 5 / 100) rgba(0,0,0,.45);
 display:grid;grid-template-columns:calc(var(--pw) * 53 / 100) 1fr;grid-template-rows:calc(var(--pw) * 8.4 / 100) 1fr calc(var(--pw) * 7.8 / 100);column-gap:calc(var(--pw) * 1.6 / 100);row-gap:0;padding:calc(var(--pw) * 2.2 / 100) calc(var(--pw) * 2.3 / 100) calc(var(--pw) * 2.3 / 100) calc(var(--pw) * 2.7 / 100)}
#rt-howto .rh-head{grid-column:1/-1;display:flex;align-items:center;gap:1.4cqw;padding-left:.4cqw;margin-top:-1.2cqw}
#rt-howto .rh-lamp{width:7.4cqw;height:8.6cqw;flex:none;margin:0 -.6cqw 0 -.8cqw}
#rt-howto h2{margin:0;font-family:"Fraunces","Georgia","Times New Roman",serif;font-weight:900;font-size:7.9cqw;line-height:1;color:#16213d;letter-spacing:-.045em}
#rt-howto .rh-tag{margin-left:auto;font-size:2cqw;color:#1b2540;font-weight:600;white-space:nowrap;margin-right:6.8cqw;margin-top:1.4cqw;letter-spacing:.01em}
#rt-howto .rh-x{position:absolute;top:2.1cqw;right:2.3cqw;width:5.6cqw;height:5.6cqw;min-width:40px;min-height:40px;border-radius:50%;border:.35cqw solid #c9a35a;background:#fffaf0;color:#1b2540;font-size:2.9cqw;font-weight:900;cursor:pointer;display:grid;place-items:center;box-shadow:0 .25cqw 0 #c9a35a;padding:0}
#rt-howto .rh-left{display:flex;flex-direction:column;gap:1.9cqw;min-height:0;padding-top:.5cqw}
#rt-howto .rh-prev{border:.3cqw solid #c9a35a;border-radius:1.6cqw;overflow:hidden;background:#222;height:38.6cqw;flex:none;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.16)}
#rt-howto .rh-prev img{width:100%;height:100%;object-fit:cover;display:block}
#rt-howto .rh-cap{text-align:center;font-weight:800;font-size:2cqw;line-height:1.2;margin:0}
#rt-howto .rh-steps{display:flex;flex-direction:column;gap:1cqw;min-height:0;margin-bottom:1cqw}
#rt-howto .rh-step{flex:1;display:grid;grid-template-columns:5.7cqw 1fr;grid-template-rows:auto 1fr;column-gap:2.2cqw;align-items:center;align-content:start;background:rgba(255,255,255,.6);border:1px solid #f1e6cd;border-radius:1.8cqw;padding:.4cqw 1.2cqw .6cqw 1.9cqw}
#rt-howto .rh-step:first-child{flex:1.18}
#rt-howto .rh-n{width:5.7cqw;height:5.7cqw;border-radius:50%;background:#16213d;color:#fff;border:.5cqw solid #c9a35a;display:grid;place-items:center;font-family:"Fraunces","Georgia",serif;font-weight:900;font-size:3cqw;box-sizing:border-box}
#rt-howto .rh-step h3{margin:0;font-family:"Fraunces","Georgia",serif;font-weight:900;font-size:3.9cqw;line-height:1;letter-spacing:-.02em;white-space:nowrap}
#rt-howto .rh-body{grid-column:1/-1;display:flex;align-items:center;gap:2.6cqw;margin:0 0 0 5.7cqw}
#rt-howto .rh-body p{margin:0;font-size:1.55cqw;line-height:1.3;max-width:15.5cqw;font-weight:600}
#rt-howto .rh-keys{display:grid;grid-template-columns:repeat(3,4.2cqw);grid-template-rows:4.2cqw 4.2cqw;gap:.35cqw;flex:none}
#rt-howto .rh-keys span{display:grid;place-items:center;background:linear-gradient(#fff,#ece3d0);border:1px solid #b9ab8d;border-radius:.6cqw;box-shadow:0 .35cqw 0 #a99b7e;font-size:1.9cqw;font-weight:900}
#rt-howto .rh-keys .u{grid-column:2;grid-row:1}#rt-howto .rh-keys span:not(.u){grid-row:2}
#rt-howto .rh-ico{width:13cqw;height:7cqw;flex:none}
#rt-howto .rh-foot{grid-column:1/-1;display:flex;align-items:center;padding-left:4.4cqw;margin-right:2cqw}
#rt-howto .rh-more{position:relative;width:38.8cqw;flex:none;display:flex;flex-direction:column;align-items:center;gap:.8cqw;margin-top:2.4cqw}
#rt-howto .rh-more::after{content:"";position:absolute;right:-3.9cqw;top:0;height:7.6cqw;border-right:1px solid #d9c9a3}
#rt-howto button.rh-mbtn{width:100%;height:5.9cqw;min-height:40px;padding:0;border-radius:99px;border:.35cqw solid #c9a35a;background:#fffaf0;box-shadow:0 .3cqw 0 #d8c08d;font-family:"Fraunces","Georgia",serif;font-weight:900;font-size:3.1cqw;letter-spacing:-.02em;color:#1b2540;cursor:pointer}
#rt-howto .rh-more small{font-size:1.5cqw;color:#5b5f72}
#rt-howto button.rh-play{margin-left:auto;width:44.2cqw;height:7.8cqw;min-height:48px;padding:0;border-radius:99px;border:.45cqw solid #c9a35a;background:linear-gradient(180deg,#2aa79a,#127068);color:#fff;font-family:"Fraunces","Georgia",serif;font-weight:900;font-size:4.6cqw;letter-spacing:-.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5cqw;box-shadow:0 .5cqw 0 #0c4f49,0 1cqw 2cqw rgba(0,0,0,.25)}
#rt-howto button:active{transform:translateY(2px)}
#rt-howto button:focus-visible{outline:3px solid #2aa79a;outline-offset:3px}
#rt-howto .rh-ctl{position:absolute;inset:0;background:rgba(255,250,240,.98);border-radius:4cqw;padding:3cqw 4cqw;display:flex;flex-direction:column;gap:1.4cqw;overflow:auto}
#rt-howto .rh-ctl[hidden]{display:none}
#rt-howto .rh-ctl h3{margin:0;font-family:"Fraunces","Georgia",serif;font-size:4.4cqw}
#rt-howto .rh-ctl dl{display:grid;grid-template-columns:max-content 1fr;gap:1cqw 2.4cqw;margin:0;font-size:2.2cqw}
#rt-howto .rh-ctl dt{font-weight:900}
#rt-howto .rh-ctl dt kbd{display:inline-block;min-width:2.2em;text-align:center;padding:.15em .45em;background:#fff;border:1px solid #b9ab8d;border-radius:.4em;box-shadow:0 2px 0 #a99b7e;font:inherit;margin-right:.25em}
#rt-howto .rh-ctl dd{margin:0}
#rt-howto .rh-ctl .rh-back{align-self:flex-start;min-height:44px;padding:0 2.4cqw;border-radius:99px;border:3px solid #c9a35a;background:#fffaf0;font-weight:900;font-size:2.2cqw;cursor:pointer}
@container (max-aspect-ratio:1/1) or (max-width:560px){#rt-howto .rh-panel{--pw:min(100cqw,680px);grid-template-columns:1fr;grid-template-rows:auto auto auto auto;aspect-ratio:auto;max-height:100%;overflow:auto;row-gap:calc(var(--pw) * 2 / 100);padding:calc(var(--pw) * 3.4 / 100)}
 #rt-howto .rh-tag{display:none}
 #rt-howto h2{font-size:10cqw}#rt-howto .rh-lamp{width:9cqw;height:10.5cqw}
 #rt-howto .rh-x{width:8cqw;height:8cqw;font-size:4cqw;top:3cqw;right:3cqw}
 #rt-howto .rh-prev{height:auto;aspect-ratio:752/546}
 #rt-howto .rh-cap{font-size:3cqw}
 #rt-howto .rh-step{grid-template-columns:7.4cqw 1fr;padding:1.4cqw 2cqw;border-radius:2.6cqw}
 #rt-howto .rh-n{width:7.4cqw;height:7.4cqw;font-size:4cqw}
 #rt-howto .rh-step h3{font-size:5.4cqw}
 #rt-howto .rh-body{margin-left:7.4cqw}#rt-howto .rh-body p{font-size:2.8cqw;max-width:none}
 #rt-howto .rh-keys{grid-template-columns:repeat(3,5.6cqw);grid-template-rows:5.6cqw 5.6cqw}#rt-howto .rh-keys span{font-size:2.6cqw}
 #rt-howto .rh-ico{width:16cqw;height:9cqw}
 #rt-howto .rh-foot{padding:0;margin:0;gap:4cqw}
 #rt-howto .rh-more{width:auto;flex:1;margin-top:3.2cqw}#rt-howto .rh-more::after{display:none}
 #rt-howto button.rh-mbtn{height:9cqw;font-size:4cqw}#rt-howto .rh-more small{font-size:2.4cqw}
 #rt-howto button.rh-play{width:auto;flex:1.15;height:11cqw;font-size:5.6cqw;gap:3cqw}}
@media (prefers-reduced-motion:reduce){#rt-howto *{transition:none!important;animation:none!important}}

/* howto-fix-1017 */
#rt-howto .rh-credit{margin:.8cqw 0 0;font-size:1.5cqw;font-weight:600;opacity:.8}
/* howto-fix-1017: 12 control rows -> two columns so the whole list fits without scrolling */
#rt-howto .rh-ctl dl{grid-template-columns:max-content 1fr max-content 1fr;gap:1.5cqw 1.8cqw;font-size:2cqw;align-items:center}
#rt-howto .rh-ctl dd{padding-right:1.2cqw}
@container (max-aspect-ratio:1/1) or (max-width:560px){#rt-howto .rh-ctl dl{grid-template-columns:max-content 1fr;font-size:3.4cqw}}
