/* PlayFun Games: luminous, tactile learning. Explicit opt-in; Solar/Academy stay unchanged. */
body.games-visual{--visual-gold:#ffdc7c;--visual-light:#9aebff;--visual-panel:#102b3dee;--visual-scene:url('assets/forest.webp');--hero-focus:left center}
body.games-visual[data-visual=letters]{--visual-scene:url('assets/games/letters-scene-v1.webp');--visual-panel:#0c302eef;--visual-light:#8ff4d6}
body.games-visual[data-visual=numbers]{--visual-scene:url('assets/games/numbers-scene-v1.webp');--visual-panel:#111e48ee;--visual-light:#91dcff}
body.games-visual[data-visual=colours]{--visual-scene:url('assets/panoramica-colores.webp');--visual-panel:#271c45ee;--visual-light:#fac9f5}
body.games-visual[data-visual=hours]{--visual-scene:url('assets/panoramica-tiempo.webp');--visual-panel:#212a43ee}
body.games-visual[data-visual=multiplication]{--visual-scene:url('assets/panoramica-cocina.webp');--visual-panel:#142d3bee}
body.games-visual[data-visual=fireflies]{--visual-scene:url('assets/games/fireflies-scene-v1.webp');--visual-panel:#102d2dec;--visual-light:#b1ffad}
body.games-visual[data-visual=flowers]{--visual-scene:url('assets/panoramica-kawaii.webp');--visual-panel:#2b1c46ee;--visual-light:#f9bbf0}
body.games-visual .world-background{background-image:linear-gradient(90deg,#08152722,#08152777 55%,#081527dd),var(--visual-scene);background-position:left center;background-size:cover}
body.games-visual:has(#play:not([hidden])) .world-background{background-image:linear-gradient(180deg,#08152730,#08152760),var(--visual-scene)}
body.games-visual.multiplication-game:has(#play:not([hidden])) .world-background{background-image:linear-gradient(180deg,#08152766,#081527aa),var(--scene)}
body.games-visual.arcade.in-game .world-background{background-image:linear-gradient(180deg,#08152722,#08152733),var(--scene)}
body.games-visual.arcade.bosque.in-game .world-background{background-image:linear-gradient(180deg,#08152744,#08152744),var(--visual-scene)}
body.games-visual .game-header{background:linear-gradient(180deg,#07172bf5,#10263be8);border-bottom:1px solid #f8da8b66;box-shadow:0 4px 24px #04112170}
body.games-visual .game-heading h1{color:#ffe89f;text-shadow:0 2px 0 #613d35,0 0 20px #ffcf5b22}
body.games-visual .tools button{border-color:#a8cde28a;box-shadow:inset 0 1px 0 #ffffff29,0 4px 0 #030f2580;background:linear-gradient(150deg,#304460,#101f37)}
body.games-visual .setup-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,66px);align-items:start;width:min(1460px,100%);max-width:1460px;margin:0 auto;padding:30px clamp(20px,4vw,60px) 40px}
body.games-visual .welcome-copy{width:100%;max-width:620px;margin:0;padding:0;background:none;grid-column:2}
body.games-visual .game-scene-preview{grid-column:1;position:sticky;top:28px;margin:10px 0 0;overflow:hidden;aspect-ratio:1.36;border-radius:32px;border:2px solid #ffe29a9c;box-shadow:0 18px 55px #0007,0 0 34px #ffe29a24,inset 0 0 20px #ffe29a36;background:#0a2434}
body.games-visual .game-scene-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus)}
body.games-visual .intro{background:none;box-shadow:none;padding:0;border:0}
body.games-visual .intro h2{font-size:clamp(34px,4vw,58px);text-shadow:0 3px 14px #07162c;color:#fff8e9}
body.games-visual .intro p{color:#f0f6ff;text-shadow:0 2px 10px #07172b}
body.games-visual .setup-panel{background:var(--visual-panel);border:1px solid #ffdc7c82;box-shadow:inset 0 1px 0 #fff5,0 14px 40px #06142b77,0 0 22px #8ceaff12}
body.games-visual .primary{background:linear-gradient(#fff0a5,#ffcd52);color:#27314b;border:1px solid #fff2ba;box-shadow:0 4px 0 #a56e2c,0 8px 20px #050b263b;text-shadow:none}
body.games-visual .primary:hover:enabled{filter:brightness(1.06)}
body.games-visual .primary:active:enabled{transform:translateY(2px);box-shadow:0 2px 0 #a56e2c}
body.games-visual :is(.challenge-card,.mission-capsule,.journey,.journey-bar,.turn-heading,.table-area){background:radial-gradient(ellipse at 50% 0,#80dafa12,transparent 65%),var(--visual-panel);border:2px solid #c8dce975;box-shadow:inset 0 2px 0 #fff2,0 9px 0 #020e2633,0 17px 40px #03122766}
body.games-visual.bv-game .challenge-card{max-width:none}
body.games-visual .turn-heading{border-left:6px solid var(--turn-color)}
body.games-visual .feedback{box-shadow:inset 0 1px 0 #fff2,0 12px 24px #06132755}
body.games-visual .feedback[data-result=correct]{border-color:#96f6be;box-shadow:0 0 24px #80efae33}
body.games-visual .feedback[data-result=wrong]{border-color:#ffada4}
body.games-visual .stone{height:18px;border-radius:50%;border:2px solid #c8dce955;background:radial-gradient(circle at 35% 25%,#70899b,#304b63);box-shadow:0 3px 0 #0004}
body.games-visual .stone.lit{background:radial-gradient(circle at 30% 20%,#fff9cf,#ffce55 65%,#c68932);border-color:#fff0a7;box-shadow:0 0 14px #ffdc7c9c,0 3px 0 #785221}
body.games-visual .stone.missed{background:#b46a6e;border-color:#e4a3a3}
body.games-visual.colours-game .stone.lit{background-image:none;box-shadow:0 0 9px #ffffff55,0 3px 0 #081b32}
body.games-visual[data-visual=letters]:has(#setup:not([hidden])) .world-background{background-image:linear-gradient(90deg,#08242b80,#08242bcc),url('assets/forest.webp')}
body.games-visual[data-visual=numbers]:has(#setup:not([hidden])) .world-background{background-image:linear-gradient(90deg,#08142b44,#08142bcc),url('assets/solar/space.webp')}
body.games-visual[data-visual=colours]:has(#setup:not([hidden])) .world-background{background-image:linear-gradient(90deg,#21133f77,#21133fdd),url('assets/colores-world.webp')}
body.games-visual[data-visual=hours]:has(#setup:not([hidden])) .world-background{background-image:linear-gradient(90deg,#14293b88,#14293bdd),url('assets/tiempo-world.webp')}
body.games-visual[data-visual=multiplication]:has(#setup:not([hidden])) .world-background{background-image:linear-gradient(90deg,#13293b88,#13293bdd),var(--scene)}
body.games-visual[data-visual=fireflies]:not(.in-game) .world-background{background-image:linear-gradient(90deg,#08242b88,#08242bdd),url('assets/games/forest-path-lossless.webp')}
body.games-visual[data-visual=flowers]:not(.in-game) .world-background{background-image:linear-gradient(90deg,#241539bb,#241539ee),var(--visual-scene);background-position:right center}
body.games-visual .time-track{box-shadow:inset 0 2px 4px #0005,0 0 12px #8fe8ff26}
body.games-visual .time-track>div{background:linear-gradient(90deg,#ffd566,#fff1a0)}
body.games-visual :is(button,a,summary,input,select):focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #8b40bb}
body.games-visual .color-picker summary,body.games-visual .color-swatch{min-width:44px;min-height:44px}
body.games-visual .color-swatches{grid-template-columns:repeat(4,44px);width:max-content;max-width:calc(100vw - 24px)}
body.games-visual .player-field:has(.color-picker[open]){position:relative;z-index:30}

/* Real text is always above the decorative letter pillars. */
body.games-visual[data-visual=letters] #word{color:#fff5cd;text-shadow:0 3px 0 #253e43,0 0 22px #9be4ff33}
body.games-visual[data-visual=letters] .choices{gap:clamp(28px,6vw,90px);padding:14px 0 18px}
body.games-visual[data-visual=letters] .choices button{position:relative;isolation:isolate;width:clamp(118px,16vw,190px);height:clamp(134px,17vw,195px);border-radius:42% 42% 22px 22px;border:4px solid #ffe7a3;background:radial-gradient(ellipse at 40% 12%,#376b77,#092630 65%);color:#ffe79d;box-shadow:inset 0 0 0 4px #976c3c,inset 0 0 28px #91edee66,0 9px 0 #7e633e,0 14px 30px #08162c,0 0 23px #93ebff44}
body.games-visual[data-visual=letters] .choices button:after{content:'';position:absolute;z-index:-1;bottom:-12px;left:-12%;right:-12%;height:28px;border:2px solid #a7efff;border-radius:50%;background:radial-gradient(ellipse,#aff4ff88,#267bb755 60%,transparent);box-shadow:0 0 18px #80e9ff88}
body.games-visual[data-visual=letters] .choices button span{font-size:clamp(70px,9vw,110px);text-shadow:0 3px 0 #99652f,0 6px 0 #664322,0 9px 12px #0007}
body.games-visual[data-visual=letters] .choices button small{color:#e9f8ff}
body.games-visual[data-visual=letters] .choices button.correct{background:radial-gradient(#287256,#133d35);border-color:#a9ffca;box-shadow:0 8px 0 #275740,0 0 28px #8af6bb77}
body.games-visual[data-visual=letters] .choices button.wrong{background:#612e3b;border-color:#ffafa3;box-shadow:0 8px 0 #62313b}

/* Preserve the functional clock SVG and the exact colour samples. */
body.games-visual.hours-game .analog-clock{position:relative;border-radius:50%;background:radial-gradient(circle,#fff1b333 50%,#ffde7811 65%,transparent 70%);filter:drop-shadow(0 12px 4px #030c2344) drop-shadow(0 0 16px #ffde7844)}
body.games-visual :is(.time-option,.mission-option){position:relative;border:2px solid #f0d38c;background:linear-gradient(150deg,#fff9e9,#f2dbaa);box-shadow:inset 0 2px 0 #fff,0 5px 0 #896542,0 9px 17px #040c2844;border-radius:20px;color:#242b49;min-height:82px}
body.games-visual :is(.time-option,.mission-option).correct{background:linear-gradient(#e6fff1,#a9edc2);border-color:#76e7a6;box-shadow:0 5px 0 #39825b,0 0 20px #8df7b744}
body.games-visual :is(.time-option,.mission-option).wrong{background:linear-gradient(#ffe6df,#ffc4bc);border-color:#fc9083;box-shadow:0 5px 0 #a45c58}
body.games-visual.colours-game .mission-display{border-radius:30px;background:radial-gradient(ellipse,#b6edff17,transparent 70%);min-height:190px}
body.games-visual.colours-game .paint-sample{position:relative;width:165px;height:165px;border:10px solid #fff3da;border-radius:50%;background:var(--paint);box-shadow:0 0 0 3px #a18467,0 10px 0 #6d5072,0 16px 22px #0006,0 0 22px #c8eeff33;animation:none}
body.games-visual.colours-game .paint-pot{position:relative;width:100px;height:78px;background:var(--paint);border:6px solid #f6ebcf;border-top:10px solid #c5bbab;border-radius:12px 12px 26px 26px;box-shadow:0 0 0 2px #746576,0 7px 0 #57455e,0 11px 12px #0004}
body.games-visual.colours-game .paint-pot:after{content:'';position:absolute;top:8px;left:6px;width:7px;height:37px;background:#ffffff5c;border-radius:8px;pointer-events:none}
body.games-visual.numbers-game .mission-display{border:2px solid #b5dcff88;border-radius:30px;background:radial-gradient(ellipse at 25% 30%,#3d5b9455,#0b1639 75%);box-shadow:inset 0 0 25px #76cfff25,0 8px 0 #020d2466,0 0 22px #66beff22;margin:20px 0;padding:18px 24px;min-height:200px}
body.games-visual.numbers-game .rocket-icon{display:block;width:105px;height:140px;font-size:0;background:url('assets/solar/sprites.webp') left center/400% 100% no-repeat;filter:drop-shadow(0 6px 14px #5fdfff66);animation:none}
body.games-visual.numbers-game #target-word{color:#ffe48e;text-shadow:0 2px 0 #987440,0 4px 0 #61452e,0 0 22px #ffe08333;font-size:clamp(29px,4.3vw,58px);min-width:0;overflow-wrap:normal}
body.games-visual.numbers-game #target-visual{flex:0 0 auto}
body.games-visual.english-game #question-title{white-space:normal;line-height:1.2}
body.games-visual.multiplication-game .count-scene{background:radial-gradient(ellipse at 50% 45%,#95e4ff20,transparent 70%)}
body.games-visual.multiplication-game .toy-stage{filter:drop-shadow(0 10px 7px #030d2066) drop-shadow(0 0 8px #b2e7ff22)}
body.games-visual.multiplication-game .group-header{background:linear-gradient(#fff0a519,#fff0a507);border:1px solid #ffe2a344;border-radius:16px}
body.games-visual.multiplication-game .count-object[aria-pressed=true]{border-color:#ffe993;box-shadow:0 0 14px #ffe99344}
body.games-visual.multiplication-game .toy-unit{height:60px;max-width:68px}
body.games-visual.arcade .mission-capsule{border-color:#ffe3a58a;box-shadow:inset 0 2px 0 #fff3,0 5px 0 #05203070,0 0 20px #a3ecff22}
body.games-visual.arcade .target{filter:drop-shadow(0 12px 5px #14223b66) drop-shadow(0 0 13px #ffe59677)}
body.games-visual.arcade.kawaii .target{filter:drop-shadow(0 12px 5px #31174177) drop-shadow(0 0 15px #ffd3fa99)}
body.games-visual.arcade .target strong{text-shadow:0 2px 0 #fff7d9,0 0 8px #fff8d5;letter-spacing:0}
body.games-visual.arcade .target:hover:enabled{filter:drop-shadow(0 0 20px #fff3bc) brightness(1.04)}
body.games-visual.arcade .journey-step.lit{filter:drop-shadow(0 0 8px #ffe99a)}

/* Existing Pairs art stays intact. Layered cards and the table get more presence. */
body.games-visual[data-visual=pairs] .table-area{background:radial-gradient(ellipse at 50% 40%,#31517b99,#0b193be8);border-color:#d2b77d8c;box-shadow:inset 0 0 0 5px #071b3c,0 7px 0 #08132a,0 16px 45px #0007,0 0 24px #77c7ff1f}
body.games-visual[data-visual=pairs] .card-front,body.games-visual[data-visual=pairs] .card-back{border-color:#ffe39c;box-shadow:inset 0 0 0 2px #ffffff24,0 5px 0 #805c31,0 10px 18px #0006}
body.games-visual[data-visual=pairs] .card-back{background:radial-gradient(ellipse at 30% 15%,#427c9a,#20396d 57%,#151f44)}
body.games-visual[data-visual=pairs] .card.matched .card-front{border-color:#acfbd8;box-shadow:0 0 18px #95ffd388,0 5px 0 #2d765c}
body.games-visual[data-visual=pairs] .robot-frame img{filter:drop-shadow(0 10px 12px #0007) drop-shadow(0 0 10px #ffde653b)}

/* Sequence remains a quiet, cooperative story, with the original three scenes. */
body.games-visual[data-visual=sequence]{background:linear-gradient(#0c2330bb,#172438ee),url('assets/forest.webp') center/cover fixed;color:#fff5de}
body.games-visual[data-visual=sequence] main{max-width:1300px;padding:28px clamp(18px,4vw,48px);background:transparent}
body.games-visual[data-visual=sequence] main h1{color:#ffe098;font-size:clamp(32px,4vw,52px);text-shadow:0 3px 8px #0006}
body.games-visual[data-visual=sequence] main>p,body.games-visual[data-visual=sequence] .catalog-return{color:#eff6f9}
body.games-visual[data-visual=sequence] .catalog-return a{color:#ffe098}
body.games-visual[data-visual=sequence] .choices{counter-reset:story;gap:22px}
body.games-visual[data-visual=sequence] .choice{position:relative;display:flex;flex-direction:column;padding:8px;border:3px solid #ead6a1;border-radius:24px;background:linear-gradient(#1d3c49,#102539);box-shadow:0 7px 0 #6e573c,0 16px 26px #0005;color:#fff6da;overflow:visible;min-width:0;transition:transform .2s}
body.games-visual[data-visual=sequence] .choice img{border-radius:15px;aspect-ratio:1.49;object-fit:cover}
body.games-visual[data-visual=sequence] .choice span{display:block;font-size:18px;line-height:1.35;padding:16px 10px}
body.games-visual[data-visual=sequence] .choice:hover:enabled{transform:translateY(-5px);box-shadow:0 12px 0 #6e573c,0 0 20px #ffe19f55}
body.games-visual[data-visual=sequence] .choice[aria-pressed=true]{border-color:#a5f4cd;box-shadow:0 7px 0 #346b56,0 0 24px #9cfdc955}
body.games-visual[data-visual=sequence] .choice[aria-pressed=true]:after{content:'✓';position:absolute;right:16px;top:16px;border:2px solid #d9ffe8;background:#1d6a4d;color:white;font-size:25px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
body.games-visual[data-visual=sequence] #order{background:#102c3eee;color:#ffe6a1;border:1px solid #ffe09899;box-shadow:inset 0 2px 0 #fff2,0 6px 0 #061a2b;font-size:20px;line-height:1.6}
body.games-visual[data-visual=sequence] .actions button{min-height:48px;border:1px solid #ffe7a3;box-shadow:0 4px 0 #745037;background:linear-gradient(#fff3be,#edc56e);color:#302c48;border-radius:16px}
body.games-visual[data-visual=sequence] .actions button:disabled{opacity:.55}
body.games-visual[data-visual=sequence] #feedback{padding:16px 0;color:#eaffef;font-size:21px;line-height:1.5}
body.games-visual[data-visual=sequence] footer a{color:#ffe0a4}

@media(max-width:900px){
 body.games-visual .setup-screen{grid-template-columns:1fr;gap:22px;padding:22px 20px 32px}
 body.games-visual .welcome-copy{grid-column:1;width:100%;max-width:680px;justify-self:center}
 body.games-visual .game-scene-preview{position:relative;top:auto;margin:0;justify-self:center;width:100%;max-width:680px;aspect-ratio:2.1;max-height:320px;border-radius:24px}
 body.games-visual .intro h2{font-size:clamp(34px,6vw,48px)}
}
@media(max-width:720px){
 body.games-visual .setup-screen{padding:16px 14px 28px}
 body.games-visual .game-scene-preview{aspect-ratio:1.8}
 body.games-visual .setup-panel{padding:20px 16px}
 body.games-visual .game-heading h1{font-size:20px}
 body.games-visual .challenge-card{border-radius:24px}
 body.games-visual .stone{height:15px;border-width:1px}
 body.games-visual :is(.time-option,.mission-option){min-height:78px;border-radius:16px}
 body.games-visual.colours-game .paint-sample{width:125px;height:125px;border-width:8px}
 body.games-visual.colours-game .paint-pot{width:62px;height:58px;border-width:4px;border-top-width:7px}
 body.games-visual.colours-game .paint-pot:after{height:23px;width:5px;left:4px}
 body.games-visual.colours-game .mission-display{min-height:155px}
 body.games-visual.numbers-game .mission-display{min-height:160px;padding:15px 12px;gap:10px}
 body.games-visual.numbers-game .rocket-icon{width:65px;height:87px}
 body.games-visual.numbers-game #target-word{font-size:clamp(24px,6.8vw,35px)}
 body.games-visual.multiplication-game .toy-unit{height:53px}
 body.games-visual[data-visual=sequence] .choices{grid-template-columns:1fr;gap:18px}
 body.games-visual[data-visual=sequence] .choice{display:grid;grid-template-columns:minmax(110px,44%) 1fr;gap:5px;text-align:left}
 body.games-visual[data-visual=sequence] .choice span{padding:8px;font-size:16px}
 body.games-visual[data-visual=sequence] .choice[aria-pressed=true]:after{left:12px;right:auto;top:12px;width:29px;height:29px;font-size:20px}
 body.games-visual[data-visual=sequence] .actions{display:flex;flex-wrap:wrap;gap:12px}
 body.games-visual[data-visual=sequence] #order{font-size:17px;padding:16px}
}
@media(prefers-reduced-motion:reduce){body.games-visual *,body.games-visual *:before,body.games-visual *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.games-visual.reduce-motion *,body.games-visual.reduce-motion *:before,body.games-visual.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.games-visual:has(dialog[open]) *{animation-play-state:paused!important}