/* Woordraket: een snoepruimte. Diepe bosbes-nacht, snoepkleurige planeten, crème letterkaartjes.
   Layout: één scherm tegelijk (kop, speelveld, acties); maten schalen met vmin voor iPad en telefoon. */
:root {
  color-scheme: dark;
  --night: #1b1240;
  --night-2: #2a1c66;
  --night-3: #3b2a8f;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-2: rgba(255, 255, 255, 0.14);
  --cream: #fff8ec;
  --cream-2: #f1e3c8;
  --ink: #241a4a;
  --ink-2: #5c4f8f;
  --berry: #ff5a7a;
  --berry-d: #c9315a;
  --mango: #ffb627;
  --mango-d: #d9861a;
  --mint: #3ddc97;
  --mint-d: #1e9e68;
  --sky: #4cc9f0;
  --sky-d: #1f8fbf;
  --grape: #9b5de5;
  --grape-d: #6a35b3;
  --lemon: #ffd23f;
  --vowel: #ffe08a;
  --vowel-d: #e9b949;
  --good: #2fd38a;
  --bad: #ff6b6b;
  --text: #fff8ec;
  --text-2: #cbbff5;
  --font-read: "Andika", "AndikaLocal", "Comic Sans MS", system-ui, sans-serif;
  --font-ui: "Fredoka", "FredokaLocal", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --tile: clamp(44px, 11.5vmin, 118px);
  --card: clamp(92px, 23vmin, 210px);
  --gap: clamp(10px, 2.2vmin, 24px);
}

