:root {
  --plum: #2b0a3d; --mag: #b0135a; --orange: #ff7a1a; --yellow: #FFC93C; --pink: #FF4F9A; --teal: #14C8B8;
  --green: #5BD15B; --purple: #9B5CFF; --paper: #FFF6E5; --paper2: #FBE3C0; --dark: #2a0a2e; --ink: #fff; --muted: #ffe3f0;
  --display: "Titan One", "Baloo 2", system-ui, sans-serif;
  --font: "Baloo 2", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: linear-gradient(180deg, #2b0a3d 0%, #4d0c52 40%, #9c1259 78%, #e2542a 100%);
  background-color: var(--plum); color: var(--ink); font-family: var(--font);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
button { font-family: inherit; touch-action: manipulation; cursor: pointer; }

/* ---------------------------------------------------------------- tło: słońce, lampki, papel picado */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sun { position: absolute; left: 50%; bottom: -38vh; width: 120vmax; height: 70vh; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,201,60,.55), rgba(255,122,26,.25) 55%, transparent); }
.lights { position: absolute; inset: 0; }
.lights i { position: absolute; width: 9px; height: 12px; border-radius: 50% 50% 45% 45%; background: var(--c); box-shadow: 0 0 12px 3px var(--c); opacity: .85; animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle { 50% { opacity: .35; } }
.picado { position: absolute; left: -2%; right: -2%; top: 0; height: 58px; display: flex; justify-content: space-between; }
.picado::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: rgba(255,255,255,.55); }
.picado span {
  position: relative; flex: none; width: 40px; height: 50px; margin-top: 5px; background: var(--c); opacity: .92; transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 87.5% 100%, 75% 82%, 62.5% 100%, 50% 82%, 37.5% 100%, 25% 82%, 12.5% 100%, 0 82%);
  -webkit-mask: radial-gradient(circle at 50% 40%, transparent 6px, #000 6.5px), radial-gradient(circle at 25% 64%, transparent 3px, #000 3.5px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: flutter 3s ease-in-out infinite alternate; animation-delay: var(--d);
}
@keyframes flutter { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ---------------------------------------------------------------- układ */
.app {
  position: relative; z-index: 1; max-width: 480px; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.top { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; height: 52px; flex: none; margin-top: 44px; }
.logo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.logo-pin { width: 38px; height: 38px; flex: none; animation: swing 1.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
.logo-pin svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.logo-txt { display: flex; flex-direction: column; font: 400 22px/1 var(--display); letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0,0,0,.3); white-space: nowrap; }
.logo-txt small { font: 700 10px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); text-shadow: none; }
/* Nazwa języka bywa dłuższa niż „Spanish” (hiszpański, Spanisch…) — ciaśniejsze odstępy, żeby napis nie wchodził pod wynik. */
html:not(:lang(en)) .logo-txt small { letter-spacing: .08em; }
.score-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 92px; height: 44px; padding: 0 14px;
  border-radius: 16px; background: var(--yellow); color: var(--dark); box-shadow: 0 4px 0 #c28a00, 0 8px 18px rgba(0,0,0,.25);
}
.score-label { font: 800 9px/1 var(--font); letter-spacing: .16em; opacity: .7; }
.score-val { font: 400 22px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.score-box.bump { animation: bump .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 40% { transform: scale(1.18) rotate(-3deg); } }
.sound { width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 20px; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }
.stage { position: relative; flex: 1; min-height: 0; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }

/* ---------------------------------------------------------------- ekran powitalny */
.hero { display: flex; flex-direction: column; align-items: center; margin-top: -8vh; }
.hero-pin { width: 190px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: swing 2.2s ease-in-out infinite alternate; }
.hero-pin::before { content: ''; width: 4px; height: 60px; margin-bottom: -48px; background: repeating-linear-gradient(180deg, #e6c48a 0 6px, #a67c3d 6px 9px); }
.hero-pin svg { width: 190px; height: 190px; filter: drop-shadow(0 10px 0 rgba(0,0,0,.2)); }
.hero-title { margin: 6px 0 0; font: 400 clamp(46px, 15vw, 64px)/1 var(--display); color: var(--yellow); -webkit-text-stroke: 8px var(--pink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.25); }
.hero-sub { margin: 10px 0 0; text-align: center; font: 800 17px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }

/* ---------------------------------------------------------------- poziomy */
.big-title { margin: 0; font: 400 34px/1 var(--display); color: var(--yellow); -webkit-text-stroke: 6px var(--pink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.lead { margin: 10px 0 16px; text-align: center; color: var(--muted); font: 600 16px/1.35 var(--font); }
.lead b { color: #fff; }
.levels { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 400px; }
.lv[data-level="B2"] .lv-code { color: var(--yellow); }
/* Gdy nie mieści się w pionie — przewijanie zamiast ucięcia; gdy się mieści — wyśrodkowane. */
#s-level { justify-content: flex-start; overflow-y: auto; padding: 4px 0 10px; }
#s-level > :first-child { margin-top: auto; }
#s-level > :last-child { margin-bottom: auto; }
.lv {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 8px 12px; border: 0; border-radius: 20px; color: #fff; text-align: left;
  background: linear-gradient(160deg, var(--c), var(--cd)); box-shadow: 0 6px 0 var(--cd), 0 12px 24px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lv:active, .lv.picked { transform: translateY(5px); box-shadow: 0 1px 0 var(--cd), 0 4px 10px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.3); }
.lv-code { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(0,0,0,.2); font: 400 24px var(--display); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.lv-txt { display: flex; flex-direction: column; min-width: 0; }
.lv-name { font: 400 19px/1.05 var(--display); }
.lv-pl { font: 800 13px/1.2 var(--font); opacity: .95; }
.lv-desc { font: 600 12.5px/1.25 var(--font); opacity: .85; }
.lv.last::after {
  content: attr(data-last); /* tekst z pliku języka (ui.lastPlayed), ustawia game.js */ position: absolute; right: 12px; top: -9px; padding: 2px 8px; border-radius: 99px;
  font: 800 10px var(--font); letter-spacing: .1em; background: var(--yellow); color: var(--dark); box-shadow: 0 2px 0 #c28a00;
}
.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.rules span { padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.14); font: 700 12.5px var(--font); color: var(--muted); }

/* ---------------------------------------------------------------- rozgrywka */
#s-play { justify-content: flex-start; gap: 8px; }
.hud { display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; flex: none; }
.clock {
  --p: 1; position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--tc, var(--teal)) calc(var(--p) * 360deg), rgba(255,255,255,.18) 0);
}
.clock::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #3a0b45; }
.clock span { position: relative; font: 400 20px var(--display); font-variant-numeric: tabular-nums; }
.clock.warn { --tc: var(--yellow); }
.clock.danger { --tc: #ff4d6a; animation: pulse .5s ease-in-out infinite alternate; }
.clock.hit { animation: hitClock .4s ease; }
@keyframes pulse { to { transform: scale(1.1); } }
@keyframes hitClock { 30% { transform: scale(.85) rotate(-8deg); } }
.timebar { flex: 1; height: 16px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.timebar i { display: block; height: 100%; width: 100%; border-radius: 99px; transform-origin: left center; background: linear-gradient(90deg, #14C8B8, #5BD15B); }
.timebar.warn i { background: linear-gradient(90deg, #FFC93C, #FF8A1F); }
.timebar.danger i { background: linear-gradient(90deg, #FF8A1F, #ff3d6a); }
.streak {
  width: 78px; height: 46px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); opacity: .6; transition: opacity .2s, background .2s;
}
.streak-x { font: 400 21px/1 var(--display); }
.streak-label { font: 800 9px/1 var(--font); letter-spacing: .12em; opacity: .85; margin-top: 3px; }
.streak.on { opacity: 1; background: linear-gradient(160deg, #ff8a1f, #ff3d7f); box-shadow: 0 0 18px rgba(255,90,90,.55); }
.streak.pop { animation: bump .4s cubic-bezier(.3,1.8,.5,1); }

.prompt {
  display: flex; flex-direction: column; align-items: center; width: 100%; flex: none; padding: 8px 12px 10px; border-radius: 20px;
  background: radial-gradient(circle at 30% 20%, #fffdf7, var(--paper) 55%, var(--paper2)); color: var(--dark);
  box-shadow: 0 6px 0 #e8a3c4, 0 14px 30px rgba(0,0,0,.3);
}
.prompt.pop { animation: promptPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes promptPop { from { transform: scale(.9); } }
.prompt-label { font: 800 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #a3306e; }
.prompt-main { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-height: 44px; }
.prompt-emoji { font-size: 34px; line-height: 1; flex: none; }
.prompt-word { font: 400 30px/1.05 var(--display); text-align: center; overflow-wrap: anywhere; }

.pinatas { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; gap: 6px; align-items: flex-start; }
.pin { --rope: 20px; --pw: 100px; position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; display: flex; justify-content: center; }
.pin:disabled { cursor: default; }
.drop { display: block; width: 100%; }
.pin.in .drop { animation: dropIn .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: var(--dd, 0s); }
@keyframes dropIn { from { transform: translateY(-120%); } }
.hang { display: flex; flex-direction: column; align-items: center; width: 100%; transform-origin: 50% 0; animation: swing var(--sw, 2s) ease-in-out infinite alternate; animation-delay: var(--sd, 0s); }
@keyframes swing { from { transform: rotate(calc(var(--amp, 7deg) * -1)); } to { transform: rotate(var(--amp, 7deg)); } }
.rope { width: 3px; height: calc(var(--rope) + var(--pw) * .3); margin-bottom: calc(var(--pw) * -.3); background: repeating-linear-gradient(180deg, #e6c48a 0 6px, #a67c3d 6px 9px); }
.body { display: block; width: var(--pw); height: var(--pw); transition: transform .15s ease; }
.body svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.2)); }
.tag {
  position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; min-width: 72%; min-height: 40px; margin-top: -4px; padding: 5px 8px;
  border-radius: 12px; background: var(--paper); color: var(--dark); box-shadow: 0 4px 0 rgba(0,0,0,.2); transition: background .2s, transform .2s;
}
.tag::before { content: ''; position: absolute; top: -9px; left: 50%; width: 2px; height: 10px; background: #a67c3d; }
.tag-t { font: 800 var(--tfs, 18px)/1.1 var(--font); text-align: center; overflow-wrap: anywhere; }
@media (hover: hover) { .pin:not(:disabled):hover .body { transform: scale(1.06) rotate(-3deg); } .pin:not(:disabled):hover .tag { transform: scale(1.05); } }
.pin:not(:disabled):active .body { transform: scale(.94); }
.pin.burst .body { animation: burst .5s ease-out forwards; }
@keyframes burst { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: scale(1.7) rotate(-10deg); opacity: 0; } }
.pin.burst .rope { opacity: 0; transition: opacity .3s; }
.pin.burst .tag { background: var(--green); color: #fff; transform: scale(1.1); }
.pin.fade { opacity: .35; transition: opacity .25s; }
.pin.bad .hang { animation: bonk .5s ease; }
@keyframes bonk { 20% { transform: rotate(-18deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } }
.pin.bad .tag { background: #ff4d6a; color: #fff; }
.pin.reveal { opacity: 1; }
.pin.reveal .tag { background: var(--green); color: #fff; animation: glow .6s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 4px rgba(91,209,91,.5), 0 0 22px rgba(91,209,91,.8); } }
.pin.gone .drop { opacity: 0; transition: opacity .25s; }
/* B1/B2: rzędy — mała piñata po lewej, szeroka karteczka ze zdaniem po prawej */
.pinatas.rows { flex-direction: column; gap: 8px; align-items: stretch; }
.pinatas.rows .pin { flex: 1 1 0; height: auto; min-height: 0; width: 100%; }
.pinatas.rows .drop { height: 100%; }
.pinatas.rows .hang { flex-direction: row; align-items: center; height: 100%; transform-origin: 28px 50%; }
.pinatas.rows .rope { display: none; }
.pinatas.rows .body { flex: none; }
.pinatas.rows .tag { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 50px; margin: 0 0 0 -6px; padding: 6px 12px; justify-content: flex-start; }
.pinatas.rows .tag::before { top: 50%; left: -8px; width: 10px; height: 2px; }
.pinatas.rows .tag-t { text-align: left; }

.controls { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 100%; }
.bubble { min-height: 22px; max-width: 100%; padding: 0 12px; border-radius: 99px; font: 700 14px/22px var(--font); color: #fff; text-align: center; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble.on { opacity: 1; background: rgba(0,0,0,.25); }
.bubble.bad { background: rgba(255,77,106,.35); }
.mic {
  position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; color: #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4fe6d8, var(--teal) 55%, #0a8a80); box-shadow: 0 5px 0 #07645d, 0 10px 22px rgba(0,0,0,.35);
}
.mic:active { transform: translateY(3px); box-shadow: 0 2px 0 #07645d; }
.mic:disabled { filter: grayscale(.8) brightness(.8); }
.mic .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(79,230,216,.8); opacity: 0; }
.mic.listening { background: radial-gradient(circle at 35% 30%, #ff8fb8, var(--pink) 55%, #b0135a); box-shadow: 0 5px 0 #7a0b3d, 0 0 30px rgba(255,79,154,.7); }
.mic.listening .ring { border-color: rgba(255,143,184,.8); animation: ringOut 1.2s ease-out infinite; }
.mic.listening .r2 { animation-delay: .6s; }
@keyframes ringOut { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
/* Jedna linia we wszystkich językach — zawinięty napis zmieniałby wysokość pola z piñatami przy każdym zadaniu. */
.mic-label { font: 800 11px var(--font); letter-spacing: .14em; color: var(--muted); text-align: center; white-space: nowrap; }
.mic-label.live { color: var(--yellow); }
.controls.nomic .mic, .controls.nomic .auto-pill, .controls.nomic .mic-spacer { display: none; }
.mic-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mic-spacer { width: 64px; }
.auto-pill {
  display: flex; align-items: center; gap: 6px; width: 64px; height: 30px; padding: 0 8px; border: 0; border-radius: 99px;
  background: rgba(255,255,255,.16); color: var(--muted); font: 800 11px var(--font); letter-spacing: .08em;
}
.auto-pill i { position: relative; width: 22px; height: 12px; border-radius: 99px; background: rgba(255,255,255,.3); flex: none; transition: background .2s; }
.auto-pill i::after { content: ''; position: absolute; left: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .2s; }
.auto-pill.on { background: rgba(20,200,184,.25); color: #fff; }
.auto-pill.on i { background: var(--teal); }
.auto-pill.on i::after { transform: translateX(10px); }
.auto-lv { display: flex; align-items: center; gap: 10px; max-width: 400px; margin-top: 14px; padding: 8px 14px; border-radius: 16px; background: rgba(255,255,255,.12); font: 600 13.5px/1.3 var(--font); color: var(--muted); cursor: pointer; }
.auto-lv b { color: #fff; }
.auto-lv input { width: 22px; height: 22px; flex: none; accent-color: var(--teal); }
.mic.muted { background: radial-gradient(circle at 35% 30%, #b9a7c4, #7d6a8a 55%, #4f3f5c); box-shadow: 0 5px 0 #33283d, 0 10px 22px rgba(0,0,0,.35); }
.mic.muted::after { content: ''; position: absolute; width: 46px; height: 4px; border-radius: 2px; background: #fff; transform: rotate(-45deg); box-shadow: 0 0 0 2px #4f3f5c; }

.praise, .countdown, .banner { position: absolute; left: 0; right: 0; top: 52%; pointer-events: none; text-align: center; transform: translateY(-50%); }
.praise { z-index: 3; opacity: 0; }
.praise.go { animation: praise 1.05s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes praise { 0% { opacity: 0; transform: translateY(-50%) scale(.3) rotate(-8deg); } 18% { opacity: 1; transform: translateY(-50%) scale(1.12) rotate(3deg); } 30% { transform: translateY(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80%) scale(1); } }
.praise .p-big, .countdown b, .banner b {
  display: block; font: 400 clamp(36px, 12vw, 54px)/1 var(--display); color: #fff; -webkit-text-stroke: 8px var(--pc, #e11d74); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.25);
}
.praise .p-pl { display: block; margin-top: 2px; font: 800 15px var(--font); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.praise .p-sub { display: inline-block; max-width: 92%; margin-top: 6px; padding: 3px 12px; border-radius: 99px; background: var(--dark); color: var(--yellow); font: 800 16px/1.3 var(--font); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.countdown { z-index: 4; }
.countdown b { font-size: clamp(90px, 32vw, 140px); -webkit-text-stroke-width: 10px; --pc: #9c1259; animation: cd .8s cubic-bezier(.2,1.6,.4,1) both; }
.countdown b.go-word { font-size: clamp(46px, 16vw, 76px); --pc: #e11d74; }
@keyframes cd { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.banner { z-index: 4; opacity: 0; }
.banner.go { animation: banner 1.6s ease both; }
.banner span { display: inline-block; margin-top: 8px; padding: 3px 14px; border-radius: 99px; background: var(--yellow); color: var(--dark); font: 800 18px var(--font); }
@keyframes banner { 0% { opacity: 0; transform: translateY(-50%) scale(.4); } 15% { opacity: 1; transform: translateY(-50%) scale(1.1); } 25% { transform: translateY(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.floats { position: fixed; inset: 0; pointer-events: none; z-index: 31; }
.float {
  position: absolute; transform: translate(-50%, -50%); font: 400 26px var(--display); color: var(--yellow); white-space: nowrap;
  -webkit-text-stroke: 5px var(--dark); paint-order: stroke fill; animation: floatPts 1s ease-out both;
}
.float.bad { color: #ff6b85; }
@keyframes floatPts { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }

/* ---------------------------------------------------------------- finał */
#s-final { gap: 10px; text-align: center; overflow: hidden; }
.final-burst {
  position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,201,60,.16) 0 10deg, transparent 10deg 20deg);
  animation: spin 30s linear infinite; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%);
}
@keyframes spin { to { transform: rotate(360deg); } }
.final-kicker { position: relative; padding: 5px 14px; border-radius: 99px; background: rgba(255,255,255,.16); font: 800 14px var(--font); letter-spacing: .12em; }
.final-title { position: relative; max-width: 100%; font: 400 clamp(34px, 11vw, 52px)/1.02 var(--display); color: #fff; -webkit-text-stroke: 8px var(--pink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.25); animation: titleIn .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes titleIn { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
.final-sub { position: relative; margin-top: -4px; font: 800 16px var(--font); color: var(--yellow); }
.final-score-box { position: relative; display: flex; flex-direction: column; padding: 10px 36px 8px; border-radius: 24px; background: var(--paper); color: var(--dark); box-shadow: 0 7px 0 #e8a3c4, 0 18px 40px rgba(0,0,0,.35); }
.final-score-label { font: 800 12px var(--font); letter-spacing: .16em; color: #a3306e; }
.final-score { font: 400 58px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.final-stars { position: relative; font-size: 38px; letter-spacing: 4px; }
.final-stars span { display: inline-block; color: rgba(255,255,255,.22); animation: star .5s cubic-bezier(.3,1.8,.5,1) both; }
.final-stars span.on { color: var(--yellow); text-shadow: 0 0 18px rgba(255,201,60,.8); }
@keyframes star { from { transform: scale(0) rotate(-90deg); } }
.final-stats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.final-stats span { padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.16); font: 800 15px var(--font); }

/* ---------------------------------------------------------------- pauza */
.pause { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(43,10,61,.84); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pause-card { text-align: center; padding: 24px; }
.pause-title { font: 400 48px var(--display); color: var(--yellow); text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.pause-card p { color: var(--muted); font: 600 17px var(--font); }
.btn { min-height: 52px; padding: 0 28px; border: 0; border-radius: 99px; background: var(--yellow); color: var(--dark); font: 400 22px var(--display); box-shadow: 0 5px 0 #c28a00; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c28a00; }

/* ---------------------------------------------------------------- małe i niskie ekrany */
@media (max-height: 680px) {
  .top { margin-top: 34px; height: 46px; }
  .picado span { height: 34px; width: 30px; }
  .hud { height: 40px; }
  .clock, .streak { height: 40px; }
  .clock { width: 40px; }
  .prompt { padding: 6px 12px 8px; }
  .prompt-emoji { font-size: 28px; }
  .prompt-word { font-size: 26px; }
  .mic { width: 56px; height: 56px; }
  .lv { min-height: 54px; padding: 6px 12px; }
  .lv-desc, .rules { display: none; }
  .lead { font-size: 14.5px; }
  .auto-lv { margin-top: 10px; }
  .lv-code { width: 42px; height: 42px; font-size: 21px; }
  .big-title { font-size: 28px; }
}
@media (max-width: 350px) {
  .logo-txt { font-size: 19px; }
  .score-box { min-width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .hang, .hero-pin, .logo-pin, .picado span, .lights i, .final-burst, .clock.danger { animation: none !important; }
  .pin.in .drop { animation-duration: .01s !important; }
}