@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Serif+Display&family=Neuton:wght@400&display=swap');

/* ============================================================
   COLOR LAB — tweak these to experiment with the palette
   ============================================================ */
:root {
    /* Page & paper */
    --paper: #F4F0E8;
    --paper-2: #ECE5D5;

    /* Ink */
    --ink: #3B3128;
    --ink-soft: #53483c;
    --ink-faint: #82745c;
    --rule: #C7B89C;

    /* Accents */
    --teal: #276e6c;
    --teal-dark: #1F5C5A;
    --teal-hover: #226260;
    --gold: #875d03;

    /* Pond */
    --pond-sky: #BFD4E1;
    --pond-water: #A8C4D4;
    --pond-text: #345D7F;
    --pond-ripple: rgba(255, 255, 255, 0.55);

    /* Rare (golden) — used by rare popup */
    --rare-wing: #916403;

    /* Word-build messages */
    --msg-error: #8a1b0a;
    --msg-success: #1d5250;
    --msg-rare: #875d03;

    /* Per-milestone color tokens — used by the found-words columns. */
    --milestone1-dark: #53483c;
    --milestone2-dark: #53483c;
    --milestone3-dark: #53483c;
    --milestone4-dark: #53483c;

    /* Progress-bar dots */
    --progress-dot-bg: #F4F0E8;
    --progress-dot-border: #C7B89C;
    --progress-dot-bg-reached: #875d03;
    --progress-dot-bg-reached-1: #77aaa9;
    --progress-dot-bg-reached-2: #66a09e;
    --progress-dot-bg-reached-3: #559593;
    --progress-dot-bg-reached-4: #408786;
    --progress-dot-border-reached: #1c5351;

    /* Found toggle */
    --found-toggle-color: #53483c;
    --found-toggle-bg: rgba(255, 255, 255, 0.3);
    --found-toggle-border: #C7B89C;
    --found-toggle-hover-bg: #ECE5D5;
    --found-toggle-hover-color: #3B3128;

    /* Gold accent — per-call-site overrides. Each defaults to --gold so
       editing --gold still cascades, but you can override one without
       affecting the others. */
    --found-count-bg: #875d03;
    --share-pill-color: #53483c;
    --share-pill-bg: rgba(255, 255, 255, 0.3);
    --share-pill-border: #C7B89C;
    --share-pill-hover-bg: #ECE5D5;
    --share-pill-hover-color: #3B3128;
    --share-pill-copied-bg: #2B7A78;
    --share-pill-copied-color: #fff;
    --share-pill-copied-border: #1F5C5A;
    --share-pill-won-color: #3B3128;
    --share-pill-won-bg: rgba(201, 162, 80, 0.12);
    --share-pill-won-border: #875d03;
    --share-pill-won-icon: #875d03;
    --share-pill-won-hover-bg: rgba(201, 162, 80, 0.22);
    --share-pill-won-copied-bg: #875d03;
    --share-pill-won-copied-border: #875d03;
    --share-pill-won-copied-color: #fff;
    --found-word-rare-color: #875d03;
    --rare-popup-pct-color: #664600;
    --rare-popup-def-label-color: #916403;
    --victory-btn-copied-bg: #875d03;
    --victory-btn-copied-border: #875d03;

    /* Teal button text */
    --submit-btn-color: #fbf9f6;
    --victory-btn-primary-color: #fbf9f6;

    /* Typography — Masthead sizes */
    --logo-size: 34px;
    --logo-sub-size: 11px;

    /* Typography — Progress sizes */
    --progress-details-close-size: 22px;
    --progress-details-title-size: 18px;
    --progress-detail-row-size: 14px;
    --progress-detail-label-size: 11.5px;
    --progress-caption-size: 13px;

    /* Typography — Plate sizes */
    --plate-no-size: 10px;
    --plate-title-size: 12px;

    /* Typography — Pond sizes */
    --pond-instructions-size: 15.5px;

    /* Typography — Word build sizes */
    --word-build-message-size: 13.5px;
    --word-build-tile-size: 1.4rem;

    /* Typography — Keyboard sizes */
    --letter-egg-size: 36px;
    --action-btn-size: 10px;
    --action-btn-glyph-size: 14px;

    /* Typography — Found words sizes */
    --found-toggle-size: 11px;
    --found-count-size: 10px;
    --found-chevron-size: 9px;
    --share-pill-size: 11px;
    --found-columns-em-size: 12px;
    --found-col-header-size: 9px;
    --found-word-size: 0.78rem;

    /* Typography — Rare popup sizes */
    --rare-popup-close-size: 22px;
    --rare-popup-word-size: 1.4rem;
    --rare-popup-pct-size: 12.5px;
    --rare-popup-def-size: 0.85rem;
    --rare-popup-def-label-size: 0.7rem;

    /* Typography — Victory popup sizes */
    --victory-btn-size: 11px;

    /* Typography — Misc sizes */
    --loading-size: 12px;
    --site-footer-size: 11px;
    --legal-h1-size: 2rem;
    --legal-h2-size: 1.2rem;
    --legal-h3-size: 1rem;
    --legal-meta-size: 0.9rem;

    /* Typography — Weights */
    --plate-no-weight: 600;
    --progress-detail-value-weight: 500;
    --word-build-rare-weight: 600;
    --action-btn-weight: 600;
    --found-count-weight: 700;
    --found-col-header-weight: 700;
    --found-word-weight: 500;
    --found-word-rare-weight: 700;
    --rare-popup-pct-weight: 500;
    --rare-popup-def-label-weight: 700;
    --victory-btn-weight: 600;
    --legal-h1-weight: 400;
    --legal-h2-weight: 600;
    --legal-h3-weight: 600;

    /* Typography — Font families */
    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-serif: 'Lora', serif;
    --font-serif-display: 'DM Serif Display', serif;

    /* Typography — Letter spacing */
    --logo-tracking: 4px;
    --logo-sub-tracking: 1.5px;
    --progress-details-title-tracking: 2px;
    --progress-detail-label-tracking: 1px;
    --progress-caption-tracking: 1px;
    --plate-no-tracking: 3px;
    --word-build-message-tracking: 0.3px;
    --word-build-tile-tracking: 0;
    --action-btn-tracking: 1.5px;
    --submit-btn-tracking: 3px;
    --found-toggle-tracking: 2px;
    --found-count-tracking: 0.5px;
    --share-pill-tracking: 2px;
    --found-col-header-tracking: 1.5px;
    --found-word-tracking: 1px;
    --rare-popup-word-tracking: 3px;
    --rare-popup-pct-tracking: 0.3px;
    --rare-popup-def-label-tracking: 1.5px;
    --victory-btn-tracking: 2px;
    --loading-tracking: 0.5px;
    --site-footer-tracking: 0.5px;
    --legal-h1-tracking: 0.5px;

    /* Typography — Styles */
    --logo-sub-style: italic;
    --progress-detail-label-style: italic;
    --progress-caption-style: italic;
    --plate-title-style: italic;
    --pond-instructions-style: italic;
    --word-build-message-style: italic;
    --found-columns-em-style: italic;
    --rare-popup-pct-style: italic;
    --rare-popup-def-text-style: italic;
    --loading-style: italic;
    --site-footer-style: italic;
    --legal-meta-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
}

