/* Pixel town identity: notched pixel panels with hard shadows for game controls; Press Start 2P
   only for world titles; the platform rounded face for every hint and label. Sound and full
   screen follow the shared platform chrome (3 px border, 18 px radius, 24-grid SVG icons). */
@font-face { font-family:'Press Start 2P'; src:url('./assets/fonts/press-start-2p-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2000-206F; font-display:swap; }
@font-face { font-family:'Press Start 2P'; src:url('./assets/fonts/press-start-2p-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1; font-display:swap; }
:root { --ink:#0d1030; --panel:#1c2470; --panel-hi:#2b45ff; --icon:#ffd800; --paper:#fff3c4; --tap-target:56px; --chrome:56px; --px:3px; --home-w:86px;
  --pixel-font:'Press Start 2P',ui-monospace,monospace; --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --spring:cubic-bezier(.2,.9,.25,1.2); color:var(--ink); font-family:var(--round); font-weight:850; background:#95aa77; }
:root[data-theme=night] { background:#050a2e; }
:root[data-theme=snow] { background:#eef4ff; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; font:inherit; color:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:var(--px) solid var(--icon); outline-offset:5px; }
svg.icon { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pixel-title { font-family:var(--pixel-font); font-size:16px; font-weight:400; line-height:1.4; letter-spacing:0; text-transform:uppercase; }
.game-shell { position:relative; min-height:100dvh; height:100dvh; overflow:hidden; }
.scene,#game-canvas { position:absolute; inset:0; width:100%; height:100%; }
#game-canvas { touch-action:none; -webkit-tap-highlight-color:transparent; }

/* HUD row: home slot (tracks the platform control width), task panel, sound + full screen. */
.hud { position:absolute; z-index:3; top:0; left:0; right:0; padding:max(10px,env(safe-area-inset-top)) max(11px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  display:grid; grid-template-columns:calc(var(--home-w) + 12px) minmax(0,1fr) auto; align-items:start; pointer-events:none; }
.hud>* { pointer-events:auto; }
.hud .tokenville-home-slot { pointer-events:none; }
.task-panel { justify-self:center; display:grid; justify-items:center; gap:6px; min-width:0; }
.hud-actions { display:flex; gap:12px; justify-self:end; }
.square-button { display:grid; place-items:center; width:var(--chrome); height:var(--chrome); padding:0; border:3px solid var(--ink); border-radius:18px;
  background:var(--panel); color:var(--icon); box-shadow:0 4px 0 var(--ink); transition:transform 240ms var(--spring); }
.square-button:active { transform:scale(.94); transition-duration:80ms; }
#sound-button[aria-pressed=true] .sound-off,#sound-button[aria-pressed=false] .sound-on { display:none; }

/* Notched pixel outline (box-shadow bars leave the four corners open) + inner bevel. */
.dpad button,.celebration-actions>*,#delivery-list button,.celebration-card,.task-pill,.mini-map-wrap,#world-banner,.loading-card {
  border:0; border-radius:0; text-decoration:none;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink),
    inset 0 calc(-1*var(--px)) 0 0 #0006,inset 0 var(--px) 0 0 #fff3,0 calc(2*var(--px)) 0 0 #0005; }

/* Cargo tiles: ghost cargo in an empty frame -> cargo on board -> delivered with a check sprite. */
#delivery-list { list-style:none; margin:0; padding:0; display:flex; gap:8px; }
#delivery-list button { width:48px; height:48px; background:#d8d2bd; position:relative; padding:5px; display:grid; place-items:center; transition:transform 240ms var(--spring); }
#delivery-list button:active { transform:scale(.94); transition-duration:80ms; }
#delivery-list img { display:block; width:34px; height:34px; object-fit:contain; image-rendering:pixelated; }
#delivery-list .empty img { filter:grayscale(1) brightness(1.15); opacity:.42; }
#delivery-list .loaded button { background:var(--paper); }
#delivery-list .delivered button { background:#bfe8a0; }
#delivery-list .delivered button::after { content:''; position:absolute; bottom:-6px; right:-6px; width:21px; height:18px; background:#1f7a3f url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%207%206%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M6%200h1v1h-1zM5%201h2v1h-2zM0%202h1v1h-1zM4%202h2v1h-2zM0%203h2v1h-2zM3%203h2v1h-2zM1%204h3v1h-3zM2%205h1v1h-1z%22/%3E%3C/svg%3E") center/14px 12px no-repeat; image-rendering:pixelated; box-shadow:0 0 0 2px var(--ink); }
#delivery-list .pop button { animation:tile-pop 260ms var(--spring); }
@keyframes tile-pop { 0% { transform:scale(.8); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }

.task-pill { margin:0; display:inline-flex; align-items:center; gap:8px; min-height:40px; max-width:min(560px,92vw); padding:4px 14px 4px 6px; background:var(--paper); color:var(--ink);
  font-size:18px; line-height:1.15; font-weight:900; white-space:nowrap; transform-origin:50% 0; transition:transform 300ms var(--spring); }
.task-pill img { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; flex:none; }
.task-pill.grow { transform:scale(1.14); background:#ffe680; }
.task-pill.long { font-size:16px; gap:6px; padding-right:10px; }
/* Mixed-language mode: a small drawn chip names the district's language (RU / EN / ET). */
.lang-badge { flex:none; padding:1px 5px; background:var(--panel); color:var(--icon); font-size:16px; line-height:1.1; font-weight:900; letter-spacing:.04em; }
.district-dots { list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.district-dots li { width:12px; height:12px; background:#0d103055; box-shadow:0 0 0 2px var(--ink); }
.district-dots li.done { background:var(--icon); }
.district-dots li.current { background:var(--paper); box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--icon); }
.district-dots-panel { display:none; }
:root[data-theme=night] .district-dots li:not(.done):not(.current) { background:#ffffff26; box-shadow:0 0 0 2px #7d88ff; }

.world-label { position:absolute; z-index:2; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); max-width:230px; display:grid; gap:10px; pointer-events:none; }
.world-label .pixel-title { color:var(--paper); text-shadow:3px 3px 0 var(--ink); }
:root[data-theme=snow] .world-label .pixel-title { color:var(--panel); text-shadow:2px 2px 0 #ffffff; }

.dpad { position:absolute; z-index:3; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:grid;
  grid-template-columns:repeat(3,var(--tap-target)); grid-template-rows:repeat(3,var(--tap-target)); gap:12px; touch-action:none; }
.dpad button { display:grid; place-items:center; min-width:var(--tap-target); min-height:var(--tap-target); padding:0; color:var(--icon); background:var(--panel); touch-action:none; transition:transform 200ms var(--spring); }
.dpad svg.icon { width:28px; height:28px; stroke-width:3; }
.dpad button:active,.dpad button.pressed { background:var(--panel-hi); transform:translateY(var(--px)); transition-duration:80ms; }
.dpad-up { grid-column:2; grid-row:1; } .dpad-left { grid-column:1; grid-row:2; } .dpad-right { grid-column:3; grid-row:2; } .dpad-down { grid-column:2; grid-row:3; }
.dpad .dpad-center { grid-column:2; grid-row:2; background:var(--paper); color:var(--ink); }
.dpad .dpad-center.calling { animation:hint-call 900ms var(--spring) 2; }
@keyframes hint-call { 50% { transform:scale(1.1); background:#ffe680; } }
.game-shell.celebrating .dpad { visibility:hidden; }

#message { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#loading { position:absolute; z-index:5; inset:0; display:grid; place-content:center; background:#95aa77; color:var(--ink); text-align:center; padding:20px; }
#loading[hidden] { display:none; }
.loading-card { background:var(--paper); padding:22px 26px; display:grid; gap:12px; justify-items:center; font-size:18px; }
.loading-title { margin:0; font-size:24px; font-weight:950; }
#loading button { min-height:56px; padding:0 22px; border:3px solid var(--ink); border-radius:18px; background:var(--panel); color:var(--paper); font-size:18px; font-weight:900; }

#world-banner { position:absolute; z-index:6; left:50%; top:42%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:10px; padding:20px 28px; background:var(--panel); color:var(--paper);
  text-align:center; pointer-events:none; animation:banner-in 1200ms var(--spring) both; }
#world-banner small { font-size:16px; font-weight:900; }
#world-banner strong { color:var(--icon); font-size:20px; text-shadow:3px 3px 0 var(--ink); }
#world-banner.static { animation:none; }
@keyframes banner-in { 0% { opacity:0; transform:translate(-50%,-30%) scale(.9); } 20%,80% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1); } }

/* Celebration: platform grammar (drawn star, one phrase, Ещё раз / Дальше / Домой). The overlay
   keeps the bottom band free so the platform star toast is never covered. */
.celebration { position:absolute; inset:0; z-index:8; display:grid; align-items:center; justify-items:center; background:#0d103088;
  padding:max(70px,calc(env(safe-area-inset-top) + 64px)) 12px max(124px,calc(env(safe-area-inset-bottom) + 116px)); }
.celebration[aria-hidden=true] { display:none; }
.celebration-card { background:var(--ink); color:var(--paper); padding:16px 18px 18px; text-align:center; width:min(380px,92vw); max-height:100%; overflow:auto; display:grid; justify-items:center; gap:10px;
  box-shadow:0 -4px 0 0 var(--panel-hi),0 4px 0 0 var(--panel-hi),-4px 0 0 0 var(--panel-hi),4px 0 0 0 var(--panel-hi),0 14px 0 0 #0006; animation:card-in 320ms var(--spring) both; }
@keyframes card-in { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }
.card-game-title { margin:0; font-size:16px; font-weight:900; color:#cfd6ff; }
.big-star { width:84px; height:84px; fill:#ffd84d; stroke:#a86100; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 4px 0 #a86100); animation:star-in 420ms var(--spring) both; }
@keyframes star-in { from { transform:scale(.5) rotate(-20deg); } to { transform:scale(1) rotate(0); } }
#celebration-title { margin:0; font-size:26px; font-weight:950; color:var(--icon); }
.mini-map-wrap { width:100%; background:#141a4f; padding:10px 10px 12px; display:grid; gap:8px; justify-items:center; }
.mini-map-wrap .pixel-title { margin:0; color:var(--paper); }
#mini-map { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,56px); gap:8px; }
#mini-map li { width:56px; height:56px; }
#mini-map .district { position:relative; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; background:#2a3170; color:var(--paper);
  box-shadow:0 0 0 3px var(--ink); font-family:var(--round); font-size:16px; font-weight:950; transition:transform 240ms var(--spring); }
#mini-map button.district:active { transform:scale(.94); transition-duration:80ms; }
#mini-map .district img { position:absolute; inset:3px; width:50px; height:50px; object-fit:cover; image-rendering:pixelated; }
#mini-map .district span { position:relative; text-shadow:2px 2px 0 var(--ink); }
#mini-map .district.todo { background:#2a317088; color:#9aa3df; }
#mini-map .district.current { box-shadow:0 0 0 3px var(--icon); }
#mini-map .district.current img { animation:fill-in 300ms ease-out both; }
@keyframes fill-in { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0 0 0 0); } }
.celebration-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; }
.celebration-actions>* { display:grid; place-items:center; align-content:center; gap:4px; min-height:64px; padding:6px 4px; background:var(--panel); color:var(--icon); transition:transform 240ms var(--spring); }
.celebration-actions>*:active { transform:scale(.94); transition-duration:80ms; }
.celebration-actions span { font-size:16px; font-weight:900; color:var(--paper); }

[hidden] { display:none!important; }
@media (max-aspect-ratio: 1.18) {
  .dpad { right:50%; transform:translateX(50%); }
}
/* Phone: cargo tiles stay in the top row and the task pill drops under it. The district dots leave the top
   stack (no room for a clear row without shrinking the map) and sit as a 4x2 district grid left of the d-pad. */
@media (max-width:560px) {
  :root { --chrome:48px; }
  .hud-actions { gap:8px; }
  #delivery-list { gap:6px; }
  #delivery-list button { width:38px; height:38px; padding:3px; }
  #delivery-list img { width:28px; height:28px; }
  .task-pill { position:absolute; left:50%; top:calc(max(10px,env(safe-area-inset-top)) + 54px); transform:translateX(-50%); transform-origin:50% 0; min-height:34px; padding:2px 12px 2px 4px; font-size:18px; max-width:calc(100vw - 20px); }
  .task-pill.grow { transform:translateX(-50%) scale(1.08); }
  .task-pill img { width:28px; height:28px; }
  .world-label { left:max(14px,env(safe-area-inset-left)); bottom:calc(max(12px,env(safe-area-inset-bottom)) + 2*var(--tap-target) + 37px); }
  .world-label .pixel-title { display:none; }
  .district-dots-label { display:grid; grid-template-columns:repeat(4,10px); gap:9px; }
  .district-dots-label li { width:10px; height:10px; }
  .dpad { bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media (max-height:520px) and (min-aspect-ratio:1.18) {
  :root { --chrome:48px; }
  .dpad { bottom:10px; }
  .world-label { display:none; }
  .task-pill { min-height:32px; font-size:16px; }
  .celebration { padding:8px 12px 108px; }
  .big-star { width:48px; height:48px; }
  #mini-map { grid-template-columns:repeat(8,40px); }
  #mini-map li,#mini-map .district { width:40px; height:40px; }
  #mini-map .district img { width:34px; height:34px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }