:root{
  --navy:#06142e;
  --blue:#0b2b64;
  --blue2:#0f4eb3;
  --cyan:#36dcff;
  --yellow:#ffd21f;
  --orange:#ff8b17;
  --purple:#7a2fff;
  --pink:#ff4ac8;
  --white:#fff;
  --muted:#bcd2f5;
  --panel:rgba(10,31,69,.94);
  --line:rgba(121,180,255,.26);
  --success:#4cff9b;
  --danger:#ff6687;
  --shadow:0 20px 70px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--navy);color:#fff;font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input{font:inherit}
button{touch-action:manipulation}
body{background:radial-gradient(circle at 50% 0,#123f88 0,#07142d 44%,#030915 100%)}
.app-shell,.screen{width:100%;height:100%;height:100dvh}
.screen{display:none}
.screen.is-active{display:block}

/* HOME */
.home-screen{overflow:hidden}
.home-layout{height:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);max-width:1240px;margin:auto;background:#071a38;box-shadow:var(--shadow)}
.cover-panel{position:relative;min-height:0;overflow:hidden;background:#07142d}
.cover-art{width:100%;height:100%;display:block;object-fit:cover;object-position:center 35%}
.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,13,34,.05) 40%,rgba(4,13,34,.78) 100%);pointer-events:none}
.top-actions{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;display:flex;gap:8px;z-index:3}
.icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.24);background:rgba(3,12,30,.64);color:white;font-weight:900;font-size:1.18rem;backdrop-filter:blur(12px);cursor:pointer}
.icon-btn:active{transform:scale(.96)}
.world-pill{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;padding:10px 14px;border-radius:999px;background:rgba(3,12,30,.74);border:1px solid rgba(255,255,255,.2);text-align:center;font-weight:850;letter-spacing:.01em;backdrop-filter:blur(12px);font-size:.9rem}
.menu-panel{min-height:0;display:flex;flex-direction:column;padding:clamp(16px,2.5vh,28px);gap:clamp(10px,1.4vh,16px);background:linear-gradient(160deg,#0b234d 0,#07152f 70%)}
.player-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:12px 14px;border-radius:18px}
.player-row strong{display:block;font-size:1rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.eyebrow,.modal-kicker{font-size:.68rem;font-weight:950;letter-spacing:.17em;color:var(--cyan)}
.text-btn{border:0;background:none;color:var(--yellow);font-weight:900;cursor:pointer}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-height:0}
.mode-card{min-width:0;display:flex;align-items:center;text-align:left;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:17px;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.06);cursor:pointer;transition:.15s ease}
.mode-card:nth-child(5){grid-column:1/-1}
.mode-card:hover,.mode-card:focus-visible{transform:translateY(-1px);border-color:rgba(79,221,255,.75);background:linear-gradient(145deg,rgba(42,119,239,.34),rgba(255,255,255,.05));outline:none}
.mode-card:active{transform:scale(.98)}
.mode-junior{border-color:rgba(255,210,31,.52)}
.mode-daily{background:linear-gradient(135deg,rgba(122,47,255,.28),rgba(255,74,200,.12))}
.mode-icon{font-size:1.6rem;flex:0 0 auto}
.mode-card strong{display:block;font-size:.95rem;line-height:1.1}.mode-card small{display:block;color:var(--muted);font-size:.72rem;line-height:1.25;margin-top:3px}
.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.primary-btn,.secondary-btn{min-height:43px;border-radius:14px;font-weight:950;cursor:pointer}
.primary-btn{border:0;color:#102047;background:linear-gradient(180deg,#ffe45b,var(--yellow));box-shadow:0 8px 22px rgba(255,210,31,.18)}
.secondary-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff}
.primary-btn:active,.secondary-btn:active{transform:scale(.98)}
.ad-wrap{margin-top:auto;min-height:54px;max-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:rgba(0,0,0,.12)}
.ad-wrap iframe{max-height:86px!important}