body {
    font-family: var(--font-sans);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(120,90,50,0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(120,90,50,0.04) 0%, transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    padding: 32px 40px 36px;
    box-sizing: border-box;
}

.frame-inner {
    max-width: 700px;
    margin: 0 auto;
}

/* === Masthead === */
.masthead {
    text-align: center;
    margin-bottom: 14px;
}
.logo {
    font-family: var(--font-serif-display);
    font-size: var(--logo-size);
    letter-spacing: var(--logo-tracking);
    color: var(--ink);
    line-height: 1;
}
.logo a {
    color: inherit;
    text-decoration: none;
}
.logo-sub {
    font-family: var(--font-serif);
    font-style: var(--logo-sub-style);
    font-size: var(--logo-sub-size);
    color: var(--ink-soft);
    letter-spacing: var(--logo-sub-tracking);
    margin-top: 6px;
}

/* === Progress === */
.progress {
    margin: 16px auto 18px;
    max-width: 440px;
    min-height: 36px;
}
.progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 12px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.progress-track:hover { border-color: var(--ink-soft); }
.progress-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.progress-details {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 30, 20, 0.35);
    animation: progressFadeIn 0.18s ease-out;
}
.progress-details[hidden] { display: none; }
.progress-details-inner {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 22px 28px 20px;
    width: min(360px, calc(100% - 40px));
    box-shadow: 0 8px 32px rgba(60, 45, 25, 0.25);
    font-family: var(--font-serif);
    color: var(--ink);
    animation: progressPopIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.progress-details-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    font-size: var(--progress-details-close-size);
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px 8px;
}
.progress-details-close:hover { color: var(--ink); }
.progress-details-title {
    font-family: var(--font-serif-display);
    font-size: var(--progress-details-title-size);
    letter-spacing: var(--progress-details-title-tracking);
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.progress-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: var(--progress-detail-row-size);
}
.progress-detail-row + .progress-detail-row { border-top: 1px dashed var(--rule); }
.progress-detail-row span:first-child {
    font-style: var(--progress-detail-label-style);
    color: var(--ink-soft);
    letter-spacing: var(--progress-detail-label-tracking);
    text-transform: uppercase;
    font-size: var(--progress-detail-label-size);
}
.progress-detail-row span:last-child { font-weight: var(--progress-detail-value-weight); }

