.game-menu { grid-template-columns: repeat(3,minmax(0,1fr)); }
.game-menu>article { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--paper,#fffdf8); border: 1px solid var(--line); padding: 0; overflow: hidden; border-radius: 24px; }
.game-menu>article h2 { margin: 4px 0; font-size: 21px; }
.game-menu>article p { margin: 0; flex: 1; }
.game-menu>article small { margin: 6px 0; font-variant-numeric: tabular-nums; }
.game-menu>article .primary-button { align-self: flex-start; }
.game-symbol { font-size: 34px; line-height: 1.4; }
.game-board { scroll-margin-top: 100px; }
.game-result { max-width: 560px; margin: auto; }
.game-result-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.game-result-stats>span { padding: 14px 20px; background: #b7834920; border-radius: 14px; }
.game-result-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.game-progress { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; }
.game-progress progress { accent-color: #9a704f; width: min(180px,45vw); height: 10px; }
.game-progress { justify-content:space-between; gap:16px; padding:12px 14px; border-radius:14px; background:linear-gradient(100deg,#f6ebf1,#fff8ed); color:#704c65; font-weight:750; letter-spacing:.055em; }
.game-progress progress { flex:0 0 min(180px,34vw); appearance:none; border:0; border-radius:999px; overflow:hidden; background:#e6d9e1; }
.game-progress progress::-webkit-progress-bar { background:#e6d9e1; border-radius:999px; }
.game-progress progress::-webkit-progress-value { background:linear-gradient(90deg,#956589,#e4a884); border-radius:999px; transition:width .3s ease; }
.game-progress progress::-moz-progress-bar { background:linear-gradient(90deg,#956589,#e4a884); border-radius:999px; }
.game-options button { text-align: left; min-width: min(260px,100%); font: inherit; }
.game-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.game-options button { min-width:0; min-height:72px; padding:16px 18px; border:1px solid var(--line,#eadfe6); border-radius:16px; background:var(--paper,#fffdf8); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.game-options button:not(:disabled):hover { transform:translateY(-2px); border-color:#a77f9e; }
.game-options button:focus-visible { outline:3px solid #a77f9e; outline-offset:3px; }
.game-options button.correct { background: #e2efdc; border-color: #59734b; opacity: 1; color: #294020; }
.game-options button.incorrect { background: #fae1e6; border-color: #9a5060; opacity: 1; color: #6e2939; }
.game-feedback { min-height: 28px; }
.memory-grid button { position: relative; aspect-ratio: 1; min-height: 0; transition: background .15s, transform .15s; touch-action: manipulation; }
.memory-grid button:not(:disabled):hover { transform: translateY(-3px); }
.memory-grid button.matched { background: #e2efdc; border-color: #59734b; }
.memory-grid button.matched::after { content: '✓'; position: absolute; right: 8px; bottom: 3px; font-size: 15px; color: #59734b; }
.arcade-stage { max-width: 660px; margin: auto; }
.arcade-stage header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
.arcade-stage header strong { font-variant-numeric:tabular-nums; }
.arcade-playfield { position: relative; width: min(100%,390px); margin: 24px auto; border: 2px solid #71634f; border-radius: 18px; padding: 8px; background: #171b24; touch-action: none; user-select: none; overflow: hidden; }
.arcade-cells { display: grid; grid-template-columns: repeat(var(--columns),minmax(0,1fr)); gap: 2px; }
.arcade-cells .cell { aspect-ratio:1; border-radius: 3px; background:#252a35; }
.arcade-cells .head,.arcade-cells .player { background: #c8e498; border-radius: 45%; box-shadow: inset 0 0 0 3px #ffffff20; }
.arcade-cells .tail { background: #719467; border-radius: 30%; }
.arcade-cells .food { background:#e8b88b; border-radius:50%; box-shadow:0 0 8px #e8b88b70; }
.arcade-cells .wall { background:#596580; border:1px solid #76829b; }
.arcade-cells .dot { background:radial-gradient(circle,#f8d9a7 0 18%,#252a35 23%); }
.arcade-cells .ghost { background:#e797b4; border-radius:45% 45% 20% 20%; }
.arcade-cells .ghost.scared { background:#8dd5ed; border-radius:45% 45% 20% 20%; box-shadow:0 0 10px #72d8ff; animation:ghost-glow .45s ease-in-out infinite alternate; }
.arcade-cells .power { background:#8dd5ed; border-radius:50%; box-shadow:0 0 12px #72d8ff; animation:power-pulse .65s ease-in-out infinite alternate; }
.arcade-cells .block { background:#a18bbc; border:1px solid #d4bedf; }
.arcade-cells .falling { background:#e8b88b; border:1px solid #ffe5c9; }
.arcade-cells .landing { background:#e8b88b18; border:1px dashed #e8b88b80; }
.arcade-playfield.tetris { width:min(100%,280px); }
.arcade-paused { position:absolute; inset:0; display:grid; place-content:center; padding:20px; background:#10151cdc; color:#fff7eb; font-weight:700; font-size:20px; border-radius:16px; pointer-events:none; }
.arcade-paused[hidden] { display:none; }
.arcade-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; margin:20px 0; }
.arcade-dpad { display:grid; grid-template-columns:repeat(3,48px); gap:7px; }
.arcade-dpad button { min-height:48px; border-radius:12px; border:1px solid #cbb8a4; background:#f0e6da; font-size:23px; touch-action:manipulation; }
.arcade-dpad button:active { transform:scale(.94); }
.arcade-dpad button:first-child { grid-column:2; }
.arcade-dpad button:nth-child(2) { grid-column:1; }
.arcade-settings { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0; }
.arcade-settings select { width:auto; min-height:44px; padding:8px 14px; border-radius:10px; }
.arcade-next { display:flex; justify-content:center; align-items:center; gap:14px; font-size:12px; }
.arcade-preview { display:grid; grid-template-columns:repeat(4,12px); gap:2px; padding:6px; border-radius:6px; background:#252a35; }
.arcade-preview i { width:12px; height:12px; border-radius:2px; }
.arcade-preview i.filled { background:#e8b88b; }
.game-hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:350px; overflow:hidden; border-radius:28px; background:linear-gradient(120deg,#48283f,#754766); color:#fff9f4; }
.game-hero-copy { position:relative; z-index:1; align-self:center; padding:clamp(28px,5vw,64px); }
.game-hero .eyebrow,.game-hero p { color:#f3deeb; }
.game-hero h1 { color:#fff9f4; margin:14px 0; }
.game-hero h1 em { color:#f0c3d6; }
.game-hero>img { width:100%; height:100%; min-height:350px; object-fit:cover; object-position:center 34%; mask-image:linear-gradient(90deg,transparent 0%,#000 32%); }
.game-hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.game-hero-tags span { padding:9px 12px; border:1px solid #ffffff30; border-radius:999px; background:#ffffff12; font-size:12px; }
.daily-game { display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:18px; margin:20px 0 32px; padding:20px 24px; border:1px solid var(--line,#eadfe6); border-radius:22px; background:var(--paper,#fffdf8); }
.daily-game-icon { width:76px; height:76px; overflow:hidden; border-radius:18px; background:#f1e5ed; }
.daily-game-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.daily-game-copy { min-width:0; }
.daily-game-copy h2 { margin:4px 0; }
.daily-game-copy p { margin:0; color:var(--muted,#766b75); }
.daily-game>.primary-button { justify-self:end; white-space:nowrap; }
.game-library-heading { margin:32px 0 16px; }
.game-library-heading h2 { margin:4px 0; }
.game-library-heading p { margin:0; color:var(--muted,#766b75); }
.game-card-art { position:relative; height:180px; overflow:hidden; background:#5b354e; }
.game-card-art::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,#2e1b2bcc); }
.game-card-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.game-menu article:hover .game-card-art img { transform:scale(1.05); }
.game-card-art span,.game-card-art b { position:absolute; z-index:1; color:#fff; }
.game-card-art span { left:15px; bottom:13px; padding:7px 10px; border:1px solid #ffffff55; border-radius:999px; background:#321e34aa; font-size:11px; }
.game-card-art b { top:12px; right:14px; font-size:12px; letter-spacing:.12em; }
.game-card-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:9px; padding:18px 20px 20px; }
.game-card-copy h2 { margin:0; font-size:19px; }
.game-card-copy p { flex:1; min-height:48px; line-height:1.5; }
.game-card-copy small { display:flex; width:100%; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--line,#eadfe6); color:var(--muted,#766b75); }
.game-card-copy small strong { color:#5b354e; font-size:15px; }
.game-card-copy .primary-button { align-self:stretch; justify-content:center; }
.game-board { padding:clamp(22px,4vw,44px); border:1px solid var(--line,#eadfe6); border-radius:24px; background:var(--paper,#fffdf8); }
html[data-theme=dark] .game-card-copy small strong { color:#f0c3d6; }
html[data-theme=dark] .game-card-copy small { border-color:#514653; }
html[data-theme=dark] .game-board { background:#302b36; border-color:#514653; }
html[data-theme=dark] .game-menu>article { background:#302b36; border-color:#514653; }
@media(max-width:900px) { .game-menu { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .game-menu { grid-template-columns:1fr; gap:14px; } .game-menu>article { padding:0; } .game-board { padding:24px 14px; } .arcade-controls { gap:14px; } .game-options button { width:100%; min-width:0; } .game-hero { grid-template-columns:1fr; min-height:0; } .game-hero-copy { padding:28px 22px 18px; } .game-hero>img { min-height:220px; height:220px; object-position:center 32%; mask-image:linear-gradient(180deg,transparent 0%,#000 18%); } .game-hero-tags { gap:6px; } .game-hero-tags span { font-size:10px; padding:8px 9px; } .game-card-art { height:160px; } }
@media(max-width:580px) { .daily-game { grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; padding:16px; } .daily-game-icon { width:52px; height:52px; border-radius:14px; } .daily-game-copy { min-width:0; } .daily-game-copy h2 { font-size:19px; } .daily-game>.primary-button { grid-column:1/-1; width:100%; justify-content:center; } .game-art-icon { font-size:65px; } }
@media(prefers-reduced-motion:reduce) { .memory-grid button { transition:none; } .memory-grid button:not(:disabled):hover { transform:none; } }
@keyframes power-pulse { to { transform:scale(.68); opacity:.72; } }
@keyframes ghost-glow { to { filter:brightness(1.25); } }
@media(prefers-reduced-motion:reduce) { .arcade-cells .ghost.scared,.arcade-cells .power { animation:none; } }

/* Illustration-first game cards */
.game-card-art { background:radial-gradient(circle at 75% 15%,#ffffffa8,transparent 30%),linear-gradient(135deg,#f4dfcb,#e6c8d7 58%,#c9b9dc); }
.game-card-art::after { display:none; }
.game-card-art .game-art-icon { position:static; inset:auto; display:block; z-index:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; filter:drop-shadow(0 10px 8px #48283f25); font-size:76px; line-height:1; transition:transform .25s ease; }
.game-card-art b { color:#624357; }
.game-menu article:hover .game-art-icon { transform:translateY(-5px) rotate(-5deg) scale(1.06); }
.game-card-copy .game-duration { display:flex; align-items:center; gap:8px; color:#80566f; font-size:11px; font-weight:700; letter-spacing:.02em; }
.game-card-copy .game-duration span { position:static; padding:0; border:0; background:none; color:#c3a9b8; font-size:inherit; }
.game-card-copy h2 { font-size:20px; }
.game-card-copy p { line-height:1.6; }
.game-board:has(> .game-symbol) { text-align:center; padding-block:34px; background:linear-gradient(135deg,var(--paper,#fffdf8),#f8eff4); }
.game-board:has(> .game-symbol) .game-symbol { font-size:40px; }
.game-board:has(> .game-symbol) h2 { margin:6px 0; }
html[data-theme=dark] .daily-game { background:linear-gradient(110deg,#392f31,#3d303c 72%,#302d3b); border-color:#65505f; }
html[data-theme=dark] .daily-game-icon { background:#4b3d49; }
html[data-theme=dark] .daily-game-copy .eyebrow,html[data-theme=dark] .game-card-copy .game-duration { color:#e4b8d0; }
html[data-theme=dark] .game-card-art { background:radial-gradient(circle at 75% 15%,#ffffff24,transparent 30%),linear-gradient(135deg,#584451,#65445b 58%,#4a4564); }
html[data-theme=dark] .game-card-art b { color:#fff2fa; }
html[data-theme=dark] .game-board:has(> .game-symbol) { background:linear-gradient(135deg,#302b36,#3a3039); }
html[data-theme=dark] .game-progress { background:linear-gradient(100deg,#403341,#3d3437); color:#f0d9e7; }
html[data-theme=dark] .game-progress progress,html[data-theme=dark] .game-progress progress::-webkit-progress-bar { background:#59485a; }
html[data-theme=dark] .game-options button { background:#38313d; border-color:#5b4a5b; color:#f5ecf3; }
html[data-theme=dark] .game-options button.correct { background:#344333; border-color:#829779; color:#e8f2e3; }
html[data-theme=dark] .game-options button.incorrect { background:#50363e; border-color:#a86e7d; color:#ffe8ed; }
@media(max-width:580px) {
 .game-options { grid-template-columns:1fr; gap:9px; }
 .game-progress { align-items:flex-start; flex-direction:column; font-size:10px; }
 .game-progress progress { width:100%; flex-basis:10px; }
 .daily-game { align-items:flex-start; flex-wrap:wrap; gap:12px; padding:18px; }
 .daily-game-icon { width:52px; height:52px; flex-basis:52px; border-radius:16px; font-size:28px; }
 .daily-game-copy { min-width:calc(100% - 68px); }
 .daily-game-copy h2 { font-size:19px; }
 .daily-game>.primary-button { width:100%; justify-content:center; }
 .game-card-art .game-art-icon { font-size:65px; }
}

/* Keep the game artwork visible even when broad card theme rules are applied. */
html body #main .game-menu>article .game-card-art {
  display:grid!important; place-items:center!important; isolation:isolate;
  width:100%; height:180px!important; min-height:180px;
  background-color:#e7cbdc!important;
  background-image:radial-gradient(circle at 76% 22%,#fff9 0 8%,transparent 30%),linear-gradient(135deg,#f6d9c9 0%,#e8c4d5 54%,#c8b9df 100%)!important;
}
html body #main .game-menu>article .game-card-art .game-art-icon {
  position:relative!important; inset:auto!important; display:grid!important; place-items:center;
  width:112px; height:112px; padding:0!important; border:1px solid #ffffffb8!important;
  border-radius:36px!important; background:#fff9!important; color:#482d42!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:68px!important; line-height:1!important; filter:drop-shadow(0 10px 10px #48283f30);
}
html body #main .game-menu>article .game-card-art b {
  position:absolute!important; top:14px!important; right:16px!important;
  color:#482d42!important; font-size:12px!important; letter-spacing:.14em;
}
html[data-theme=dark] body #main .game-menu>article .game-card-art {
  background-color:#584451!important;
  background-image:radial-gradient(circle at 76% 22%,#fff2 0 8%,transparent 30%),linear-gradient(135deg,#594451 0%,#65445b 54%,#4a4564 100%)!important;
}
html[data-theme=dark] body #main .game-menu>article .game-card-art .game-art-icon {
  background:#ffffff20!important; border-color:#ffffff55!important;
}
@media(max-width:580px) {
  html body #main .game-menu>article .game-card-art { height:160px!important; min-height:160px; }
  html body #main .game-menu>article .game-card-art .game-art-icon { width:94px; height:94px; font-size:58px!important; }
}
.game-card-art { isolation:isolate; }
.game-card-art img { position:relative; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.game-card-art::after { content:""; position:absolute; z-index:1; inset:55% 0 0; background:linear-gradient(transparent,#26172955); pointer-events:none; }
.game-card-art b { z-index:2!important; padding:7px 9px; border:1px solid #ffffff99; border-radius:999px; background:#482d4280; color:#fff!important; }
.daily-game-icon { overflow:hidden; }
.daily-game-icon img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.game-detail-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); min-height:260px; overflow:hidden; margin:18px 0 24px; border:1px solid var(--line,#eadfe6); border-radius:24px; background:linear-gradient(120deg,#f4e4df,#ecdae6 65%,#ddd7eb); }
.game-detail-hero>img { width:100%; height:100%; min-height:260px; object-fit:cover; }
.game-detail-hero>div { align-self:center; padding:clamp(24px,4vw,44px); }
.game-detail-hero h1 { margin:12px 0; font-size:clamp(30px,4vw,48px); line-height:1.08; }
.game-detail-hero p { max-width:480px; }
.game-back-link { display:inline-flex; align-items:center; min-height:42px; color:var(--olive-dark,#482d42); font-weight:700; text-decoration:none; }
.game-back-link:hover { text-decoration:underline; }
.game-live-board { min-height:220px; }
.game-launch-status { color:var(--muted,#766b75); font-size:13px; }
html[data-theme=dark] .game-detail-hero { background:linear-gradient(120deg,#382d3a,#423440 65%,#373343); border-color:#514653; }
@media(max-width:700px) {
 .game-detail-hero { grid-template-columns:1fr; }
 .game-detail-hero>img { height:190px; min-height:190px; }
 .game-detail-hero>div { padding:22px; }
}