@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/baloo-2-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/baloo-2-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/nunito-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/nunito-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Layout: one-screen game console. A slim top bar with the player's badge, then either the passport desk (login / menu / records) or the globe stage filling the rest. */
:root{
  --bg:#e4eef3; --panel:#ffffff; --panel-2:#f2f7fa; --line:#c5d6df; --fg:#14283a; --muted:#566b7c;
  --accent:#ef6a1f; --accent-ink:#ffffff; --accent-soft:#fde3d2;
  --ok:#1f9a5a; --ok-soft:#d5f2e2; --bad:#d8394a; --bad-soft:#fadadd; --gold:#e0a400;
  --space:#0b1a2b; --atmo:#6bbde8; --sea:#cfe6f1; --land:#fbfcf8; --coast:#33576b; --grat:rgba(51,87,107,.16);
  --hover:#ffe9a8; --target:#ef6a1f; --target-line:#8a3200;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1821; --panel:#15232f; --panel-2:#1b2c3a; --line:#2a4152; --fg:#e6eff5; --muted:#97abba;
  --accent:#ff8a45; --accent-ink:#1a0c03; --accent-soft:#4a2611;
  --ok:#43c983; --ok-soft:#163b28; --bad:#ff6b78; --bad-soft:#4a1d23; --gold:#ffc83d;
  --space:#040a11; --atmo:#2f86bf; --sea:#0f2636; --land:#2a3d4b; --coast:#9cc3d6; --grat:rgba(156,195,214,.13);
  --hover:#5b5020; --target:#ff8a45; --target-line:#ffd2b5;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1821; --panel:#15232f; --panel-2:#1b2c3a; --line:#2a4152; --fg:#e6eff5; --muted:#97abba;
  --accent:#ff8a45; --accent-ink:#1a0c03; --accent-soft:#4a2611;
  --ok:#43c983; --ok-soft:#163b28; --bad:#ff6b78; --bad-soft:#4a1d23; --gold:#ffc83d;
  --space:#040a11; --atmo:#2f86bf; --sea:#0f2636; --land:#2a3d4b; --coast:#9cc3d6; --grat:rgba(156,195,214,.13);
  --hover:#5b5020; --target:#ff8a45; --target-line:#ffd2b5;
  color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;gap:10px;box-sizing:border-box;min-height:0}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:.005em}

