.other-game{--art-height:244px;--card-back:#d5dfc4;--card-ink:#2e392c}
.blackjack-game{--card-back:#ecdac4;--card-ink:#4c2e38;--playing-card-width:112px}
.four-game{--card-back:#dcd2f1;--card-ink:#3a2d50}
.game-flip{display:block;width:100%;height:100%;padding:0;text-align:left;border-radius:6px;perspective:1200px}
.game-flip-inner{display:grid;min-height:calc(var(--art-height) + 50px);height:100%;transform-style:preserve-3d;transition:transform 480ms cubic-bezier(.22,.75,.2,1)}
.game-flip[aria-expanded=true] .game-flip-inner{transform:rotateY(180deg)}
.game-card-front,.game-card-back{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.game-card-front{display:grid;grid-template-rows:1fr auto;transform:translateZ(.5px)}
.game-card-front .small-game-art{position:relative;min-height:var(--art-height);height:100%;isolation:isolate}
.other-game-title strong{font:500 19px Sora,system-ui;letter-spacing:-.035em}
.game-flip-hint{position:absolute;right:15px;bottom:15px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #e8d1f630;border-radius:50%;color:#e2d0f1;background:#29213733;transition:transform 200ms var(--ease)}
.game-flip-hint .icon{width:15px;height:15px}
.game-card-back{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:27px 28px 30px;transform:rotateY(180deg) translateZ(.5px);background:var(--card-back);color:var(--card-ink);border-radius:6px}
.game-back-title{display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 13px Sora,system-ui;letter-spacing:-.03em}
.game-back-title .icon{width:19px;height:19px;transform:rotate(45deg);opacity:.7}
.game-copy{display:block;font:400 17px/1.65 Sora,system-ui;letter-spacing:-.03em;text-wrap:pretty}

.wordy-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:218px;max-width:76%;transform:rotate(-6deg);transition:transform 350ms var(--ease)}
.wordy-tile{display:grid;place-items:center;aspect-ratio:1;background:#69636e;color:#f8f2ea;font:500 20px Sora,system-ui;line-height:1;border-radius:3px}
.wordy-tile.maybe{background:#b49038;color:#fff4d8}
.wordy-tile.correct{background:#798f69;color:#fdf9eb}
.wordy-tile.answer{display:block;position:relative;background:none;perspective:200px}
.wordy-letter{display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 360ms cubic-bezier(.22,.75,.2,1)}
.wordy-letter:before,.wordy-letter:after{content:attr(data-letter);position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wordy-letter:before{background:#413b4b;border:1px solid #a494b170}
.wordy-letter:after{background:#798f69;color:#fdf9eb;transform:rotateX(180deg)}
.game-card-front .blackjack-art{height:100%;min-height:var(--art-height);padding-top:0}
.game-card-front .playing-card{display:block;flex:none;width:var(--playing-card-width);height:auto;aspect-ratio:121/170;object-fit:contain;border:0;border-radius:8px;background:transparent;box-shadow:0 12px 24px -12px #15042199;transition:transform 420ms cubic-bezier(.22,.75,.2,1)}
.game-card-front .playing-card.queen{transform:rotate(12deg) translateX(-7px)}
.game-card-front .blackjack-score{left:24px;right:auto;bottom:17px;transition:transform 380ms var(--ease),opacity 220ms var(--ease);opacity:.55}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .game-flip-hint{transform:rotate(90deg)}
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .wordy-preview{transform:rotate(0) translateY(-3px)}
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .wordy-letter{transform:rotateX(180deg);transition-delay:calc(var(--tile) * 60ms)}
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .playing-card.ace{transform:rotate(-23deg) translate(-2px,-7px)}
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .playing-card.queen{transform:rotate(19deg) translate(7px,-10px)}
  .game-flip[aria-expanded=false]:is(:hover,:focus-visible) .blackjack-score{transform:translateY(-5px);opacity:1}
}
@media(max-width:1100px){.other-game{--art-height:219px}.blackjack-game{--playing-card-width:96px}.other-game-title strong{font-size:17px}.game-card-back{padding:23px}.game-copy{font-size:15px}.wordy-preview{width:192px}.wordy-tile{font-size:18px}}
@media(max-width:800px){.other-game{--art-height:230px}.blackjack-game{--playing-card-width:82px}.other-game-title strong{font-size:16px}.game-card-back{padding:20px 18px;gap:20px}.game-copy{font-size:14px}.game-back-title{font-size:11px}.wordy-preview{gap:5px;max-width:80%}.wordy-tile{font-size:16px}.game-flip-hint{right:12px;bottom:12px;width:25px;height:25px}}
@media(max-width:560px){.other-game{--art-height:238px}.blackjack-game{--playing-card-width:112px}.other-game-title strong{font-size:18px}.game-card-back{padding:25px 26px 28px}.game-copy{font-size:16px;line-height:1.65}.game-back-title{font-size:13px}.wordy-preview{width:218px}.wordy-tile{font-size:20px}.game-flip-hint{right:16px;bottom:16px;width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){
  .game-flip-inner,.wordy-preview,.wordy-letter,.game-card-front .playing-card,.game-card-front .blackjack-score,.game-flip-hint{transition:none}
}