/* Wspólny wygląd wszystkich gier w Kąciku Gier. */
:root{
  --bg:#e7eee2; --surface:#f6f9f2; --ink:#17281f; --muted:#56685c; --line:#c6d2c3;
  --accent:#c4301d; --on-accent:#ffffff; --gold:#a97a08; --good:#1f7a45; --bad:#b3261e;
  --display:"Alfa Slab One","Rockwell","Georgia",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#10201a; --surface:#172c24; --ink:#eaf1e6; --muted:#9fb3a6; --line:#2c4539; --accent:#f0624c; --on-accent:#1d0c08; --gold:#e6b93c; --good:#6fd08f; --bad:#ff8a7a; color-scheme:dark}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;padding-inline:16px;padding-block:20px 40px}
.wrap{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.back{align-self:flex-start;color:var(--muted);font-size:.9rem;font-weight:600}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.topbar .back{align-self:center}
.sound{display:flex;gap:6px}
.sound button{padding:5px 10px;font-size:.82rem}
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.1;margin:0;text-wrap:balance}
h1 span{color:var(--accent)}
.lead{margin:4px 0 0;color:var(--muted);max-width:60ch}
button{font:inherit;color:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--surface);padding:10px 16px;font-weight:600;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{transition:transform .08s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;box-shadow:0 2px 0 rgba(23,40,31,.1)}
@media (hover:hover){button:not(:disabled):hover{border-color:var(--accent)}}
button:not(:disabled):active{transform:translateY(1px) scale(.98);box-shadow:0 0 0 rgba(0,0,0,0)}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button:disabled{cursor:default;opacity:.55}
button.go{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:800;padding:12px 24px;box-shadow:0 3px 0 rgba(0,0,0,.22)}
button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);min-width:5.5em}
.hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px 14px;border-block:1px solid var(--line);padding-block:8px}
.stat{display:flex;flex-direction:column;min-width:0}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.stat b{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.msg h2{font-family:var(--display);font-weight:400;margin:0;font-size:1.4rem;line-height:1.15;text-wrap:balance}
.msg p{margin:0;color:var(--muted)}
.msg p b{color:var(--ink)}
.msg{animation:kg-rise .28s cubic-bezier(.2,1.2,.4,1)}
@keyframes kg-rise{from{transform:translateY(10px) scale(.96);opacity:0}}
@keyframes kg-pop{from{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}}
@keyframes kg-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes kg-pulse{50%{transform:scale(1.1)}}
.kg-pop{animation:kg-pop .28s ease-out}
.kg-shake{animation:kg-shake .3s}
#kg-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
html{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){button,.msg,.kg-pop,.kg-shake{transition:none;animation:none}}
.info{margin:0;color:var(--muted);min-height:1.5em}
.big{font-family:var(--display);font-size:clamp(2rem,10vw,3.4rem);text-align:center;margin:4px 0;line-height:1.2}
.arena{position:relative;width:100%;margin-inline:auto;border-radius:10px;overflow:hidden;line-height:0}
.arena canvas{display:block;width:100%;touch-action:none}
.cover{position:absolute;inset:0;display:grid;place-items:center;padding:12px;line-height:1.45;background:rgba(16,32,26,.45)}
.cover .msg{max-width:min(420px,100%)}

/* ===================== OPRAWA GRAFICZNA ===================== */
/* Wspólne: tło, karty wyników, ramki plansz. Każda gra ma na <body> klasę g-<nazwa>. */
:root{--hl:rgba(255,255,255,.6);--shadow:0 8px 22px rgba(23,40,31,.16)}
@media (prefers-color-scheme: dark){:root{--hl:rgba(255,255,255,0);--shadow:0 8px 22px rgba(0,0,0,.45)}}
body{background:radial-gradient(1100px 520px at 50% -120px,var(--hl),transparent 70%),var(--bg)}
h1{text-shadow:0 2px 0 var(--hl)}
button{border-radius:12px}
.hud{border:0;padding-block:0;gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:7px 12px;box-shadow:0 2px 0 var(--line)}
.msg{border-top:5px solid var(--accent);box-shadow:var(--shadow)}
.arena,.stage{box-shadow:var(--shadow)}

/* Memory */
.g-memory .card{box-shadow:none}
.g-memory .cb{background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,255,255,.12) 10px 20px),linear-gradient(135deg,#de4a33,#a62616);border:4px solid rgba(255,255,255,.85);box-shadow:0 4px 0 rgba(23,40,31,.25)}
.g-memory .cb::after{content:"🐾";font-family:var(--emoji);font-size:min(1.8rem,calc(34vw / var(--cols)));line-height:1}
.g-memory .cf{background:linear-gradient(#ffffff,#eef3e8);box-shadow:0 4px 0 rgba(23,40,31,.2)}

/* Matematyczny wyścig */
.g-matematyka .track{background:linear-gradient(#bfe3ee 0 46%,#9fcf7c 46%);border:0;box-shadow:var(--shadow)}
.g-matematyka .lane{border-bottom:6px solid #c9a36b}
.g-matematyka .who{color:#17281f;font-weight:800}
.g-matematyka .q{background:#22443a;color:#f6f3ea;border:8px solid #8a5c30;border-radius:14px;padding:12px 8px;box-shadow:var(--shadow)}
.g-matematyka .answers button:not(.ok):not(.no),.g-zegar .answers button:not(.ok):not(.no),.g-ortografia .answers button:not(.ok):not(.no){border:0;color:#17281f;box-shadow:0 5px 0 rgba(23,40,31,.25)}
.g-matematyka .answers button:not(.ok):not(.no):nth-child(1),.g-zegar .answers button:not(.ok):not(.no):nth-child(1),.g-ortografia .answers button:not(.ok):not(.no):nth-child(1){background:#f6c9c4}
.g-matematyka .answers button:not(.ok):not(.no):nth-child(2),.g-zegar .answers button:not(.ok):not(.no):nth-child(2),.g-ortografia .answers button:not(.ok):not(.no):nth-child(2){background:#cfe0f3}
.g-matematyka .answers button:not(.ok):not(.no):nth-child(3),.g-zegar .answers button:not(.ok):not(.no):nth-child(3){background:#dcebb4}
.g-matematyka .answers button:not(.ok):not(.no):nth-child(4),.g-zegar .answers button:not(.ok):not(.no):nth-child(4){background:#f6e7a6}

/* Mysi labirynt, klocki, kafelki */
.g-labirynt .stage{box-shadow:none}
.g-labirynt canvas{outline:5px solid var(--ink);box-shadow:var(--shadow)}
.g-klocki .side{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 2px 0 var(--line)}
.g-kafelki .board{box-shadow:var(--shadow)}

/* Kolorowe probówki */
.g-probowki .tubes{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 18px 18px;box-shadow:var(--shadow)}
.g-probowki .tube{border-color:#7f9995;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 35%,rgba(255,255,255,.35) 85%,rgba(255,255,255,.7));box-shadow:none}
.g-probowki .tube.sel{box-shadow:0 0 0 3px var(--accent)}

/* Zwierzaki w parach, Znajdź inny */
.g-pary .grid,.g-inny .grid{background:var(--surface);border-radius:16px;padding:6px;box-shadow:var(--shadow)}
.g-pary button.cell,.g-inny .grid button{background:linear-gradient(#ffffff,#e9f0e3);border-color:#c6d2c3;box-shadow:0 3px 0 #b7c5b4}

/* Zakorkowany parking */
.g-parking .lot{background-color:#5b656d;border-color:#2c3338;background-image:linear-gradient(rgba(255,255,255,.2) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.2) 2px,transparent 2px);box-shadow:var(--shadow)}
.g-parking .car{box-shadow:none}
.g-parking .car span{position:relative;border-radius:12px;overflow:hidden}
.g-parking .car span::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 50%);pointer-events:none}
.g-parking .car span::after{content:"";position:absolute;border-radius:6px;background:rgba(18,28,38,.4);pointer-events:none}
.g-parking .car.h span::after{top:16%;bottom:16%;left:30%;right:22%}
.g-parking .car.v span::after{left:16%;right:16%;top:30%;bottom:22%}
.g-parking .car:first-child span::after{display:none}

/* Powtórz melodię */
.g-melodia .pads{padding:14px;border-radius:30px;background:#22302a;box-shadow:var(--shadow)}
.g-melodia .pads button{box-shadow:inset 0 -8px 0 rgba(0,0,0,.25)}
.g-melodia .pads button.lit{box-shadow:0 0 0 5px #fff,0 0 30px 8px rgba(255,255,255,.7)}

/* Kółko i krzyżyk */
.g-kolko-krzyzyk .board{background:var(--ink);gap:7px;padding:7px;border-radius:18px;box-shadow:var(--shadow)}
.g-kolko-krzyzyk .board button{border:0;border-radius:11px;background:var(--surface);box-shadow:none;color:#2f7fd6}
.g-kolko-krzyzyk .board button.x{color:var(--accent)}
.g-kolko-krzyzyk .board button.win{background:var(--gold);color:var(--bg)}

/* Cztery w rzędzie */
.g-cztery .board{background:linear-gradient(#3b78cf,#27529a);border-radius:18px;padding:10px;gap:6px;box-shadow:var(--shadow),inset 0 -6px 0 rgba(0,0,0,.2)}
.g-cztery .board button{background:var(--bg);box-shadow:inset 0 4px 0 rgba(0,0,0,.28)}
.g-cztery .board button.r{background:radial-gradient(circle at 35% 30%,#ff9a8a,#d63a2f 55%,#a82616);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.g-cztery .board button.y{background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c230 55%,#c79a12);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 0 0 5px rgba(160,120,10,.35)}

/* Kretowisko */
.g-saper .grid{padding:8px;border-radius:14px;background:#5d9648;box-shadow:var(--shadow)}
.g-saper .grid button{background:linear-gradient(#a8d982,#86c063);border-color:#6ea955;box-shadow:0 2px 0 #4f8a3f}
.g-saper .grid button.open{background:#efe4c8;border-color:#d9caa4;box-shadow:none;color:#17281f}
.g-saper .grid button.boom{background:var(--accent)}
.g-saper .grid button.n1{color:#2f6fc0}.g-saper .grid button.n2{color:#23803f}.g-saper .grid button.n3{color:#c4301d}.g-saper .grid button.n4{color:#6a3fb0}.g-saper .grid button.n5,.g-saper .grid button.n6,.g-saper .grid button.n7,.g-saper .grid button.n8{color:#8a4a12}

/* Zgadnij słowo, Rozsypane literki */
.g-slowo .word span{border:0;border-radius:8px;background:var(--surface);box-shadow:0 4px 0 var(--line);height:2.2em;border-bottom:4px solid var(--ink)}
.g-slowo .keys button{border-radius:8px;box-shadow:0 4px 0 var(--line)}
.g-slowo .balloons{font-size:2.3rem}
.g-literki .letters button{border-radius:8px;background:linear-gradient(#fbf0cf,#ecd9a3);color:#3b2a10;border-color:#c9b074;box-shadow:0 4px 0 #b79b5b}
.g-literki .slots span{border-radius:8px 8px 0 0;background:var(--surface)}
.g-literki .pic{filter:drop-shadow(0 6px 8px rgba(23,40,31,.25))}

/* Małe sudoku */
.g-sudoku .grid{box-shadow:var(--shadow);border-radius:10px;background:var(--surface)}
.g-sudoku .grid button{box-shadow:none}
.g-sudoku .pad button{border-radius:50%;box-shadow:0 4px 0 var(--line)}

/* Przesuwanka */
.g-przesuwanka .board{background:#6b4a2e;box-shadow:var(--shadow),inset 0 0 0 4px #4d3520;border-radius:16px;padding:12px}
.g-przesuwanka .board button{background:linear-gradient(#f0d3a0,#dbb072);color:#4a2f12;border-color:#b98a45;box-shadow:0 4px 0 #a9783a}
.g-przesuwanka .board button.ok{border-color:#2f8a4a;box-shadow:0 4px 0 #a9783a,inset 0 0 0 3px #57b06f}

/* Która godzina?, Ortograficzne zagadki */
.g-zegar .clock{filter:drop-shadow(0 8px 14px rgba(23,40,31,.25))}
.g-ortografia .big{color:#17281f;border-radius:10px;padding:18px 10px;box-shadow:var(--shadow);background:linear-gradient(90deg,transparent 0 38px,#f0a3a3 38px 40px,transparent 40px),repeating-linear-gradient(#fffdf5 0 31px,#cfe0ee 31px 32px)}

/* Sklepik */
.g-sklepik .item{position:relative;border:0;border-radius:0 0 14px 14px;box-shadow:var(--shadow);padding-top:30px}
.g-sklepik .item::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(90deg,#d63a2f 0 22px,#ffffff 22px 44px);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.g-sklepik .tray{border:0;background:linear-gradient(#e9c58c,#d6a763);box-shadow:0 5px 0 #a9783a;border-radius:12px}
.g-sklepik .coin{border:0;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c230 60%,#c79a12);box-shadow:inset 0 0 0 4px rgba(169,120,10,.55),0 3px 0 rgba(0,0,0,.25)}
.g-sklepik .coin.gr{background:radial-gradient(circle at 35% 30%,#ffffff,#d9d4c8 60%,#a39b88);box-shadow:inset 0 0 0 4px rgba(120,112,95,.5),0 3px 0 rgba(0,0,0,.25)}
.g-sklepik .coin.note{background:linear-gradient(135deg,#d6f0dc,#9fd3ae);box-shadow:inset 0 0 0 3px rgba(47,106,72,.5),0 3px 0 rgba(0,0,0,.2)}

/* Zgaś światła */
.g-swiatla .grid{padding:12px;border-radius:20px;background:#16211c;box-shadow:var(--shadow)}
.g-swiatla .grid button{border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#3d4f47,#222d28);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
.g-swiatla .grid button.on{background:radial-gradient(circle at 35% 30%,#fffbe0,#f6d04a 55%,#d9a514);box-shadow:0 0 22px 6px rgba(246,208,74,.55)}

/* Wieża z krążków */
.g-hanoi .pegs{padding:10px 10px 0;border-radius:14px 14px 0 0;border-bottom:14px solid #8a5c30;background:var(--surface);box-shadow:var(--shadow)}
.g-hanoi .peg{background:none;border:0;box-shadow:none;border-radius:8px}
.g-hanoi .peg::before{background:linear-gradient(90deg,#c79a55,#8a5c30);width:10px;margin-left:-5px}
.g-hanoi .peg.sel{box-shadow:inset 0 0 0 3px var(--accent)}
.g-hanoi .disc{box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.3)}

/* Statki */
.g-statki .sea{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.g-statki .grid{padding:6px;border-radius:10px;background:#2f7fb0}
.g-statki .grid button{background:linear-gradient(#b4dff0,#86c3de);border-color:#6fb0cf;box-shadow:none}
.g-statki .grid button.miss{background:#dcecf3;color:#5b7f92}
.g-statki .grid button.ship{background:linear-gradient(#8996a1,#5d6a75);border-color:#48545e}
.g-statki .grid button.hit{background:radial-gradient(circle,#ffb199,#e8674a 70%);border-color:#b3261e}
.g-statki .grid button.sunk{background:linear-gradient(#8d2334,#5c0f1c);border-color:#3d0a13}

/* Złap kreta */
.g-kret .holes{padding:16px;border-radius:20px;background:linear-gradient(#a3d37e,#7fbf5f);box-shadow:var(--shadow)}
.g-kret .holes button{background:radial-gradient(ellipse at 50% 72%,#2f1f12 0 44%,#6b4a2e 45% 100%);border-color:#5d9648;box-shadow:inset 0 6px 0 rgba(0,0,0,.25)}

/* Pikselowy malarz, Deszcz słów */
.g-piksele .grid{box-shadow:var(--shadow)}
.g-piksele .palette{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:8px 14px;box-shadow:0 2px 0 var(--line)}
.g-piksele .palette button{box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.g-pisanie .sky{box-shadow:var(--shadow);background:linear-gradient(#1f3554,#4f7ca4 70%,#8fb7cf)}
.g-pisanie .sky span{border-radius:999px;box-shadow:0 3px 0 rgba(0,0,0,.2)}

/* Dopiski: podświetlenia i krótkie animacje */
.g-sudoku .grid button.peer{background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.g-sudoku .grid button.same{color:var(--accent);box-shadow:inset 0 0 0 2px var(--gold)}
.g-matematyka .runner.hop{animation:kg-hop .4s ease-out}
@keyframes kg-hop{40%{transform:translateY(-14px) rotate(-8deg)}}
.g-probowki .tube.fresh .ball:last-child{animation:kg-pop .25s ease-out}
.g-piksele .palette button.rub{width:auto;border-radius:999px;padding:0 12px}
@media (prefers-reduced-motion: reduce){.g-matematyka .runner.hop,.g-probowki .tube.fresh .ball:last-child{animation:none}}