@font-face { font-family: "AndikaLocal"; src: url("../fonts/andika-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AndikaLocal"; src: url("../fonts/andika-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FredokaLocal"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background:
    radial-gradient(110% 70% at 85% -10%, #4b2fa8 0%, transparent 55%),
    radial-gradient(90% 60% at -10% 110%, #5a1f78 0%, transparent 60%),
    var(--night);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 4px solid var(--lemon); outline-offset: 3px; }
svg { display: block; }

#app {
  position: relative; height: 100%; touch-action: manipulation;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* sterrenhemel */
#app::before, #app::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 140px 80px, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70px 160px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 190px 190px, #cdeeff 50%, transparent 51%);
  background-size: 220px 220px;
  opacity: .7;
}
#app::after { background-size: 330px 330px; background-position: 60px 90px; opacity: .45; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .6; } }

.screen { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; animation: screen-in .28s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ico { display: inline-flex; width: 1em; height: 1em; }
.ico svg { width: 100%; height: 100%; }
.si svg, .star-ico { width: 1em; height: 1em; }

/* ---------- kopbalk ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 6px; min-height: 72px; position: relative; z-index: 3;
}
.tb-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.icon-btn {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: var(--glass-2); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); color: var(--cream);
  flex: none;
}
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
.stars-count, .flame-badge {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--glass-2); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; flex: none;
}
.stars-count .si { font-size: 28px; display: inline-flex; }
.stars-count.bump { animation: bump .4s ease-out; }
@keyframes bump { 40% { transform: scale(1.18); } }
.flame-badge .fi { display: inline-flex; width: 28px; height: 28px; }
.flame-badge .fi svg { width: 100%; height: 100%; }
.flame-badge.off { opacity: .55; filter: grayscale(.7); }
.tb-title { font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.tb-play { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-game { font-size: 28px; }
.tb-cup { width: 40px; height: 44px; display: inline-flex; }
.dots { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: var(--glass-2); transition: background .2s, transform .2s; }
.dot.ok { background: var(--mint); }
.dot.meh { background: var(--mango); }
.dot.now { background: var(--cream); transform: scale(1.25); }
.combo { font-weight: 700; font-size: 22px; color: var(--mango); min-width: 2.6em; }
.combo.hot { animation: bump .4s; }

/* ---------- knoppen ---------- */
.big-btn {
  --c: var(--berry); --cd: var(--berry-d);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 72px; padding: 0 30px; border-radius: 24px; font-size: 26px; font-weight: 700;
  background: var(--c); color: #fff; box-shadow: 0 7px 0 var(--cd), 0 12px 28px rgba(0, 0, 0, .3);
  transition: transform .08s, box-shadow .08s;
}
.big-btn .ico { font-size: 30px; }
.big-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--cd), 0 4px 10px rgba(0, 0, 0, .3); }
.big-btn.go { --c: var(--mint); --cd: var(--mint-d); color: var(--ink); }
.big-btn.ghost { --c: var(--night-3); --cd: #24186a; color: var(--cream); }

/* ---------- start ---------- */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; }
.splash-rocket { width: clamp(110px, 22vmin, 190px); animation: float 3s ease-in-out infinite; }
.splash-rocket .rocket { width: 100%; height: auto; }
.splash-title { margin: 0; font-size: clamp(54px, 12vmin, 110px); line-height: 1; font-weight: 700; color: var(--cream); letter-spacing: -.01em; text-shadow: 0 6px 0 #120b30; }
.splash-title span { color: var(--mango); }
.splash-go {
  width: clamp(110px, 20vmin, 170px); height: clamp(110px, 20vmin, 170px); border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: var(--ink); font-size: clamp(54px, 10vmin, 84px);
  box-shadow: 0 9px 0 var(--mint-d), 0 0 0 0 rgba(61, 220, 151, .6); animation: glow 1.8s ease-out infinite;
}
.splash-go .ico { margin-left: 8%; }
.splash-go:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--mint-d); }
.splash-sub { margin: 0; font-size: 22px; color: var(--text-2); }
@keyframes glow { 0% { box-shadow: 0 9px 0 var(--mint-d), 0 0 0 0 rgba(61, 220, 151, .55); } 100% { box-shadow: 0 9px 0 var(--mint-d), 0 0 0 34px rgba(61, 220, 151, 0); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(2deg); } }

.onboard { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.onb-robo { width: clamp(140px, 28vmin, 240px); }
.onb-rockets { display: flex; gap: clamp(16px, 4vmin, 48px); }
.onb-rocket { width: clamp(80px, 16vmin, 140px); padding: 10px; border-radius: 28px; background: var(--glass); }
.onb-rocket:active { transform: scale(.94); }
.onb-rocket.launch { animation: launch .6s ease-in forwards; }
@keyframes launch { to { transform: translateY(-120vh) rotate(-6deg); } }

/* ---------- thuis ---------- */
.home-top .brand { flex: 1; text-align: center; font-size: 26px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.gear-btn {
  position: absolute; z-index: 4; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--text-2); opacity: .55;
}
.gear-btn.holding { opacity: 1; animation: hold var(--hold) linear forwards; }
@keyframes hold { from { box-shadow: 0 0 0 0 var(--mango); } to { box-shadow: 0 0 0 14px var(--mango); } }
.home { flex: 1; display: grid; grid-template-rows: 1fr auto auto auto; gap: clamp(10px, 2.4vmin, 22px); padding: 0 16px clamp(56px, 8vmin, 72px); min-height: 0; justify-items: center; }
.sky { position: relative; width: min(100%, 980px); display: flex; align-items: flex-end; justify-content: space-between; min-height: 0; padding: 0 4%; }
.launchpad { align-self: flex-end; }
.home-rocket { width: clamp(84px, 17vmin, 170px); animation: float 3.2s ease-in-out infinite; }
.home-rocket .rocket { width: 100%; height: auto; }
.planet-spot { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; }
.home-planet { width: clamp(120px, 26vmin, 250px); animation: spin-slow 40s linear infinite; }
.home-planet svg { width: 100%; height: auto; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.planet-label { font-size: 22px; font-weight: 600; color: var(--text-2); }
.gift-egg { position: absolute; left: 50%; top: 4%; width: clamp(70px, 12vmin, 110px); transform: translateX(-50%); animation: wobble 1.6s ease-in-out infinite; }
.mission { display: flex; align-items: center; gap: 14px; padding: 8px 18px; border-radius: 999px; background: var(--glass); }
.mission-label { font-size: 20px; color: var(--text-2); font-weight: 600; }
.mission-eggs { display: flex; gap: 8px; }
.m-egg { width: 34px; height: 40px; opacity: .3; filter: grayscale(1); transition: all .3s; }
.m-egg svg { width: 100%; height: 100%; }
.m-egg.done { opacity: 1; filter: none; }
.start-btn {
  display: inline-flex; align-items: center; gap: 16px; padding: 0 clamp(36px, 7vmin, 64px);
  height: clamp(84px, 13vmin, 116px); border-radius: 999px; font-size: clamp(36px, 6vmin, 52px); font-weight: 700;
  background: var(--mango); color: var(--ink); box-shadow: 0 9px 0 var(--mango-d), 0 16px 40px rgba(255, 182, 39, .35);
  animation: breathe 2.4s ease-in-out infinite;
}
.start-btn .ico { font-size: 1.05em; }
.start-btn:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--mango-d); animation: none; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.home-nav { display: flex; gap: clamp(10px, 2.4vmin, 26px); flex-wrap: wrap; justify-content: center; }
.nav-btn {
  --c: var(--sky); --cd: var(--sky-d);
  width: clamp(84px, 15vmin, 132px); height: clamp(84px, 15vmin, 132px); border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--c); color: var(--ink); font-size: clamp(15px, 2.4vmin, 20px); font-weight: 700;
  box-shadow: 0 7px 0 var(--cd);
}
.nav-btn .ico { font-size: clamp(34px, 6vmin, 52px); }
.nav-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--cd); }
.nav-album { --c: var(--berry); --cd: var(--berry-d); color: #fff; }
.nav-race { --c: var(--lemon); --cd: var(--mango-d); }
.nav-timer { --c: var(--grape); --cd: var(--grape-d); color: #fff; }

/* ---------- speelveld ---------- */
.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px 20px; }
.game { width: 100%; max-width: 1000px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: var(--gap); }

/* lettertegels */
.tiles { display: flex; gap: calc(var(--tile) * .14); font-family: var(--font-read); font-weight: 700; transition: gap .35s ease; }
.tile {
  min-width: calc(var(--tile) * .92); height: calc(var(--tile) * 1.28); padding: 0 calc(var(--tile) * .12);
  display: grid; place-items: center; font-size: var(--tile); line-height: 1; color: var(--ink);
  background: var(--cream); border-radius: calc(var(--tile) * .24);
  box-shadow: 0 6px 0 var(--cream-2), 0 10px 22px rgba(0, 0, 0, .25);
  transition: transform .12s, background .25s, box-shadow .25s, border-radius .35s, padding .35s, min-width .35s;
  padding-bottom: calc(var(--tile) * .1);
}
.tile.v { background: var(--vowel); box-shadow: 0 6px 0 var(--vowel-d), 0 10px 22px rgba(0, 0, 0, .25); }
.tile.on { background: var(--sky); color: #fff; transform: translateY(-6px) scale(1.07); box-shadow: 0 8px 0 var(--sky-d), 0 0 0 6px rgba(76, 201, 240, .35); }
.tile.diff { animation: diff .5s ease-in-out 3; }
@keyframes diff { 50% { box-shadow: 0 6px 0 var(--berry-d), 0 0 0 7px rgba(255, 90, 122, .7); transform: translateY(-4px); } }
.tiles.merged { gap: 0; }
.tiles.merged .tile { border-radius: 0; background: var(--cream); box-shadow: 0 6px 0 var(--cream-2); min-width: 0; padding-left: .02em; padding-right: .02em; }
.tiles.merged .tile:first-child { border-radius: calc(var(--tile) * .24) 0 0 calc(var(--tile) * .24); padding-left: calc(var(--tile) * .2); }
.tiles.merged .tile:last-child { border-radius: 0 calc(var(--tile) * .24) calc(var(--tile) * .24) 0; padding-right: calc(var(--tile) * .2); }
.tiles.merged .tile:only-child { border-radius: calc(var(--tile) * .24); }
.tiles.flashed .tile { color: transparent; background: var(--glass-2); box-shadow: none; }
.tiles.flashed .tile.v { background: var(--glass-2); }

/* zoemrails */
.zoem-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8%; touch-action: none; position: relative; }
.zoem-zone.disabled { pointer-events: none; }
.rail { position: relative; width: 100%; height: 56px; }
.rail-line { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--glass-2) 0 14px, transparent 14px 24px); }
.rail-rocket { position: absolute; left: 0; top: 50%; width: 38px; height: 66px; margin-top: -33px; transform: translateX(0) translateX(-50%) rotate(90deg); transition: transform .06s linear; }
.rail-rocket .rocket { width: 100%; height: 100%; }
.zoem-zone:not(.sliding) .rail-rocket { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(10px) translateX(-50%) rotate(90deg); } 50% { transform: translateX(34px) translateX(-50%) rotate(90deg); } }
.rail-hint { position: absolute; right: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-right: 6px solid var(--glass-2); border-top: 6px solid var(--glass-2); transform: rotate(45deg); border-radius: 3px; }
.read-area { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.help-btn { background: var(--lemon); box-shadow: inset 0 -4px 0 var(--mango-d); width: 64px; height: 64px; font-size: 38px; }
.read-area .help-btn { position: absolute; right: 0; top: 50%; transform: translateY(-60%); }

/* plaatjeskaarten */
.cards { display: flex; gap: var(--gap); justify-content: center; transition: opacity .3s; }
.cards.dim { opacity: .25; pointer-events: none; }
.card {
  width: var(--card); height: var(--card); border-radius: calc(var(--card) * .2); display: grid; place-items: center;
  background: var(--cream); box-shadow: 0 8px 0 var(--cream-2), 0 14px 30px rgba(0, 0, 0, .3);
  transition: transform .12s, box-shadow .12s, opacity .3s, filter .3s;
}
.card .emo { font-size: calc(var(--card) * .62); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.card:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--cream-2); }
.card.right { background: #d9fbe9; box-shadow: 0 8px 0 var(--mint-d), 0 0 0 8px rgba(61, 220, 151, .55); animation: pop .5s; }
.card.wrong { animation: shake .45s; opacity: .45; filter: grayscale(.8); }
.card.hint { animation: hintglow 1s ease-in-out infinite; }
@keyframes pop { 40% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.97); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px) rotate(-2deg); } 40%, 80% { transform: translateX(10px) rotate(2deg); } }
@keyframes hintglow { 50% { box-shadow: 0 8px 0 var(--cream-2), 0 0 0 12px rgba(255, 210, 63, .8); } }