@keyframes progressFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes progressPopIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.progress-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--teal), var(--teal-dark));
    border-radius: 999px;
    transition: width 0.6s ease-out;
}
.progress-dot.bonus-pulse {
    animation: progressBonusPulse 0.8s ease-out;
}
@keyframes progressBonusPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--progress-dot-bg-reached-4) 35%, transparent);
    }
    45% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 4px 1px color-mix(in srgb, var(--progress-dot-bg-reached-4) 30%, transparent);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--progress-dot-bg-reached-4) 0%, transparent);
    }
}
.progress-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--progress-dot-bg);
    border: 1.5px solid var(--progress-dot-border);
    transition: background 0.3s, border-color 0.3s;
    z-index: 2;
}
.progress-dot.reached {
    background: var(--progress-dot-bg-reached);
    border-color: var(--progress-dot-border-reached);
}
.progress-dot[data-milestone="0"].reached { background: var(--progress-dot-bg-reached-1); }
.progress-dot[data-milestone="1"].reached { background: var(--progress-dot-bg-reached-2); }
.progress-dot[data-milestone="2"].reached { background: var(--progress-dot-bg-reached-3); }
.progress-dot[data-milestone="3"].reached { background: var(--progress-dot-bg-reached-4); }
.progress-caption {
    text-align: center;
    margin-top: 8px;
    font-family: var(--font-serif);
    font-style: var(--progress-caption-style);
    font-size: var(--progress-caption-size);
    color: var(--ink-soft);
    letter-spacing: var(--progress-caption-tracking);
}

/* === Plate (shared frame for pond and keyboard) === */
.plate {
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
    padding: 14px 20px 16px;
    position: relative;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.plate + .plate { margin-top: 0; }

.plate-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 6px;
    margin-bottom: 14px;
    gap: 16px;
}
.plate-no {
    font-family: var(--font-serif);
    font-size: var(--plate-no-size);
    letter-spacing: var(--plate-no-tracking);
    text-transform: uppercase;
    font-weight: var(--plate-no-weight);
    color: var(--ink);
    white-space: nowrap;
}
.plate-title {
    font-family: var(--font-serif);
    font-style: var(--plate-title-style);
    font-size: var(--plate-title-size);
    color: var(--ink-soft);
    text-align: right;
}

/* === Pond — Plate I === */
.pond {
    position: relative;
    height: 200px;
    border: 1px solid var(--rule);
    overflow: hidden;
    background: linear-gradient(180deg,
        var(--pond-sky) 0%,
        var(--pond-sky) 67%,
        var(--pond-water) 67%,
        var(--pond-water) 100%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 51px;
    gap: 4px;
}

.reeds-l, .reeds-r {
    position: absolute;
    bottom: 0;
    width: 42px;
    height: 178px;
    pointer-events: none;
    z-index: 3;
}
.reeds-l { left: 0; bottom: -2px; }
.reeds-r { right: 0; bottom: -2px; }
.reeds-mobile { display: none; }

.pond-instructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--pond-text);
    font-family: var(--font-serif);
    font-style: var(--pond-instructions-style);
    font-size: var(--pond-instructions-size);
    line-height: 1.5;
    width: 60%;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    z-index: 2;
}
.pond-instructions.hidden {
    opacity: 0;
    display: none;
}

.duckling-parade {
    display: contents;
}

.nest-hint {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--pond-text);
    font-family: var(--font-serif);
    font-style: var(--pond-instructions-style);
    font-size: var(--pond-instructions-size);
    line-height: 1.5;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    opacity: 0;
    animation: nestHintFadeIn 0.6s ease-out 0.4s forwards;
}
@keyframes nestHintFadeIn {
    to { opacity: 1; }
}

