/* ─────────────────────────────────────────────────────────────
   clay.css — claymorphism skin for the wide game pages.
   Loaded AFTER each page's inline <style>, so it only overrides
   tokens and the handful of rules that hardcode the old
   hard-edged black borders and offset shadows.
   ponytail: one shared override sheet instead of rewriting 4 pages.
   ───────────────────────────────────────────────────────────── */

:root {
    --bg: #FFE9A8;              /* soft warm clay ground */
    --white: #FFFCF5;           /* raised clay surface */
    --black: #4A3B2A;           /* soft brown-black, never pure #000 */
    --pink: #FF6E96;
    --purple: #8B55E0;
    --teal: #35D0D8;
    --orange: #FF9A4D;
    --green: #4BD672;

    --border: 0 solid transparent;
    --border-thick: 0 solid transparent;
    --radius: 28px;
    --radius-pill: 999px;

    /* clay = soft dark drop + light pick-up highlight */
    --shadow:    3px 4px 8px rgba(120, 90, 50, 0.12), -2px -3px 6px rgba(255, 255, 255, 0.6);
    --shadow-lg: 5px 7px 14px rgba(120, 90, 50, 0.15), -3px -4px 9px rgba(255, 255, 255, 0.65);
    --shadow-in: inset 2px 3px 5px rgba(120, 90, 50, 0.10), inset -2px -3px 5px rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] {
    --bg: #2A2440;
    --white: #3A3358;
    --black: #F2EEFF;
    --shadow:    3px 4px 8px rgba(0, 0, 0, 0.30), -2px -3px 6px rgba(255, 255, 255, 0.04);
    --shadow-lg: 5px 7px 14px rgba(0, 0, 0, 0.34), -3px -4px 9px rgba(255, 255, 255, 0.05);
    --shadow-in: inset 2px 3px 5px rgba(0, 0, 0, 0.26), inset -2px -3px 5px rgba(255, 255, 255, 0.04);
}

/* Clay has no ink outline — depth comes from the shadows. */
.title, .intro-title, .game-name, .feedback-title, .result-title,
.done-score, .result-score, .letter-big, .prompt strong {
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 6px rgba(120, 90, 50, 0.14);
}
[data-theme="dark"] .title, [data-theme="dark"] .intro-title,
[data-theme="dark"] .game-name, [data-theme="dark"] .feedback-title,
[data-theme="dark"] .result-title, [data-theme="dark"] .done-score {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.34);
}

/* Press = the piece sinks into the clay, it does not slide. */
.btn, .btn-start, .btn-back, .btn-result, .game-card, .stat-badge,
.dark-toggle, .target-card, .pad-wrap, .sky, .timer-bar {
    border: none;
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease;
}
.main-card-inner { transition: none; }

.btn:hover, .btn-start:hover, .btn-back:hover, .btn-result:hover, .game-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
}
.btn:active, .btn-start:active, .btn-back:active, .btn-result:active, .game-card:active {
    transform: translateY(2px) scale(0.985);
    box-shadow: var(--shadow-in);
}

/* Sunken wells: the play surfaces read as pressed into the slab. */
.pad-wrap, .sky, .timer-bar {
    box-shadow: var(--shadow-in);
    background-clip: padding-box;
}

/* The drawing pad needs to read as a defined well, so the child knows
   exactly where the ink lands. Rim + deeper inner shadow. */
.pad-wrap {
    border: 3px solid rgba(120, 90, 50, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 252, 245, 0.75);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9),
                inset 4px 6px 12px rgba(120, 90, 50, 0.20),
                inset -3px -4px 9px rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .pad-wrap {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 4px 6px 12px rgba(0, 0, 0, 0.45),
                inset -3px -4px 9px rgba(255, 255, 255, 0.05);
}
.sky { border-radius: var(--radius); }
.timer-bar { height: 18px; padding: 3px; }
.timer-fill { border-radius: var(--radius-pill); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); }

