:root { color-scheme:dark; --bg:#0b0910; --panel:#19151f; --fg:#f5f2fc; --muted:#ada3ba; --purple:#7a2cff; --pink:#ff2abf; --cyan:#9ffcff; --accent:#b58aff; --border:#b694d332; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-tap-highlight-color:transparent; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { color:var(--fg); background:radial-gradient(ellipse at 10% 0%,#462c4e28,transparent 50%),radial-gradient(ellipse at 96% 100%,#42255222,transparent 40%),var(--bg); }
button,input,select { font:inherit; }
button,a { -webkit-touch-callout:none; }
button { color:inherit; cursor:pointer; user-select:none; -webkit-user-select:none; }
button:disabled { opacity:.43; cursor:default; }
a { color:inherit; text-decoration:none; }
button,a,input,select { outline-offset:3px; }
:focus-visible { outline:2px solid var(--cyan); }
svg { display:block; width:20px; height:20px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.game-shell { width:min(1200px,100%); height:100vh; height:100svh; height:100dvh; margin:auto; padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:7px; position:relative; }
.game-header { display:grid; grid-template-columns:76px minmax(0,1fr) 76px; min-height:51px; align-items:center; border-bottom:1px solid var(--border); padding-bottom:5px; }
.back-link { display:inline-flex; align-items:center; width:fit-content; gap:4px; min-height:44px; padding-right:5px; font-size:11px; font-weight:750; color:#c5b5d4; border-radius:10px; }
.back-link svg { width:18px; height:18px; }
.game-brand { text-align:center; min-width:0; }
.brand-kicker { display:block; margin-bottom:4px; color:#a28ab7; font-size:7px; font-weight:850; letter-spacing:.15em; }
.game-brand h1 { margin:0; font-size:23px; line-height:1.1; font-weight:900; letter-spacing:-.045em; white-space:nowrap; }
.game-brand h1 span { color:#d7abe1; }
.icon-button { display:inline-grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:11px; color:#d5bcdf; background:#24192dca; touch-action:manipulation; }
#settings-button { justify-self:end; }
.profile-strip { display:flex; align-items:center; gap:16px; min-width:0; min-height:23px; padding:0 2px; }
.profile-wallet { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.currency-icon { color:#e9ce98; font-size:18px; line-height:1; }
.profile-wallet strong { font-size:13px; color:#f0d4a2; font-variant-numeric:tabular-nums; }
.profile-label { color:#9b87ad; font-size:7px; font-weight:850; letter-spacing:.08em; }
.profile-rank { display:flex; align-items:center; gap:5px; }
.profile-rank strong { color:#dac4e8; font-size:11px; }
.profile-xp-track { display:block; width:48px; height:4px; border-radius:5px; background:#533d624d; overflow:hidden; }
.profile-xp-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a36be1,#e398d0); }
.profile-tag { margin-left:auto; color:#927ca4; font-size:7px; font-weight:750; letter-spacing:.10em; white-space:nowrap; }
.game-stage { min-width:0; min-height:0; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid #9975ad42; border-radius:17px; overflow:hidden; background:#16151b; }
.hud { display:grid; grid-template-columns:1.1fr .9fr .9fr 44px; column-gap:14px; row-gap:6px; align-items:center; padding:8px 11px 7px; border-bottom:1px solid #a58bbc2c; background:linear-gradient(115deg,#251b30,#191520); }
.hud-stat { min-width:0; }
.hud-label { display:block; font-size:7px; font-weight:850; letter-spacing:.09em; color:#a592b8; margin-bottom:3px; }
.hud-stat strong { font-size:19px; line-height:1; font-weight:850; letter-spacing:-.03em; white-space:nowrap; font-variant-numeric:tabular-nums; color:#efddfa; }
#score { color:#f0c7e9; }
.hud-gauge { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hud-gauge>span:first-child { display:flex; gap:5px; align-items:center; font-size:7px; letter-spacing:.035em; color:#ab94bd; font-weight:750; }
.hud-gauge strong { margin-left:auto; font-size:8px; font-variant-numeric:tabular-nums; color:#ead5c5; }
.gauge-track { display:block; height:4px; border-radius:5px; overflow:hidden; background:#57415f50; }
.gauge-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ddac69,#e88890); }
.safety-gauge .gauge-track i { background:linear-gradient(90deg,#6ac8b4,#bbe8bf); }
.emergency-indicator { grid-column:3/5; font-size:8px; line-height:1.3; color:#b9a9c7; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emergency-indicator.is-active { color:#f5cf9b; font-weight:750; }
.objective-text { grid-column:1/-1; margin:0; color:#cab7d6; font-size:9px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-workspace { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; min-height:0; }
.world-frame { position:relative; min-width:0; min-height:0; overflow:hidden; background:#789b83; touch-action:none; -webkit-user-select:none; user-select:none; }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-3px; }
.camera-controls { position:absolute; bottom:8px; right:8px; display:flex; gap:4px; padding:3px; border:1px solid #e0eae52e; border-radius:12px; background:#15231bdd; box-shadow:0 2px 12px #1320172b; }
.camera-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ecf6e622; border-radius:8px; background:#304239eb; color:#e5eadc; touch-action:manipulation; }
.camera-button:active { background:#506b52; }
.incident-banner { position:absolute; top:7px; left:7px; right:7px; padding:7px 10px; border:1px solid #a3763f70; border-radius:8px; background:#3f321ef0; color:#f7d9a6; font-size:9px; font-weight:650; line-height:1.5; pointer-events:none; }
.signal-panel { min-width:0; background:linear-gradient(120deg,#241b2c,#17131e); border-top:1px solid #a18bb83a; padding:8px 10px 7px; }
.junction-heading { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.junction-picker { display:flex; flex:1; position:relative; min-width:0; flex-direction:column; gap:1px; }
.control-label { display:block; font-size:7px; font-weight:850; color:#a891bc; letter-spacing:.075em; }
.junction-picker .control-label { position:absolute; left:10px; top:5px; pointer-events:none; z-index:1; }
select { display:block; width:100%; min-height:44px; padding:16px 28px 4px 10px; border:1px solid #a783bd48; border-radius:9px; background:#2a2033; color:#e7d5f0; font-size:16px; font-weight:750; line-height:1.4; text-overflow:ellipsis; }
.auto-control { display:flex; flex-shrink:0; align-items:center; flex-direction:column; justify-content:center; gap:3px; position:relative; width:56px; height:44px; color:#b6a2c6; font-size:7px; font-weight:850; letter-spacing:.06em; cursor:pointer; }
.auto-control input { position:absolute; inset:0; margin:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.mini-switch { display:block; position:relative; width:31px; height:17px; border:1px solid #a58ab450; border-radius:15px; background:#503860; pointer-events:none; }
.mini-switch::after { content:""; display:block; width:11px; height:11px; position:absolute; top:2px; left:2px; border-radius:50%; background:#b89bc8; transition:transform .15s,background .15s; }
.auto-control input:checked+.mini-switch { background:#573b75; border-color:#c28bde; }
.auto-control input:checked+.mini-switch::after { transform:translateX(14px); background:#e7c4ff; }
.auto-control input:focus-visible+.mini-switch { outline:2px solid var(--cyan); outline-offset:3px; }
.junction-summary { display:flex; align-items:center; justify-content:space-between; gap:7px; color:#d5bfdc; font-size:9px; line-height:1.4; margin:3px 0 6px; }
.junction-summary strong { font-size:9px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#queue-info { font-size:8px; color:#b4a0bf; text-align:right; flex-shrink:0; }
.phase-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.phase-button { display:flex; position:relative; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px 5px; padding:5px 6px; min-width:44px; min-height:44px; border:1px solid #a185b740; border-radius:9px; color:#c2abc9; background:#2a2031; font-size:9px; font-weight:750; touch-action:manipulation; }
.phase-icon { font-size:15px; line-height:1; color:#d4c0df; }
.phase-label { font-size:9px; line-height:1.2; font-weight:750; }
.phase-demand { font-size:8px; line-height:1; font-weight:800; padding:3px 4px; border-radius:5px; background:#73548535; color:#dac0e8; }
.phase-button.is-current { border-color:#91d09c88; background:linear-gradient(120deg,#2e493d,#23322c); color:#d9eed7; box-shadow:inset 0 0 0 1px #91d09c19; }
.phase-button.is-current .phase-icon { color:#addeb4; }
.phase-button.is-pending { border-color:#e5ba6c8c; background:linear-gradient(120deg,#53442d,#31281f); color:#f4d99a; }
.phase-button.is-pending .phase-icon { color:#f2d29b; }
.phase-button.is-current::after { content:"●"; position:absolute; top:3px; right:4px; font-size:6px; color:#aaddb8; }
.phase-button.is-pending::after { content:"…"; position:absolute; top:0; right:4px; font-size:12px; color:#f2d29b; }
.transition-status { font-size:8px; line-height:1.4; color:#a992b5; margin:6px 0 0; min-height:11px; }
.tutorial-panel { position:absolute; left:8px; right:8px; bottom:65px; width:min(430px,calc(100% - 16px)); margin:0 auto; padding:10px 12px; border:1px solid #d5b1e373; border-radius:11px; background:#24162ced; box-shadow:0 4px 20px #0005; z-index:3; pointer-events:auto; }
.tutorial-kicker { display:block; font-size:7px; font-weight:850; letter-spacing:.13em; color:#d8a9dd; }
#tutorial-text { margin:5px 0 8px; color:#e2cbed; font-size:10px; line-height:1.5; }
.tutorial-actions { display:flex; gap:6px; }
.tutorial-actions button { flex:1; min-height:44px; font-size:10px; padding:7px; }
.primary-button,.secondary-button,.tertiary-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:11px 15px; border:1px solid #b96cd46b; border-radius:11px; color:#f6e5ff; font-size:12px; font-weight:800; line-height:1.4; touch-action:manipulation; }
.primary-button { background:linear-gradient(115deg,#7a2cff,#b72bac); border-color:#b96feb; box-shadow:0 5px 20px #8b36ae24,inset 0 1px #ffffff16; }
.secondary-button { color:#e0cbe8; background:linear-gradient(115deg,#2c2036,#201728); border-color:#ba93d340; }
.tertiary-button { color:#bfa9ca; background:#211728; border-color:#967cac32; }
.danger-button { color:#f1bacb; background:#56263b66; border-color:#ce819558; }
button:active:not(:disabled) { filter:brightness(1.16); }
.game-overlay { position:absolute; inset:0; z-index:10; display:flex; padding:25px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:radial-gradient(ellipse at 50% 12%,#35273eea,#110c1bef 68%); touch-action:pan-y; }
.overlay-panel { flex-shrink:0; width:min(520px,100%); margin:auto; text-align:center; }
.overlay-kicker { display:block; color:#d7a7ca; font-size:8px; line-height:1.6; font-weight:850; letter-spacing:.15em; margin-bottom:12px; }
.overlay-title { margin:0; font-size:clamp(35px,6vw,64px); line-height:1.03; font-weight:900; letter-spacing:-.055em; }
.overlay-title span { color:transparent; background:linear-gradient(110deg,#c4a0ec,#eba8d0); background-clip:text; -webkit-background-clip:text; }
.overlay-copy { margin:13px 0 18px; color:#bfaacb; font-size:12px; line-height:1.7; }
.overlay-copy strong { color:#efdbfa; }
.menu-primary { display:flex; flex-direction:column; width:100%; min-height:58px; gap:3px; margin:17px 0 9px; }
.menu-primary strong { font-size:14px; }
.menu-primary span,.menu-primary small { font-size:9px; font-weight:600; color:#e4c9ec; }
.menu-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:9px 0; }
.menu-modes>* { min-width:0; flex-direction:column; gap:4px; min-height:66px; padding:10px 6px; }
.menu-modes strong { font-size:11px; }
.menu-modes small { color:#c6accf; font-size:9px; font-weight:550; line-height:1.35; }
.menu-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:9px 0 0; }
.menu-actions>* { min-width:0; min-height:44px; padding:9px 6px; font-size:10px; }
.menu-actions .wide-button { grid-column:1/-1; }
.overlay-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px 0 0; }
.overlay-actions>* { min-width:110px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0; }
.stat-cell { min-width:0; padding:12px 10px; border:1px solid #a582bb34; border-radius:11px; background:#301f3c66; }
.stat-cell>span,.stat-cell>small { display:block; margin-bottom:5px; color:#ac95bc; font-size:8px; font-weight:750; letter-spacing:.045em; line-height:1.45; }
.stat-cell>strong { display:block; color:#eddafb; font-size:23px; line-height:1.15; font-weight:850; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stars-row { display:flex; justify-content:center; align-items:center; gap:7px; margin:13px 0; color:#ead19c; font-size:32px; line-height:1.3; }
.stars-row>span:not(.is-earned),.stars-row .is-empty { color:#65546e; }
.results-rewards { color:#e9cf9d; background:#77601e1e; border:1px solid #c19d5842; border-radius:10px; padding:11px; margin:12px 0; font-size:11px; line-height:1.65; }
.new-record { display:inline-block; color:#c7eef0; background:#22414750; border:1px solid #83c2c447; border-radius:7px; font-size:9px; font-weight:800; padding:6px 9px; }
.score-explanation { color:#b9a1c5; margin:12px 0; padding:0 11px; border:1px solid #a582b333; border-radius:10px; text-align:left; background:#31213b40; font-size:10px; line-height:1.7; }
.score-explanation summary { min-height:44px; padding:12px 0; color:#d6b8e4; font-weight:750; cursor:pointer; }
.score-explanation p { margin:0 0 11px; }
.game-shell.is-menu .hud,.game-shell.is-menu .signal-panel,.game-shell.is-menu .camera-controls { display:none; }
.game-shell.is-menu .game-stage { grid-template-rows:minmax(0,1fr); }
.game-shell.is-menu .game-workspace { grid-template-rows:minmax(0,1fr); }
.toast { position:fixed; top:max(80px,calc(env(safe-area-inset-top) + 68px)); left:50%; transform:translateX(-50%); z-index:40; width:max-content; max-width:min(440px,calc(100% - 24px)); padding:10px 14px; border:1px solid #c397df6e; border-radius:12px; color:#f5dfff; background:#30213ced; box-shadow:0 6px 25px #0007; text-align:center; font-size:11px; font-weight:750; line-height:1.6; pointer-events:none; }
.toast:not([hidden]) { animation:toast-enter .2s ease-out; }
@keyframes toast-enter { from { opacity:0; transform:translate(-50%,-5px); } to { opacity:1; transform:translate(-50%,0); } }
.save-note { position:absolute; bottom:max(9px,env(safe-area-inset-bottom)); left:14px; right:14px; z-index:30; margin:0; padding:7px 11px; border:1px solid #c69f6557; border-radius:9px; color:#f0cc9c; background:#38291eef; font-size:10px; line-height:1.5; text-align:center; pointer-events:none; }
.game-dialog { width:min(620px,calc(100vw - 24px)); max-height:min(860px,calc(100svh - 24px)); max-height:min(860px,calc(100dvh - 24px)); margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border:1px solid #af87cc65; border-radius:18px; color:var(--fg); background:linear-gradient(135deg,#291d33,#17111f 70%); box-shadow:0 18px 60px #000a; }
.game-dialog::backdrop { background:#040209c9; backdrop-filter:blur(4px); }
.levels-dialog,.customization-dialog { width:min(740px,calc(100vw - 24px)); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:2; padding:18px 20px 14px; background:#291e34fa; border-bottom:1px solid #ad91c132; }
.dialog-kicker { display:block; color:#d7a7cd; font-size:8px; font-weight:850; letter-spacing:.12em; line-height:1.5; }
.dialog-header h2 { margin:5px 0 0; color:#f1e5fb; font-size:23px; font-weight:850; letter-spacing:-.03em; line-height:1.2; }
.dialog-body { padding:19px 20px 23px; }
.dialog-intro { margin:0 0 15px; color:#bca6ca; font-size:12px; line-height:1.75; }
.chapter-tabs,.cosmetic-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }
.chapter-tab,.cosmetic-tabs button { flex:1; min-width:84px; min-height:44px; padding:8px; border:1px solid #a785bb47; border-radius:10px; color:#bba3cb; background:#2c2035; font-size:10px; font-weight:750; touch-action:manipulation; }
.chapter-tab.is-selected,.cosmetic-tabs .is-selected { border-color:#cf96e4; background:#5b3474; color:#f0ddfa; }
.district-card { padding:16px; margin:0 0 14px; border:1px solid #9e82913f; border-radius:13px; background:linear-gradient(115deg,#332b3644,#21192b88); }
.district-card h3 { margin:0 0 6px; font-size:19px; font-weight:800; letter-spacing:-.025em; }
.district-card p { margin:5px 0; color:#bda4c9; font-size:11px; line-height:1.65; }
.district-card>small { color:#d7bea0; font-size:9px; }
.level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.level-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:98px; min-width:0; padding:10px 6px; border:1px solid #a181b644; border-radius:11px; background:#2c2036; color:#c9afdc; font-size:10px; touch-action:manipulation; }
.level-number { color:#e6d0f1; font-size:24px; line-height:1; font-weight:850; font-variant-numeric:tabular-nums; }
.level-tile strong { color:#dec8ed; font-size:10px; line-height:1.4; }
.level-tile small { color:#a78eb9; font-size:8px; line-height:1.3; }
.level-stars { display:flex; gap:2px; color:#65566e; font-size:11px; }
.level-stars i { font-style:normal; }
.level-stars .is-earned { color:#eccd96; }
.level-tile .stars-row { font-size:11px; gap:2px; margin:1px 0; }
.level-tile.is-complete { border-color:#c1a6724d; background:#343028; }
.level-tile.is-complete .level-number { color:#eed39e; }
.level-tile.is-locked { color:#7c6c88; background:#201828; border-color:#8873962b; }
.level-tile.is-locked strong,.level-tile.is-locked .level-number { color:#93829f; }
.cosmetic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cosmetic-card { display:flex; flex-direction:column; min-width:0; gap:9px; position:relative; padding:14px; border:1px solid #aa82c143; border-radius:13px; background:#24192c; }
.cosmetic-card.is-selected { border-color:#d9a3e283; background:linear-gradient(120deg,#432c51,#2b1b33); box-shadow:inset 0 0 0 1px #dbaaef22; }
.cosmetic-card.is-owned:not(.is-selected) { border-color:#9bac9b55; }
.cosmetic-card h3 { margin:0; color:#efdafa; font-size:13px; line-height:1.4; letter-spacing:-.02em; }
.cosmetic-card p,.cosmetic-card small { margin:0; color:#b69bc7; font-size:10px; line-height:1.6; }
.cosmetic-price { color:#edcc98; font-size:10px; font-weight:800; }
.cosmetic-preview { display:block; width:100%; height:92px; border:1px solid #a789b431; border-radius:10px; background:radial-gradient(ellipse,#60475935,#191220 85%); }
.cosmetic-preview svg { width:100%; height:100%; }
.cosmetic-card .primary-button,.cosmetic-card .secondary-button { width:100%; min-height:44px; margin-top:auto; padding:9px 6px; font-size:10px; }
.achievement-card { display:flex; align-items:flex-start; gap:11px; padding:14px 12px; margin-bottom:9px; border:1px solid #ae89c035; border-radius:12px; background:#24192c; }
.achievement-card.is-unlocked { border-color:#bc9ccd62; background:linear-gradient(115deg,#36263d,#27182f); }
.achievement-icon { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border:1px solid #b89dce28; border-radius:11px; color:#c29cd8; background:#61416536; font-size:20px; }
.achievement-card.is-unlocked .achievement-icon { color:#edd5a0; background:#74603135; }
.achievement-body { flex:1; min-width:0; }
.achievement-body h3,.achievement-body>strong { display:block; margin:0 0 4px; color:#eedcf8; font-size:12px; }
.achievement-body p { color:#b69bc4; font-size:10px; line-height:1.6; margin:0 0 7px; }
.achievement-body small { display:block; color:#c7afd6; font-size:9px; margin:6px 0 0; line-height:1.5; }
.progress-track { display:block; height:5px; border-radius:6px; background:#59416350; overflow:hidden; }
.progress-fill { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a46bdb,#d88cce); }
.setting-row,.volume-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:72px; padding:15px 0; border-bottom:1px solid #aa8ac12b; position:relative; }
.setting-row { cursor:pointer; }
.setting-row>span:first-child,.volume-row>span { min-width:0; }
.setting-row strong,.volume-row strong { display:block; margin-bottom:5px; color:#e9d8f4; font-size:13px; font-weight:750; }
.setting-row small,.volume-row small { display:block; color:#b69ac8; font-size:11px; line-height:1.65; }
.setting-row input { position:absolute; right:0; width:48px; height:44px; opacity:0; cursor:pointer; }
.switch { display:block; position:relative; width:43px; height:26px; flex-shrink:0; border:1px solid #a17eb45c; border-radius:20px; background:#42314f; pointer-events:none; }
.switch::after { content:""; display:block; width:16px; height:16px; position:absolute; left:4px; top:4px; border-radius:50%; background:#bba1cf; transition:transform .16s,background .16s; }
.setting-row input:checked+.switch { background:#7141a0; border-color:#b886dc; }
.setting-row input:checked+.switch::after { transform:translateX(17px); background:#f0d9ff; }
.setting-row input:focus-visible+.switch { outline:2px solid var(--cyan); outline-offset:3px; }
.volume-row input { flex-shrink:0; width:110px; min-height:44px; accent-color:#bb86e6; }
.settings-status { color:#c4a9d8; font-size:10px; line-height:1.6; }
.local-save-info { color:#a68bb7; font-size:10px; line-height:1.75; padding:13px 0; }
.release-info { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:22px; color:#8e759f; font-size:7px; letter-spacing:.08em; font-weight:750; }
.notice { padding:11px 12px; border:1px solid #c3a67243; border-radius:10px; background:#6b543925; color:#edcfaa; font-size:11px; line-height:1.65; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.dialog-actions>* { flex:1; }
.sandbox-options>label,.sandbox-options .sandbox-field { display:block; margin-bottom:16px; }
.sandbox-options label>strong,.sandbox-options label>span:not(.switch),.sandbox-field>strong { display:block; color:#dac2e7; font-size:12px; font-weight:750; margin-bottom:6px; }
.sandbox-options select { padding:10px 28px 10px 11px; }
.sandbox-options input[type="range"] { width:100%; min-height:44px; accent-color:#ba82df; }
.sandbox-options .primary-button { width:100%; }
.sandbox-options .setting-row>span:first-child { margin-bottom:0; }
.howto-card,.how-to-panel { margin-bottom:13px; padding:15px; border:1px solid #a481bd35; border-radius:12px; background:#31213950; }
.howto-card h3,.how-to-panel h3 { margin:0 0 7px; color:#e6cbf3; font-size:14px; }
.howto-card p,.how-to-panel p,.howto-card li,.how-to-panel li { color:#bba0ca; font-size:11px; line-height:1.75; }
.howto-card p:last-child,.how-to-panel p:last-child { margin-bottom:0; }
.keyboard-help { padding-top:10px; border-top:1px solid #a482b42b; color:#ccafd8!important; font-size:10px!important; }
.noscript-note { position:fixed; inset:15%; z-index:100; display:grid; place-content:center; border:1px solid #b28cc6; border-radius:18px; padding:25px; color:#f0dcfc; background:#261a32; font-size:16px; line-height:1.6; }
.noscript-note a { margin-top:15px; color:#bde9eb; }
@media (min-width:900px) and (min-height:600px) { .game-shell { padding:19px 25px 20px; gap:10px; } .game-header { min-height:63px; } .game-brand h1 { font-size:29px; } .brand-kicker { font-size:8px; } .profile-strip { min-height:25px; } .game-stage { border-radius:20px; } .hud { grid-template-columns:1fr 1fr 1fr minmax(120px,1fr) minmax(120px,1fr) minmax(160px,1.5fr) 44px; padding:12px 15px; row-gap:7px; } #pause-button { grid-column:7; grid-row:1; } .congestion-gauge { grid-column:4; grid-row:1; } .safety-gauge { grid-column:5; grid-row:1; } .emergency-indicator { grid-column:6; grid-row:1; white-space:normal; } .objective-text { grid-column:1/7; grid-row:2; font-size:10px; } .hud-stat strong { font-size:22px; } .hud-label { font-size:8px; } .game-workspace { grid-template-columns:minmax(0,1fr) 245px; grid-template-rows:minmax(0,1fr); } .signal-panel { border-top:0; border-left:1px solid #a18bb83a; padding:16px 13px; } .junction-heading { flex-direction:column; align-items:stretch; gap:9px; } .junction-picker { width:100%; } .auto-control { flex-direction:row; align-self:flex-end; width:100%; justify-content:flex-start; gap:9px; height:44px; padding:8px; border:1px solid #a185b733; border-radius:9px; background:#28202e; } .junction-summary { display:block; margin:10px 0; } .junction-summary strong,#queue-info { display:block; text-align:left; font-size:10px; white-space:normal; margin-top:5px; } .phase-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .phase-button { min-height:56px; font-size:11px; } .phase-label { font-size:10px; } .transition-status { margin-top:12px; font-size:10px; line-height:1.7; } .camera-controls { bottom:12px; right:12px; } }
@media (max-width:370px) { .game-shell { padding-left:max(9px,env(safe-area-inset-left)); padding-right:max(9px,env(safe-area-inset-right)); gap:5px; } .game-header { grid-template-columns:60px minmax(0,1fr) 46px; min-height:48px; } .game-brand h1 { font-size:19px; } .brand-kicker { font-size:6px; letter-spacing:.11em; } .back-link { font-size:10px; gap:1px; } .profile-strip { gap:10px; } .profile-tag { display:none; } .profile-xp-track { width:44px; } .hud { gap:5px 8px; padding:5px 9px 6px; } .hud-stat strong { font-size:18px; } .hud-label { font-size:6px; } .hud-gauge>span:first-child { font-size:6px; } .emergency-indicator { font-size:7px; } .objective-text { font-size:8px; } .signal-panel { padding:6px 8px; } .junction-summary { gap:5px; } #queue-info { font-size:7px; } .phase-button { font-size:8px; padding:4px; gap:3px; } .phase-label { font-size:8px; } .phase-icon { font-size:14px; } .phase-demand { font-size:7px; padding:2px 3px; } .transition-status { font-size:7px; } .game-overlay { padding:18px 15px; } .overlay-kicker { font-size:7px; } .overlay-title { font-size:35px; } .overlay-copy { font-size:11px; margin:10px 0 13px; } .menu-actions>* { font-size:9px; padding:8px 4px; } .menu-primary { margin-top:14px; } .menu-modes strong { font-size:10px; } .menu-modes small { font-size:8px; } .dialog-header { padding:15px 14px 12px; gap:8px; } .dialog-header h2 { font-size:21px; } .dialog-kicker { font-size:7px; } .dialog-body { padding:15px 14px 19px; } .cosmetic-card { padding:10px; } .cosmetic-card h3 { font-size:12px; } .volume-row input { width:83px; } .stat-cell { padding:11px 9px; } .stat-cell>strong { font-size:21px; } .achievement-card { padding:12px 10px; gap:8px; } }
@media (orientation:landscape) and (max-height:599px) { .game-shell { padding-top:max(4px,env(safe-area-inset-top)); padding-bottom:max(4px,env(safe-area-inset-bottom)); padding-left:max(9px,env(safe-area-inset-left)); padding-right:max(9px,env(safe-area-inset-right)); gap:3px; } .game-header { min-height:44px; padding-bottom:0; border-bottom:0; grid-template-columns:80px minmax(0,1fr) 80px; } .game-brand h1 { font-size:21px; } .brand-kicker { font-size:6px; margin-bottom:3px; } .profile-strip { min-height:17px; gap:16px; } .profile-wallet strong { font-size:11px; } .currency-icon { font-size:14px; } .profile-rank strong { font-size:10px; } .game-stage { border-radius:12px; } .hud { grid-template-columns:64px 50px 60px minmax(70px,1fr) minmax(70px,1fr) 44px; column-gap:8px; row-gap:0; padding:3px 8px; } .hud-stat strong { font-size:16px; } .hud-label { font-size:6px; margin-bottom:2px; } #pause-button { grid-column:6; grid-row:1; } .congestion-gauge { grid-column:4; grid-row:1; } .safety-gauge { grid-column:5; grid-row:1; } .emergency-indicator { grid-column:4/6; grid-row:2; font-size:7px; } .objective-text { grid-column:1/4; grid-row:2; font-size:7px; } .game-workspace { grid-template-columns:minmax(0,1fr) 208px; grid-template-rows:minmax(0,1fr); } .signal-panel { border-top:0; border-left:1px solid #a18bb83a; padding:5px 7px; overflow:auto; overscroll-behavior:contain; } .junction-heading { gap:4px; margin-bottom:3px; } .auto-control { width:40px; } .junction-picker .control-label { font-size:6px; top:5px; } .junction-picker select { font-size:10px; padding-left:8px; } .junction-summary { display:block; font-size:8px; margin:3px 0 5px; } .junction-summary strong { font-size:8px; } #queue-info { display:block; font-size:7px; margin-top:2px; text-align:left; } .phase-controls { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .phase-button { flex-direction:column; gap:2px; min-height:44px; padding:3px 2px; } .phase-icon { font-size:13px; } .phase-label { font-size:7px; } .phase-demand { position:absolute; top:2px; right:2px; font-size:6px; padding:1px 2px; } .transition-status { margin-top:5px; font-size:7px; line-height:1.3; } .camera-controls { bottom:5px; right:5px; gap:2px; padding:2px; } .tutorial-panel { max-width:360px; bottom:59px; padding:7px 10px; } #tutorial-text { font-size:9px; margin:4px 0 6px; } .tutorial-kicker { font-size:6px; } .tutorial-actions button { font-size:9px; } .game-overlay { padding:14px 20px; } .overlay-panel { max-width:560px; } .overlay-kicker { font-size:7px; margin-bottom:6px; } .overlay-title { font-size:35px; } .overlay-copy { font-size:10px; margin:8px 0 10px; } .menu-primary { margin:11px 0 7px; min-height:49px; } .menu-modes { gap:6px; margin:7px 0; } .menu-modes>* { min-height:52px; padding:7px; } .menu-actions { margin:7px 0 0; gap:6px; } .menu-actions>* { font-size:9px; padding:7px; } .stats-grid { margin:10px 0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .stat-cell { padding:9px 7px; } .stat-cell>strong { font-size:19px; } .stars-row { font-size:25px; margin:8px 0; } .game-dialog { max-height:calc(100dvh - 12px); } .dialog-header { padding:10px 15px; } .dialog-header h2 { font-size:20px; } .dialog-kicker { font-size:7px; } .dialog-body { padding:14px 15px 18px; } .toast { top:55px; font-size:9px; padding:7px 12px; } .game-shell.is-menu .game-workspace { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* The guided tutorial reserves its own strip, leaving map taps unobstructed. */
.game-stage:has(> #tutorial-panel:not([hidden])) { grid-template-rows:auto auto minmax(0,1fr); }
.game-stage > .tutorial-panel { position:static; width:auto; max-width:none; margin:0; border:0; border-bottom:1px solid #c198d647; border-radius:0; padding:7px 9px; box-shadow:none; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; background:#302038; }
.game-stage > .tutorial-panel .tutorial-kicker { display:none; }
.game-stage > .tutorial-panel #tutorial-text { margin:0; font-size:9px; line-height:1.45; }
.game-stage > .tutorial-panel .tutorial-actions { gap:4px; }
.game-stage > .tutorial-panel .tutorial-actions button { flex:none; min-width:52px; min-height:44px; padding:6px; font-size:9px; }
@media (max-width:370px) { .game-stage > .tutorial-panel { gap:6px; padding:6px 8px; } .game-stage > .tutorial-panel #tutorial-text { font-size:8px; } .game-stage > .tutorial-panel .tutorial-actions button { min-width:48px; font-size:8px; } }

/* Priority response is a real, keyboard-accessible 44px HUD control. */
.hud { grid-template-columns:minmax(62px,1fr) minmax(37px,.7fr) minmax(46px,.8fr) 44px 44px; column-gap:7px; }
#pause-button { grid-column:5; grid-row:1; }
.emergency-indicator { grid-column:4; grid-row:1; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:3px; border:1px solid #a382b740; border-radius:9px; background:#2b2034; color:#bca6cd; font-size:7px; line-height:1.4; text-align:center; white-space:normal; overflow-wrap:normal; touch-action:manipulation; }
.emergency-indicator.is-active { border-color:#dbac777d; background:#514029; color:#ffdcab; }
.congestion-gauge { grid-column:1/3; grid-row:2; }
.safety-gauge { grid-column:3/6; grid-row:2; }
.objective-text { grid-row:3; }
.phase-button.has-emergency { box-shadow:inset 0 0 0 1px #f2bd7b7a; }
.phase-button.has-emergency .phase-icon { color:#f7cea1; }
.setting-row:not(:has(.switch)) input[type="checkbox"] { position:static; width:44px; height:44px; opacity:1; margin:0; flex-shrink:0; accent-color:#ac73de; }
#howto-content > .tutorial-card { padding:15px; border:1px solid #ab87bc35; border-radius:12px; background:#33253d50; }
#howto-content h3 { margin:0 0 8px; color:#e8d0f5; font-size:15px; }
#howto-content p { color:#bfa5cb; font-size:11px; line-height:1.8; }
.campaign-records p { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; margin:0; border-bottom:1px solid #ad88c12b; color:#bda5ca; font-size:10px; }
.campaign-records strong { color:#e2c6ed; white-space:nowrap; }
.primary-button { background:linear-gradient(115deg,var(--hud-accent,#7a2cff),#b72bac); }
.profile-xp-track i { background:linear-gradient(90deg,var(--hud-accent,#a36be1),#e398d0); }
#score { color:color-mix(in srgb,var(--hud-accent,#7a2cff) 38%,white); }
@media (max-width:370px) { #score { font-size:16px; } .emergency-indicator { font-size:6px; } }
@media (min-width:900px) and (min-height:600px) {
 .hud { grid-template-columns:1fr 1fr 1fr minmax(110px,1fr) minmax(110px,1fr) minmax(140px,1.4fr) 44px; }
 #pause-button { grid-column:7; }
 .congestion-gauge { grid-column:4; grid-row:1; }
 .safety-gauge { grid-column:5; grid-row:1; }
 .emergency-indicator { grid-column:6; grid-row:1; font-size:10px; padding:7px; }
 .objective-text { grid-column:1/7; grid-row:2; }
}
@media (orientation:landscape) and (max-height:599px) {
 .hud { grid-template-columns:60px 42px 51px minmax(60px,1fr) minmax(60px,1fr) 44px 44px; column-gap:6px; }
 #pause-button { grid-column:7; }
 .congestion-gauge { grid-column:4; grid-row:1; }
 .safety-gauge { grid-column:5; grid-row:1; }
 .emergency-indicator { grid-column:6; grid-row:1; font-size:6px; }
 .objective-text { grid-column:1/6; grid-row:2; }
}