html, body { height: 100%; margin: 0; background: #1b1430; overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }
body { display: flex; flex-direction: column; font-family: system-ui, sans-serif; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

#hud { height: 36px; font-size: 1.05rem; font-weight: 600; background: #2a1f4d; flex: 0 0 auto; }
.hud-label { opacity: .9; }

#game { flex: 1 1 auto; min-height: 0; position: relative; }
#game canvas { display: block; }

/* ---- touch controls: shown only on touch devices ---- */
#touch-controls { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
body.touch-ui #touch-controls { display: flex; justify-content: space-between; align-items: flex-end; }
.tc-left, .tc-right { display: flex; gap: 14px; pointer-events: auto; }
.tc-btn { width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18); color: #fff; font-size: 30px; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tc-btn.active { background: rgba(255,255,255,.45); transform: scale(.94); }
.tc-jump { width: 92px; height: 92px; background: rgba(92,190,74,.35); border-color: rgba(92,190,74,.8); }

/* ---- overlays ---- */
#overlay { position: fixed; inset: 0; background: rgba(20,12,40,.75); display: flex; z-index: 20; padding: 16px; overflow-y: auto; }
.panel { width: 100%; max-width: 420px; margin: auto; }
.panel-wide { max-width: min(1280px, 100%); }   /* elastic: as wide as the screen allows (title, shop) */
#panel-title .pick { width: 112px; } #panel-title .pick img, #panel-title .pick-none { width: 68px; height: 68px; }
#pick-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
#pick-levels .pick-level { width: auto; padding: 4px 2px 3px; white-space: nowrap; font-size: .7rem; letter-spacing: -.01em; }
#overlay .card-body { padding: .8rem 1rem; }
.pick-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #6c757d; margin-top: .5rem; }
.pick-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.pick { width: 96px; border: 2px solid #dee2e6; border-radius: 12px; background: #f8f9fa; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; font-size: .75rem; color: #333; position: relative; }
.pick img { width: 56px; height: 56px; }
.pick-none { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #999; }
.pick.selected { border-color: #198754; background: #e7f5ec; box-shadow: 0 0 0 3px rgba(25,135,84,.25); }
.pick.locked { opacity: .55; filter: grayscale(1); }
.pick .lock { font-size: .62rem; color: #dc3545; line-height: 1.1; }
.pick-level { width: 110px; }
:root { --card-w: 112px; }
.shop-item { width: var(--card-w); border: 2px solid #dee2e6; border-radius: 12px; background: #f8f9fa; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .75rem; }
.shop-item img, .shop-item .pick-none { width: 64px; height: 64px; }
.shop-item .btn, .shop-item > .badge { white-space: nowrap; margin-top: auto; }
.shop-sections { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 2px 0 8px; }
.shop-sec { border: 2px solid #dee2e6; background: #f8f9fa; color: #3c286e; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 1rem; }
.shop-sec:hover { border-color: #3c286e; }
.shop-sec.on { background: #3c286e; border-color: #3c286e; color: #fff; }
.shop-sec.premium { border-color: #e0b84a; }
.shop-sec.premium.on { background: linear-gradient(135deg, #2a1f4d, #4a2f7a); color: #ffd76a; }
#shop-pages { min-height: 330px; display: flex; flex-direction: column; justify-content: center; }
.shop-page:not(.on) { display: none; }
.shop-page .pick-row { max-width: calc(var(--per-row, 99) * (var(--card-w) + 8px)); margin-inline: auto; }
.shop-item.wide { width: calc(var(--card-w) + 24px); }
.shop-item.equipped { border-color: #198754; background: #e7f5ec; }
.shop-name { font-weight: 600; white-space: nowrap; }
.shop-item img.ride-pic { object-fit: contain; }
.pick-power { display: block; font-size: .68rem; opacity: .85; white-space: nowrap; }
.shop-perk { font-size: .7rem; line-height: 1.15; opacity: .85; margin: 1px 0 4px; text-align: center; }
.pick-num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #3c286e; }
@media (max-height: 520px) { .pick, #panel-title .pick:not(.pick-level) { width: 72px; } #panel-title .pick img { width: 40px; height: 40px; } .pick img, .pick-none { width: 40px; height: 40px; } #overlay .card-body { padding: .4rem .6rem; } .display-6 { font-size: 1.4rem; }
  :root { --card-w: 100px; } .shop-item { padding: 4px 3px; } .shop-item img, .shop-item .pick-none { width: 44px; height: 44px; } #shop-pages { min-height: 0; } .shop-name .dia { display: none; } .shop-sec { padding: 3px 12px; font-size: .9rem; } .shop-sections { margin-bottom: 4px; } }

/* ---- power-ups ---- */
#hud-powers .pw { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 8px; padding: 0 6px; font-size: .95rem; line-height: 26px; min-width: 44px; position: relative; }
#hud-powers .pw:disabled { opacity: .35; }
#hud-powers .pw.on { background: rgba(255,200,60,.35); border-color: #ffc83c; }
#hud-powers .pw .n { font-size: .75rem; margin-left: 2px; }
#hud-powers .pw .k { position: absolute; top: -6px; left: 2px; font-size: .55rem; opacity: .6; }
/* the hero's super power: a round button whose ring fills up while it recharges (--p: 0 … 1) */
.hero-pw { --p: 1; border-radius: 50%; border: 0; padding: 3px; background: conic-gradient(#ffd24a calc(var(--p) * 1turn), rgba(255,255,255,.18) 0); position: relative; flex: 0 0 auto; }
.hero-pw .i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #2a1d4a; transition: background .2s, box-shadow .2s; }
.hero-pw.ready .i { background: #6a44d6; box-shadow: 0 0 10px 2px rgba(255,210,74,.75); }
.hero-pw.busy .i { background: #3a8fd6; }
#hud-hero { width: 34px; height: 34px; margin: 0 6px; font-size: 1.05rem; line-height: 1; color: #fff; }
#hud-hero .k { position: absolute; right: -4px; bottom: -4px; font-size: .55rem; background: #000a; border-radius: 4px; padding: 0 3px; }
.tc-power { width: 74px; height: 74px; margin-right: 6px; font-size: 30px; }
.tc-power.ready { animation: pwPulse 1.2s ease-in-out infinite; }
@keyframes pwPulse { 50% { transform: scale(1.06); } }
.tc-fire { width: 74px; height: 74px; background: rgba(255,120,30,.35); border-color: rgba(255,150,60,.85); margin-right: 6px; }
.shop-item.premium { border-color: #e0b84a; background: linear-gradient(160deg, #fff4cc, #fffdf5); box-shadow: 0 2px 8px rgba(224,184,74,.35); }
.premium-box { border: 2px solid #e0b84a; border-radius: 16px; padding: 4px 6px 8px; background: linear-gradient(135deg, #2a1f4d, #4a2f7a); }
.premium-box .premium-title { color: #ffd76a; font-weight: 700; }
.shop-item .count { font-size: .7rem; color: #6c757d; }
@media (max-width: 700px) { #hud-powers .pw { min-width: 34px; padding: 0 3px; font-size: .85rem; } #hud-powers .pw .k { display: none; } }

/* ---- quiz: liquid-glass pop-up ---- */
#quiz { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(246, 243, 255, .45); backdrop-filter: blur(18px) saturate(75%) contrast(.7) brightness(1.12); -webkit-backdrop-filter: blur(18px) saturate(75%) contrast(.7) brightness(1.12); overflow-y: auto; }
#quiz .qz-card { width: min(760px, 100%); max-height: 100%; overflow-y: auto; color: #fff; border-radius: 28px; padding: 18px 22px 20px;
  background: linear-gradient(145deg, rgba(86,62,168,.80), rgba(52,34,118,.76)); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 20px 60px rgba(10,5,30,.45), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#quiz .qz-top { border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 8px; margin-bottom: 10px; display: grid; grid-template-columns: 156px 1fr; gap: 4px 14px; align-items: center; }
#quiz .qz-host { width: 156px; height: 170px; }
#quiz .qz-host .alien { width: 100%; height: 100%; }
#quiz .qz-right { min-width: 0; }
#quiz .qz-bubble { position: relative; background: rgba(255,255,255,.94); color: #2a1f4d; text-shadow: none; border-radius: 18px; padding: 7px 14px 9px; font-weight: 700; font-size: 1.15rem; line-height: 1.3; min-height: 50px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
#quiz .qz-bubble::before { content: ''; position: absolute; left: -11px; top: 20px; border: 11px solid transparent; border-right-color: rgba(255,255,255,.94); border-left: 0; }
#quiz .qz-who { display: block; color: #4e8a1e; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
#quiz .qz-bubble.pop { animation: qzBubble .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes qzBubble { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } }
#quiz .qz-head { margin-top: 8px; }
#quiz .qz-card.qz-nope { animation: qzNope .4s ease; }
#quiz .qz-card.qz-shake { animation: qzShake .45s ease; }
@keyframes qzNope { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes qzShake { 15% { transform: translate(-8px, 5px) rotate(-1deg); } 30% { transform: translate(9px, -6px) rotate(1deg); } 45% { transform: translate(-6px, 4px); } 60% { transform: translate(5px, -3px); } 80% { transform: translate(-2px, 2px); } }
#quiz .qz-title { font-weight: 800; font-size: 1.25rem; color: var(--accent); }
#quiz .qz-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
#quiz .badge { background: rgba(255,255,255,.22); font-weight: 600; } #quiz .badge.again { background: #d9534f; } #quiz .badge.easy { background: #17a2b8; }
#quiz .qz-hearts { margin-left: auto; letter-spacing: 2px; }
#quiz .qz-say { border: 0; background: rgba(255,255,255,.2); border-radius: 50%; width: 36px; height: 36px; font-size: 1.1rem; }
#quiz .qz-q { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; margin: 6px 0 8px; }
#quiz .qz-clues { font-size: 1.25rem; padding-left: 1.4rem; margin-bottom: 8px; } #quiz .qz-clues li { margin: 3px 0; } #quiz .qz-clues li.new { animation: qzIn .35s ease; }
@keyframes qzIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#quiz .qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
#quiz .qz-pick { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18); color: #fff; border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; font-weight: 700; font-size: 1rem; transition: transform .1s, background .1s; }
#quiz .qz-pick:hover { background: rgba(255,255,255,.3); transform: translateY(-2px); } #quiz .qz-pick:active { transform: scale(.96); }
#quiz .qz-pick .e { font-size: 2.6rem; line-height: 1.1; } #quiz .qz-pick .n { font-size: 2rem; }
#quiz .qz-type { display: flex; gap: 8px; margin-top: 10px; } #quiz .qz-type input { flex: 1; font-size: 1.6rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.85); padding: 6px 14px; min-width: 0; }
#quiz .qz-type .btn { font-size: 1.3rem; border-radius: 14px; padding: 0 22px; }
#quiz .qz-feedback { margin-top: 10px; font-size: 1.1rem; } #quiz .qz-feedback .ok { color: #9dffb4; font-weight: 700; font-size: 1.3rem; } #quiz .qz-feedback .bad { color: #ffb3b3; font-weight: 600; }
#quiz .qz-feedback .big { font-size: 1.4rem; } #quiz .qz-feedback .fact { margin-top: 6px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 6px 10px; }
#quiz .qz-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
@media (max-width: 768px), (max-height: 520px) { #quiz .qz-top { grid-template-columns: 92px 1fr; } #quiz .qz-host { width: 92px; height: 100px; } #quiz .qz-bubble { font-size: 1rem; min-height: 0; } #quiz { padding: 0; } #quiz .qz-card { width: 100%; height: 100%; max-height: none; border-radius: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); } #quiz .qz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-height: 520px) { #quiz .qz-top { grid-template-columns: 70px 1fr; padding-bottom: 4px; margin-bottom: 6px; } #quiz .qz-host { width: 70px; height: 76px; } #quiz .qz-who { display: none; } #quiz .qz-bubble { padding: 5px 12px; } #quiz .qz-head { margin-top: 4px; } #quiz .qz-title { font-size: 1rem; } #quiz .qz-boom { height: 130px; } #quiz .qz-q { font-size: 1.4rem; } #quiz .qz-pick .e { font-size: 1.8rem; } #quiz .qz-clues { font-size: 1rem; } }
body.quiz-open #touch-controls { display: none !important; }

#rotate-hint { position: fixed; inset: 0; z-index: 30; background: #1b1430; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.6rem; line-height: 1.4; }

/* ---- Blip, the quiz alien (js/alien.js) ---- */
.alien { overflow: visible; display: block; --g: #8cc63f; --ink: #161616; --dk: #3e6e17; }
.alien * { transform-box: view-box; }
.alien .head, .alien .legs, .alien .ant circle:not(.shine) { fill: var(--g); }
.alien .ant .shine { fill: #fff; opacity: .35; }
.alien .ant path, .alien .limb, .alien .finger { fill: none; stroke: var(--g); stroke-linecap: round; }
.alien .ant path { stroke-width: 9; } .alien .limb { stroke-width: 9; } .alien .finger { stroke-width: 6; }
.alien .arm circle { fill: var(--g); }
.alien .ant-l { transform-origin: 68px 98px; } .alien .ant-r { transform-origin: 172px 98px; }
.alien .freckles { fill: #d9e84a; transition: opacity .3s; }
.alien .sclera { fill: #fff; }
.alien .pupil { transform: translate(calc(var(--px, 0) * var(--r)), calc(var(--py, 0) * var(--r))) scale(var(--ps, 1)); transition: transform .18s ease-out; }
.alien .p-star { fill: #ffcf33; stroke: #e07a00; stroke-width: 2; display: none; }
.alien .lid, .alien .lid-lo { fill: var(--g); transform: scaleY(0); transition: transform .22s; }
.alien .lashes { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.alien .brow { fill: none; stroke: var(--dk); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: transform .25s, opacity .25s; }
.alien .ant, .alien .arm { transition: transform .35s; }
.alien .m { display: none; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.alien g.m { stroke: none; } .alien .m-fill { fill: var(--ink); } .alien .m-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.alien[data-mouth="smile"] .m-smile, .alien[data-mouth="flat"] .m-flat, .alien[data-mouth="frown"] .m-frown, .alien[data-mouth="squiggle"] .m-squiggle,
.alien[data-mouth="grin"] .m-grin, .alien[data-mouth="huge"] .m-huge, .alien[data-mouth="o"] .m-o, .alien[data-mouth="yawn"] .m-yawn { display: inline; }
.alien .x-tear { fill: #6cc6ff; opacity: 0; }
.alien .x-sweat { fill: #bfe9ff; opacity: 0; }
.alien .x-spark { fill: #fff27a; stroke: #ffb000; stroke-width: 1.5; opacity: 0; }
.alien .x-halo { opacity: 0; transform-origin: 120px 130px; }
.alien .x-q { font: 900 46px system-ui, sans-serif; fill: #ffe066; stroke: #7a4d00; stroke-width: 3; paint-order: stroke; opacity: 0; transform-origin: 204px 68px; }
.alien .x-zzz text { font: 900 20px system-ui, sans-serif; fill: #fff; stroke: #3c286e; stroke-width: 3; paint-order: stroke; }
.alien .x-zzz { opacity: 0; }
.alien .al-move { transform-origin: 120px 256px; animation: alFloat 3s ease-in-out infinite; }
.alien .al-tilt { transform-origin: 120px 150px; }
.alien .arm-l { transform: rotate(4deg); } .alien .arm-r { transform: rotate(-4deg); }

/* blinking */
.alien.blink .lid { transform: scaleY(1.04) !important; transition-duration: .07s; }
.alien.fancy .lashes { opacity: 1; animation: alLash .42s ease-in-out 2; }
.alien.fancy .lid { animation: alBlink .42s ease-in-out 2; }
.alien.fancy .eye-c .lid, .alien.fancy .eye-c .lashes { animation-delay: .12s; }
.alien.fancy .eye-r .lid, .alien.fancy .eye-r .lashes { animation-delay: .24s; }
@keyframes alBlink { 0%, 100% { transform: scaleY(0); } 45%, 55% { transform: scaleY(1.04); } }
@keyframes alLash { 0%, 100% { transform: none; } 50% { transform: translateY(2px) scaleY(.4); } }

/* moods */
.alien:is([data-mood="bored"], [data-mood="sleepy"], [data-mood="sad"], [data-mood="confused"], [data-mood="wow"], [data-mood^="excited"]) .brow { opacity: 1; }
.alien[data-mood="bored"] .lid { transform: scaleY(.5); }
.alien[data-mood="bored"] .brow { transform: translateY(4px); }
.alien[data-mood="bored"] .al-move { animation: none; transform: translateY(3px); }
.alien[data-mood="bored"] .al-tilt { animation: alSway 5s ease-in-out infinite; }
.alien[data-mood="bored"] .ant-l { transform: rotate(-10deg); } .alien[data-mood="bored"] .ant-r { transform: rotate(8deg); }
.alien[data-mood="bored"] .arm-l { transform: rotate(-14deg); } .alien[data-mood="bored"] .arm-r { transform: rotate(14deg); }
.alien[data-mood="sleepy"] .lid { transform: scaleY(.84); }
.alien[data-mood="sleepy"] .brow { transform: translateY(5px); }
.alien[data-mood="sleepy"] .al-move { animation: alBreathe 3.6s ease-in-out infinite; }
.alien[data-mood="sleepy"] .al-tilt { transform: rotate(-7deg); }
.alien[data-mood="sleepy"] .ant-l { transform: rotate(-20deg); } .alien[data-mood="sleepy"] .ant-r { transform: rotate(16deg); }
.alien[data-mood="sleepy"] .arm-l { transform: rotate(-18deg); } .alien[data-mood="sleepy"] .arm-r { transform: rotate(18deg); }
.alien[data-mood="sleepy"] .x-zzz { opacity: 1; } .alien[data-mood="sleepy"] .x-zzz text { animation: alZzz 2.4s ease-in-out infinite; }
.alien .x-zzz text:nth-child(2) { animation-delay: .4s !important; } .alien .x-zzz text:nth-child(3) { animation-delay: .8s !important; }
.alien[data-mood="happy"] .lid-lo { transform: scaleY(.26); }
.alien[data-mood="happy"] .al-move { animation: alBounce .55s ease-out 2, alFloat 3s ease-in-out 1.1s infinite; }
.alien[data-mood="happy"] .arm-r { animation: alHi .5s ease-in-out infinite alternate; }
.alien[data-mood="happy"] .ant-l { animation: alWobL 1.2s ease-in-out infinite; } .alien[data-mood="happy"] .ant-r { animation: alWobR 1.2s ease-in-out infinite; }
.alien[data-mood^="excited"] .brow { transform: translateY(-4px); }
.alien[data-mood="excited"] .al-move { animation: alBounce .5s ease-out infinite; }
.alien[data-mood="excited"] .arm-l { transform: rotate(128deg); } .alien[data-mood="excited"] .arm-r { transform: rotate(-128deg); }
.alien[data-mood="excited"] .ant-l { animation: alWobL .5s ease-in-out infinite; } .alien[data-mood="excited"] .ant-r { animation: alWobR .5s ease-in-out infinite; }
.alien[data-mood="excited2"], .alien[data-mood="excited3"] { --ps: 1.12; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .al-move { animation: alJump .42s ease-in-out infinite; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .arm-l { animation: alWaveL .26s ease-in-out infinite alternate; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .arm-r { animation: alWaveR .26s ease-in-out infinite alternate; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .ant-l { animation: alWobL .26s ease-in-out infinite; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .ant-r { animation: alWobR .26s ease-in-out infinite; }
.alien:is([data-mood="excited2"], [data-mood="excited3"]) .x-spark { animation: alTwinkle .9s ease-in-out infinite; }
.alien[data-mood="excited3"] .al-tilt { animation: alSpin .75s ease-in-out, alWiggle .5s ease-in-out .75s infinite; }
.alien[data-mood="excited3"] .p-round { display: none; } .alien[data-mood="excited3"] .p-star { display: inline; animation: alSpinStar 1.4s linear infinite; }
.alien[data-mood="excited3"] .x-halo { opacity: 1; animation: alHalo 1.2s linear infinite; }
.alien[data-mood="sad"] .lid { transform: scaleY(.38); }
.alien[data-mood="sad"] .eye-l .brow { transform: translateY(2px) rotate(-18deg); } .alien[data-mood="sad"] .eye-r .brow { transform: translateY(2px) rotate(18deg); }
.alien[data-mood="sad"] .eye-c .brow { transform: translateY(2px) scaleY(-.7); }
.alien[data-mood="sad"] .al-move { animation: alBreathe 3s ease-in-out infinite; transform: translateY(8px); }
.alien[data-mood="sad"] .ant-l { transform: rotate(-22deg); } .alien[data-mood="sad"] .ant-r { transform: rotate(20deg); }
.alien[data-mood="sad"] .arm-l { transform: rotate(-24deg); } .alien[data-mood="sad"] .arm-r { transform: rotate(24deg); }
.alien[data-mood="sad"] .x-tear { animation: alTear 1.6s ease-in infinite; }
.alien[data-mood="sad"] .freckles { opacity: .45; }
.alien[data-mood="confused"] .al-tilt { animation: alTilt 2.4s ease-in-out infinite; }
.alien[data-mood="confused"] .eye-l .brow { transform: translateY(-5px) rotate(-12deg); } .alien[data-mood="confused"] .eye-r .brow { transform: translateY(3px) rotate(14deg); }
.alien[data-mood="confused"] .eye-c .brow { transform: translateY(-3px) rotate(8deg); }
.alien[data-mood="confused"] .eye-l .pupil { transform: translate(var(--r), 2px); } .alien[data-mood="confused"] .eye-r .pupil { transform: translate(calc(var(--r) * -1), -3px); }
.alien[data-mood="confused"] .eye-c .pupil { transform: translate(0, calc(var(--r) * -1)); }
.alien[data-mood="confused"] .x-q { opacity: 1; animation: alQ 1.4s ease-in-out infinite; }
.alien[data-mood="confused"] .ant-l { transform: rotate(18deg); } .alien[data-mood="confused"] .ant-r { transform: rotate(26deg); }
.alien[data-mood="confused"] .arm-r { animation: alScratch .35s ease-in-out infinite alternate; }
.alien[data-mood="wow"] { --ps: .68; }
.alien[data-mood="wow"] .brow { transform: translateY(-6px); }
.alien[data-mood="wow"] .al-move { animation: none; }
.alien[data-mood="wow"] .al-tilt { animation: alShake .12s linear infinite; }
.alien[data-mood="wow"] .arm-l { transform: rotate(150deg); } .alien[data-mood="wow"] .arm-r { transform: rotate(-150deg); }
.alien[data-mood="wow"] .ant-l { transform: rotate(-10deg); } .alien[data-mood="wow"] .ant-r { transform: rotate(10deg); }
.alien[data-mood="wow"] .x-sweat { animation: alSweat 1s ease-in infinite; }

@keyframes alFloat { 50% { transform: translateY(-5px); } }
@keyframes alBreathe { 0%, 100% { transform: translateY(8px) scale(1, 1); } 50% { transform: translateY(8px) scale(1.02, .98); } }
@keyframes alBounce { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) scale(.96, 1.04); } 62% { transform: scale(1.05, .95); } }
@keyframes alJump { 0%, 100% { transform: scale(1.07, .93); } 45% { transform: translateY(-26px) scale(.94, 1.07); } }
@keyframes alSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes alTilt { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(5deg); } }
@keyframes alWiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes alSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes alShake { 0% { transform: translate(-1.5px, 0) rotate(-1.5deg); } 50% { transform: translate(1.5px, -1px) rotate(1.5deg); } 100% { transform: translate(-1.5px, 0) rotate(-1.5deg); } }
@keyframes alWobL { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes alWobR { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } }
@keyframes alHi { from { transform: rotate(-138deg); } to { transform: rotate(-108deg); } }
@keyframes alWaveL { from { transform: rotate(100deg); } to { transform: rotate(145deg); } }
@keyframes alWaveR { from { transform: rotate(-100deg); } to { transform: rotate(-145deg); } }
@keyframes alScratch { from { transform: rotate(-158deg); } to { transform: rotate(-146deg); } }
@keyframes alTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(40deg); } }
@keyframes alSpinStar { to { transform: rotate(360deg); } }
@keyframes alHalo { 0% { filter: hue-rotate(0); transform: scale(.92); } 50% { transform: scale(1.04); } 100% { filter: hue-rotate(360deg); transform: scale(.92); } }
@keyframes alTear { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes alSweat { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes alQ { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-7px) rotate(10deg); } }
@keyframes alZzz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -10px); } }
@media (prefers-reduced-motion: reduce) { .alien *, .alien .al-move, .alien .al-tilt { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ---- the dynamite box: prizes pop out of an explosion ---- */
#quiz .qz-boom { position: relative; height: 172px; max-width: 460px; margin: 4px auto 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#quiz .qz-boom .crate { position: absolute; left: 50%; bottom: 2px; width: 124px; margin-left: -62px; transform-origin: 50% 100%; }
#quiz .qz-boom .crate svg { width: 100%; display: block; overflow: visible; }
.qz-boom .sticks rect { fill: #e8453c; stroke: #8a1c14; stroke-width: 3; } .qz-boom .sticks .cap { fill: #ff8a7a; stroke: none; } .qz-boom .sticks .tape { fill: #2a1f1a; stroke: none; }
.qz-boom .fuse { fill: none; stroke: #6b4a2a; stroke-width: 4; stroke-linecap: round; }
.qz-boom .spark .glow { fill: #ffb000; opacity: .45; } .qz-boom .spark path { fill: #ffe46b; }
.qz-boom .spark-in { animation: bxSpark .12s linear infinite alternate; transform-origin: 0 0; }
.qz-boom .box rect { fill: #c98a4a; stroke: #6b4220; stroke-width: 4; } .qz-boom .box .plank { stroke: #8a5a2e; stroke-width: 3; }
.qz-boom .box circle { fill: #6b4220; } .qz-boom .box text { font: 900 24px system-ui, sans-serif; fill: #a3231a; text-anchor: middle; letter-spacing: 1px; text-shadow: none; }
.qz-boom[data-state="drop"] .crate { animation: bxDrop .42s cubic-bezier(.3,1.35,.6,1) both; }
.qz-boom[data-state="fuse"] .crate { animation: bxWobble .5s ease-in-out infinite; }
.qz-boom.hot[data-state="fuse"] .crate { animation: bxShake .09s linear infinite; }
.qz-boom:is([data-state="boom"], [data-state="prizes"]) .crate { display: none; }
.qz-boom .blast { position: absolute; left: 50%; top: 58%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; opacity: 0; transform: scale(0); pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #fff3a0 30%, #ffb52e 48%, #ff5a1f 62%, rgba(255,60,0,0) 72%); }
.qz-boom .ring { position: absolute; left: 50%; top: 58%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 6px solid rgba(255,240,180,.9); opacity: 0; pointer-events: none; }
.qz-boom:is([data-state="boom"], [data-state="prizes"]) .blast { animation: bxBlast .6s ease-out forwards; }
.qz-boom:is([data-state="boom"], [data-state="prizes"]) .ring { animation: bxRing .55s ease-out forwards; }
.qz-boom .bits { position: absolute; inset: 0; pointer-events: none; }
.qz-boom .bit, .qz-boom .conf, .qz-boom .puff { position: absolute; left: 50%; top: 58%; }
.qz-boom .bit { width: 18px; height: 8px; margin: -4px 0 0 -9px; background: #c98a4a; border: 2px solid #6b4220; border-radius: 2px; animation: bxFly 1s cubic-bezier(.15,.7,.4,1) forwards; }
.qz-boom .conf { width: 8px; height: 12px; margin: -6px 0 0 -4px; background: var(--c); border-radius: 2px; animation: bxFly 1.3s cubic-bezier(.15,.7,.4,1) forwards; }
.qz-boom .puff { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(235,232,245,.85); animation: bxPuff 1.2s ease-out forwards; opacity: 0; }
.qz-boom .qz-prizes { position: absolute; inset: 0; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; pointer-events: none; }
#quiz .qz-feedback .prize-pop { opacity: 0; transform: scale(0); background: rgba(255,255,255,.96); color: #2a1f4d; text-shadow: none; border-radius: 20px; padding: 8px 16px 10px; font-weight: 800; font-size: 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 4px rgba(255,215,90,.7); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
#quiz .qz-feedback .prize-pop .pi { font-size: 2.6rem; line-height: 1.05; }
#quiz .qz-feedback .prize-pop small { font-size: .75rem; font-weight: 700; color: #6a4bc4; }
#quiz .qz-feedback .prize-pop.super { font-size: 1.35rem; background: linear-gradient(160deg, #fff7c2, #ffffff 55%, #ffe3f6); box-shadow: 0 8px 26px rgba(0,0,0,.3), 0 0 0 4px #ffd24a, 0 0 26px 6px rgba(255,210,74,.75); }
#quiz .qz-feedback .prize-pop.super .pi { font-size: 3.2rem; }
.qz-boom[data-state="prizes"] .prize-pop { animation: bxPop .55s cubic-bezier(.3,1.6,.5,1) forwards, bxFloat 2.4s ease-in-out infinite; }
@keyframes bxDrop { from { transform: translateY(-140px) scale(.8); opacity: 0; } 70% { transform: translateY(0) scale(1.08, .9); opacity: 1; } to { transform: none; } }
@keyframes bxWobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes bxShake { 0% { transform: translate(-3px, 0) rotate(-3deg) scale(1.04); } 50% { transform: translate(3px, -2px) rotate(3deg) scale(1.08); } 100% { transform: translate(-3px, 0) rotate(-3deg) scale(1.04); } }
@keyframes bxSpark { from { transform: scale(.75) rotate(0); } to { transform: scale(1.25) rotate(35deg); } }
@keyframes bxBlast { 0% { opacity: 1; transform: scale(.2); } 60% { opacity: 1; transform: scale(2.2); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes bxRing { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(4.2); } }
@keyframes bxFly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 55% { transform: translate(calc(var(--dx) * .8), var(--dy)) rotate(calc(var(--r) * .6)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)); opacity: 0; } }
@keyframes bxPuff { 0% { opacity: .9; transform: translate(0, 0) scale(.3); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) - 40px)) scale(var(--s)); } }
@keyframes bxPop { 0% { opacity: 0; transform: translateY(30px) scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes bxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .qz-boom .bit, .qz-boom .conf, #quiz .qz-card.qz-shake, #quiz .qz-card.qz-nope { animation: none !important; } }

/* ---- the front door: keypad / new family / join (js/door.js) ---- */
#door { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(circle at 30% 20%, #5b3fb0 0, transparent 55%), radial-gradient(circle at 80% 90%, #1f7ab0 0, transparent 50%), #22174a; color: #fff; }
#door .door-card { width: min(520px, 100%); margin: auto; text-align: center; }
#door .door-step { display: block; }
#door .door-logo { font-weight: 900; font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
#door .door-title { font-weight: 800; font-size: 1.6rem; margin-bottom: 10px; }
#door .door-sub { font-size: 1.15rem; opacity: .9; margin: 4px 0 14px; }
#door .door-small { font-size: .85rem; opacity: .75; } #door .door-small a { color: #ffd76a; }
#door .door-msg { min-height: 1.5em; font-weight: 600; margin: 6px 0; color: #c9f7a9; } #door .door-msg.bad { color: #ffb3b3; }
#door .door-dots { display: flex; gap: 16px; justify-content: center; margin: 8px 0 4px; }
#door .door-dots i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.8); transition: background .1s, transform .1s; }
#door .door-dots i.on { background: #ffd24a; border-color: #ffd24a; transform: scale(1.1); }
#door .door-dots.shake { animation: doorShake .42s ease; }
@keyframes doorShake { 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
#door .door-pad { display: grid; grid-template-columns: repeat(3, 84px); gap: 14px; justify-content: center; margin: 10px auto 0; touch-action: manipulation; }
#door .door-pad button { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff;
  font-size: 2rem; font-weight: 800; -webkit-tap-highlight-color: transparent; transition: transform .08s, background .08s; }
#door .door-pad button:active { transform: scale(.92); background: rgba(255,255,255,.35); }
#door .door-pad .door-pad-small { border-color: transparent; background: transparent; font-size: 1.6rem; }
#door .door-pad.disabled { opacity: .35; pointer-events: none; }
#door .door-offline { margin-top: 12px; font-size: .9rem; opacity: .8; }
#door .door-moon { font-size: 5rem; line-height: 1; margin-bottom: 8px; animation: doorMoon 4s ease-in-out infinite; }
@keyframes doorMoon { 50% { transform: translateY(-8px) rotate(-6deg); } }
#door form.door-step { text-align: left; }
#door .door-kid { display: grid; grid-template-columns: 1fr 170px 96px auto; gap: 6px; margin-bottom: 8px; align-items: center; }
#door .door-row { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; margin-bottom: 8px; }
#door .door-row label { font-weight: 700; } #door .door-row label small { display: block; font-weight: 400; opacity: .7; font-size: .78rem; }
#door .door-row-grown { background: rgba(255,255,255,.08); border-radius: 12px; padding: 8px 10px; }
#door .door-pin-input { text-align: center; font-weight: 800; letter-spacing: .18em; font-size: 1.1rem; padding-left: 4px; padding-right: 4px; }
#door .door-code { text-align: center; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#door .form-control, #door .form-select { font-size: 16px; }   /* 16px: no zoom on iPhone when tapping a field */
@media (max-width: 520px) { #door .door-kid { grid-template-columns: 1fr 1fr; } #door .door-kid [name=name] { grid-column: 1 / -1; } }
@media (max-height: 520px) {
  #door { align-items: flex-start; }
  #door .door-logo { font-size: 1.4rem; } #door .door-sub { margin: 0 0 4px; font-size: 1rem; }
  #door .door-pad { grid-template-columns: repeat(3, 56px); gap: 8px; } #door .door-pad button { width: 56px; height: 56px; font-size: 1.4rem; }
  #door [data-step="pin"] { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; text-align: center; }
  #door [data-step="pin"].d-none { display: none; }
  #door [data-step="pin"] .door-pad { grid-row: 1 / span 5; grid-column: 2; margin: 0; }
  #door .door-card { width: min(640px, 100%); }
}
body.door-open #rotate-hint { display: none !important; }
/* developer mode box (js/dev.js) */
.dev-box { border: 2px dashed #fd7e14; border-radius: 10px; padding: 6px 10px; background: #fff8ef; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---- Flag Quest: the bonus flag quiz (js/flags.js) — same liquid glass as the quiz ---- */
:is(#flags, #capitals) { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  background: rgba(230, 244, 255, .45); backdrop-filter: blur(18px) saturate(80%) brightness(1.1); -webkit-backdrop-filter: blur(18px) saturate(80%) brightness(1.1); }
:is(#flags, #capitals) .fl-card { width: min(820px, 100%); max-height: 100%; overflow-y: auto; color: #fff; border-radius: 28px; padding: 16px 22px 20px; position: relative;
  background: linear-gradient(145deg, rgba(28,110,170,.86), rgba(36,52,140,.82)); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 20px 60px rgba(10,5,30,.45), inset 0 1px 0 rgba(255,255,255,.6); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
:is(#flags, #capitals) .fl-top { display: grid; grid-template-columns: 120px 1fr; gap: 4px 14px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 8px; margin-bottom: 10px; }
:is(#flags, #capitals) .fl-host { width: 120px; height: 130px; } :is(#flags, #capitals) .fl-host .alien { width: 100%; height: 100%; }
:is(#flags, #capitals) .fl-right { min-width: 0; }
:is(#flags, #capitals) .fl-bubble { position: relative; background: rgba(255,255,255,.94); color: #1d2f5e; text-shadow: none; border-radius: 18px; padding: 7px 14px 9px; font-weight: 700; font-size: 1.1rem; line-height: 1.3; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
:is(#flags, #capitals) .fl-bubble::before { content: ''; position: absolute; left: -11px; top: 18px; border: 11px solid transparent; border-right-color: rgba(255,255,255,.94); border-left: 0; }
:is(#flags, #capitals) .fl-bubble.pop { animation: qzBubble .32s cubic-bezier(.3,1.5,.5,1); }
:is(#flags, #capitals) .fl-who { display: block; color: #4e8a1e; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
:is(#flags, #capitals) .fl-meta { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
:is(#flags, #capitals) .fl-title { font-weight: 800; font-size: 1.2rem; color: #9fe3ff; margin-right: 4px; }
:is(#flags, #capitals) .badge { background: rgba(255,255,255,.22); font-weight: 600; }
:is(#flags, #capitals) .fl-say, :is(#flags, #capitals) .fl-close { border: 0; background: rgba(255,255,255,.2); color: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 1.05rem; line-height: 1; }
:is(#flags, #capitals) .fl-say { margin-left: auto; }
:is(#flags, #capitals) .fl-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
:is(#flags, #capitals) .fl-ask { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
:is(#flags, #capitals) .fl-q { font-size: 1.3rem; font-weight: 700; opacity: .95; }
:is(#flags, #capitals) .fl-frame { padding: 8px; background: rgba(255,255,255,.18); border-radius: 16px; }
:is(#flags, #capitals) .fl-flag { display: block; height: min(220px, 30vh); aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.35); background: #fff; animation: flIn .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes flIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
:is(#flags, #capitals) .fl-country { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.1; color: #ffe27a; }
:is(#flags, #capitals) .fl-tag.new { background: #f0a500; color: #2a1f00; text-shadow: none; } :is(#flags, #capitals) .fl-tag.again { background: #d9534f; } :is(#flags, #capitals) .fl-tag.review { background: rgba(255,255,255,.25); }
:is(#flags, #capitals) .fl-grid { display: grid; gap: 10px; width: 100%; }
:is(#flags, #capitals) .fl-names { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
:is(#flags, #capitals) .fl-names.n3 { grid-template-columns: repeat(3, 1fr); }
:is(#flags, #capitals) .fl-names.n4 { grid-template-columns: repeat(2, 1fr); }
:is(#flags, #capitals) .fl-flags { grid-template-columns: repeat(4, 1fr); }
:is(#flags, #capitals) .fl-pick { position: relative; border: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.16); color: #fff; border-radius: 16px; padding: 12px 10px; font-weight: 800; font-size: 1.15rem; line-height: 1.15; transition: transform .1s, background .15s, opacity .2s; -webkit-tap-highlight-color: transparent; }
:is(#flags, #capitals) .fl-pick:hover:not(:disabled) { background: rgba(255,255,255,.3); transform: translateY(-2px); } :is(#flags, #capitals) .fl-pick:active:not(:disabled) { transform: scale(.96); }
:is(#flags, #capitals) .fl-pick .k { position: absolute; top: 3px; left: 8px; font-size: .62rem; opacity: .55; }
:is(#flags, #capitals) .fl-flags .fl-pick { padding: 8px; } :is(#flags, #capitals) .fl-flags .fl-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; background: #fff; display: block; }
:is(#flags, #capitals) .fl-pick.right { background: #2fa84f; border-color: #b7ffcb; opacity: 1; box-shadow: 0 0 0 4px rgba(124,242,154,.5); animation: flRight .5s ease; }
:is(#flags, #capitals) .fl-pick.wrong { background: #c9443f; border-color: #ffc2c2; animation: qzNope .4s ease; }
:is(#flags, #capitals) .fl-pick.dim { opacity: .4; }
@keyframes flRight { 40% { transform: scale(1.08); } }
:is(#flags, #capitals) .fl-feedback { margin-top: 10px; text-align: center; }
:is(#flags, #capitals) .fl-win { position: relative; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 1.15rem; }
:is(#flags, #capitals) .fl-plus { font-size: 1.6rem; font-weight: 900; color: #ffe27a; animation: flPlus .6s cubic-bezier(.3,1.7,.5,1); }
:is(#flags, #capitals) .fl-win.new .fl-plus { font-size: 2.4rem; text-shadow: 0 0 18px rgba(255,210,74,.9), 0 2px 0 #7a4d00; }
@keyframes flPlus { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
:is(#flags, #capitals) .fl-c { position: absolute; left: 30%; top: 30%; font-style: normal; font-size: 1.5rem; pointer-events: none; animation: flCoin 1.1s cubic-bezier(.2,.7,.4,1) both; }
@keyframes flCoin { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 60% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(200deg); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) scale(.8) rotate(360deg); opacity: 0; } }
:is(#flags, #capitals) .fl-bad { font-size: 1.1rem; color: #ffd0d0; } :is(#flags, #capitals) .fl-bad b { color: #fff; }
:is(#flags, #capitals) .fl-mini { height: 1.4em; vertical-align: -.35em; border-radius: 3px; background: #fff; margin: 0 2px; }
:is(#flags, #capitals) .fl-bonus { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 0; max-width: 520px; padding: 8px 14px; border-radius: 18px; font-weight: 800;
  background: linear-gradient(160deg, #fff7c2, #fff 55%, #ffe3f6); color: #2a1f4d; text-shadow: none; box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 3px #ffd24a;
  opacity: 0; animation: bxPop .55s cubic-bezier(.3,1.6,.5,1) forwards; }
:is(#flags, #capitals) .fl-bonus .bi { font-size: 1.8rem; } :is(#flags, #capitals) .fl-bonus b { color: #b06a00; white-space: nowrap; }
:is(#flags, #capitals) .fl-bonus.big { font-size: 1.2rem; box-shadow: 0 8px 26px rgba(0,0,0,.3), 0 0 0 4px #ffd24a, 0 0 30px 8px rgba(255,210,74,.7); } :is(#flags, #capitals) .fl-bonus.big .bi { font-size: 2.6rem; }
:is(#flags, #capitals) .fl-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
:is(#flags, #capitals) .fl-summary { text-align: center; }
:is(#flags, #capitals) .fl-big { font-size: 1.8rem; font-weight: 900; }
:is(#flags, #capitals) .fl-earned { font-size: 1.2rem; margin: 4px 0 8px; } :is(#flags, #capitals) .fl-earned b { color: #ffe27a; }
:is(#flags, #capitals) .fl-newflags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
:is(#flags, #capitals) .fl-newflags img { height: 44px; aspect-ratio: 4 / 3; border-radius: 4px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3); animation: flIn .4s cubic-bezier(.3,1.4,.5,1) both; }
:is(#flags, #capitals) .fl-conts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 18px; text-align: left; margin: 0 auto; max-width: 720px; }
:is(#flags, #capitals) .fl-cont { display: grid; grid-template-columns: 30px 1fr 110px 62px; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; }
:is(#flags, #capitals) .fl-cont .ci { font-size: 1.3rem; } :is(#flags, #capitals) .fl-cont .cv { text-align: right; font-variant-numeric: tabular-nums; }
:is(#flags, #capitals) .fl-cont .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; } :is(#flags, #capitals) .fl-cont .bar i { display: block; height: 100%; background: linear-gradient(90deg, #7cf29a, #ffe27a); border-radius: 99px; }
:is(#flags, #capitals) .fl-small { font-size: .82rem; opacity: .75; margin-top: 10px; }
/* phones: full screen; short landscape screens: the flag on the left, the answers on the right */
@media (max-width: 768px), (max-height: 520px) { :is(#flags, #capitals) { padding: 0; } :is(#flags, #capitals) .fl-card { width: 100%; height: 100%; max-height: none; border-radius: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  :is(#flags, #capitals) .fl-top { grid-template-columns: 80px 1fr; } :is(#flags, #capitals) .fl-host { width: 80px; height: 88px; } :is(#flags, #capitals) .fl-bubble { font-size: 1rem; } }
@media (max-height: 520px) {
  :is(#flags, #capitals) .fl-top { grid-template-columns: 60px 1fr; padding-bottom: 4px; margin-bottom: 8px; } :is(#flags, #capitals) .fl-host { width: 60px; height: 66px; } :is(#flags, #capitals) .fl-who { display: none; }
  :is(#flags, #capitals) .fl-bubble { padding: 4px 12px; font-size: .95rem; } :is(#flags, #capitals) .fl-meta { margin-top: 4px; } :is(#flags, #capitals) .fl-title { font-size: 1rem; }
  :is(#flags, #capitals) .fl-stage { flex-direction: row; align-items: center; gap: 16px; } :is(#flags, #capitals) .fl-ask { flex: 0 0 auto; } :is(#flags, #capitals) .fl-grid { flex: 1; }
  :is(#flags, #capitals) .fl-flag { height: 38vh; } :is(#flags, #capitals) .fl-q { font-size: 1rem; } :is(#flags, #capitals) .fl-names.n4, :is(#flags, #capitals) .fl-names.n3 { grid-template-columns: 1fr 1fr; } :is(#flags, #capitals) .fl-names { grid-template-columns: 1fr 1fr; }
  :is(#flags, #capitals) .fl-pick { padding: 8px; font-size: 1rem; } :is(#flags, #capitals) .fl-flags { grid-template-columns: 1fr 1fr; } :is(#flags, #capitals) .fl-flags .fl-pick img { height: 22vh; width: auto; margin: 0 auto; }
  :is(#flags, #capitals) .fl-stage.rev .fl-ask { max-width: 34%; } :is(#flags, #capitals) .fl-feedback { margin-top: 6px; } :is(#flags, #capitals) .fl-actions { margin-top: 6px; } :is(#flags, #capitals) .fl-big { font-size: 1.3rem; } }
@media (max-width: 520px) { :is(#flags, #capitals) .fl-flags { grid-template-columns: 1fr 1fr; } :is(#flags, #capitals) .fl-names.n3 { grid-template-columns: 1fr; } }

/* ---- level picker: one world at a time ---- */
.pick-worlds { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 2px 0 6px; }
.pick-world { border: 2px solid #dee2e6; background: #f8f9fa; color: #3c286e; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .85rem; }
.pick-world.on { background: #3c286e; border-color: #3c286e; color: #fff; }
.pick-world.locked { opacity: .5; }
@media (max-width: 520px), (max-height: 520px) { .pick-world span { display: none; } .pick-world { font-size: 1rem; padding: 2px 10px; } }
:is(#flags, #capitals) .fl-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
:is(#flags, #capitals) .fl-say { margin-right: 34px; }
#door .door-links { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 10px; }
#door .door-parents-link { color: #ffd76a; font-weight: 700; font-size: .95rem; text-decoration: none; }
#door .door-leave-link { display: block; margin: 0; color: rgba(255,255,255,.65); font-size: .85rem; text-decoration: none; }
#door .door-leave-link:hover { color: #fff; }
@media (max-height: 520px) { #door .door-leave-link { margin-top: 4px; font-size: .78rem; } }

/* ---- postcard (world 5) ---- */
#postcard { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,12,40,.45); }
#postcard .pc-card { display: flex; gap: 18px; align-items: center; max-width: 620px; width: 100%; background: #fffaf0; color: #2a1f1a; border-radius: 10px; padding: 18px 22px;
  border: 8px solid transparent; border-image: repeating-linear-gradient(45deg, #d33 0 14px, #fffaf0 14px 22px, #2a5bd7 22px 36px, #fffaf0 36px 44px) 8;
  box-shadow: 0 18px 50px rgba(0,0,0,.4); transform: rotate(-1.5deg); animation: pcIn .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pcIn { from { transform: translateY(40px) rotate(-8deg) scale(.7); opacity: 0; } to { transform: rotate(-1.5deg); opacity: 1; } }
#postcard .pc-flag { width: 150px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.3); flex: 0 0 auto; }
#postcard .pc-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#postcard .pc-title { font-weight: 900; font-size: 1.35rem; }
#postcard .pc-fact { font-size: 1.1rem; line-height: 1.4; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe Print', cursive, system-ui; }
#postcard .pc-prize { font-weight: 800; color: #b06a00; }
#postcard .pc-ok { align-self: flex-start; }
@media (max-width: 560px), (max-height: 420px) { #postcard .pc-flag { width: 96px; } #postcard .pc-title { font-size: 1.1rem; } #postcard .pc-fact { font-size: .95rem; } }

/* ---- big screens: the title screen and the shop grow with the window ---- */
@media (min-width: 1100px) and (min-height: 640px) {
  :root { --card-w: 124px; }
  .pick:not(.pick-level) { width: 108px; } #panel-title .pick:not(.pick-level) { width: 124px; } #panel-title .pick img, #panel-title .pick-none { width: 76px; height: 76px; }
  .shop-item img, .shop-item .pick-none { width: 72px; height: 72px; }
  #pick-levels { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  #pick-levels .pick-level { font-size: .78rem; }
  #overlay .card-body { padding: 1.1rem 1.6rem; }
}
@media (min-width: 1600px) and (min-height: 860px) {
  :root { --card-w: 140px; }
  #panel-title .pick:not(.pick-level) { width: 140px; } #panel-title .pick img, #panel-title .pick-none { width: 88px; height: 88px; }
  .shop-item { font-size: .85rem; } .shop-item img, .shop-item .pick-none { width: 84px; height: 84px; }
}
.pick-power, .pick .pick-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 520px) { .pick-power { font-size: .58rem; } }
/* long names (Portuguese, Slovak) wrap inside their card instead of spilling out */
.shop-item { min-width: 0; overflow: hidden; }
.shop-item .shop-name { white-space: normal; text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.shop-item > * { max-width: 100%; }

/* language buttons on the welcome screens (before the family exists) */
#door .door-langs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 10px; }
#door .door-langs.d-none { display: none !important; }
#door .door-langs button { border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .95rem; line-height: 1.4; }
#door .door-langs button.on { background: #ffd23f; color: #2b1d0e; border-color: #ffd23f; }
#door .door-langs button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#door .door-lang-flag { font-size: 1.15em; }
@media (max-height: 430px) { #door .door-langs { margin: -6px 0 4px; } #door .door-langs button { padding: 2px 10px; font-size: .85rem; } }

/* 💎 premium heroes in the hero picker: a golden edge; not bought yet = tap to open the Premium shop */
.pick.pick-premium { border-color: #f0c040 !important; box-shadow: 0 0 0 1px #f0c04066 inset; }
.pick.pick-premium.locked { opacity: .85; cursor: pointer; }
.pick.pick-premium.locked img { filter: grayscale(.35); }

/* 🏛️ Capital Quest (js/capitals.js): Flag Quest's window in warm sunset colours */
#capitals .fl-card { background: linear-gradient(145deg, rgba(196,98,38,.88), rgba(128,42,118,.84)); }
#capitals .cq-frame { display: inline-block; padding: 6px; margin-bottom: 4px; }
#capitals .cq-flag { height: min(120px, 18vh); }
#capitals .cq-city { font-size: clamp(1.8rem, 5vw, 2.6rem); }
#capitals .cq-countries .fl-pick { display: flex; align-items: center; justify-content: center; gap: 8px; }
#capitals .cq-mini { height: 1.4em; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); flex: none; }
#capitals .cq-pair { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
#capitals .fl-bad > div { margin: 2px 0; }
#capitals .cq-newlist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
#capitals .cq-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px 10px 3px 4px; }
#capitals .cq-chip img { height: 20px; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 3px; }

/* the ✕ of Flag Quest and Capital Quest: a solid white button you can't miss */
:is(#flags, #capitals) .fl-close { background: #fff; color: #2b1d4a; width: 38px; height: 38px; font-size: 1.15rem; font-weight: 900;
  text-shadow: none; box-shadow: 0 2px 8px rgba(0,0,0,.35); border: 2px solid rgba(0,0,0,.08); cursor: pointer; }
:is(#flags, #capitals) .fl-close:hover, :is(#flags, #capitals) .fl-close:focus-visible { background: #ffe27a; transform: scale(1.08); outline: none; }
:is(#flags, #capitals) .fl-close { z-index: 5; }
:is(#flags, #capitals) .fl-right { padding-right: 40px; }            /* Blip's bubble never slides under the ✕ */

/* 💎 premium heroes: their own row in the hero picker */
.pick-title.pick-title-premium { color: #b07a00; margin-top: 4px; }

/* 📒 knowledge cards (js/cards.js) */
#kcard { position: fixed; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,12,40,.5); }
#kcard .kc-card { display: flex; gap: 18px; align-items: center; max-width: 640px; width: 100%; background: #fffaf0; color: #2a1f1a; border-radius: 16px; padding: 18px 22px;
  border: 4px solid #e0a020; box-shadow: 0 18px 50px rgba(0,0,0,.45); animation: flIn .35s cubic-bezier(.3,1.4,.5,1); }
#kcard .kc-pic { font-size: 84px; line-height: 1; flex: 0 0 auto; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #fff3c4 0, #ffe07a 70%); border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0,0,0,.08); }
#kcard .kc-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#kcard .kc-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#kcard .kc-title { font-weight: 900; color: #6b3fd4; }
#kcard .kc-subj { font-size: .8rem; background: #efe7ff; color: #6b3fd4; border-radius: 999px; padding: 2px 10px; font-weight: 700; }
#kcard .kc-name { font-weight: 900; font-size: 1.7rem; line-height: 1.1; }
#kcard .kc-clue { font-size: 1.15rem; font-style: italic; color: #3d2f6e; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe Print', cursive, system-ui; }
#kcard .kc-fact { font-size: 1rem; line-height: 1.4; background: #fff1c9; border-radius: 10px; padding: 8px 10px; }
#kcard .kc-prize { font-weight: 800; color: #b06a00; }
#kcard .kc-actions { display: flex; gap: 10px; align-items: center; }
#kcard .kc-say { border: 0; background: #efe7ff; border-radius: 50%; width: 38px; height: 38px; font-size: 1.1rem; }
@media (max-width: 560px), (max-height: 430px) { #kcard .kc-pic { width: 86px; height: 86px; font-size: 54px; } #kcard .kc-name { font-size: 1.3rem; } #kcard .kc-clue { font-size: 1rem; } #kcard .kc-fact { font-size: .9rem; } }
#album { position: fixed; inset: 0; z-index: 44; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,12,40,.55); }
#album .al-box { width: min(900px, 100%); max-height: 100%; overflow-y: auto; background: #fffaf0; color: #2a1f1a; border-radius: 18px; padding: 16px 20px 20px; border: 4px solid #e0a020; }
#album .al-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; position: sticky; top: -16px; background: #fffaf0; padding: 6px 0; z-index: 1; }
#album .al-title { font-weight: 900; font-size: 1.4rem; color: #6b3fd4; }
#album .al-count { background: #6b3fd4; }
#album .al-close { margin-left: auto; border: 0; background: #2b1d4a; color: #fff; border-radius: 50%; width: 38px; height: 38px; font-weight: 900; }
#album .al-hint { color: #6b5a40; font-size: .9rem; margin: 0 0 6px; }
#album .al-empty { font-size: 1.1rem; text-align: center; padding: 30px 0; }
#album .al-subj { font-weight: 800; margin: 10px 0 6px; color: #3d2f6e; } #album .al-subj span { background: #efe7ff; border-radius: 999px; padding: 1px 9px; font-size: .85rem; }
#album .al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
#album .al-card { position: relative; border: 2px solid #ead9a8; background: #fff; border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#album .al-card .e { font-size: 34px; line-height: 1.1; } #album .al-card .n { font-size: .85rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
#album .al-card.known { border-color: #e0a020; background: #fff8df; } #album .al-card i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: .8rem; }
#album .al-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
#quiz .badge.card { background: #6b3fd4; color: #fff; }

/* v0.25 special (seasonal) levels — highlighted at the top of the level picker while their season is on */
.season-box { margin: 6px auto 8px; padding: 6px 8px 4px; max-width: 760px; border-radius: 16px; border: 3px solid #ffb020;
  background: linear-gradient(135deg, #fff4d6, #ffe0f0); box-shadow: 0 0 0 4px rgba(255, 176, 32, .25); animation: season-glow 1.6s ease-in-out infinite alternate; }
.season-head { font-size: 1.05rem; color: #3c286e; }
.season-until { font-size: .8rem; color: #7a6a8a; margin-left: 4px; }
.pick-special { border-color: #ffb020 !important; background: #fffaf0; }
.season-halloween { border-color: #f58220; background: linear-gradient(135deg, #2a1838, #4a2a5a); }
.season-halloween .season-head, .season-halloween .season-until { color: #ffd8a0; }
.season-christmas, .season-nicholas { border-color: #e04848; background: linear-gradient(135deg, #e8f4ff, #ffe8e8); }
.season-newyear { border-color: #ffd23a; background: linear-gradient(135deg, #141a40, #2a3070); }
.season-newyear .season-head, .season-newyear .season-until, .season-fullmoon .season-head, .season-fullmoon .season-until { color: #fff6d8; }
.season-easter { border-color: #ff9ad0; background: linear-gradient(135deg, #fff0f8, #e8fff0); }
.season-kidsday, .season-carnival { border-color: #3fa0ff; background: linear-gradient(135deg, #fff6d0, #e0f0ff); }
.season-fullmoon { border-color: #bfe8ff; background: linear-gradient(135deg, #141c3c, #26304e); }
@keyframes season-glow { from { box-shadow: 0 0 0 3px rgba(255, 176, 32, .2); } to { box-shadow: 0 0 14px 6px rgba(255, 176, 32, .45); } }
.season-preview { animation: none; border-style: dashed; border-color: #9a8ab8; background: #f6f2ff; box-shadow: none; }
.season-preview .pick-level { width: 96px; }
.season-preview .pick-name { font-size: .72rem; }

/* ==== Quiz / Flag Quest / Capitals — airier layout + call-to-action always in view (v0.28.1) ====
   One spacing scale for all three pop-ups. The card is the scroller; the action row sticks to its
   bottom, so "Play! ▶" / "Next flag ▶" is visible without scrolling, on any screen. */
#quiz .qz-card, :is(#flags, #capitals) .fl-card {
  --pad-t: 22px; --pad-x: 28px; --pad-b: 22px; --gap: 14px;
  padding: var(--pad-t) var(--pad-x) var(--pad-b); display: flex; flex-direction: column; }
#quiz .qz-card { --bar: rgba(52,34,118,.97); }
:is(#flags, #capitals) .fl-card { --bar: rgba(34,62,146,.97); }
#quiz .qz-content, :is(#flags, #capitals) .fl-content { display: flex; flex-direction: column; flex: 1 0 auto; }

/* header: alien + speech bubble get room to breathe */
#quiz .qz-top, :is(#flags, #capitals) .fl-top { gap: 6px 18px; padding-bottom: var(--gap); margin-bottom: calc(var(--gap) + 4px); border-bottom-color: rgba(255,255,255,.18); }
#quiz .qz-bubble, :is(#flags, #capitals) .fl-bubble { padding: 10px 16px 12px; line-height: 1.35; border-radius: 20px; }
#quiz .qz-who, :is(#flags, #capitals) .fl-who { margin-bottom: 2px; }
#quiz .qz-head { margin-top: 12px; }
#quiz .qz-meta, :is(#flags, #capitals) .fl-meta { gap: 8px; margin-top: 10px; }
#quiz .qz-meta .badge, :is(#flags, #capitals) .fl-meta .badge { padding: .45em .7em; border-radius: 999px; }

/* question + answers */
#quiz .qz-q { margin: 4px 0 14px; line-height: 1.15; }
#quiz .qz-grid { gap: var(--gap); margin-top: 14px; }
#quiz .qz-pick { padding: 14px 8px; border-radius: 20px; }
#quiz .qz-type { gap: 10px; margin-top: 14px; }
:is(#flags, #capitals) .fl-stage { gap: 18px; }
:is(#flags, #capitals) .fl-ask { gap: 10px; }
:is(#flags, #capitals) .fl-grid { gap: var(--gap); }
:is(#flags, #capitals) .fl-pick { padding: 14px 12px; border-radius: 18px; }
:is(#flags, #capitals) .fl-flags .fl-pick { padding: 10px; }
#quiz .qz-feedback, :is(#flags, #capitals) .fl-feedback { margin-top: 16px; }

/* action row: pinned to the bottom of the card, fades the content scrolling under it */
#quiz .qz-actions, :is(#flags, #capitals) .fl-actions {
  position: sticky; bottom: calc(var(--pad-b) * -1); z-index: 3; gap: 10px; justify-content: center;
  margin: auto calc(var(--pad-x) * -1) calc(var(--pad-b) * -1); padding: 14px var(--pad-x) var(--pad-b);
  background: linear-gradient(to top, var(--bar) 62%, transparent); }
#quiz .qz-actions:empty, :is(#flags, #capitals) .fl-actions:empty { display: none; }
#quiz .qz-actions .btn-lg, :is(#flags, #capitals) .fl-actions .btn-lg { min-height: 54px; padding-inline: 28px; border-radius: 16px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
#quiz .qz-actions .btn:not(.btn-sm), :is(#flags, #capitals) .fl-actions .btn { border-radius: 14px; }

/* close + speaker buttons: proper tap targets, inset from the corner */
:is(#flags, #capitals) .fl-say, :is(#flags, #capitals) .fl-close, #quiz .qz-say { width: 42px; height: 42px; font-size: 1.15rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, transform .1s; }
:is(#flags, #capitals) .fl-close:hover, :is(#flags, #capitals) .fl-say:hover, #quiz .qz-say:hover { background: rgba(255,255,255,.3); }
:is(#flags, #capitals) .fl-close:active, :is(#flags, #capitals) .fl-say:active, #quiz .qz-say:active { transform: scale(.92); }
:is(#flags, #capitals) .fl-close { top: 16px; right: 16px; }
:is(#flags, #capitals) .fl-top { padding-right: 52px; }
:is(#flags, #capitals) .fl-say { margin-right: 0; }

/* phones & small tablets: full-screen, but with real gutters + notch/home-bar safe areas */
@media (max-width: 768px), (max-height: 520px) {
  #quiz .qz-card, :is(#flags, #capitals) .fl-card {
    --pad-t: calc(20px + env(safe-area-inset-top)); --pad-b: calc(14px + env(safe-area-inset-bottom));
    --pad-x: 22px; --gap: 12px;
    padding: var(--pad-t) calc(var(--pad-x) + env(safe-area-inset-right)) var(--pad-b) calc(var(--pad-x) + env(safe-area-inset-left)); }
  #quiz .qz-actions, :is(#flags, #capitals) .fl-actions {
    margin-left: calc((var(--pad-x) + env(safe-area-inset-left)) * -1); margin-right: calc((var(--pad-x) + env(safe-area-inset-right)) * -1);
    padding-left: calc(var(--pad-x) + env(safe-area-inset-left)); padding-right: calc(var(--pad-x) + env(safe-area-inset-right)); }
  :is(#flags, #capitals) .fl-close { top: calc(14px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
  #quiz .qz-top { grid-template-columns: 96px 1fr; } #quiz .qz-host { width: 96px; height: 104px; }
  :is(#flags, #capitals) .fl-top { grid-template-columns: 84px 1fr; } :is(#flags, #capitals) .fl-host { width: 84px; height: 92px; }
  #quiz .qz-actions .btn-lg, :is(#flags, #capitals) .fl-actions .btn-lg { flex: 1 1 220px; max-width: 420px; }
}
/* narrow phones in portrait: a touch tighter, still never touching the edge */
@media (max-width: 420px) {
  #quiz .qz-card, :is(#flags, #capitals) .fl-card { --pad-x: 18px; --gap: 10px; }
  #quiz .qz-top { grid-template-columns: 76px 1fr; gap: 6px 12px; } #quiz .qz-host { width: 76px; height: 84px; }
  :is(#flags, #capitals) .fl-top { grid-template-columns: 70px 1fr; gap: 6px 12px; } :is(#flags, #capitals) .fl-host { width: 70px; height: 78px; }
  #quiz .qz-bubble, :is(#flags, #capitals) .fl-bubble { font-size: .95rem; padding: 8px 12px 10px; }
  :is(#flags, #capitals) .fl-flag { height: min(180px, 26vh); }
}
/* short landscape (phones sideways, the car screen): keep it compact vertically, roomy sideways */
@media (max-height: 520px) {
  #quiz .qz-card, :is(#flags, #capitals) .fl-card { --pad-t: calc(12px + env(safe-area-inset-top)); --pad-b: calc(10px + env(safe-area-inset-bottom)); --pad-x: 28px; --gap: 10px; }
  #quiz .qz-top, :is(#flags, #capitals) .fl-top { padding-bottom: 8px; margin-bottom: 10px; }
  #quiz .qz-top { grid-template-columns: 72px 1fr; } #quiz .qz-host { width: 72px; height: 78px; }
  :is(#flags, #capitals) .fl-top { grid-template-columns: 62px 1fr; } :is(#flags, #capitals) .fl-host { width: 62px; height: 68px; }
  #quiz .qz-bubble, :is(#flags, #capitals) .fl-bubble { padding: 6px 14px 8px; }
  :is(#flags, #capitals) .fl-close { top: calc(10px + env(safe-area-inset-top)); width: 38px; height: 38px; }
  :is(#flags, #capitals) .fl-stage { gap: 22px; }
  #quiz .qz-actions, :is(#flags, #capitals) .fl-actions { padding-top: 10px; }
  #quiz .qz-actions .btn-lg, :is(#flags, #capitals) .fl-actions .btn-lg { min-height: 46px; }
}
@media (max-width: 520px) { #quiz .qz-meta .badge, :is(#flags, #capitals) .fl-meta .badge { font-size: .74rem; padding: .4em .6em; } #quiz .qz-meta, :is(#flags, #capitals) .fl-meta { gap: 6px; } }
/* speech bubble: no detached triangle — a chat-style "tail" corner pointing back at Blip instead */
#quiz .qz-bubble::before, :is(#flags, #capitals) .fl-bubble::before { content: none; }
#quiz .qz-bubble, :is(#flags, #capitals) .fl-bubble { border-radius: 22px 22px 22px 6px; }

/* v0.28.4 small screens: the title (heroes, levels), shop, player and profile panels fill the whole screen —
   no dark frame, no rounded box, with room for the notch / rounded corners / home bar. Pause, level complete
   and game over stay small cards over the game. */
@media (max-width: 768px), (max-height: 520px) {
  #overlay:has(> :is(#panel-title, #panel-shop, #panel-me, #panel-profile):not(.d-none)) { padding: 0; background: #fff; }
  :is(#panel-title, #panel-shop, #panel-me, #panel-profile) { max-width: none; min-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  :is(#panel-title, #panel-shop, #panel-me, #panel-profile) > .card-body {
    padding: calc(16px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)) !important; }
}

/* ==== v0.28.5 FULL-SCREEN SCENE + FLOATING HUD ====
   The game fills the whole screen, edge to edge (also under the notch / rounded corners). The HUD floats on top as
   three dark-glass pills — lives+coins (left), level+power-ups+super power (middle), timer+pause (right) — white text
   on a blurred dark backing, so it reads on bright skies, deserts, snow and caves alike. */
body { padding: 0; }
#game { position: fixed; inset: 0; }
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: auto; background: none; pointer-events: none; align-items: flex-start !important;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)) !important; }
#hud > div { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 14px; border-radius: 999px;
  background: rgba(16,10,36,.52); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-variant-numeric: tabular-nums; }
#hud > div:first-child, #hud > div:last-child { font-size: 1.15rem; }
#hud > div:nth-child(2) { padding: 4px 8px 4px 14px; }
#hud .ms-3 { margin-left: .6rem !important; }
#hud-level { color: rgba(255,255,255,.75) !important; font-weight: 700; letter-spacing: .02em; margin-right: 2px; }
#hud-powers .pw { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); border-radius: 999px; line-height: 28px; padding: 0 9px; }
#hud-powers .pw .k { top: -5px; left: 6px; }
#hud-hero { margin: 0 0 0 2px; }
#btn-pause { border-radius: 999px; width: 34px; height: 30px; padding: 0 !important; border-color: rgba(255,255,255,.45); font-weight: 800; }
#touch-controls { z-index: 9; padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
/* short phones: smaller pills */
@media (max-height: 520px) {
  #hud { padding-top: calc(6px + env(safe-area-inset-top)) !important; }
  #hud > div { min-height: 36px; padding: 2px 12px; gap: 6px; }
  #hud > div:first-child, #hud > div:last-child { font-size: 1rem; }
  #hud-powers .pw { line-height: 24px; padding: 0 6px; }
  #hud-hero { width: 30px; height: 30px; }
  #btn-pause { width: 30px; height: 26px; }
}

/* super power touch button: see-through, a bit smaller and lower,
   so it doesn't hide the enemies coming in from the right */
#touch-controls .tc-power {
  opacity: .45;
  align-self: flex-end;      /* line up with the bottom of the jump button instead of its top */
  margin-bottom: -8px;       /* and drop a little further down */
  width: 64px; height: 64px; font-size: 26px;
}
#touch-controls .tc-power.ready  { opacity: .65; }   /* charged: a bit easier to see */
#touch-controls .tc-power.active { opacity: .95; }   /* fully visible while your finger is on it */
#touch-controls .tc-power.ready .i { box-shadow: 0 0 6px 1px rgba(255,210,74,.45); }  /* softer glow */