.pond-duckling {
    flex: 0 1 80px;
    aspect-ratio: 4 / 3;
    animation: ducklingSlideIn 0.5s ease-out forwards;
    min-width: 20px;
    position: relative;
    z-index: 2;
}
.pond-duckling[data-milestone],
.pond-duckling[data-length="rare"] {
    flex-basis: 88px;
}
.pond-duckling svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ducklingSlideIn {
    0%   { opacity: 0; transform: scale(0.3) translateY(10px); }
    60%  { transform: scale(1.15) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Water-only layer: covers the pond's lower water band (the gradient switches
   from sky to water at 67%) and clips anything inside it, so ripples never
   spill up into the sky. Sits behind the ducks (z-index 2). */
.pond-water-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 67%;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Gentle ripples that spread across the water when a duck lands. Each ring is
   an ellipse — flattened to suggest the water surface seen at an angle — and
   the three are staggered so they appear to radiate outward continuously. */
.pond-ripple {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pond-ripple span {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--pond-ripple);
    border-radius: 50%;
    opacity: 0;
    animation: pondRipple 6s ease-out forwards;
}
/* All three rings start together from the splash point but travel at different
   speeds, so they fan apart as they cross the pond — ring 1 fastest, ring 3
   slowest. */
.pond-ripple span:nth-child(2) { animation-duration: 9s; }
.pond-ripple span:nth-child(3) { animation-duration: 12s; }

/* Final size comes from --ripple-max-w/h, set in JS to twice the pond width so
   the rings travel toward the edges. They fade out before reaching that extent,
   though, so they dissipate mid-water rather than running to the edge. Height
   is a flattened fraction of width for the water-surface-at-an-angle look. */
@keyframes pondRipple {
    0%   { width: 10px; height: 4px; opacity: 0; }
    12%  { opacity: 0.5; }
    65%  { opacity: 0; }
    100% {
        width: var(--ripple-max-w, 600px);
        height: var(--ripple-max-h, 200px);
        opacity: 0;
    }
}

/* === Word Build (between plates) === */
.word-build {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0;
    gap: 6px;
}
.word-build-message {
    font-family: var(--font-serif);
    font-style: var(--word-build-message-style);
    font-size: var(--word-build-message-size);
    color: var(--ink-soft);
    letter-spacing: var(--word-build-message-tracking);
}
.word-build.message-mode.error .word-build-message { color: var(--msg-error); font-style: normal; }
.word-build.message-mode.success .word-build-message { color: var(--msg-success); font-style: normal; }
.word-build.message-mode.rare .word-build-message { color: var(--msg-rare); font-weight: var(--word-build-rare-weight); font-style: normal; }

.word-build-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    font-family: var(--font-serif-display);
    font-size: var(--word-build-tile-size);
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    text-transform: uppercase;
    animation: tilePop 0.15s ease-out;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

@keyframes tilePop {
    0%   { transform: scale(0.5) translateY(-6px); opacity: 0; }
    60%  { transform: scale(1.1)  translateY(0); opacity: 1; }
    100% { transform: scale(1)    translateY(0); opacity: 1; }
}

.word-build-cursor {
    display: inline-block;
    width: 2px;
    height: 28px;
    background: var(--ink);
    border-radius: 1px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: middle;
}
@keyframes cursorBlink {
    50% { opacity: 0; }
}

/* === Keyboard — Plate II === */
#keyboard-plate { height: 267px; }

.egg-keyboard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.letter-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.letter-row + .letter-row {
    margin-top: 12px;
}

.letter-egg {
    width: 64px;
    padding: 10px 0 10px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 1px 1px 0 rgba(0,0,0,0.04);
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-serif-display);
    font-size: var(--letter-egg-size);
    color: var(--ink);
    line-height: 1;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, opacity 0.2s;
}
.letter-egg:hover:not(.used):not(:active):not(:disabled) {
    background: #E8DFC8;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(60, 45, 25, 0.10), 1px 2px 0 rgba(0,0,0,0.04);
}
.letter-egg:active:not(.used):not(:disabled) {
    transform: scale(0.94);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.letter-egg.used,
.letter-egg:disabled {
    background: var(--paper);
    color: var(--ink-faint);
    border-color: var(--rule);
    cursor: default;
    opacity: 0.45;
    transform: none;
    box-shadow: none;
}
.letter-egg.pressed {
    animation: keyPress 0.18s ease-out;
}
@keyframes keyPress {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.92); background: #EFE6CB; }
    100% { transform: scale(1); }
}

/* Action row (Erase / Reorder / Enter) */
.action-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
}
.action-btn {
    border: 1px solid var(--rule);
    background: var(--paper-2);
    padding: 7px 14px;
    border-radius: 10px;
    font-family: var(--font-serif);
    font-size: var(--action-btn-size);
    letter-spacing: var(--action-btn-tracking);
    color: var(--ink);
    text-transform: uppercase;
    font-weight: var(--action-btn-weight);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.1s, background 0.15s, opacity 0.2s;
}
.action-btn:hover:not(:disabled) {
    background: #E8DFC8;
}
.action-btn:active:not(:disabled) {
    transform: scale(0.95);
}
.action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.action-btn .glyph {
    font-family: var(--font-sans);
    font-size: var(--action-btn-glyph-size);
    line-height: 1;
    letter-spacing: 0;
}
.submit-btn {
    background: var(--teal);
    color: var(--submit-btn-color);
    border-color: var(--teal-dark);
    border-radius: 10px;
    letter-spacing: var(--submit-btn-tracking);
    padding: 7px 22px;
}
.submit-btn:hover:not(:disabled) {
    background: var(--teal-hover);
}

/* === Found Words + Share Progress row === */
.actions-row {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 20px auto 0;
    padding: 0 4px;
}

.found-words {
    flex: 1;
    min-width: 0;
}
.found-toggle {
    width: 100%;
    border: 1px solid var(--found-toggle-border);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-serif);
    font-size: var(--found-toggle-size);
    text-transform: uppercase;
    letter-spacing: var(--found-toggle-tracking);
    color: var(--found-toggle-color);
    background: var(--found-toggle-bg);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}