.main-card-inner {
    border-radius: 34px;
    border: 3px solid rgba(120, 90, 50, 0.16);
    box-shadow: 2px 3px 6px rgba(120, 90, 50, 0.10);
}
[data-theme="dark"] .main-card-inner {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.24);
}
.stat-badge { box-shadow: var(--shadow); border-radius: var(--radius-pill); }
.dark-toggle { box-shadow: var(--shadow-in); }
.dark-toggle-knob { border: none; box-shadow: var(--shadow); }

.game-card { border-radius: 32px; box-shadow: var(--shadow-lg); }
.target-card { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Balloons: puffy clay, not outlined stickers. */
.balloon-body {
    border: none;
    box-shadow: inset -8px -11px 10px rgba(0, 0, 0, 0.12),
                inset 6px 8px 9px rgba(255, 255, 255, 0.28),
                2px 3px 7px rgba(120, 90, 50, 0.16);
}

/* Icons sit on the clay, so they get their own soft contact shadow. */
/* Icons sit on the clay: bigger than a glyph, with a soft contact shadow. */
.icon { width: 1.45em; height: 1.45em; vertical-align: -0.35em; filter: drop-shadow(1px 2px 2px rgba(120, 90, 50, 0.20)); }
.stat-badge .icon { width: 1.35em; height: 1.35em; }

/* Ground has a little depth so the slab does not float on flat paint. */
body {
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
        radial-gradient(100% 80% at 85% 100%, rgba(255, 154, 77, 0.28) 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
[data-theme="dark"] body {
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
        radial-gradient(100% 80% at 85% 100%, rgba(155, 107, 232, 0.35) 0%, transparent 60%),
        var(--bg);
}

/* Coloured slabs get a modelled top-light / bottom-shade like real clay. */
.game-card, .btn-start, .btn-primary, .btn-result-primary {
    box-shadow: var(--shadow-lg),
                inset 0 4px 6px rgba(255, 255, 255, 0.24),
                inset 0 -6px 8px rgba(0, 0, 0, 0.12);
}
.game-card:hover, .btn-start:hover, .btn-result-primary:hover {
    box-shadow: var(--shadow-lg),
                inset 0 5px 7px rgba(255, 255, 255, 0.28),
                inset 0 -7px 9px rgba(0, 0, 0, 0.14);
}


/* Sky belongs to the same warm clay world, not to a different palette. */
.sky { background: linear-gradient(to bottom, #CDEDFF 0%, #F2FAFF 100%); }
[data-theme="dark"] .sky { background: linear-gradient(to bottom, #241F3D 0%, #332C55 100%); }
.balloon-string { background: rgba(120, 90, 50, 0.35); border-radius: 2px; }

/* ── Success burst (celebrate.js) ───────────────────────────── */
.confetti-burst {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
    z-index: 20;
}
.confetti {
    position: absolute; left: 50%; top: 45%;
    width: 13px; height: 18px; border-radius: 4px;
    opacity: 0;
    box-shadow: 1px 2px 3px rgba(120, 90, 50, 0.25);
    animation: confettiFly 1.1s cubic-bezier(0.15, 0.7, 0.35, 1) var(--delay) forwards;
}
@keyframes confettiFly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0); }
    10%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                      scale(1) rotate(var(--rot)); }
}

/* The success icon lands with a little bounce instead of just appearing. */
.feedback.show .feedback-emoji,
.result-stage .result-emoji {
    animation: successPop 0.6s cubic-bezier(0.34, 1.7, 0.5, 1) both;
}
@keyframes successPop {
    0%   { transform: scale(0.2) rotate(-18deg); opacity: 0; }
    55%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
    75%  { transform: scale(0.94) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .confetti { animation: none; opacity: 0; }
    .feedback.show .feedback-emoji, .result-stage .result-emoji { animation: none; }
}

/* ── Missing Letter surfaces ────────────────────────────────── */
.word-letter, .option-btn, .image-card, .btn-sound, .letter-btn, .progress-track {
    border: none;
}
.word-letter { box-shadow: var(--shadow); }
.word-letter.blank {
    background: rgba(120, 90, 50, 0.07);
    box-shadow: var(--shadow-in);
}
[data-theme="dark"] .word-letter.blank { background: rgba(0, 0, 0, 0.22); }

.option-btn, .letter-btn { box-shadow: var(--shadow); }
.option-btn:not(:disabled):hover, .letter-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-lg);
}
.option-btn:not(:disabled):active, .letter-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: var(--shadow-in);
}
.option-btn.correct, .word-letter.blank.revealed {
    box-shadow: var(--shadow-lg),
                inset 0 4px 6px rgba(255, 255, 255, 0.28),
                inset 0 -6px 8px rgba(0, 0, 0, 0.12);
}
.option-btn.wrong, .word-letter.blank.wrong-reveal {
    box-shadow: var(--shadow-in);
}

.image-card { box-shadow: var(--shadow); }
.btn-sound {
    box-shadow: var(--shadow),
                inset 0 4px 6px rgba(255, 255, 255, 0.24),
                inset 0 -6px 8px rgba(0, 0, 0, 0.12);
}
.progress-track { box-shadow: var(--shadow-in); background: rgba(120, 90, 50, 0.12); }
.progress-fill  { border-radius: var(--radius-pill); }

/* ── Word Builder pieces ────────────────────────────────────── */
.tile { border: none; box-shadow: var(--shadow); border-radius: 16px; }
.tile:active, .tile.dragging { box-shadow: var(--shadow-lg); }
.tray {
    border: none;
    background: rgba(120, 90, 50, 0.07);
    box-shadow: var(--shadow-in);
}
[data-theme="dark"] .tray { background: rgba(0, 0, 0, 0.22); }
.slot {
    border: 3px dashed rgba(120, 90, 50, 0.30);
    background: rgba(120, 90, 50, 0.06);
    box-shadow: var(--shadow-in);
}
[data-theme="dark"] .slot {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(0, 0, 0, 0.20);
}
.slot.filled, .slot:has(.tile) { border-style: solid; border-color: transparent; box-shadow: none; background: none; }

/* ── Background music control (music.js) ────────────────────── */
.music-ctl {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; margin-right: 10px;
    height: 32px;                          /* same as the dark-mode switch */
    padding: 0 12px 0 6px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow);
}
.music-btn {
    width: 32px; height: 32px; flex-shrink: 0;   /* matches the switch height */
    border: none; border-radius: 50%;
    background: none;                      /* the clay note is the button */
    padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, opacity 0.2s;
}
.music-btn:hover  { transform: translateY(-1px) scale(1.12); }
.music-btn:active { transform: translateY(1px) scale(0.94); }
.music-ctl.off .music-btn { opacity: 0.55; }
.music-btn img { width: 100%; height: 100%; object-fit: contain; display: block;
                 filter: drop-shadow(1px 2px 2px rgba(120, 90, 50, 0.28)); }

