/* Bright, picture-led games using the site's original character artwork. */
.games-page { background:linear-gradient(120deg,#fff0fc,#edf6ff); }
.games-page .activity-heading { justify-content:center; text-align:center; padding:30px 24px; gap:18px; border-radius:28px; background:radial-gradient(ellipse at 15% 10%,#fac7f3,transparent 55%),linear-gradient(115deg,#f9dcfb,#dceeff); border:2px solid #fff; }
.games-page .activity-heading > div { width:100%; }
.games-page .activity-heading h1 { color:#642492; font-size:clamp(2.7rem,6vw,4.4rem); }
.games-page .activity-heading p { font-size:1.15rem; }
.games-page .activity-links { justify-content:center; }
.games-page .activity-links a { justify-content:center; background:#fff; border-color:#d3b8e7; border-radius:999px; }
.games-page .hub-group { text-align:center; font-size:clamp(1.65rem,3vw,2rem); margin:14px 0 0; }
.games-page .game-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.games-page .play-hub .game-card { --tile-tint:#f8e8ff; --tile-accent:#7137a5; display:flex; flex-direction:column; flex:0 0 calc((100% - 44px)/3); align-items:center; justify-content:flex-start; gap:10px; min-height:0; padding:20px 18px 22px; border:2px solid #e3d5ef; border-radius:26px; background:#fff; color:#281746; text-align:center; box-shadow:0 6px 0 #dfd3ee; letter-spacing:normal; }
.games-page .game-card:nth-child(3n+2) { --tile-tint:#ffedf9; --tile-accent:#aa248d; }
.games-page .game-card:nth-child(3n) { --tile-tint:#e5f5ff; --tile-accent:#246ca6; }
.games-page .play-hub .game-card--featured { --tile-tint:#fce2fa; --tile-accent:#a12189; border-color:#c26fb7; }
.games-page .play-hub .game-card:hover { transform:translateY(-3px); border-color:var(--tile-accent); box-shadow:0 9px 0 #dfd3ee; }
.games-page .game-card__picture { display:flex; align-items:center; justify-content:center; width:100%; height:168px; border-radius:22px; background:radial-gradient(ellipse at 50% 100%,#ffffffa8,transparent 65%),var(--tile-tint); overflow:hidden; }
.games-page .game-card__art { width:90%; max-width:240px; height:154px; object-fit:contain; }
.games-page .game-card__drawing { width:150px; height:150px; font-family:var(--body-copy); font-weight:700; }
.games-page .play-hub .game-card__name { align-self:center; width:100%; font:700 clamp(1.15rem,2.1vw,1.45rem)/1.2 var(--body-copy); text-transform:none; }
.games-page .play-hub .game-card__desc { align-self:center; width:100%; font:400 1rem/1.4 var(--body-copy); text-transform:none; color:#584368; margin-bottom:4px; }
.games-page .game-card__picture--sizes { align-items:flex-end; padding:8px 14px; }
.games-page .game-card__picture--sizes .game-card__art { width:50%; height:100%; }
.games-page .game-card__picture--sizes .game-card__art:last-child { height:60%; }
.games-page .game-card__play { display:inline-flex; justify-content:center; align-items:center; gap:8px; margin-top:auto; padding:9px 24px; min-height:44px; color:#32204a; background:#fff34c; border-radius:999px; font:700 1rem/1.2 var(--body-copy); text-transform:none; }
.game-card__play svg { width:15px; height:15px; flex:none; }
.games-page .play-screen .game-stage { background:#fff; color:#291748; border:2px solid #dfc6ee; box-shadow:0 7px 0 #e8d9ef; padding:24px; border-radius:28px; }
.games-page .play-screen .arcade-topbar { display:grid; grid-template-columns:120px minmax(0,1fr) 120px; align-items:center; border-bottom:2px solid #f0e5f6; padding-bottom:20px; }
.games-page .play-screen .arcade-topbar__title { color:#642492; text-align:center; font:700 clamp(1.2rem,3vw,1.7rem)/1.2 var(--body-copy); text-transform:none; }
.games-page .play-screen .arcade-back { color:#642492; background:#f4e9fb; border:2px solid #dfc6ee; border-radius:14px; box-shadow:none; min-height:48px; }
.games-page .play-screen .game-howto { color:#584368; text-align:center; }
.games-page .play-screen .game-prompt { color:#4e236e; font:700 clamp(1.3rem,3.5vw,1.7rem)/1.3 var(--body-copy); text-transform:none; }
.games-page .play-screen .game-stat { color:#584368; background:#f6eefb; border-radius:999px; padding:8px 15px; font:600 .95rem/1.3 var(--body-copy); text-transform:none; letter-spacing:normal; }
.games-page .play-screen .game-stat b { color:#782f9d; }
.games-page .play-screen .mem-win,.games-page .play-screen .mem-win h2,.games-page .play-screen .mem-win p { color:#4e236e; }
.games-page .play-screen .btn { min-height:48px; font:700 1rem/1.3 var(--body-copy); text-transform:none; letter-spacing:normal; border-radius:16px; }
.games-page .quiz-grid { max-width:560px; gap:16px; padding-bottom:6px; }
.games-page .play-screen .quiz-choice { background:#f9efff; border:3px solid #dec5ef; color:#532379; min-height:130px; border-radius:24px; box-shadow:0 5px 0 #e8d9ef; }
.games-page .quiz-choice:hover { background:#fff9ce; border-color:#ac75c9; }
.games-page .play-screen .quiz-choice.is-right { background:#dbf7df; border-color:#39864c; }
.games-page .quiz-choice.is-wrong { border-color:#a652b4; }
.games-page .play-screen .quiz-num,.games-page .quiz-letter { color:#632c8d; font:700 3.4rem/1 var(--body-copy); text-transform:none; }
.games-page .quiz-big { color:#632c8d; font:700 5.5rem/1 var(--body-copy); text-shadow:none; text-transform:none; }
.games-page .quiz-cap,.games-page .syl-w { color:#532379; text-transform:none; }
.games-page .quiz-stage { min-height:130px; max-height:none; background:linear-gradient(115deg,#fde9fb,#e8f5ff); border-radius:22px; padding:18px; }
.games-page .quiz-choice img { width:90px; height:90px; }
.games-page .shape-hole { width:100px; height:100px; }
.games-page .shape-hole svg { fill:#ede3f4; stroke:#87609f; stroke-dasharray:5 4; stroke-width:3; }
.games-page .shape-pick { width:76px; height:76px; }
.games-page .pat-cell { width:44px; height:44px; border-radius:12px; box-shadow:inset 0 0 0 2px #0000000c; }
.games-page .pat-cell--q { color:#7134a0; background:#fff8ac; border-color:#9b62bd; }
.games-page .count-stage { background:linear-gradient(120deg,#fce0f7,#d9eeff); border:2px solid #e6c8ef; box-shadow:none; }
.games-page .count-stage::after { background:#cc99e3; box-shadow:none; height:18px; border-radius:50% 50% 0 0; }
.games-page .count-char { filter:none; }
.games-page .play-screen .count-num { font:700 1.7rem/1 var(--body-copy); border:2px solid #d6b9e9; background:#fff7b0; }
.games-page .mem-card__back { background:linear-gradient(145deg,#e948d0,#925de5 65%,#78c9fa); box-shadow:inset 0 0 0 3px #edcff7,0 5px 0 #d8c5e8; }
.games-page .mem-card__back::after { content:"?"; inset:15%; background:none; display:grid; place-items:center; color:#fff34c; font:700 clamp(2.4rem,8vw,5rem)/1 var(--font-head); }
.games-page .mem-card__front { background:#fff8dd; box-shadow:inset 0 0 0 3px #d5b4e8,0 5px 0 #d8c5e8; }
.games-page .simon-pad { display:grid; place-items:center; opacity:1; border:3px solid #ffffffaa; box-shadow:0 6px 0 #c8afd9; }
.games-page .simon-pad svg { width:52%; height:52%; fill:#fff; stroke:#4d246b; stroke-width:2; }
.games-page .simon-pad.lit { box-shadow:0 0 0 6px #fff34c; filter:brightness(1.18); }
.games-page .pop-grid { background:#f8e9ff; border:2px solid #e3cdee; box-shadow:none; }
.games-page .pop-hole { background:radial-gradient(ellipse at 50% 75%,#b978d5,#e5c1f5 65%); box-shadow:inset 0 5px 0 #d0a2e6; }
.games-page .pop-mole { box-shadow:inset 0 0 0 3px #bb64c2; }
.games-page .trace-stage { background:#fff9de; box-shadow:inset 0 0 0 3px #debfeb; }
.games-page .trace-mode { color:#632c8d; background:#f3e8fb; box-shadow:inset 0 0 0 2px #dfc6ee; min-height:48px; }
.games-page .trace-mode.is-on { color:#fff; background:#8b3cab; }
.games-page .trace-say { color:#782f9d !important; }
.games-page .wb-key,.games-page .wb-slot { color:#602984; background:#fff9ca; border-color:#d6b3e8; font-family:var(--body-copy); font-weight:700; }
.games-page .wb-key { box-shadow:0 4px 0 #dcc7e8; }
.games-page .wb-slot.is-on { background:#ddf4df; border-color:#438a52; }
.games-page .band-player { background:linear-gradient(#f9effe,#fff 72%); }
.games-page .band-player.is-selected { background:linear-gradient(#fff7b4,#fffcec); }
.games-page .band-player__name { font-family:var(--body-copy); font-weight:700; text-transform:none; }
.games-page .band-pattern-picker { padding:20px; border:2px solid #e4cfef; border-radius:22px; background:#fbf4ff; }
.games-page .band-pattern-picker p { text-align:center; margin-top:0; }
.games-page .band-patterns label { text-align:center; }
.games-page .band-patterns select { text-align:center; }
.games-page .game-toast { background:#fff34c; color:#512473; box-shadow:0 5px 20px #673a7226; }
@media(max-width:700px) {
 .games-page .game-grid { gap:16px; }
 .games-page .play-hub .game-card { flex-basis:calc((100% - 16px)/2); padding:12px 10px 16px; border-radius:22px; }
 .games-page .play-hub .game-card--featured { flex-basis:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto; gap:8px 16px; padding:18px; }
 .games-page .game-card--featured .game-card__picture { grid-row:1 / 4; grid-column:1; height:156px; }
 .games-page .game-card--featured .game-card__name,.games-page .game-card--featured .game-card__desc,.games-page .game-card--featured .game-card__play { grid-column:2; }
 .games-page .game-card--featured .game-card__play { justify-self:center; }
 .games-page .game-card__picture { height:124px; border-radius:16px; }
 .games-page .game-card__art { width:100%; height:118px; }
 .games-page .game-card__drawing { width:112px; height:112px; }
 .games-page .play-hub .game-card__desc { font-size:.9rem; }
 .games-page .activity-heading { padding:24px 14px; }
 .games-page .play-screen .game-stage { padding:18px 12px; }
 .games-page .play-screen .arcade-topbar { grid-template-columns:82px minmax(0,1fr) 82px; gap:8px; }
 .games-page .play-screen .arcade-back { min-width:0; font-size:.9rem; padding:8px; }
 .games-page .play-screen .arcade-topbar__title { font-size:1.1rem; }
 .games-page .play-screen .quiz-choice { min-height:108px; }
 .games-page .quiz-grid { gap:12px; }
 .games-page .band-pattern-picker { padding:16px 12px; }
}
@media(prefers-reduced-motion:reduce) { .games-page .game-card:hover { transform:none; } }