.found-toggle:hover {
    background: var(--found-toggle-hover-bg);
    color: var(--found-toggle-hover-color);
}
.found-count {
    background: var(--found-count-bg);
    color: #fff;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: var(--found-count-size);
    font-weight: var(--found-count-weight);
    letter-spacing: var(--found-count-tracking);
    min-width: 22px;
    text-align: center;
}
.found-chevron {
    margin-left: auto;
    font-size: var(--found-chevron-size);
    transition: transform 0.2s;
}
.found-toggle.open .found-chevron {
    transform: rotate(180deg);
}

.share-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    border: 1px solid var(--share-pill-border);
    border-radius: 10px;
    padding: 9px 18px;
    font-family: var(--font-serif);
    font-size: var(--share-pill-size);
    text-transform: uppercase;
    letter-spacing: var(--share-pill-tracking);
    color: var(--share-pill-color);
    background: var(--share-pill-bg);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.share-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.share-pill:hover { background: var(--share-pill-hover-bg); color: var(--share-pill-hover-color); }
.share-pill.copied { background: var(--share-pill-copied-bg); color: var(--share-pill-copied-color); border-color: var(--share-pill-copied-border); }
/* Won state — gold accent so the persistent Share pill cues a returning
   visitor that they've already crossed the win line and can share now. */
.share-pill.won {
    border-color: var(--share-pill-won-border);
    color: var(--share-pill-won-color);
    background: var(--share-pill-won-bg);
}
.share-pill.won:hover { background: var(--share-pill-won-hover-bg); }
.share-pill.won svg { color: var(--share-pill-won-icon); }
.share-pill.won.copied {
    background: var(--share-pill-won-copied-bg);
    border-color: var(--share-pill-won-copied-border);
    color: var(--share-pill-won-copied-color);
}

/* === Found Words dropdown content === */
.found-dropdown {
    display: none;
    margin: 8px auto 0;
    max-width: 520px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.found-dropdown.open {
    display: block;
}

.found-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    justify-items: center;
    max-width: 480px;
    margin: 0 auto;
}
.found-columns em {
    color: var(--ink-faint);
    font-style: var(--found-columns-em-style);
    font-family: var(--font-serif);
    font-size: var(--found-columns-em-size);
    grid-column: 1 / -1;
    text-align: center;
}
.found-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
    max-width: 110px;
    align-items: center;
}
.found-col-header {
    font-family: var(--font-serif);
    font-size: var(--found-col-header-size);
    font-weight: var(--found-col-header-weight);
    text-transform: uppercase;
    letter-spacing: var(--found-col-header-tracking);
    padding-bottom: 4px;
    border-bottom: 1px solid;
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
}
.found-word {
    font-family: var(--font-serif);
    font-size: var(--found-word-size);
    text-transform: uppercase;
    letter-spacing: var(--found-word-tracking);
    font-weight: var(--found-word-weight);
    color: var(--ink);
    padding: 2px 0;
}
.found-word.rare-word {
    position: relative;
    font-weight: var(--found-word-rare-weight);
    color: var(--found-word-rare-color);
}
.found-word.rare-word::after {
    content: " \2605";
    position: absolute;
    left: 100%;
    top: 0;
}

.found-col[data-length="4"] .found-col-header { color: var(--milestone1-dark); border-bottom-color: var(--milestone1-dark); }
.found-col[data-length="5"] .found-col-header { color: var(--milestone2-dark); border-bottom-color: var(--milestone2-dark); }
.found-col[data-length="6"] .found-col-header { color: var(--milestone3-dark); border-bottom-color: var(--milestone3-dark); }
.found-col[data-length="7"] .found-col-header { color: var(--milestone4-dark); border-bottom-color: var(--milestone4-dark); }

/* === End-of-game === */
#keyboard-plate,
.word-build {
    overflow: hidden;
    transition: opacity 1.2s ease-out;
}
body.endgame-fading #keyboard-plate,
body.endgame-fading .word-build {
    opacity: 0;
    pointer-events: none;
}
/* Smooth height collapse so the action row glides upward into the pond. */
body.endgame-hidden #keyboard-plate,
body.endgame-hidden .word-build {
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    transition: max-height 1.4s ease-in-out,
                margin 1.4s ease-in-out,
                padding 1.4s ease-in-out,
                border-width 1.4s ease-in-out;
}
/* Game loaded already complete — no animation to play. */
body.endgame-collapsed-instant #keyboard-plate,
body.endgame-collapsed-instant .word-build {
    display: none;
}
/* === Endgame countdown (shown beneath the pond when complete) === */
.endgame-footer {
    --ddw-ink:   var(--ink);
    --ddw-muted: var(--ink-soft);
    --ddw-rust:  #bb6a33;
    --ddw-rule:  #d6ccb4;

    margin-top: 16px;
    padding: 0.575rem 1rem 0.2875rem;
    text-align: center;
    font-family: var(--font-serif);
    line-height: 1.2;
    opacity: 0;
    animation: endgameFooterIn 0.8s ease-out 0.2s forwards;
}
@keyframes endgameFooterIn {
    to { opacity: 1; }
}

/* Ornament: hairline — feather — hairline. The feather settles into the slot
   from the win confetti (see launchHeroFeather); on a completed-load it's just
   placed there. The slot is sized to the rotated feather's bounding box so the
   hairlines sit clear of it and the row height doesn't jump. */
.ddw-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.575rem;
    margin-bottom: 0.575rem;
}
.ddw-footer__rule {
    width: 41px;
    height: 1px;
    background: var(--ddw-rule);
}
.ddw-footer__feather {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 42px;
    opacity: 0;
}
.ddw-footer__feather svg {
    display: block;
    transform: rotate(32deg);
}

/* Farewell line */
.ddw-footer__farewell {
    margin: 0;
    font-style: italic;
    font-size: 1.006rem;
    color: var(--ddw-muted);
}

/* Small-caps label */
.ddw-footer__label {
    margin: 0.575rem 0 0;
    font-size: 0.647rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ddw-muted);
}

/* Countdown timer */
.ddw-footer__timer {
    margin: 0.115rem 0 0;
    font-family: var(--font-serif-display);
    font-size: 1.294rem;
    letter-spacing: 0.05em;
    color: var(--ddw-ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* "Ready" state when countdown hits zero */
.ddw-footer__timer--ready {
    font-size: 1.006rem;
    font-style: italic;
    letter-spacing: 0;
    color: var(--ddw-rust);
    cursor: pointer;
}

/* === Rare Word Popup === */
.rare-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background: rgba(40, 30, 20, 0.35);
    animation: progressFadeIn 0.18s ease-out, rareFadeOut 8s ease-out forwards;
}
.rare-popup-inner {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 22px 28px 20px;
    width: min(360px, calc(100% - 40px));
    box-shadow: 0 8px 32px rgba(60, 45, 25, 0.25);
    font-family: var(--font-serif);
    color: var(--ink);
    text-align: center;
    animation: progressPopIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.rare-popup-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    font-size: var(--rare-popup-close-size);
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px 8px;
}
.rare-popup-close:hover { color: var(--ink); }
/* During auto-close, hide the X until ~4s in so users get a delayed cue
   that the popup is dismissible. After the fade-in lands, restore pointer
   events so the button is clickable. */
.rare-popup.auto-fading .rare-popup-close {
    opacity: 0;
    pointer-events: none;
    animation: rareCloseReveal 0.5s ease-out 2.5s forwards;
}
@keyframes rareCloseReveal {
    to { opacity: 1; pointer-events: auto; }
}
.pond-duckling[data-length="rare"] { cursor: pointer; }
body.endgame-hidden .pond-duckling,
body.endgame-collapsed-instant .pond-duckling { cursor: pointer; }

.rare-popup-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rare-popup-word {
    font-family: var(--font-serif-display);
    font-size: var(--rare-popup-word-size);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--rare-popup-word-tracking);
    text-align: center;
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--rule);
}
.rare-popup-pct {
    font-family: var(--font-serif);
    font-style: var(--rare-popup-pct-style);
    font-size: var(--rare-popup-pct-size);
    color: var(--gold);
    font-weight: var(--rare-popup-pct-weight);
    margin: 0;
    letter-spacing: var(--rare-popup-pct-tracking);
    text-align: left;
}
.rare-popup-actual {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    margin: 0;
}
.rare-popup-actual-word {
    font-family: var(--font-serif-display);
    font-size: var(--rare-popup-word-size);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--rare-popup-word-tracking);
}
.rare-popup-actual-sep {
    font-family: var(--font-serif-display);
    font-size: var(--rare-popup-word-size);
    color: var(--ink);
    letter-spacing: var(--rare-popup-word-tracking);
}
.rare-popup-actual-pos {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-soft);
}
.rare-popup-def {
    font-size: var(--rare-popup-def-size);
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
    text-align: left;
}
.rare-popup-def-label {
    font-family: var(--font-serif);
    font-weight: var(--rare-popup-def-label-weight);
    color: var(--rare-popup-def-label-color);
    text-transform: uppercase;
    font-size: var(--rare-popup-def-label-size);
    letter-spacing: var(--rare-popup-def-label-tracking);
    margin-right: 4px;
}
.rare-popup-def-prefix {
    font-family: var(--font-serif);
    font-style: italic;
}
.rare-popup-def-text {
    font-family: var(--font-serif);
    font-style: normal;
}
.rare-popup-def-pos {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--rare-popup-def-label-color);
    opacity: 0.85;
}

