:root {
  --navy: #0b2a5b; --navy-2: #08203f; --ink: #06162e; --gold: #c9a24a; --gold-2: #e8c874; --cream: #f6f1e3;
  --ok: #4cc38a; --warn: #f0a04b; --cyan: #57c7ff;
  --glass: rgba(8, 24, 52, 0.78); --line: rgba(232, 200, 116, 0.28);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); overscroll-behavior: none; }
body { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; touch-action: none; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
[hidden] { display: none !important; }
button, a.btn { font: inherit; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 12px; text-align: center; background: radial-gradient(circle at 50% 40%, #12407f, var(--ink)); }
.brandmark { letter-spacing: 0.5em; font-weight: 700; font-size: 13px; color: var(--gold-2); padding-left: 0.5em; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hud-left { display: grid; gap: 8px; max-width: min(520px, 62vw); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { background: linear-gradient(180deg, rgba(14, 40, 78, 0.6), rgba(6, 18, 40, 0.55)); border: 1px solid rgba(232, 200, 116, 0.22); border-radius: 999px; padding: 5px 11px; font-weight: 650; font-size: 12.5px; color: #e9eefb; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.chip.gold { color: var(--gold-2); border-color: rgba(232, 200, 116, 0.5); background: linear-gradient(180deg, rgba(201, 162, 74, 0.26), rgba(8, 24, 52, 0.55)); }
#objective { position: relative; background: linear-gradient(180deg, rgba(12, 36, 72, 0.62), rgba(5, 16, 36, 0.58)); border: 1px solid rgba(232, 200, 116, 0.26); border-left: 3px solid var(--gold-2); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34); backdrop-filter: blur(10px); max-width: 320px; }
#objective strong { font-size: 13px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 3px #000a; }
#objective span { font-size: 11.5px; color: #b9c9e6; line-height: 1.3; text-shadow: 0 1px 3px #000a; }
#timer { justify-self: start; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, rgba(14, 40, 78, 0.7), rgba(6, 18, 40, 0.6)); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; font-weight: 800; font-size: 20px; color: var(--gold-2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32); backdrop-filter: blur(8px); }
#timer.late { color: #ff8a7a; border-color: #ff8a7a; animation: pulseLate 1.2s ease-in-out infinite; }
@keyframes pulseLate { 50% { box-shadow: 0 0 0 4px rgba(255, 138, 122, 0.14); } }
.hud-right { display: grid; justify-items: end; gap: 8px; }
#minimap { width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--gold); background: #17361f; box-shadow: 0 0 0 4px rgba(8, 24, 52, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5); }
#arrow { display: flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32); backdrop-filter: blur(8px); }
#arrow-dial { width: 30px; height: 30px; display: grid; place-items: center; transition: transform 0.08s linear; }
#arrow-dial svg { width: 26px; height: 26px; fill: var(--c, var(--gold)); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 1px 3px #000a); }
#arrow-dist { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#prompt { position: fixed; left: 50%; bottom: calc(var(--sab) + 24px); transform: translateX(-50%); background: linear-gradient(180deg, rgba(14, 40, 78, 0.9), rgba(5, 16, 36, 0.92)); border: 1px solid rgba(232, 200, 116, 0.65); color: var(--gold-2); border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 15px; z-index: 6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(92vw, 560px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); pointer-events: none; animation: promptIn 0.18s ease-out; }
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 6px); } }
body[data-device="touch"] #prompt { bottom: calc(var(--sab) + 150px); font-size: 14px; }
#toasts { position: fixed; top: calc(var(--sat) + 150px); left: 50%; transform: translateX(-50%); z-index: 20; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { background: linear-gradient(180deg, rgba(14, 40, 78, 0.82), rgba(5, 16, 36, 0.82)); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 10px 16px; font-weight: 600; font-size: 14px; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); animation: pop 0.25s ease-out; transition: opacity 0.5s, transform 0.5s; }
.toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* HUD density: Auto resolves to minimal on touch. Minimal keeps only what you act on. */
body[data-hud="minimal"] .chip-live,
body[data-hud="minimal"] #hud-role,
body[data-hud="minimal"] #street,
body[data-hud="minimal"] #objective .obj-k,
body[data-hud="minimal"] #objective-sub,
body[data-hud="minimal"] #arrow-dist,
body[data-hud="minimal"] .map-n { display: none; }
body[data-hud="minimal"] #objective { padding: 7px 10px; border-radius: 10px; }
body[data-hud="hidden"] #hud { display: none; }
body[data-hud="hidden"] #toasts { top: calc(var(--sat) + 14px); }
body[data-device="touch"] #city-life-btn,
body[data-hud="minimal"] #city-life-btn,
body[data-hud="hidden"] #city-life-btn { display: none; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; }
body[data-device="touch"] #touch:not([hidden]) { display: block; }
#touch > * { pointer-events: auto; touch-action: none; }
#touch .stick { position: absolute; left: calc(var(--sal) + 24px); bottom: calc(var(--sab) + 28px); width: 132px; height: 132px; border-radius: 50%; background: rgba(8, 24, 52, 0.45); border: 2px solid var(--line); }
#touch .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold)); box-shadow: 0 3px 12px #0008; }
#touch .look { position: absolute; right: 0; top: 150px; bottom: 0; width: 46%; pointer-events: auto; }
#touch .btns { position: absolute; right: calc(var(--sar) + 18px); bottom: calc(var(--sab) + 24px); display: grid; grid-template-columns: auto auto; gap: 12px; align-items: end; pointer-events: none; }
.tbtn { pointer-events: auto; border-radius: 50%; border: 2px solid var(--gold); background: rgba(8, 24, 52, 0.72); color: var(--gold-2); font-weight: 700; width: 64px; height: 64px; font-size: 13px; backdrop-filter: blur(6px); touch-action: none; }
.tbtn.big { width: 84px; height: 84px; font-size: 16px; background: linear-gradient(160deg, var(--gold-2), var(--gold)); color: var(--navy); grid-column: 2; grid-row: 1; }
.tbtn.jump, .tbtn.brake { grid-column: 1; grid-row: 1; align-self: end; }
.tbtn.small { width: 52px; height: 52px; font-size: 12px; grid-column: 2; grid-row: 2; justify-self: end; }
.tbtn.down { transform: scale(0.94); filter: brightness(1.2); }
#touch .tbtn.menu { position: absolute; top: calc(var(--sat) + 10px); right: calc(var(--sar) + 116px); width: 44px; height: 44px; font-size: 20px; }
body[data-mode="walk"] .tbtn.brake, body:not([data-mode="walk"]) .tbtn.jump { display: none; }
/* Menu sits in the gap left of the minimap: 96px map + 8px gap, 78px in short landscape, 128px on tablets. */
@media (min-width: 561px) and (min-height: 521px) { body[data-device="touch"] #touch .tbtn.menu { right: calc(var(--sar) + 148px); } }
body:not([data-device="touch"]) #touch { display: none; }

/* ---------- overlays ---------- */
#ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px); background: radial-gradient(ellipse at 50% 30%, rgba(8, 32, 63, 0.55), rgba(3, 12, 28, 0.88)); pointer-events: auto; animation: fade 0.25s ease-out; touch-action: pan-y; overflow: auto; }
@keyframes fade { from { opacity: 0; } }
.panel { width: min(680px, 100%); max-height: 100%; display: grid; gap: 14px; text-align: center; padding: 26px clamp(16px, 4vw, 34px); background: linear-gradient(180deg, rgba(14, 44, 92, 0.86), rgba(7, 22, 48, 0.92)); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 20px 80px #000a; backdrop-filter: blur(14px); overflow: auto; user-select: text; -webkit-user-select: text; }
h1 { margin: 0; font-size: clamp(34px, 8vw, 58px); letter-spacing: 0.02em; background: linear-gradient(180deg, #fff, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0; font-size: clamp(22px, 5vw, 30px); } h2.big { font-size: clamp(28px, 7vw, 46px); background: linear-gradient(180deg, #fff, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0; line-height: 1.5; } .lede { color: #cfd9ec; font-size: clamp(15px, 3.6vw, 18px); } .fine { color: #93a6c6; font-size: 12.5px; } .meta { color: var(--gold-2); font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .stack { display: grid; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.07); color: var(--cream); font-weight: 650; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform 0.12s, background 0.12s, box-shadow 0.12s; }
.btn:hover { background: rgba(255, 255, 255, 0.13); } .btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(160deg, var(--gold-2), var(--gold)); color: var(--navy-2); border-color: transparent; }
.btn.ghost { background: transparent; } .btn.danger { color: #ffb4a8; border-color: rgba(255, 138, 122, 0.5); } .btn.small { min-height: 42px; padding: 8px 14px; font-size: 14px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
:is(.btn, .card, a):focus-visible, .btn:focus, .card:focus { outline: 3px solid var(--cyan); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(87, 199, 255, 0.2); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card.choice { display: grid; gap: 6px; justify-items: center; padding: 18px 12px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--cream); cursor: pointer; font-size: 13.5px; line-height: 1.35; transition: transform 0.12s, background 0.12s; }
.card.choice:hover { background: rgba(232, 200, 116, 0.14); transform: translateY(-2px); } .card.choice strong { font-size: 20px; color: var(--gold-2); } .card.choice .emoji { font-size: 36px; }
.jobs { display: grid; gap: 10px; max-height: 46vh; overflow: auto; text-align: left; padding-right: 2px; }
.job { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; } .job.active { border-color: var(--gold); background: rgba(201, 162, 74, 0.14); }
.job-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .job .row { justify-content: flex-start; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(87, 199, 255, 0.16); color: var(--cyan); white-space: nowrap; } .badge.bulk { background: rgba(240, 160, 75, 0.18); color: var(--warn); }
.timer-inline { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-2); align-self: center; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stats li { display: grid; gap: 2px; padding: 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); } .stats strong { font-size: 20px; color: var(--gold-2); } .stats span { font-size: 12px; color: #b9c6dd; }
.keys { width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: left; } .keys th, .keys td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); vertical-align: top; } .keys thead th { color: var(--gold-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .keys tbody th { font-weight: 650; color: #e6ecf8; }
.scroll { max-height: 54vh; overflow: auto; }

/* ---------- cinematic dialogue: a lower-third over the live scene, not a modal ---------- */
.overlay.ov-dialogue {
  place-items: end center; align-content: end;
  background: linear-gradient(180deg, rgba(2, 8, 20, 0) 0%, rgba(2, 8, 20, 0) 44%, rgba(2, 8, 20, 0.52) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-bottom: calc(var(--sab) + clamp(96px, 17vh, 150px));
  animation: fade 0.2s ease-out;
}
.overlay.ov-dialogue .panel {
  position: relative; width: min(660px, 100%); text-align: left; justify-items: stretch; gap: 6px;
  padding: 18px clamp(16px, 3.4vw, 26px) 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 32, 64, 0.94), rgba(4, 15, 33, 0.96));
  border: 1px solid rgba(232, 200, 116, 0.38); border-top: 2px solid rgba(232, 200, 116, 0.72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  animation: dlgIn 0.24s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px); } }
.overlay.ov-dialogue .panel h2 { font-size: clamp(19px, 4.6vw, 24px); }
.overlay.ov-dialogue .panel .fine { text-align: left; }
.overlay.ov-dialogue .row { justify-content: flex-start; gap: 8px; }
.overlay.ov-dialogue .row .btn { min-height: 40px; padding: 7px 14px; font-size: 13.5px; }
.overlay.ov-dialogue .stack { gap: 8px; }
.overlay.ov-dialogue .stack .btn { justify-content: flex-start; text-align: left; min-height: 46px; padding: 10px 16px; background: rgba(255, 255, 255, 0.06); border-color: rgba(232, 200, 116, 0.28); }
.overlay.ov-dialogue .stack .btn:hover { background: rgba(232, 200, 116, 0.16); border-color: rgba(232, 200, 116, 0.6); }
.overlay.ov-dialogue input[type="range"] { width: 96px; accent-color: var(--gold, #c9a24a); }
@media (max-width: 560px) {
  .overlay.ov-dialogue { padding-bottom: calc(var(--sab) + 150px); }
  .overlay.ov-dialogue .panel { padding: 14px 14px 12px; border-radius: 16px; }
  .overlay.ov-dialogue .row .btn { min-height: 38px; padding: 6px 12px; }
}
@media (max-height: 520px) {
  .overlay.ov-dialogue { padding-bottom: calc(var(--sab) + 12px); place-items: center; }
  .overlay.ov-dialogue .panel { width: min(620px, 100%); }
}

/* ---------- small screens / landscape phones ---------- */
@media (max-width: 560px) {
  #minimap { width: 96px; height: 96px; } .hud-left { max-width: 58vw; } #objective strong { font-size: 13.5px; } #objective span { font-size: 11.5px; }
  .choices { grid-template-columns: 1fr; } .card.choice { grid-template-columns: auto 1fr; text-align: left; justify-items: start; padding: 12px 14px; } .card.choice .emoji { grid-row: span 2; font-size: 30px; }
  #toasts { top: calc(var(--sat) + 120px); }
}
@media (max-height: 520px) {
  .panel { padding: 14px 18px; gap: 8px; } h1 { font-size: 30px; } .lede { display: none; } .choices { grid-template-columns: 1fr 1fr; } .card.choice { padding: 8px; } .card.choice .emoji { font-size: 24px; } .btn { min-height: 40px; padding: 6px 14px; }
  #minimap { width: 88px; height: 88px; } #touch .stick { width: 112px; height: 112px; bottom: calc(var(--sab) + 12px); } .tbtn.big { width: 72px; height: 72px; } .tbtn { width: 56px; height: 56px; }
  #touch .btns { bottom: calc(var(--sab) + 10px); } #toasts { top: calc(var(--sat) + 8px); } body[data-device="touch"] #prompt { bottom: calc(var(--sab) + 8px); }
}
/* The welcome panel's exact spec copy ("You're in Epe, Lagos." / "Your city. Your life. Your choices.") must show on short viewports too. */
.overlay.welcome .lede { display: block; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- characters, garage, controller settings ---------------------------------------------- */
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0;max-height:46vh;overflow:auto;padding:4px}
.card.profile{display:grid;justify-items:center;gap:6px;padding:14px 10px;text-align:center;min-height:196px;align-content:start}
.card.profile strong{font-size:18px;color:var(--gold-2,#e8c874)}
.card.profile span{font-size:13px;opacity:.85}
.card.profile.new{border-style:dashed;align-content:center}
.card.profile .plus{font-size:44px;line-height:1;color:var(--gold-2,#e8c874)}
.mannequin{position:relative;width:64px;height:112px;flex:none}
.mannequin i{position:absolute;display:block}
.mannequin .head{left:22px;top:12px;width:20px;height:22px;border-radius:50%;background:var(--skin)}
.mannequin .hair{left:21px;top:9px;width:22px;height:12px;border-radius:12px 12px 4px 4px;background:var(--hair)}
.mannequin .hat{left:19px;top:4px;width:26px;height:12px;border-radius:14px 14px 3px 3px;z-index:2;display:none}
.mannequin[data-hat=cap] .hat{display:block;background:#c9a24a}
.mannequin[data-hat=cap] .hair{display:none}
.mannequin[data-hat=beanie] .hat{display:block;background:#c23b3b;top:3px;height:16px;border-radius:14px 14px 4px 4px}
.mannequin[data-hat=hardhat] .hat{display:block;background:#f2c230;width:30px;left:17px;border-radius:15px 15px 2px 2px}
.mannequin[data-hat=beanie] .hair,.mannequin[data-hat=hardhat] .hair{opacity:.0}
.mannequin .body{left:16px;top:36px;width:32px;height:34px;border-radius:5px;background:var(--jacket);border-bottom:5px solid var(--trim)}
.mannequin .arm{top:37px;width:9px;height:32px;border-radius:4px;background:var(--jacket)}
.mannequin .arm.l{left:5px}.mannequin .arm.r{left:50px}
.mannequin .leg{top:71px;width:13px;height:36px;border-radius:4px;background:var(--pants)}
.mannequin .leg.l{left:17px}.mannequin .leg.r{left:34px}
.creator{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin:10px 0}
.creator .mannequin{transform:scale(1.6);transform-origin:center;margin:30px 40px}
.field{display:grid;gap:6px;font-weight:600;font-size:14px}
.text{font:inherit;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid rgba(232,200,116,.4);background:rgba(255,255,255,.1);color:#fff}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid transparent;background:var(--c);cursor:pointer;padding:0}
.swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--gold,#c9a24a)}
.swatch.big{width:64px;height:64px;display:grid;place-items:center;font-size:28px;cursor:default}
.err{color:#ffb36b;min-height:1.3em;margin:0}
.profile-head{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.profile-head h2{margin:0}
.garage-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.garage-head h2{margin:0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tab{font:inherit;min-height:44px;padding:8px 16px;border-radius:12px;border:1px solid rgba(232,200,116,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-weight:600}
.tab[aria-selected=true]{background:linear-gradient(160deg,#e8c874,#c9a24a);color:#08203f;border-color:transparent}
.shop h3{margin:14px 0 8px;color:#e8c874}
.shop .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.shopcard{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px 10px;border:1px solid rgba(232,200,116,.25);border-radius:16px;background:rgba(255,255,255,.05)}
.shopcard.equipped{border-color:#4cc38a;background:rgba(76,195,138,.1)}
.shopcard .mannequin{transform:scale(.8);margin:-10px 0}
.btn.gold{background:linear-gradient(160deg,#e8c874,#c9a24a);color:#08203f;border-color:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[aria-pressed=true]{outline:2px solid #e8c874}
.controls{display:grid;gap:12px;max-height:84vh;overflow:auto}
.controls h2{margin:0}
.tester{position:sticky;top:0;z-index:2;border:1px solid rgba(232,200,116,.25);border-radius:14px;padding:12px;background:#0b2350}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pb{min-width:44px;text-align:center;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.2);font-size:12px;opacity:.7}
.pb.on{background:#e8c874;color:#08203f;opacity:1;font-weight:700}
.sticks{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stickbox{position:relative;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.stickbox i{position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;background:#57c7ff}
.trig{display:flex;align-items:center;gap:6px;width:90px;font-size:12px}
.trig i{display:block;height:8px;background:#e8c874;border-radius:4px;min-width:2px;max-width:60px}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.binds{display:grid;gap:6px}
.bind{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.bind strong{min-width:80px;text-align:right;color:#e8c874}
.bind strong.dup{color:#ffb36b}
.pm{display:flex;gap:6px}
.status{margin:0;color:#e8c874;font-weight:600}
@media (max-width:640px){.creator{grid-template-columns:1fr}.creator .mannequin{margin:10px auto}.bind{grid-template-columns:1fr auto}.bind strong{text-align:left}}

/* ---- film + scenes ---------------------------------------------------------------------- */
.film{position:fixed;inset:0;z-index:30;pointer-events:none;display:grid;align-content:space-between;padding:calc(var(--sat,0px) + 16px) 16px calc(var(--sab,0px) + 20px)}
.film>*{pointer-events:auto}
.film-bottom{justify-self:center;text-align:center;display:grid;gap:12px;max-width:min(680px,100%);background:linear-gradient(180deg,transparent,rgba(6,22,46,.85));padding:22px 20px 8px;border-radius:20px}
.film-caption{margin:0;font-size:clamp(20px,3.4vw,32px);font-weight:700;color:#f6f1e3;text-shadow:0 2px 14px #000}
.film-dots{display:flex;gap:8px;justify-content:center}.film-dots i{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}.film-dots i.on{background:#e8c874}
.film-layers{justify-self:center;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;opacity:0;transition:opacity .6s;margin-top:12vh}
.film-layers.on{opacity:1}.film-layers span{padding:6px 14px;border-radius:999px;border:1px solid rgba(87,199,255,.4);color:#57c7ff;opacity:.35;transition:all .5s;background:rgba(6,22,46,.6)}.film-layers span.lit{opacity:1;color:#e8c874;border-color:#e8c874}
body.film-on #hud,body.film-on #touch,body.film-on #toasts{display:none}
.person{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(232,200,116,.25);border-radius:12px;background:rgba(255,255,255,.05);margin:6px 0}
textarea.text{resize:vertical;min-height:84px;width:100%;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.film-layers span,.film-layers{transition:none}}

#street{margin-top:6px;font-size:13px;font-weight:600;color:var(--gold,#e8c874);text-shadow:0 1px 3px #000a;letter-spacing:.02em}

/* ---- opener ---- */
.opener{--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,#0000 25%,#010510dd 100%);color:#f6f1e3;transition:opacity .45s}
.opener::before,.opener::after{content:"";position:absolute;left:0;right:0;height:11vh;background:#000;z-index:1;animation:opBars 1.2s cubic-bezier(.16,1,.3,1) both}
.opener::before{top:0}.opener::after{bottom:0}
@keyframes opBars{from{transform:scaleY(0);transform-origin:var(--o,top)}to{transform:scaleY(1)}}
.opener::after{--o:bottom}
.opener.out{opacity:0}
.op-line{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:18px;font:500 clamp(26px,5.6vw,64px)/1.18 var(--serif);letter-spacing:.01em;padding:0 9vw;margin:0;animation:opLine 1.4s cubic-bezier(.16,1,.3,1) both;text-shadow:0 2px 28px #000,0 0 2px #0008;text-wrap:balance}
.op-line::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,#0000,#e8c874,#0000);animation:opRule 3.2s ease both}
.opener[data-beat="brands"] .op-line,.opener[data-beat="title"] .op-line{display:none}
@keyframes opLine{0%{opacity:0;transform:translateY(14px);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes opRule{0%,10%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.op-brands{position:absolute;inset:0;z-index:2;display:none;place-items:center}
.opener[data-beat="brands"] .op-brands{display:grid}
.op-brands span{grid-area:1/1;font:600 clamp(30px,8vw,96px)/1 var(--serif);letter-spacing:.3em;padding-left:.3em;color:#e8c874;opacity:0;transform:scale(1.08);filter:blur(6px);text-shadow:0 0 44px #c9a24a77;transition:opacity .3s,transform .7s cubic-bezier(.16,1,.3,1),filter .5s}
.op-brands span.on{opacity:1;transform:scale(1);filter:none}
.op-move{position:absolute;z-index:2;bottom:17vh;left:0;right:0;margin:0;font:600 clamp(13px,2vw,20px) system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.7em;padding-left:.7em;text-transform:uppercase;color:#cfe3ff;opacity:0;transition:opacity .6s}
.opener[data-beat="brands"] .op-move.on{opacity:1}
.op-title{position:absolute;inset:0;z-index:2;display:none;place-content:center;justify-items:center;gap:22px}
.opener[data-beat="title"] .op-title{display:grid;animation:opTitle 2.2s cubic-bezier(.16,1,.3,1) both}
.op-title h1{margin:0;font:600 clamp(40px,10.5vw,132px)/1 var(--serif);letter-spacing:.16em;padding-left:.16em;background:linear-gradient(#fff6d8,#e8c874 55%,#a47c28);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 34px #000)}
.op-title::before{content:"";width:min(46vw,420px);height:1px;background:linear-gradient(90deg,#0000,#e8c874,#0000);order:2;animation:opRule 2.2s ease both}
.op-credit{order:3;margin:0;font:500 clamp(12px,1.9vw,20px) system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:#b9c9e6}
.op-credit b{color:#e8c874;font-weight:700}
@keyframes opTitle{from{opacity:0;transform:scale(.96);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.op-sub{position:absolute;z-index:3;left:0;right:0;bottom:calc(11vh + 70px);margin:0;padding:0 8vw;text-align:center;font:500 clamp(15px,2.4vw,24px)/1.35 var(--serif);color:#f6f1e3;text-shadow:0 2px 18px #000;display:none}
.opener[data-beat="title"] .op-sub:not([hidden]){display:block}
.op-skip{position:absolute;z-index:3;right:18px;bottom:calc(11vh + 14px)}
.op-embers{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 80%,#ffb347 50%,#0000),radial-gradient(2px 2px at 60% 90%,#ffd27a 50%,#0000),radial-gradient(3px 3px at 80% 70%,#ff9a3c 50%,#0000),radial-gradient(2px 2px at 35% 95%,#ffcf8a 50%,#0000);background-size:300px 400px;animation:embers 9s linear infinite;opacity:.5;pointer-events:none}
@keyframes embers{from{background-position:0 0}to{background-position:60px -400px}}
@media (prefers-reduced-motion:reduce){.op-line,.op-title,.op-embers,.opener::before,.opener::after{animation:none!important}.op-line{opacity:1}}

#hp{margin-top:6px;width:160px;height:8px;border-radius:6px;background:#0008;overflow:hidden;border:1px solid #fff3}
#hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3ddc84,#c9a24a);transition:width .2s}
#hp.low i{background:#e5484d}
#hp.low{animation:hpPulse .8s infinite}@keyframes hpPulse{50%{box-shadow:0 0 10px #e5484d}}

#tutorial{margin-top:8px;max-width:min(280px,70vw);padding:6px 10px;border-radius:12px;background:#08183a66;border:1px solid #c9a24a44;box-shadow:none;backdrop-filter:blur(3px);pointer-events:auto}
#tutorial .tut-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e8c874}
#tutorial p{margin:4px 0 6px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px #000a}
#tutorial .tut-bar{height:4px;border-radius:4px;background:#fff2;overflow:hidden}#tutorial .tut-bar i{display:block;height:100%;width:0;background:#c9a24a;transition:width .2s}
#tutorial.pop{animation:tutPop .6s}@keyframes tutPop{0%{transform:scale(1.06);box-shadow:0 0 0 0 #c9a24a}100%{box-shadow:0 0 0 18px #c9a24a00}}

#nav{display:flex;align-items:center;gap:10px;max-width:min(380px,90vw);padding:8px 14px 8px 10px;border-radius:16px;background:linear-gradient(#0b2a5bee,#071a3dee);border:1px solid #c9a24a88;box-shadow:0 6px 24px #0007}
#nav-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#c9a24a;color:#08203f;font-size:22px;line-height:1}
#nav-text{font-weight:650;font-size:15px;line-height:1.25;flex:1}
#nav-dist{font-style:normal;font-weight:700;color:#e8c874;font-variant-numeric:tabular-nums;white-space:nowrap}
#map-btn{pointer-events:auto;justify-self:start}
.bigmap{display:grid;gap:10px;justify-items:center}
.bigmap canvas{width:min(86vw,560px);aspect-ratio:1;border-radius:18px;border:1px solid #c9a24a88;background:#0b1f12}
.bigmap .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#cbd6ea;justify-content:center}
.bigmap .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.bigmap .steps{text-align:left;margin:0;padding-left:20px;max-width:min(86vw,560px);font-size:14px;color:#e8e4d6}

#offline{max-width:min(380px,90vw);padding:8px 12px;border-radius:12px;background:#3a2a08ee;border:1px solid #c9a24acc;color:#ffe9b0;font-size:13px;font-weight:600}

.route-steps{display:grid;gap:2px;margin:6px 0}.route-steps p{margin:0;text-align:left}.route-steps b{color:#e8c874;margin-right:6px}.route-steps small{color:#93a6c6}
.tbtn.small[data-act="mount"]{grid-column:1;grid-row:2;justify-self:start}

/* ---- ONARU City intro (js/intro.js) ---- */
.intro{position:fixed;inset:0;z-index:60;color:#f6f1e3;font-family:Inter,system-ui,sans-serif}
.in-gate,.in-recap{display:grid;place-items:center;background:radial-gradient(ellipse at center,#06162ecc,#010510f2);padding:5%}
.in-gate-card{max-width:520px;width:100%;text-align:center;display:grid;gap:14px;background:#0a1d3acc;border:1px solid #c9a24a66;border-radius:18px;padding:28px 22px;backdrop-filter:blur(8px)}
.in-gate-card h1{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:.12em;margin:0;font-size:clamp(28px,6vw,44px);color:#f4d98a}
.in-gate-card h2{margin:0;color:#f4d98a}.in-gate-card p{margin:0;line-height:1.5}
.in-tag{color:#dcc;opacity:.9}.in-choices{display:grid;gap:10px}
.in-bar{position:absolute;left:0;right:0;height:7vh;background:#000;z-index:1}.in-bar.top{top:0}.in-bar.bot{bottom:0}
.in-sub{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(7vh + 5%);max-width:min(90vw,720px);margin:0;padding:8px 14px;border-radius:10px;background:#000b;color:#fff;font-size:clamp(16px,2.4vw,22px);line-height:1.35;text-align:center;z-index:2}
.in-sub:empty{display:none}
.in-label{position:absolute;right:5%;top:calc(7vh + 8px);margin:0;font:600 12px/1 ui-monospace,monospace;color:#f4d98a;z-index:2}
.in-skip{position:absolute;right:5%;bottom:calc(7vh + 8px);z-index:3}
.in-paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 16px;background:#000c;border-radius:10px;z-index:3}
.in-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff2;z-index:3}.in-prog i{display:block;height:100%;width:0;background:#c9a24a}
.in-title{position:absolute;left:0;right:0;top:22%;text-align:center;opacity:0;transition:opacity 1.2s;z-index:2;pointer-events:none;text-shadow:0 2px 24px #000}
.in-title.on{opacity:1}
.in-title h1{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:.28em;margin:0;font-size:clamp(34px,9vw,92px);color:#f6f1e3}
.in-title h2{font-family:Manrope,Inter,sans-serif;font-weight:600;letter-spacing:.5em;margin:.1em 0 .4em;font-size:clamp(18px,4vw,40px);color:#f4d98a}
.in-title p{margin:0;font-size:clamp(14px,2vw,20px);opacity:.92}
.choose{margin:10px 0 4px;text-align:center;color:#f4d98a}
@media (prefers-reduced-motion:reduce){.in-title{transition:none}}

/* ---------- phones: smaller cards, compact training, premium intro text ---------- */
@media (max-width:560px){
  .panel{padding:16px 14px;gap:10px;border-radius:18px;max-height:calc(100dvh - 24px);overflow:auto}
  h1{font-size:clamp(28px,9vw,40px)} h2{font-size:20px} .lede{font-size:14px} .btn{min-height:44px;padding:8px 14px;font-size:14.5px}
  .card.choice{padding:10px 12px;font-size:12.5px} .card.choice strong{font-size:16px} .card.choice .emoji{font-size:26px}
  .job{padding:10px} .stats strong{font-size:17px} .jobs{max-height:38vh}
  #tutorial{max-width:min(280px,62vw);padding:8px 10px} #tutorial p{font-size:13px;margin:4px 0 6px}
}
@media (max-height:520px){
  #tutorial{max-width:min(260px,40vw);padding:6px 9px;margin-top:6px} #tutorial p{font-size:12.5px;margin:3px 0 4px} #tutorial .tut-top{font-size:10.5px}
  #tutorial .tut-top .btn{min-height:30px;padding:2px 10px;font-size:12px} #objective span{display:none}
  .panel{max-height:calc(100dvh - 16px);overflow:auto}
}
/* intro: cinematic subtitle with speaker-style gold rule, soft entrance, and a slow Ken-Burns drift on the title card */
.in-sub{background:linear-gradient(180deg,#000a,#000d);border-bottom:2px solid #c9a24a;border-radius:6px;letter-spacing:.01em;text-shadow:0 1px 8px #000;animation:inSub .45s ease-out both;font-family:Manrope,Inter,sans-serif;font-weight:500}
@keyframes inSub{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.in-title h1{animation:inRise 2.4s ease-out both;background:linear-gradient(180deg,#fff,#f4d98a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 22px #c9a24a66)}
.in-title h2{animation:inRise 2.8s .3s ease-out both}.in-title p{animation:inRise 3s .6s ease-out both}
@keyframes inRise{from{opacity:0;letter-spacing:.6em;transform:translateY(14px)}to{opacity:1}}
.in-bar{background:linear-gradient(#000,#000d)}
.in-prog i{background:linear-gradient(90deg,#c9a24a,#f4d98a);box-shadow:0 0 10px #c9a24a}
@media (prefers-reduced-motion:reduce){.in-sub,.in-title h1,.in-title h2,.in-title p{animation:none}}

/* phone */
.phone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.app-icon{display:grid;gap:4px;justify-items:center;padding:10px 4px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--cream);font-size:12px;cursor:pointer}
.app-icon .emoji{font-size:28px}.app-icon:focus-visible{outline:3px solid var(--cyan)}
.chat{display:grid;gap:6px;max-height:34vh;overflow:auto;text-align:left}.msg{padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.1);max-width:80%;justify-self:start}.msg.me{justify-self:end;background:rgba(201,162,74,.28)}
.pin{width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--cream);font:inherit;box-sizing:border-box}
.shot{width:100%;border-radius:12px;border:1px solid var(--line)}.feed{display:grid;gap:10px;max-height:34vh;overflow:auto;text-align:left}.post{border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:6px;background:rgba(255,255,255,.05)}.post img{width:100%;border-radius:10px}
@media(max-width:560px){.phone-grid{grid-template-columns:repeat(3,1fr)}}
.seg{display:flex;gap:8px;flex-wrap:wrap}.seg .btn[aria-pressed="true"]{background:var(--gold,#d9b45a);color:#06162e;border-color:transparent}
.swatch[aria-pressed="true"]{outline:2px solid #f4d27a;outline-offset:2px}
.app-icon{position:relative}.app-icon .badge{position:absolute;top:4px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff7a2a;color:#1c0f05;font:700 11px/18px system-ui;text-align:center}
.phone h3,.panel h3{margin:10px 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* ---- ONARU Intelligence: voice + text assistant panel (FR-VOICE-001..003) ---- */
.overlay.voice .panel { width: min(560px, 100%); text-align: left; }
.voice-status { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line, rgba(255,255,255,.12)); }
.voice-dot { width: 11px; height: 11px; border-radius: 50%; background: #5a6a80; flex: none; transition: background 0.2s; }
.voice-dot.listening { background: #57c7ff; animation: voicePulse 1.15s ease-out infinite; }
.voice-dot.denied, .voice-dot.no-mic, .voice-dot.error { background: #d65a5a; }
.voice-dot.unsupported { background: #c9a24a; }
@keyframes voicePulse { 0% { box-shadow: 0 0 0 0 rgba(87, 199, 255, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(87, 199, 255, 0); } }
.voice-status-txt { font-size: 13.5px; letter-spacing: 0.04em; }
.voice-heard { min-height: 1.5em; margin: 0; color: #cbd6ea; font-style: italic; font-size: 14px; overflow-wrap: anywhere; }
.voice-reply { display: grid; gap: 6px; text-align: left; padding: 11px 14px; border-radius: 12px; background: rgba(87, 199, 255, 0.07); border: 1px solid rgba(87, 199, 255, 0.32); }
.voice-reply.bad { background: rgba(214, 90, 90, 0.09); border-color: rgba(214, 90, 90, 0.38); }
.voice-reply b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9fc6e8; }
.voice-reply p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.voice-row { display: flex; gap: 8px; align-items: center; }
.voice-row input[type="text"] { flex: 1; min-width: 0; }
.voice-mic .fine { margin: 0; }
.voice-lang { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line, rgba(255, 255, 255, 0.12)); color: inherit; font: inherit; }
.voice-lang option { background: #101827; color: #f5f7fb; }