.music-ctl input[type=range] {
    width: 78px; height: 20px;
    -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.music-ctl input[type=range]::-webkit-slider-runnable-track {
    height: 8px; border-radius: 999px;
    background: rgba(120, 90, 50, 0.18);
    box-shadow: inset 1px 2px 3px rgba(120, 90, 50, 0.18);
}
.music-ctl input[type=range]::-moz-range-track {
    height: 8px; border-radius: 999px; background: rgba(120, 90, 50, 0.18);
}
.music-ctl input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%; margin-top: -6px;
    background: var(--white); border: none;
    box-shadow: 2px 3px 5px rgba(120, 90, 50, 0.28), -1px -1px 3px rgba(255,255,255,0.9);
}
.music-ctl input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: none;
    box-shadow: 2px 3px 5px rgba(120, 90, 50, 0.28);
}
.music-ctl.off input[type=range] { opacity: 0.45; }
[data-theme="dark"] .music-ctl input[type=range]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.16); }

@media (max-width: 620px) { .music-ctl input[type=range] { display: none; } }

/* ── Quick Draw timer toggle ────────────────────────────────── */
.btn-timer {
    margin-top: 4px;
    padding: 0 22px; height: 44px;
    border: none; border-radius: var(--radius-pill);
    background: var(--white); color: var(--black);
    font-family: inherit; font-weight: 700; font-size: 1rem;
    cursor: pointer; box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.btn-timer:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-timer:active { transform: translateY(1px); box-shadow: var(--shadow-in); }
.btn-timer.off    { opacity: 0.7; box-shadow: var(--shadow-in); }