/* Shared art for the small game cards on both marketing pages.
   Desktop reveals on hover. Touch devices get [data-scrub] from game-art.js and reveal from
   --p, the card's scroll progress through the viewport (0 entering the bottom, 1 leaving the top). */
.four-board{--disc-red:#d94743;--disc-red-shadow:#8d262588;position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:231px;border:1px solid #89739566;border-bottom:5px solid #584968;padding:14px;background:#9d8aaf;transform:rotate(6deg);border-radius:5px;box-shadow:0 15px 25px -20px #000b;transition:transform 380ms var(--ease)}
.four-board span{aspect-ratio:1;border-radius:50%;background:#43384f;box-shadow:inset 0 2px 2px #261a3655}
.four-board .yellow{background:#f3cb4d;box-shadow:inset 0 -2px 1px #b6822088}.four-board .red{background:var(--disc-red);box-shadow:inset 0 -2px 1px var(--disc-red-shadow)}
.four-board .winning-disc{position:relative}
.four-board .winning-disc:after{content:'';position:absolute;inset:3px;border:1px solid #ffe7b3;border-radius:50%;opacity:0;transition:opacity 150ms var(--ease)}
.four-board .drop-disc:before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--disc-red);box-shadow:inset 0 -2px 1px var(--disc-red-shadow);transform:translateY(-150px);transition:transform 450ms cubic-bezier(.32,0,.67,1)}
.four-art .four-board{width:206px;padding:12px}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.game-flip,.game-preview)[aria-expanded=false]:is(:hover,:focus-visible) .four-board{transform:rotate(0) translateY(-3px)}
  :is(.game-flip,.game-preview)[aria-expanded=false]:is(:hover,:focus-visible) .drop-disc:before{transform:translateY(0)}
  :is(.game-flip,.game-preview)[aria-expanded=false]:is(:hover,:focus-visible) .winning-disc:after{opacity:1;transition-delay:450ms}
}

/* Scroll-driven reveal. The disc drops over the first 70% of travel, the winning ring fades in after. */
[data-scrub] .four-board .drop-disc:before{transition:none;transform:translateY(calc(-150px * (1 - clamp(0,calc(var(--p,0) / .7),1))))}
[data-scrub] .four-board .winning-disc:after{transition:none;opacity:clamp(0,calc((var(--p,0) - .75) * 6),1)}
/* Wordy answer row flips (for-doms page) or fills green (subs page) one tile after another. */
[data-scrub] .wordy-letter{--pt:clamp(0,calc((var(--p,0) - var(--tile,0) * .09) / .55),1);transition:none;transform:rotateX(calc(var(--pt) * 180deg))}
[data-scrub] .wordy-grid .answer{--pt:clamp(0,calc((var(--p,0) - var(--tile,0) * .09) / .55),1);transition:none;background:color-mix(in srgb,#6b8156 calc(var(--pt) * 100%),#f3f5ed);color:color-mix(in srgb,#fff calc(var(--pt) * 100%),#536342)}

@media(max-width:800px){.four-art .four-board{width:150px;padding:9px;gap:4px}}
@media(max-width:480px){.four-art .four-board{width:200px;padding:12px;gap:6px}}
@media(prefers-reduced-motion:reduce){.four-board,.four-board .drop-disc:before,.four-board .winning-disc:after{transition:none}}