/* Each board has its own play palette, within the white portal surface. */
.game-root[data-game="sliding-puzzle"]{background:#FFF8F0;--game-accent:#BD5B16}
.game-root[data-game="lights-out"]{background:#F3F1FC;--game-accent:#654DA9}
.game-root[data-game="maze"]{background:#F0F8F4;--game-accent:#287D62}
.game-root[data-game="breakout"]{background:#F4F7FE;--game-accent:#245CCD}
.game-root[data-game="paddle-rally"]{background:#F7F2FE;--game-accent:#6D4FD0}
.game-root[data-game="sky-hopper"]{background:#F0FAFE;--game-accent:#287E9F}
.game-root[data-game="whack-a-mole"]{background:#F2F8E9;--game-accent:#517921}
.game-root[data-game="connect-four"]{background:#FFF9E7;--game-accent:#94670C}
.game-root[data-game="reversi"]{background:#EEF7F3;--game-accent:#267657}
.game-root[data-game="dots-boxes"]{background:#F4F1FC;--game-accent:#6A4BA0}
.game-root[data-game="color-sequence"]{background:#F6F1FA;--game-accent:#72539B}
.game-root[data-game="rock-paper-scissors"]{background:#FFF4F1;--game-accent:#B54C3A}
.sliding-board,.lights-board,.maze-board,.four-board,.reversi-board,.dots-board,.sequence-board,.mole-board{margin:0 auto;width:100%}
.sliding-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:410px;padding:10px;background:#D4E7E4;border-radius:12px;touch-action:none}
.slide-cell{aspect-ratio:1;border:0;border-radius:7px;background:#F1A64B;color:#432910;font-size:clamp(22px,4vw,37px);font-weight:700;box-shadow:inset 0 -4px #D6892E;cursor:pointer}
.slide-cell:nth-child(3n){background:#6CB8AD;color:#163D36;box-shadow:inset 0 -4px #4B978E}
.slide-cell.empty{background:#B7D4D0;box-shadow:none;opacity:1}
.slide-cell:hover:not(:disabled){filter:brightness(1.08)}
.lights-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:400px;padding:13px;background:#373B73;border-radius:12px}
.light-cell{aspect-ratio:1;padding:8px;border:1px solid #7C80B5;background:#484F85;border-radius:7px;cursor:pointer}
.light-cell>span{display:block;width:100%;height:100%;background:#303759;border-radius:4px;border:2px solid #242C4E}
.light-cell.on>span{background:#FFE27A;border-color:#F6C549;box-shadow:0 0 13px #FFD55755}
.maze-board{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));max-width:416px;padding:8px;border:1px solid #C0DDD0;border-radius:10px;background:#DBEFE5;touch-action:none}
.maze-cell{aspect-ratio:1;display:grid;place-items:center;min-width:0}
.maze-cell.wall{background:#378568}.maze-cell.floor{background:#F7FCF9}.maze-cell .icon{width:80%;height:80%;color:#98710B}
.maze-marker{width:65%;height:65%;border-radius:50%;background:#D75542;border:2px solid white}
.four-column-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:434px;margin:0 auto 8px;padding:0 12px}
.four-column-controls .button{padding:8px 0;min-width:0;min-height:44px;border-color:#CBD7EC;color:#244877}
.four-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:434px;padding:12px;background:#3168B9;border-radius:12px;border:1px solid #255698}
.four-cell{aspect-ratio:1;display:block;border-radius:50%;background:#E9F0FA;border:3px solid #1E5599;min-width:0;box-shadow:inset 0 3px #143F6922}
.four-cell.disc-1{background:#EB6551}.four-cell.disc-2{background:#FFD25B}.four-cell.winning{outline:3px solid #FFFFFF;outline-offset:-6px}
.reversi-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));max-width:440px;border:7px solid #246A52;border-radius:9px;overflow:hidden;background:#246A52;gap:1px}
.reversi-cell{aspect-ratio:1;display:grid;place-items:center;background:#388465;border:0;padding:4px;cursor:pointer;min-width:0}
.reversi-cell.legal:hover{background:#52A483}.reversi-cell[aria-disabled="true"]{cursor:default}
.reversi-disc{display:block;width:86%;height:86%;border-radius:50%}.reversi-disc.disc-1{background:#23312F;box-shadow:inset 0 2px #52635D}.reversi-disc.disc-2{background:#FFF;box-shadow:inset 0 -2px #D7E7DF}
.legal-dot{width:22%;height:22%;border-radius:50%;background:#D9F3E6;border:1px solid #FFFFFF}
.dots-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));max-width:432px;padding:8px;background:white;border:1px solid #DCCFEE;border-radius:11px;gap:0}
.dots-board>*{aspect-ratio:1;min-width:0;display:grid;place-items:center}
.dot-point:after{content:"";width:9px;height:9px;border-radius:50%;background:#665183}
.dot-edge{position:relative;border:0;background:transparent;padding:0;cursor:pointer;opacity:1!important}
.dot-edge:after{content:"";position:absolute;background:#E0D8EC;border-radius:4px;pointer-events:none}
.dot-edge.horizontal:after{width:calc(200% - 16px);height:6px;left:calc(-50% + 8px);top:calc(50% - 3px)}
.dot-edge.vertical:after{height:calc(200% - 16px);width:6px;top:calc(-50% + 8px);left:calc(50% - 3px)}
.dot-edge:hover:not(:disabled):after{background:#B5A4CC}.dot-edge.owner-1:after{background:#E27866}.dot-edge.owner-2:after{background:#4C86C5}
.dot-box{font-weight:700;border-radius:4px;font-size:16px}.dot-box.owner-1{background:#FBE1DB;color:#9B3C2D}.dot-box.owner-2{background:#DDEAF8;color:#285F9C}
.rps-scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:500px;margin:12px auto 20px}
.rps-scoreboard>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:115px;padding:15px;background:#FFF;border:1px solid #EBD6D0;border-radius:12px}
.rps-scoreboard span{font-size:13px;color:#775D57}.rps-scoreboard strong{font-size:21px;text-align:center}
.rps-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-width:500px;margin:0 auto}.rps-choices .button{padding:17px 8px;border-color:#E6BCAF;background:#FBE5DF;color:#894334;font-size:16px}
.sequence-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:390px;padding:9px}
.sequence-pad{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:2px solid transparent;border-radius:14px;font-size:17px;font-weight:600;padding:15px;cursor:pointer;color:#FFF;box-shadow:inset 0 -5px #00000019}
.sequence-pad svg{width:38%;height:38%;color:currentColor;fill:currentColor}.sequence-pad.sequence-0{background:#B94749}.sequence-pad.sequence-1{background:#2B69A8}.sequence-pad.sequence-2{background:#2D7D60}.sequence-pad.sequence-3{background:#EFBE4C;color:#4C3608}
.sequence-pad:disabled{opacity:1;cursor:default}.sequence-pad.lit{filter:brightness(1.65);outline:5px solid #6E4993;outline-offset:3px;transform:scale(.97)}
.mole-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:414px;padding:14px;border-radius:12px;background:#CEE2B2;border:1px solid #AAC686}
.mole-hole{aspect-ratio:1;display:grid;place-items:center;padding:0;border:3px solid #98B76F;background:#E8F1D6;border-radius:50%;overflow:hidden;cursor:pointer}
.mole-hole img{width:100%;height:100%;object-fit:cover}.mole-empty{display:block;width:66%;height:33%;border-radius:50%;background:#8C694E;box-shadow:inset 0 6px #654933}
.mole-hole.active{border-color:#557929}.mole-hole:disabled{opacity:1;cursor:default}
.arcade-canvas{display:block;width:100%;max-width:600px;aspect-ratio:3/2;margin:0 auto;border:1px solid #CDD5E5;border-radius:9px;touch-action:none;background:#FFF}
.game-root[data-game] .game-status{color:var(--game-accent,#42535F)}
/* Game homes, level selection, and results belong to each game's play surface. */
.game-home{max-width:680px;margin:0 auto;text-align:left}
.game-home-identity{display:flex;gap:22px;align-items:center;margin-bottom:24px}
.game-home-identity img{flex:none;width:112px;height:112px;border-radius:22px;object-fit:cover;box-shadow:0 5px 16px #20304710}
.flow-type{display:block;color:var(--game-accent,#A84E29);font-size:12px;font-weight:700;letter-spacing:.055em;margin-bottom:7px}
.game-home h2,.game-result h2{font-size:29px;line-height:1.2;margin:0 0 10px;letter-spacing:-.7px}
.game-home-identity p{font-size:14px;line-height:1.6;color:#52606B;max-width:470px;margin:0}
.game-home-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:25px}
.game-home-stats>div{padding:15px 18px;background:#FFFFFFC9;border:1px solid #263E5614;border-radius:12px}
.game-home-stats span{display:block;font-size:12px;color:#66727D;margin-bottom:6px}
.game-home-stats strong{display:block;font-size:18px;font-weight:650;color:#283943}
.flow-section-title{display:flex;gap:15px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.flow-section-title h3{font-size:16px;margin:0}.flow-section-title>span{font-size:12px;color:#6A7580}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.level-button{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;min-height:72px;background:#FFFFFFD9;border:1px solid #263E5624;border-radius:10px;cursor:pointer;padding:9px 3px;color:#40515F;transition:border-color .15s,background .15s}
.level-button strong{font-size:22px;line-height:1.2;font-weight:700}.level-button span{display:flex;gap:3px;align-items:center;font-size:11px;line-height:1.3}.level-button .icon{width:12px;height:12px}
.level-button:hover{border-color:var(--game-accent,#A84E29)}
.level-button.selected{border:2px solid var(--game-accent,#A84E29);background:white;color:var(--game-accent,#A84E29);padding:8px 2px}
.level-button.completed span{color:#287454}
.selected-level-summary{padding:16px 0 15px;margin-top:10px}.selected-level-summary>span{font-size:12px;font-weight:700;color:var(--game-accent,#A84E29)}
.selected-level-summary p{font-size:14px;color:#475864;line-height:1.5;margin:5px 0 0}
.game-home-start{min-width:170px;min-height:48px;font-size:15px;justify-content:center}
.flow-library-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;color:#5E6D77;min-height:44px;margin-left:17px;vertical-align:middle}
.game-home-controls{font-size:13px;line-height:1.6;color:#66727D;margin:17px 0 8px}
.flow-storage-note{font-size:11px;color:#6B7781;margin:0}
.flow-session-top{display:flex;align-items:center;gap:14px;padding-bottom:17px;margin-bottom:20px;border-bottom:1px solid #263E561A;text-align:left}
.flow-session-top>div{flex:1;min-width:0}.flow-session-top strong{display:block;font-size:14px;color:var(--game-accent,#A84E29)}
.flow-session-top span{display:block;font-size:12px;line-height:1.45;color:#66727D;margin-top:4px}
.flow-session-top>.button{flex:none;white-space:nowrap;min-height:42px;background:#FFFFFFC9}
.game-result{max-width:560px;margin:0 auto;padding:20px 0;text-align:center;outline:none}
.result-art{width:88px;height:88px;border-radius:20px;display:block;margin:0 auto 20px;object-fit:cover}
.game-result .flow-type{margin-bottom:10px}.game-result h2{font-size:32px}
.result-message{font-size:14px;line-height:1.6;color:#566572;margin:0 auto 25px;max-width:450px}
.result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;text-align:left;margin:0 0 21px}
.result-metrics>div{background:#FFFFFFD9;padding:17px 20px;border:1px solid #263E561A;border-radius:12px;min-width:0}
.result-metrics dt{font-size:12px;color:#697682;margin-bottom:7px}.result-metrics dd{font-size:25px;line-height:1.15;font-weight:700;color:#2F424F;margin:0;overflow-wrap:anywhere}
.record-notice{display:flex;justify-content:center;align-items:center;gap:6px;color:#287454;font-size:13px;font-weight:600;margin:15px 0}
.result-progress{font-size:12px;color:#697682;margin:20px 0}
.result-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:23px}.result-actions .button{min-height:46px}
@media(max-width:620px){
  .game-home-identity{gap:15px;margin-bottom:20px}.game-home-identity img{width:76px;height:76px;border-radius:17px}
  .game-home h2{font-size:23px;margin-bottom:7px}.game-home-identity p{font-size:12px;line-height:1.55}
  .game-home-stats{gap:9px;margin-bottom:22px}.game-home-stats>div{padding:12px}.game-home-stats strong{font-size:16px}
  .level-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.level-button{min-height:68px}.level-button strong{font-size:20px}
  .flow-section-title{gap:8px;align-items:center}.flow-section-title>span{font-size:10px}.flow-section-title h3{font-size:14px}
  .game-home-start{width:100%}.flow-library-link{margin-left:0}.game-home-controls{font-size:12px}
  .flow-session-top{gap:8px;flex-wrap:wrap;margin-bottom:16px}.flow-session-top>div{order:3;flex-basis:100%}.flow-session-top>[data-end-run]{margin-left:auto}
  .game-result{padding:8px 0}.game-result h2{font-size:27px}.result-metrics>div{padding:14px}.result-metrics dd{font-size:23px}
  .result-actions{display:grid;grid-template-columns:1fr;width:100%}.result-actions .button{justify-content:center;width:100%}
  .sliding-board{gap:6px;padding:8px}.lights-board{gap:5px;padding:8px}.light-cell{padding:5px}
  .four-board{gap:4px;padding:9px}.four-column-controls{gap:4px;padding:0 9px}.four-cell{border-width:2px}
  .reversi-board{border-width:5px}.reversi-cell{padding:3px}.dots-board{padding:5px}.dot-point:after{width:7px;height:7px}
  .sequence-board{gap:11px;padding:8px}.sequence-pad{padding:10px;font-size:15px;gap:8px}
  .mole-board{gap:9px;padding:10px}.mole-hole{border-width:2px}.rps-choices .button{font-size:14px;padding:16px 5px}
  .game-root .game-actions .button{font-size:14px;min-height:42px}.game-root .direction-pad .button{min-height:44px;width:44px}
}
@media(max-width:360px){.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.game-home-identity{align-items:flex-start}.game-home-identity img{width:64px;height:64px}.flow-type{font-size:11px}.game-home h2{font-size:21px}.game-home-stats strong{font-size:14px}}