:root{
  --bg:rgba(10,14,22,.62); --edge:rgba(255,255,255,.14); --fg:#eef2f6; --dim:#a9b4c0;
  --accent:#ffcf3f; --ok:#5ad37a; --warn:#ffb340; --bad:#ff5d5d; --blue:#4d8dff;
  --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); --sa-t:env(safe-area-inset-top,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0f1420;color:var(--fg);
  font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}
canvas#game{display:block;width:100%;height:100%;touch-action:none}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:none}
.panel{background:var(--bg);border:1px solid var(--edge);border-radius:10px;backdrop-filter:blur(3px)}
/* 계기 칸 하나로 합쳤다(소유자: 「공간의 낭비가 심해 좁은 스마트폰 화면에서 쓰기가 어려워」).
   한 줄 = 속도·km/h·기어·점수·시간·단속 · 아랫줄 = 구간·신호초. 길게 누르면 옮길 수 있으니 pointer-events 를 켠다. */
#hudbar{position:fixed;top:calc(8px + var(--sa-t));left:calc(8px + var(--sa-l));padding:5px 9px 6px;max-width:min(96vw,560px);pointer-events:auto;touch-action:none}
#hudbar .hb-top{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap}
#hudbar .hb-bot{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.25}
#hudbar #stopbarWrap{display:flex;align-items:center;gap:6px;margin-top:3px}
#hudbar #stopbarWrap .bar{flex:1;margin-top:0}
#hudbar .sigwait{font-size:12px}
#hudbar .gap{margin-top:2px;font-size:11px}
#hudbar .hb-kv{display:inline-flex;align-items:baseline;gap:3px;margin-left:7px}
#hudbar .hb-kv i{font-style:normal}
#hudbar .hb-kv b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
#hudbar.dragging{border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,141,255,.5),0 8px 22px rgba(0,0,0,.5)}
#hudbar .section{margin-top:0}
#hudbar .sigwait{margin-top:0}

