/* "Caution tape + protest zine": ink-black frames with hard offset shadows, hot pink and highlighter yellow. */
:root {
  --ink: #16122a; --paper: #fffaf0; --muted: #5e5873; --line: #d9d3e6;
  --pink: #ff3d7f; --yellow: #ffd23f; --cyan: #3ddcff; --mint: #7dffb0; --police: #2541b2;
  --display: "Bungee", "Arial Black", Impact, system-ui, sans-serif;
  --body: "Baloo 2", system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #d8c9a4; color: var(--ink); font-family: var(--body); }
canvas { display: block; touch-action: none; cursor: crosshair; position: fixed; left: 0; top: 0; }
#c { z-index: 1; }
#c3 { z-index: 0; display: none; width: 100vw; height: 100vh; }

#menu { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: radial-gradient(rgba(255, 61, 127, .16) 1.5px, transparent 1.6px) 0 0 / 14px 14px, radial-gradient(ellipse at 50% 40%, rgba(22, 18, 42, .45), rgba(12, 9, 24, .9)); }
#menu.hide { display: none; }
.panel { position: relative; width: 100%; max-width: 720px; margin: auto; padding: 34px 28px 30px; overflow: hidden;
  background: linear-gradient(rgba(37, 65, 178, .06) 1px, transparent 1px) 0 0 / 100% 26px, var(--paper);
  border: 3px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--ink); }
.tape { position: absolute; left: -10px; right: -10px; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 16px, var(--ink) 16px 32px); border-bottom: 2px solid var(--ink); }
.tape.bottom { top: auto; bottom: 0; border-bottom: 0; border-top: 2px solid var(--ink); }
.stamp { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--pink); border: 2px solid var(--pink); border-radius: 4px; padding: 1px 8px; transform: rotate(-2deg); background: rgba(255, 61, 127, .06); }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6.4vw, 54px); line-height: 1; letter-spacing: -.5px; margin: 12px 0 0; text-shadow: 3px 3px 0 var(--yellow); }
h1 em { font-style: normal; color: var(--pink); text-shadow: 3px 3px 0 var(--ink); }
.hindi { font-weight: 800; font-size: 20px; color: var(--police); margin-top: 2px; }
.splash { display: inline-block; margin: 6px 0 10px; padding: 2px 10px; background: var(--yellow); border: 2px solid var(--ink); font-weight: 800; font-size: 13px; transform: rotate(1.2deg); box-shadow: 3px 3px 0 var(--ink); }
.splash:empty { display: none; }
.lede { color: var(--muted); font-size: 15.5px; line-height: 1.45; margin-bottom: 16px; }
.lede b { color: var(--ink); }
.fld { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.fld input { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 17px; font-weight: 700; color: var(--ink); padding: 9px 14px; border: 3px solid var(--ink); border-radius: 4px; background: #fff; outline: none; box-shadow: 4px 4px 0 var(--line); }
.fld input:focus { box-shadow: 4px 4px 0 var(--pink); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.side { text-align: left; font: inherit; color: inherit; border: 3px solid var(--ink); background: #fff; border-radius: 4px; padding: 12px 14px; cursor: pointer; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 2px; box-shadow: 5px 5px 0 var(--ink); }
.side:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.side .ic { font-size: 28px; }
.side .nm { font-family: var(--display); font-size: 17px; font-weight: 400; }
.side .ds { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.side.sel { background: var(--yellow); box-shadow: 5px 5px 0 var(--pink); transform: rotate(-.6deg); }
.side.sel .ds { color: var(--ink); }
.side[data-t=C].sel { background: #cfefff; box-shadow: 5px 5px 0 var(--police); transform: rotate(.6deg); }
#muddaWrap { margin-bottom: 16px; }
#muddaWrap.off { display: none; }
.sub { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
#muddas { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 3px 11px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.chip:hover { background: #f4f0ff; }
.chip.sel { background: var(--c); color: #fff; box-shadow: 3px 3px 0 var(--ink); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.row { display: flex; gap: 12px; }
.big { flex: 2; font-family: var(--display); font-weight: 400; font-size: 23px; letter-spacing: .5px; color: #fff; border: 3px solid var(--ink); border-radius: 4px; padding: 11px; cursor: pointer; background: var(--pink); box-shadow: 6px 6px 0 var(--ink); text-shadow: 2px 2px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.big:hover { background: #ff5a93; }
.big.ghost { flex: 1; background: #fff; color: var(--ink); text-shadow: none; font-size: 17px; }
.big:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.how { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.how summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.how .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.how h3 { font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.how ul { padding-left: 16px; line-height: 1.5; }
kbd { background: #fff; border: 2px solid var(--ink); border-radius: 3px; padding: 0 4px; font-size: 11px; font-weight: 700; margin-right: 2px; box-shadow: 1px 1px 0 var(--ink); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.opts button { flex: 1; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 4px; padding: 6px 8px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.opts button:hover { background: var(--yellow); }
.viewPicker{display:flex;align-items:center;gap:8px;flex:1;padding:6px 8px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;white-space:nowrap}
.viewPicker select{min-height:32px;max-width:100%;font:inherit;background:#fff;color:var(--ink);border:1px solid #91a5ad;border-radius:5px;padding:4px 6px}
.viewStatus{flex-basis:100%;font-size:12px;color:var(--ink)}
.opts button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.fine { font-size: 12px; color: var(--muted); margin-top: 12px; }
.fine a { color: var(--police); }

#touch { display: none; }
#touch.on { display: block; }
#lookHint{display:none;position:fixed;z-index:4;right:12%;top:45%;color:#fff;background:#20354366;padding:7px 10px;border-radius:14px;font:600 10px system-ui;letter-spacing:1px;pointer-events:none;user-select:none}
body[data-playing="true"][data-touch-look="true"]:not([data-look-used="true"]) #lookHint{display:block}
#stick { position: fixed; z-index: 5; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(255, 210, 63, .8); background: rgba(22, 18, 42, .25); display: none; pointer-events: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); }
.tb { position: fixed; z-index: 6; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); color: #fff; font: 400 14px var(--display); background: var(--pink); box-shadow: 4px 4px 0 var(--ink); text-shadow: 1px 1px 0 var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
#tAct { right: 18px; bottom: 110px; }
#tAlt { right: 104px; bottom: 40px; width: 62px; height: 62px; font-size: 12px; background: #5e5873; }
#tAlt.gas { background: #6f9a3a; }
.tb.shut { display: none; right: 18px; bottom: 200px; width: 54px; height: 54px; font-size: 22px; background: #b3123f; }
#tBike { right: 18px; bottom: 270px; } #tBus { right: 80px; bottom: 270px; } #tMap { top: 64px; }
.tb.ride { width: 52px; height: 52px; font-size: 22px; background: #2f9e5b; }
.tb.mini { right: 12px; top: 12px; width: 44px; height: 44px; font-size: 18px; background: var(--ink); border-color: var(--yellow); }

@media (max-width: 560px) {
  .sides, .how .cols { grid-template-columns: 1fr; }
  .panel { padding: 26px 16px 24px; box-shadow: 6px 6px 0 var(--ink); }
  .lede { font-size: 13.5px; }
  .side .ds { font-size: 12.5px; }
  .opts button { flex: 1 1 45%; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .panel { padding: 22px 16px 18px; }
  h1 { font-size: 28px; }
  .hindi, .splash { display: none; }
  .lede { font-size: 12.5px; margin-bottom: 8px; }
  .side { padding: 8px 10px; }
  .side .ic { font-size: 20px; }
  .side .ds { font-size: 11.5px; }
}

/* avatar maker */
.avatar { margin: 4px 0 16px; border: 3px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.avatar summary { cursor: pointer; font-weight: 800; padding: 8px 12px; background: var(--yellow); border-bottom: 3px solid var(--ink); }
.avatar:not([open]) summary { border-bottom: 0; }
.avHint { font-weight: 600; color: var(--muted); font-size: 13px; }
.av { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 12px; }
.avPrev { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.avPrev canvas { position: static; display: block; width: 190px; height: 236px; border: 2px solid var(--ink); border-radius: 4px; background: radial-gradient(circle at 50% 85%, rgba(0,0,0,.08) 0 30%, transparent 31%), linear-gradient(#e9f6ff, #fff3d6); }
.avBtns { display: flex; gap: 6px; }
.avBtns button { flex: 1; font: inherit; font-size: 13px; font-weight: 800; border: 2px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; padding: 4px; }
.avBtns button:hover { background: var(--yellow); }
#avOpts { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow: auto; padding-right: 4px; }
.avRow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.avLbl { width: 100%; font-size: 12px; font-weight: 800; color: var(--muted); }
.avRow .chip { padding: 1px 9px; font-size: 13px; }
.avRow .chip.sel { background: var(--ink); color: #fff; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0; }
.sw.sel { box-shadow: 0 0 0 3px var(--pink); transform: scale(1.1); }
.avNote { font-size: 12px; color: var(--muted); padding: 0 12px 10px; }
@media (max-width: 560px) { .av { grid-template-columns: 1fr; } .avPrev { align-items: center; } #avOpts { max-height: none; } }

/* metro destination picker */
#metroPick { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 9, 24, .72); }
#metroPick.hide { display: none; }
.mp { position: relative; width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--ink); padding: 26px 18px 16px; }
.mp header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 20px; }
.mp header b { font-family: var(--display); font-weight: 400; }
#mpFrom { color: var(--muted); font-weight: 700; font-size: 15px; }
#mpClose { margin-left: auto; font: inherit; font-weight: 800; border: 2px solid var(--ink); border-radius: 4px; background: #fff; cursor: pointer; width: 34px; height: 34px; box-shadow: 2px 2px 0 var(--ink); }
.mpLine { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 0 8px 12px; border-left: 6px solid var(--c); margin-bottom: 6px; }
.mpName { width: 100%; font-weight: 800; color: var(--c); filter: brightness(.75); }
.mpSt { font: inherit; font-size: 13.5px; font-weight: 700; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; }
.mpSt:hover:not(:disabled) { background: var(--yellow); }
.mpSt.here { background: var(--ink); color: #fff; }
.mpSt.shut { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.mpFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
#mpAny { font: inherit; font-weight: 800; border: 2px solid var(--ink); border-radius: 4px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); padding: 5px 10px; cursor: pointer; }

.tb.policeControl{display:none;width:64px;height:42px;font:800 11px system-ui;background:#194f82;}#tJump{right:142px;bottom:200px}#tPickup{right:74px;bottom:200px}#tMetroShut{right:80px;bottom:330px}.metroService{color:#9b3e22;font-weight:800;}

/* A calmer frame for the anime city, with the satire kept in the writing. */
:root{--ink:#203543;--paper:#f5f1e7;--muted:#65737c;--line:#d5ddd9;--pink:#a94f42;--yellow:#e6c788;--cyan:#a4cedd;--mint:#b2d7bf;--police:#416a88;--body:system-ui,"Segoe UI",sans-serif}
#menu{background:radial-gradient(ellipse at 48% 35%,rgba(64,96,105,.48),rgba(13,27,36,.94))}
.panel,.mp{border:1px solid #c7d0cc;border-radius:18px;background:var(--paper);box-shadow:0 24px 80px #071b2a66;padding:32px}
.tape{height:4px;background:linear-gradient(90deg,#dfb37e,#87aaa3,#698fa7);border:0;left:0;right:0}.tape.bottom{display:none}
.stamp{transform:none;border:0;padding:0;background:none;color:#7e6054;font:700 10px var(--body);letter-spacing:1.4px}
h1,h1 em{color:var(--ink);text-shadow:none}h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-1px}h1 em{color:var(--pink)}
.hindi{font-size:16px;margin-top:8px}.splash{transform:none;box-shadow:none;border:0;background:#e9e1cf;border-radius:5px;font-size:11px;padding:5px 9px;margin:10px 0}
.lede{font-size:14px;line-height:1.65}.fld{font-size:12px}.fld input{border:1px solid #b8c7ca;border-radius:8px;box-shadow:none;padding:11px 12px;font-size:16px;font-weight:500}
.fld input:focus{box-shadow:0 0 0 3px #8bb5b544;border-color:#5d8d97}
.side{border:1px solid #c8d3d2;border-radius:10px;box-shadow:none;padding:14px;transition:background .15s,border-color .15s}
.side:hover{transform:none;box-shadow:none;background:#edf2ee;border-color:#88a4ab}.side .nm{font-size:15px}.side .ds{font-size:12px;line-height:1.6}.side .ic{font-size:23px}
.side.sel,.side[data-t=C].sel{transform:none;box-shadow:inset 0 0 0 1px #7d9a9d;background:#e3ebe6;border-color:#7d9a9d}
.chip,.mpSt{border:1px solid #bdc9c7;padding:5px 11px;font-size:12px}.chip.sel{box-shadow:none}.chip:hover,.mpSt:hover:not(:disabled){background:#e2eae5}
.big{border:1px solid #8c493e;border-radius:9px;box-shadow:0 3px 8px #25303b22;background:#a94f42;text-shadow:none;font:800 18px var(--body);letter-spacing:.5px;padding:13px}
.big:hover{background:#b86050}.big.ghost{border-color:#bac8c8;font:700 14px var(--body)}.big:active{transform:translateY(1px);box-shadow:none}
.opts{gap:7px}.opts button{border:1px solid #c5cecc;border-radius:7px;box-shadow:none;font-size:11px;font-weight:600;padding:8px}.opts button:hover{background:#e2eae5}.opts button:active{transform:none;box-shadow:none}
.how{font-size:12px;line-height:1.6}kbd{border:1px solid #bac7c7;box-shadow:none;background:#fff;border-radius:4px}.fine{font-size:10px;line-height:1.6}
.mp header b{font:800 20px var(--body)}.mpName{font-size:12px}.mpLine{border-left-width:3px;padding-left:12px}.mpSt{padding:6px 10px}
#mpClose,#mpAny{border:1px solid #bac7c7;border-radius:7px;box-shadow:none}
.tb{border:1px solid #b7ced388;background:#294f63dd;box-shadow:0 3px 12px #102b3d44;text-shadow:none;font-family:var(--body);font-weight:700}.tb.mini{background:#1b3548dd;border-color:#b7ced355}.tb.ride{background:#3d6a5cdd}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #548d9f;outline-offset:3px}
@media(max-width:560px){.panel,.mp{padding:26px 18px;border-radius:12px}.side{padding:10px 12px}.lede{font-size:12px}.sides{gap:8px}.side .ic{font-size:19px}.side .ds{font-size:11px}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}

#menu .panel{max-width:760px;padding:24px 28px}
#menu .lede{margin-bottom:12px;font-size:13px;line-height:1.5}
#menu h1{font-size:clamp(28px,4.3vw,42px);margin-top:8px}
#menu .hindi{display:inline-block;margin-top:5px;font-size:14px}
#menu .splash{margin:4px 0 6px 10px;padding:4px 7px}
#idCard{grid-template-columns:66px 1fr auto;grid-template-rows:auto auto;gap:4px 12px;padding:10px 12px;margin:6px 0 12px;border:1px solid #b6c6c7;border-radius:9px;box-shadow:none;background:#fffbf1}
#idCard .idPhoto{grid-row:1 / 3;grid-column:1;border:1px solid #a7b7b9;height:76px}
#idCard .idPhoto canvas{width:64px;height:76px}
#idCard .idInfo{grid-row:1;grid-column:2}
#idCard #idStamp{grid-row:2;grid-column:2;justify-self:start;margin:0;font-size:8px;transform:none}
#idCard .idEdit{grid-row:1 / 3;grid-column:3;align-self:center;padding:8px;border-radius:6px;background:#e4ebe5;white-space:nowrap;color:#395e63}
#menu .side{padding:10px 12px;gap:3px}#menu .side .ic{font-size:20px}#menu .side .ds{font-size:11px;line-height:1.5}#menu .sides{gap:10px;margin-bottom:12px}
#menu .opts{margin-top:10px}#menu .how{margin-top:10px}#menu .fine{margin-top:10px}
.phoneOnly{display:none!important}body[data-phone="true"] .phoneOnly{display:block!important}
body[data-phone="true"] .row{flex-wrap:wrap}
body[data-phone="true"] .row>.big{flex:1;min-width:0}
#playFullscreen{background:#294f63;border-color:#294f63;min-height:48px;font-size:16px;order:-1}
body[data-phone="true"] .row>#playFullscreen{flex:1 0 100%}
.fullscreenHelp{margin:10px 0;padding:12px;border:1px solid #b6c9cf;background:#e5edf0;border-radius:8px;color:#294956;font:500 12px/1.6 system-ui}
body:not([data-playing="true"]) #touch{display:none!important}
#tLandscape{right:64px}
body[data-phone="true"][data-landscape="false"] #tLandscape{top:64px}
#orientationHint{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);width:min(360px,82vw);padding:10px 14px;background:#172d40ee;border:1px solid #9cc6ce;border-radius:10px;color:#fff;text-align:center;font:600 13px system-ui;pointer-events:none}
@media(orientation:landscape) and (max-height:600px){
 body[data-phone="true"] #menu{align-items:flex-start;padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}
 body[data-phone="true"] #menu .panel{max-width:720px;padding:18px 22px}
 body[data-phone="true"] .tb{width:58px;height:58px;right:max(14px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}
 body[data-phone="true"] #tAct{width:66px;height:66px;bottom:calc(24px + env(safe-area-inset-bottom))}
 body[data-phone="true"] #tAlt{right:calc(92px + env(safe-area-inset-right));bottom:calc(25px + env(safe-area-inset-bottom));width:54px;height:54px}
 body[data-phone="true"] .tb.mini{top:calc(8px + env(safe-area-inset-top));bottom:auto;width:44px;height:44px}
 body[data-phone="true"] #tLandscape{right:calc(66px + env(safe-area-inset-right))}
 body[data-phone="true"] #tMap{top:calc(60px + env(safe-area-inset-top))}
 body[data-phone="true"] .tb.ride{bottom:calc(112px + env(safe-area-inset-bottom));width:44px;height:44px}
 body[data-phone="true"] #tBike,body[data-phone="true"] #tBus{bottom:calc(112px + env(safe-area-inset-bottom))}
 body[data-phone="true"] #tBus{right:calc(66px + env(safe-area-inset-right))}
 body[data-phone="true"] #tShut{right:calc(118px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom));width:44px;height:44px}
 body[data-phone="true"] .tb.policeControl{width:58px;height:44px;bottom:calc(170px + env(safe-area-inset-bottom))}
 body[data-phone="true"] #tJump,body[data-phone="true"] #tPickup,body[data-phone="true"] #tMetroShut{bottom:calc(170px + env(safe-area-inset-bottom))}
 body[data-phone="true"] #tPickup{right:calc(80px + env(safe-area-inset-right))}
 body[data-phone="true"] #tJump{right:calc(146px + env(safe-area-inset-right))}
 body[data-phone="true"] #tMetroShut{right:max(14px,env(safe-area-inset-right))}
 body[data-phone="true"] #stick{width:104px;height:104px;margin:-52px 0 0 -52px}
}
@media(max-width:560px){#menu .panel{padding:22px 16px}#idCard{grid-template-columns:56px 1fr;gap:4px 9px}#idCard .idPhoto{height:68px}#idCard .idPhoto canvas{width:54px;height:68px}#idCard .idEdit{grid-row:3;grid-column:1 / 3;text-align:center;padding:5px}#menu .splash{margin-left:0}.idTop{flex-wrap:wrap}}
.onlineChoice{margin:10px 0 12px;padding:10px 12px;background:#e6ede8;border:1px solid #c0ceca;border-radius:8px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:11px}
.onlineChoice[hidden]{display:none}.onlineChoice label{align-self:center;font-weight:700}.onlineChoice select{min-width:0;padding:6px;border:1px solid #adbfbc;border-radius:5px;background:#fff;font:inherit;color:#294956}.onlineChoice p{grid-column:1 / -1;color:#536a72;line-height:1.5}.onlineChoice button{grid-column:1 / -1;justify-self:start;border:0;background:transparent;text-decoration:underline;color:#496a78;font:inherit;cursor:pointer}.big:disabled{opacity:.65;cursor:wait}
#gameTools{position:fixed;z-index:7;top:calc(60px + env(safe-area-inset-top));right:calc(66px + env(safe-area-inset-right));display:flex;gap:8px}
#gameTools button{width:44px;height:44px;border:1px solid #b7ced355;border-radius:50%;background:#1b3548dd;color:#fff;font:700 19px system-ui}
body:not([data-playing="true"]) #gameTools,body:not([data-playing="true"]) #emojiBubbles{display:none}
#reactionPicker{position:fixed;z-index:35;top:calc(111px + env(safe-area-inset-top));right:14px;padding:7px;border:1px solid #7899a6;border-radius:14px;background:#172d40f5;box-shadow:0 8px 24px #0004}
#reactionPicker button{width:44px;height:44px;background:transparent;border:0;font-size:25px;border-radius:8px}#reactionPicker button:hover{background:#ffffff20}
#globalChat{position:fixed;z-index:36;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px));max-height:70dvh;display:flex;flex-direction:column;background:#172d40f7;border:1px solid #7899a6;border-radius:15px;color:#edf4f4;box-shadow:0 12px 40px #0005;padding:12px;font:13px system-ui}
#globalChat header,#fullMap header{display:flex;align-items:center;gap:14px;justify-content:space-between}#globalChat button,#fullMap button{min-width:44px;min-height:44px;border:1px solid #88a5ad;border-radius:8px;background:#294f63;color:#fff;font:600 13px system-ui}
#chatMessages{list-style:none;margin:9px 0;padding:0;overflow:auto;min-height:90px;height:210px;overscroll-behavior:contain}#chatMessages li{margin:0 0 9px;overflow-wrap:anywhere}#chatMessages b{display:block;font:600 10px system-ui;color:#9fc7d0;margin-bottom:3px}#chatMessages span{white-space:pre-wrap}
#chatStatus{font:11px system-ui;color:#b4cfcb;margin:4px 0 8px}#chatForm{display:flex;gap:8px}#chatText{min-width:0;flex:1;border-radius:8px;border:1px solid #93aeb6;padding:10px;font:16px system-ui;background:#f5f6f1;color:#203543}
#fullMap{position:fixed;inset:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));z-index:40;display:flex;flex-direction:column;background:#172d40;border:1px solid #88a5ad;border-radius:16px;overflow:hidden;color:#fff;box-shadow:0 0 0 20px #102030b8;font:13px system-ui}
#fullMap header{padding:8px 12px}#fullMap header span{color:#b4cfcb;font-size:11px}#fullMap .mapStage{position:relative;flex:1;min-height:0;overflow:hidden}#mapCanvas{position:absolute;width:100%;height:100%;touch-action:none;cursor:grab}#mapCanvas:active{cursor:grabbing}#fullMap footer{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px}#mapZoomLevel{min-width:46px;text-align:center}
#globalChat[hidden],#fullMap[hidden],#reactionPicker[hidden]{display:none}
.emojiBubble{position:fixed;z-index:8;pointer-events:none;transform:translate(-50%,-100%);font:32px system-ui;filter:drop-shadow(0 2px 3px #0008)}.emojiBubble[hidden]{display:none}
.musicVolume{display:flex;align-items:center;gap:8px;font:11px system-ui;color:#45616b}.musicVolume input{width:95px;min-height:44px;accent-color:#416a88}
.graphicsHelp{font:11px/1.5 system-ui;color:#45616b;margin-top:8px}body[data-phone="true"] #optQ{min-height:44px}
@media(max-height:500px){#globalChat{max-height:calc(100dvh - 24px)}#chatMessages{height:110px}#fullMap header span{display:none}}
body[data-phone="true"][data-landscape="false"] #gameTools{top:calc(116px + env(safe-area-inset-top));right:14px}
body[data-phone="true"][data-landscape="false"] #reactionPicker{top:calc(166px + env(safe-area-inset-top))}
body[data-phone="false"] #gameTools{left:12px;right:auto;top:110px}body[data-phone="false"] #reactionPicker{left:12px;right:auto;top:160px}

/* Resolve iPhone cutout/home-indicator insets for the Canvas HUD as well as DOM controls. */
#safeArea{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}

#reactionPicker{right:max(14px,env(safe-area-inset-right,0px))}
#fullMap{top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
/* The atlas uses the whole safe viewport, including landscape phones. */
#fullMap{inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border-radius:0;background:#183341}
#fullMap header{background:#122b38;min-height:44px;padding:0 12px}#fullMap header b{font-size:14px;letter-spacing:.08em;color:#f1d5a2}
.mapTools{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#203f4c;border-top:1px solid #47606a;border-bottom:1px solid #47606a}.mapTools label{color:#e7d6b5}.mapTools select{min-height:38px;max-width:min(310px,70vw);flex:1;background:#102b37;color:#f5e8d0;border:1px solid #78958f;border-radius:7px;padding:0 10px;font:600 13px system-ui}.mapTools span{margin-left:auto;font-size:11px;color:#b5c9c5}
#mapPlace{position:absolute;right:14px;top:14px;width:min(285px,calc(100% - 48px));box-sizing:border-box;background:#f0e5cd;color:#243d46;border:1px solid #fff4da;border-radius:12px;padding:18px;box-shadow:0 5px 24px #10263455;max-height:calc(100% - 52px);overflow:auto;scrollbar-width:thin}#mapPlace[hidden]{display:none}#mapPlace small{font:700 9px system-ui;letter-spacing:.12em;color:#6a766b}#mapPlace h3{font:800 22px Georgia,serif;margin:10px 24px 8px 0}#mapPlace p{font-size:13px;line-height:1.5;margin:0}#mapPlace blockquote{font:italic 15px/1.45 Georgia,serif;margin:12px 0;padding-top:12px;border-top:1px solid #cbbb9e;color:#824e3c}#mapPlace>div{font-size:10px;color:#6a7062}#mapPlace a{color:#245b62}#fullMap #mapPlaceClose{position:absolute;right:6px;top:6px;background:transparent;color:#34545b;border:0}
.mapLegend{position:absolute;left:12px;bottom:8px;pointer-events:none;background:#132f3de0;border:1px solid #6d8b8c;border-radius:6px;padding:6px 10px;font-size:10px;color:#e3d7b9}
@media(max-height:500px){#fullMap header{min-height:44px}#fullMap header b{font-size:12px}.mapTools{padding:3px 12px}.mapTools select{min-height:36px}#fullMap footer{padding:3px;gap:7px}#mapPlace{width:245px;right:8px;top:8px;padding:12px}#mapPlace h3{font-size:18px;margin:6px 28px 6px 0}#mapPlace p{font-size:11px}#mapPlace blockquote{font-size:13px;margin:8px 0;padding-top:8px}.mapTools span{display:none}}
@media(max-width:600px) and (min-height:501px){.mapTools span,#fullMap header span{display:none}#mapPlace{top:auto;bottom:36px;left:12px;right:12px;width:auto;max-height:42%}#mapPlace h3{font-size:20px}.mapLegend{font-size:9px}#fullMap footer{gap:6px;padding:6px}#fullMap footer button{font-size:12px}}
@media(max-height:500px){#mapPlace{width:min(245px,42%)}}

/* Portrait controls use the same safe bottom edge as the Canvas HUD. */
body[data-phone="true"][data-landscape="false"] #tAct{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(110px + env(safe-area-inset-bottom,0px))}
body[data-phone="true"][data-landscape="false"] #tAlt{right:calc(104px + env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px))}
body[data-phone="true"][data-landscape="false"] #tShut{bottom:calc(200px + env(safe-area-inset-bottom,0px))}
body[data-phone="true"][data-landscape="false"] #tJump,body[data-phone="true"][data-landscape="false"] #tPickup{bottom:calc(200px + env(safe-area-inset-bottom,0px))}
body[data-phone="true"][data-landscape="false"] #tBike,body[data-phone="true"][data-landscape="false"] #tBus{bottom:calc(270px + env(safe-area-inset-bottom,0px))}
body[data-phone="true"][data-landscape="false"] #tMetroShut{bottom:calc(330px + env(safe-area-inset-bottom,0px))}

/* Thumb controls: primary action, held action, and an optional tools tray. */
.controlIcon{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}.controlLabel,.controlHint{pointer-events:none}
#touch .tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px;border:1px solid #d3e6df80;color:#edf6ef;background:linear-gradient(155deg,#284650ec,#102e3be8);box-shadow:0 3px 12px #0d243448,inset 0 1px #ffffff20;text-shadow:none;font:800 11px/1.05 system-ui;letter-spacing:.025em;-webkit-tap-highlight-color:transparent;transition:transform .08s,background-color .08s;cursor:pointer;isolation:isolate}
#touch .tb .controlHint{font:600 7px/1.15 system-ui;letter-spacing:.06em;color:#c1d3cf;white-space:nowrap}
#touch .tb .controlHint:empty,#touch .tb .controlLabel:empty{display:none}
#touch .tb.pressed{transform:scale(.94);background:#3d807e;box-shadow:0 0 0 3px #c9f4df55,inset 0 2px 7px #081e3855}
#touch .tb:focus-visible,#gameTools button:focus-visible{outline:3px solid #fff1b6;outline-offset:3px}
#touch #tAct{background:linear-gradient(145deg,#f6db9e,#ccab6d);color:#213a43;border:2px solid #fff0c3;box-shadow:0 4px 16px #102d3d55,inset 0 1px #ffffff88;border-radius:50%}
#touch #tAct .controlIcon{width:27px;height:27px}#touch #tAct .controlHint{color:#50655e}
#touch[data-team="C"] #tAct{background:linear-gradient(145deg,#66b1be,#377a8d);border-color:#b7e3e9;color:#f5ffff}#touch[data-team="C"] #tAct .controlHint{color:#d4edf0}
#touch #tAlt{border-radius:50%;background:linear-gradient(145deg,#316a68f2,#204b50ed)}#touch[data-team="C"] #tAlt{background:linear-gradient(145deg,#687a56f5,#43583eee)}
#touch .quickAction{display:flex!important;border-radius:15px}#touch .quickAction .controlIcon{width:18px;height:18px}#touch .quickAction .controlLabel{font-size:9px}#touch .quickAction .controlHint{font-size:6px}
#touch #tTools{border-radius:15px;background:#173748ed}#touch #tTools .controlIcon{width:19px;height:19px}#touch #tTools .controlLabel{font-size:8px}
#touch .cooldown{border-color:#b3b8a266;background:#354547d9}#touch .cooldown .controlHint{color:#eed09a}
#touch button[hidden],#mobileTools[hidden]{display:none!important}
#touch[data-tools-open="true"] .quickAction{visibility:hidden;pointer-events:none}
#mobileTools{position:fixed;z-index:9;padding:10px;border:1px solid #92ada9;border-radius:16px;background:#152e3bf5;box-shadow:0 7px 22px #071f4266;color:#d8e7df;font:700 10px/14px system-ui}
.mobileToolsHeading{height:14px;margin-bottom:8px;font-size:9px;letter-spacing:.12em;color:#cfd7bc}.mobileToolsHeading span{display:none}
.mobileToolsGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#mobileTools .tb{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:48px!important;min-width:0;border-radius:10px;display:grid!important;grid-template-columns:22px 1fr;grid-template-rows:1fr 1fr;column-gap:5px;row-gap:0;padding:7px;text-align:left;justify-items:start;align-items:center}
#mobileTools .controlIcon{grid-row:1/3;width:21px;height:21px}#mobileTools .controlLabel{align-self:end;font-size:9px}#mobileTools .controlHint{align-self:start;font-size:6px;letter-spacing:0}
#touch .tb.mini,#gameTools button{border-radius:13px;border:1px solid #a7c6c377;background:#163544e8;box-shadow:0 2px 8px #0b263338;color:#e6f2ee;display:flex;align-items:center;justify-content:center}
#gameTools button .controlLabel,#gameTools button .controlHint{display:none}#gameTools button .controlIcon{width:22px;height:22px}
#stick{border:2px solid #e7efdb99;background:#112f414d;box-shadow:inset 0 0 0 11px #cee9d917}#knob{background:#d6e8d8d9;border:2px solid #f6f5de;box-shadow:0 3px 8px #173b4555}
@media(prefers-reduced-motion:reduce){#touch .tb{transition:none}}
#touch #tAct .controlLabel,#touch #tAlt .controlLabel{font-size:12px}
#touch .quickAction{padding:3px}#touch .quickAction .controlLabel{font-size:10px}#touch .quickAction .controlHint{font-size:7px}
#touch #tTools .controlLabel{font-size:9px}#mobileTools .controlLabel{font-size:10.5px}#mobileTools .controlHint{font-size:7px}
#touch #tAct.pressed{background:#d0b077}#touch[data-team="C"] #tAct.pressed{background:#2a6b7f}
#touch #tAlt.pressed,#touch #tSprint.pressed{background:#44857d;border-color:#d5f7d9}#touch .tb:active{transform:scale(.94)}

body[data-phone="true"][data-landscape="false"] .tb.mini{top:calc(12px + env(safe-area-inset-top,0px))}
body[data-phone="true"][data-landscape="false"] #tLandscape,body[data-phone="true"][data-landscape="false"] #tMap{top:calc(64px + env(safe-area-inset-top,0px))}