/* Shared playful skin for game pages (styling only; no game logic). */
:root{--ink:#120B2E;--bg:#241A4F;--paper:#FFF8E7;--accent:#FFD93D;--round:'Fredoka','Baloo 2',ui-rounded,system-ui,sans-serif;--pixel:'Press Start 2P',ui-monospace,monospace}
html:has(.tape[data-game="pong"]){--accent:#7CF5C8}
html:has(.tape[data-game="snake"]){--accent:#B8F55A}
html:has(.tape[data-game="breakout"]){--accent:#FF9F43}
html:has(.tape[data-game="tictactoe"]){--accent:#FF8AC8}
html:has(.tape[data-game="hangman"]){--accent:#FFD93D}
html:has(.tape[data-game="caveraider"]){--accent:#B79BFF}
html:has(.tape[data-game="invaders"]){--accent:#5FE3FF}
html,body{color:var(--paper);font-family:var(--round);background:radial-gradient(1000px 520px at 10% -10%,#3B2A7A 0,transparent 60%),radial-gradient(800px 520px at 110% 10%,#5A1E6E 0,transparent 55%),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.6px);background-size:26px 26px}
h1{font-family:var(--round);font-weight:700;font-size:clamp(32px,6vw,48px);letter-spacing:2px;color:var(--accent);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
p{color:#D9D0F5}
canvas{border:4px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--accent)}
svg{border:4px solid var(--ink)!important;border-radius:14px!important;box-shadow:6px 6px 0 var(--accent)}
/* Nested canvases (answer icons, patterns, overlays) must stay flat — global rule above would offset them */
button canvas,.cbtn canvas,.gk-hs canvas,#btns canvas{box-shadow:none!important;border:0!important;border-radius:0!important;filter:none!important}
.back{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink);background:var(--accent);border:3px solid var(--ink);border-radius:12px;padding:6px 12px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);transition:transform .2s cubic-bezier(.3,1.6,.5,1);z-index:10}
.back:focus-visible,.back:active{color:var(--ink);transform:rotate(0) scale(1.06)}
button,select{font-family:var(--round)}
.tape{border:3px solid var(--ink);border-radius:16px;background:#1C1640;box-shadow:5px 5px 0 var(--ink)}
.tape h2{color:var(--accent)}
.tape .tape-hint{color:#C9BFEA}.tape .tape-hint b{color:var(--paper)}
.tape .tape-dl a{border-color:#4A3D88;background:#2A2160;border-radius:10px}
.tape .tape-dl a:hover{border-color:var(--accent)}
.tape .tape-dl .n{color:#C9BFEA}
@media (hover:hover){.back:hover{color:var(--ink);transform:rotate(0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.back{transition:none}}

.gg-seo{max-width:560px;margin:8px auto 0;padding:12px 14px;background:#1C1A16;border:1px solid #2E2A24;border-radius:12px;color:#C9BFEA;font-size:14px;line-height:1.45;text-align:left}
.gg-seo strong{color:#FFD93D}
.gg-seo p{margin:0 0 8px;color:#C9BFEA;font-size:14px;text-align:left;max-width:none}
.gg-seo p:last-child{margin-bottom:0}
.gg-more{max-width:560px;margin:14px auto 8px;padding:12px 14px;background:#1C1640;border:2px solid #4A3D88;border-radius:12px;text-align:center}
.gg-more h2{margin:0 0 8px;font:700 12px/1.2 "Press Start 2P",monospace;color:#7CF5C8;letter-spacing:1px}
.gg-more p{margin:0;font-size:15px;line-height:1.6;color:#F3EFE6;max-width:none}
.gg-more a{color:#FFD93D;font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
.gg-more a:hover{border-bottom-color:#FFD93D}
.gk-stage.gk-fs .gg-seo,.gk-stage.gk-fs .gg-more,.gk-stage:fullscreen .gg-seo,.gk-stage:fullscreen .gg-more,
.gk-stage:-webkit-full-screen .gg-seo,.gk-stage:-webkit-full-screen .gg-more{display:none!important}
@media (max-width:560px){.gg-seo,.gg-more{margin-left:8px;margin-right:8px;font-size:13px}}
.gg-intro{max-width:640px;margin:10px auto 0;padding:0 8px;font-size:16px;line-height:1.45;color:#C9BFEA;text-align:center}