/* GAME */
.game-screen{background:#031124;display:none;grid-template-rows:auto minmax(0,1fr) auto}
.game-screen.is-active{display:grid}
.game-hud{height:64px;padding:8px max(8px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top));display:grid;grid-template-columns:46px 1.2fr 1fr 1fr 46px;align-items:center;gap:7px;background:linear-gradient(180deg,#0b2b64,#071b3d);border-bottom:1px solid rgba(255,255,255,.11);z-index:5}
.hud-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.17);border-radius:13px;background:rgba(255,255,255,.08);color:#fff;font-weight:1000;font-size:1.1rem}
.hud-stat{text-align:center;min-width:0}.hud-stat span{display:block;color:#8eb4e8;font-size:.57rem;letter-spacing:.12em;font-weight:900}.hud-stat strong{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-stage{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;background:#071b31}
#gameCanvas{width:100%;height:100%;display:block;touch-action:none}
.controls{height:94px;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;background:linear-gradient(180deg,#07182f,#040d1c);border-top:1px solid rgba(255,255,255,.11)}
.control-btn{border:1px solid rgba(100,181,255,.35);border-radius:18px;color:#fff;background:linear-gradient(180deg,#123f88,#0a2858);font-weight:950;box-shadow:inset 0 1px rgba(255,255,255,.12);user-select:none}
.control-btn.centre{background:linear-gradient(180deg,#6d35d2,#3d1a86);border-color:rgba(190,137,255,.5)}
.control-btn span{display:block;font-size:1.65rem;line-height:1}.control-btn small{display:block;margin-top:5px;letter-spacing:.12em;font-size:.58rem;color:#d9e8ff}.control-btn.is-active{transform:translateY(2px) scale(.98);filter:brightness(1.28)}
.countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(5rem,22vw,9rem);font-weight:1000;font-style:italic;text-shadow:0 8px 0 rgba(0,0,0,.2),0 0 40px rgba(54,220,255,.7);opacity:0;transition:.15s}
.countdown.show{opacity:1}
.game-message{position:absolute;top:12%;left:50%;transform:translateX(-50%) scale(.8);padding:8px 16px;border-radius:999px;background:rgba(3,15,34,.72);border:1px solid rgba(255,255,255,.22);font-weight:1000;font-size:clamp(.9rem,4vw,1.3rem);letter-spacing:.03em;opacity:0;transition:.17s;white-space:nowrap;pointer-events:none}.game-message.show{opacity:1;transform:translateX(-50%) scale(1)}
.pause-overlay{position:absolute;inset:0;background:rgba(2,9,22,.82);backdrop-filter:blur(8px);place-items:center;z-index:8}.pause-overlay:not([hidden]){display:grid}.pause-overlay div{text-align:center}.pause-overlay strong{font-size:2rem;display:block;margin-bottom:14px}.pause-overlay button{padding:12px 22px;border:0;border-radius:14px;background:var(--yellow);font-weight:950;color:#152349}

/* MODALS */
.modal{position:fixed;inset:0;z-index:99999;display:none;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(1,7,20,.82);backdrop-filter:blur(12px)}
.modal.is-open{display:grid}
.modal-card{position:relative;width:min(540px,100%);max-height:calc(100dvh - 28px);overflow:auto;scrollbar-width:none;padding:24px;border-radius:26px;background:linear-gradient(160deg,#102d61,#081a38 70%);border:1px solid rgba(128,191,255,.28);box-shadow:0 28px 90px rgba(0,0,0,.6)}
.modal-card::-webkit-scrollbar{display:none}
.modal-card h2{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1;margin:7px 0 12px}.modal-card p{color:#c7d9f6;line-height:1.45}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-weight:950}
.small-card{width:min(440px,100%);text-align:center}.small-card form{display:grid;gap:10px;margin-top:18px}.small-card input{width:100%;border:1px solid rgba(120,190,255,.38);background:#06142e;color:white;border-radius:15px;padding:14px 16px;text-align:center;font-size:1.1rem;font-weight:850;outline:none}.small-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(54,220,255,.1)}
.result-card{text-align:center}.result-score{font-size:clamp(3rem,13vw,5rem);line-height:.9;font-weight:1000;color:var(--yellow);text-shadow:0 5px 0 rgba(118,66,0,.35)}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.result-stats>div{padding:12px 6px;border-radius:17px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}.result-stats span{display:block;font-size:1.3rem}.result-stats strong{display:block;font-size:1.35rem}.result-stats small{display:block;color:var(--muted);font-size:.66rem}.result-status{min-height:20px;font-size:.84rem;margin:5px 0 12px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions .primary-btn{grid-column:1/-1}.result-ad{margin-top:12px}
.chip-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.chip-row::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:999px;padding:8px 12px;font-weight:850;font-size:.78rem}.chip.is-selected{background:var(--yellow);color:#14234a;border-color:var(--yellow)}
.scope-toggle{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,.18);padding:4px;border-radius:13px;margin:10px 0}.scope-toggle button{border:0;background:none;color:#a9c4eb;padding:8px;border-radius:10px;font-weight:900}.scope-toggle button.is-selected{background:#1c4e96;color:white}
.leaderboard-status{padding:10px;text-align:center;color:#a9c4eb;font-size:.82rem}.leaderboard-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}.leaderboard-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}.leaderboard-row.top1{background:linear-gradient(90deg,rgba(255,210,31,.22),rgba(255,255,255,.04));border-color:rgba(255,210,31,.35)}.leaderboard-rank{font-weight:1000;color:var(--yellow)}.leaderboard-name{min-width:0}.leaderboard-name strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-name small{color:#9bb7df}.leaderboard-score{font-weight:1000;font-size:1.05rem}
.about-points{display:grid;gap:8px;margin:16px 0}.about-points span{padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.05)}.fine-print{font-size:.78rem;color:#91add3!important}
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:100000;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#06142e;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 16px;font-weight:850;box-shadow:var(--shadow);transition:.2s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  .home-layout{grid-template-columns:1fr;grid-template-rows:minmax(220px,42dvh) minmax(0,58dvh)}
  .menu-panel{padding:10px 12px max(8px,env(safe-area-inset-bottom));gap:8px}
  .cover-art{object-position:center 35%}
  .world-pill{bottom:10px;left:10px;right:10px;padding:8px;font-size:.78rem}
  .top-actions{top:max(8px,env(safe-area-inset-top));right:8px}.icon-btn{width:39px;height:39px;border-radius:12px;font-size:1rem}
  .player-row{padding:8px 11px;border-radius:14px}.player-row strong{font-size:.88rem;max-width:215px}.eyebrow{font-size:.58rem}
  .mode-grid{gap:6px}.mode-card{padding:8px 9px;border-radius:14px;gap:7px}.mode-icon{font-size:1.28rem}.mode-card strong{font-size:.82rem}.mode-card small{font-size:.62rem;margin-top:1px}
  .quick-links{gap:6px}.secondary-btn,.primary-btn{min-height:38px;font-size:.8rem;border-radius:12px}
  .ad-wrap{min-height:44px;max-height:66px}.ad-wrap iframe{max-height:62px!important}
  .game-hud{height:58px;grid-template-columns:40px 1.15fr 1fr 1fr 40px;gap:4px}.hud-btn{width:36px;height:36px}.hud-stat strong{font-size:.88rem}.hud-stat span{font-size:.5rem}
  .controls{height:88px}.control-btn{border-radius:15px}.control-btn span{font-size:1.45rem}.control-btn small{font-size:.52rem}
  .modal-card{padding:20px 16px;border-radius:22px}.result-ad{max-height:58px}
}
@media (max-height:700px) and (max-width:760px){
  .home-layout{grid-template-rows:34dvh 66dvh}.cover-art{object-position:center 38%}.world-pill{font-size:.7rem;padding:6px}.menu-panel{gap:6px}.player-row{padding:6px 9px}.mode-card{padding:6px 8px}.mode-card small{display:none}.quick-links .secondary-btn{min-height:34px}.ad-wrap{min-height:36px;max-height:52px}.ad-wrap iframe{max-height:48px!important}
}
@media (orientation:landscape) and (max-height:600px){
  .home-layout{grid-template-columns:42% 58%;grid-template-rows:1fr}.menu-panel{padding:8px 12px;gap:6px}.mode-card{padding:6px 9px}.mode-card small{display:none}.player-row{padding:6px 10px}.ad-wrap{min-height:32px;max-height:44px}.ad-wrap iframe{max-height:40px!important}
  .game-hud{height:52px}.controls{height:72px}.control-btn span{font-size:1.15rem}.control-btn small{margin-top:2px}
}
@media (min-width:1200px){.app-shell{padding:18px}.home-layout,.game-screen.is-active{max-width:1200px;margin:auto;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.game-screen.is-active{height:calc(100dvh - 36px)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v1.2 visual polish: closer to the stadium concept while preserving the existing responsive layout */
.game-screen{background:radial-gradient(circle at 50% 18%,#0b3e94 0,#061d52 46%,#020b1d 100%)}
.game-hud{
  background:linear-gradient(180deg,#0b2c68 0,#071c47 100%);
  border-bottom:1px solid rgba(142,199,255,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}
.hud-stat span{color:#b6d4ff;font-weight:1000;letter-spacing:.16em}
.hud-stat strong{font-weight:1000;text-shadow:0 2px 6px rgba(0,0,0,.24)}
.hud-btn{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));border-color:rgba(172,213,255,.22);box-shadow:inset 0 1px rgba(255,255,255,.10)}
.game-stage{background:#07204e}
.controls{background:linear-gradient(180deg,#071a3b,#030c1c);border-top-color:rgba(119,184,255,.16);box-shadow:0 -12px 28px rgba(0,0,0,.18)}
.control-btn{background:linear-gradient(180deg,#164b9f 0,#0a2d68 100%);border-color:rgba(91,174,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.18)}
.control-btn.centre{background:linear-gradient(180deg,#7839de 0,#4b1ea8 100%);border-color:rgba(190,123,255,.68)}
.control-btn:hover,.control-btn:focus-visible{filter:brightness(1.12);outline:none}
.control-btn.is-active{transform:translateY(2px) scale(.985);filter:brightness(1.3);box-shadow:inset 0 2px 8px rgba(0,0,0,.18)}
@media (min-width:1200px){
  .game-screen.is-active{border:1px solid rgba(109,174,255,.18)}
}

/* v1.2.1 mobile cover focal-point fix
   The portrait artwork is intentionally cropped on the menu so it stays large,
   but mobile now anchors the crop near the top of the poster so the full game
   logo and Jakoda's face remain visible instead of cutting through the title. */
@media (max-width:760px) and (orientation:portrait){
  .cover-art{
    object-fit:cover;
    object-position:center 10%;
  }
  .cover-shade{
    background:linear-gradient(180deg,rgba(4,13,34,.02) 48%,rgba(4,13,34,.70) 100%);
  }
}

/* Very short phones need an even tighter top anchor because the hero is shorter. */
@media (max-height:700px) and (max-width:760px) and (orientation:portrait){
  .cover-art{object-position:center 7%;}
}

/* v1.2.2 mobile home-screen layout fix
   Keep the world totals completely below the poster so they never cover
   Jakoda's face, while preserving the desktop overlay treatment. */
@media (max-width:760px) and (orientation:portrait){
  .home-layout{
    grid-template-rows:minmax(300px,46dvh) minmax(0,54dvh);
  }

  .cover-panel{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-content:stretch;
    overflow:hidden;
    background:#07142d;
  }

  .cover-art{
    grid-row:1;
    min-height:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 10%;
  }

  /* Keep the lower poster fade on the artwork only, not over the stats row. */
  .cover-shade{
    bottom:58px;
    background:linear-gradient(180deg,rgba(4,13,34,.02) 48%,rgba(4,13,34,.52) 100%);
  }

  .world-pill{
    position:relative;
    grid-row:2;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:4;
    margin:8px 12px 10px;
    padding:9px 12px;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(3,12,30,.92);
    border:1px solid rgba(121,180,255,.24);
    box-shadow:0 8px 20px rgba(0,0,0,.20);
    backdrop-filter:blur(12px);
    font-size:.78rem;
    line-height:1.15;
  }

  /* The menu starts just below the totals with a small, deliberate gap. */
  .menu-panel{
    padding-top:8px;
  }
}

/* Compact portrait phones still keep the totals out of the artwork. */
@media (max-height:700px) and (max-width:760px) and (orientation:portrait){
  .home-layout{grid-template-rows:40dvh 60dvh;}
  .cover-art{object-position:center 7%;}
  .cover-shade{bottom:48px;}
  .world-pill{
    margin:5px 10px 6px;
    padding:6px 9px;
    min-height:34px;
    font-size:.68rem;
  }
  .menu-panel{padding-top:5px;}
}