/* Fredoka is loaded via a <link> in base.njk (gated to /play/*), not a
   cross-origin font CSS reference chained behind this stylesheet, so it
   stays off the render-blocking critical path. */

/* ============================================================================
   Scarmonit Kids — "Duck & Unicorn Counting" game page (/play)
   A bright, playful world that lives inside the normal (dark) site chrome.
   ========================================================================== */

:root { --kf: 'Fredoka', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif; }

.play-page {
    min-height: calc(100vh - 60px);
    padding: 96px 16px 56px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, .65), transparent 60%),
        linear-gradient(180deg, #ffe6fb 0%, #e3f3ff 45%, #e6ffe9 100%);
    font-family: var(--kf);
}

.play-card {
    width: 100%;
    max-width: 760px;
    background: #ffffff;
    border-radius: 32px;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    box-shadow: 0 24px 60px rgba(120, 90, 200, .28);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.play-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 12px;
    background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffd43b, #69db7c, #4dabf7, #9775fa, #f783ac);
}

.play-header h1 {
    font-family: var(--kf) !important;
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    color: #6a4bbc;
    margin: .6rem 0 .2rem;
    background: none !important;
    -webkit-text-fill-color: #6a4bbc !important;
    text-shadow: none !important;
    letter-spacing: 0;
}
.play-sub { color: #8a7fb0; font-size: clamp(1rem, 2.5vw, 1.25rem); margin: 0 0 1rem; }

.play-score {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff7fe; border: 2px solid #ffe0f5; border-radius: 999px;
    padding: .4rem 1.1rem; margin-bottom: 1rem; font-size: 1.05rem; color: #a05fb0;
}
.score-stars { font-size: 1.3rem; letter-spacing: 2px; min-width: 1.4em; }

.play-question {
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 600; color: #2f8fd0; margin: .4rem 0 1rem;
}
.play-question .count-emoji { height: 1.45em; width: auto; vertical-align: -.34em; }

.play-stage {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    background: linear-gradient(180deg, #cdeefe 0%, #e8f8ff 55%, #eafff0 100%);
    border: 4px solid #ffffff;
    border-radius: 28px;
    box-shadow: inset 0 0 0 3px #d7f0ff, 0 8px 22px rgba(120, 160, 210, .25);
    margin-bottom: 1.25rem;
}
.stage-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sun { transform-origin: 52px 46px; animation: sunPulse 4s ease-in-out infinite; }
@keyframes sunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.cloud { will-change: transform; }
.cloud-1 { animation: drift 24s linear infinite; }
.cloud-2 { animation: drift 34s linear infinite; animation-delay: -12s; }
@keyframes drift { from { transform: translateX(-130px); } to { transform: translateX(470px); } }

.stage-creatures {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: clamp(.4rem, 2.5vw, 1.1rem);
    width: 100%; min-height: 250px; padding: 1rem; box-sizing: border-box;
}
.creature {
    width: clamp(2.6rem, 10vw, 4.4rem); height: auto; display: block;
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .18));
    user-select: none; -webkit-user-drag: none;
    animation-name: pop, bob;
    animation-duration: .5s, 2s;
    animation-timing-function: cubic-bezier(.2, 1.5, .5, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, both;
}

/* friendly unicorn mascot in the scene */
.mascot {
    position: absolute; right: 12px; bottom: 8px;
    width: clamp(56px, 16vw, 88px); z-index: 1;
    transform-origin: center bottom;
    animation: mascotIdle 2.6s ease-in-out infinite;
}
.mascot img { width: 100%; display: block; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .22)); }
@keyframes mascotIdle { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
.mascot.celebrate { animation: mascotCelebrate 1s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes mascotCelebrate {
    0%   { transform: translateY(0) rotate(0) scale(1); }
    30%  { transform: translateY(-46px) rotate(-16deg) scale(1.22); }
    55%  { transform: translateY(-12px) rotate(16deg) scale(1.16); }
    78%  { transform: translateY(-26px) rotate(-8deg) scale(1.18); }
    100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes pop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    70%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-12px) rotate(4deg); }
}