/* top bar */
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 6px 4px 4px;font-weight:700}
.chip .av{width:30px;height:30px;font-size:19px}
.iconbtn{border:1px solid var(--line);background:var(--panel);border-radius:999px;height:34px;min-width:34px;padding:0 12px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.iconbtn:hover{border-color:var(--fg)}
.av{display:inline-grid;place-items:center;border-radius:50%;background:var(--accent-soft);flex:none;line-height:1}

.view{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.desk{overflow:auto;padding-bottom:12px}
.wrap{max-width:980px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.lead{color:var(--muted);margin:4px 0 0;max-width:60ch;line-height:1.45}
.note{font-size:13px;color:var(--muted);background:var(--panel-2);border-radius:10px;padding:8px 12px;line-height:1.4}

.btn{border:0;border-radius:12px;padding:12px 18px;font-family:var(--f-display);font-weight:600;font-size:17px;background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--target-line)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--target-line)}
.btn.ghost{background:var(--panel-2);color:var(--fg);box-shadow:0 3px 0 var(--line)}
.btn[disabled]{opacity:.5;cursor:default}

/* login */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:14px}
.ptile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:2px solid var(--line);border-radius:var(--r);background:var(--panel-2);font-weight:800;min-width:0}
.ptile:hover{border-color:var(--accent)}
.ptile .av{width:54px;height:54px;font-size:32px}
.ptile .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptile .lock{font-size:11px;color:var(--muted);font-weight:700}
.ptile.new{border-style:dashed;color:var(--accent)}
.ptile.new .av{background:transparent;border:2px dashed var(--accent);font-size:28px;font-family:var(--f-display)}
.form{display:flex;flex-direction:column;gap:14px;margin-top:14px;max-width:520px}
.form label{font-weight:800;font-size:14px;display:flex;flex-direction:column;gap:6px}
.form input{font:inherit;font-size:18px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--fg);width:100%}
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatars button{width:48px;height:48px;font-size:28px;border-radius:50%;border:2px solid transparent;background:var(--panel-2)}
.avatars button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.err{color:var(--bad);font-weight:800;min-height:1.2em;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pin{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px}
.dots{display:flex;gap:12px}
.dots i{width:18px;height:18px;border-radius:50%;border:2px solid var(--fg)}
.dots i.on{background:var(--fg)}
.keys{display:grid;grid-template-columns:repeat(3,64px);gap:10px}
.keys button{height:56px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);font-family:var(--f-display);font-size:24px;font-weight:600}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* menu */
.hello{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hello .av{width:58px;height:58px;font-size:34px}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.game{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);min-width:0}
.game.soon{background:var(--panel-2);color:var(--muted)}
.game h3{font-size:21px}
.game p{margin:0;line-height:1.4;font-size:14px;color:var(--muted)}
.game .thumb{height:92px;border-radius:10px;background:var(--space);display:grid;place-items:center;overflow:hidden}
.game.soon .thumb{opacity:.55}
.lv{display:flex;gap:6px;flex-wrap:wrap}
.lv button{border:2px solid var(--line);background:var(--panel-2);border-radius:999px;padding:5px 12px;font-weight:800;font-size:13px}
.lv button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.mine{font-size:13px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stars{color:var(--gold);letter-spacing:1px;font-size:15px}
.stars .off{color:var(--line)}
.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* records */
.board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board td,.board th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.board th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.board td.n{text-align:right;font-weight:800;font-family:var(--f-display);font-size:17px}
.board .rk{width:36px;font-family:var(--f-display);font-size:18px;color:var(--muted)}
.board tr.me td{background:var(--accent-soft)}
.board .who{display:flex;align-items:center;gap:8px;font-weight:800;min-width:0}
.board .who .av{width:28px;height:28px;font-size:17px}
.medal1{color:var(--gold)!important}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.empty{color:var(--muted);padding:14px 0}

/* play */
.playhead{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.playhead h2{font-size:20px}
.pill{font-weight:800;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill b{font-family:var(--f-display);font-size:17px}
.streak{color:var(--accent)}
.stage{position:relative;flex:1;min-height:340px;border-radius:var(--r);overflow:hidden;background:var(--space);border:1px solid var(--line)}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
#globe.drag{cursor:grabbing}
.sphere{fill:var(--sea)}
.rim{fill:none;stroke:var(--coast);stroke-width:1.2}
.grat{fill:none;stroke:var(--grat);stroke-width:.8}
.c{fill:var(--land);stroke:var(--coast);stroke-width:.6;stroke-linejoin:round}
.c.hover{fill:var(--hover)}
.c.target{fill:var(--target);stroke:var(--target-line);stroke-width:1.2}
.c.ok{fill:var(--ok)}
.c.bad{fill:var(--bad)}
.ring{fill:none;stroke:var(--target);stroke-width:3}
.ring.pulse{animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{stroke-opacity:1;stroke-width:4}100%{stroke-opacity:.15;stroke-width:1}}
.city{fill:var(--panel);stroke:var(--fg);stroke-width:2.2}
.city-in{fill:var(--accent)}
.mlabel.cap{font-size:15px}
.mlabel{font-family:var(--f-display);font-weight:600;font-size:15px;fill:var(--fg);paint-order:stroke;stroke:var(--land);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.zoom{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));top:10px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:20px;font-weight:800}

.timer{position:absolute;left:0;right:0;top:0;height:8px;background:rgba(255,255,255,.12)}
.timer i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transition:background .3s}
.timer i.low{background:var(--bad)}
.ask{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:var(--panel);border-radius:999px;padding:8px 18px;font-family:var(--f-display);font-size:18px;font-weight:600;box-shadow:0 4px 18px rgba(0,0,0,.25);white-space:nowrap;display:flex;gap:10px;align-items:center}
.ask .sec{font-variant-numeric:tabular-nums;color:var(--accent);min-width:2.2ch;text-align:right}
.answers{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:760px;margin:0 auto}
.answers button{min-height:58px;border-radius:14px;border:0;background:var(--panel);font-family:var(--f-display);font-weight:600;font-size:19px;padding:8px 12px;box-shadow:0 4px 0 var(--line);display:flex;align-items:center;gap:10px;text-align:left;line-height:1.15}
.answers button .k{flex:none;width:26px;height:26px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;font-size:14px;color:var(--muted)}
.answers button:hover:not([disabled]){background:var(--accent-soft)}
.answers button[disabled]{cursor:default}
.answers button.ok{background:var(--ok);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.answers button.bad{background:var(--bad);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.answers button.dim{opacity:.55}
.toast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);font-family:var(--f-display);font-weight:700;font-size:22px;padding:6px 16px;border-radius:999px;white-space:nowrap;pointer-events:none}
.toast.ok{background:var(--ok-soft);color:var(--ok)}
.toast.bad{background:var(--bad-soft);color:var(--bad)}
.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:translateX(-50%) scale(.6);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,10,17,.55);padding:16px}
.endcard{background:var(--panel);border-radius:20px;padding:24px;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;max-height:100%;overflow:auto}
.endcard .big{font-family:var(--f-display);font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.endcard .stars{font-size:40px;letter-spacing:4px}
.endcard .rec{font-family:var(--f-display);font-weight:700;color:var(--accent);font-size:22px}
.endcard .sum{color:var(--muted);font-size:14px;line-height:1.45}
.countdown{font-family:var(--f-display);font-size:120px;font-weight:700;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.stage.focus #globe{opacity:.3;transition:opacity .3s}
#globe{transition:opacity .4s}
.flagcard{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(72%,440px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.15);transition:all .45s ease}
.flagcard img{display:block;width:100%;height:100%}
.flagcard.small{left:calc(14px + env(safe-area-inset-left,0px));top:62px;transform:none;width:min(30%,150px)}
@media (max-width:560px){.flagcard{top:40%;width:84%}.flagcard.small{top:58px;width:96px}}
#confetti{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}

@media (max-width:560px){
  .brand b{font-size:19px}
  .answers{grid-template-columns:1fr 1fr;gap:8px;left:8px;right:8px;bottom:8px}
  .answers button{min-height:52px;font-size:16px;padding:6px 8px}
  .answers button .k{display:none}
  .ask{font-size:16px;top:16px}
  .toast{font-size:18px}
  .keys{grid-template-columns:repeat(3,58px)}
}
@media (prefers-reduced-motion: reduce){ .ring.pulse,.pop,.shake{animation:none} }

/* dodatki platformy */
.view.center-desk{display:flex}
.av.big{width:58px;height:58px;font-size:34px}
.center{text-align:center;justify-content:center}
.lead.center{margin-inline:auto}
.between{justify-content:space-between}
.flabel{font-weight:800;font-size:14px;margin-bottom:6px}
.sum.warn,.warn{color:var(--bad);font-weight:700}
.iconbtn.danger{color:var(--bad);border-color:var(--bad)}
input.mini{font:inherit;width:9em;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--fg)}
.tablewrap{overflow-x:auto}
.board th.num{text-align:right}
.board td.actions{white-space:nowrap;text-align:right}
.chipname{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot{font-size:12px;color:var(--muted);text-align:center;padding:4px 0 2px}
.foot a{color:inherit}
@media (max-width:560px){ .top .iconbtn{padding:0 9px} .chipname{max-width:6em} }
@media (display-mode: standalone){ body{padding-top:max(10px, env(safe-area-inset-top,0px))} }