/* ==========================================================
   Kocia Kraina — claymorphism dla dzieci
   Fredoka (nagłówki) + Nunito (tekst)
   ========================================================== */
:root {
  --ink: #2E1065;
  --ink-soft: #5B4B8A;
  --card: #FFFFFF;
  --line: #EDE9FE;
  --gold: #FBBF24;
  --gold-d: #B45309;
  --danger: #DC2626;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --r-xl: 32px; --r-l: 24px; --r-m: 18px; --r-s: 12px;
  --clay: 0 6px 0 rgba(46,16,101,.08), 0 16px 32px rgba(124,58,237,.14), inset 0 -5px 0 rgba(46,16,101,.05), inset 0 4px 0 rgba(255,255,255,.95);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  /* domyślny kolor akcentu (różowy) */
  --c: #EC4899; --c-l: #F9A8D4; --c-d: #BE185D; --c-bg: #FDF2F8;
}
.pink   { --c: #EC4899; --c-l: #F9A8D4; --c-d: #BE185D; --c-bg: #FDF2F8; }
.purple { --c: #8B5CF6; --c-l: #C4B5FD; --c-d: #6D28D9; --c-bg: #F5F3FF; }
.blue   { --c: #0284C7; --c-l: #7DD3FC; --c-d: #075985; --c-bg: #F0F9FF; }
.green  { --c: #059669; --c-l: #6EE7B7; --c-d: #065F46; --c-bg: #ECFDF5; }
.orange { --c: #EA580C; --c-l: #FDBA74; --c-d: #9A3412; --c-bg: #FFF7ED; }
.yellow { --c: #D97706; --c-l: #FDE68A; --c-d: #92400E; --c-bg: #FFFBEB; }
#screen-game[data-theme="green"]  { --c: #059669; --c-l: #6EE7B7; --c-d: #065F46; --c-bg: #ECFDF5; }
#screen-game[data-theme="purple"] { --c: #8B5CF6; --c-l: #C4B5FD; --c-d: #6D28D9; --c-bg: #F5F3FF; }
#screen-game[data-theme="blue"]   { --c: #0284C7; --c-l: #7DD3FC; --c-d: #075985; --c-bg: #F0F9FF; }
#screen-game[data-theme="orange"] { --c: #EA580C; --c-l: #FDBA74; --c-d: #9A3412; --c-bg: #FFF7ED; }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.5;
  color: var(--ink); background: #FFE9F4; min-height: 100dvh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* bez zoomu po podwójnym tapnięciu */
}
/* Plansza gry: bez zaznaczania tekstu i menu przy przytrzymaniu palca */
.stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 4px solid #7C3AED; outline-offset: 3px; border-radius: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* ---------------- Tło ---------------- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(165deg, #FFE4F1 0%, #EDE4FF 42%, #DCF2FF 72%, #FFF4D6 100%);
}
.sky::before {
  content: ''; position: absolute; inset: -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23ffffff' fill-opacity='.6'%3E%3Cellipse cx='30' cy='38' rx='10' ry='8.5'/%3E%3Ccircle cx='17' cy='27' r='4.5'/%3E%3Ccircle cx='25' cy='18' r='4.5'/%3E%3Ccircle cx='36' cy='18' r='4.5'/%3E%3Ccircle cx='44' cy='27' r='4.5'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.45' transform='rotate(-25 100 100)'%3E%3Cellipse cx='100' cy='108' rx='8' ry='7'/%3E%3Ccircle cx='90' cy='99' r='3.6'/%3E%3Ccircle cx='96' cy='92' r='3.6'/%3E%3Ccircle cx='105' cy='92' r='3.6'/%3E%3Ccircle cx='111' cy='99' r='3.6'/%3E%3C/g%3E%3C/svg%3E");
  animation: drift 60s linear infinite;
}
@keyframes drift { to { transform: translate(140px, 140px); } }
.blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; animation: float 16s ease-in-out infinite; }
.blob.b1 { width: 380px; height: 380px; background: #F9A8D4; top: -120px; left: -100px; }
.blob.b2 { width: 340px; height: 340px; background: #C4B5FD; bottom: -100px; right: -80px; animation-delay: -5s; }
.blob.b3 { width: 260px; height: 260px; background: #FDE68A; top: 38%; left: 72%; animation-delay: -9s; }
.blob.b4 { width: 240px; height: 240px; background: #7DD3FC; top: 55%; left: 4%; animation-delay: -12s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } }
.cloud { position: absolute; width: 140px; height: 44px; background: #fff; border-radius: 99px; opacity: .8; animation: cloud 50s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 64px; height: 64px; top: -32px; left: 22px; }
.cloud::after { width: 48px; height: 48px; top: -22px; left: 70px; }
.cloud.c1 { top: 12%; left: -160px; }
.cloud.c2 { top: 30%; left: -160px; animation-duration: 70s; animation-delay: -30s; transform: scale(.7); }
.cloud.c3 { top: 70%; left: -160px; animation-duration: 85s; animation-delay: -55s; }
@keyframes cloud { to { translate: calc(100vw + 320px) 0; } }

/* ---------------- Układ ---------------- */
#app { max-width: 1100px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 28px; }
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; gap: 16px; animation: screenIn .45s var(--ease-out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(16px); } }

.topbar { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: clamp(30px, 6vw, 46px); font-weight: 700; letter-spacing: .5px; }
.logo .l1 { color: #EC4899; } .logo .l2 { color: #8B5CF6; }
.logo span { text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(46,16,101,.1); }
.logo-paw { width: 1.1em; height: 1.1em; color: #F59E0B; filter: drop-shadow(0 3px 0 #fff); animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { rotate: -12deg; } 50% { rotate: 12deg; } }
.game-title { font-size: clamp(24px, 4.5vw, 34px); font-weight: 700; color: var(--c-d); text-shadow: 0 3px 0 #fff; }

.coins {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; min-height: 48px;
  background: var(--card); border-radius: 99px; box-shadow: var(--clay);
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
}
.coins .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #0EA5E9; color: #fff; stroke-width: 0; }
.coins b { display: inline-block; min-width: 1.2em; }

.icon-btn, .mini-btn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; flex: none;
  border: 0; cursor: pointer; background: var(--card); color: var(--c-d); box-shadow: var(--clay);
  transition: transform .2s var(--ease-bounce), box-shadow .2s;
}
.icon-btn .ico { width: 28px; height: 28px; }
.icon-btn:hover, .mini-btn:hover { transform: translateY(-3px); }
.icon-btn:active, .mini-btn:active { transform: translateY(3px) scale(.96); }
.mini-btn { width: 40px; height: 40px; border-radius: 14px; color: #8B5CF6; vertical-align: middle; margin-left: 4px; }
.mini-btn .ico { width: 20px; height: 20px; }

/* ---------------- Przyciski ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; cursor: pointer;
  padding: 10px 28px; min-height: 56px; border: 4px solid #fff; border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: 0 6px 0 var(--c-d), 0 12px 22px color-mix(in srgb, var(--c) 35%, transparent);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .15s ease-out, box-shadow .15s ease-out, filter .2s;
}
.btn .ico { width: 26px; height: 26px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--c-d), 0 16px 26px color-mix(in srgb, var(--c) 40%, transparent); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-d), 0 4px 8px color-mix(in srgb, var(--c) 30%, transparent); }
.btn.big { font-size: 26px; min-height: 64px; padding: 10px 36px; }
.btn.ghost { background: #fff; color: var(--c-d); text-shadow: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 35%, #fff), 0 12px 22px rgba(46,16,101,.1); border-color: color-mix(in srgb, var(--c) 18%, #fff); }
.btn:disabled { cursor: not-allowed; background: #CBD5E1; box-shadow: 0 6px 0 #94A3B8; transform: none; color: #fff; }

/* ---------------- Menu główne ---------------- */
.hero { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.mascot-stage {
  width: 190px; flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  animation: idle 3.2s ease-in-out infinite; filter: drop-shadow(0 12px 10px rgba(46,16,101,.15));
}
.mascot-stage.big { width: min(280px, 70vw); }
.mascot { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes idle { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.m-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.bubble {
  position: relative; flex: 1; background: var(--card); border-radius: var(--r-xl); padding: 18px 24px; box-shadow: var(--clay);
}
.bubble::before {
  content: ''; position: absolute; left: -14px; top: 50%; width: 28px; height: 28px; background: var(--card);
  transform: translateY(-50%) rotate(45deg); border-radius: 6px;
}
.hello { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 4.5vw, 36px); font-weight: 600; }
.hello b { color: #EC4899; }
.sub { margin: 2px 0 10px; color: var(--ink-soft); font-size: 19px; min-height: 1.5em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 99px;
  background: var(--c-bg); color: var(--c-d); font-size: 16px; font-weight: 800;
}
.chip .ico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--c); color: #fff; stroke-width: 0; }
.chip.yellow .ico { background: var(--gold); }
.chip b { font-family: var(--font-display); font-size: 19px; }

.section-title { font-size: 26px; font-weight: 600; margin-top: 6px; }

.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 680px) { .games-grid { grid-template-columns: 1fr; } }
.game-card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border-radius: var(--r-xl); border: 4px solid #fff; box-shadow: var(--clay), 0 8px 0 color-mix(in srgb, var(--c) 30%, #fff);
  transition: transform .25s var(--ease-bounce), box-shadow .25s;
  animation: cardIn .55s var(--ease-bounce) backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.game-card:hover { transform: translateY(-6px) rotate(-.6deg); }
.game-card:active { transform: translateY(3px) scale(.98); }
.game-card:focus-visible { outline: 5px solid var(--c); outline-offset: 4px; border-radius: var(--r-xl); }
.game-art {
  position: relative; display: block; height: 170px; overflow: hidden; border-radius: 26px 26px 0 0;
  background:
    radial-gradient(circle at 15% 120%, rgba(255,255,255,.55) 0 30%, transparent 31%),
    radial-gradient(circle at 90% -10%, rgba(255,255,255,.45) 0 25%, transparent 26%),
    linear-gradient(160deg, var(--c-l), color-mix(in srgb, var(--c) 55%, var(--c-l)));
}
.game-info { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 18px; flex: 1; }
.game-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--c-d); }
.game-desc { color: var(--ink-soft); font-size: 17px; line-height: 1.45; flex: 1; }
.game-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.game-record { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--c-d); background: var(--c-bg); padding: 4px 12px; border-radius: 99px; }
.game-record .ico { width: 18px; height: 18px; }
.play-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 99px; color: #fff;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; background: var(--c); box-shadow: 0 4px 0 var(--c-d);
  transition: transform .2s var(--ease-bounce);
}
.play-pill .ico { width: 20px; height: 20px; }
.game-card:hover .play-pill { transform: scale(1.08); }

/* ilustracje na kartach gier */
.art-scatter i { position: absolute; left: var(--x); top: var(--y); font-size: calc(42px * var(--s)); font-style: normal; filter: drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.art-scatter i.hl { animation: wiggle 1.4s ease-in-out infinite; }
.art-lens { position: absolute; left: calc(44% - 22px); top: calc(20% - 20px); width: 92px; height: 92px; color: var(--c-d); animation: lens 3s ease-in-out infinite; }
.art-lens .ico { width: 100%; height: 100%; stroke-width: 2.6; fill: rgba(255,255,255,.35); }
@keyframes lens { 0%,100% { translate: 0 0; } 50% { translate: 10px 6px; } }
.art-cards { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.art-cards i {
  width: 72px; height: 92px; border-radius: 16px; border: 4px solid #fff; font-style: normal;
  display: grid; place-items: center; font-size: 44px; box-shadow: 0 6px 0 rgba(46,16,101,.15);
  background: repeating-linear-gradient(45deg, #8B5CF6 0 10px, #A78BFA 10px 20px);
}
.art-cards .c1 { rotate: -12deg; translate: 0 8px; }
.art-cards .c3 { rotate: 12deg; translate: 0 8px; }
.art-cards .c2 { background: #fff; translate: 0 -8px; animation: idle 2.4s ease-in-out infinite; }
.art-rain i { position: absolute; top: -40px; left: var(--x); font-style: normal; font-size: 38px; animation: rain 2.4s linear infinite; animation-delay: var(--d); }
@keyframes rain { to { transform: translateY(210px) rotate(200deg); } }
.art-basket, .basket {
  background: repeating-linear-gradient(90deg, #D97706 0 8px, #B45309 8px 16px);
  border: 4px solid #92400E; border-top: 9px solid #F59E0B; border-radius: 6px 6px 26px 26px;
}
.art-basket { position: absolute; bottom: 10px; left: 50%; width: 100px; height: 40px; translate: -50% 0; animation: basket 2.4s ease-in-out infinite; }
@keyframes basket { 0%,100% { transform: translateX(-30px); } 50% { transform: translateX(30px); } }
.art-choir { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.art-choir i { width: 54px; height: 54px; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(46,16,101,.15); animation: idle 1.2s ease-in-out infinite; }
.art-choir .p1 { background: #F472B6; } .art-choir .p2 { background: #38BDF8; animation-delay: .15s; }
.art-choir .p3 { background: #FACC15; animation-delay: .3s; } .art-choir .p4 { background: #34D399; animation-delay: .45s; }
.art-note { position: absolute; top: 12px; right: 18px; width: 48px; height: 48px; color: #fff; animation: wiggle 2s ease-in-out infinite; }
.art-note .ico { width: 100%; height: 100%; }

.home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 4px; }
.big-link {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--r-l);
  background: var(--card); box-shadow: var(--clay), 0 6px 0 color-mix(in srgb, var(--c) 30%, #fff);
  transition: transform .2s var(--ease-bounce);
}
.big-link:hover { transform: translateY(-4px); }
.big-link:active { transform: translateY(3px); }
.big-link-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--c); color: #fff; box-shadow: 0 4px 0 var(--c-d); flex: none; }
.big-link-ico .ico { width: 32px; height: 32px; }
.big-link b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--c-d); }
.big-link small { display: block; color: var(--ink-soft); font-size: 16px; }

/* ---------------- Ekran gry ---------------- */
#screen-game.active { height: calc(100dvh - 40px); min-height: 520px; gap: 12px; }
.hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill {
  display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; min-width: 120px;
  background: var(--card); border-radius: 22px; box-shadow: var(--clay);
}
.pill-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: var(--c); color: #fff; box-shadow: 0 3px 0 var(--c-d); }
.pill-ico .ico { width: 24px; height: 24px; }
.pill-txt { line-height: 1.1; }
.pill-txt small { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--c-d); }
.pill-txt b { display: inline-flex; gap: 2px; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.pill.warn { background: #FEE2E2; animation: pulse .6s ease-in-out infinite; }
.pill.warn b { color: var(--danger); }
.ico.heart { width: 24px; height: 24px; color: #E2E8F0; stroke-width: 1; }
.ico.heart.on { color: #F43F5E; }
@keyframes pulse { 50% { scale: 1.07; } }
.bump { animation: bump .35s var(--ease-bounce); }
@keyframes bump { 50% { scale: 1.35; } }
.shake { animation: shake .4s; }
@keyframes shake { 20% { translate: -7px 0; } 40% { translate: 7px 0; } 60% { translate: -4px 0; } 80% { translate: 4px 0; } }

.bar { height: 14px; border-radius: 99px; background: #fff; box-shadow: inset 0 2px 4px rgba(46,16,101,.12); overflow: hidden; }
.bar[hidden] { display: none; }
#barFill { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-l), var(--c)); transition: width .3s linear; }
.bar.warn #barFill { background: linear-gradient(90deg, #F87171, var(--danger)); }

.stage {
  position: relative; isolation: isolate; flex: 1; min-height: 320px; overflow: hidden;
  border-radius: var(--r-xl); border: 5px solid #fff; background: var(--c-bg); box-shadow: var(--clay);
}
.play { position: absolute; inset: 0; container-type: size; }
.fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }

.overlay {
  position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: color-mix(in srgb, var(--c-bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s, visibility .3s;
}
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.panel {
  position: relative; width: 100%; max-width: 480px; max-height: 100%; overflow: auto; text-align: center;
  background: var(--card); border-radius: var(--r-xl); padding: 22px 26px; box-shadow: var(--clay), 0 10px 0 color-mix(in srgb, var(--c) 25%, #fff);
  animation: panelIn .55s var(--ease-bounce);
}
.overlay.hidden .panel { animation: none; }
@keyframes panelIn { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.panel-mascot { width: 120px; margin: 0 auto -2px; }
.panel-mascot.jump { animation: jump .7s var(--ease-bounce) 3; }
@keyframes jump { 50% { translate: 0 -16px; rotate: 6deg; } }
.panel h2 { font-size: 34px; font-weight: 700; color: var(--c-d); margin-bottom: 8px; }
.panel-msg { margin: 6px 0 12px; font-size: 19px; color: var(--ink-soft); }
.panel-msg b { color: var(--ink); }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.howto li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--c-bg); border-radius: 18px; font-size: 17px; line-height: 1.35; }
.howto-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 14px; background: var(--c); color: #fff; }
.howto-ico .ico { width: 24px; height: 24px; }
.intro-extra:empty { display: none; }
.pick-label { margin: 14px 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.level-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lvl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; min-height: 64px;
  border: 3px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer;
  transition: transform .2s var(--ease-bounce), border-color .2s, background .2s;
}
.lvl-btn b { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--c-d); }
.lvl-btn > .ico { width: 24px; height: 24px; color: #94A3B8; }
.lvl-btn:hover:not(:disabled) { transform: translateY(-3px); }
.lvl-btn.on { border-color: var(--c); background: var(--c-bg); box-shadow: 0 4px 0 var(--c-l); }
.lvl-btn:disabled { cursor: not-allowed; background: #F1F5F9; }
.lvl-stars { display: flex; }
.lvl-stars .ico { width: 13px; height: 13px; color: #E2E8F0; stroke-width: 1; }
.lvl-stars .ico.on { color: var(--gold); }

.stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0; }
.star-slot .ico { width: 58px; height: 58px; color: #E2E8F0; stroke: #CBD5E1; stroke-width: 1; }
.star-slot.on { animation: starIn .55s var(--ease-bounce) backwards; }
.star-slot.on .ico { color: var(--gold); stroke: var(--gold-d); filter: drop-shadow(0 4px 0 #F59E0B55); }
.star-slot:nth-child(2) .ico { width: 70px; height: 70px; translate: 0 -8px; }
@keyframes starIn { from { scale: 0; rotate: -180deg; } }
.reward {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 99px;
  background: #E0F2FE; color: #075985; font-family: var(--font-display); font-size: 22px; font-weight: 700;
  animation: panelIn .5s var(--ease-bounce) .9s backwards;
}
.reward .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #0EA5E9; color: #fff; stroke-width: 0; }
.ribbon {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; margin-bottom: 4px; border-radius: 99px; rotate: -3deg;
  background: linear-gradient(90deg, #F59E0B, #EC4899); color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 700;
  box-shadow: 0 4px 0 #BE185D; animation: bump .6s var(--ease-bounce) 2;
}

/* ---------------- Efekty ---------------- */
.spark { position: absolute; width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%; animation: burst .8s ease-out forwards; }
.spark.star { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(180deg); opacity: 0; } }
.floater {
  position: absolute; translate: -50% 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; white-space: nowrap;
  color: var(--c-d); text-shadow: 0 3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 -3px 0 #fff, 0 0 12px #fff;
  animation: rise 1.1s ease-out forwards;
}
.floater.good { color: #047857; } .floater.bad { color: var(--danger); font-size: 24px; } .floater.combo { color: #7C3AED; font-size: 22px; }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1.15); } 100% { transform: translateY(-70px) scale(1); opacity: 0; } }
.banner {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 60; text-align: center; white-space: nowrap;
  padding: 10px 34px 14px; border-radius: 26px; border: 5px solid #fff; background: var(--c); color: #fff;
  font-family: var(--font-display); font-size: clamp(28px, 6vw, 44px); font-weight: 700; line-height: 1.1;
  box-shadow: 0 8px 0 var(--c-d), 0 20px 40px rgba(46,16,101,.2); text-shadow: 0 3px 0 rgba(0,0,0,.18);
  animation: bannerIn 1.7s var(--ease-out) forwards;
}
.banner small { display: block; font-size: 18px; font-weight: 600; opacity: .95; }
@keyframes bannerIn { 0% { scale: .3; opacity: 0; } 15% { scale: 1.08; opacity: 1; } 25%,75% { scale: 1; opacity: 1; } 100% { scale: .9; opacity: 0; translate: -50% -80%; } }
.confetti { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
.confetti.round { width: 12px; height: 12px; border-radius: 50%; }
@keyframes fall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.page-fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; }

.toasts { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 300; display: grid; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 99px; background: #fff;
  box-shadow: var(--clay), 0 6px 0 color-mix(in srgb, var(--c) 35%, #fff); animation: toastIn .5s var(--ease-bounce);
}
.toast.out { animation: toastOut .35s ease-in forwards; }
.toast small { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--c-d); font-weight: 800; line-height: 1.2; }
.toast b { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.toast-medal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c-l), var(--c)); color: #fff; border: 3px solid var(--gold); }
.toast-medal .ico { width: 28px; height: 28px; }
@keyframes toastIn { from { translate: 0 -120%; opacity: 0; } }
@keyframes toastOut { to { translate: 0 -120%; opacity: 0; } }

/* ---------------- Gra: Znajdź Kotki ---------------- */
.hide-field { position: absolute; inset: 0; transition: background .5s; }
.world-garden {
  background:
    radial-gradient(circle at 20% 30%, #BBF7D0 0 12%, transparent 13%),
    radial-gradient(circle at 75% 70%, #A7F3D0 0 15%, transparent 16%),
    radial-gradient(circle at 60% 15%, #D9F99D 0 9%, transparent 10%),
    linear-gradient(160deg, #ECFCCB, #BBF7D0 60%, #86EFAC);
}
.world-beach {
  background:
    radial-gradient(ellipse at 50% -10%, #E0F2FE 0 20%, transparent 21%),
    linear-gradient(180deg, #7DD3FC 0%, #BAE6FD 30%, #FEF3C7 31%, #FDE68A 100%);
}
.world-winter {
  background:
    radial-gradient(circle at 10% 20%, #fff 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle at 60% 70%, #fff 0 2px, transparent 3px) 0 0 / 60px 60px,
    linear-gradient(170deg, #E0F2FE, #F0F9FF 55%, #fff);
}
.world-space {
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2.5px) 0 0 / 50px 50px,
    radial-gradient(circle at 70% 60%, #FDE68A 0 1.5px, transparent 2.5px) 0 0 / 80px 80px,
    radial-gradient(circle at 80% 20%, #F0ABFC55 0 18%, transparent 19%),
    linear-gradient(160deg, #6D28D9, #7C3AED 50%, #A78BFA);
}
.world-space .item { filter: drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 2px #fff); }
.item {
  position: absolute; cursor: pointer; user-select: none; -webkit-user-select: none; line-height: 1; rotate: var(--r);
  transition: scale .2s var(--ease-bounce), filter .2s; animation: popIn .45s var(--ease-bounce) backwards;
  filter: drop-shadow(0 3px 2px rgba(46,16,101,.2));
}
@media (hover: hover) { .item:hover { scale: 1.25; } }
@keyframes popIn { from { scale: 0; opacity: 0; } }
.item.hinted { z-index: 20 !important; animation: hint .45s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #FACC15) drop-shadow(0 0 4px #fff); }
@keyframes hint { to { scale: 1.6; rotate: 0deg; } }
.item.found { animation: catFound .6s var(--ease-bounce) forwards; pointer-events: none; z-index: 30 !important; }
@keyframes catFound { 40% { scale: 2.1; rotate: 0deg; } 100% { scale: 0; rotate: 360deg; translate: 0 -40px; opacity: 0; } }
.item.leaving { animation: leave .3s ease-in forwards; pointer-events: none; }
@keyframes leave { to { scale: 0; opacity: 0; } }
.tools { position: absolute; right: 12px; bottom: 12px; z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.tool {
  position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  border: 4px solid #fff; background: var(--c); color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 var(--c-d), 0 10px 20px rgba(46,16,101,.2); transition: transform .2s var(--ease-bounce), filter .2s;
}
.tool .ico { width: 30px; height: 30px; }
.tool:hover:not(:disabled) { transform: translateY(-3px) rotate(-8deg); }
.tool:active:not(:disabled) { transform: translateY(3px); }
.tool:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.tool-n { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 3px solid #fff; font-family: var(--font-display); font-size: 15px; }
.tool-tag { position: absolute; bottom: -10px; padding: 0 8px; border-radius: 99px; background: #fff; color: var(--c-d); font-family: var(--font-display); font-size: 14px; line-height: 1.4; }

/* ---------------- Gra: Kocie Memo ---------------- */
.play-memo { background: radial-gradient(circle at 50% 0%, #fff 0 30%, transparent 70%), linear-gradient(160deg, #F5F3FF, #EDE9FE); }
.memo-board {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 12px;
  grid-template-columns: repeat(var(--cols, 4), var(--card, 100px));
}
.mcard {
  width: var(--card, 100px); height: calc(var(--card, 100px) * 1.2); padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 800px; animation: popIn .45s var(--ease-bounce) backwards; border-radius: 18px;
}
.mcard-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s var(--ease-bounce); }
.mcard.flipped .mcard-inner { transform: rotateY(180deg); }
.mcard-back, .mcard-face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; border: 4px solid #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 0 rgba(46,16,101,.14), 0 10px 18px rgba(124,58,237,.15);
}
.mcard-back { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #8B5CF6 0 12px, #A78BFA 12px 24px); color: #fff; }
.mcard-back .ico { width: 42%; height: 42%; opacity: .9; }
.mcard-face { background: #fff; transform: rotateY(180deg); font-size: calc(var(--card, 100px) * .52); line-height: 1; }
@media (hover: hover) { .mcard:not(.flipped):hover .mcard-inner { transform: translateY(-4px) rotate(-2deg); } }
.mcard.matched .mcard-face { background: #ECFDF5; border-color: #6EE7B7; animation: matchPop .5s var(--ease-bounce); }
.mcard.matched { cursor: default; }
@keyframes matchPop { 50% { scale: 1.12; } }

/* ---------------- Gra: Łap Rybki ---------------- */
.catch-scene { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab;
  background: linear-gradient(180deg, #BAE6FD 0%, #E0F2FE 60%, #F0F9FF 100%); }
.catch-sun { position: absolute; top: 18px; right: 24px; width: 80px; height: 80px; border-radius: 50%; background: #FDE047; box-shadow: 0 0 0 12px #FEF08A88, 0 0 0 26px #FEF9C344; animation: idle 4s ease-in-out infinite; }
.catch-hill { position: absolute; bottom: -60px; border-radius: 50%; }
.catch-hill.h1 { left: -10%; width: 70%; height: 160px; background: #86EFAC; }
.catch-hill.h2 { right: -12%; width: 75%; height: 180px; background: #4ADE80; }
.catch-items { position: absolute; inset: 0; }
.drop { position: absolute; left: 0; top: 0; line-height: 1; will-change: transform; filter: drop-shadow(0 4px 3px rgba(46,16,101,.2)); }
.drop.leaving { opacity: 0; transition: opacity .25s; }
.catcher { position: absolute; left: 0; bottom: 8px; width: clamp(120px, 22%, 170px); z-index: 5; will-change: transform; }
.catcher-cat { width: 74%; margin: 0 auto -26%; position: relative; z-index: 1; }
.catcher-cat .mascot { filter: drop-shadow(0 4px 0 rgba(46,16,101,.12)); }
.basket { position: relative; z-index: 2; height: 46px; box-shadow: 0 6px 0 rgba(46,16,101,.15); }
.catcher.wet .catcher-cat { filter: drop-shadow(0 0 10px #38BDF8) saturate(.6); }
.catcher.double .basket { box-shadow: 0 0 0 4px #FDE047, 0 0 24px #FACC15; animation: pulse .5s ease-in-out infinite; }

/* ---------------- Gra: Kocie Echo ---------------- */
.play-echo { background: radial-gradient(circle at 50% 110%, #FED7AA 0 40%, transparent 41%), linear-gradient(170deg, #FFF7ED, #FFEDD5); }
.echo-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.echo-status {
  min-height: 52px; padding: 6px 26px; border-radius: 99px; background: #fff; box-shadow: var(--clay);
  font-family: var(--font-display); font-size: clamp(22px, 4vw, 30px); font-weight: 700; color: var(--c-d);
  transition: background .2s, color .2s; animation: bump .4s var(--ease-bounce);
}
.echo-status.listen { color: #7C3AED; } .echo-status.turn { background: var(--c); color: #fff; }
.echo-status.ok { background: #10B981; color: #fff; } .echo-status.bad { background: #FEE2E2; color: var(--danger); }
.echo-pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: min(92cqw, calc(100cqh - 100px), 540px); }
@container (min-aspect-ratio: 8/5) { .echo-pads { grid-template-columns: repeat(4, 1fr); width: min(92cqw, calc((100cqh - 90px) * 4 + 48px), 900px); } }
.pad {
  position: relative; aspect-ratio: 1; padding: 6%; border-radius: 30px; border: 5px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--c-l), color-mix(in srgb, var(--c) 45%, var(--c-l)));
  box-shadow: 0 8px 0 var(--c-d), 0 14px 26px rgba(46,16,101,.15);
  transition: transform .12s ease-out, box-shadow .12s, filter .12s;
}
.pad.yellow { --c: #EAB308; --c-l: #FEF08A; --c-d: #A16207; }
.pad-cat { display: block; width: 78%; margin: 0 auto; pointer-events: none; }
.pad-key { position: absolute; top: 8px; left: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.75); color: var(--c-d); font-family: var(--font-display); font-size: 17px; }
.pad:active, .pad.lit { transform: translateY(6px) scale(1.03); box-shadow: 0 2px 0 var(--c-d), 0 0 0 8px color-mix(in srgb, var(--c-l) 70%, transparent), 0 0 40px var(--c); filter: brightness(1.12) saturate(1.2); }
.echo-wrap.listening .pad { cursor: default; }
.m-sing { transform-box: fill-box; transform-origin: center; animation: sing .25s ease-in-out infinite alternate; }
@keyframes sing { to { transform: scaleY(1.35); } }

/* ---------------- Szafa ---------------- */
.wardrobe { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.preview-card, .shop-card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--clay); padding: 20px; }
.preview-card { position: sticky; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: radial-gradient(circle at 50% 35%, #FDF4FF 0 45%, #fff 46%); }
.buy-box { text-align: center; min-height: 72px; display: grid; gap: 8px; justify-items: center; }
.buy-hint { margin: 0; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.buy-hint .ico { color: var(--gold); }
.buy-name { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.buy-need { margin: 0; font-size: 15px; color: var(--ink-soft); max-width: 260px; }
#buyBtn { --c: #059669; --c-d: #065F46; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 18px; border-radius: 99px; cursor: pointer;
  border: 3px solid var(--line); background: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink-soft);
  transition: transform .2s var(--ease-bounce), background .2s, color .2s;
}
.tab:hover { transform: translateY(-2px); }
.tab.on { background: #8B5CF6; border-color: #8B5CF6; color: #fff; box-shadow: 0 4px 0 #6D28D9; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.shop-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; cursor: pointer;
  border: 3px solid var(--line); border-radius: 22px; background: #fff; transition: transform .2s var(--ease-bounce), border-color .2s, background .2s;
}
.shop-item:hover { transform: translateY(-4px); }
.shop-item.on { border-color: #10B981; background: #ECFDF5; }
.shop-item.trying { border-color: #8B5CF6; background: #F5F3FF; box-shadow: 0 4px 0 #C4B5FD; }
.shop-item.locked .thumb, .shop-item.locked .swatch { opacity: .85; }
.swatch { width: 70px; height: 70px; border-radius: 50%; background: var(--sw); border: 5px solid var(--sd); box-shadow: inset 0 -6px 0 rgba(0,0,0,.08); margin: 6px 0; }
.swatch.rainbow { background: conic-gradient(#FCA5A5, #FDE68A, #86EFAC, #93C5FD, #C4B5FD, #FCA5A5); }
.thumb { display: block; width: 84px; aspect-ratio: 200 / 230; }
.thumb .mascot { height: 100%; }
.shop-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; text-align: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: 99px; background: #F1F5F9; color: var(--ink-soft); font-size: 15px; font-weight: 800; }
.tag .ico { width: 18px; height: 18px; }
.tag.on { background: #10B981; color: #fff; }
.tag.price { background: #E0F2FE; color: #075985; }
.tag.price .ico { color: #0284C7; stroke-width: 0; }

/* ---------------- Odznaki ---------------- */
.badges-progress { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-display); font-size: 22px; }
.progress-track { flex: 1; height: 18px; border-radius: 99px; background: #fff; box-shadow: inset 0 2px 4px rgba(46,16,101,.12); overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F472B6, #8B5CF6, #38BDF8); }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px;
  background: var(--card); border-radius: var(--r-l); box-shadow: var(--clay); animation: cardIn .5s var(--ease-bounce) backwards;
}
.badge b { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.badge small { font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.medal { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: #fff; margin-bottom: 4px;
  background: radial-gradient(circle at 35% 30%, var(--c-l), var(--c)); border: 5px solid var(--gold); box-shadow: 0 5px 0 var(--gold-d); }
.medal .ico { width: 38px; height: 38px; }
.badge.got .medal { animation: wiggle 3s ease-in-out infinite; }
.badge.locked { background: #F8FAFC; }
.badge.locked .medal { background: #E2E8F0; border-color: #CBD5E1; box-shadow: 0 5px 0 #94A3B8; color: #94A3B8; }
.badge.locked b { color: #64748B; }

/* ---------------- Okno imienia ---------------- */
dialog { border: 0; padding: 0; border-radius: var(--r-xl); box-shadow: var(--clay), 0 30px 60px rgba(46,16,101,.25); width: min(92vw, 400px); color: var(--ink); }
dialog::backdrop { background: rgba(46,16,101,.35); backdrop-filter: blur(4px); }
dialog[open] { animation: panelIn .5s var(--ease-bounce); }
.name-form { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; }
.name-mascot { width: 120px; }
.name-form h2 { font-size: 30px; font-weight: 700; color: #BE185D; }
.name-form input {
  width: 100%; padding: 12px 18px; border-radius: 18px; border: 4px solid #E9D5FF; background: #FAF5FF; color: var(--ink);
  font-family: var(--font-display); font-size: 26px; font-weight: 600; text-align: center; outline: none; transition: border-color .2s, box-shadow .2s;
}
.name-form input:focus { border-color: #EC4899; box-shadow: 0 0 0 5px #FBCFE8; }
.name-form input::placeholder { color: #A78BFA; }

/* ---------------- Responsywność ---------------- */
@media (max-width: 720px) {
  .wardrobe { grid-template-columns: 1fr; }
  .preview-card { position: static; }
  .mascot-stage.big { width: 200px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .hero { flex-direction: column; text-align: center; gap: 4px; }
  .mascot-stage { width: 150px; }
  .bubble::before { left: 50%; top: -12px; transform: translateX(-50%) rotate(45deg); }
  .hero-stats { justify-content: center; }
  .coins { font-size: 19px; padding-right: 12px; min-height: 44px; }
  .coins .ico { width: 30px; height: 30px; }
  .icon-btn { width: 46px; height: 46px; border-radius: 16px; }
  .pill { min-width: 0; padding: 4px 12px 4px 4px; gap: 6px; border-radius: 18px; }
  .pill-ico { width: 32px; height: 32px; border-radius: 12px; }
  .pill-ico .ico { width: 19px; height: 19px; }
  .pill-txt small { font-size: 11px; }
  .pill-txt b { font-size: 20px; }
  .ico.heart { width: 18px; height: 18px; }
  .hud { gap: 6px; }
  #screen-game.active { height: calc(100dvh - 28px); min-height: 480px; gap: 8px; }
  .panel { padding: 16px; }
  .panel h2 { font-size: 28px; }
  .howto li { font-size: 15px; }
  .btn.big { font-size: 22px; min-height: 58px; padding: 8px 26px; }
  .level-pick { grid-template-columns: repeat(3, 1fr); }
  .tool { width: 54px; height: 54px; }
  .star-slot .ico { width: 48px; height: 48px; }
  .star-slot:nth-child(2) .ico { width: 58px; height: 58px; }
}
/* Wąskie telefony (360 px i mniej): logo w osobnym wierszu, 2 kolumny w Szafie */
@media (max-width: 440px) {
  #screen-home .topbar { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  #screen-home .logo { width: 100%; justify-content: center; font-size: clamp(26px, 9vw, 36px); }
  #screen-home .topbar-right { margin-left: 0; }
  .shop-card { padding: 14px; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .tab { justify-content: center; font-size: 16px; padding: 6px 10px; }
  .hud { gap: 5px; }
  .pill { padding-right: 10px; }
}

/* Okienko „Jak grać" na niskich ekranach: mniejszy kotek, przycisk zawsze widoczny */
.panel-actions { position: sticky; bottom: 0; margin-top: 4px; margin-bottom: -22px; padding: 12px 0 22px;
  background: linear-gradient(to bottom, transparent, var(--card) 14px); z-index: 1; }
@media (max-height: 820px) {
  .panel-mascot { width: 86px; }
  .panel h2 { font-size: 28px; }
}
@media (max-height: 680px) {
  .panel-mascot { width: 64px; }
  .howto li { font-size: 15px; padding: 6px 10px 6px 6px; }
  .howto-ico { width: 36px; height: 36px; }
}
@media (max-width: 600px) {
  .panel-actions { margin-bottom: -16px; padding-bottom: 16px; }
}

/* Telefon poziomo: pasek i wyniki w jednym rzędzie, plansza na resztę ekranu */
@media (max-height: 560px) and (orientation: landscape) {
  #app { padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
  #screen-game.active {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0; height: calc(100dvh - 12px); gap: 6px 10px;
  }
  #screen-game .topbar { min-height: 0; gap: 8px; }
  #screen-game .game-title, #screen-game .coins { display: none; }
  #screen-game .hud { flex-wrap: nowrap; justify-content: flex-end; align-self: center; }
  #screen-game .bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  #screen-game .stage { grid-column: 1 / -1; grid-row: 3; min-height: 0; border-width: 4px; }
  #screen-game .icon-btn { width: 44px; height: 44px; border-radius: 14px; }
  #screen-game .pill { min-width: 0; padding: 3px 10px 3px 3px; gap: 6px; border-radius: 16px; }
  #screen-game .pill-ico { width: 30px; height: 30px; border-radius: 11px; }
  #screen-game .pill-ico .ico { width: 18px; height: 18px; }
  #screen-game .pill-txt small { font-size: 10px; letter-spacing: .3px; }
  #screen-game .pill-txt b { font-size: 18px; }
  .panel { padding: 14px 18px; }
  .panel-mascot { display: none; }
  .panel h2 { font-size: 24px; margin-bottom: 4px; }
  .howto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sky::before, .cloud { animation: none !important; }
}