@font-face{font-family:DBK;src:url('/assets/body.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:DBK;src:url('/assets/body-bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:DBKDisplay;src:url('/assets/display.otf') format('opentype');font-weight:700;font-display:swap}
:root{--paper:#f5f0e2;--ink:#184834;--coral:#fa613f;--lime:#e5eb97;--sea:#80c7cc;--stone:#e9dfbf;--display:DBKDisplay,'Arial Narrow',sans-serif;--body:DBK,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body)}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:700 14px/1.2 var(--body);color:inherit;cursor:pointer;min-height:48px;border:0;background:transparent;transition:background .16s}button:active:not(:disabled){background:var(--coral)}button:disabled{opacity:.46;cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--coral);outline-offset:4px}h1,h2,p{margin:0}h1,h2{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.025em}[hidden]{display:none!important}.page{width:min(1240px,calc(100% - 64px));margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:88px;border-bottom:1px solid #18483430}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand img{width:30px;height:36px}.back{display:flex;align-items:center;gap:9px;min-height:48px;font-size:14px}.back>span:first-child{font-size:26px}.heading{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:32px 0 26px}.heading h1{font-size:clamp(48px,6.2vw,82px)}.heading p{padding-bottom:5px;font-size:17px;white-space:nowrap}.game{border:2px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 #18483415}.scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr .7fr;border-bottom:2px solid var(--ink);padding:15px 24px;gap:24px}.metric{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 16px;border-right:1px solid #18483430;padding-right:24px}.metric:last-child{border:0;padding-right:0}.metric>span:first-child{font-size:13px;white-space:nowrap}.metric strong{font:700 30px/1 var(--display);font-variant-numeric:tabular-nums;justify-self:end;white-space:nowrap}#health-icons{grid-column:1/-1;line-height:.5;font-size:12px;letter-spacing:4px;color:var(--ink);justify-self:end}.playfield{position:relative;height:min(58vw,640px);min-height:420px;isolation:isolate;overflow:hidden;background:var(--sea)}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:32px 5%;background:linear-gradient(90deg,#18483422,transparent 70%)}.signboard{width:min(370px,100%);padding:28px 30px 30px;background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 #184834;transform:rotate(-1deg)}.spray-icon{width:50px;height:70px;float:right;margin:-5px -4px 8px 10px}.signboard h2{font-size:clamp(36px,4.3vw,54px);max-width:10ch}.signboard p{font-size:16px;line-height:1.5;margin-top:18px;clear:both}.signboard .primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;background:var(--coral);color:#103023;margin-top:24px;font-size:17px}.signboard .result-score{font-weight:700;font-size:19px}.announcement{position:absolute;left:50%;top:20px;transform:translate(-50%,-12px);background:var(--ink);color:var(--paper);padding:10px 18px;font-size:15px;text-align:center;max-width:90%;width:max-content;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s}.announcement.visible{opacity:1;transform:translate(-50%,0)}.controls{display:flex;gap:8px;align-items:center;padding:16px 20px;border-top:2px solid var(--ink)}.supply{flex:1;max-width:380px;padding-right:20px}.supply>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:6px}.supply strong{font-variant-numeric:tabular-nums}meter{display:block;width:100%;height:14px;border:1px solid var(--ink);background:#d9ddc7;border-radius:0}meter::-webkit-meter-bar{background:#d9ddc7;border:0;border-radius:0}meter::-webkit-meter-optimum-value{background:var(--ink)}meter::-webkit-meter-suboptimum-value{background:var(--coral)}meter::-moz-meter-bar{background:var(--ink)}.controls button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;white-space:nowrap}.controls .refill{border:1px solid var(--ink)}.controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}kbd{font:12px var(--body);border:1px solid #18483450;padding:1px 5px;margin-left:4px}.instructions{display:flex;justify-content:space-between;gap:40px;padding:22px 0 12px}.instructions p{max-width:55ch;font-size:14px}.instructions p+p{font-size:13px;max-width:34ch;text-align:right}footer{font-size:12px;opacity:.8;padding:20px 0 28px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1100px){.playfield{height:580px}}
@media(max-width:900px){.page{width:calc(100% - 36px)}.heading p{display:none}.scoreboard{gap:14px;padding:14px 16px}.metric{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-right:14px}.metric strong{font-size:28px}#health-icons{display:none}.controls{flex-wrap:wrap;padding:12px;gap:8px}.supply{min-width:40%;max-width:none;padding-right:10px}.controls button{font-size:13px;padding:10px}.controls #sound{margin-left:auto}.instructions{gap:24px}}
@media(max-width:600px){.page{width:calc(100% - 24px)}.topbar{min-height:72px;gap:12px}.brand{font-size:13px;max-width:190px;line-height:1.25}.brand img{width:26px;height:32px}.back{font-size:12px;gap:6px;white-space:nowrap}.heading{padding:24px 0 18px}.heading h1{font-size:clamp(39px,10.3vw,61px);max-width:11ch}.scoreboard{grid-template-columns:1fr 1fr 1fr .75fr;gap:8px;padding:12px}.metric{padding-right:8px}.metric>span:first-child{font-size:11px}.metric strong{font-size:25px}.playfield{height:clamp(420px,116vw,580px);min-height:0}.overlay{padding:22px;align-items:center;justify-content:center;background:#1848342b}.signboard{padding:23px;width:min(330px,100%)}.signboard h2{font-size:43px}.signboard p{font-size:14px;margin-top:14px}.signboard .primary{font-size:16px;margin-top:20px}.spray-icon{height:61px;width:44px}.announcement{font-size:13px;top:12px;padding:9px 13px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px}.supply{padding:0;min-width:0}.controls #sound{margin:0}.controls #pause{justify-content:flex-start;padding-left:0}.controls button{min-height:48px}.controls kbd{display:none}.instructions{flex-direction:column;gap:10px;padding-top:20px}.instructions p+p{text-align:left;max-width:none}.game{box-shadow:4px 4px 0 #18483415}footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.signboard{transform:none}}
.brand .logo{display:block;position:relative;flex:none;width:176px;aspect-ratio:1774/566;overflow:hidden}.brand .logo img{position:absolute;display:block;max-width:none;width:109.47%;height:auto;left:-5.24%;top:-22.08%}
@media(max-width:600px){.brand .logo{width:136px}.brand .logo img{width:109.47%;height:auto}}


.controls .mega{border:1px solid var(--ink)}.controls .mega.charged{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}.controls #sound{margin-left:auto}.controls{flex-wrap:wrap}.controls .supply{min-width:180px}.signboard{width:min(390px,100%)}@media(max-width:600px){.controls .supply{min-width:0;grid-column:1/-1}.controls #mega{grid-column:1/-1}.controls #sound{margin:0}}

.chapter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 20px;background:var(--ink);color:var(--paper);font-size:13px}.chapter-bar strong{font-weight:700}.chapter-bar span{font-size:12px;opacity:.85}@media(max-width:600px){.chapter-bar{padding:9px 12px;font-size:12px}.chapter-bar span{font-size:11px}}
@media(max-width:600px){.wave-metric strong{font-size:21px;letter-spacing:-.04em}}

/* dlg_2a68bbf1 iPhone play and full screen. Hover colours only where a real pointer hovers (iOS keeps :hover after a tap). */
@media(hover:hover){button:hover:not(:disabled){background:var(--lime)}.signboard .primary:hover{background:var(--lime)}}
/* A held finger must never select page text or open the iOS Copy / Look Up / Translate callout over the game. */
.game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.page{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.controls .full-toggle{border:1px solid var(--ink)}
.controls .full-toggle[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media(max-width:600px){
  .controls{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .controls .supply{grid-column:1/5;grid-row:1;align-self:center}
  .controls #pause{grid-column:5/7;grid-row:1;justify-content:center;padding:8px 6px}
  .controls #refill,.controls #mega,.controls #sound,.controls #fullscreen{grid-column:span 3}
  .controls button{padding:8px 6px;gap:6px}
}
/* Phone, normal page: the whole game (score, playfield, controls) fits one screen once a shift starts. */
@supports(height:100svh){@media(max-width:600px){.playfield{height:clamp(320px,calc(100svh - 300px),116vw)}}}
/* Full screen: fixed over the page, fills the visible screen (real Fullscreen API where it exists, iPhone uses this alone). */
html.game-full,html.game-full body{overflow:hidden;overscroll-behavior:none}
html.game-full .game{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;height:100vh;height:100dvh;border:0;box-shadow:none;touch-action:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
html.game-full .scoreboard,html.game-full .chapter-bar,html.game-full .controls{flex:none}
html.game-full .playfield{flex:1 1 auto;height:auto;min-height:0}
/* iPhone only, inside the full layout: one-time hint how to reach true full screen (Home Screen icon). */
.full-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;width:max-content;max-width:calc(100% - 24px);min-height:44px;padding:9px 14px;background:var(--ink);color:var(--paper);font:700 13px/1.35 var(--body);text-align:center;box-shadow:3px 3px 0 #18483433}
@media(max-width:600px){html.game-full .scoreboard{padding:10px 12px}html.game-full .controls{padding:10px 12px}}
/* Phone on its side: playfield on the left, score and controls in a column on the right. */
@media(orientation:landscape) and (max-height:540px){
  html.game-full .game{display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,30vw,280px);grid-template-rows:auto auto minmax(0,1fr)}
  html.game-full .playfield{grid-column:1;grid-row:1/-1;height:auto}
  html.game-full .scoreboard,html.game-full .chapter-bar,html.game-full .controls{grid-column:2;border-left:2px solid var(--ink)}
  html.game-full .scoreboard{grid-row:1;grid-template-columns:1fr 1fr;gap:6px 10px;padding:8px 10px}
  html.game-full .metric{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;padding:0}
  html.game-full .metric>span:first-child{font-size:11px}html.game-full .metric strong{font-size:21px}html.game-full #health-icons{display:none}
  html.game-full .chapter-bar{grid-row:2;flex-wrap:wrap;gap:0 8px;padding:5px 10px;font-size:11px}html.game-full .chapter-bar span{font-size:10px}
  html.game-full .controls{grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:6px;padding:8px 10px;border-top:0;overflow:hidden}
  html.game-full .controls .supply{grid-column:1/-1;grid-row:auto;order:-2;max-width:none;min-width:0;padding:0}
  html.game-full .controls #refill,html.game-full .controls #mega{grid-column:1/-1;order:-1;margin:0}
  html.game-full .controls #pause,html.game-full .controls #sound,html.game-full .controls #fullscreen{grid-column:span 1;grid-row:auto;margin:0;padding:6px;justify-content:center}
  html.game-full .controls :is(#pause,#sound,#fullscreen) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.game-full .controls button{min-height:42px;font-size:12px;padding:6px 8px}html.game-full .controls kbd{display:none}
}
/* dlg_6aa9bd6b: a sprayed boat answers with a speech bubble over its masts (game.js ships); low spray also reads in the bar. */
.ship-say{position:absolute;top:0;left:0;width:max-content;max-width:min(300px,80%);padding:8px 13px 9px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:8px;font:700 14px/1.3 var(--body);text-align:center;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:2;box-shadow:3px 3px 0 #18483433}
.ship-say.visible{opacity:1;transform:none}
.ship-say::after{content:'';position:absolute;bottom:-9px;left:calc(var(--tail,40px) - 8px);width:14px;height:14px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.supply.low label,.supply.low strong{color:#972e24}
@media(max-width:600px){.ship-say{font-size:12.5px;padding:7px 11px 8px;max-width:78%}}
/* dlg_6aa9bd6b: end-of-shift report and the "Nastavi od Straduna" checkpoint button on the result signboard. */
.signboard .result-report{font-size:15px;line-height:1.45;margin-top:8px}
.signboard .secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:10px;border:2px solid var(--ink);background:var(--paper);font-size:16px}
@media(max-width:600px){.signboard .result-report{font-size:13.5px}.signboard .secondary{font-size:15px}}
/* dlg_446c8188: pause menu with a fresh campaign, the chapter picker, the single-chapter marker and the share panel. */
.overlay{overflow-y:auto;overscroll-behavior:contain}.overlay>.signboard{margin:auto 0;flex:none}
.chapter-bar .mode-tag{margin-right:auto;padding:2px 8px;background:var(--coral);color:#103023;font-size:11px;font-weight:700;opacity:1;letter-spacing:.02em;white-space:nowrap}
.signboard .share-open{gap:9px}.signboard .share-open svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chapter-pick{margin-top:18px;padding-top:14px;border-top:1px dashed #18483466}
.signboard .chapter-pick-title{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.3}
.chapter-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.chapter-buttons button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:58px;padding:8px 9px;border:2px solid var(--ink);background:var(--paper);text-align:left}
.chapter-buttons strong{font:700 19px/1 var(--display);letter-spacing:-.01em}
.chapter-buttons span{font-size:11px;font-weight:600;line-height:1.2;opacity:.8}
.chapter-buttons button:disabled{border-style:dashed;opacity:.5}
.chapter-buttons button.current{background:var(--lime)}
.share-panel{position:absolute;inset:0;z-index:6;display:flex;padding:20px;overflow-y:auto;overscroll-behavior:contain;background:#184834f0}
.share-sheet{display:flex;align-items:center;gap:26px;margin:auto;flex:none;max-width:100%}
.share-frame{flex:none;height:min(560px,calc(100% - 0px));aspect-ratio:27/40;background:#18483455;border:2px solid var(--paper);box-shadow:7px 7px 0 #0c2a1e;transform:rotate(-1.2deg)}
.share-frame img{display:block;width:100%;height:100%;object-fit:contain}
.share-panel.loading .share-frame{animation:share-wait 1s ease-in-out infinite alternate}
@keyframes share-wait{from{opacity:.45}to{opacity:.9}}
.share-actions{display:flex;flex-direction:column;gap:10px;width:230px}
.share-actions button{width:100%;min-height:50px;font-size:16px}
.share-actions .primary{background:var(--coral);color:#103023}
.share-actions .secondary{border:2px solid var(--ink);background:var(--paper)}
.share-actions .share-link{color:var(--paper);font-size:13px;word-break:break-all;text-decoration:underline;padding:4px 0}
.share-actions .share-close{color:var(--paper);border:2px solid var(--paper)}
.share-name{display:flex;flex-direction:column;gap:4px;color:var(--paper);font-size:13px;font-weight:700}
.share-name input{min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.share-source{width:100%;min-height:44px;padding:8px 10px;border:3px solid var(--ink);border-radius:12px;background:#ffdc70;color:var(--ink);font:700 16px DBK,Arial,sans-serif}
@media(min-width:601px){.share-sheet{height:100%}.share-frame{height:100%;max-height:560px}}
@media(max-width:600px){.signboard .chapter-pick-title{font-size:12px}.chapter-buttons strong{font-size:17px}.chapter-buttons span{font-size:10px}.chapter-buttons button{min-height:52px;padding:7px}
  .share-panel{padding:12px}.share-sheet{gap:12px;width:100%}.share-frame{height:auto;width:46%;box-shadow:4px 4px 0 #0c2a1e}.share-actions{flex:1;min-width:0;width:auto;gap:8px}.share-actions button{min-height:46px;font-size:14px;padding:6px 8px}.share-actions .share-link{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.share-frame{transform:none}.share-panel.loading .share-frame{animation:none}}
html.game-full .overlay .spray-icon{display:none}

/* dlg_03b6bebc: game look in the tone of the approved V3 poster (KROKODILI NAPADAJU): sunny sky, chunky outlined
   lettering, HUD chips, 3D push buttons and rounded menus. Layout, IDs, phone and full-screen behaviour unchanged;
   the header is kept compact so the playfield keeps its height. HUD icon slots (--hud-icon) take the Astra art. */
:root{--gold:#ffc53d;--sun:#ffe36b;--orange:#ff8a1f;--turq:#7fdde5;--wood:#9a5a2c;--wood-d:#5e3415;--cream:#fffaf0;--sand:#f8e9c1}
body{background:radial-gradient(ellipse 260px 46px at 14% 150px,#ffffffb0 60%,transparent 62%) no-repeat,radial-gradient(ellipse 200px 38px at 78% 110px,#ffffff99 60%,transparent 62%) no-repeat,linear-gradient(180deg,#8ed8ea 0,#bfeaf1 260px,var(--paper) 560px) no-repeat,var(--paper)}
.topbar{border-bottom:0;min-height:76px}
.back{padding:0 16px 0 12px;background:var(--cream);border:3px solid var(--ink);border-radius:99px;box-shadow:0 3px 0 var(--ink);font-weight:700}
.back:hover{text-decoration:none;background:var(--lime)}.back>span:first-child{font-size:22px}
.heading{align-items:center;padding:4px 0 22px}
.heading h1,.signboard h2{text-transform:uppercase;background:linear-gradient(180deg,var(--sun) 12%,#ffb52e 52%,#ff7a1a 92%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 5px 0 var(--ink));letter-spacing:.01em}
.heading h1{font-size:clamp(44px,5.4vw,72px);line-height:1.02;padding:4px 8px 8px 4px;transform:rotate(-1.2deg)}
.heading p{padding:9px 20px 8px;background:linear-gradient(180deg,#c07a3f,var(--wood));color:#fff3d6;border:3px solid var(--wood-d);border-radius:12px;box-shadow:0 4px 0 var(--wood-d),inset 0 2px 0 #ffffff40;font:700 19px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;transform:rotate(1.6deg)}
.game{border:4px solid var(--ink);border-radius:26px;overflow:hidden;background:var(--sand);box-shadow:0 8px 0 var(--ink),0 22px 36px #0f35262e}
/* HUD: four chips on a sea strip */
.scoreboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 16px 14px;background:linear-gradient(180deg,#63d1dd,#2fb0bf);border-bottom:4px solid var(--ink)}
.metric,.metric:last-child{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:1px 10px;padding:7px 14px 8px 8px;background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink)}
.metric::before{content:'';grid-row:1/3;grid-column:1;width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--hud-icon,none) center/78% no-repeat,var(--hud,var(--gold));box-shadow:inset 0 -4px 0 #0000001f}
.scoreboard .metric:nth-child(1){--hud:#ff9b6e}.scoreboard .metric:nth-child(2){--hud:var(--gold)}.scoreboard .metric:nth-child(3){--hud:#9fdc7a}.scoreboard .metric:nth-child(4){--hud:var(--turq)}
.metric>span:first-child{grid-column:2/4;grid-row:1;font:700 11.5px/1.15 var(--body);text-transform:uppercase;letter-spacing:.07em;opacity:.85}
.metric strong{grid-column:2;grid-row:2;justify-self:start;font-size:31px;line-height:1}
#health-icons,.health-metric #health-icons{grid-column:3;grid-row:2;display:flex;gap:3px;justify-self:end;align-self:center;font-size:0;line-height:0}
#health-icons .pip{display:block;width:13px;height:17px;border:2.5px solid var(--ink);border-radius:5px;background:linear-gradient(180deg,#8fe27a,#3fa64b)}
#health-icons .pip.off{background:#18483422;border-style:dashed}
/* chapter ribbon */
.chapter-bar{padding:8px 18px;background:var(--ink);color:#fff3d6;border-bottom:4px solid var(--ink)}
.chapter-bar strong{color:var(--gold);font:700 16px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.chapter-bar #chapter-progress{padding:3px 11px;background:#ffffff22;border-radius:99px;font-weight:700;opacity:1}
.chapter-bar .mode-tag{border-radius:99px;padding:3px 10px;border:2px solid #103023}
/* controls tray and 3D push buttons */
.controls{gap:10px;padding:14px 18px 18px;background:linear-gradient(180deg,#fcf0cf,#f2dda5);border-top:4px solid var(--ink)}
.controls button,.signboard .primary,.signboard .secondary,.share-actions button,.chapter-buttons button{border:3px solid var(--ink);border-radius:15px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff70;transition:transform .08s,box-shadow .08s,background .16s,filter .16s}
.controls button:active:not(:disabled),.signboard button:active:not(:disabled),.share-actions button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.controls button:disabled{box-shadow:0 3px 0 #18483480}
.controls button{min-height:50px;padding:9px 15px;background:var(--cream)}
.controls #refill{background:var(--turq)}.controls #pause{background:var(--cream)}.controls #sound{background:var(--cream)}
.controls #fullscreen{background:var(--lime)}.controls #fullscreen[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.controls #mega{background:linear-gradient(180deg,#fff0a8,#ffd25a)}
.controls #mega.charged{background:linear-gradient(180deg,var(--sun),var(--orange));box-shadow:0 4px 0 var(--ink),0 0 0 4px #ffe36b99;animation:mega-glow 1s ease-in-out infinite alternate}
@keyframes mega-glow{to{box-shadow:0 4px 0 var(--ink),0 0 0 8px #ffe36b55}}
.controls kbd,kbd{border:2px solid var(--ink);border-radius:6px;padding:0 5px;background:#ffffff99;font-weight:700}
@media(hover:hover){.controls button:hover:not(:disabled),.signboard button:hover:not(:disabled),.share-actions button:hover:not(:disabled){filter:brightness(1.07) saturate(1.1);transform:translateY(-1px)}}
.supply>div{align-items:baseline}
.supply label{font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.supply strong{padding:1px 9px;background:var(--ink);color:var(--gold);border-radius:99px;font-size:13px}
.supply.low strong{background:#972e24;color:#fff3d6}
meter{height:20px;border:3px solid var(--ink);border-radius:99px;background:var(--cream);overflow:hidden}
meter::-webkit-meter-bar{background:var(--cream);border:0;border-radius:99px;height:100%}
meter::-webkit-meter-optimum-value{background:linear-gradient(180deg,#9becf1,#25a9b8);border-radius:99px}
meter::-webkit-meter-suboptimum-value{background:linear-gradient(180deg,#ffb07a,var(--coral));border-radius:99px}
meter::-webkit-meter-even-less-good-value{background:linear-gradient(180deg,#ffb07a,var(--coral));border-radius:99px}
meter::-moz-meter-bar{background:linear-gradient(180deg,#9becf1,#25a9b8);border-radius:99px}
/* menus: start / pause / result signboard, chapter picker, share */
.signboard{padding:26px 28px 28px;background:var(--cream);border:4px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink),0 22px 40px #0f352659}
.signboard h2{font-size:clamp(34px,3.9vw,50px);line-height:1.04;-webkit-text-stroke:5px var(--ink);filter:drop-shadow(0 4px 0 var(--ink));padding:2px 4px 4px 2px}
.signboard .primary{min-height:60px;background:linear-gradient(180deg,#ffb347,#ff7a1f 58%,#f2602e);color:#103023;font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.signboard .secondary{min-height:52px;background:var(--lime);font-weight:700}
.signboard #restart{background:var(--turq)}.signboard #share{background:linear-gradient(180deg,#fff0a8,var(--gold))}
.signboard .result-score{display:inline-block;margin-top:14px;padding:6px 14px;background:var(--ink);color:var(--gold);border-radius:12px;font:700 21px/1.15 var(--display)}
.chapter-pick{border-top:3px dashed #18483455}
.chapter-buttons button{border-radius:13px;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #ffffff70;background:#fff3d0}
.chapter-buttons button.current{background:linear-gradient(180deg,#fff0a8,var(--gold))}
.chapter-buttons button:disabled{box-shadow:none}
.announcement{border-radius:99px;border:3px solid var(--cream);background:var(--ink);color:var(--gold);font-weight:700;box-shadow:0 4px 0 #0f352680}
.ship-say{border-radius:16px}.full-hint{border-radius:14px}
.share-frame{border-radius:14px;border-width:3px;overflow:hidden}
.share-actions .share-close{border-color:var(--paper);background:transparent;color:var(--paper);box-shadow:0 4px 0 #0c2a1e}
.share-name input{border:3px solid var(--ink);border-radius:12px}
.instructions{margin-top:24px;padding:16px 20px;background:var(--cream);border:3px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 #18483433}
html.game-full .game{border-radius:0;box-shadow:none}
@media(max-width:900px){
  .scoreboard{gap:8px;padding:10px 12px 12px}
  .metric,.metric:last-child{grid-template-columns:auto minmax(0,1fr);padding:6px 8px 7px 6px;gap:1px 7px;border-radius:15px}
  .metric::before{width:32px;height:32px}
  .metric strong{font-size:25px}
  #health-icons,.health-metric #health-icons{display:flex;grid-column:2;grid-row:3;justify-self:start;margin-top:3px}
  .health-metric{grid-template-rows:auto auto auto}.health-metric::before{grid-row:1/4}
}
@media(max-width:600px){
  .topbar{min-height:64px}.back{min-height:42px;padding:0 12px 0 9px}
  .heading{padding:0 0 14px}
  .heading h1{font-size:clamp(34px,9.6vw,44px);max-width:none;-webkit-text-stroke:5px var(--ink);filter:drop-shadow(0 4px 0 var(--ink))}
  .game{border-width:3px;border-radius:20px;box-shadow:0 5px 0 var(--ink)}
  .scoreboard{gap:5px;padding:7px 7px 9px;border-bottom-width:3px}
  .metric,.metric:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:5px 6px 6px;border-width:2.5px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .metric::before{position:absolute;top:-3px;right:-3px;width:20px;height:20px;border-width:2.5px}
  .metric>span:first-child{font-size:9.5px;letter-spacing:.04em;padding-right:16px}
  .metric strong{font-size:21px}.wave-metric strong{font-size:19px}
  #health-icons,.health-metric #health-icons{gap:2px;margin-top:1px}#health-icons .pip{width:8px;height:10px;border-width:2px;border-radius:3px}
  .chapter-bar{padding:6px 10px;border-bottom-width:3px}.chapter-bar strong{font-size:13px}
  .controls{padding:10px 10px 12px;border-top-width:3px}
  .controls button{min-height:48px;padding:8px 6px;border-width:2.5px;border-radius:13px}
  .controls #pause{justify-content:center;padding:8px 6px}
  .supply label{font-size:13px}
  .signboard{padding:20px 20px 22px;border-width:3px;border-radius:22px;box-shadow:0 6px 0 var(--ink)}
  .signboard h2{font-size:36px;-webkit-text-stroke:4px var(--ink)}
  .signboard .primary{min-height:54px;font-size:19px}
  .instructions{margin-top:20px;padding:13px 14px;border-radius:16px}
}
@media(orientation:landscape) and (max-height:540px){
  html.game-full .scoreboard{gap:5px;padding:6px 8px}
  html.game-full .metric{padding:3px 7px 4px;border:2px solid var(--ink);border-radius:10px;box-shadow:0 2px 0 var(--ink)}
  html.game-full .metric::before{display:none}html.game-full #health-icons{display:none}
  html.game-full .controls button{border-width:2px;box-shadow:0 2px 0 var(--ink)}
}
@media(prefers-reduced-motion:reduce){.controls #mega.charged{animation:none}.heading h1,.heading p{transform:none}}
/* Astra art (dlg_4368a45b): illustrated campaign title beside the real h1, HUD icons, primary button skin. */
.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 18px}
.game-title{display:block;flex:none;width:auto;height:clamp(118px,12.5vw,170px);max-width:60%;object-fit:contain;margin:-10px 0 -4px -12px;filter:drop-shadow(0 6px 8px #0f352630)}
.heading-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;min-width:0}
.heading h1{font-size:clamp(34px,3.7vw,52px)}
.metric::before{width:48px;height:48px;border:0;border-radius:0;box-shadow:none;background:var(--hud-icon) center/contain no-repeat}
.scoreboard .metric:nth-child(1){--hud-icon:url('/igra/sprites/ui/hud-score.png')}
.scoreboard .metric:nth-child(2){--hud-icon:url('/igra/sprites/ui/hud-best.png')}
.scoreboard .metric:nth-child(3){--hud-icon:url('/igra/sprites/ui/hud-life.svg')}
.scoreboard .metric:nth-child(4){--hud-icon:url('/igra/sprites/ui/hud-nalet.svg')}
.signboard .primary,.share-actions .primary,.signboard .primary:hover,.share-actions .primary:hover,.signboard .primary:active:not(:disabled),.share-actions .primary:active:not(:disabled){border:0;border-radius:0;background:transparent;box-shadow:none;border-image:url('/igra/sprites/ui/button-primary.webp') 60 80 70 fill/20px 27px 24px stretch}
.signboard .primary{padding:0 26px 5px}.share-actions .primary{padding:0 18px 5px}
.signboard .primary:active:not(:disabled),.share-actions .primary:active:not(:disabled){transform:translateY(2px)}
@media(max-width:900px){.metric::before{width:34px;height:34px}.game-title{height:clamp(96px,17vw,130px)}}
@media(max-width:600px){
  .heading{gap:10px;padding:0 0 12px}
  .game-title{height:auto;width:58%;max-width:none;margin:-6px 0 -2px -6px}
  .heading-side{align-items:flex-end}
  .heading h1{font-size:clamp(21px,6vw,26px);line-height:1.05;-webkit-text-stroke:4px var(--ink);filter:drop-shadow(0 3px 0 var(--ink));transform:rotate(-1.5deg)}
  .metric::before{top:-6px;right:-6px;width:26px;height:26px;border:0}
  .signboard .primary{border-image-width:18px 24px 21px}
}
/* Outlined game lettering via text-shadow: works in every browser (stroke + background-clip ate the fill in Chromium). */
.heading h1,.signboard h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ffb22e;-webkit-text-stroke:0;filter:none;
  --o:3px;text-shadow:calc(var(--o)*-1) calc(var(--o)*-1) 0 var(--ink),var(--o) calc(var(--o)*-1) 0 var(--ink),calc(var(--o)*-1) var(--o) 0 var(--ink),var(--o) var(--o) 0 var(--ink),0 calc(var(--o)*-1) 0 var(--ink),0 var(--o) 0 var(--ink),calc(var(--o)*-1) 0 0 var(--ink),var(--o) 0 0 var(--ink),0 calc(var(--o) + 4px) 0 var(--ink)}
@media(max-width:600px){
  .heading h1{--o:2px;-webkit-text-stroke:0;filter:none;font-size:clamp(21px,6.2vw,25px)}
  .signboard h2{--o:2.5px;-webkit-text-stroke:0}
  .metric::before{top:-12px;right:-8px;width:26px;height:26px}
  .metric>span:first-child{padding-right:6px;letter-spacing:.01em}
}
/* One stretched skin instead of a 9-slice: the slices left hairline seams on the tilted signboard. */
.signboard .primary,.share-actions .primary,.signboard .primary:hover,.share-actions .primary:hover,.signboard .primary:active:not(:disabled),.share-actions .primary:active:not(:disabled){border-image:none;background:url('/igra/sprites/ui/button-primary.webp') center/100% 100% no-repeat}
@media(max-width:600px){
  .metric>span:first-child{font-size:9px;letter-spacing:0;padding-right:0}
  .heading h1{font-size:clamp(20px,5.6vw,23px)}
}
@media(max-width:600px){
  .chapter-bar{flex-wrap:wrap;row-gap:5px;column-gap:8px}.chapter-bar>*{white-space:nowrap}
  .chapter-bar strong{font-size:12.5px;letter-spacing:.03em}
  .chapter-bar .mode-tag{font-size:10.5px;padding:2px 8px}.chapter-bar #chapter-progress{padding:2px 9px}
}
/* Gruž boxing: three equal, thumb-sized controls replace the bottle tools. */
.chapter-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
.boss-hud{position:absolute;inset:12px 16px auto;z-index:3;max-width:620px;margin:auto;pointer-events:none;background:#f5f0e2f2;border:2px solid var(--ink);padding:9px 13px;box-shadow:3px 3px 0 #18483430}
.boss-life{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:12px}
.boss-life meter{height:12px}.boss-life strong{font-variant-numeric:tabular-nums;white-space:nowrap}
#boss-cue{min-height:1.5em;text-align:center;font-weight:700;font-size:16px;margin-top:5px}
#boss-timing{display:block;appearance:none;border:0;width:100%;height:5px;margin-top:5px;background:#18483420}
#boss-timing::-webkit-progress-bar{background:#18483420}#boss-timing::-webkit-progress-value{background:var(--coral)}#boss-timing::-moz-progress-bar{background:var(--coral)}
.boss-hud[data-phase="open"]{background:var(--lime)}.boss-hud[data-phase="open"] #boss-timing::-webkit-progress-value{background:var(--ink)}
#boss-feedback{height:1.4em;text-align:center;font-size:14px;font-weight:700}
#boss-feedback[data-kind="hit"]{color:var(--ink);font-size:16px}
.game.boxing{height:calc(100svh - 16px);display:flex;flex-direction:column}
.boxing .scoreboard,.boxing .chapter-bar{flex:none}
.boxing .playfield{min-height:0;height:auto;flex:1 1 auto}
.boxing-controls button{border-radius:12px;box-shadow:0 3px 0 var(--ink)}
.boxing canvas{cursor:pointer}
.boxing-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 16px 8px;border-top:2px solid var(--ink);background:var(--paper);flex:none}
.boxing-controls button{position:relative;min-height:62px;border:2px solid var(--ink);background:var(--lime);padding:8px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;font-size:16px;touch-action:manipulation}
.boxing-controls #dodge{background:var(--paper)}.boxing-controls #dodge::after{content:'';position:absolute;left:0;bottom:0;width:var(--ready,100%);height:4px;background:var(--ink)}
.boxing-controls button.pressed,.boxing-controls button:active:not(:disabled){background:var(--coral);box-shadow:inset 0 0 0 2px var(--ink)}
.boxing-controls p{grid-column:1/-1;text-align:center;font-size:12px;line-height:1.35;max-width:62ch;margin:auto}
.boxing .controls :is(.supply,#refill,#mega){display:none}.boxing .controls{justify-content:flex-end;padding:7px 16px}.boxing .controls #pause{margin-right:auto}
#ending-art{height:auto;width:100%;aspect-ratio:12/5;border:1px solid var(--ink);margin-bottom:14px;cursor:default}
.ending .spray-icon{display:none}
.boxing-controls p{font-size:13px}
@media(max-width:600px){.boxing-controls{gap:8px;padding:8px}.boxing-controls button{font-size:14px;min-height:60px}.boxing-controls kbd{display:none}.boxing .controls{display:flex;gap:8px}.boxing .controls button{flex:1;min-height:44px}.boxing .controls #pause{margin:0}.boss-hud{inset:8px 8px auto;padding:7px 9px}.boss-life{font-size:11px;gap:6px}#boss-cue{font-size:14px}.boxing-controls p{font-size:11px}}
@media(max-height:540px) and (orientation:landscape){html.game-full .boxing .boxing-controls{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;padding:8px;align-content:start}html.game-full .boxing-controls button{flex:1 1 27%;min-height:52px;font-size:12px}html.game-full .boxing-controls kbd{display:none}html.game-full .boxing .controls{grid-row:4}html.game-full .boxing .playfield{grid-row:1/5}html.game-full .boxing .scoreboard{grid-row:1}html.game-full .boxing .chapter-bar{grid-row:2}}
@media(max-width:600px){
  .boxing-controls p{font-size:13px;line-height:1.35}
  .boxing .controls{display:flex;flex-wrap:nowrap}
  .boxing .controls :is(#pause,#sound,#fullscreen){flex:1;min-height:44px;padding:6px}
  .boxing .controls :is(#pause,#sound,#fullscreen) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:360px){.boxing #boss-cue{font-size:13px}.boxing .boss-hud{padding:6px 7px}.boxing #boss-feedback{font-size:12px}.boxing .boss-life{font-size:10px}}
/* dlg_a74c0830 public ladder: one element (#ladder). Roomy screens: right column beside the game (like the Bakarachi
   ladder). Phones, short or narrow windows and full-screen play: the same ladder on the pause / end screen, next to the
   signboard in landscape, under it in portrait. No ladder ever sits over the playfield during play. */
.ranked-status{font-size:13px;line-height:1.5;margin:8px 0 14px}
.ladder-side{display:none}
html.ladder-side-on .page{width:min(1640px,calc(100% - 48px))}
html.ladder-side-on main{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,23vw,340px);column-gap:24px;align-items:start}
html.ladder-side-on main>*{grid-column:1}
html.ladder-side-on .ladder-side{display:block;grid-column:2;grid-row:1/span 12;position:sticky;top:16px;margin-top:12px}
html.ladder-side-on .ladder-side .ladder{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.ladder-slot{display:none}
.overlay.has-ladder .ladder-slot{display:flex;min-width:0;min-height:0}
.overlay.has-ladder{gap:16px}
@media(orientation:landscape){
  .overlay.has-ladder{flex-direction:row;align-items:center;justify-content:center;overflow:hidden}
  .overlay.has-ladder>.signboard{max-height:100%;overflow-y:auto;overscroll-behavior:contain;margin:0}
  .overlay.has-ladder .ladder-slot{flex:0 1 360px;align-self:stretch}
  .overlay.has-ladder .ladder{max-height:100%}
}
@media(orientation:portrait){
  .overlay.has-ladder{flex-direction:column;justify-content:flex-start}
  .overlay.has-ladder>.signboard{margin:0 auto}
  .overlay.has-ladder .ladder-slot{flex:none;width:min(390px,100%);margin:0 auto}
  .overlay.has-ladder .lb-rows{max-height:min(52vh,420px)}
}
/* Short landscape (phone on its side): the signboard keeps its main button in view, the ladder gets the rest. */
@media(orientation:landscape) and (max-height:540px){
  .overlay.has-ladder{padding:10px 12px;gap:10px}
  .overlay.has-ladder .spray-icon{display:none}
  .overlay.has-ladder>.signboard{padding:14px 16px 16px;width:min(340px,50%)}
  .overlay.has-ladder>.signboard h2{font-size:30px}
  .overlay.has-ladder>.signboard p{margin-top:8px;font-size:13px}
  .overlay.has-ladder>.signboard .primary{margin-top:12px}
  .overlay.has-ladder .ladder-slot{flex-basis:340px}
  .overlay.has-ladder .lb-head{padding:8px 10px 7px 12px}.overlay.has-ladder .lb-head h2{font-size:20px}
  .overlay.has-ladder .lb-note{display:none}
  .overlay.has-ladder .lb-row{grid-template-columns:22px 28px minmax(0,1fr) auto;column-gap:6px;padding:4px 6px}
  .overlay.has-ladder .lb-row .lb-avatar{--av:28px}.overlay.has-ladder .lb-name{font-size:13px}.overlay.has-ladder .lb-score{font-size:14px}
  .overlay.has-ladder .lb-own,.overlay.has-ladder .lb-ticker{padding:6px 12px;font-size:12.5px}
}
.ladder{display:flex;flex-direction:column;min-height:0;width:100%;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none}
.overlay .ladder{border-width:3px;border-radius:22px;box-shadow:0 6px 0 var(--ink)}
.lb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;padding:12px 12px 10px 16px;background:linear-gradient(180deg,#fff0a8,var(--gold));border-bottom:3px solid var(--ink)}
.lb-head h2{display:flex;align-items:center;gap:8px;font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.lb-live{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 3px;border:2px solid var(--ink);border-radius:99px;background:var(--cream);font:700 10.5px/1 var(--body);letter-spacing:.08em;opacity:.5}
.lb-live::before{content:'';width:8px;height:8px;border-radius:50%;background:#7d8f86}
.lb-live.on{opacity:1}.lb-live.on::before{background:var(--coral);animation:lb-pulse 1.4s ease-in-out infinite}
@keyframes lb-pulse{50%{box-shadow:0 0 0 4px #fa613f55}}
.lb-login{flex:1 0 auto;min-height:44px;padding:6px 12px;border:3px solid var(--ink);border-radius:13px;background:var(--coral);color:#103023;font-size:13px;box-shadow:0 3px 0 var(--ink)}
.lb-account{display:flex;align-items:center;gap:8px;min-width:0;max-width:62%;min-height:44px;padding:3px 12px 3px 3px;border:3px solid var(--ink);border-radius:99px;background:var(--cream);box-shadow:0 3px 0 var(--ink);text-align:left}
.lb-account-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.lb-account strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-account small{font-size:11px;font-weight:400;text-decoration:underline}
.lb-login:active:not(:disabled),.lb-account:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.lb-google{padding:10px 14px 0}.lb-google:empty{display:none}
.guest-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding:8px 10px 8px 12px;border:2px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fff0a8,var(--gold))}
.guest-top strong{flex:1 1 180px;font-size:14px;line-height:1.3}
.guest-top button{flex:none;min-height:40px;padding:6px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--coral);color:#103023;font-size:13px;box-shadow:0 2px 0 var(--ink)}
.lb-own.is-warn{background:#fde4dc;color:#7a2416;border-bottom:2px solid var(--ink);font-weight:700}
/* Current score above the saved record: shown in the record box as a live, not yet saved number. */
.metric.record-live strong{color:var(--coral);text-shadow:0 1px 0 #184834}
.lb-own.is-claim{background:linear-gradient(180deg,#fff0a8,var(--gold));border-bottom:2px solid var(--ink)}
.lb-login.is-claim{animation:lb-flash 1.4s ease-out 2}
.lb-own{padding:9px 16px;background:var(--sand);border-bottom:2px solid #18483433;font-size:14px;font-weight:700;line-height:1.35}
.lb-own:empty{display:none}
.lb-ticker{padding:8px 16px;background:var(--lime);border-bottom:2px solid var(--ink);font-size:13px;font-weight:700;line-height:1.35}
.lb-ticker:empty{display:none}
.lb-ticker.flash{animation:lb-flash 1.4s ease-out}
@keyframes lb-flash{0%{background:var(--coral)}100%{background:var(--lime)}}
.lb-rows{flex:1 1 auto;min-height:120px;margin:0;padding:6px 8px 8px;list-style:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.lb-row{position:relative;display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:5px 8px;border:2px solid transparent;border-radius:12px}
.lb-row+.lb-row{margin-top:2px}
.lb-place{grid-row:1/3;font:700 15px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums}
.lb-row:nth-child(-n+3) .lb-place{color:#8a5a00}
.lb-row .lb-avatar{grid-row:1/3}
.lb-name{grid-column:3;align-self:end;font-size:14px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row:has(.lb-tag:empty) .lb-name{grid-row:1/3;align-self:center}
.lb-tag{grid-column:3;grid-row:2;align-self:start;font-size:10.5px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase}
.lb-tag:empty{display:none}
/* First place right now carries the title; it moves with first place. */
.lb-row.is-leader .lb-tag{color:#8a5a00;font-weight:700}
.lb-row.is-me.is-leader .lb-tag{color:var(--gold)}
.lb-score{grid-column:4;grid-row:1/3;font:700 16px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-row.is-me{background:var(--ink);color:var(--cream)}
.lb-row.is-me .lb-place{color:var(--gold)}
/* Provisional run: dashed coral frame, pulsing dot, italic points. A confirmed record is always a solid row. */
.lb-row.is-live{border:2px dashed var(--coral);background:#fa613f14}
.lb-row.is-live .lb-score{font-style:italic;color:#a8361a}
.lb-row.is-live .lb-tag{color:#a8361a;font-weight:700}
.lb-row.is-live .lb-tag::before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--coral);vertical-align:1px;animation:lb-pulse 1.4s ease-in-out infinite}
.lb-row.is-me.is-live{background:var(--coral);color:#103023;border-color:var(--ink)}
.lb-row.is-me.is-live .lb-score,.lb-row.is-me.is-live .lb-tag,.lb-row.is-me.is-live .lb-place{color:#103023}
.lb-row.is-me.is-live .lb-tag::before{background:#103023}
.lb-row.moved-up{animation:lb-up 1.6s ease-out}
@keyframes lb-up{0%{box-shadow:0 0 0 3px var(--gold),0 0 18px #ffc53d;transform:scale(1.02)}100%{box-shadow:0 0 0 0 transparent;transform:none}}
.lb-avatar{--av:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--av);height:var(--av);overflow:hidden;border:2.5px solid var(--ink);border-radius:50%;background:hsl(var(--hue,150) 55% 80%);color:var(--ink);font:700 calc(var(--av) * .38)/1 var(--body);letter-spacing:.02em}
.lb-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.lb-row.is-me .lb-avatar{border-color:var(--gold)}
.lb-account .lb-avatar{--av:32px}
.lb-empty{padding:14px 16px;font-size:14px}
.lb-status{padding:8px 16px;background:#fa613f22;border-top:2px solid #18483433;font-size:13px;line-height:1.35}
.lb-status:empty{display:none}
.lb-note{padding:8px 16px 12px;border-top:2px solid #18483433;font-size:11.5px;line-height:1.4}
.lb-note a{text-decoration:underline}
.ladder :focus-visible{outline:3px solid var(--coral);outline-offset:2px}
/* HUD chip while playing without the ladder on screen: compact rank and points to the next place; taps pause. */
.ladder-chip{position:relative;flex:none;min-height:32px;margin-left:8px;padding:3px 11px;border:2px solid var(--gold);border-radius:99px;background:#0f3526;color:var(--gold);font:700 12px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.ladder-chip::after{content:'';position:absolute;inset:-7px -4px}
@media(max-width:600px){.ladder-chip{font-size:11px;padding:3px 9px;margin-left:6px}}
@media(prefers-reduced-motion:reduce){.lb-live.on::before,.lb-row.is-live .lb-tag::before,.lb-row.moved-up,.lb-ticker.flash{animation:none}}
dialog.profile-dialog{width:min(440px,calc(100vw - 24px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
dialog.profile-dialog::backdrop{background:#0f3526c7}
.pf-card{display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--cream);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink),0 22px 40px #0f352659;overflow:hidden}
.pf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 22px;background:linear-gradient(180deg,#fff0a8,var(--gold));border-bottom:3px solid var(--ink)}
.pf-top h2{font:700 28px/1 var(--display);text-transform:uppercase}
.pf-x{flex:none;width:46px;height:46px;min-height:46px;border:3px solid var(--ink);border-radius:50%;background:var(--cream);box-shadow:0 3px 0 var(--ink);font:700 28px/1 var(--body)}
.pf-body{display:grid;gap:8px;padding:18px 22px;overflow-y:auto}
.pf-photo{display:flex;align-items:center;gap:16px}
.pf-avatar{--av:96px;border-width:4px}
.pf-photo-actions{display:grid;gap:8px;flex:1;min-width:0}
.pf-file{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border:3px solid var(--ink);border-radius:14px;background:var(--lime);box-shadow:0 3px 0 var(--ink);font-weight:700;text-align:center;cursor:pointer}
.pf-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pf-file:focus-within{outline:3px solid var(--coral);outline-offset:3px}
.pf-remove{min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--cream);font-size:13px}
.pf-label{margin-top:8px;font-weight:700}
/* Six crocodile faces: picking one goes through the same shrink + upload path as an own photo. */
.pf-faces{margin:4px 0 0;padding:0;border:0;min-width:0}
.pf-faces legend{margin:0 0 8px;padding:0}
.pf-face-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pf-face{aspect-ratio:1;width:100%;min-height:44px;padding:0;overflow:hidden;border:3px solid var(--ink);border-radius:50%;background:#fffaf0;box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:transform .12s ease-out}
.pf-face img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pf-face:active{transform:translateY(2px)}
.pf-face[aria-pressed="true"]{border-color:var(--coral);box-shadow:0 0 0 3px var(--gold),0 3px 0 var(--ink)}
.pf-face:disabled{cursor:progress}
@media(max-width:600px){.pf-face-grid{grid-template-columns:repeat(3,minmax(0,72px));justify-content:center;gap:10px}}
#ladder-name{width:100%;min-height:48px;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.pf-help{font-size:12px;line-height:1.4}
.pf-status{min-height:1.4em;font-size:14px;font-weight:700}
.pf-foot{display:flex;gap:10px;padding:12px 22px 16px;border-top:3px solid var(--ink)}
.pf-save{flex:1;min-height:52px;border:3px solid var(--ink);border-radius:15px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff70;background:linear-gradient(180deg,#ffb347,#ff7a1f 58%,#f2602e);color:#103023;font:700 19px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.pf-logout{min-height:52px;padding:0 14px;border:2px solid var(--ink);border-radius:15px;background:var(--cream);font-size:13px}
.pf-save:active,.pf-x:active,.pf-file:active{transform:translateY(2px)}
/* Primary ladder buttons keep their colour on hover/press (the global button:hover turns buttons lime). */
.pf-save:hover:not(:disabled),.pf-save:active:not(:disabled){background:linear-gradient(180deg,#ffb347,#ff7a1f 58%,#f2602e);filter:brightness(1.06)}
.lb-login:hover:not(:disabled),.lb-login:active:not(:disabled),.guest-top button:hover:not(:disabled),.guest-top button:active:not(:disabled){background:var(--coral);filter:brightness(1.07)}
@media(max-width:600px){.pf-body{padding:14px 16px}.pf-foot{padding:10px 16px 12px}.pf-avatar{--av:80px}}

/* Owner window reply: text and a real triangle anchored to the facade, never a target. */
.window-speech{position:absolute;z-index:3;width:max-content;max-width:min(310px,calc(100% - 16px));padding:10px 14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:18px;font:700 14px/1.3 var(--body);text-align:center;pointer-events:none;box-sizing:border-box}
.window-tail{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.window-tail path{fill:var(--paper);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}.window-tail[hidden],.window-speech[hidden]{display:none}
@media(max-width:600px){.window-speech{font-size:13px;max-width:min(280px,calc(100% - 16px));padding:9px 12px}}
/* dlg_82aa3992: developer boss test, only with /igra/?dev=boss; the normal page never shows it. Tag and note share a row. */
.dev-entry{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;margin-top:16px;padding:10px 12px 12px;border:2px dashed var(--ink);border-radius:15px;background:#18483410}
.signboard .dev-entry .dev-tag{grid-row:1;grid-column:1;margin:0;padding:2px 9px;border-radius:99px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.signboard .dev-entry .dev-note{grid-row:1;grid-column:2;margin:0;font-size:12px;line-height:1.3}
.signboard .dev-entry .secondary{grid-column:1/-1;margin-top:0}
@media(max-width:600px){.signboard .dev-entry{margin-top:12px;padding:8px 9px 10px;gap:7px 8px}.signboard .dev-entry .secondary{min-height:46px}.signboard .dev-entry .dev-note{font-size:11.5px}}
/* dlg_0d444df8: 24 dorade (ops/INSTANT-WINS-24-2026-11-03.md). */
/* 01: once a shift has started, the big title folds away and the playfield takes the height the screen really has,
   so the board, the main buttons and the controls fit in one view. Before the start the page looks as before. */
html[data-run]:not([data-run="ready"]) .heading{display:none}
@supports(height:100svh){@media(min-width:601px){html[data-run]:not([data-run="ready"]):not(.game-full) .game:not(.boxing) .playfield{height:clamp(360px,calc(100svh - 236px),640px)}}}
/* 03: the illustrated coast continues under the page, faded; the game and the help keep their calm backgrounds. */
body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:min(38vh,340px);z-index:-1;pointer-events:none;background:url(/igra/scenes/more-illustrated.webp) center 78%/cover no-repeat;opacity:.3;-webkit-mask-image:linear-gradient(180deg,transparent,#000 65%);mask-image:linear-gradient(180deg,transparent,#000 65%)}
/* 04: refill and MEGA sit next to the spray level; pause, sound and full screen are small icon buttons with their names
   kept for screen readers. Touch targets stay 48 px. */
.controls :is(#sound,#fullscreen){min-width:52px;justify-content:center;padding-left:12px;padding-right:12px}
.controls :is(#sound,#fullscreen) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.controls #pause{margin-left:auto}
@media(max-width:600px){
  /* Phone: the spray level with three small icon buttons on top, refill and MEGA full size below it. */
  .controls .supply{grid-column:1/4;grid-row:1}
  .controls #pause{grid-column:4/5;grid-row:1;margin-left:0}
  .controls #sound{grid-column:5/6;grid-row:1}.controls #fullscreen{grid-column:6/7;grid-row:1}
  .controls #refill,.controls #mega{grid-column:span 3;grid-row:2}
  .controls :is(#pause,#sound,#fullscreen){min-width:0;padding-left:4px;padding-right:4px;justify-content:center}
  .controls #pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* 08 / 16: who speaks from a window carries a small name; the speaking window opens, then its shutters close. */
.window-speech .speaker{display:block;margin:0 auto 2px;font:800 10.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#7a4b1d}
.window-speech .speaker[hidden]{display:none}
.shutters{position:absolute;left:0;top:0;width:100px;height:200px;transform-origin:0 0;z-index:2;pointer-events:none;--shut:1}
.shutters[hidden]{display:none}
/* The opening behind the leaves: the room is dark, the painted shutters underneath disappear. */
.shutters i{position:absolute;inset:0;background:#0d2a1b;box-shadow:inset 0 0 0 3px #08200f}
.shutters img{position:absolute;top:0;width:50%;height:100%;object-fit:fill;transform:scaleX(var(--shut))}
.shutters img:first-child{left:0;transform-origin:left center}.shutters img:last-child{right:0;transform-origin:right center}
/* 05: one label over the first Sanitat worker and the first MEGA supply. */
.hint-tag{position:absolute;z-index:3;padding:5px 10px 6px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:10px;font:800 13px/1.2 var(--body);white-space:nowrap;pointer-events:none;box-shadow:0 2px 0 var(--ink)}
.hint-tag::after{content:'';position:absolute;bottom:-7px;left:calc(var(--tip,30px) - 6px);width:10px;height:10px;background:var(--lime);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.hint-tag[hidden]{display:none}
/* 14: the record metric glows once when the saved record falls. */
.metric.new-record{animation:record-glow 1.2s ease-out 2}
@keyframes record-glow{0%{box-shadow:0 0 0 0 #ffd25a}40%{box-shadow:0 0 0 7px #ffd25acc}100%{box-shadow:0 0 0 0 #ffd25a00}}
/* 15: chapter stamp. */
.announcement.stamp{border-radius:8px;border:4px solid #b0291c;background:#fff6dc;color:#b0291c;font:700 22px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;transform:translate(-50%,0) rotate(-4deg);box-shadow:none;padding:10px 18px;top:34%}
.announcement.stamp.visible{transform:translate(-50%,0) rotate(-4deg);animation:stamp-in .28s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp-in{from{transform:translate(-50%,0) rotate(-4deg) scale(1.6);opacity:0}to{transform:translate(-50%,0) rotate(-4deg) scale(1);opacity:1}}
@media(max-width:600px){.announcement.stamp{font-size:17px;padding:8px 13px}}
/* 17 / 18: the end screen as an official record. */
.signboard .result-kicker{margin:10px 0 -6px;font:800 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7a4b1d}
.signboard .result-rank{margin:8px 0 0;font:700 16px/1.25 var(--display)}
.signboard .result-verdict{display:block;font-weight:700;font-style:italic}
@media(max-width:600px){.signboard .result-rank{font-size:14px}}
@media(prefers-reduced-motion:reduce){.metric.new-record,.announcement.stamp.visible{animation:none}}

/* dlg_12944bbb "Što je novo": signboard entry with a NOVO badge, and one dialog (summary / archive) in the game's paper look. */
.signboard .novosti-open{gap:10px;min-height:46px;margin-top:12px;background:var(--cream);font-size:15px}
.novosti-badge{display:inline-block;padding:3px 8px 2px;border:2px solid var(--ink);border-radius:99px;background:var(--coral);color:var(--cream);font:700 11px/1.1 var(--body);letter-spacing:.06em}
dialog.novosti{width:min(640px,calc(100vw - 24px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
dialog.novosti::backdrop{background:#0f3526c7}
.nv-card{display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:var(--cream);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink),0 22px 40px #0f352659;overflow:hidden}
.nv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px 22px;background:linear-gradient(180deg,#fff0a8,var(--gold));border-bottom:3px solid var(--ink)}
.nv-top h2{font:700 clamp(24px,3.4vw,32px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em}
.nv-x{flex:none;width:46px;height:46px;min-height:46px;border:3px solid var(--ink);border-radius:50%;background:var(--cream);box-shadow:0 3px 0 var(--ink);font:700 28px/1 var(--body)}
.nv-versions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 22px;border-bottom:2px solid #18483433}
.nv-versions-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.nv-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:5px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--cream)}
.nv-chip b{font:700 16px/1 var(--display)}.nv-chip small{font-size:11px;font-weight:400}
.nv-chip{transition:none}.nv-chip[aria-current="true"]{background:var(--ink);color:var(--gold)}
.nv-empty{font-size:12px;opacity:.8}
.nv-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 22px 20px;font-size:15px;line-height:1.48}
.nv-body:focus{outline:none}
.nv-lead{margin-bottom:14px;font-weight:700;font-size:17px}
.nv-ahead{margin-bottom:20px;padding:14px 18px 16px;background:var(--lime);border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink)}
.nv-ahead h3{margin:0 0 6px;font:700 22px/1.05 var(--display);text-transform:uppercase}
.nv-ahead p+p{margin-top:8px}
.nv-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.nv-ver{padding:4px 11px 3px;border-radius:10px;background:var(--ink);color:var(--gold);font:700 19px/1 var(--display)}
.nv-date{font-size:14px;font-weight:700}
.nv-tag{padding:3px 8px 2px;border:2px solid var(--ink);border-radius:99px;background:var(--coral);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.06em}
.nv-subtitle{margin-top:10px;font:700 26px/1.05 var(--display);text-transform:uppercase}
.nv-intro{margin-top:8px}
.nv-sec h3{display:inline-block;margin:20px 0 4px;padding-bottom:2px;border-bottom:3px solid var(--coral);font:700 19px/1.1 var(--display);text-transform:uppercase}
.nv-sec ul{margin:0;padding-left:20px}.nv-sec li{margin-top:9px}.nv-sec li::marker{color:var(--coral)}
.nv-sec li b{font-weight:700}
.nv-known{margin-top:20px;padding:4px 16px 12px;border:2px dashed #18483480;border-radius:14px;background:var(--sand)}
.nv-known h3{margin-top:10px;border-bottom-color:var(--ink)}
.nv-closing{margin-top:22px;text-align:center;font-size:14px}.nv-closing b{font:700 18px/1.2 var(--display);letter-spacing:.03em}
.nv-foot{padding:12px 22px 16px;border-top:3px solid var(--ink);background:var(--cream)}
.nv-ok{width:100%;min-height:54px;border:3px solid var(--ink);border-radius:15px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff70;background:linear-gradient(180deg,#ffb347,#ff7a1f 58%,#f2602e);color:#103023;font:700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.nv-ok:active,.nv-x:active,.nv-chip:active{transform:translateY(2px)}
@media(hover:hover){.nv-ok:hover,.nv-x:hover,.nv-chip:hover{filter:brightness(1.07)}.nv-chip[aria-current="true"]:hover{background:var(--ink)}}
@media(max-width:600px){
  dialog.novosti{width:calc(100vw - 16px)}
  .nv-card{border-radius:20px;max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .nv-top{padding:12px 12px 10px 16px}.nv-versions{padding:8px 16px}.nv-body{padding:14px 16px 16px;font-size:14.5px}
  .nv-ahead{padding:12px 14px 14px}.nv-ahead h3{font-size:20px}.nv-subtitle{font-size:22px}.nv-sec h3{font-size:17px}
  .nv-foot{padding:10px 16px 12px}.nv-ok{min-height:50px;font-size:18px}
}

/* Play analytics notice (dlg_bdac84e8): one quiet line under the ranked status, same column. */.analytics-notice{font-size:13px;line-height:1.5;margin:-8px 0 14px}.analytics-notice a{color:inherit;font-weight:700}
footer a{text-decoration:underline;text-underline-offset:2px}