:root{
  --ink:#1b2a34;--paper:#fffdf6;--red:#c91a09;--yellow:#f2cd37;--blue:#0055bf;--green:#237841;--orange:#fe8a18;
  --panel:rgba(255,253,246,.94);--shadow:0 3px 0 rgba(27,42,52,.35),0 8px 22px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#9fd1f0;font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;cursor:pointer}

/* ---------------------------------------------------------------- title */
#title{position:fixed;inset:0;display:grid;place-items:center;padding:16px;z-index:20;
  background:radial-gradient(ellipse at 50% 18%,rgba(255,226,170,.42),rgba(255,200,140,0) 62%),linear-gradient(180deg,rgba(240,150,90,.5),rgba(70,50,110,.72) 55%,rgba(18,28,58,.88));
  transition:opacity .6s,visibility .6s}
#title.hide{opacity:0;visibility:hidden;pointer-events:none}
.title-card{width:min(560px,100%);background:var(--paper);border-radius:18px;padding:26px 26px 20px;box-shadow:0 6px 0 #b79d2a,0 20px 60px rgba(0,0,0,.35);text-align:center;border:3px solid var(--ink)}
.logo{display:flex;justify-content:center;gap:6px;margin-bottom:4px}
.logo .b{position:relative;display:grid;place-items:center;width:52px;height:46px;border-radius:6px;font:700 30px/1 Fredoka,Figtree,sans-serif;color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.logo .b::before,.logo .b::after{content:"";position:absolute;top:-7px;width:14px;height:7px;border-radius:3px 3px 0 0;background:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.logo .b::before{left:8px}.logo .b::after{right:8px}
.lc-kicker{font:800 12.5px/1 Figtree,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-top:2px}
.lc-name{font:700 50px/1.02 Fredoka,Figtree,sans-serif;margin:8px 0 4px;letter-spacing:.01em}.lc-name em{font-style:normal;color:var(--red)}
.lc-sky{display:block;width:100%;height:40px;margin:4px 0 12px;color:#2b3640;opacity:.85}
.b.r{background:var(--red)}.b.y{background:var(--yellow);color:var(--ink);text-shadow:none}.b.bl{background:var(--blue)}.b.g{background:var(--green)}.b.o{background:var(--orange)}
h1{font:700 44px/1 Fredoka,Figtree,sans-serif;margin:10px 0 6px;letter-spacing:.02em}
.tag{margin:0 auto 16px;max-width:42ch;color:#3d4d57}
.loadwrap{height:14px;border-radius:8px;background:#e7e1cf;border:2px solid var(--ink);overflow:hidden}
#loadbar{height:100%;width:0;background:linear-gradient(90deg,#f2a541,var(--red));transition:width .25s}
#loadtxt{margin:8px 0 14px;font-size:13px;color:#56656e;min-height:1.3em}
#play{border:3px solid var(--ink);background:var(--yellow);border-radius:12px;padding:12px 34px;font:700 20px Fredoka,Figtree,sans-serif;box-shadow:0 4px 0 var(--ink);transition:transform .08s}
#play:disabled{opacity:.5;cursor:wait}
#play:not(:disabled):hover{transform:translateY(-2px)}
#play:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.keys{margin-top:16px;font-size:12.5px;color:#56656e;display:grid;gap:3px}
.keys b{display:inline-block;background:#fff;border:1.5px solid #9aa4aa;border-bottom-width:3px;border-radius:5px;padding:0 5px;color:var(--ink);font-weight:800;font-size:11.5px}

/* ---------------------------------------------------------------- HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s}
body.playing #hud{opacity:1}
#loc{position:absolute;left:16px;top:14px;max-width:calc(100% - 280px)}
#loc-area{font:700 22px/1.1 Fredoka,Figtree,sans-serif;color:#fff;letter-spacing:.06em;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.35)}
#loc-near{margin-top:4px;font-weight:700;font-size:14px;color:#fff5c4;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#clock{position:absolute;right:250px;top:18px;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:4px 10px;font-weight:800;font-size:13px;box-shadow:var(--shadow)}
#passport{position:absolute;right:14px;top:240px;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:4px 10px;font-weight:700;font-size:12.5px;box-shadow:var(--shadow)}
#passport:empty{display:none}
#mode{position:absolute;left:16px;bottom:18px;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:6px 12px;font-weight:800;font-size:14px;box-shadow:var(--shadow)}
#mode:empty{display:none}
#minimap{position:absolute;right:14px;top:12px;width:220px;height:220px;border-radius:50%;box-shadow:var(--shadow)}
#prompt{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:9px 16px;font-weight:700;font-size:14.5px;box-shadow:0 3px 0 #000;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#toast{position:absolute;left:50%;top:78px;transform:translate(-50%,-10px);background:var(--yellow);border:2.5px solid var(--ink);border-radius:12px;padding:9px 16px;font-weight:700;font-size:14.5px;box-shadow:0 4px 0 var(--ink);opacity:0;transition:opacity .3s,transform .3s;max-width:min(540px,calc(100% - 32px));text-align:center;line-height:1.3}
#toast.show{opacity:1;transform:translate(-50%,0)}
#speedo{position:absolute;right:18px;bottom:18px;display:none;align-items:baseline;gap:4px;background:var(--panel);border:2.5px solid var(--ink);border-radius:14px;padding:6px 14px;box-shadow:var(--shadow)}
#spd{font:700 34px/1 Fredoka,Figtree,sans-serif;font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
#speedo small{font-weight:800;font-size:12px;color:#56656e}
#fare{position:absolute;right:18px;bottom:84px;display:none;background:#1b2a34;color:#7dff9a;border-radius:10px;padding:6px 14px;font:700 22px/1.1 "Courier New",monospace;box-shadow:var(--shadow);text-align:right}
#fare small{display:block;font:800 10px Figtree,sans-serif;color:#9fb;letter-spacing:.12em}
#train-panel{position:absolute;left:16px;top:84px;display:none;width:260px;background:var(--panel);border:2.5px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
#train-panel .tl{color:#fff;font-weight:800;font-size:13px;padding:6px 10px;text-shadow:0 1px 1px rgba(0,0,0,.4)}
#train-panel .tn{padding:8px 10px 4px;font:700 20px/1.15 Fredoka,Figtree,sans-serif}
#train-panel .tn small{display:block;font:800 10px Figtree,sans-serif;letter-spacing:.12em;color:#56656e}
#train-panel .ts{padding:2px 10px 10px;display:grid;gap:3px;font-size:13px;color:#3d4d57}
#train-panel .ts i{display:inline-block;width:9px;height:9px;border-radius:50%;border:2.5px solid;margin-right:7px;vertical-align:-1px;background:#fff}
#env-btn{position:absolute;right:286px;top:52px;width:30px;height:30px;border-radius:50%;background:var(--panel);border:2px solid var(--ink);display:grid;place-items:center;font-size:15px;pointer-events:auto;cursor:pointer;box-shadow:var(--shadow)}
#mrt-hint{position:absolute;left:16px;bottom:62px;background:rgba(27,42,52,.82);color:#fff;border-radius:10px;padding:5px 10px;font-weight:700;font-size:13px;display:none;max-width:calc(100% - 300px)}
#mrt-hint b{color:#ffd24a}
#mrt-hint .ar{display:inline-block;font-size:16px;line-height:1;margin-left:4px}
.env-card{width:min(620px,100%)}
.env-body{padding:8px 18px 18px;display:grid;gap:16px;overflow:auto}
.env-body h3{margin:0 0 8px;font:700 16px Fredoka,Figtree,sans-serif}
.env-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.env-row output{font:700 22px Fredoka,Figtree,sans-serif;font-variant-numeric:tabular-nums}
#timeslider{width:100%;accent-color:var(--red);margin:4px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px}
.chips button.on{background:var(--yellow);box-shadow:0 2px 0 var(--ink)}
.chips button:focus-visible,#timeslider:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.note{margin:8px 0 0;font-size:12.5px;color:#56656e}
.secondary{margin:0 18px 10px;border:3px solid var(--ink);background:#fff;border-radius:12px;padding:9px;font:700 16px Fredoka,Figtree,sans-serif}
#wallet{position:absolute;right:14px;top:272px;background:#1b2a34;color:#fff;border-radius:10px;padding:4px 10px;font-weight:800;font-size:13px;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
#wallet:empty{display:none}
.wallet-flash{position:absolute;right:0;top:100%;margin-top:4px;font-weight:800;font-size:13px;white-space:nowrap;animation:wflash 1.6s ease-out forwards;text-shadow:0 1px 0 #fff}
@keyframes wflash{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(18px)}}
#quest-btn{position:absolute;right:14px;top:304px;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:3px 9px;font-weight:800;font-size:12.5px;box-shadow:var(--shadow);pointer-events:auto;cursor:pointer}
#bubbles{position:absolute;inset:0;overflow:hidden}
.bubble{position:absolute;left:0;top:0;max-width:220px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:5px 9px;font-weight:700;font-size:12.5px;box-shadow:0 2px 0 var(--ink);white-space:normal}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
#dlg{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);width:min(760px,calc(100% - 24px));z-index:12;display:none;gap:12px;align-items:flex-start;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:0 5px 0 var(--ink),0 16px 40px rgba(0,0,0,.3);opacity:0;transition:opacity .15s,transform .15s}
#dlg.open{display:flex;opacity:1;transform:translate(-50%,0)}
#dlg-pic{flex:none;width:54px;height:54px;border-radius:12px;border:3px solid var(--ink);display:grid;place-items:center;font:700 26px Fredoka,Figtree,sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.dlg-body{flex:1;min-width:0}
.dlg-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dlg-head b{font:700 17px Fredoka,Figtree,sans-serif}
#dlg-role{font-size:12.5px;color:#56656e;font-weight:700}
#dlg-text{margin:4px 0 8px;font-size:15.5px;line-height:1.45;min-height:1.4em}
#dlg-choices{display:grid;gap:6px}
#dlg-choices button{text-align:left;border:2px solid var(--ink);background:#fff;border-radius:10px;padding:7px 10px;font-weight:700;font-size:14px}
#dlg-choices button:hover,#dlg-choices button:focus-visible{background:var(--yellow)}
#dlg-choices kbd{display:inline-block;min-width:1.5em;text-align:center;background:var(--ink);color:#fff;border-radius:5px;font:800 12px Figtree,sans-serif;padding:1px 4px;margin-right:4px}
#dlg-more{font-size:12px;color:#8a979e;text-align:right;font-weight:700}
#fade{position:fixed;inset:0;background:#0b1520;opacity:0;pointer-events:none;transition:opacity .25s;z-index:14}
#fade.on{opacity:1}
#album-wrap{padding:4px 18px 10px}
#album-wrap h3{margin:6px 0;font:700 16px Fredoka,Figtree,sans-serif}
#album{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
#album img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
#album:empty::before{content:"No photos yet — press P anywhere to take one.";font-size:13px;color:#56656e}
.mrt-sub{margin:8px 18px 4px;font-size:13.5px;color:#56656e}
#mrtsearch{margin:6px 16px 4px;padding:10px 12px;border:2px solid var(--ink);border-radius:10px;font:600 15px Figtree,sans-serif;outline:none}
.chip{display:inline-block;border-radius:5px;color:#fff;font:800 10.5px Figtree,sans-serif;padding:1px 5px;margin-left:4px;vertical-align:1px}
.questlist{padding:8px 14px 16px;overflow:auto;display:grid;gap:6px}
.quest{display:flex;gap:10px;align-items:center;padding:7px 9px;border-radius:10px;border:2px solid #e6dfc9;background:#fff}
.quest .qc{flex:none;width:22px;height:22px;border-radius:6px;border:2.5px solid var(--ink)}
.quest.done{background:#eaf6e4;border-color:#a8d69a}
.quest.done .qc{background:var(--green);border-color:var(--green)}
.quest.done .qc::after{content:"✓";display:block;color:#fff;font-weight:800;text-align:center;line-height:18px}
.quest div{flex:1;min-width:0}
.quest b{display:block;font-size:14.5px}
.quest small{display:block;color:#56656e;font-size:12.5px}
.quest .qr{font-weight:800;font-size:12.5px;color:var(--green)}
#help-btn{position:absolute;right:250px;top:52px;width:30px;height:30px;border-radius:50%;background:var(--panel);border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;pointer-events:auto;cursor:pointer;box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- overlays */
.overlay{position:fixed;inset:0;z-index:15;display:none;place-items:center;padding:16px;background:rgba(10,25,40,.45);backdrop-filter:blur(2px)}
.overlay.open{display:grid}
.map-card,.menu-card{background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink),0 20px 60px rgba(0,0,0,.35);width:min(1180px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.menu-card{width:min(560px,100%)}
.map-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:2px solid #e6dfc9}
.map-head h2{margin:0;font:700 22px Fredoka,Figtree,sans-serif}
.map-head .hint{font-size:13px;color:#56656e;flex:1}
.map-head .x{margin-left:auto;border:2px solid var(--ink);background:#fff;border-radius:8px;width:34px;height:34px;font-weight:800}
.map-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;height:min(74vh,760px)}
.map-canvas-wrap{position:relative;min-height:320px;height:100%}
#mapcanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
#mappop{position:absolute;display:none;background:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:9px 11px;width:210px;box-shadow:0 4px 0 var(--ink);font-size:13px}
#mappop b{display:block;font-size:14.5px}
#mappop small{display:block;color:#56656e;margin:2px 0 8px}
.pb{display:flex;gap:6px}
.pb button,.dest button{border:2px solid var(--ink);background:var(--yellow);border-radius:8px;padding:4px 10px;font-weight:800;font-size:13px}
.map-list,.dest-list{overflow:auto;border-left:2px solid #e6dfc9;padding:6px 8px}
.dest-list{border-left:0;max-height:min(60vh,560px)}
.dest-h{font:800 11px Figtree,sans-serif;letter-spacing:.12em;color:#8a7a4a;margin:10px 4px 4px}
.dest{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;cursor:pointer}
.dest:hover{background:#f6efd8}
.dest .dn{flex:1;min-width:0}
.dest .dn b{display:block;font-size:14px;padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest .dn small{display:block;padding-left:6px;color:#6b7a82;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest .km{font-size:12px;color:#8a979e;font-variant-numeric:tabular-nums}
#taxisearch{margin:10px 16px 4px;padding:10px 12px;border:2px solid var(--ink);border-radius:10px;font:600 15px Figtree,sans-serif;outline:none}
.help{padding:6px 18px;overflow:auto}
.help h3{margin:12px 0 2px;font:700 16px Fredoka,Figtree,sans-serif}
.help p{margin:0;font-size:14px;color:#3d4d57}
.row{display:flex;flex-wrap:wrap;gap:14px;padding:12px 18px;border-top:2px solid #e6dfc9;font-size:14px;font-weight:600}
.row select{font:inherit;border:2px solid var(--ink);border-radius:8px;padding:2px 6px;background:#fff}
#resume{margin:0 18px 16px;border:3px solid var(--ink);background:var(--yellow);border-radius:12px;padding:10px;font:700 18px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink)}

@media (max-width:760px){
  #minimap{width:120px;height:120px;right:10px;top:10px}
  #loc{left:12px;top:10px;max-width:calc(100% - 150px)}
  #loc-area{font-size:15px}
  #loc-near{font-size:12.5px}
  #clock{right:auto;left:12px;top:64px;font-size:11.5px;padding:3px 8px}
  #help-btn{right:12px;top:138px;width:28px;height:28px}
  #passport{right:80px;top:138px;font-size:11px;padding:4px 8px}
  #env-btn{right:46px;top:138px;width:28px;height:28px;font-size:13px}
  #wallet{top:170px;font-size:12px}
  #quest-btn{top:198px;font-size:11.5px}
  #dlg{bottom:10px;padding:10px}
  #dlg-text{font-size:14.5px}
  #mrt-hint{top:auto;bottom:318px;left:12px;max-width:calc(100% - 24px);font-size:12px}
  #toast{top:176px;font-size:13px;padding:7px 12px}
  #train-panel{width:200px;top:130px}
  #train-panel .tn{font-size:16px}
  #prompt{font-size:13px}
  .map-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);height:78vh}
  .map-list{border-left:0;border-top:2px solid #e6dfc9}
  .map-canvas-wrap{min-height:0}
  .map-head .hint{display:none}
  h1{font-size:34px}
  .logo .b{width:40px;height:38px;font-size:24px}
}

body.nohud #hud,body.nohud #title{display:none!important}

/* ================================================================ touch (phones & tablets, landscape first)
   js/touch.js adds body.touch, builds #touch (joystick + thumb buttons), #t-menu, #t-howto and #rotate, and keeps
   body[data-m] = the player's mode (walk | drive | taxi | platform | train | ride) so the layout can follow it.
   Safe-area insets (notch / home bar) come from viewport-fit=cover. --app-h is the real inner height (set by JS). */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--app-h:100vh}
#dlg-x,.touch-keys,#rotate{display:none}
.tb[hidden]{display:none!important}
body.touch{-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
body.touch .keys{display:none}
body.touch .touch-keys{display:grid;gap:2px;margin-top:10px;font-size:12.5px;color:#56656e}
body.touch .touch-keys b{color:var(--ink)}

/* ---- thumb controls */
#touch{position:fixed;inset:0;z-index:6;pointer-events:none;touch-action:none;display:none;-webkit-user-select:none;user-select:none}
body.touch.playing #touch{display:block}
body.touch.ui-open #touch,body.touch.rot-show #touch{display:none}
#t-stick{position:absolute;left:0;top:0;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(27,42,52,.6);box-shadow:0 0 0 2px rgba(255,255,255,.35);display:none}
#t-stick.on{display:block}
#t-stick.steer{width:150px;height:64px;margin:-32px 0 0 -75px;border-radius:32px}
#t-stick.run{border-color:var(--orange);background:rgba(254,138,24,.28)}
#t-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.4)}
/* where the left thumb goes (only a hint: the real stick appears wherever you touch on the left) */
#t-ghost{position:absolute;left:calc(var(--sl) + 38px);bottom:calc(var(--sb) + 30px);width:100px;height:100px;border-radius:50%;border:3px dashed rgba(255,255,255,.6);background:rgba(27,42,52,.14);display:none}
#t-ghost::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(242,205,55,.55);border:2px solid rgba(27,42,52,.45)}
#touch[data-stick="1"] #t-ghost{display:block}
#t-stick.on ~ #t-ghost{display:none!important}
#touch[data-m=drive] #t-ghost{width:150px;height:64px;border-radius:32px;bottom:calc(var(--sb) + 48px);left:calc(var(--sl) + 30px)}
.tb{position:absolute;pointer-events:auto;touch-action:none;width:var(--s,56px);height:var(--s,56px);border-radius:50%;border:3px solid var(--ink);background:rgba(255,253,246,.9);color:var(--ink);box-shadow:0 3px 0 rgba(27,42,52,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font:800 10px/1 Figtree,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .05s,opacity .15s}
.tb i{font-style:normal;font-size:calc(var(--s,56px) * .4);line-height:1;pointer-events:none}
.tb span{margin-top:2px;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:clamp(9.5px,calc(var(--s,56px) * .17),13px)}
.tb.big{background:var(--yellow)}
.tb.gas{background:#8fd18a}
.tb.brake{background:#f29a8f}
.tb.on{background:var(--orange);color:#fff}
.tb.dim{opacity:.42}
.tb.down{transform:scale(.92);background:var(--yellow);box-shadow:0 1px 0 rgba(27,42,52,.6)}
.tb.top{--s:42px;top:calc(var(--st) + 12px);box-shadow:0 2px 0 rgba(27,42,52,.55)}
.tb.top i{font-size:20px}
#tb-map{right:calc(var(--sr) + 106px)}
#tb-menu{right:calc(var(--sr) + 156px)}
#tb-fs{right:calc(var(--sr) + 206px)}
/* walking (default) */
#tb-act{--s:76px;right:calc(var(--sr) + 14px);bottom:calc(var(--sb) + 14px)}
#tb-jump{--s:62px;right:calc(var(--sr) + 100px);bottom:calc(var(--sb) + 16px)}
#tb-alt{--s:58px;right:calc(var(--sr) + 22px);bottom:calc(var(--sb) + 100px)}
#tb-run{--s:50px;right:calc(var(--sr) + 98px);bottom:calc(var(--sb) + 86px)}
#tb-cam{--s:46px;right:calc(var(--sr) + 172px);bottom:calc(var(--sb) + 24px)}
/* driving: the left thumb steers, the right thumb does the pedals */
#touch[data-m=drive] #tb-gas{--s:84px;right:calc(var(--sr) + 14px);bottom:calc(var(--sb) + 14px)}
#touch[data-m=drive] #tb-brake{--s:66px;right:calc(var(--sr) + 108px);bottom:calc(var(--sb) + 14px)}
#touch[data-m=drive] #tb-hbrake{--s:50px;right:calc(var(--sr) + 184px);bottom:calc(var(--sb) + 18px)}
#touch[data-m=drive] #tb-horn{--s:52px;right:calc(var(--sr) + 24px);bottom:calc(var(--sb) + 106px)}
#touch[data-m=drive] #tb-alt{--s:58px;right:calc(var(--sr) + 92px);bottom:calc(var(--sb) + 102px)}
#touch[data-m=drive] #tb-cam{--s:44px;right:calc(var(--sr) + 158px);bottom:calc(var(--sb) + 92px)}
/* taxi */
#tb-skip{--s:76px;right:calc(var(--sr) + 14px);bottom:calc(var(--sb) + 14px)}
#touch[data-m=taxi] #tb-alt{--s:62px;right:calc(var(--sr) + 100px);bottom:calc(var(--sb) + 16px)}
/* MRT platform / train / rides */
#tb-leave{--s:62px;right:calc(var(--sr) + 100px);bottom:calc(var(--sb) + 16px)}
#tb-line{--s:54px;right:calc(var(--sr) + 22px);bottom:calc(var(--sb) + 100px)}
#tb-ff{--s:66px;right:calc(var(--sr) + 100px);bottom:calc(var(--sb) + 14px)}
#touch[data-m=train] #tb-cam{--s:58px;right:calc(var(--sr) + 22px);bottom:calc(var(--sb) + 100px)}
/* 💬 Chat (F/Y) must not hide under 🔀 (interchanges) or the view button */
#touch[data-m=platform] #tb-alt{--s:58px;right:calc(var(--sr) + 158px);bottom:calc(var(--sb) + 92px)}
#touch[data-m=train] #tb-alt{--s:58px;right:calc(var(--sr) + 96px);bottom:calc(var(--sb) + 96px)}

/* ---- HUD, compact: top-left name/clock, top-right minimap with the pills underneath, prompt at the bottom centre */
body.touch #help-btn,body.touch #env-btn{display:none}
body.touch #loc{left:calc(var(--sl) + 12px);top:calc(var(--st) + 8px);max-width:36vw}
body.touch #loc-area{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch #loc-near{font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch #clock{left:calc(var(--sl) + 12px);right:auto;top:calc(var(--st) + 46px);font-size:11px;padding:2px 8px;border-width:1.5px;border-radius:8px;box-shadow:0 2px 0 rgba(27,42,52,.35)}
body.touch #mode{left:calc(var(--sl) + 12px);bottom:auto;top:calc(var(--st) + 72px);font-size:11px;padding:2px 8px;border-width:1.5px;border-radius:8px;box-shadow:0 2px 0 rgba(27,42,52,.35)}
body.touch.hide-mode #mode,body.touch[data-m=train] #mode{display:none}
body.touch #minimap{width:88px;height:88px;right:calc(var(--sr) + 8px);top:calc(var(--st) + 8px)}
body.touch #wallet{right:calc(var(--sr) + 10px);top:calc(var(--st) + 102px);font-size:11px;padding:2px 8px;border-radius:8px;box-shadow:0 2px 0 rgba(0,0,0,.3)}
body.touch #quest-btn{right:calc(var(--sr) + 10px);top:calc(var(--st) + 128px);font-size:11px;padding:2px 8px;border-radius:8px;border-width:1.5px;box-shadow:0 2px 0 rgba(27,42,52,.35)}
body.touch #quest-btn::before{content:"";position:absolute;inset:-9px -9px -4px -9px}
body.touch #passport{right:calc(var(--sr) + 10px);top:calc(var(--st) + 154px);font-size:10.5px;padding:2px 8px;border-width:1.5px;border-radius:8px;box-shadow:0 2px 0 rgba(27,42,52,.35)}
body.touch #prompt{left:50%;bottom:calc(var(--sb) + 10px);max-width:clamp(170px,calc(100vw - 2 * (max(var(--sl),var(--sr)) + 232px)),520px);white-space:normal;text-align:center;font-size:12.5px;line-height:1.25;padding:5px 11px;border-radius:10px;box-shadow:0 2px 0 #000}
body.touch[data-m=drive] #prompt,body.touch[data-m=taxi] #prompt,body.touch[data-m=ride] #prompt{display:none!important}
body.touch #speedo{right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 10px);padding:1px 12px;border-width:2px;border-radius:12px;box-shadow:0 2px 0 rgba(27,42,52,.4)}
body.touch[data-m=train] #speedo{bottom:auto;top:calc(var(--st) + 8px)}
body.touch #spd{font-size:24px}
body.touch #speedo small{font-size:11px}
body.touch #fare{right:auto;left:calc(var(--sl) + 12px);bottom:calc(var(--sb) + 12px);font-size:17px;padding:4px 10px}
body.touch #train-panel{left:calc(var(--sl) + 12px);top:calc(var(--st) + 74px);width:188px;border-width:2px}
body.touch #train-panel .tl{font-size:11.5px;padding:4px 8px}
body.touch #train-panel .tn{font-size:16px;padding:5px 8px 2px}
body.touch #train-panel .ts{font-size:12px;padding:0 8px 7px;gap:1px}
body.touch #mrt-hint{left:50%;transform:translateX(-50%);top:calc(var(--st) + 8px);bottom:auto;width:max-content;max-width:clamp(150px,calc(100vw - 2 * (max(var(--sl),var(--sr)) + 245px)),420px);font-size:11.5px;line-height:1.3;padding:4px 9px;text-align:center}
body.touch #toast{top:calc(var(--st) + 78px);font-size:12.5px;line-height:1.3;padding:6px 12px;border-width:2px;border-radius:10px;box-shadow:0 3px 0 var(--ink);max-width:clamp(200px,calc(100vw - 2 * (max(var(--sl),var(--sr)) + 195px)),460px)}
body.touch .bubble{font-size:11px;max-width:170px;padding:3px 7px}

/* ---- overlays: big tap targets, momentum scrolling, safe-area padding */
body.touch .overlay{backdrop-filter:none;padding:calc(10px + var(--st)) calc(10px + var(--sr)) calc(10px + var(--sb)) calc(10px + var(--sl))}
body.touch .map-card,body.touch .menu-card{max-height:calc(var(--app-h) - 20px - var(--st) - var(--sb))}
body.touch .menu-card{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.touch .dest-list,body.touch .map-list,body.touch .questlist,body.touch .env-body,body.touch .help,body.touch .dlg-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
body.touch .map-head .x{width:44px;height:44px;font-size:18px;flex:none}
body.touch .dest{min-height:48px}
body.touch .dest button,body.touch .pb button{min-height:44px;min-width:48px;font-size:14px;padding:4px 12px}
body.touch .chips{gap:8px}
body.touch .chips button{min-height:44px;padding:6px 14px;font-size:14.5px}
body.touch .secondary,body.touch #resume{min-height:48px}
body.touch #mrtsearch,body.touch #taxisearch{font-size:16px;min-height:44px}
body.touch .row select{font-size:16px;min-height:40px;padding:4px 8px}
body.touch .row label{display:flex;align-items:center;gap:8px;min-height:40px}
body.touch .row input[type=checkbox]{width:22px;height:22px}
body.touch #timeslider{height:36px}
body.touch #album:empty::before{content:"No photos yet — ☰ menu → Photo."}
body.touch #mappop{width:230px}
/* dialogue: scrolls inside the screen, two columns of choices, a ✕ to close */
body.touch #dlg{width:min(860px,calc(100% - 20px - var(--sl) - var(--sr)));bottom:calc(var(--sb) + 8px);max-height:calc(var(--app-h) - 16px - var(--st) - var(--sb));padding:10px 12px;gap:10px;border-width:2.5px;border-radius:14px;box-shadow:0 4px 0 var(--ink),0 10px 26px rgba(0,0,0,.3)}
body.touch #dlg-pic{width:44px;height:44px;font-size:22px;border-width:2.5px}
body.touch .dlg-body{overflow-y:auto;max-height:calc(var(--app-h) - 40px - var(--st) - var(--sb))}
body.touch .dlg-head{padding-right:40px}
body.touch #dlg-x::before{content:"";position:absolute;inset:-6px}
body.touch #dlg-text{font-size:14.5px;margin:2px 0 8px}
body.touch #dlg-choices{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:6px}
body.touch #dlg-choices button{min-height:46px;font-size:14.5px;padding:6px 10px}
body.touch #dlg-choices kbd{display:none}
body.touch #dlg-more{font-size:12.5px;padding:2px 0 0}
body.touch #dlg-x{display:grid;place-items:center;position:absolute;right:6px;top:5px;width:36px;height:36px;border:2px solid var(--ink);background:#fff;border-radius:10px;font-weight:800;font-size:16px;padding:0;z-index:2}

/* ---- quick menu (☰) and first-run tutorial */
.tm-card{background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink),0 20px 60px rgba(0,0,0,.35);padding:12px;width:min(660px,100%);max-height:100%;overflow:auto}
.tm-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tm-grid button{min-height:66px;border:2px solid var(--ink);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:700 12px/1.1 Figtree,sans-serif;padding:4px;color:var(--ink)}
.tm-grid button:active{background:var(--yellow)}
.tm-grid button[hidden]{display:none}
.tm-grid i{font-style:normal;font-size:24px;line-height:1}
.tm-close{margin-top:10px;width:100%;min-height:46px;border:3px solid var(--ink);background:var(--yellow);border-radius:12px;font:700 17px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink)}
.howto-card{width:min(760px,100%)}
.howto-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:10px 14px}
.ht{background:#fff;border:2px solid #e6dfc9;border-radius:12px;padding:8px 8px 10px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;font-size:12.5px;line-height:1.3;color:#3d4d57}
.ht b{font:700 15px Fredoka,Figtree,sans-serif;color:var(--ink)}
.ht em{font-style:normal;font-weight:800;color:var(--ink)}
.ht-ico{font-size:30px;line-height:1.1}
.ht-tip{margin:0 16px 8px}
#t-howto-ok{margin:0 16px 14px;min-height:48px;border:3px solid var(--ink);background:var(--yellow);border-radius:12px;font:700 18px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink)}

/* ---- "rotate your phone" */
#rotate{position:fixed;inset:0;z-index:60;place-items:center;padding:24px;background:linear-gradient(180deg,#143a66,#0b1520);color:#fff;text-align:center;touch-action:none}
body.rot-show #rotate{display:grid}
.rot-card{max-width:340px}
.rot-ico{font-size:76px;line-height:1.1;display:inline-block;animation:rotphone 2.6s ease-in-out infinite}
@keyframes rotphone{0%,15%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
.rot-card h2{margin:10px 0 8px;font:700 24px/1.2 Fredoka,Figtree,sans-serif}
.rot-card p{margin:0 0 14px;color:#b9d3ea;line-height:1.4}
.linkish{background:none;border:0;color:#9fd1f0;text-decoration:underline;font:600 15px Figtree,sans-serif;padding:12px 16px;min-height:44px}

/* ---- short screens (phones in landscape): squeeze everything into ~340px of height */
@media (max-height:500px){
  body.touch #title{padding:calc(6px + var(--st)) calc(6px + var(--sr)) calc(6px + var(--sb)) calc(6px + var(--sl))}
  body.touch .title-card{padding:10px 18px 12px;border-radius:14px;width:min(520px,100%)}
  body.touch .logo{margin-bottom:0}
  body.touch .logo .b{width:34px;height:30px;font-size:19px;border-radius:5px}
  body.touch .lc-name{font-size:34px;margin:4px 0 2px}body.touch .lc-sky{height:26px;margin:2px 0 6px}
  body.touch h1{font-size:26px;margin:6px 0 2px}
  body.touch .tag{display:none}
  body.touch #loadtxt{margin:4px 0 8px}
  body.touch #play{padding:8px 30px;font-size:18px;min-height:46px}
  body.touch .map-card,body.touch .menu-card{border-width:2.5px;border-radius:14px;box-shadow:0 4px 0 var(--ink),0 12px 30px rgba(0,0,0,.3)}
  body.touch .map-head{padding:4px 10px;gap:8px;position:sticky;top:0;background:var(--paper);z-index:2}
  body.touch .map-head h2{font-size:18px}
  body.touch .map-head .hint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.touch .map-body{height:calc(var(--app-h) - 20px - var(--st) - var(--sb) - 56px);grid-template-columns:minmax(0,1fr) min(330px,44vw)}
  body.touch .map-list .dest{gap:4px}
  body.touch .map-list .dest .km{display:none}
  body.touch .map-list .dest button{min-width:44px;padding:4px 6px}
  /* pause menu: settings and Resume first, the long how-to-play text afterwards */
  body.touch #menu .menu-card{display:flex}
  body.touch #menu .map-head{order:0}
  body.touch #menu .row{order:1}
  body.touch #openenv{order:2}
  body.touch #resume{order:3}
  body.touch #album-wrap{order:4}
  body.touch #menu .help{order:5}
  body.touch .map-list{display:block}
  body.touch .map-canvas-wrap{min-height:0}
  body.touch .dest-list{max-height:none;flex:1 1 auto;min-height:0}
  body.touch .dest{padding:2px 8px}
  body.touch .questlist{padding:6px 10px 10px}
  body.touch .env-body{gap:10px;padding:6px 14px 12px}
  body.touch #menu .help{flex:none;overflow:visible;padding:2px 14px}
  body.touch .help h3{margin:8px 0 1px;font-size:15px}
  body.touch .help p{font-size:13px}
  body.touch .row{padding:6px 14px;gap:4px 16px}
  body.touch #album-wrap{padding:2px 14px 6px}
  body.touch .secondary{margin:0 14px 8px}
  body.touch #resume{margin:0 14px 12px}
  /* MRT picker and taxi list: fixed-height card, list takes what is left */
  body.touch #mrtmenu .menu-card,body.touch #taximenu .menu-card{height:calc(var(--app-h) - 20px - var(--st) - var(--sb));overflow:hidden}
  body.touch #mrtmenu .menu-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  body.touch #mrtmenu .map-head{grid-column:1 / 3}
  body.touch #mrtmenu .mrt-sub{display:none}
  body.touch #mrt-justride{grid-column:1;margin:6px 4px 6px 12px;min-height:44px;font-size:14px;padding:4px 12px;white-space:nowrap}
  body.touch #mrtsearch{grid-column:2;margin:6px 12px 6px 4px;min-width:0}
  body.touch #mrtlist{grid-column:1 / 3;min-height:0;max-height:none}
  body.touch #taxisearch{margin:6px 12px 4px}
  body.touch #dlg-pic{width:38px;height:38px;font-size:19px}
  body.touch .howto-body{gap:6px;padding:6px 10px}
  body.touch .ht{padding:5px 6px 6px;font-size:11.5px}
  body.touch .ht b{font-size:14px}
  body.touch .ht-ico{font-size:24px}
  body.touch .ht-tip{margin:0 12px 6px;font-size:11.5px}
  body.touch #t-howto-ok{margin:0 12px 10px;min-height:44px}
  body.touch .tm-grid button{min-height:62px}
  body.touch .tm-card{padding:10px}
  .rot-ico{font-size:56px}
}
@media (max-width:620px){
  .tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .howto-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- music (js/music.js): pause-menu controls + "now playing" toast */
.audio-row{align-items:center}
.audio-row label.vol{display:flex;align-items:center;gap:8px;flex:1 1 200px}
.audio-row input[type=range]{flex:1;min-width:90px;accent-color:var(--blue,#0055bf);height:28px}
.audio-row .mini{border:2px solid var(--ink);background:#fff;border-radius:10px;padding:5px 10px;font:700 13.5px Fredoka,Figtree,sans-serif;cursor:pointer}
.audio-row #music-now{font-size:12.5px;color:#56656e;min-width:0;flex:1 1 140px}
.audio-row .hint{flex:1 1 100%;font-size:12px;font-weight:600;color:#56656e}
#music-toast{position:absolute;left:16px;top:84px;background:rgba(27,42,52,.82);color:#fff;border-radius:999px;padding:4px 12px;font:700 12.5px Fredoka,Figtree,sans-serif;letter-spacing:.02em;opacity:0;transform:translateY(-6px);transition:opacity .45s,transform .45s;pointer-events:none;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#music-toast.show{opacity:1;transform:none}
body.touch #music-toast{left:calc(var(--sl) + 10px);top:calc(var(--st) + 66px);font-size:11.5px;padding:3px 10px}
body.touch .audio-row .mini{min-height:44px}
body.touch .audio-row input[type=range]{height:40px}
body.touch .audio-row .hint{display:none}
/* ---- voices (js/voice.js): pause-menu row + karaoke highlight in the dialogue box */
.voice-row select{font:inherit;border:2px solid var(--ink);border-radius:8px;padding:2px 6px;background:#fff}
.voice-row .voice-using{flex:1 1 100%;font-size:12.5px;font-weight:600;color:#56656e;overflow-wrap:anywhere}
.voice-row .voice-using.best{color:#237841}
.voice-row .voice-note{flex:1 1 100%;font-size:12px;color:#56656e}
body.touch .voice-row select{font-size:16px;min-height:40px}
#dlg-text .vk-next{opacity:.62;transition:opacity .15s}

/* ==== story mode (js/content/story.js, story-missions.js, home.js) ==== */
/* mission tracker: a small card under the minimap (left column on phones) */
#story-card{position:absolute;right:14px;top:340px;width:236px;display:none;background:var(--panel);border:2.5px solid var(--ink);border-radius:12px;padding:7px 10px 8px;box-shadow:var(--shadow);pointer-events:auto;cursor:pointer;z-index:2}
body.story-on #story-card{display:block}
body.nohud #story-card{display:none!important}
#story-card .sc-ch{font:800 9.5px Figtree,sans-serif;letter-spacing:.1em;color:#8a7a4a;text-transform:uppercase;line-height:1.2}
#story-card .sc-t{font:700 15px/1.15 Fredoka,Figtree,sans-serif;margin:1px 0 3px}
#story-card .sc-t small{font:800 11px Figtree,sans-serif;color:#8a979e;margin-left:4px}
#story-card .sc-o{font-size:12.5px;font-weight:700;line-height:1.3;display:flex;gap:6px;align-items:flex-start}
#story-card .sc-dot{flex:none;width:9px;height:9px;margin-top:4px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(254,138,24,.28);animation:scpulse 1.6s ease-in-out infinite}
#story-card .sc-d{margin-top:3px;font-size:12px;font-weight:800;color:var(--blue)}
#story-card .sc-d:empty{display:none}
#story-card .sc-d .ar{display:inline-block;font-size:15px;line-height:1;vertical-align:-1px}
#story-card .sc-h{margin-top:3px;font-size:11.5px;color:#56656e;line-height:1.3}
#story-card .sc-h:empty{display:none}
@keyframes scpulse{50%{box-shadow:0 0 0 6px rgba(254,138,24,0)}}
#story-xp{position:absolute;right:20px;top:324px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none}
#story-xp div{font:800 12.5px Figtree,sans-serif;color:#fff;background:var(--green);border:2px solid var(--ink);border-radius:9px;padding:1px 8px;animation:xppop 2s ease-out forwards}
@keyframes xppop{0%{opacity:0;transform:translateY(6px) scale(.9)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* banners and confetti */
#story-banner{position:fixed;left:50%;top:19%;transform:translate(-50%,-14px) scale(.92);z-index:13;pointer-events:none;opacity:0;text-align:center;background:var(--yellow);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink),0 18px 40px rgba(0,0,0,.28);padding:10px 26px 12px;max-width:min(560px,calc(100% - 28px));transition:opacity .3s,transform .35s cubic-bezier(.2,1.5,.4,1)}
#story-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#story-banner.big{background:linear-gradient(180deg,#ffe36b,#f2cd37)}
#story-banner .sb-k{font:800 11.5px Figtree,sans-serif;letter-spacing:.16em;color:#7a5a00}
#story-banner .sb-t{font:700 26px/1.1 Fredoka,Figtree,sans-serif;margin:2px 0}
#story-banner .sb-s{font:700 13.5px/1.3 Figtree,sans-serif;color:#3d4d57}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:16;overflow:hidden}
#confetti i{position:absolute;top:-16px;width:9px;height:14px;opacity:0;animation:cf var(--d,3s) cubic-bezier(.3,.6,.5,1) forwards}
@keyframes cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.9;transform:translate(var(--x,0),108vh) rotate(var(--r,360deg))}}
/* the opening captions */
#story-cap{position:fixed;inset:0;z-index:17;display:grid;place-items:end center;padding:0 20px 14vh;background:linear-gradient(180deg,rgba(11,21,32,.55),rgba(11,21,32,0) 38%,rgba(11,21,32,0) 56%,rgba(11,21,32,.62));color:#fff;text-align:center;transition:opacity .45s}
#story-cap.out{opacity:0;pointer-events:none}
#story-cap .cap-box{max-width:min(720px,100%)}
#story-cap .cap-line{font:700 clamp(20px,3.2vw,34px)/1.25 Fredoka,Figtree,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 24px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
#story-cap .cap-line.in{opacity:1;transform:none}
#story-cap .cap-skip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(4.5vh + var(--sb,0px));border:2.5px solid var(--ink);background:var(--panel);border-radius:999px;padding:7px 16px;font:700 15px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink);min-height:40px}
/* the journal: Missions / Bucket list / Me */
.menu-card.journal{width:min(620px,100%)}
.jr-tabs{display:flex;gap:6px;padding:8px 14px 4px}
.jr-tabs button{flex:1;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 6px;font:700 14px Fredoka,Figtree,sans-serif}
.jr-tabs button.on{background:var(--yellow);box-shadow:0 2px 0 var(--ink)}
.jr-pane{min-height:0}
.jr-ch{display:flex;align-items:baseline;gap:8px;margin:8px 2px 0;font:700 15px Fredoka,Figtree,sans-serif}
.jr-ch[data-ch]{cursor:pointer;border-radius:8px;padding:5px 4px;user-select:none}
.jr-ch[data-ch]:hover{background:#f6efd8}
.jr-ch small{margin-left:auto;font:800 12px Figtree,sans-serif;color:#8a979e}
.jr-ch.locked{opacity:.5}
.quest.locked{opacity:.55}
.quest.now{border-color:var(--orange);background:#fff7e6;box-shadow:0 0 0 2px rgba(254,138,24,.25)}
.quest.now .qc{border-color:var(--orange);background:#ffd9a3}
.quest em{font-style:normal;font-size:11.5px;color:#8a979e;font-weight:700}
.jr-obj{margin:5px 0 2px;font-size:12.5px;line-height:1.4}
.jr-obj .ok{color:var(--green);text-decoration:line-through;opacity:.8}
.jr-obj .now{font-weight:800}
.jr-hint{margin-top:3px;font-size:12px;color:#56656e}
.jr-hint.dim{opacity:.7}
.jr-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.jr-btns button{border:2px solid var(--ink);background:var(--yellow);border-radius:9px;padding:4px 10px;font-weight:800;font-size:12.5px}
.jr-hero{display:flex;gap:12px;align-items:center;padding:6px 4px}
.jr-hero b{display:block;font:700 20px Fredoka,Figtree,sans-serif}
.jr-hero small{display:block;color:#56656e;font-size:12.5px;margin-bottom:3px}
.jr-lv{flex:none;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font:700 20px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink)}
.jr-bar{display:block;height:11px;border-radius:7px;background:#e7e1cf;border:2px solid var(--ink);overflow:hidden;flex:1}
.jr-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 14px,#4b9f4a 14px 28px)}
.jr-sub{margin:10px 2px 2px;font:800 11px Figtree,sans-serif;letter-spacing:.12em;color:#8a7a4a;text-transform:uppercase}
.jr-sub small{text-transform:none;letter-spacing:0;font-weight:700;color:#8a979e}
.jr-stat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.jr-stat span{flex:none;width:112px}
.jr-stat em{font-style:normal;width:24px;text-align:right;color:#56656e}
.jr-titles{display:flex;flex-wrap:wrap;gap:6px}
.jr-titles span{background:#fff;border:2px solid #e6dfc9;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700}
.jr-outfits{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.jr-of{background:#fff;border:2px solid #e6dfc9;border-radius:10px;padding:6px;text-align:center;line-height:1.2}
.jr-of i{display:block;font-style:normal;font-size:24px}
.jr-of b{display:block;font-size:12.5px}
.jr-of small{display:block;font-size:11px;color:#56656e}
.jr-of.on{border-color:var(--orange);background:#fff7e6}
.jr-of.locked{opacity:.55}
/* home: wardrobe, catalogue, TV (dialogue choices reuse #dlg) */
body.touch #story-card{left:calc(var(--sl) + 12px);right:auto;top:calc(var(--st) + 100px);width:min(206px,34vw);padding:4px 8px 5px;border-width:2px;border-radius:10px;box-shadow:0 2px 0 rgba(27,42,52,.35)}
body.touch #story-card .sc-ch,body.touch #story-card .sc-h{display:none}
body.touch #story-card .sc-t{font-size:12.5px;margin:0 0 1px}
body.touch #story-card .sc-t small{font-size:10px}
body.touch #story-card .sc-o{font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.touch #story-card .sc-d{margin-top:1px;font-size:10.5px}
body.touch #story-card .sc-dot{width:7px;height:7px;margin-top:3px}
body.touch #story-xp{right:auto;left:calc(var(--sl) + 14px);top:calc(var(--st) + 96px);align-items:flex-start}
body.touch #story-banner{top:calc(var(--st) + 52px);padding:6px 16px 8px;border-width:2.5px;box-shadow:0 4px 0 var(--ink)}
body.touch #story-banner .sb-t{font-size:19px}
body.touch #story-banner .sb-k{font-size:10px}
body.touch #story-banner .sb-s{font-size:11.5px}
body.touch .jr-tabs button{min-height:44px}
body.touch .jr-btns button{min-height:40px;padding:4px 12px}
body.touch #story-cap .cap-skip{min-height:44px}
@media (max-width:760px){
  #story-card{top:236px;width:200px}
  #story-xp{top:222px}
  #story-banner .sb-t{font-size:21px}
}
@media (max-height:500px){
  body.touch #story-card{top:calc(var(--st) + 92px)}
  body.touch .jr-hero{padding:2px}
  body.touch .jr-lv{width:46px;height:46px;font-size:16px}
  body.touch .jr-outfits{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  body.touch .jr-pane{padding:4px 10px 10px}
}
body.story-cine #hud{opacity:0!important;transition:opacity .4s}
.hm-grid{padding:8px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;overflow:auto;min-height:0}
.hm-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:2px solid var(--ink);cursor:pointer}
.hm-big{padding:0 14px 12px}
.hm-big img{width:100%;max-height:52vh;object-fit:contain;border-radius:10px;border:3px solid var(--ink);background:#000}
#hm-album .menu-card{width:min(640px,100%)}
/* ==== /story mode ==== */

/* ---- title: choose a mode (js/modes.js) ---- */
.mode-hidden{display:none!important}
#modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 10px}
#modes .mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 10px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:0 4px 0 var(--ink);cursor:pointer;font:600 13px Figtree,sans-serif;color:var(--ink);transition:transform .08s}
#modes .mode i{font-style:normal;font-size:26px;line-height:1}
#modes .mode b{font:700 17px Fredoka,Figtree,sans-serif}
#modes .mode .ms{font-size:12px;font-weight:600;opacity:.75;line-height:1.25}
#modes .mode[data-m=story]{background:var(--yellow)}
#modes .mode.last{outline:3px dashed var(--ink);outline-offset:3px}
#modes .mode:disabled{opacity:.5;cursor:wait}
#modes .mode:not(:disabled):hover{transform:translateY(-2px)}
#modes .mode:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#modes .mbadge{position:absolute;top:-10px;right:-6px;background:#237841;color:#fff;font:700 10px Figtree,sans-serif;font-style:normal;padding:2px 7px;border-radius:9px;border:2px solid var(--ink)}
#modes .mc:empty{display:none}
#modes .mc #play-new{margin-top:4px;font-size:11px}
#moderow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#moderow .ml{font-weight:800;margin-right:2px}
#moderow button.on{background:var(--yellow);border-color:var(--ink)}
@media (max-height:480px){
  #modes{gap:6px;margin:4px 0 6px}
  #modes .mode{padding:7px 6px 6px}
  #modes .mode i{font-size:20px}
  #modes .mode b{font-size:14px}
  #modes .mode .ms{font-size:10.5px}
}
@media (max-width:420px){ #modes{grid-template-columns:1fr} }