/* robottaal */
.robo-area { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vmin, 48px); }
.robo-wrap { width: clamp(150px, 30vmin, 290px); cursor: pointer; }
.robo-wrap .robo { width: 100%; height: auto; }
.robo-side { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.replay-btn { width: 84px; height: 84px; font-size: 42px; background: var(--sky); color: var(--ink); box-shadow: inset 0 -5px 0 var(--sky-d); }
.robo-said .tiles { --tile: clamp(32px, 7vmin, 70px); }
.robo .bar { transform-box: fill-box; transform-origin: center; }
.robo-wrap.talk .bar { animation: talk .28s ease-in-out infinite alternate; }
.robo-wrap.talk .bar:nth-child(2) { animation-delay: .07s; } .robo-wrap.talk .bar:nth-child(3) { animation-delay: .14s; }
.robo-wrap.talk .bar:nth-child(4) { animation-delay: .21s; } .robo-wrap.talk .bar:nth-child(5) { animation-delay: .1s; }
@keyframes talk { from { transform: scaleY(.3); } to { transform: scaleY(1.5); } }
.robo-eye { transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.robo-ant.blink { animation: ant .3s; }
@keyframes ant { 50% { fill: #ffd23f; r: 14px; } }
.robo-wrap.happy { animation: hop .5s ease-out 2; }
.robo-wrap.happy .robo-arm-l, .robo-wrap.happy .robo-arm-r { transform-box: fill-box; transform-origin: top center; animation: wave .25s ease-in-out 6 alternate; }
@keyframes hop { 40% { transform: translateY(-24px); } }
@keyframes wave { to { transform: rotate(-35deg); } }

/* bouwen */
.build-top { display: flex; align-items: center; gap: var(--gap); }
.build-pic { width: calc(var(--card) * 1.15); height: calc(var(--card) * 1.15); border-radius: 32px; background: var(--cream); display: grid; place-items: center; box-shadow: 0 8px 0 var(--cream-2); }
.build-pic .emo { font-size: calc(var(--card) * .75); }
.build-btns { display: flex; flex-direction: column; gap: 14px; }
.hear-btn { width: 64px; height: 64px; font-size: 34px; background: var(--sky); color: var(--ink); box-shadow: inset 0 -4px 0 var(--sky-d); }
.slots { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-radius: 28px 999px 999px 28px; background: var(--glass); transition: transform .6s ease-in, opacity .6s; }
.slot-nose { order: 99; width: 46px; height: 62px; transform: rotate(90deg); }
.slot-nose .rocket { width: 100%; height: 100%; }
.slot {
  min-width: calc(var(--tile) * 1.05); height: calc(var(--tile) * 1.28); padding: 0 calc(var(--tile) * .14); border-radius: calc(var(--tile) * .22);
  border: 4px dashed var(--glass-2); display: grid; place-items: center;
  font-family: var(--font-read); font-weight: 700; font-size: var(--tile); color: var(--ink); padding-bottom: calc(var(--tile) * .1);
}
.slot.next { border-color: var(--lemon); animation: nextslot 1.2s ease-in-out infinite; }
@keyframes nextslot { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 63, .25); } }
.slot.filled { border: 0; background: var(--cream); box-shadow: 0 5px 0 var(--cream-2); animation: pop .35s; }
.slot.filled.v { background: var(--vowel); box-shadow: 0 5px 0 var(--vowel-d); }
.slot.pulse { animation: diff .45s 2; }
.slots.done .slot { background: #d9fbe9; box-shadow: 0 5px 0 var(--mint-d); }
.slots.launch { transform: translate(40vw, -70vh) rotate(-30deg); opacity: 0; }
.pool { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 900px; }
.ptile {
  min-width: calc(var(--tile) * .95); height: calc(var(--tile) * 1.2); padding: 0 calc(var(--tile) * .14) calc(var(--tile) * .08);
  font-family: var(--font-read); font-weight: 700; font-size: calc(var(--tile) * .9); color: var(--ink);
  background: var(--cream); border-radius: calc(var(--tile) * .22); box-shadow: 0 6px 0 var(--cream-2);
}
.ptile.v { background: var(--vowel); box-shadow: 0 6px 0 var(--vowel-d); }
.ptile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cream-2); }
.ptile.used { visibility: hidden; }
.ptile.shake { animation: shake .4s; }
.flying { pointer-events: none; }

/* ---------- beloning ---------- */
.reward { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.6vmin, 26px); padding: 0 16px 24px; min-height: 0; text-align: center; }
.rw-title { margin: 0; font-size: clamp(34px, 6.4vmin, 60px); font-weight: 700; color: var(--cream); text-wrap: balance; text-shadow: 0 4px 0 #120b30; }
.rating { display: flex; gap: 14px; }
.rstar { width: clamp(70px, 13vmin, 120px); height: clamp(70px, 13vmin, 120px); opacity: .18; filter: grayscale(1); transition: all .3s; }
.rstar svg { width: 100%; height: 100%; }
.rstar.on { opacity: 1; filter: none; animation: pop .45s; }
.earned { font-size: 34px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--lemon); }
.egg-stage { position: relative; display: grid; place-items: center; min-height: clamp(180px, 36vmin, 330px); }
.egg-btn { width: clamp(150px, 28vmin, 250px); animation: wobble 2s ease-in-out infinite; }
.egg-btn svg { width: 100%; height: auto; }
.egg-btn.golden { filter: drop-shadow(0 0 26px rgba(255, 210, 63, .8)); }
.egg-btn.wobble { animation: crackshake .35s; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes crackshake { 25% { transform: rotate(-10deg) scale(1.05); } 75% { transform: rotate(10deg) scale(1.05); } }
.flash { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: flash .6s ease-out forwards; }
@keyframes flash { to { transform: scale(60); opacity: 0; } }
.alien-reveal { width: clamp(170px, 32vmin, 290px); animation: reveal .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.alien-reveal svg { width: 100%; height: auto; }
.alien-reveal.rar1 { filter: drop-shadow(0 0 22px rgba(76, 201, 240, .9)); }
.alien-reveal.rar2 { filter: drop-shadow(0 0 30px rgba(255, 210, 63, .95)); }
.alien-reveal.jump, .album-card.jump .ac-art { animation: hop .5s ease-out; }
@keyframes reveal { from { transform: scale(0) rotate(-20deg); } }
.alien-name { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alien-name .tiles { --tile: clamp(36px, 7vmin, 66px); }
.alien-name .zoem-zone { padding: 0; }
.rar-label { font-size: 20px; font-weight: 600; padding: 4px 14px; border-radius: 999px; background: var(--glass); color: var(--text-2); }
.rar-label.rar1 { background: rgba(76, 201, 240, .25); color: #bfefff; }
.rar-label.rar2 { background: rgba(255, 210, 63, .25); color: var(--lemon); }
.unlock-planet { animation: reveal .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.unlock-planet svg { width: clamp(180px, 34vmin, 300px); height: auto; }
.planet-name .tiles { --tile: clamp(40px, 8vmin, 76px); }
.unlock-rocket { width: clamp(120px, 24vmin, 200px); animation: reveal .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.unlock-rocket svg { width: 100%; height: auto; }
.rw-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.pause-tip { margin: 0; font-size: 22px; color: var(--text-2); }

/* ---------- kaart ---------- */
.map { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px 40px; }
.map-path { position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; padding: 10px 0; }
.map-path::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 0; border-left: 6px dotted var(--glass-2); }
.map-planet { position: relative; align-self: flex-start; margin-left: var(--x); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; }
.mp-art { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.mp-art .planet { width: 120px; height: 120px; }
.mp-art .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-planet.locked .mp-art { filter: grayscale(1) brightness(.55); }
.mp-lock { position: absolute; top: 44px; font-size: 44px; color: var(--cream); }
.mp-rocket { position: absolute; right: -6px; top: 6px; width: 34px; height: 58px; animation: float 2.4s ease-in-out infinite; }
.mp-rocket .rocket { width: 100%; height: 100%; }
.mp-name { font-size: 22px; font-weight: 700; padding: 4px 14px; border-radius: 999px; background: var(--glass-2); }
.map-planet.current .mp-name { background: var(--mango); color: var(--ink); }
.mp-done { position: absolute; top: 4px; left: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--ink); display: grid; place-items: center; font-size: 22px; font-weight: 700; }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.modal-back { position: absolute; inset: 0; background: rgba(10, 6, 30, .6); animation: fade .2s; }
.modal-card { position: relative; width: min(680px, 100%); margin: 0 auto; padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px)); border-radius: 32px 32px 0 0; background: var(--night-2); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4); animation: sheet .28s ease-out; }
@keyframes sheet { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.game-pick { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.game-pick h2 { margin: 0; font-size: 30px; }
.gp-planet svg { width: 110px; height: auto; }
.gp-games { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.gp-game { width: clamp(110px, 18vmin, 160px); height: clamp(110px, 18vmin, 160px); border-radius: 28px; background: var(--cream); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 700; box-shadow: 0 7px 0 var(--cream-2); }
.gp-emo { font-size: clamp(46px, 8vmin, 66px); line-height: 1; }
.gp-game:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cream-2); }

/* ---------- album ---------- */
.album-total { font-size: 26px; font-weight: 700; }
.album { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 24px; overflow-y: auto; }
.album-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.album-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 18px; background: var(--glass); min-width: 64px; }
.album-tab.on { background: var(--glass-2); box-shadow: inset 0 0 0 3px var(--mango); }
.album-tab.locked .at-planet { filter: grayscale(1) brightness(.5); }
.at-planet svg { width: 48px; height: 48px; }
.at-count { font-size: 16px; font-weight: 600; color: var(--text-2); }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vmin, 20px); max-width: 920px; width: 100%; margin: 0 auto; }
.album-card { position: relative; aspect-ratio: 1 / 1.15; border-radius: 24px; background: var(--glass); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 4px; }
.album-card.have { background: var(--glass-2); }
.album-card.have.rar1 { box-shadow: inset 0 0 0 3px rgba(76, 201, 240, .7); }
.album-card.have.rar2 { box-shadow: inset 0 0 0 3px var(--lemon), 0 0 22px rgba(255, 210, 63, .35); }
.ac-art { width: 78%; }
.ac-art svg { width: 100%; height: auto; }
.album-card:not(.have) .ac-art { opacity: .6; }
.ac-name { font-family: var(--font-read); font-weight: 700; font-size: clamp(20px, 3.4vmin, 30px); min-height: 1.2em; }
.ac-dup { position: absolute; top: 8px; right: 10px; font-size: 16px; font-weight: 700; color: var(--lemon); }