@keyframes rareFadeOut {
    0%, 70% { opacity: 1; }
    100%    { opacity: 0; }
}

/* === Duck Species Popup (final screen) === */
.duck-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background: rgba(40, 30, 20, 0.35);
    animation: progressFadeIn 0.18s ease-out;
}
.duck-popup-inner {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 20px 28px 22px;
    width: min(320px, calc(100% - 40px));
    box-shadow: 0 8px 32px rgba(60, 45, 25, 0.25);
    font-family: var(--font-serif);
    color: var(--ink);
    text-align: center;
    animation: progressPopIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.duck-popup-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    font-size: var(--rare-popup-close-size);
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px 8px;
}
.duck-popup-close:hover { color: var(--ink); }
.duck-popup-number {
    font-family: var(--font-serif);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.duck-popup-common {
    font-family: var(--font-serif-display);
    font-size: 1.45rem;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
}
.duck-popup-binomial {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}
.duck-popup-desc {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.duck-popup-link {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.duck-popup-link:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* === Victory Popup (80% win) === */
.victory-popup {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 30, 20, 0.45);
    animation: progressFadeIn 0.22s ease-out;
}
.victory-popup-inner {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 28px 32px 24px;
    width: min(380px, calc(100% - 40px));
    box-shadow: 0 10px 40px rgba(60, 45, 25, 0.32);
    text-align: center;
    animation: progressPopIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.victory-popup-header {
    font-family: var(--font-serif-display);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--rare-popup-word-tracking);
    text-align: center;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--rule);
}
.victory-popup-hint {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--rare-popup-def-size);
    color: var(--ink-soft);
    text-align: center;
    margin: 14px 4px 18px;
    line-height: 1.5;
}
.victory-popup-duck {
    margin: 0 auto 18px;
}
.victory-popup-duck svg {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.victory-popup-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.victory-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--font-serif);
    font-size: var(--victory-btn-size);
    font-weight: var(--victory-btn-weight);
    text-transform: uppercase;
    letter-spacing: var(--victory-btn-tracking);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    color: var(--ink);
    transition: background 0.15s, transform 0.1s, color 0.15s, border-color 0.15s;
}
.victory-btn:hover { background: #E8DFC8; }
.victory-btn:active { transform: scale(0.97); }
.victory-btn.primary {
    background: var(--teal);
    color: var(--victory-btn-primary-color);
    border-color: var(--teal-dark);
    border-radius: 10px;
}
.victory-btn.primary:hover { background: var(--teal-hover); }
.victory-btn.copied,
.victory-btn.primary.copied:hover {
    background: var(--victory-btn-copied-bg);
    border-color: var(--victory-btn-copied-border);
    color: #fff;
}

@media (max-width: 600px) {
    .victory-popup-inner { padding: 22px 22px 20px; }
    .victory-btn { font-size: 10px; letter-spacing: 1.5px; padding: 9px 10px; }
}

/* === Loading === */
.loading {
    text-align: center;
    padding: 14px;
    font-family: var(--font-serif);
    font-style: var(--loading-style);
    font-size: var(--loading-size);
    color: var(--ink-faint);
    letter-spacing: var(--loading-tracking);
}

/* === Site footer === */
.site-footer {
    text-align: center;
    margin-top: 24px;
    padding: 6px 4px 0;
    font-family: var(--font-serif);
    font-size: var(--site-footer-size);
    font-style: var(--site-footer-style);
    color: var(--ink-faint);
    letter-spacing: var(--site-footer-tracking);
}
.site-footer a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule);
    padding-bottom: 1px;
}
.site-footer a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}
.footer-sep {
    margin: 0 8px;
    color: var(--rule);
}

