/* game.css — ekran gry: HUD, plansza, panel sterowania, okna, animacje.
   Układ: pion = HUD / plansza / panel; poziom (≥760 px i szerzej niż wyżej)
   = plansza po lewej, panel po prawej. Rozmiar planszy liczy --board. */
.game{--board:min(100vw - 2*var(--pad),100dvh - 360px);--cell:calc(var(--board)/9);gap:14px;align-items:center;padding-top:6px}
.hud{width:var(--board);display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700;white-space:nowrap}
.stat b{font-size:clamp(16px,2.2vh,20px);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.stat.score b{color:var(--accent)}.stat.mist b.hot{color:var(--wrong)}
.stat.time{flex-direction:row;align-items:center;gap:10px;justify-self:end}.stat.time div{display:flex;flex-direction:column;gap:2px;text-align:right}
.stat.time .icon{width:40px;height:40px;border-radius:12px}
body[data-timer="off"] .stat.time b{visibility:hidden}
/* ---- plansza: papier z wyraźną kratą, grube linie bloków ---- */
.board-wrap{position:relative;padding:6px;border-radius:calc(var(--radius) - 4px);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}
.board{width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:var(--line2);gap:1px;padding:2px;border-radius:10px;overflow:hidden}
.cell{position:relative;background:var(--surface);color:var(--ink);font-size:calc(var(--cell)*.5);font-weight:600;display:grid;place-items:center;line-height:1;transition:background .12s,color .12s;border-radius:2px}
body[data-big="on"] .cell{font-size:calc(var(--cell)*.6);font-weight:700}
.cell[data-c="2"],.cell[data-c="5"]{margin-right:2px}.cell[data-r="2"],.cell[data-r="5"]{margin-bottom:2px}
.cell.given{color:var(--ink);font-weight:700}.cell.player{color:var(--player)}
.cell.related{background:var(--related)}.cell.same{background:var(--same)}.cell.selected{background:var(--selected);box-shadow:inset 0 0 0 2px var(--accent)}
.cell.wrong{color:var(--wrong);background:var(--wrong-bg)}.cell.conflict{background:var(--wrong-bg)}
.cell.proof{background:var(--proof);box-shadow:inset 0 0 0 2px var(--proof-ring)}.cell.target{background:var(--selected);box-shadow:inset 0 0 0 3px var(--accent)}
.cell .notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:calc(var(--cell)*.24);font-weight:600;color:var(--note);line-height:1}
.cell .notes i{font-style:normal;display:grid;place-items:center;opacity:0}.cell .notes i.on{opacity:1}.cell.same .notes i.hi{color:var(--accent);font-weight:800}
.cell.pop>span{animation:pop .28s cubic-bezier(.2,1.4,.4,1)}.cell.shake{animation:shake .32s}.cell.done{animation:done .7s ease-out}
.cell.win{animation:win .9s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--d)*45ms)}
@keyframes pop{0%{transform:scale(.4);opacity:.2}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes done{0%{background:var(--accent);color:var(--accent-ink)}100%{}}
@keyframes win{0%{background:var(--accent);color:var(--accent-ink);transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
/* ---- panel: narzędzia i cyfry ---- */
.side{width:var(--board);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:stretch}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool{position:relative;min-width:64px;min-height:44px;border-radius:var(--radius-s);background:var(--btn);border:1px solid var(--btn-line);color:var(--btn-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 1px 0 var(--btn-hi),0 2px 6px -2px rgba(0,0,0,.15);transition:transform .12s,opacity .2s}
.tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool:active{transform:scale(.94)}.tool[disabled]{opacity:.4;pointer-events:none}
.tool .badge{position:absolute;top:-6px;right:-4px;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:var(--ink3);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.tool.on{background:linear-gradient(145deg,var(--accent2),var(--accent));color:var(--accent-ink);border-color:transparent}.tool.on .badge,.tool.hint .badge{background:var(--accent)}
.tool.on .badge{background:#fff;color:var(--accent)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px}
.num{position:relative;min-height:44px;border-radius:var(--radius-s);background:var(--num);border:1px solid var(--num-line);color:var(--num-ink);font-size:clamp(22px,4.6vh,34px);font-weight:700;display:grid;place-items:center;box-shadow:inset 0 1px 0 var(--btn-hi),0 3px 8px -3px rgba(0,0,0,.18);transition:transform .1s,opacity .25s,background .15s}
.num:active{transform:scale(.93);background:var(--same)}.num.done{opacity:.22;pointer-events:none}
.num small{position:absolute;right:7px;bottom:5px;font-size:10px;font-weight:700;color:var(--ink3)}
body[data-notes="on"] .num{font-size:clamp(16px,3.4vh,24px);color:var(--note)}
.keys{display:none;color:var(--ink3);font-size:12px;text-align:center;margin:0}
/* ---- pion, wąski telefon: panel = narzędzia 2×2 + cyfry 3×3 ---- */
@media(max-width:559px){.side{grid-template-columns:auto 1fr}.numpad{min-height:156px}}
@media(max-height:700px){.top{min-height:44px}.brand small{display:none}}
/* ---- pion, tablet: narzędzia w rzędzie, cyfry 1×9 ---- */
@media(min-width:560px) and (max-aspect-ratio:1/1){.side{grid-template-columns:1fr}.tools{grid-template-columns:repeat(4,1fr)}.tool{min-height:60px}.numpad{grid-template-columns:repeat(9,1fr);grid-template-rows:1fr}.num{min-height:64px}}
/* ---- poziom: plansza po lewej, panel po prawej (jak na komputerze) ---- */
@media(min-width:760px) and (min-aspect-ratio:1/1){
  .game.active{--board:min(100dvh - 185px,58vw);display:grid;grid-template-columns:auto minmax(260px,420px);grid-template-rows:auto 1fr;gap:12px clamp(20px,4vw,56px);justify-content:center;align-content:center}
  .hud{grid-column:1}.board-wrap{grid-column:1;grid-row:2}
  .side{grid-column:2;grid-row:1/3;width:auto;grid-template-columns:1fr;align-self:center;gap:18px}
  .tools{grid-template-columns:repeat(4,1fr)}.tool{min-height:68px;font-size:12px}.tool svg{width:26px;height:26px}
  .numpad{gap:12px}.num{min-height:clamp(64px,13vh,110px);font-size:clamp(30px,6vh,54px)}
  .keys{display:block}
}
/* ---- okna ---- */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s}
.overlay[hidden]{display:none}
.dialog{width:min(100%,440px);max-height:min(90dvh,760px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;box-shadow:var(--shadow);animation:rise .3s cubic-bezier(.2,1.2,.3,1);text-align:center}
.dialog h2{margin:0;font-size:28px;letter-spacing:-.03em}.dialog p{margin:8px 0 0;color:var(--ink2);font-size:15px;line-height:1.45}
.dialog .mark{width:72px;height:72px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,var(--accent2),var(--accent));color:var(--accent-ink);box-shadow:0 14px 30px -12px var(--accent)}
.dialog .mark.gold{background:linear-gradient(145deg,#ffd76a,#f0a020);color:#3a2600;box-shadow:0 14px 30px -12px #f0a020}
.dialog .mark.red{background:linear-gradient(145deg,#ff8a95,var(--wrong));color:#fff;box-shadow:0 14px 30px -12px var(--wrong)}
.dialog .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.dialog .grid div{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 10px}
.dialog .grid span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700}.dialog .grid b{display:block;font-size:20px;margin-top:4px}
.dialog .actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.dialog .actions button{flex:none}
.dialog .record{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:999px;background:linear-gradient(90deg,#ffd76a,#f0a020);color:#3a2600;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;animation:shine 1.6s ease-in-out infinite}
.dialog .tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}.dialog .tags i{font-style:normal;padding:5px 12px;border-radius:999px;background:var(--num);color:var(--num-ink);font-size:12px;font-weight:700}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:15px;font-weight:600}
.opt:last-of-type{border-bottom:0}.opt .seg{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:3px}
.opt .seg button{padding:7px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink2)}.opt .seg button.on{background:var(--accent);color:var(--accent-ink)}
.switch{width:52px;height:30px;border-radius:15px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:var(--accent)}.switch.on:after{transform:translateX(22px)}
.statrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;align-items:center}
.statrow:last-child{border-bottom:0}.statrow b{font-size:15px}.statrow small{color:var(--ink3);font-size:12px}.statrow .c{width:10px;height:10px;border-radius:5px;display:inline-block;margin-right:8px;vertical-align:middle}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:30;padding:12px 20px;border-radius:999px;background:var(--toast);color:var(--toast-ink);font-weight:700;font-size:14px;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,1.2,.3,1);box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.hintbar{position:absolute;left:-1px;right:-1px;top:-8px;transform:translateY(-100%);z-index:5;box-shadow:var(--shadow);background:var(--proof);border:1px solid var(--proof-ring);color:var(--ink);border-radius:var(--radius-s);padding:9px 12px;font-size:13px;line-height:1.35;display:flex;gap:10px;align-items:center;animation:rise .25s}
.hintbar b{font-size:20px;color:var(--accent)}.hintbar .actions{display:flex;gap:8px;margin-left:auto}.hintbar button{padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;background:var(--surface);border:1px solid var(--line)}.hintbar button.go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
#fx{position:fixed;inset:0;z-index:25;pointer-events:none;width:100%;height:100%}
.spin{width:44px;height:44px;margin:14px auto;border-radius:22px;border:4px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes fade{from{opacity:0}}@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}@keyframes shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}@keyframes spin{to{transform:rotate(360deg)}}