/* 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)}
.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}}