/* === Mobile === */
@media (max-width: 600px) {
    body { padding: 22px 18px 24px; }
    .frame-inner { max-width: 100%; }

    .logo { font-size: 26px; letter-spacing: 3px; }
    .logo-sub { font-size: 10px; }

    .progress { max-width: 100%; }

    .plate { padding: 8px 9px 5px; }
    #keyboard-plate { height: auto; padding-bottom: 10px; }
    .plate-header { margin-bottom: 10px; }
    .plate-no { font-size: 9px; letter-spacing: 2px; }
    .plate-title { font-size: 11px; }

    .pond { height: 135px; padding-bottom: 32px; margin: 5px 0; }
    .reeds-l, .reeds-r { width: 46px; height: 114px; bottom: 0px; }
    .reeds-l { left: -19px; }
    .reeds-r { right: -19px; }
    .reeds-l .reeds-desktop, .reeds-r .reeds-desktop { display: none; }
    .reeds-l .reeds-mobile, .reeds-r .reeds-mobile { display: block; }
.pond-instructions { font-size: 12px; width: 70%; }
    .nest-hint { font-size: 12px; }
    .pond-duckling { flex: 0 1 54px; min-width: 25px; }
    .pond-duckling[data-milestone],
    .pond-duckling[data-length="rare"] { flex-basis: 59px; }

    .word-build { height: 36px; margin: 8px 0; }
    .word-build-tile {
        width: 28px;
        height: 32px;
        font-size: 1.15rem;
    }
    .word-build-cursor { height: 24px; }

    .letter-row { gap: 8px; }
    .letter-row + .letter-row { margin-top: 8px; }
    .letter-egg {
        width: 13.5vw;
        max-width: 56px;
        padding: 8px 0 6px;
        font-size: 26px;
    }

    .action-row { gap: 8px; margin-top: 14px; padding-top: 10px; }
    .action-btn { padding: 6px 10px; font-size: 9px; letter-spacing: 1px; }
    .submit-btn { padding: 6px 16px; letter-spacing: 2px; }

    .actions-row { flex-wrap: wrap; gap: 8px; }
    .found-toggle { padding: 9px 14px; font-size: 10px; letter-spacing: 1.5px; }
    .share-pill { padding: 9px 12px; font-size: 10px; letter-spacing: 1.5px; }

    .found-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .found-col-header { font-size: 8px; }
    .found-word { font-size: 0.72rem; }

    .endgame-footer { margin-top: 14px; padding: 0.5rem 1rem 0.25rem; }
    .ddw-footer__ornament { gap: 0.5rem; margin-bottom: 0.5rem; }
    .ddw-footer__rule { width: 36px; }
    .ddw-footer__farewell { font-size: 0.875rem; }
    .ddw-footer__label { margin-top: 0.5rem; font-size: 0.5625rem; }
    .ddw-footer__timer { margin-top: 0.1rem; font-size: 1.125rem; }
    .ddw-footer__timer--ready { font-size: 0.875rem; }

    .rare-popup-inner { max-width: 280px; padding: 20px 24px; }
    .duck-popup-inner { max-width: 280px; padding: 18px 22px 20px; }
    .duck-popup-common { font-size: 1.25rem; }
    .duck-popup-binomial { font-size: 0.85rem; }
}

/* === Legal page (terms, privacy) === */
.legal-masthead {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 20px;
    border-bottom: 1px solid var(--rule);
}
.legal-masthead .logo-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.legal-masthead .logo-link:hover .logo { color: var(--teal); }

.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px 40px;
    line-height: 1.6;
    color: var(--ink);
}
.legal-page h1 {
    font-family: var(--font-serif-display);
    font-size: var(--legal-h1-size);
    font-weight: var(--legal-h1-weight);
    margin-bottom: 8px;
    letter-spacing: var(--legal-h1-tracking);
}
.legal-page h2 {
    font-family: var(--font-serif);
    font-size: var(--legal-h2-size);
    font-weight: var(--legal-h2-weight);
    margin-top: 32px;
    margin-bottom: 10px;
}
.legal-page h3 {
    font-family: var(--font-serif);
    font-size: var(--legal-h3-size);
    font-weight: var(--legal-h3-weight);
    margin-top: 18px;
    margin-bottom: 6px;
}
.legal-page p { margin-bottom: 12px; }
.legal-page ul { margin: 0 0 12px 24px; }
.legal-page li { margin-bottom: 4px; }
.legal-meta {
    color: var(--ink-soft);
    font-style: var(--legal-meta-style);
    font-family: var(--font-serif);
    font-size: var(--legal-meta-size);
    margin-bottom: 24px;
}

/* === Feather confetti (100% full-clear celebration) ===
   The overlay is a fixed, click-through layer that sits above everything.
   game.js spawns .feather-particle nodes into it, animates their flight
   path with the Web Animations API, and lets CSS handle the flutter spin. */
.feather-confetti {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}
.feather-particle {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform, opacity;
}
/* Inner node spins/wobbles independently of the flight path so the feather
   appears to flutter as it drifts. Duration/direction are randomized in JS. */
.feather-particle .feather-inner {
    display: block;
    animation: featherFlutter var(--flutter-dur, 1.6s) ease-in-out infinite alternate;
}
.feather-particle svg { display: block; }

/* The single feather that peels out of the burst and settles into the footer
   ornament. Rotation is baked into its keyframes (no independent flutter), so
   it can land at a fixed rest angle that matches the resting slot feather. */
.feather-hero {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    will-change: transform, opacity;
}
.feather-hero svg { display: block; }

@keyframes featherFlutter {
    0%   { transform: rotate(-32deg) rotateY(0deg)   scale(1); }
    100% { transform: rotate(32deg)  rotateY(150deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
    /* Skip the spin; JS also shortens/abbreviates the burst when reduced. */
    .feather-particle .feather-inner { animation: none; }
}