/* ---------- raketten ---------- */
.hangar { flex: 1; overflow-y: auto; padding: 8px 16px 30px; }
.hangar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin: 0 auto; }
.hangar-rocket { border-radius: 28px; background: var(--glass); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hangar-rocket.on { background: var(--glass-2); box-shadow: inset 0 0 0 4px var(--mango); }
.hangar-rocket.locked .hr-art { filter: grayscale(1) brightness(.5); }
.hr-art { width: clamp(64px, 12vmin, 110px); }
.hr-art .rocket { width: 100%; height: auto; }
.hr-name { font-size: 20px; font-weight: 700; }
.hr-need { display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 700; color: var(--text-2); }

/* ---------- race ---------- */
.race-pick { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 16px 30px; }
.cups { display: flex; gap: clamp(10px, 2.4vmin, 24px); flex-wrap: wrap; justify-content: center; }
.cup-btn { position: relative; width: clamp(100px, 16vmin, 150px); padding: 14px 8px; border-radius: 26px; background: var(--glass-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cup-btn.locked { background: var(--glass); }
.cup-art { width: 70%; }
.cup-art svg { width: 100%; height: auto; }
.cup-name { font-size: 20px; font-weight: 700; }
.cup-best { position: absolute; top: 6px; right: 8px; font-size: 18px; font-weight: 700; }
.track { position: relative; margin: 0 16px; padding: 8px 64px 8px 12px; border-radius: 24px; background: var(--glass); display: flex; flex-direction: column; gap: 6px; }
.lane { position: relative; height: clamp(40px, 7vmin, 62px); }
.lane-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed var(--glass-2); }
.lane.me .lane-line { border-top-color: rgba(255, 210, 63, .5); }
.racer { --p: 0; position: absolute; top: 0; height: 100%; aspect-ratio: 1; left: calc(var(--p) * (100% - clamp(40px, 7vmin, 62px))); transition: left .35s ease-out; }
.racer svg { width: 100%; height: 100%; }
.lane.me .racer svg { transform: rotate(90deg); }
.racer.boost { animation: boost .4s; }
.racer.stall { animation: shake .4s 2; }
.racer.finished { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5)); }
@keyframes boost { 50% { transform: scale(1.25); } }
.finish { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 40px; }
.race-count { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.race-stage .game { justify-content: center; }
.race-stage { --tile: clamp(40px, 9vmin, 96px); --card: clamp(84px, 19vmin, 180px); }
.countdown { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; font-size: clamp(90px, 26vmin, 240px); font-weight: 700; color: var(--lemon); text-shadow: 0 10px 0 #120b30; pointer-events: none; background: rgba(15, 9, 40, .45); }
.countdown.pop { animation: cd .65s ease-out; }
@keyframes cd { from { transform: scale(2.2); opacity: 0; } 40% { transform: scale(1); opacity: 1; } }
.race-overlay { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(15, 9, 40, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 16px; text-align: center; animation: fade .3s; }
.race-result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cup-art.big { width: clamp(120px, 24vmin, 200px); display: block; animation: reveal .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.place-num { font-size: clamp(80px, 18vmin, 150px); font-weight: 700; color: var(--sky); }
.race-new { margin: 0; font-size: 24px; color: var(--lemon); font-weight: 600; }

/* ---------- leesminuut ---------- */
.minuut-setup { flex: 1; overflow-y: auto; padding: 4px 16px 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.parent-note { max-width: 62ch; margin: 0; font-size: 19px; line-height: 1.45; color: var(--text-2); text-align: center; -webkit-user-select: text; user-select: text; }
.minuut-planets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; width: min(100%, 860px); }
.mp-btn { border-radius: 24px; background: var(--glass-2); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mp-art svg { width: 72px; height: 72px; }
.mp-t { font-size: 22px; font-weight: 700; }
.mp-rec { font-size: 16px; color: var(--text-2); }
.minuut-run { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; align-items: center; justify-items: center; gap: 12px; padding: 0 16px 24px; min-height: 0; }
.mw-time { width: min(100%, 900px); height: 18px; border-radius: 9px; background: var(--glass); overflow: hidden; }
.mw-fill { height: 100%; background: linear-gradient(90deg, var(--mint), var(--lemon)); transform-origin: left; }
.mw-score { font-size: 30px; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; }
.mw-word { font-family: var(--font-read); font-weight: 700; font-size: clamp(80px, 19vmin, 200px); color: var(--cream); line-height: 1; padding-bottom: .1em; }
.mw-word.in { animation: wordin .18s ease-out; }
@keyframes wordin { from { transform: translateY(10px); opacity: .7; } }
.mw-btns { display: flex; gap: clamp(20px, 6vmin, 80px); align-items: center; }
.mw-ok, .mw-bad { border-radius: 50%; display: grid; place-items: center; color: #fff; }
.mw-ok { width: clamp(110px, 20vmin, 170px); height: clamp(110px, 20vmin, 170px); background: var(--mint); color: var(--ink); font-size: clamp(56px, 10vmin, 84px); box-shadow: 0 8px 0 var(--mint-d); }
.mw-bad { width: clamp(80px, 13vmin, 110px); height: clamp(80px, 13vmin, 110px); background: var(--bad); font-size: clamp(40px, 7vmin, 56px); box-shadow: 0 7px 0 #c94545; }
.mw-ok:active, .mw-bad:active { transform: translateY(6px); box-shadow: none; }
.mw-result { grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mw-big { font-size: clamp(110px, 24vmin, 220px); font-weight: 700; line-height: 1; color: var(--lemon); }
.mw-label { font-size: 26px; font-weight: 600; }
.mw-record { font-size: 28px; font-weight: 700; color: var(--mint); }
.mw-prev { font-size: 22px; color: var(--text-2); }
.mw-hist { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 6px 0; }
.mw-bar { --h: .5; width: 30px; height: calc(var(--h) * 90px + 14px); border-radius: 8px 8px 4px 4px; background: var(--sky); display: flex; justify-content: center; align-items: flex-start; }
.mw-bar:last-child { background: var(--lemon); }
.mw-bar b { font-size: 14px; color: var(--ink); margin-top: 2px; }

/* ---------- ouderhoek ---------- */
.parent { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: text; user-select: text; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.p-head h1 { margin: 0; font-family: var(--font-ui); font-size: 30px; }
.p-close { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 17px; font-weight: 600; }
.p-tabs { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.p-tab { padding: 10px 16px; border-radius: 999px; font-size: 17px; font-weight: 600; color: var(--ink-2); background: #efe2c6; white-space: nowrap; }
.p-tab.on { background: var(--ink); color: var(--cream); }
.p-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 40px; }
.p-sec { max-width: 860px; margin: 0 auto 14px; padding: 16px 18px; border-radius: 20px; background: #fffdf8; box-shadow: 0 1px 0 #eadcbf, 0 6px 18px rgba(36, 26, 74, .06); display: flex; flex-direction: column; gap: 10px; }
.p-sec h2 { margin: 0; font-size: 19px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .01em; }
.p-help { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 70ch; }
.p-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.p-day { border-radius: 12px; padding: 8px 4px; text-align: center; background: #f3ead8; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.p-day b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.p-day.on { background: #d9fbe9; color: var(--ink); }
.p-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.p-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.p-stat { border-radius: 14px; background: #f7f0e1; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.p-stat b { font-size: 26px; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.p-stat span { font-size: 13px; color: var(--ink-2); }
.p-planets { display: flex; flex-direction: column; gap: 8px; }
.p-planet { border-radius: 14px; background: #f7f0e1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.p-planet.op-slot { opacity: .55; }
.pp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pp-status { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #e8dcc3; }
.p-planet.beheerst .pp-status { background: #c9f5dd; }
.p-planet.bezig .pp-status { background: #ffe8a8; }
.pp-type { font-size: 14px; color: var(--ink-2); }
.pp-bar { position: relative; height: 22px; border-radius: 11px; background: #e8dcc3; overflow: hidden; }
.pp-bar i { position: absolute; inset: 0 auto 0 0; background: var(--mint); border-radius: 11px; }
.pp-bar span { position: relative; font-size: 13px; line-height: 22px; padding-left: 10px; font-weight: 600; }
.pp-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-levels span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #fffdf8; }
.pp-note { font-size: 13px; color: #9a5b00; }
.p-chips, .p-words { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip, .p-word { font-size: 15px; padding: 6px 12px; border-radius: 999px; background: #f3ead8; }
.p-chip b { font-family: var(--font-read); font-size: 18px; }
.p-chip em, .p-word em { font-style: normal; color: var(--ink-2); font-size: 13px; }
.p-minuut { display: flex; flex-direction: column; gap: 8px; }
.p-mrow { display: grid; grid-template-columns: minmax(110px, auto) 140px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.p-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid #e1d2b4; background: #fff; color: var(--ink); font-size: 17px; }
.p-ta { font-family: ui-monospace, monospace; font-size: 13px; resize: vertical; }
.p-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.p-opt { padding: 10px 14px; border-radius: 12px; background: #f3ead8; font-size: 16px; font-weight: 600; color: var(--ink); }
.p-opt.on { background: var(--ink); color: var(--cream); }
.p-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.p-letters.readonly { opacity: .7; }
.p-letter { min-width: 46px; padding: 8px 10px; border-radius: 10px; background: #efe2c6; color: #9a8c70; font-family: var(--font-read); font-size: 22px; font-weight: 700; text-decoration: line-through; }
.p-letter.on { background: #d9fbe9; color: var(--ink); text-decoration: none; }
.p-toggle { display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; }
.p-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.p-sw { width: 52px; height: 30px; border-radius: 15px; background: #d9cbb0; position: relative; flex: none; transition: background .2s; }
.p-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.p-toggle input:checked + .p-sw { background: var(--mint-d); }
.p-toggle input:checked + .p-sw::after { transform: translateX(22px); }
.p-toggle input:focus-visible + .p-sw { outline: 3px solid var(--ink); outline-offset: 2px; }
.p-btn { align-self: flex-start; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--cream); font-size: 16px; font-weight: 600; }
.p-btn.danger { background: #b3261e; }
.p-row { display: flex; gap: 8px; flex-wrap: wrap; }
.p-msg { min-height: 1.2em; }
.p-tips { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; }
.p-tip { padding: 14px 18px; border-radius: 18px; background: #fffdf8; box-shadow: 0 1px 0 #eadcbf; }
.p-tip h3 { margin: 0 0 4px; font-size: 18px; font-family: var(--font-ui); font-weight: 600; }
.p-tip p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.p-about p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.gate .g-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.g-box p { margin: 0; font-size: 18px; color: var(--ink-2); }
.g-q { font-size: 44px; font-weight: 700; font-family: var(--font-ui); }
.g-out { font-size: 36px; font-weight: 700; letter-spacing: .2em; min-width: 3ch; text-align: center; padding: 4px 12px; border-radius: 12px; background: #f3ead8; font-family: var(--font-ui); }
.g-out.shake { animation: shake .4s; }
.g-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.g-key { height: 64px; border-radius: 16px; background: #fffdf8; box-shadow: 0 3px 0 #e1d2b4; font-size: 26px; font-weight: 700; color: var(--ink); font-family: var(--font-ui); }
.g-key:active { transform: translateY(2px); box-shadow: none; }

/* ---------- vliegende ster, confetti ---------- */
.fly-star { position: fixed; z-index: 70; width: 44px; height: 44px; pointer-events: none; }
.fly-star svg { width: 100%; height: 100%; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
.oops { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center; }

/* ---------- kleine schermen (telefoon) ---------- */
@media (max-width: 560px) {
  :root { --tile: clamp(42px, 15vw, 60px); --card: clamp(88px, 28vw, 112px); --gap: 10px; }
  .home-nav { gap: 8px; flex-wrap: nowrap; }
  .nav-btn { width: clamp(72px, 21vw, 92px); height: clamp(72px, 21vw, 92px); border-radius: 22px; font-size: 13px; }
  .nav-btn .ico { font-size: 32px; }
  .topbar { min-height: 60px; padding: 8px 10px 4px; gap: 8px; }
  .icon-btn { width: 48px; height: 48px; font-size: 22px; }
  .stars-count, .flame-badge { font-size: 19px; padding: 6px 10px 6px 8px; }
  .dot { width: 11px; height: 11px; }
  .dots { gap: 5px; }
  .home-top .brand { font-size: 20px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hangar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zoem-zone { padding: 8px 0; }
  .read-area { flex-direction: column; gap: 6px; }
  .read-area .help-btn { position: static; transform: none; width: 54px; height: 54px; font-size: 30px; }
  .slot-nose { display: none; }
  .robo-area { flex-direction: column; gap: 8px; }
  .track { padding-right: 46px; }
  .finish { font-size: 28px; }
  .p-mrow { grid-template-columns: 1fr; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --tile: clamp(36px, 10vmin, 80px); --card: clamp(76px, 20vmin, 150px); }
  .home { grid-template-rows: 1fr auto auto; }
  .mission { display: none; }
}

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