:root{
  --mania-night:#071329;
  --mania-deep:#101d3f;
  --mania-sky:#74e8ff;
  --mania-mint:#8ff3ce;
  --mania-gold:#ffe58f;
  --mania-pink:#ff9dd2;
  --mania-violet:#b49aff;
}
body{
  background:
    radial-gradient(circle at 8% 9%,#6e4edb33 0 10%,transparent 28%),
    radial-gradient(circle at 92% 17%,#20d8dc28 0 8%,transparent 26%),
    linear-gradient(160deg,#081227 0%,#0d1c3b 48%,#13143a 100%);
}
body::before,body::after{content:"✦";position:fixed;z-index:-1;color:#bdf7ff33;font-size:clamp(32px,7vw,84px);filter:drop-shadow(0 0 18px #77e8ff88);pointer-events:none}
body::before{left:4vw;top:22vh;transform:rotate(-12deg)}body::after{right:5vw;bottom:18vh;transform:rotate(17deg)}
header{background:linear-gradient(110deg,#0a1734f5,#172151f2 55%,#153f54ef);border-bottom-color:#9beaff66;box-shadow:0 12px 42px #02081d8f}
.brand img{filter:drop-shadow(0 7px 13px #0008);box-shadow:0 0 0 2px #b7efff44,0 0 22px #85daff55}
.brand small{color:#aaf3ff}.wallet span{background:#071226cc;border-color:#a9eaff66;box-shadow:inset 0 0 20px #76dcff12,0 5px 16px #0005}
nav{background:linear-gradient(90deg,#0c1737f2,#16204cf2,#0d2841f2);border-top-color:#b2eeff66;box-shadow:0 -10px 35px #02071899}
nav button{border-color:transparent;background:transparent}nav button.active{color:#08182d;background:linear-gradient(135deg,var(--mania-gold),#ffbd87);border-color:#fff1bb;box-shadow:0 4px 18px #ffce7b55}
.hub-heading{position:relative;overflow:hidden;min-height:260px;padding:clamp(24px,5vw,58px);border:1px solid #b2eaff77;border-radius:30px;background:linear-gradient(95deg,#0b1d43f7 0 47%,#173d61bb 72%,#264c7066),url('assets/puzzles/gallery/cloud_castle.png') center/cover;box-shadow:0 24px 65px #02071599,inset 0 1px #fff4;margin-bottom:30px}
.hub-heading::after{content:"";position:absolute;inset:auto -8% -55% 35%;height:95%;background:radial-gradient(ellipse,#98efff3b,transparent 68%);pointer-events:none}
.hub-heading-copy{position:relative;z-index:2;max-width:650px}.hub-heading h1{font-size:clamp(34px,5vw,62px);letter-spacing:-2px;text-shadow:0 7px 22px #0009}.hub-heading>img{position:absolute;right:2%;bottom:-19%;width:min(43%,390px);height:auto;filter:drop-shadow(0 25px 24px #02091fa0);z-index:1}.hub-heading p{color:#e5f6ff;font-size:clamp(15px,2vw,19px);max-width:560px}.hub-heading .eyebrow{color:var(--mania-gold)}
.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.game-grid .card{position:relative;border-color:#8fc9ed66;border-radius:26px;background:linear-gradient(155deg,#263961e8,#101c39f5 62%);box-shadow:0 18px 40px #02081999,inset 0 1px #fff2;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.game-grid .card:hover{transform:translateY(-6px);border-color:#c2efff;box-shadow:0 24px 52px #020819aa,0 0 24px #83e7ff22}.game-grid .card .art{height:190px;padding:20px;background:radial-gradient(circle at 50% 42%,#638bc477,#14213e 72%);filter:saturate(1.08)}.game-grid .card .copy{padding:22px}.game-grid .card h2{font-size:22px;margin-top:7px}.game-grid .card .tag{color:var(--card-accent,var(--mania-gold))}.game-grid .card button{background:linear-gradient(135deg,var(--card-accent,#9c7bea),#485fc7);border-color:#ffffff66;box-shadow:0 5px 15px #0005;color:#08142b;text-shadow:0 1px #fff8}.game-grid .card[data-game-card="wobblewing"]{--card-accent:#82eff5}.game-grid .card[data-game-card="conga"]{--card-accent:#ffe487}.game-grid .card[data-game-card="moon_lander"]{--card-accent:#b9adff}.game-grid .card[data-game-card="racer"]{--card-accent:#76efc0}.game-grid .card[data-game-card="match"]{--card-accent:#ff9fd2}.game-grid .card[data-game-card="memory"]{--card-accent:#ffbd86}.game-grid .card[data-game-card="puzzle"]{--card-accent:#8fe8ff}.game-grid .card[data-game-card="sudoku"]{--card-accent:#d0b2ff}.game-grid .card[data-game-card="crossword"]{--card-accent:#9be0b7}
.notice{max-width:920px;margin:28px auto 0;padding:14px 18px;border:1px solid #ffe29855;border-left:4px solid var(--mania-gold);border-radius:12px;background:#101c39b8}
.gamehead{padding:6px 9px;border:1px solid #96dffa55;border-radius:16px;background:linear-gradient(90deg,#0b1838e8,#182651e8);box-shadow:0 9px 26px #02081d88}.gamehead h1{color:#fff5cc;text-shadow:0 3px 14px #0008}
.gamebody{--game-accent:var(--mania-sky)}.gamebody>.row:first-child,.arcade-toolbar{padding:10px;border:1px solid color-mix(in srgb,var(--game-accent) 42%,#42627c);border-radius:16px;background:#102245dd}.gamebody .scorebar{border:1px solid color-mix(in srgb,var(--game-accent) 48%,#425b79);background:linear-gradient(110deg,#14284c,#1c3155);box-shadow:inset 0 1px #fff1}.puzzle-game{padding:clamp(10px,2vw,20px);border:1px solid #92dfff44;border-radius:22px;background:linear-gradient(150deg,#0b1935dd,#14254bdd)}.puzzle-game #instruction{color:#e8f7ff;margin:0;max-width:680px}.puzzle-game .board{padding:10px;border-radius:20px;background:#081a36a8;box-shadow:inset 0 0 32px #02081988}.puzzle-game .tile{border:1px solid color-mix(in srgb,var(--game-accent) 45%,#56728d);background:linear-gradient(145deg,#203b63,#142848);box-shadow:inset 0 1px #fff2,0 4px 8px #0004;transition:transform .14s ease,box-shadow .14s ease}.puzzle-game .tile:hover{transform:translateY(-2px);box-shadow:inset 0 1px #fff3,0 8px 15px #0006}.game-match{--game-accent:#ff98cf}.game-memory{--game-accent:#ffbd86}.game-puzzle{--game-accent:#7ce8ff}.game-sudoku{--game-accent:#c3a5ff}.game-crossword{--game-accent:#9de4b5}.game-moon_lander{--game-accent:#c0b3ff}.game-racer{--game-accent:#7cf1bf}
.game-match .tile{background:radial-gradient(circle at 38% 30%,#71487d,#302449 72%)}.game-match .tile.selected{box-shadow:0 0 0 3px var(--mania-gold),0 0 25px #ffda8a88}.game-memory .tile{perspective:700px;background:linear-gradient(145deg,#56365d,#2a294f)}.game-memory .tile img{width:94%;height:94%;filter:drop-shadow(0 5px 6px #0006)}.game-memory .tile.matched{background:linear-gradient(145deg,#255b58,#193c42);box-shadow:0 0 16px #85f0c655}.game-sudoku .numberboard{border-color:#d2bcff;box-shadow:0 0 28px #b39bff33}.game-sudoku .cell{background:#192c50;border-color:#556489}.game-sudoku .cell.given{background:#2f3761;color:#fff4c6}.game-sudoku .cell:nth-child(18n+1),.game-sudoku .cell:nth-child(18n+2),.game-sudoku .cell:nth-child(18n+3),.game-sudoku .cell:nth-child(18n+4),.game-sudoku .cell:nth-child(18n+5),.game-sudoku .cell:nth-child(18n+6),.game-sudoku .cell:nth-child(18n+7),.game-sudoku .cell:nth-child(18n+8),.game-sudoku .cell:nth-child(18n+9){background-color:#20365c}.game-crossword .crossboard{padding:8px;border:1px solid #8cddb088;border-radius:15px;background:#07172a}.game-crossword .letter{background:linear-gradient(#284b59,#1b3549);border-color:#82d6aa}.game-crossword .blank{background:#061020}.game-crossword .clue{border-radius:10px}.game-crossword .clue.active{background:#284b45;color:#fff1a9}.game-puzzle #jigsaw{overflow:hidden;border-radius:18px!important;box-shadow:0 16px 40px #020819aa,0 0 24px #74ddff32}.game-puzzle #tray{grid-template-columns:repeat(10,minmax(46px,1fr))!important;max-height:36dvh;overflow:auto;overscroll-behavior:contain;padding:10px;scrollbar-color:#73dff4 #0a1933}.game-puzzle #tray .tile{min-width:0}.game-puzzle #surface>h2{text-align:center;color:#dff9ff}.game-puzzle #surface>h2::after{content:" · choose, then place";font-size:12px;color:#9db9cf;font-weight:500}.game-puzzle #keys{position:sticky;bottom:8px;z-index:3}
.arcade-game{--game-accent:#8deaff;padding:10px;border:1px solid #8bdcf244;border-radius:22px;background:linear-gradient(155deg,#0b1a37,#15274d)}.arcade-game.game-moon_lander{background:radial-gradient(circle at 82% 16%,#8777d02b,transparent 35%),linear-gradient(155deg,#0b1733,#191b48)}.arcade-game.game-racer{background:radial-gradient(circle at 15% 10%,#4ceebf22,transparent 35%),linear-gradient(155deg,#071c2f,#102949)}.arcade-game .canvas-wrap{border-color:color-mix(in srgb,var(--game-accent) 65%,#526d8b);box-shadow:0 14px 38px #020819aa,0 0 24px color-mix(in srgb,var(--game-accent) 18%,transparent)}.arcade-game .controls button{border-color:color-mix(in srgb,var(--game-accent) 50%,#5b7190);background:linear-gradient(145deg,#284f70,#142e4d);box-shadow:0 5px 0 #071225}.arcade-game .controls button:active,.arcade-game .controls button.held{transform:translateY(4px);box-shadow:0 1px 0 #071225;background:color-mix(in srgb,var(--game-accent) 55%,#26456b)}
.launch-screen{padding:24px;border:1px solid #91defc55;border-radius:26px;background:linear-gradient(150deg,#13274bdd,#171d42e8);box-shadow:0 20px 55px #020819aa}.launch-screen .launch-art{background:radial-gradient(circle,#5477a9,#111e3a);border:1px solid #a6e7ff55}.big-start{background:linear-gradient(135deg,#ffe28a,#ffad83)!important;color:#15213c!important;border-color:#fff1bd!important;box-shadow:0 7px 0 #9b5c5a,0 14px 24px #0007!important}
.mania-intro{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 50% 42%,#203c71,#080f29 66%,#030713);transition:opacity .45s ease,visibility .45s ease}.mania-intro[hidden]{display:none}.mania-intro.is-leaving{opacity:0;visibility:hidden}.mania-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 25%,#b48dff24 0 2px,transparent 3px),radial-gradient(circle at 80% 18%,#93f4ff2e 0 2px,transparent 3px),radial-gradient(circle at 70% 78%,#ffe58f29 0 2px,transparent 3px);background-size:90px 90px,120px 120px,150px 150px;animation:introStars 9s linear infinite}.mania-intro-card{position:relative;width:min(92vw,820px);height:min(88dvh,760px);display:grid;grid-template-columns:minmax(230px,420px) minmax(240px,1fr);align-items:center;gap:clamp(18px,4vw,44px);padding:clamp(18px,4vw,44px);border:1px solid #c8f1ff88;border-radius:34px;background:linear-gradient(145deg,#122554e8,#15143fe8);box-shadow:0 30px 100px #000b,inset 0 1px #fff3;overflow:hidden}.mania-intro-video{width:100%;height:100%;max-height:660px;object-fit:cover;border:1px solid #bceeff88;border-radius:26px;background:#071126;box-shadow:0 18px 40px #0009}.mania-intro-copy{position:relative;z-index:2}.mania-intro-copy .eyebrow{color:var(--mania-gold)}.mania-intro-copy h1{font-size:clamp(35px,5vw,66px);margin:9px 0;color:white;text-shadow:0 7px 25px #000}.mania-intro-copy p{color:#d9efff;font-size:16px}.mania-intro-copy button{width:100%;margin-top:14px;background:linear-gradient(135deg,#ffe787,#ffb187);color:#13203b;border-color:#fff1bd;box-shadow:0 7px 0 #975b63}.intro-skip{position:absolute;right:18px;top:18px;z-index:3;min-height:42px;padding:8px 14px;border-radius:999px;background:#07152ccc;backdrop-filter:blur(8px)}body.intro-active{overflow:hidden}
@keyframes introStars{to{background-position:90px 180px,-120px 240px,150px 300px}}
@media(max-width:900px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-heading>img{width:42%;right:-3%}}
@media(max-width:620px){.hub-heading{min-height:280px;padding:24px 20px;background-position:58% center}.hub-heading-copy{max-width:76%}.hub-heading>img{width:48%;right:-8%;bottom:-9%}.hub-heading h1{font-size:37px;letter-spacing:-1px}.hub-heading p{font-size:14px}.game-grid{grid-template-columns:1fr}.game-grid .card .art{height:100%;min-height:190px}.game-puzzle #tray{grid-template-columns:repeat(5,minmax(46px,1fr))!important;max-height:31dvh}.mania-intro-card{height:94dvh;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:12px;border-radius:26px}.mania-intro-video{min-height:0;max-height:none;object-fit:cover}.mania-intro-copy{text-align:center;padding:0 10px 12px}.mania-intro-copy h1{font-size:32px;margin:4px 0}.mania-intro-copy p{font-size:13px;margin:6px 0}.intro-skip{right:13px;top:13px}}
@media(prefers-reduced-motion:reduce){.game-grid .card,.mania-intro{transition:none}.game-grid .card:hover{transform:none}.mania-intro::before{animation:none}}

/* Mobile launch stability: keep the shell out of the compositor until the studio
   film is gone, then release its decoded frames before a game runtime starts. */
.mania-intro:not([hidden])~header,.mania-intro:not([hidden])~main,.mania-intro:not([hidden])~nav,.mania-intro:not([hidden])~#toast{visibility:hidden}
.native-handoff{overflow:hidden;background:#050b1d}
.native-handoff>header,.native-handoff>nav{display:none}
.native-handoff main{padding:0;min-height:100dvh;display:grid;place-items:center}
.native-handoff-screen{width:min(88vw,430px);text-align:center;padding:32px 24px;border:1px solid #8ee9ff66;border-radius:28px;background:linear-gradient(150deg,#152b55,#0a1530);box-shadow:0 24px 70px #000a}
.native-handoff-screen img{width:112px;height:112px;border-radius:28px;filter:drop-shadow(0 16px 24px #0008)}
@media(max-width:620px){
 .mania-intro{width:100vw;height:100dvh;min-height:100dvh;padding:0;place-items:stretch;background:#030713}
 .mania-intro::before{z-index:0}
 .mania-intro-card{width:100vw;height:100dvh;max-width:none;max-height:none;display:block;padding:0;border:0;border-radius:0;background:#030713;box-shadow:none}
 .mania-intro-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0;object-fit:contain;background:#030713;box-shadow:none}
 .mania-intro-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;text-align:center;padding:72px 22px max(24px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#030713dd 42%,#030713 78%);pointer-events:none}
 .mania-intro-copy>*{pointer-events:auto}
 .mania-intro-copy h1{font-size:clamp(26px,8vw,38px);margin:3px 0}
 .mania-intro-copy p{font-size:13px;margin:4px auto 8px;max-width:330px}
 .mania-intro-copy button{margin-top:7px;min-height:46px}
 .intro-skip{z-index:4;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));background:#07152ce8}
}