.speedrow{display:flex;align-items:baseline;gap:6px}
#speed{font-size:27px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
#speed.over{color:var(--bad)}
.unit{font-size:12px;color:var(--dim)}
.gear{margin-left:auto;font-size:12px;font-weight:800;color:#fff;background:#d7262b;padding:2px 7px;border-radius:6px}
.section{font-size:11px;color:var(--accent);margin-top:2px}
.sigwait{margin-top:3px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;word-break:keep-all}
.sigwait.red{color:#ff6b61}.sigwait.yellow{color:#ffd23f}.sigwait.green{color:#5ee07a}
#stopbarWrap{margin-top:6px}
.lbl{font-size:11px;color:var(--dim)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:3px}
#stopbar{height:100%;width:0;background:var(--ok);transition:width .12s linear}
.gap{margin-top:6px;font-size:12px;color:var(--ok);opacity:0;transition:opacity .2s}
.gap.warn{color:var(--warn)} .gap.danger{color:var(--bad);font-weight:700}
#sirenState{display:inline-block;margin-left:6px;font-size:11px;color:var(--bad);font-weight:700}
#sirenState.on{animation:blink .6s steps(2) infinite}
@keyframes blink{50%{color:var(--blue)}}
.notice{position:fixed;top:calc(12px + var(--sa-t));left:50%;transform:translateX(-50%);max-width:min(80vw,520px);padding:8px 16px;border-radius:20px;
  background:var(--bg);border:1px solid var(--edge);font-size:14px;font-weight:600;text-align:center;opacity:0;transition:opacity .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice.alert{border-color:var(--accent);color:var(--accent)} .notice.bad{border-color:var(--bad);color:var(--bad)} .notice.warn{color:var(--warn)} .notice.good{border-color:var(--ok);color:var(--ok)}
#target{position:fixed;top:calc(52px + var(--sa-t));left:50%;transform:translateX(-50%);font-size:13px;color:var(--accent);background:var(--bg);padding:4px 12px;border-radius:14px;border:1px solid var(--edge);display:none;white-space:nowrap}
#hint{position:fixed;top:calc(86px + var(--sa-t));left:50%;transform:translateX(-50%);max-width:min(86vw,560px);font-size:12.5px;color:#dbe4ee;background:rgba(10,14,22,.45);padding:4px 12px;border-radius:12px;opacity:0;transition:opacity .3s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vignette{position:fixed;inset:0;box-shadow:inset 0 0 120px 40px rgba(255,80,60,.55);opacity:0;transition:opacity .15s}

/* ---------- 터치 ---------- */
#touch{position:fixed;inset:0;pointer-events:none;display:none}
#stickZone{position:fixed;left:0;bottom:0;width:46vw;max-width:360px;height:52vh;pointer-events:auto;touch-action:none}
#stickBase{position:absolute;left:24px;top:auto;bottom:24px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(20,30,50,.75),rgba(10,14,22,.85));border:3px solid rgba(255,207,63,.75);box-shadow:0 0 0 3px rgba(10,14,22,.6),0 6px 18px rgba(0,0,0,.5);opacity:.8;transition:opacity .15s}
#stickBase.on{opacity:1;bottom:auto}
#stickBase.live{opacity:1}
#minimap{position:fixed;top:calc(8px + var(--sa-t));right:calc(8px + var(--sa-r));width:180px;height:177px;border-radius:10px;border:1px solid var(--edge);background:rgba(10,14,22,.5);pointer-events:auto;cursor:grab;touch-action:none}
#minimap.dragging{cursor:grabbing;opacity:.9;border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,141,255,.5),0 8px 22px rgba(0,0,0,.5)}
body.portrait #minimap{top:calc(8px + var(--sa-t));right:calc(8px + var(--sa-r));width:148px;height:146px}
#stickBase .ring{position:absolute;inset:30px;border-radius:50%;border:1px dashed rgba(255,255,255,.3)}
#stickBase .cross{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) center/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) center/100% 1px no-repeat;border-radius:50%}
#stickBase .arrow{position:absolute;display:flex;align-items:center;gap:2px;color:#ffe9a8;font-size:11px;font-weight:800;text-shadow:0 1px 2px #000;line-height:1}
#stickBase .arrow span{font-size:10px;color:#f1f4f8;font-weight:700}
#stickBase .arrow.up{top:6px;left:50%;transform:translateX(-50%);flex-direction:column} #stickBase .arrow.down{bottom:6px;left:50%;transform:translateX(-50%);flex-direction:column}
#stickBase .arrow.left{left:7px;top:50%;transform:translateY(-50%)} #stickBase .arrow.right{right:7px;top:50%;transform:translateY(-50%)}
#stickNub{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a8,#c9982e 70%,#8a6414);box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 -3px 6px rgba(0,0,0,.25)}
.cluster{position:fixed;bottom:calc(18px + var(--sa-b));display:flex;gap:12px;align-items:flex-end}
.cluster.right{right:calc(16px + var(--sa-r))}
.tbtn{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:11px;touch-action:none;transition:background .08s,transform .08s;text-shadow:0 1px 2px #000}
.tbtn .ico{font-size:26px;line-height:1}
.tbtn.held{background:rgba(255,255,255,.34);transform:scale(.95)}
.tbtn.gas{width:96px;height:96px;background:rgba(90,211,122,.25);border-color:rgba(90,211,122,.8)}
.tbtn.brake{width:84px;height:84px;background:rgba(255,93,93,.25);border-color:rgba(255,93,93,.8)}
.tbtn.brake .ico{font-size:22px}
.tbtn.rev{width:66px;height:66px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);margin-bottom:6px}
.tbtn.rev .ico{font-size:20px}
.tbtn.siren{width:66px;height:66px;background:rgba(77,141,255,.22);border-color:rgba(77,141,255,.8);margin-bottom:6px}
.tbtn.pa{width:60px;height:60px;background:rgba(255,207,63,.16);border-color:rgba(255,207,63,.7);margin-bottom:8px}
.tbtn.enf{width:72px;height:72px;background:rgba(255,59,48,.22);border-color:rgba(255,120,110,.9);margin-bottom:8px}
.tbtn.enf .ico{font-size:24px}
.tbtn.enf.ready{background:rgba(255,59,48,.5);border-color:#fff;box-shadow:0 0 0 4px rgba(255,59,48,.25);animation:blink .7s steps(2) infinite}
body.portrait .tbtn.enf{width:64px;height:64px}
.tbtn.pa .ico{font-size:20px}
.tbtn.pa.held{background:rgba(255,207,63,.45)}
body.portrait .tbtn.pa{width:56px;height:56px}
label.opt input[type=range]{width:auto;height:auto;margin:0 8px}
.tbtn.siren.active{background:rgba(255,93,93,.5);border-color:#fff;animation:blink .6s steps(2) infinite}
.tbtn.small{position:fixed;top:calc(196px + var(--sa-t));right:calc(10px + var(--sa-r));width:40px;height:40px;font-size:13px;border-radius:10px}
body.portrait #stickZone{width:52vw;height:38vh}
body.portrait .cluster.right{display:grid;grid-template-columns:auto auto;justify-items:end;align-items:end;gap:10px;bottom:calc(26px + var(--sa-b))}
body.portrait .tbtn.gas{width:88px;height:88px} body.portrait .tbtn.brake{width:78px;height:78px}
body.portrait .tbtn.rev{width:60px;height:60px} body.portrait .tbtn.siren{width:60px;height:60px}
body.portrait .tbtn.small{top:calc(164px + var(--sa-t))}
body.portrait .notice{top:calc(var(--hudh,97px) + 178px + var(--sa-t));max-width:94vw;white-space:normal;font-size:13px}   /* 계기 칸·지도·작은 단추 아래로 — 전에는 단추 위에 얹혔다 */
body.portrait #target{top:calc(152px + var(--sa-t))}
body.portrait #hint{top:calc(182px + var(--sa-t));max-width:94vw;white-space:normal}

/* ---------- 오버레이 ---------- */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(20,30,50,.9),rgba(6,8,14,.96));z-index:10;padding:16px}
.overlay.light{background:rgba(6,8,14,.55)}
.overlay.intro{background:linear-gradient(180deg,rgba(6,8,14,.15) 0%,rgba(6,8,14,.55) 60%,rgba(6,8,14,.85) 100%);flex-direction:column;justify-content:flex-end;padding-bottom:12vh}
.intro-lines{width:min(94vw,980px);text-align:center;pointer-events:none;position:relative}
.intro-lines::before{content:'';position:absolute;left:-4%;right:-4%;top:-18px;bottom:-18px;z-index:-1;pointer-events:none;border-radius:20px;
  background:radial-gradient(ellipse at 50% 50%,rgba(4,7,14,.72) 0%,rgba(4,7,14,.46) 58%,rgba(4,7,14,0) 100%)}
.intro-lines .il{font-size:clamp(23px,4.4vw,42px);font-weight:800;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease;margin:12px 0;text-shadow:0 3px 18px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.5);line-height:1.42;word-break:keep-all}
.intro-lines .il.on{opacity:1;transform:none}
.intro-lines .il.big{font-size:clamp(30px,8.6vw,84px);font-weight:900;letter-spacing:5px;white-space:nowrap;line-height:1;margin-top:18px;
  background:linear-gradient(180deg,#fff 0%,#cfe0ff 50%,#4d8dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.intro-lines .il.small{font-size:clamp(15px,2.2vw,20px);font-weight:600;color:#c9d6ea}
.intro-sound{pointer-events:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(16px + var(--sa-t,0px));background:rgba(0,0,0,.35);border:1px solid var(--edge);color:#fff;padding:6px 14px;border-radius:16px;font-size:13px;display:none}
.skip{pointer-events:auto;position:fixed;right:calc(18px + var(--sa-r));bottom:calc(18px + var(--sa-b));background:rgba(255,255,255,.1);border:1px solid var(--edge);color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;cursor:pointer;font-family:inherit}
.card{width:min(92vw,520px);max-height:94vh;overflow:auto;background:rgba(14,18,28,.92);border:1px solid var(--edge);border-radius:16px;padding:22px 20px;text-align:center}
.badge{display:inline-block;font-size:11px;letter-spacing:3px;color:#cfe0ff;border:1px solid rgba(77,141,255,.6);padding:4px 12px;border-radius:12px;margin-bottom:10px}
h1{font-size:min(9.5vw,56px);font-weight:900;letter-spacing:3px;white-space:nowrap;line-height:1;background:linear-gradient(180deg,#fff 0%,#cfe0ff 50%,#4d8dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin-top:6px;color:var(--dim);font-size:14px;letter-spacing:1px}
h2{font-size:26px;letter-spacing:2px}
.cars{display:flex;gap:10px;justify-content:center;margin:18px 0 12px}
.carpick{flex:1;pointer-events:auto;background:rgba(255,255,255,.06);border:2px solid var(--edge);border-radius:12px;color:var(--fg);padding:12px 8px;cursor:pointer;font-family:inherit}
.carpick b{display:block;font-size:16px} .carpick span{display:block;font-size:11.5px;color:var(--dim);margin-top:4px}
.carpick.sel{border-color:var(--accent);background:rgba(255,207,63,.12)}
.views{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;justify-content:center;margin:0 0 6px}
@media (max-width:480px){.viewpick,.wpick,.mpick{padding:6px 9px;font-size:12px}.views .lbl{width:100%;text-align:center;font-size:11px}}
.views .lbl{font-size:12px;color:var(--dim);margin-right:4px}
.viewpick,.wpick,.mpick{pointer-events:auto;background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:16px;color:var(--fg);padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit}
/* 학습 모드(12대 중과실 카드) */
.overlay.study .card.wide{max-width:min(96vw,760px);max-height:92vh;overflow:auto;text-align:center}
.overlay.study .cards{display:grid;grid-template-columns:1fr;gap:8px;text-align:left;margin:12px 0}
.overlay.study .sitem{display:flex;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:12px;padding:10px}
.overlay.study .sitem .num{font-weight:900;font-size:20px;color:var(--blue);min-width:28px}
.overlay.study .sitem b{font-size:15px}
.overlay.study .law{font-size:12px;color:#9fc0ff;margin-top:2px}
.overlay.study .chk{background:#5a4a1a;color:#ffcf3f;border-radius:8px;padding:1px 6px;font-size:11px}
.overlay.study .sit{font-size:13px;margin:5px 0;line-height:1.45}
.overlay.study .tip{font-size:12px;color:var(--dim);line-height:1.4}
.overlay.study .small{font-size:12px}
.overlay.study button.small{padding:5px 10px;font-size:12px;margin-top:6px;width:auto}
@media (min-width:640px){.overlay.study .cards{grid-template-columns:1fr 1fr}}
.viewpick.sel,.wpick.sel,.mpick.sel{border-color:var(--blue);background:rgba(77,141,255,.18);color:#fff}
.tbtn.small.view{top:calc(244px + var(--sa-t));font-size:12px;width:46px}
.tbtn.small.speed{top:calc(340px + var(--sa-t));font-size:11px;width:54px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body.portrait .tbtn.small.speed{top:calc(308px + var(--sa-t))}
.tbtn.small.speed.fast{background:rgba(255,196,0,.88);color:#1b1b1b;border-color:#ffd23f}
.speedpanel{position:fixed;top:calc(332px + var(--sa-t));right:calc(72px + var(--sa-r));z-index:40;background:rgba(14,18,26,.95);border:1px solid #3b4a66;border-radius:12px;padding:8px 9px;color:#eaf1ff;box-shadow:0 6px 18px rgba(0,0,0,.45)}
body.portrait .speedpanel{top:calc(300px + var(--sa-t))}
.speedpanel .sp-val{font-size:20px;font-weight:800;text-align:center;margin-bottom:6px;font-variant-numeric:tabular-nums}
.speedpanel .sp-row{display:flex;gap:5px}
.speedpanel button{min-width:46px;height:42px;border-radius:9px;border:1px solid #4a5a78;background:#1f2a3d;color:#eaf1ff;font-size:14px;font-weight:700;touch-action:manipulation}
.speedpanel button[data-ts="reset"]{background:#2d3f5e}
.speedpanel .sp-note{font-size:10.5px;color:var(--dim);text-align:center;margin-top:5px}
body.portrait .tbtn.small.view{top:calc(212px + var(--sa-t))}
button.primary{pointer-events:auto;display:block;width:100%;margin:12px auto 0;padding:14px;border-radius:12px;border:2px solid var(--accent);background:rgba(255,207,63,.14);color:#fff;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;touch-action:manipulation}
button.primary:active{background:rgba(255,207,63,.3)}
button.ghost{pointer-events:auto;display:block;width:100%;margin:10px auto 0;padding:12px;border-radius:12px;border:1px solid var(--edge);background:transparent;color:var(--dim);font-size:15px;cursor:pointer;font-family:inherit}
.best{margin-top:10px;font-size:13px;color:var(--ok);min-height:18px}
.controls{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.8}
.controls b{color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--edge);border-radius:4px;padding:0 6px}
.controls .dim{margin-top:6px;font-size:12px;line-height:1.5;white-space:normal}
.foot{margin-top:14px;font-size:11px;color:#5d6771}
label.opt{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 6px;font-size:15px;text-align:left;border-bottom:1px solid var(--edge);cursor:pointer}
label.opt input{width:20px;height:20px}
#ticket .card{padding-top:14px}
.tbar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:12px}
#ticketTimer{height:100%;width:100%;background:var(--accent);transition:width .1s linear}
.q{font-size:17px;font-weight:700;margin-bottom:10px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts .opt{pointer-events:auto;padding:16px 8px;border-radius:12px;border:2px solid var(--edge);background:rgba(255,255,255,.06);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation}
.opts .opt:active{background:rgba(255,255,255,.2)}
.opts .opt[data-id="none"]{grid-column:1 / -1;border-style:dashed;color:var(--dim)}
.result{display:none;text-align:left;line-height:1.6;font-size:14px}
.result .main{font-size:18px;font-weight:800;margin-bottom:6px}
.result.ok .main{color:var(--ok)} .result.warn .main{color:var(--warn)}
.result .sub{color:#dbe4ee;font-size:13.5px;margin-top:2px}
.stats{margin:14px 0 4px;text-align:left}
.stats .row{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--edge);font-size:15px}
.stats .lesson{margin-top:12px;padding:10px;border-radius:10px;background:rgba(255,207,63,.12);color:var(--accent);font-weight:700;font-size:14px}
.stats .reason{margin-top:8px;color:var(--bad);font-size:13px}
#loadfail{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#3a1418;border:1px solid var(--bad);padding:10px 16px;border-radius:10px;font-size:13px;z-index:20;max-width:90vw;text-align:center}
/* 방향지시등 */
.sig{font-size:16px;color:#3a4048;margin:0 4px;transition:color .1s}
.sig.on{color:#ffa000;text-shadow:0 0 6px rgba(255,160,0,.8)}
.dmode{margin-left:6px;font-size:11px;font-weight:800;color:#9fc0ff;border:1px solid rgba(159,192,255,.5);border-radius:6px;padding:1px 6px}
.dmode.sport{color:#ff8a5c;border-color:rgba(255,138,92,.6)}
.sigs{position:fixed;left:calc(24px + var(--sa-l));bottom:calc(190px + var(--sa-b));display:flex;gap:10px}
body.portrait .sigs{bottom:calc(215px + var(--sa-b))}
.tbtn.sig{width:52px;height:44px;border-radius:12px;background:rgba(255,160,0,.12);border-color:rgba(255,160,0,.6);font-size:16px;flex-direction:row;gap:4px}
.tbtn.sig span{font-size:11px}
.tbtn.sig.active{background:rgba(255,160,0,.55);animation:blink .5s steps(2) infinite}

/* ---------- 화면 게임패드 배치(조작 설정 pad) ---------- */
#pad{display:none}
body.padctl #pad{display:block}
body.padctl #stickZone,body.padctl .sigs,body.padctl .cluster.right{display:none}
.pbtn{width:58px;height:58px;font-size:20px;font-weight:800;gap:0;line-height:1}
.pbtn span{font-size:9px;font-weight:600;color:var(--dim);margin-top:2px}
.dpad{position:fixed;left:calc(26px + var(--sa-l));bottom:calc(40px + var(--sa-b));width:190px;height:190px;pointer-events:none}
.dpad .dp{position:absolute;border-radius:12px;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.55)}
.dpad .up{left:66px;top:0;background:rgba(90,211,122,.25);border-color:rgba(90,211,122,.8)}
.dpad .down{left:66px;bottom:0;background:rgba(255,93,93,.25);border-color:rgba(255,93,93,.8)}
.dpad .left{left:0;top:66px} .dpad .right{right:0;top:66px}
.dpad .dp-center{position:absolute;left:66px;top:66px;width:58px;height:58px;border-radius:8px;background:rgba(255,255,255,.06)}
.face{position:fixed;right:calc(26px + var(--sa-r));bottom:calc(40px + var(--sa-b));width:190px;height:190px;pointer-events:none}
.face .fb{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.55)}
.face .tri{left:66px;top:0;color:#5ad37a;border-color:rgba(90,211,122,.8)} .face .cir{right:0;top:66px;color:#ff5d5d;border-color:rgba(255,93,93,.8)}
.face .x{left:66px;bottom:0;color:#7fb2ff;border-color:rgba(77,141,255,.8)} .face .sq{left:0;top:66px;color:#ff9ad5;border-color:rgba(255,120,200,.8)}
.face .fb span{color:#dbe4ee}
.pad-shoulder{position:fixed;bottom:calc(250px + var(--sa-b))}
.pad-shoulder.left{left:calc(26px + var(--sa-l))} .pad-shoulder.right{right:calc(26px + var(--sa-r))}
.pbtn.sh{width:92px;height:44px;border-radius:14px;font-size:15px;flex-direction:row;gap:6px;background:rgba(255,160,0,.12);border-color:rgba(255,160,0,.6)}
.pbtn.sh.active{background:rgba(255,160,0,.55);animation:blink .5s steps(2) infinite}
.pad-mid{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sa-b));display:flex;gap:14px}
.pbtn.mid{width:auto;min-width:74px;height:34px;padding:0 10px;border-radius:17px;font-size:11px;font-weight:700;flex-direction:row;gap:6px}
.pbtn.mid span{font-size:9px}
body.portrait .dpad,body.portrait .face{width:160px;height:160px;bottom:calc(60px + var(--sa-b))} body.portrait .pbtn{width:50px;height:50px;font-size:17px}
body.portrait .dpad .up,body.portrait .dpad .down,body.portrait .face .tri,body.portrait .face .x{left:55px} body.portrait .dpad .left,body.portrait .dpad .right,body.portrait .face .sq,body.portrait .face .cir{top:55px}
body.portrait .dpad .dp-center{left:55px;top:55px;width:50px;height:50px}
body.portrait .pad-shoulder{bottom:calc(236px + var(--sa-b))}
.tbtn.small.help{top:calc(292px + var(--sa-t));font-size:15px;font-weight:800;width:40px}
body.portrait .tbtn.small.help{top:calc(260px + var(--sa-t))}
.cpick{pointer-events:auto;background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:16px;color:var(--fg);padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.cpick.sel{border-color:var(--blue);background:rgba(77,141,255,.18);color:#fff}
.cpick.more{border-style:dashed}
.card.help{max-width:760px;text-align:left}
.card.help h2{text-align:center;margin-bottom:8px}
.help-grid{display:grid;grid-template-columns:1fr;gap:10px 18px;margin:8px 0 12px}
@media (min-width:640px){.help-grid{grid-template-columns:1fr 1fr}}
.help-col h3{font-size:13px;color:var(--accent);margin:8px 0 4px}
.help-col div{font-size:12.5px;line-height:1.5;margin:3px 0}
.help-col .dim{color:var(--dim);font-size:11.5px}
/* 보행자 모드: 보행 신호 안내 */
.section.walk{font-size:13px;font-weight:700}
.section.walk.go{color:var(--ok)} .section.walk.stop{color:var(--bad)}
/* ---------- 타이틀 정리(설정은 접힘) · 보행자/어린이 모드 UI ---------- */
.views.modes .mpick{font-size:14px;padding:9px 16px}
details.more{margin:10px auto 0;max-width:640px;text-align:left}
details.more summary{cursor:pointer;pointer-events:auto;list-style:none;font-size:13px;color:var(--fg);padding:8px 12px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary .dim{font-size:11px;color:var(--dim)}
details.more[open] summary{border-radius:12px 12px 0 0}
details.more .cars{margin:12px 0 8px}
.tbtn.hand{display:none;position:fixed;right:calc(16px + var(--sa-r));bottom:calc(200px + var(--sa-b));width:76px;height:76px;background:rgba(255,210,63,.22);border-color:rgba(255,210,63,.9)}
.tbtn.hand .ico{font-size:28px}
body.onfoot .tbtn.hand{display:flex}
body.onfoot .tbtn.siren,body.onfoot .sigs,body.onfoot .pad-shoulder{display:none}
body.kidmode .tbtn.enf,body.kidmode .tbtn.pa,body.kidmode .face .tri,body.kidmode .face .sq,body.kidmode .face .cir,body.kidmode .pad-mid{display:none}
body.kidmode .tbtn.hand{width:96px;height:96px;bottom:calc(150px + var(--sa-b))} body.kidmode .tbtn.hand .ico{font-size:40px}
#kidSteps{display:none;position:fixed;top:calc(var(--hudh,97px) + 8px + var(--sa-t));left:50%;transform:translateX(-50%);pointer-events:none;text-align:center}
body.kidmode #kidSteps{display:block}
#kidSteps{max-width:96vw}
#kidSteps .chips{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
#kidSteps .chip{white-space:nowrap}
#kidSteps .chip{font-size:12px;padding:4px 9px;border-radius:12px;background:rgba(10,14,22,.55);border:1px solid var(--edge);color:var(--dim)}
#kidSteps .chip.on{background:rgba(255,210,63,.9);color:#111;font-weight:800;transform:scale(1.08)}
#kidNow{margin-top:6px;font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
body.kidmode .notice{font-size:16px}
body.kidmode #hint{font-size:14px}
body.portrait .tbtn.hand{bottom:calc(230px + var(--sa-b))}
/* 폰 가로(낮은 화면)에서 인트로 글씨가 위로 잘렸다 — 글자 크기는 그대로 두고 줄 간격과 아래 여백만 줄인다 */
@media (orientation:landscape) and (max-height:480px){
  .overlay.intro{padding-bottom:10px}
  .intro-lines .il{margin:5px 0;line-height:1.3}
  .intro-lines .il.big{margin-top:8px}
}
/* 낮은 가로 화면(폰 가로)에서는 ✋ 단추가 미니맵과 겹친다 — 미니맵 왼쪽 옆으로 옮긴다 */
@media (orientation:landscape) and (max-height:480px){ .tbtn.hand,body.kidmode .tbtn.hand{right:calc(252px + var(--sa-r));bottom:calc(28px + var(--sa-b))} }
/* ---------- 게임 감각: 점수 팝 · 위반 포착 플래시 · 별 터짐 ---------- */
#pops{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;left:50%;top:38%;transform:translate(-50%,0);font-size:34px;font-weight:900;color:var(--ok);text-shadow:0 2px 8px rgba(0,0,0,.6);animation:popUp 1.3s ease-out forwards;white-space:nowrap}
.pop.bad{color:var(--bad)} .pop.star{font-size:44px}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}30%{transform:translate(-50%,-6px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}
#flash.on{animation:flashCam .45s ease-out}
@keyframes flashCam{0%{opacity:.75}100%{opacity:0}}
.burst{position:absolute;font-size:26px;animation:burst 1.4s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3)}}
#btnStart.primary{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,207,63,.35)}50%{box-shadow:0 0 0 10px rgba(255,207,63,0)}}
/* ---------- 타이틀 연출 · 결과 카드(별·배지) ---------- */
h1{background-size:200% 200%;animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.stars{font-size:34px;letter-spacing:4px;margin:4px 0 8px;text-shadow:0 2px 10px rgba(255,207,63,.5)}
.stars .off{opacity:.22}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 10px}
.badge2{font-size:12px;padding:5px 10px;border-radius:12px;background:rgba(77,141,255,.16);border:1px solid rgba(77,141,255,.6);color:#dbe8ff;animation:popUp 0s}
.badge2.gold{background:rgba(255,207,63,.18);border-color:var(--accent);color:#ffe9a8}
.tbtn.runbtn{display:none;position:fixed;left:calc(24px + var(--sa-l));bottom:calc(250px + var(--sa-b));width:64px;height:64px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.tbtn.runbtn .ico{font-size:24px}
.tbtn.runbtn.on{background:rgba(90,211,122,.35);border-color:rgba(90,211,122,.9)}
body.onfoot .tbtn.runbtn{display:flex}
body.portrait .tbtn.runbtn{bottom:calc(195px + var(--sa-b))}
/* 📹 블랙박스 · 📡 무전 — 추격 대신 쓰는 두 버튼 */
.tbtn.cam{width:60px;height:60px;background:rgba(120,220,255,.16);border-color:rgba(120,220,255,.75);margin-bottom:8px}
.tbtn.radio{width:60px;height:60px;background:rgba(180,150,255,.16);border-color:rgba(180,150,255,.75);margin-bottom:8px}
.tbtn.cam .ico,.tbtn.radio .ico{font-size:20px}
body.portrait .tbtn.cam,body.portrait .tbtn.radio,body.portrait .tbtn.tow{width:54px;height:54px}
body.onfoot .tbtn.cam{display:none}
/* ---------- 교차로 근무(하차 근무): 신호제어기 조작판 ---------- */
.tbtn.boxbtn{display:none;position:fixed;left:calc(24px + var(--sa-l));bottom:calc(330px + var(--sa-b));width:64px;height:64px;background:rgba(255,176,32,.18);border-color:rgba(255,176,32,.85)}
.tbtn.boxbtn .ico{font-size:24px}
.tbtn.boxbtn.near{animation:pulse 1.6s ease-in-out infinite}
.tbtn.boxbtn.off{opacity:.4}
body.dutymode .tbtn.boxbtn{display:flex}
body.dutymode .tbtn.hand{background:rgba(255,120,120,.22);border-color:rgba(255,120,120,.9)}
body.portrait .tbtn.boxbtn{bottom:calc(339px + var(--sa-b))}
#dutyPanel{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sa-b));width:min(96vw,430px);z-index:9;
  background:rgba(10,14,22,.92);border:1px solid var(--edge);border-radius:14px;padding:10px 12px;pointer-events:auto;box-shadow:0 8px 28px rgba(0,0,0,.5)}
body.dutyopen #dutyPanel{display:block}
#dutyPanel .dtitle{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
#dutyPanel .dtag{font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(90,211,122,.2);border:1px solid rgba(90,211,122,.7);color:#c8f5d6}
#dutyPanel .dtag.man{background:rgba(255,176,32,.2);border-color:rgba(255,176,32,.8);color:#ffe1a8}
#dutyPanel .dx{margin-left:auto;cursor:pointer;padding:2px 8px;color:var(--dim)}
#dutyPanel button{font:inherit;font-size:13px;color:var(--fg);background:rgba(255,255,255,.07);border:1px solid var(--edge);border-radius:10px;padding:9px 6px;cursor:pointer;flex:1}
#dutyPanel button:disabled{opacity:.38;cursor:default}
#dutyPanel .dsw,#dutyPanel .dreq{display:flex;gap:8px;margin-bottom:8px}
#dutyPanel .dsw button.on{background:rgba(255,176,32,.28);border-color:rgba(255,176,32,.9);font-weight:800}
#dutyPanel .dreq button.on{background:rgba(255,90,90,.28);border-color:rgba(255,90,90,.9);font-weight:800}
#dutyPanel .dq{display:flex;gap:6px;margin-bottom:8px}
#dutyPanel .qcell{flex:1;text-align:center;font-size:11px;color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:9px;padding:4px 2px}
#dutyPanel .qcell b{display:block;font-size:16px;color:var(--fg)}
#dutyPanel .qcell.warn{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.7)}
#dutyPanel .qcell.bad{background:rgba(255,90,90,.18);border-color:rgba(255,90,90,.8)}
#dutyPanel .qcell.bad b,#dutyPanel .qcell.warn b{color:#fff}
#dutyPanel .dwhy{font-size:12px;color:var(--accent);min-height:16px;margin-bottom:8px}
#dutyPanel .dnote{font-size:11px;color:var(--dim);line-height:1.45}
body.portrait #dutyPanel{bottom:calc(150px + var(--sa-b))}
/* ---------- 인트로 연출(상용 게임 느낌): 레터박스 · 하단 3분할 자막 · 타이틀 등장 ---------- */
.overlay.intro{background:linear-gradient(180deg,rgba(6,8,14,.45) 0%,rgba(6,8,14,0) 26%,rgba(6,8,14,0) 52%,rgba(6,8,14,.84) 100%)}
.overlay.intro::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 100%)}
.cine-bar{position:absolute;left:0;right:0;height:6vh;background:#05070c;pointer-events:none;transition:height .9s cubic-bezier(.16,.84,.3,1),opacity .6s ease}
.cine-bar.top{top:0}.cine-bar.bot{bottom:0}
body.cine-out .cine-bar{height:0}
/* 하단 3분할 자막 */
.intro-shot{position:absolute;padding-left:20px;left:clamp(14px,5vw,80px);bottom:calc(6vh + 30px);text-align:left;pointer-events:none;opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s ease;max-width:min(92vw,1000px)}
.intro-shot.on{opacity:1;transform:none}
.intro-shot .kick{display:block;font-size:clamp(13px,2.1vw,19px);letter-spacing:6px;color:var(--accent);font-weight:800;margin-bottom:7px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.intro-shot .ttl{display:block;word-break:keep-all;font-size:clamp(30px,5.8vw,62px);font-weight:900;color:#fff;line-height:1.14;text-shadow:0 4px 22px rgba(0,0,0,.92),0 0 44px rgba(0,0,0,.6)}
.intro-shot .sub{display:block;margin-top:9px;word-break:keep-all;font-size:clamp(17px,2.8vw,27px);color:#e8f0ff;font-weight:700;text-shadow:0 3px 14px rgba(0,0,0,.9)}
.intro-shot::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--accent),rgba(77,141,255,.25))}
/* 자막 뒤에 부드러운 어두운 판을 깐다 — 크레인 아웃처럼 밝고 흰 장면에서도 글이 읽힌다(소유자: 「넘 하얗게 표현이 되어서 정확한 전달이 안 되」) */
.intro-shot::after{content:'';position:absolute;left:-26px;right:-56px;top:-16px;bottom:-18px;z-index:-1;pointer-events:none;border-radius:16px;
  background:linear-gradient(100deg,rgba(4,7,14,.80) 0%,rgba(4,7,14,.62) 52%,rgba(4,7,14,.16) 84%,rgba(4,7,14,0) 100%)}
/* 타이틀 등장 */
.intro-title{position:absolute;left:50%;top:44%;max-width:96vw;transform:translate(-50%,-50%) scale(1.14);text-align:center;pointer-events:none;opacity:0;filter:blur(10px);transition:opacity .5s ease,transform 1.1s cubic-bezier(.12,.86,.2,1),filter .7s ease}
.intro-title.on{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}
.intro-title::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:230%;background:radial-gradient(ellipse at 50% 50%,rgba(4,7,14,.62) 0%,rgba(4,7,14,.28) 46%,rgba(4,7,14,0) 72%);z-index:-1;pointer-events:none}
.intro-title .em{width:clamp(54px,9vw,96px);height:auto;display:block;margin:0 auto 8px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));opacity:0;transform:scale(1.5) rotate(-14deg);transition:opacity .5s ease .1s,transform .8s cubic-bezier(.1,.9,.2,1) .1s}
.intro-title.on .em{opacity:1;transform:none}
.intro-title .logo{font-size:clamp(24px,7vw,84px);font-weight:900;letter-spacing:2px;line-height:1;white-space:nowrap;max-width:94vw;
  background:linear-gradient(180deg,#fff 0%,#dfeaff 46%,#5a95ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.65))}
.intro-title.on .logo{animation:logoSpread 1.4s cubic-bezier(.1,.9,.2,1) both}
@keyframes logoSpread{0%{letter-spacing:9px;opacity:.2}100%{letter-spacing:2px;opacity:1}}
.intro-title .sub2{margin-top:10px;font-size:clamp(13px,2.3vw,20px);letter-spacing:8px;color:#fff;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 26px rgba(6,10,20,.7)}
.intro-title .tag{margin-top:14px;font-size:clamp(11px,1.8vw,15px);letter-spacing:2px;color:#e7eefb;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.8);opacity:0;transition:opacity .8s ease}
.intro-title.tagon .tag{opacity:1}
#introFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#introFlash.on{animation:cineFlash .7s ease-out}
@keyframes cineFlash{0%{opacity:.9}35%{opacity:.35}100%{opacity:0}}
body.portrait .cine-bar{height:4vh}
body.portrait .intro-shot{bottom:calc(4vh + 20px)}
/* 하차·승차 버튼(순찰 근무 중) — 도보 상태에서는 「승차」로 바뀐다 */
.tbtn.footbtn{display:none;position:fixed;right:calc(16px + var(--sa-r));bottom:calc(286px + var(--sa-b));width:64px;height:64px;background:rgba(120,220,255,.16);border-color:rgba(120,220,255,.75)}
.tbtn.footbtn .ico{font-size:24px}
body.desktop .tbtn.footbtn,body.can-foot .tbtn.footbtn{display:flex}
body.onfoot:not(.afoot) .tbtn.footbtn{display:none}
body.afoot .tbtn.footbtn{background:rgba(255,207,63,.2);border-color:rgba(255,207,63,.85)}
body.kidmode .tbtn.footbtn{display:none}
/* 후진 버튼 — 운전 중에만. 스틱 아래로 오래 누르는 방법은 찾기 어려웠다(소유자: 「후진이 안되고 있고」) */
.tbtn.revbtn{display:none;position:fixed;right:calc(16px + var(--sa-r));bottom:calc(362px + var(--sa-b));width:60px;height:60px;
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.tbtn.revbtn .ico{font-size:22px}
body.can-foot .tbtn.revbtn,body.desktop .tbtn.revbtn{display:flex}
body.onfoot .tbtn.revbtn,body.afoot .tbtn.revbtn,body.kidmode .tbtn.revbtn{display:none}
body.portrait .tbtn.revbtn{bottom:calc(396px + var(--sa-b))}
/* 교차로 근무는 하차 근무다 — 하차 버튼을 숨기면 내릴 수가 없다. 내린 뒤에는 「승차」로 바뀐다. */
body.portrait .tbtn.footbtn{bottom:calc(320px + var(--sa-b))}
/* 추격 중 화면: 붉은 비네트가 숨쉬듯 밝아진다(속도감·긴장). 음악은 audio.chaseTheme */
body.chasing::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at 50% 52%,rgba(0,0,0,0) 46%,rgba(120,10,10,.30) 100%);
  animation:chasePulse 1.9s ease-in-out infinite}
@keyframes chasePulse{0%,100%{opacity:.55}50%{opacity:1}}
body.chasing #section{border-color:rgba(255,90,90,.8)}
/* 타이틀 아래 링크: 홍보 영상 · 인트로 다시 보기 */
.titlelinks{display:flex;gap:14px;justify-content:center;margin:10px 0 2px;flex-wrap:wrap}
.titlelinks a{pointer-events:auto;font-size:12.5px;color:#cfe0ff;text-decoration:none;border-bottom:1px dotted rgba(207,224,255,.5);padding-bottom:1px}
.titlelinks a:hover{color:#fff;border-bottom-color:#fff}
/* 한국어 줄바꿈: 단어 중간에서 끊지 않는다(「걷 / 는다」 처럼 깨지던 것) */
.intro-shot .ttl,.intro-shot .sub,.intro-lines .il,.notice,#hint,#target,.section,.intro-title .tag,#kidNow{word-break:keep-all;overflow-wrap:break-word}

/* 인트로 전체화면 단추(건너뛰기 왼쪽) */
.skip.full{right:calc(126px + var(--sa-r))}
body.portrait .skip.full{right:calc(112px + var(--sa-r))}

/* 교통시설 관리(심시티 요소): 왼쪽 교차로 목록 · 오른쪽 설정판 */
#plan{display:none}
.plan-card{max-width:min(96vw,1040px)}
.pl-wrap{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.pl-list{flex:0 0 40%;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-right:4px}
.pl-head{font-size:12px;color:var(--dim);padding:2px 2px 4px}
.pl-item{pointer-events:auto;text-align:left;display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:9px;
  border:1px solid var(--edge);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;cursor:pointer}
.pl-item b{font-size:13px;font-weight:800}
.pl-item span{font-size:11px;color:var(--dim)}
.pl-item.on{background:rgba(255,207,63,.18);border-color:var(--accent)}
.pl-body{flex:1 1 auto;min-width:0;max-height:46vh;overflow-y:auto}
.pl-body h3{margin:0 0 2px;font-size:17px}
.pl-body h4{margin:12px 0 4px;font-size:13px;color:#cfe0ff}
.pl-sub{font-size:12px;color:var(--dim);margin-bottom:8px}
.pl-src{font-size:12px;line-height:1.5;color:#cfe0ff;background:rgba(40,90,170,.16);border-left:3px solid #4a86d8;border-radius:0 6px 6px 0;padding:6px 9px;margin:-2px 0 9px;word-break:keep-all}
.pl-src b{color:#fff}
.pl-src2{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.pl-real{font-style:normal;font-size:10.5px;color:#8ef0b0;border:1px solid rgba(140,240,176,.5);border-radius:4px;padding:0 4px;margin:0 2px}
.pl-sel{width:100%;box-sizing:border-box;font-size:14px;padding:9px 10px;margin:2px 0 8px;border-radius:8px;background:#1b2436;color:#eaf1ff;border:1px solid #3b4a66}
.pl-now{font-size:13px;line-height:1.55;color:#eaf1ff;background:rgba(40,90,170,.2);border-radius:8px;padding:7px 10px;margin-bottom:8px;word-break:keep-all}
.pl-now b{color:#ffe08a}
.pl-tod{max-height:210px;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid #2b3a55;border-radius:8px;margin-bottom:7px}
.pl-tod table{width:100%;border-collapse:collapse;font-size:12px}
.pl-tod th{position:sticky;top:0;background:#1b2436;color:var(--dim);font-weight:600;padding:5px 6px;text-align:left;white-space:nowrap}
.pl-tod td{padding:4px 6px;border-top:1px solid rgba(255,255,255,.07);white-space:nowrap;color:#dbe6f7}
.pl-tod td b{color:#fff}
.pl-tod tr.on td{background:rgba(255,224,138,.14)}
.pl-tod tr.on td:first-child::before{content:"▶ ";color:#ffe08a}
.pl-tod i{font-style:normal;font-size:10px;color:#ffb;opacity:.8}
.pl-est{font-style:normal;font-size:10.5px;color:#e8c98a;border:1px solid rgba(232,201,138,.5);border-radius:4px;padding:0 4px;margin:0 2px}
.pl-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:5px 0;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.05)}
.pl-lbl{font-size:12px;font-weight:700;flex:1 1 100%}   /* 이름은 한 줄 차지 — 좁은 화면에서 −/값/+ 가 흩어지지 않는다 */
.pl-val{font-size:16px;min-width:52px;text-align:center}
.pl-btn{pointer-events:auto;padding:7px 11px;border-radius:9px;border:1px solid var(--edge);background:rgba(255,255,255,.09);
  color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
.pl-btn.wide{padding:9px 14px}
.pl-min{font-size:11px;color:var(--dim);flex:1 1 100%}
.pl-note{font-size:11.5px;color:#ffd86b;margin:6px 0 2px;word-break:keep-all}
.pl-cams{display:flex;flex-direction:column;gap:5px}
.pl-cam{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.05)}
.pl-cam.dim{opacity:.45}
.pl-cam span{font-size:12px;min-width:104px}
.pl-tog{pointer-events:auto;padding:6px 10px;border-radius:8px;border:1px solid var(--edge);background:rgba(255,255,255,.07);
  color:#fff;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
.pl-tog.on{background:rgba(90,211,122,.24);border-color:rgba(90,211,122,.9)}
.pl-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
body.portrait .pl-wrap{flex-direction:column}
body.portrait .pl-list{flex:0 0 auto;width:100%;max-height:30vh}
/* 지도 레이어 목록의 색 점 */
.lay-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.5)}
/* 지도 베타 표시 */
.pl-beta{display:inline-block;font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;margin-left:5px;
  background:rgba(255,207,63,.22);border:1px solid rgba(255,207,63,.8);color:#ffd86b;vertical-align:1px}

/* 인트로 자료 출처 — 마지막 구간(21초~)에 아래쪽에서 조용히 뜬다. 남의 자료를 쓰면 출처를 밝힌다. */
.intro-credit{position:absolute;left:50%;bottom:12%;transform:translate(-50%,10px);max-width:92vw;text-align:center;
  pointer-events:none;opacity:0;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.12,.86,.2,1);z-index:6}
.intro-credit.on{opacity:1;transform:translate(-50%,0)}
.intro-credit b{display:block;font-size:clamp(13px,2.1vw,19px);font-weight:800;letter-spacing:1px;color:#fff;margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 24px rgba(6,10,20,.75)}
.intro-credit span{display:block;font-size:clamp(10px,1.6vw,14px);letter-spacing:.5px;color:#dbe5f6;font-weight:600;line-height:1.55;
  text-shadow:0 2px 8px rgba(0,0,0,.9)}
.intro-credit span+span{margin-top:2px}
@media (max-width:520px){ .intro-credit{bottom:16%} .intro-credit span:last-child{display:none} }

/* 학습 화면(12대 중과실): 위에 붙어 따라오는 닫기 줄 — 카드가 길어도 빠져나올 수 있다 */
.study .card.wide .study-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-6px -4px 8px;padding:8px 4px;background:linear-gradient(180deg,rgba(11,16,28,.97) 0%,rgba(11,16,28,.92) 70%,rgba(11,16,28,0) 100%)}
.study .study-x{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);color:#eef3fb;font-weight:800;font-size:13px;cursor:pointer}
.study .study-x:hover{background:rgba(255,255,255,.18)}

/* 음주 적발 절차 화면 — 단계 카드. 지나온 단계는 가라앉히고 지금 할 단계만 도드라지게 한다 */
.dp-steps{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.dp-step{display:flex;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.dp-step.now{border-color:rgba(120,190,255,.55);background:rgba(70,130,220,.16);box-shadow:0 0 0 1px rgba(120,190,255,.18)}
.dp-step.done{opacity:.55}
.dp-step.lock{opacity:.42}
.dp-n{flex:0 0 30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;background:rgba(255,255,255,.10);color:#eaf1fb}
.dp-step.done .dp-n{background:rgba(60,180,120,.32)}
.dp-step.now .dp-n{background:rgba(90,160,255,.42)}
.dp-b{flex:1 1 auto;min-width:0}
.dp-b b{display:block;font-size:15px;margin-bottom:2px}
.dp-dev{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:8px;font-size:11px;font-weight:700;
  background:rgba(245,197,24,.20);color:#f5d97a;vertical-align:middle}
.dp-res{margin-top:8px;padding:12px 14px;border-radius:14px;border:1px solid rgba(229,72,77,.45);background:rgba(229,72,77,.12)}
.dp-res b{display:block;font-size:16px;margin-bottom:4px}
.dp-res .law{font-size:12px;opacity:.85;margin-bottom:4px}
.dp-res .sit{font-size:14px;line-height:1.6}
.dp-res .tip{font-size:12px;opacity:.85;margin-top:6px}
.dp-res .primary{margin-top:12px}
/* 음주 절차 — 구현과 현실의 차이를 숨기지 않는다 */
.dp-gap{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(245,197,24,.45);background:rgba(245,197,24,.07)}
.dp-gap b{color:#f5d97a}
.dp-gap .sit{font-size:12.5px;line-height:1.6;opacity:.92}
.dp-un{margin:6px 0 0 18px;padding:0;font-size:12px;line-height:1.7;opacity:.85}
/* 절차 카드 글씨는 왼쪽 정렬 — .card 가 가운데 정렬이라 조문·본문이 가운데로 몰려 읽기 어려웠다(화면 점검) */
.dp-step,.dp-b,.dp-res,.dp-gap{text-align:left}
.dp-b .law,.dp-b .sit,.dp-b .tip{text-align:left}
/* 타이틀 기록 줄이 두 줄이 될 수 있다(최고 기록 + 누적 근무 일지) */
#best.two{white-space:pre-line;line-height:1.5}
/* 결과 카드: 다시 볼 것(오답 노트) · 근무 일지 */
#endStats .review{margin-top:10px;padding:8px 10px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:rgba(229,72,77,.13);border:1px solid rgba(229,72,77,.38);color:#ffd9da;text-align:left}
#endStats .career{margin-top:6px;font-size:12px;opacity:.85;text-align:left}

/* ---------- 화면 배치(도구·단추 옮기기) ----------
   소유자: 「도구와 단추들이 움직여질 수 있으면 좋겠어 … 화면을 최대한 가리지 않게.」
   옮긴 것은 .moved 로 제 자리(position:fixed)에 서고, 배치 모드에서만 끌린다. */
.tbtn.moved,#minimap.moved,.moved{position:fixed!important;margin:0!important}
/* 배치 모드에서는 조이스틱 영역이 단추를 가로채지 않게 — 끌기가 먼저다 */
/* ☰ 메뉴는 일시정지 단추 **왼쪽 한 칸**에 둔다 — 세로 줄(일시정지 64 · 시점 112 · ? 160 · 배속 208)을 밀지 않는다 */
.tbtn.small.menu{right:calc(58px + var(--sa-r));font-size:17px;line-height:1}
.tbtn.small.menu span{font-size:8.5px;font-weight:700}
.speedpanel .sp-row.set{margin-top:5px}
.speedpanel .sp-row.set button{min-width:58px;height:38px;font-size:12.5px}

/* 🚧 현장 안전조치(라바콘·불꽃신호기) — 사고·고장 현장 45m 안에서만 보인다 */
.tbtn.cone{width:60px;height:60px;background:rgba(255,122,0,.22);border-color:rgba(255,160,60,.9);margin-bottom:8px;display:none}
body.scene-near .tbtn.cone{display:flex}
.tbtn.cone .ico{font-size:22px}
.tbtn.cone.done{background:rgba(90,211,122,.25);border-color:rgba(90,211,122,.85)}

/* 🛰 관문 — 순환도로 밖 길 끝에서만 보인다(두 지도를 잇는 유일한 길) */
.tbtn.gate{width:58px;height:58px;background:rgba(120,160,255,.22);border-color:rgba(150,180,255,.9);margin-bottom:8px;display:none}
body.gate-near .tbtn.gate{display:flex}
.tbtn.gate .ico{font-size:20px}

/* 🪝 견인고리·견인줄 — 현장 45m 안에서만 보인다 */
.tbtn.tow{width:58px;height:58px;background:rgba(120,200,255,.20);border-color:rgba(140,210,255,.9);margin-bottom:8px;display:none}
body.scene-near .tbtn.tow{display:flex}
.tbtn.tow .ico{font-size:20px}
.tbtn.tow.on{background:rgba(90,211,122,.28);border-color:rgba(90,211,122,.9)}

/* 시작 화면 — 소리를 여는 한 번의 터치(자동재생 정책 때문에 필요하다) */
.overlay.boot{background:radial-gradient(ellipse at 50% 40%,rgba(14,22,40,.92),rgba(6,8,14,.98));z-index:70}
.bootcard{text-align:center;padding:26px 22px;max-width:min(92vw,420px)}
.bootcard .em{width:clamp(64px,16vw,110px);height:auto;display:block;margin:0 auto 10px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.bootcard .logo{font-size:clamp(26px,7.5vw,46px);font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.bootcard .sub{margin-top:6px;font-size:clamp(12px,3vw,16px);letter-spacing:6px;color:#cfe0ff;font-weight:800}
.bootcard .primary.big{margin-top:20px;width:100%;min-height:64px;font-size:19px;border-radius:16px}
.bootcard .dim.small{margin-top:10px;font-size:12px;line-height:1.5;word-break:keep-all}
.bootcard .ghost{margin-top:10px;width:100%;min-height:44px;font-size:13px}

/* ---------- 기본 배치와 좁은 화면 대응 ----------
   소유자: 「미니맵은 오른쪽 상단 윗부분이 기본값 · 필요시 이동」 · 「조작버튼도 최대한 가려지지 않게」 ·
   「좁은 스마트폰에서 어떻게 보일지 잘 모름, 기종에 따라 달라질 수 있으니까」.
   → 다섯 기종 크기(320x640 · 360x740 · 375x812 · 412x915 · 844x390)에서 **요소 15개의 겹침을 픽셀로 재서** 값을 정했다.
   세로 화면: 계기 칸이 위를 가로지르므로 지도는 **그 바로 아래 오른쪽 끝**, 작은 단추는 지도 아래 한 줄.
   가로 화면: 위가 비므로 지도는 **오른쪽 맨 위**, 작은 단추는 지도 **아래 가로 한 줄**(아래쪽 큰 단추와 겹치지 않게).
   그래도 가리면 **길게 눌러** 옮긴다(hudpos). */
body.portrait #minimap{top:calc(var(--hudh,97px) + 20px + var(--sa-t));right:calc(8px + var(--sa-r));width:148px;height:146px}
/* 작은 단추 다섯은 계기 칸 바로 아래 **왼쪽 두 줄**로 모은다 — 오른쪽 위는 지도, 오른쪽 아래는 단속·앰프 무리가 쓴다.
   전에는 오른쪽에 세로로 세웠더니 320x640 에서 맨 아래 것이 단속 단추와 겹쳤다(실측 34x2px). */
body.portrait .tbtn.small{top:calc(var(--hudh,97px) + 20px + var(--sa-t));left:calc(8px + var(--sa-l));right:auto}
body.portrait .tbtn.small.menu{left:calc(56px + var(--sa-l))}
body.portrait .tbtn.small.view{top:calc(var(--hudh,97px) + 20px + var(--sa-t));left:calc(104px + var(--sa-l))}
body.portrait .tbtn.small.help{top:calc(var(--hudh,97px) + 68px + var(--sa-t));left:calc(8px + var(--sa-l))}
body.portrait .tbtn.small.speed{top:calc(var(--hudh,97px) + 68px + var(--sa-t));left:calc(56px + var(--sa-l))}
body.portrait .speedpanel{top:calc(var(--hudh,97px) + 116px + var(--sa-t));left:calc(8px + var(--sa-l));right:auto}
/* 세로 화면 왼쪽 아래는 **세 층**이다 — 위에서부터 후진 · 하차 · 방향지시등, 그 아래가 조이스틱.
   전에는 하차가 방향지시등 위에 그대로 얹혀 있었다(실측 52x44px 겹침). */
body.portrait .tbtn.footbtn{right:auto;left:calc(16px + var(--sa-l));bottom:calc(267px + var(--sa-b))}
body.portrait .tbtn.revbtn{right:auto;left:calc(18px + var(--sa-l));bottom:calc(339px + var(--sa-b))}
@media (max-width:380px){
  body.portrait #minimap{width:130px;height:128px}
  body.portrait .notice{top:calc(var(--hudh,97px) + 160px + var(--sa-t))}
}
@media (orientation:landscape){            /* 눕힌 폰 — 지도는 오른쪽 맨 위, 작은 단추는 그 아래 가로 한 줄 */
  #minimap{top:calc(8px + var(--sa-t));right:calc(8px + var(--sa-r))}
  .tbtn.small{top:calc(196px + var(--sa-t));right:calc(10px + var(--sa-r))}
  .tbtn.small.menu{top:calc(196px + var(--sa-t));right:calc(58px + var(--sa-r))}
  .tbtn.small.view{top:calc(196px + var(--sa-t));right:calc(112px + var(--sa-r))}
  .tbtn.small.help{top:calc(196px + var(--sa-t));right:calc(166px + var(--sa-r))}
  .tbtn.small.speed{top:calc(196px + var(--sa-t));right:calc(214px + var(--sa-r))}
  .speedpanel{top:calc(244px + var(--sa-t));right:calc(72px + var(--sa-r))}
}
@media (orientation:landscape) and (max-height:430px){   /* 낮은 가로 화면 — 지도를 줄이고 줄을 올린다 */
  #minimap{width:130px;height:128px}
  .tbtn.small,.tbtn.small.menu,.tbtn.small.view,.tbtn.small.help,.tbtn.small.speed{top:calc(146px + var(--sa-t))}
  .speedpanel{top:calc(194px + var(--sa-t))}
}
@media (orientation:landscape){   /* 눕힌 폰 — 하차·후진은 오른쪽 가운데 띠(지도·작은 단추 줄 아래, 큰 단추 줄 위).
   왼쪽은 계기 칸(위) · 방향지시등 · 조이스틱이 이미 세 층으로 차 있다 — 거기에 두면 방향지시등과 겹친다. */
  .tbtn.footbtn{right:calc(16px + var(--sa-r));left:auto;bottom:calc(100px + var(--sa-b))}
  .tbtn.revbtn{right:calc(88px + var(--sa-r));left:auto;bottom:calc(100px + var(--sa-b))}
}
/* 어린이 교실 — 단계 칩이 계기 칸 바로 아래 한 줄을 차지하므로 세로 화면에서는 지도·작은 단추를 그만큼 내린다 */
body.kidmode.portrait #minimap{top:calc(var(--hudh,97px) + 78px + var(--sa-t))}
body.kidmode.portrait .tbtn.hand{bottom:calc(180px + var(--sa-b))}   /* 큰 ✋ 단추(96px)가 지도 아래에 선다 — 320x640 에서 9px 겹쳤다 */
body.kidmode.portrait .tbtn.small,body.kidmode.portrait .tbtn.small.menu,body.kidmode.portrait .tbtn.small.view{top:calc(var(--hudh,97px) + 78px + var(--sa-t))}
body.kidmode.portrait .tbtn.small.help,body.kidmode.portrait .tbtn.small.speed{top:calc(var(--hudh,97px) + 126px + var(--sa-t))}
body.kidmode.portrait .speedpanel{top:calc(var(--hudh,97px) + 174px + var(--sa-t))}
@media (max-width:420px){   /* 좁은 폰 — 단계 칩이 줄바꿈되면 두 줄이 되어 지도를 밀어낸다 */
  #kidSteps .chip{font-size:11px;padding:3px 6px}
  #kidSteps .chips{gap:4px}
  #kidNow{font-size:18px;margin-top:4px}
}
@media (orientation:landscape){   /* 눕힌 폰 — 도보 근무 단추(걷기·제어함)도 계기 칸을 피한다 */
  .tbtn.runbtn{bottom:calc(190px + var(--sa-b))}
  .tbtn.boxbtn{left:auto;right:calc(88px + var(--sa-r));bottom:calc(100px + var(--sa-b))}
}

/* ---------- 👶 영아 교통안전교실(4세) ----------
   소유자: 「어린이집 20명, 4세. 귀엽고 예쁘고 쉽게.」 → 프로젝터에서 보이게 **아주 크게**, 조작은 큰 단추 하나.
   화면 요소는 이 모드에서만 뜬다(body.totmode). */
#totSig{display:none;position:fixed;left:50%;top:calc(14px + var(--sa-t));transform:translateX(-50%);z-index:26;
  align-items:center;gap:14px;background:rgba(12,16,26,.72);border:3px solid rgba(255,255,255,.35);border-radius:24px;padding:10px 20px}
#totSigLamp{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:46px;
  background:#e23b3b;box-shadow:0 0 26px rgba(226,59,59,.75);transition:background .18s,box-shadow .18s}
#totSig.go #totSigLamp{background:#37c66b;box-shadow:0 0 30px rgba(55,198,107,.8)}
#totSigNum{font-size:62px;font-weight:900;color:#fff;min-width:74px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 3px 10px rgba(0,0,0,.6)}
#totBig{display:none;position:fixed;left:50%;top:calc(128px + var(--sa-t));transform:translateX(-50%);z-index:25;text-align:center;
  background:rgba(12,16,26,.62);border-radius:22px;padding:12px 26px;max-width:94vw;word-break:keep-all}
#totBig b{display:block;font-size:clamp(30px,7vw,62px);font-weight:900;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.7);letter-spacing:1px}
#totBig i{display:block;margin-top:4px;font-size:clamp(15px,3.2vw,26px);font-style:normal;color:#ffe8a3;font-weight:800}
#totBig.pop{animation:totpop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes totpop{0%{transform:translateX(-50%) scale(.72)}100%{transform:translateX(-50%) scale(1)}}
/* 🧊 얼음! — 화면이 얼어붙는다(파란 테두리 + 살짝 하얗게). 아이들이 「얼음」인 줄 눈으로 안다. 소유자 「얼음 땡을 더 실감나게」 */
body.toticy::after{content:'';position:fixed;inset:0;z-index:14;pointer-events:none;
  box-shadow:inset 0 0 70px 18px rgba(255,255,255,.55), inset 0 0 130px 40px rgba(120,200,255,.62), inset 0 0 260px 90px rgba(190,235,255,.3);
  background:radial-gradient(ellipse at center, rgba(255,255,255,0) 52%, rgba(150,215,255,.22) 100%);
  animation:toticyin .35s ease-out}
@keyframes toticyin{0%{opacity:0}100%{opacity:1}}
#totBig.shiver b{animation:totshiver .22s linear infinite}
@keyframes totshiver{0%{transform:translateX(-1.5px)}25%{transform:translateY(1.5px)}50%{transform:translateX(1.5px)}75%{transform:translateY(-1.5px)}100%{transform:translateX(-1.5px)}}
@media (prefers-reduced-motion:reduce){#totBig.shiver b{animation:none}body.toticy::after{animation:none}}

#totSay{display:none;position:fixed;left:50%;bottom:calc(128px + var(--sa-b));transform:translateX(-50%);z-index:25;
  font-size:clamp(17px,3.6vw,30px);font-weight:800;color:#fff;background:rgba(12,16,26,.66);border-radius:18px;padding:10px 20px;
  max-width:92vw;text-align:center;word-break:keep-all;line-height:1.4}
#totStars{display:none;position:fixed;right:calc(14px + var(--sa-r));top:calc(14px + var(--sa-t));z-index:25;font-size:clamp(22px,4.4vw,38px);letter-spacing:2px}
.tbtn.totbtn{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(26px + var(--sa-b));
  width:auto;min-width:210px;height:88px;padding:0 26px;border-radius:26px;background:rgba(255,207,63,.94);border:3px solid #fff;
  color:#1b1b1b;font-size:26px;font-weight:900;box-shadow:0 8px 26px rgba(0,0,0,.45)}
body.totmode .tbtn.totbtn{display:flex}
/* 🎮 해보기 마당에서만 스틱과 걷기·뛰기 단추가 나온다 — 아이가 직접 걸어 보는 마당이다(소유자 2026-09-12) */
body.totmode .tbtn.runbtn{display:none!important}
body.totmode.totfree .tbtn.runbtn{display:flex!important}
body.totmode #stickZone{display:none!important}
body.totmode.totfree #stickZone{display:block!important}
.tbtn.totbtn span{font-size:26px;font-weight:900}
/* 영아 교실에서는 계기·단속·조작을 감춘다 — 아이들이 볼 것은 신호등과 캐릭터뿐이다 */
body.totmode #hudbar,body.totmode #minimap,body.totmode .cluster.right,body.totmode #stickZone,body.totmode .sigs,
body.totmode .tbtn.hand,body.totmode .tbtn.footbtn,body.totmode .tbtn.revbtn,
body.totmode #kidSteps,body.totmode .tbtn.small.speed,body.totmode .tbtn.small.view,body.totmode #target{display:none!important}
/* 마당 점(①②③④) · 다음 마당 단추 — 선생님이 진행 상황을 보고 앞으로 넘긴다 */
/* 🛣 여기는 어디? — 바닥 색과 **같은 색 칩**을 화면 아래에 둔다(3D 글자판은 카메라 밖으로 나간다 · 실측) */
#totWhere{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(256px + var(--sa-b));z-index:25;gap:6px;flex-wrap:nowrap}
#totWhere span{font-size:15px;font-weight:900;color:#0d1424;padding:7px 11px;border-radius:12px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:.45;transform:scale(.94)}
#totWhere span.w0{background:#7ff0a4}
#totWhere span.w1{background:#ff9d9d}
#totWhere span.w2{background:#ffe98a}
#totWhere span.on{opacity:1;transform:scale(1.08);box-shadow:0 3px 14px rgba(0,0,0,.5)}
@media (max-width:380px){#totWhere span{font-size:13px;padding:6px 8px}}
#totDots{display:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(56px + var(--sa-t));z-index:25;gap:10px}   /* 마당 점은 **위**(하트 아래) — 아래에 두면 3줄 자막이 덮는다(v0.9.77 실측) */
#totDots span{font-size:26px;opacity:.32;filter:grayscale(1)}
#totDots span.ok{opacity:.6;filter:none}
#totDots span.on{opacity:1;filter:none;transform:scale(1.25)}
.tbtn.totnext{display:none;position:fixed;right:calc(16px + var(--sa-r));bottom:calc(46px + var(--sa-b));width:64px;height:64px;
  border-radius:20px;background:rgba(255,255,255,.9);border:3px solid #ffd93d;color:#1b1b1b;font-size:26px;font-weight:900}
body.totmode .tbtn.totnext{display:flex}
/* 잠긴 큰 단추 — 토수니 손을 잡기 전에는 건너기를 누를 수 없다(스펙: 혼자 건너기 엔딩 없음) */
.tbtn.totbtn.locked{background:rgba(255,255,255,.55);border-color:#cfd6e2;color:#6b7280}

/* 🚨 추격 패널 — 상용 추격전의 감각: **거리 게이지**와 **검거 게이지**를 눈으로 본다(소유자 2026-09-12 「상용 퀄리티 높은 게임처럼」).
   추격전에서만 뜬다(body.chasing). 숫자만 있던 줄로는 「지금 너무 붙었나」를 0.5초에 읽을 수 없었다. */
#chaseHud{display:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--hudh,97px) + 14px + var(--sa-t));z-index:24;
  width:min(88vw,372px);background:rgba(9,14,26,.74);border:1px solid rgba(255,96,96,.48);border-radius:14px;padding:8px 10px 9px;
  box-shadow:0 6px 22px rgba(0,0,0,.45)}
body.chasing #chaseHud{display:block}
#chaseHud .ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#chaseHud .ch-name{font-size:15px;font-weight:900;color:#ffdada;letter-spacing:.2px;white-space:nowrap}
#chaseHud .ch-why{font-size:11px;font-weight:700;color:#ffb9b9;opacity:.92;text-align:right;word-break:keep-all}
#chaseHud .ch-bar{position:relative;height:17px;margin-top:7px;border-radius:9px;overflow:hidden;
  background:linear-gradient(90deg,#6b2020 0 15%,#1f4a2b 15% 70%,#2b3140 70% 100%)}
#chaseHud .ch-zone{position:absolute;left:15%;width:55%;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.35);border-right:1px solid rgba(255,255,255,.35)}
#chaseHud .ch-mark{position:absolute;top:-2px;width:5px;height:21px;border-radius:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);transform:translateX(-50%);transition:left .08s linear}
#chaseHud .ch-mark.near{background:#ff5a5a}
#chaseHud .ch-mark.far{background:#a9b3c6}
#chaseHud .ch-num{position:absolute;right:6px;top:1px;font-size:11.5px;font-weight:900;color:#eef3ff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
#chaseHud .ch-prog{position:relative;height:11px;margin-top:6px;border-radius:6px;background:rgba(255,255,255,.13);overflow:hidden}
#chaseHud .ch-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#37c66b,#a8f0c0);transition:width .12s linear}
#chaseHud .ch-ptxt{position:absolute;inset:0;text-align:center;font-size:9.5px;font-weight:900;color:#0d1424;line-height:11px;letter-spacing:.2px}
#chaseHud .ch-chips{display:flex;gap:6px;margin-top:7px;flex-wrap:nowrap}
#chaseHud .ch-chips span{font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:8px;background:rgba(255,255,255,.14);color:#e2e9f7;white-space:nowrap}
#chaseHud .ch-chips span.on{background:#2e7d46;color:#eafff0}
#chaseHud .ch-chips span.warn{background:#9a2d2d;color:#ffe6e6}
/* 대상이 화면 밖이면 좌·우 화살표로 알린다 — 상용 게임이 늘 하는 일이다(놓친 줄 알고 헤매지 않게) */
#chaseArrow{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:24;font-size:42px;font-weight:900;color:#ff6b6b;
  text-shadow:0 2px 12px rgba(0,0,0,.7);animation:chpulse .85s ease-in-out infinite}
#chaseArrow.left{left:calc(8px + var(--sa-l));display:block}
#chaseArrow.right{right:calc(8px + var(--sa-r));display:block}
@keyframes chpulse{0%,100%{opacity:.5;transform:translateY(-50%) scale(.94)}50%{opacity:1;transform:translateY(-50%) scale(1.06)}}
/* 속도선 — 85km/h 부터 화면 가장자리가 흐른다. 값싸고 효과가 크다(모션블러는 폰에서 비싸다) */
body.fastlines::after{content:'';position:fixed;inset:0;z-index:12;pointer-events:none;opacity:var(--fast,0);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0) 44%, rgba(255,255,255,.10) 76%, rgba(255,255,255,.26) 100%)}
/* 경광등이 화면 테두리를 물들인다(사이렌 ON) — 왼쪽 파랑·오른쪽 빨강이 번갈아 */
body.sirenlit::before{content:'';position:fixed;inset:0;z-index:11;pointer-events:none;animation:sirenedge 1.05s steps(1,end) infinite}
@keyframes sirenedge{
  0%,49%{box-shadow:inset 42px 0 72px -34px rgba(64,124,255,.80), inset -42px 0 72px -34px rgba(255,64,64,.22)}
  50%,100%{box-shadow:inset 42px 0 72px -34px rgba(64,124,255,.22), inset -42px 0 72px -34px rgba(255,64,64,.80)}}
@media (prefers-reduced-motion:reduce){
  body.sirenlit::before{animation:none;box-shadow:inset 42px 0 72px -34px rgba(64,124,255,.45), inset -42px 0 72px -34px rgba(255,64,64,.45)}
  #chaseArrow{animation:none}}
@media (max-width:380px){#chaseHud{width:94vw;padding:7px 8px 8px}#chaseHud .ch-name{font-size:14px}#chaseHud .ch-why{font-size:10px}}

/* 🏁 연습 서킷 — 출발 신호등과 랩·섹터 패널. 상용 레이싱이 늘 두는 둘이다(소유자 2026-09-12 「연습 서킷을 제대로」).
   서킷·자유 주행에서만 뜬다(body.laptime). 랩 시계 한 줄로는 「지금 빠른가」를 알 수 없다 — 섹터와 델타가 그것을 말한다. */
#startLights{display:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--hudh,97px) + 26px + var(--sa-t));z-index:26;
  gap:8px;align-items:center;flex-direction:column}
body.startlit #startLights{display:flex}
#startLights i{display:inline-block;width:26px;height:26px;margin:0 5px;border-radius:50%;background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.30);vertical-align:middle}
#startLights i.on{background:#e12d2d;border-color:#ff8a8a;box-shadow:0 0 16px rgba(255,60,60,.85)}
#startLights i.go{background:#2ed06a;border-color:#b8f7cf;box-shadow:0 0 18px rgba(46,208,106,.9)}
#startLights b{display:block;margin-top:6px;font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);letter-spacing:1px}
#lapPanel{display:none;position:fixed;left:calc(8px + var(--sa-l));top:calc(var(--hudh,97px) + 12px + var(--sa-t));z-index:23;
  min-width:150px;background:rgba(9,14,26,.70);border:1px solid rgba(160,190,255,.30);border-radius:12px;padding:7px 9px 8px;
  box-shadow:0 5px 18px rgba(0,0,0,.4)}
body.laptime #lapPanel{display:block}
#lapPanel .lp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#lapPanel .lp-cur{font-size:19px;font-weight:900;color:#eaf1ff;font-variant-numeric:tabular-nums;letter-spacing:.3px}
#lapPanel .lp-delta{font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums}
#lapPanel .lp-delta.up{color:#ff7a7a}
#lapPanel .lp-delta.dn{color:#6ce89a}
#lapPanel .lp-secs{display:flex;gap:5px;margin-top:6px}
#lapPanel .lp-s{flex:1 1 0;text-align:center;font-size:10.5px;font-weight:800;padding:3px 0;border-radius:7px;
  background:rgba(255,255,255,.10);color:#d8e2f5;font-variant-numeric:tabular-nums}
#lapPanel .lp-s.dn{background:#1f6b3c;color:#e8ffef}
#lapPanel .lp-s.up{background:#7d2b2b;color:#ffe9e9}
#lapPanel .lp-s.best{background:#6b3fa0;color:#f3e9ff}
#lapPanel .lp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:10.5px;font-weight:700;color:#b9c6de;font-variant-numeric:tabular-nums}
@media (max-width:380px){#lapPanel{min-width:132px;padding:6px 7px 7px}#lapPanel .lp-cur{font-size:17px}#startLights i{width:22px;height:22px;margin:0 4px}}