.rainbow-arc {
    position: absolute; left: 50%; top: 6%;
    width: 72%; max-width: 320px; height: auto;
    transform: translateX(-50%) scale(.5);
    opacity: 0; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12));
}
.rainbow-arc.show { animation: arcPop 1.7s ease forwards; }
@keyframes arcPop {
    0%   { opacity: 0; transform: translateX(-50%) scale(.5) translateY(24px); }
    25%  { opacity: 1; transform: translateX(-50%) scale(1.06) translateY(0); }
    78%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-12px); }
}

.play-answers { display: flex; justify-content: center; gap: clamp(.6rem, 3vw, 1.25rem); flex-wrap: wrap; margin-bottom: 1rem; }
.answer-btn {
    font-family: var(--kf); font-weight: 700;
    font-size: clamp(2rem, 7vw, 3rem);
    width: clamp(84px, 22vw, 120px); height: clamp(84px, 22vw, 120px);
    border: none; border-radius: 24px; cursor: pointer; color: #fff;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .16);
    transition: transform .1s, box-shadow .1s;
}
.answer-btn:hover { transform: translateY(-2px); }
.answer-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
.answer-btn:nth-child(1) { background: linear-gradient(160deg, #ff8fab, #ff5d8f); }
.answer-btn:nth-child(2) { background: linear-gradient(160deg, #74c0fc, #4dabf7); }
.answer-btn:nth-child(3) { background: linear-gradient(160deg, #b197fc, #9775fa); }
.answer-btn:focus-visible { outline: 4px solid #ffd43b; outline-offset: 3px; }
.answer-btn[disabled] { opacity: .55; cursor: default; }
.answer-btn.wrong { animation: wiggle .4s; }
@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-9px); }
    75% { transform: translateX(9px); }
}

.play-message { min-height: 1.6em; font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: 600; margin-bottom: 1rem; }
.play-message.correct { color: #2f9e44; }
.play-message.tryagain { color: #e8590c; }

.play-controls { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.play-btn-secondary {
    font-family: var(--kf); font-size: 1rem; font-weight: 600;
    background: #f1e9ff; color: #6a4bbc; border: 2px solid #e0d0ff;
    border-radius: 999px; padding: .6rem 1.3rem; cursor: pointer;
    transition: transform .1s, background .15s;
}
.play-btn-secondary:hover { background: #e9dcff; }
.play-btn-secondary:active { transform: scale(.96); }

/* Falling rainbow/unicorn confetti */
.confetti-piece { position: fixed; top: -50px; pointer-events: none; z-index: 9999; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(112vh) rotate(540deg); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
    .creature, .sun, .cloud, .mascot { animation: none; }
    .creature { opacity: 1; transform: none; }
    .rainbow-arc.show { animation: none; opacity: .9; transform: translateX(-50%) scale(1); }
    .confetti-piece { display: none; }
}

/* ============================================================================
   Shared: "Back to Games" link + the game-hub menu (used across all games)
   ========================================================================== */
.kids-back {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--kf); font-weight: 600; font-size: .95rem;
    color: #6a4bbc; background: #f1e9ff; border: 2px solid #e0d0ff;
    border-radius: 999px; padding: .45rem 1.1rem; text-decoration: none;
    margin-bottom: 1rem; transition: background .15s, transform .1s;
}
.kids-back:hover { background: #e9dcff; }
.kids-back:active { transform: scale(.96); }

.game-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem; margin-top: 1.25rem;
}
.game-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; text-align: center; text-decoration: none; color: #fff;
    border-radius: 22px; padding: 1.5rem 1rem; min-height: 158px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .15);
    transition: transform .12s, box-shadow .12s;
}
.game-tile:hover { transform: translateY(-3px); }
.game-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.tile-emoji { font-size: 3rem; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.tile-name { font-family: var(--kf); font-weight: 700; font-size: 1.3rem; }
.tile-desc { font-size: .85rem; opacity: .95; font-weight: 500; }
.tile-count   { background: linear-gradient(160deg, #74c0fc, #4dabf7); }
.tile-draw    { background: linear-gradient(160deg, #ff8fab, #ff5d8f); }
.tile-spell   { background: linear-gradient(160deg, #b197fc, #9775fa); }
.tile-sticker { background: linear-gradient(160deg, #69db7c, #38d9a9); }
.tile-dress   { background: linear-gradient(160deg, #ffd43b, #ffa94d); color: #6b4800; }
.tile-memory  { background: linear-gradient(160deg, #ff9a9e, #f6416c); }
.tile-piano   { background: linear-gradient(160deg, #a0e7e5, #2bb3ad); }
.tile-whack   { background: linear-gradient(160deg, #ffd86b, #f6a700); color: #5b3d00; }
.tile-bubbles { background: linear-gradient(160deg, #74c0fc, #1c7ed6); }
.tile-pattern { background: linear-gradient(160deg, #d0bfff, #7048e8); }
.tile-catch   { background: linear-gradient(160deg, #8ce99a, #2f9e44); }
.tile-ttt     { background: linear-gradient(160deg, #ffc9c9, #e8590c); }
.tile-snake   { background: linear-gradient(160deg, #b2f2bb, #2f9e44); }
.tile-connect { background: linear-gradient(160deg, #ffe066, #f03e3e); }
.tile-maze    { background: linear-gradient(160deg, #a5d8ff, #1971c2); }
.tile-flap    { background: linear-gradient(160deg, #ffec99, #fab005); color: #5b3d00; }
.tile-rps     { background: linear-gradient(160deg, #eebefa, #be4bdb); }
.tile-math    { background: linear-gradient(160deg, #99e9f2, #1098ad); }
.tile-slide   { background: linear-gradient(160deg, #ffc9c9, #f06595); }
.tile-react   { background: linear-gradient(160deg, #ffd8a8, #e8590c); }
.tile-dress .tile-desc, .tile-whack .tile-desc, .tile-flap .tile-desc { opacity: .85; }

/* ============================================================================
   Shared arcade bits: stat bar + on-screen D-pad (Snake, Maze, etc.)
   ========================================================================== */
.arcade-bar { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mem-stat { font-family: var(--kf); color: #6a4bbc; font-size: .95rem; }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: .4rem; justify-content: center; margin: 1rem auto 0; }
.dpad button {
    font-size: 1.5rem; border: none; border-radius: 14px; cursor: pointer;
    background: #f1e9ff; color: #6a4bbc; box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.dpad button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.dpad .du { grid-area: 1 / 2; } .dpad .dl { grid-area: 2 / 1; }
.dpad .dr { grid-area: 2 / 3; } .dpad .dd { grid-area: 3 / 2; }
.arcade-canvas {
    display: block; margin: 0 auto; background: #fff; border-radius: 18px;
    border: 4px solid #cdeefe; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    touch-action: none; max-width: 100%;
}

/* ============================================================================
   Fullscreen support for the canvas games (Drawing & Stickers)
   ========================================================================== */
/* .fs-max is a CSS-only maximize that always works; native :fullscreen is a bonus. */
.fs-host.fs-max { position: fixed; inset: 0; z-index: 9999; margin: 0; }
.fs-host:fullscreen, .fs-host:-webkit-full-screen, .fs-host.fs-max {
    max-width: none; width: 100vw; height: 100vh; border-radius: 0;
    overflow-y: auto; padding: 1rem; display: flex; flex-direction: column;
    background: #fff;
}
.fs-host:fullscreen .kids-back,
.fs-host:-webkit-full-screen .kids-back,
.fs-host.fs-max .kids-back { display: none; }
.fs-host:fullscreen .draw-canvas, .fs-host.fs-max .draw-canvas,
.fs-host:fullscreen .sticker-board, .fs-host.fs-max .sticker-board { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }