/* Baloo 2 (SIL Open Font License), self-hosted: latin-ext covers Polish letters */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/baloo2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/baloo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  --sky1: #bfe9ff;
  --sky2: #ffe3f1;
  --ink: #3b2a5a;
  --muted: #6f5f8c;
  --card: #ffffff;
  --key: #ffffff;
  --key-edge: #cdbdea;
  --vowel: #ffe4ef;
  --soft: #f3edff;
  --good: #13b886;
  --good-edge: #0c8a63;
  --gold: #f3c623;
  --c: #ff5d8f;
  --font: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', system-ui, sans-serif;
  --emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  --key-h: clamp(32px, 5.4vh, 52px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, #d9f2ff 0%, var(--sky1) 45%, #e9e4ff 75%, var(--sky2) 100%) fixed;
  background-color: var(--sky1);
  overflow: hidden;
  overscroll-behavior: none;             /* no pull-to-refresh / bounce */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;           /* no long-press menus on iOS */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;            /* no double-tap zoom, no click delay */
}
button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #3a86ff; outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- floating sky ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky span { position: absolute; font-family: var(--emoji); opacity: .75; }
.cloud { animation: drift linear infinite; }
.c1 { top: 8%;  font-size: 90px;  animation-duration: 70s; animation-delay: -10s; }
.c2 { top: 30%; font-size: 60px;  animation-duration: 95s; animation-delay: -60s; opacity: .5 !important; }
.c3 { top: 55%; font-size: 110px; animation-duration: 120s; animation-delay: -30s; opacity: .45 !important; }
.c4 { top: 18%; font-size: 50px;  animation-duration: 80s; animation-delay: -45s; }
.balloon { bottom: -120px; font-size: 56px; animation: rise linear infinite; }
.b1 { left: 6%;  animation-duration: 26s; animation-delay: -4s; }
.b2 { left: 88%; animation-duration: 32s; animation-delay: -18s; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@keyframes rise {
  0% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(20px, -60vh) rotate(6deg); }
  100% { transform: translate(-10px, -125vh) rotate(-6deg); }
}

/* ---------- layout ---------- */
#app {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "stage" "pad";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
header { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; }
#stage { grid-area: stage; container: stage / size; min-height: 0; display: grid; place-items: center; padding: 6px 14px; }
#pad {
  grid-area: pad; container-type: inline-size; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 10px 12px;
}
body[data-input="none"] #pad { padding: 0; }
/* Short landscape screens (phones on their side, small laptop windows): card left, buttons right */
@media (orientation: landscape) and (max-height: 560px) {
  #app {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "stage pad";
  }
  #pad { justify-content: center; overflow-y: auto; padding-bottom: 8px; }
  header { padding-top: 4px; }
}

/* ---------- header ---------- */
.logo { font-weight: 800; font-size: 30px; line-height: 1; white-space: nowrap; }
.logo span:nth-child(1) { color: #ff5d8f; } .logo span:nth-child(2) { color: #ff8c2b; }
.logo span:nth-child(3) { color: #e0a800; } .logo span:nth-child(4) { color: #13b886; }
.logo span:nth-child(5) { color: #3a86ff; } .logo span:nth-child(6) { color: #7b61ff; }
.logo span:nth-child(7) { color: #c04fd8; } .logo span:nth-child(8) { color: #ff5d8f; }
.logo span:nth-child(9) { color: #20b2aa; }
.tabs {
  display: flex; gap: 4px; flex: 0 1 auto; margin: 0 auto; min-width: 0;
  padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 6px 16px 4px; min-height: 46px; min-width: 48px; cursor: pointer;
  font-size: 20px; font-weight: 700; background: transparent; color: var(--muted);
  transition: transform .15s, background .2s, color .2s;
}
.tab .e { font-family: var(--emoji); font-size: 24px; line-height: 1; }
.tab[aria-pressed="true"] { background: var(--c); color: #fff; box-shadow: 0 3px 0 rgba(59,42,90,.18); }
@media (hover: hover) { .tab:not([aria-pressed="true"]):hover { background: rgba(255,255,255,.8); color: var(--ink); } }
.stars {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 24px; background: #fff; border-radius: 999px; min-height: 44px;
  padding: 2px 14px 0; box-shadow: 0 4px 0 var(--gold); white-space: nowrap;
}
.stars .e { font-family: var(--emoji); font-size: 22px; }
.stars.bump { animation: bump .5s; }
.icon-btn {
  position: relative; flex: none; border: 0; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.6); font-size: 22px; cursor: pointer; font-family: var(--emoji);
  box-shadow: 0 3px 0 rgba(59,42,90,.12); color: var(--ink); display: grid; place-items: center;
}
.icon-btn.holding { background: conic-gradient(var(--c) var(--p), rgba(255,255,255,.85) 0); animation: fill-ring .9s linear forwards; }
@keyframes fill-ring { to { --p: 100%; } }
.tip {
  position: fixed; z-index: 60; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px;
  padding: 6px 12px 4px; border-radius: 12px; pointer-events: none; animation: pop .25s; white-space: nowrap;
}
@media (max-width: 980px) { .logo { display: none; } }
@media (max-width: 720px) {
  .tab:not([aria-pressed="true"]) .t { display: none; } /* icons only, except the active tab */
  .tab { padding: 4px 12px 2px; }
}
@media (max-width: 560px) {
  header { gap: 6px; padding: 6px 8px 2px; }
  .tabs { margin: 0; gap: 2px; padding: 3px; }
  .tab { padding: 4px 10px 2px; font-size: 17px; min-height: 44px; min-width: 44px; }
  .tab .e { font-size: 22px; }
  .stars { font-size: 20px; padding: 2px 10px 0; margin-left: auto; }
  .icon-btn { width: 44px; height: 44px; }
  #fs-btn { display: none; } /* still offered on the start screen */
}
@media (max-width: 400px) {
  .tab .t { display: none; }
  .tab { padding: 4px 8px 2px; }
  .stars { padding: 2px 8px 0; font-size: 18px; }
}

/* ---------- card ---------- */
#card {
  position: relative; width: 100%; max-width: 960px; max-height: 100%;
  background: var(--card); border: 6px solid var(--c); border-radius: clamp(24px, 5cqmin, 40px);
  box-shadow: 0 10px 0 var(--c), 0 24px 50px rgba(59,42,90,.18);
  padding: clamp(8px, 3cqh, 30px) clamp(12px, 4cqw, 44px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2px, 1.5cqh, 12px); text-align: center; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
#card.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
#card.shake { animation: shake .45s; }
#card.yay { animation: yay .8s; }
.row { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 5cqw, 64px); flex-wrap: wrap; }
.letters { display: flex; align-items: baseline; gap: .12em; line-height: .95; font-weight: 800; color: var(--c); }
.letters .up { font-size: min(40cqh, 25cqw, 240px); text-shadow: 0 .05em 0 rgba(59,42,90,.15); }
.letters .lo { font-size: min(25cqh, 15cqw, 150px); opacity: .8; }
.big-emoji { font-family: var(--emoji); font-size: min(33cqh, 22cqw, 200px); line-height: 1.1; animation: wobble 2.4s ease-in-out infinite; }
.word { font-size: clamp(22px, min(10cqh, 8cqw), 76px); font-weight: 800; letter-spacing: .08em; line-height: 1.1; overflow-wrap: anywhere; }
.word b { color: var(--c); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.ask { font-size: clamp(18px, min(6.5cqh, 5.5cqw), 40px); font-weight: 700; color: var(--muted); line-height: 1.15; }
.note { font-size: clamp(14px, min(4.5cqh, 3.8cqw), 26px); color: var(--muted); font-weight: 600; line-height: 1.2; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.actions .pill { font-size: clamp(15px, 4cqw, 22px); }
.pill {
  border: 0; border-radius: 999px; padding: 6px 18px 4px; min-height: 44px; cursor: pointer;
  font-size: clamp(16px, 2.4vh, 22px); font-weight: 700; background: var(--soft);
  box-shadow: 0 3px 0 var(--key-edge); text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-edge); }
.pill.ok { background: var(--good); color: #fff; box-shadow: 0 3px 0 var(--good-edge); }
.ask.oops { color: var(--ink); background: #fff3b0; border-radius: 999px; padding: 0 .6em; animation: pop .25s; }

/* language badges, translations, word collection */
.lang-badge {
  display: inline-grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: .55em;
  letter-spacing: .04em; min-width: 2.3em; padding: .2em .45em 0; border-radius: .5em; line-height: 1.3;
  background: var(--ink); color: #fff; vertical-align: middle;
}
.pill .lang-badge { font-size: .8em; }
.pill.dir { gap: 6px; }
.pill.dir .arrow { font-size: .9em; color: var(--muted); }
.trans {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--c);
  font-size: clamp(20px, min(7cqh, 6cqw), 52px); letter-spacing: .06em; line-height: 1.1;
  background: var(--soft); border-radius: 999px; padding: .1em .6em 0;
}
.trans .lang-badge { font-size: .45em; }
.new-badge {
  font-weight: 800; color: #6b4e00; background: #fff3b0; border-radius: 999px; padding: 2px 14px 0;
  font-size: clamp(14px, min(4cqh, 3.5cqw), 22px); animation: pop .5s .3s backwards;
}
.target { gap: .5em; }
.target .lang-badge { font-size: clamp(14px, 3.4cqh, 22px); }
.target .word { color: var(--c); }
.source { gap: clamp(10px, 4cqw, 40px); }
.source .big-emoji { font-size: min(26cqh, 20cqw, 170px); }
.src-word { display: flex; align-items: center; gap: .4em; }
.src-word .lang-badge { font-size: clamp(13px, 3cqh, 20px); }

/* typing the answer in the "Words" game */
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 1cqw, 8px); }
.slot {
  width: clamp(28px, min(9cqh, 8cqw), 60px); height: clamp(36px, min(11cqh, 10cqw), 72px);
  border-radius: 12px; border: 3px dashed var(--key-edge); background: #fff;
  display: grid; place-items: center; padding-top: .1em;
  font-size: clamp(22px, min(8cqh, 7cqw), 50px); font-weight: 800; color: var(--c);
}
.slot.cur { border-style: solid; border-color: var(--c); animation: breathe 1.2s ease-in-out infinite; }
.slot.ok { border-style: solid; border-color: var(--good); background: #e6fbf3; animation: pop .25s; }
.slot.bad { animation: shake .35s; border-color: #ff8a8a; }
.slot.gap { border: 0; background: transparent; width: clamp(10px, 2cqw, 20px); color: var(--muted); }

/* Tall stages (phones and tablets held upright): letter above its picture, everything bigger */
@container stage (max-aspect-ratio: 3/4) {
  .row:not(.keep) { flex-direction: column; gap: 1cqh; }
  .letters .up { font-size: min(24cqh, 42cqw, 260px); }
  .letters .lo { font-size: min(15cqh, 26cqw, 160px); }
  .big-emoji { font-size: min(19cqh, 34cqw, 220px); }
  .word { font-size: clamp(22px, min(7cqh, 10cqw), 80px); }
  .ask { font-size: clamp(18px, min(4.5cqh, 6.5cqw), 40px); }
  .things { font-size: min(10cqh, 17cqw, 96px); }
  .things.small { font-size: min(7cqh, 11cqw, 70px); }
  .source { flex-direction: column; gap: 1cqh; }
  .source .big-emoji { font-size: min(18cqh, 32cqw, 200px); }
  .slot { width: clamp(28px, 9cqw, 60px); height: clamp(36px, 11cqw, 72px); font-size: clamp(22px, 7cqw, 50px); }
}
/* Very short stages (landscape phones): trim the extras */
@container stage (max-height: 260px) {
  .actions { margin-top: 0; }
  .actions .pill { min-height: 38px; padding: 2px 12px 0; }
  .note { display: none; }
}

/* counting items */
.things { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .25em; max-width: 780px; font-size: min(17cqh, 12cqw, 88px); }
.things.small { font-size: min(11cqh, 8cqw, 64px); }
.thing {
  position: relative; border: 0; background: transparent; padding: .05em .12em; border-radius: 50%;
  font-family: var(--emoji); font-size: inherit; line-height: 1.15; cursor: pointer;
  transform: rotate(var(--rot, 0deg)); animation: drop .4s backwards; animation-delay: var(--d, 0ms);
  transition: background .2s;
}
.things.small .thing { opacity: .25; cursor: default; transition: opacity .2s, transform .2s; }
.things.small .thing.on { opacity: 1; transform: scale(1.15); }
.thing.on { background: #fff3b0; }
.badge {
  position: absolute; top: -.1em; right: -.1em; min-width: 1.5em; height: 1.5em; border-radius: 999px;
  background: var(--c); color: #fff; font-family: var(--font); font-weight: 800; font-size: max(.32em, 13px);
  display: none; place-items: center; padding-top: .1em;
}
.thing.on .badge:not(:empty) { display: grid; animation: pop .3s; }
.answer-row { gap: 16px; }
.answer {
  min-width: 1.4em; padding: 0 .3em; border-radius: 20px; border: 4px dashed var(--key-edge);
  font-size: clamp(30px, min(13cqh, 9cqw), 72px); font-weight: 800; line-height: 1.2; color: var(--c);
}
.answer.bad { border-color: #ff8a8a; color: #e05555; animation: shake .4s; }
.answer.good { border-style: solid; border-color: var(--good); color: var(--good); }

/* ---------- typed word strip (free play) ---------- */
#strip { display: flex; align-items: center; justify-content: center; gap: 6px 10px; flex-wrap: wrap; width: 100%; min-height: 48px; }
body:not([data-mode="play"]) #strip { display: none; }
.tiles { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.tiles:empty { display: none; }
.tile {
  width: clamp(28px, 5.2vh, 48px); height: clamp(36px, 6.2vh, 56px); border-radius: 12px;
  background: var(--tc); color: #fff; font-size: clamp(22px, 4.2vh, 36px); font-weight: 800;
  display: grid; place-items: center; padding-top: .1em; box-shadow: 0 4px 0 rgba(59,42,90,.2);
}
.tile.space { width: 14px; background: transparent; box-shadow: none; }
.tile.new { animation: drop .35s; }
.tiles.wave .tile { animation: hop .5s; animation-delay: calc(var(--i) * 90ms); }
.tryme {
  flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  font-size: clamp(15px, 2.3vh, 20px); color: var(--muted); font-weight: 600; text-align: center;
}
.tryme:empty { display: none; }
.idea {
  display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer;
  background: #fff; border-radius: 12px; padding: 2px 10px 0; min-height: 36px;
  color: var(--ink); font-size: inherit; font-weight: 800; letter-spacing: .06em; box-shadow: 0 2px 0 var(--key-edge);
}
.idea .e { font-family: var(--emoji); letter-spacing: 0; }
.idea:active { transform: translateY(2px); box-shadow: none; }
.strip-actions { display: flex; gap: 8px; align-items: center; }
.strip-actions .pill { font-family: var(--font); }
.found {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 18px;
  background: #fff; border-radius: 999px; padding: 4px 12px 2px; min-height: 40px; box-shadow: 0 3px 0 var(--key-edge);
}
@media (max-width: 560px) {
  .strip-actions .t { display: none; }
  .strip-actions .pill { padding: 6px 14px 4px; font-size: 20px; }
  .tryme .lbl { display: none; }
}

/* ---------- which input panel is visible ---------- */
#qwerty, #abc, #choices { display: none; }
body[data-input="qwerty"] #qwerty { display: flex; }
body[data-input="abc"] #abc { display: flex; }
body[data-input="choices"] #choices { display: grid; }

/* ---------- computer keyboard (QWERTY) ---------- */
#qwerty { flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key {
  border: 0; cursor: pointer; border-radius: 12px; padding: 0;
  width: clamp(24px, 7.4cqw, 58px); height: var(--key-h);
  font-size: clamp(14px, 2.7vh, 26px); font-weight: 800; line-height: 1;
  background: var(--key); box-shadow: 0 4px 0 var(--key-edge);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.key.vowel { background: var(--vowel); }
.key.pl { font-size: clamp(12px, 2.3vh, 22px); background: #eef7ff; }
.key.wide { width: clamp(36px, 10cqw, 80px); font-family: var(--emoji); }
.key.space { width: clamp(80px, 22cqw, 300px); font-size: clamp(12px, 2vh, 18px); color: var(--muted); }
#qwerty[data-lang="en"] .key.pl { display: none; }
#qwerty[data-lang="en"] .key.space { width: clamp(120px, 40cqw, 420px); }
/* Touch screens with a keyboard layout (touch laptops, tablets with a keyboard): bigger targets */
@media (any-pointer: coarse) { :root { --key-h: clamp(38px, 6vh, 58px); } .krow, #qwerty { gap: 6px; } }

/* shared pressed / hint states for every kind of button pad */
.key.hit, .abc-key.hit, .choice.hit { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); background: var(--c); color: #fff; }
.key.hint, .abc-key.hint, .choice.hint, .ctl.hint { animation: hint .7s ease-in-out infinite alternate; background: #ffe14d; color: var(--ink); }
@media (hover: hover) { .key:hover, .abc-key:hover, .choice:hover, .idea:hover { filter: brightness(.97); } }

/* ---------- big buttons: alphabet pad (touch) ---------- */
#abc { flex-direction: column; gap: 6px; width: 100%; max-width: 980px; }
.abc-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
#abc[data-lang="en"] .abc-grid.letters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.abc-grid.digits { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.abc-key, .ctl {
  border: 0; border-radius: 14px; padding: 0; cursor: pointer;
  height: clamp(44px, 7.2vh, 76px); font-size: clamp(22px, 4.2vh, 40px); font-weight: 800; line-height: 1;
  background: var(--key); box-shadow: 0 4px 0 var(--key-edge);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.abc-key.vowel { background: var(--vowel); }
.abc-key.digit { background: #eef7ff; }
.abc-ctrl { display: flex; gap: 6px; }
.ctl { flex: 1; font-size: clamp(16px, 2.6vh, 24px); color: var(--muted); padding: 0 12px; }
.ctl.space { flex: 3; }
.ctl.toggle { display: none; flex: 1.2; color: var(--ink); background: #fff3b0; box-shadow: 0 4px 0 var(--gold); }
.ctl:active, .abc-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
@media (min-width: 900px) and (orientation: landscape) {
  .abc-grid.letters { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  #abc[data-lang="en"] .abc-grid.letters { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
}
/* Small screens: letters and digits share the space, a toggle switches between them */
@media (max-width: 699px), (orientation: landscape) and (max-height: 560px) {
  .ctl.toggle { display: block; }
  #abc[data-show="letters"] .digits { display: none; }
  #abc[data-show="digits"] .abc-grid.letters { display: none; }
  .abc-grid.digits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #abc[data-show="digits"] .abc-key { height: clamp(56px, 10vh, 84px); }
}
/* The "Words" game types letters only */
body[data-mode="words"] #abc .digits, body[data-mode="words"] #abc .ctl { display: none; }
body[data-mode="words"] #abc .abc-grid.letters { display: grid !important; }
@media (orientation: landscape) and (max-height: 560px) {
  .abc-key, .ctl { height: clamp(36px, 10.5vh, 56px); font-size: clamp(18px, 6vh, 30px); }
}

/* ---------- big buttons: answer choices ---------- */
/* --cols is set by the script: one row of buttons, or a few rows when there are many */
#choices {
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 150px)); justify-content: center;
  gap: clamp(8px, 2.4cqw, 16px); width: 100%; max-width: 920px;
}
.choice {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 22vh;
  border: 0; border-radius: clamp(16px, 4cqw, 28px); cursor: pointer; padding: 0;
  display: grid; place-items: center; padding-top: .12em;
  font-size: clamp(34px, min(10cqw, 9vh), 72px); font-weight: 800; line-height: 1;
  background: var(--key); box-shadow: 0 6px 0 var(--key-edge);
  transition: transform .08s, box-shadow .08s, background .15s, opacity .2s;
}
.choice > span { display: inline-flex; align-items: baseline; gap: .08em; }
.choice small { font-size: .6em; opacity: .75; }
.choice.nope { opacity: .35; animation: shake .4s; }
.choice.right { background: #c9f5e4; box-shadow: 0 6px 0 var(--good); }
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--key-edge); }
.choice .num {
  position: absolute; top: 6px; left: 8px; font-style: normal; font-size: 14px; font-weight: 800;
  color: var(--muted); background: var(--soft); border-radius: 8px; padding: 2px 6px 0; line-height: 1.2;
}
#choices.pics .choice { font-family: var(--emoji); font-size: clamp(40px, min(12cqw, 10vh), 84px); }
#choices.pics .pic { line-height: 1; }
/* Word answers: wide buttons, text sized to fit */
#choices.texts { grid-template-columns: repeat(var(--cols, 2), minmax(0, 260px)); }
#choices.texts .choice {
  aspect-ratio: auto; min-height: clamp(56px, 10vh, 92px); max-height: none; padding: 8px 14px 4px;
  font-size: clamp(20px, min(5.5cqw, 4.4vh), 38px); letter-spacing: .04em; overflow-wrap: anywhere;
}
#choices.texts .choice .num { top: 50%; transform: translateY(-50%); }
@media (orientation: landscape) and (max-height: 560px) {
  #choices { grid-template-columns: repeat(var(--cols-side, 2), minmax(0, 1fr)); align-content: center; }
  #choices.texts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { aspect-ratio: auto; height: clamp(56px, 24vh, 110px); max-height: none; }
  #choices.texts .choice { height: auto; min-height: clamp(52px, 20vh, 90px); }
}

/* ---------- overlays ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.p { position: absolute; left: 0; top: 0; margin: -.5em 0 0 -.5em; font-family: var(--emoji); animation: fly 1s ease-out forwards; }
.flystar {
  position: absolute; left: 0; top: 0; margin: -.5em 0 0 -.5em; font-size: 34px; font-family: var(--emoji);
  transition: transform .85s cubic-bezier(.5,-0.3,.6,1);
}
.overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(191,233,255,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.start-card {
  background: #fff; border-radius: clamp(28px, 6vw, 40px); padding: clamp(16px, 4vw, 28px) clamp(16px, 5vw, 32px);
  text-align: center; max-width: 580px; width: 100%;
  border: 6px solid #ff5d8f; box-shadow: 0 10px 0 #ff5d8f, 0 24px 60px rgba(59,42,90,.2);
}
.lang-switch {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); margin-bottom: 8px;
}
.lang-opt {
  border: 0; border-radius: 999px; padding: 6px 16px 4px; min-height: 44px; cursor: pointer;
  font-size: 18px; font-weight: 700; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.lang-opt .lang-badge { font-size: 13px; background: var(--muted); }
.lang-opt[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--key-edge); }
.lang-opt[aria-pressed="true"] .lang-badge { background: #ff5d8f; }
.start-emojis { font-family: var(--emoji); font-size: clamp(34px, 9vw, 46px); letter-spacing: 6px; }
.start-emojis span { display: inline-block; animation: hop 1.6s ease-in-out infinite; }
.start-emojis span:nth-child(2) { animation-delay: .15s; } .start-emojis span:nth-child(3) { animation-delay: .3s; }
.start-emojis span:nth-child(4) { animation-delay: .45s; } .start-emojis span:nth-child(5) { animation-delay: .6s; }
.start-card h1 { font-size: clamp(42px, 12vw, 64px); margin: 6px 0 0; line-height: 1; }
.start-card p { font-size: clamp(18px, 5vw, 22px); color: var(--muted); margin: 6px 0 18px; }
.go {
  border: 0; border-radius: 999px; padding: 14px 40px 10px; font-size: clamp(26px, 7vw, 34px); font-weight: 800; cursor: pointer;
  background: var(--good); color: #fff; box-shadow: 0 6px 0 var(--good-edge); animation: breathe 1.6s ease-in-out infinite;
}
.start-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.warn, .info { margin-top: 16px; border-radius: 16px; padding: 10px 14px; font-size: 15px; text-align: left; line-height: 1.4; }
.warn { background: #fff4d6; color: #6b4e00; }
.info { background: #eef7ff; color: #1f4b7a; }
.info .open-browser { margin-top: 8px; display: flex; width: fit-content; font-size: 17px; background: #fff; }
@media (orientation: landscape) and (max-height: 560px) {
  .start-card h1 { font-size: 40px; } .start-card p { margin-bottom: 10px; } .start-emojis { display: none; }
  .start-row { margin-top: 10px; }
}
.party { background: rgba(255,227,241,.75); z-index: 45; pointer-events: none; }
.party > div { text-align: center; animation: pop .6s cubic-bezier(.3,1.6,.5,1); }
.trophy { font-family: var(--emoji); font-size: min(160px, 35vmin); line-height: 1; animation: wobble 1s ease-in-out infinite; }
.party-text { font-size: clamp(36px, 10vmin, 64px); font-weight: 800; color: #ff5d8f; }

dialog {
  border: 0; border-radius: 28px; padding: 22px 24px; width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--font); color: var(--ink); box-shadow: 0 30px 80px rgba(59,42,90,.35);
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
dialog::backdrop { background: rgba(59,42,90,.35); }
dialog h2 { margin: 0 0 12px; font-size: 26px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-weight: 700; font-size: 17px; }
.field.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.field input[type=text], .field select {
  font: inherit; font-weight: 500; font-size: 17px; padding: 8px 12px; min-height: 44px;
  border-radius: 12px; border: 2px solid var(--key-edge); background: #fff; color: var(--ink); max-width: 100%;
}
.field select:disabled { color: var(--muted); background: var(--soft); }
.field input[type=range] { width: 100%; min-height: 32px; }
.field input[type=radio], .field input[type=checkbox] { width: 20px; height: 20px; vertical-align: -3px; accent-color: var(--good); flex: none; }
.field .inline { display: flex; gap: 6px 16px; font-weight: 500; flex-wrap: wrap; }
.field .inline.col { flex-direction: column; }
.field .inline label { min-height: 32px; display: inline-flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; }
.field small { font-weight: 500; color: var(--muted); }
.dialog-actions {
  position: sticky; bottom: -22px; margin: 8px -24px -22px; padding: 12px 24px 16px; background: #fff;
  display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; border-top: 2px solid var(--soft);
}

/* ---------- animations ---------- */
@keyframes pop { from { transform: scale(.7); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes bump { 50% { transform: scale(1.35); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px) rotate(-1deg); } 40%, 80% { transform: translateX(10px) rotate(1deg); } }
@keyframes yay { 25% { transform: scale(1.05) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } 75% { transform: scale(1.04) rotate(-1deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-6%); } }
@keyframes drop { from { transform: translateY(-40px) scale(.5); opacity: 0; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes hint { from { transform: scale(1); box-shadow: 0 0 0 0 #ffe14d; } to { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255,225,77,.5); } }
@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes fly {
  from { transform: translate(var(--x), var(--y)) scale(.3) rotate(0); opacity: 1; }
  to   { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.1) rotate(var(--r)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .icon-btn.holding { animation-duration: .9s !important; }
  .sky { display: none; }
}