:root { color-scheme: dark; --ink:#f6f3ea; --muted:#a09cad; --lime:#c9ff4a; --pink:#ff4fd8; --blue:#75a9ff; --orange:#ff9b58; --red:#ff6b78; --night:#101020; --panel:#171737; --pixel:"Courier New",monospace; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; min-height:100%; display:grid; place-items:center; color:var(--ink); background:var(--night); font:14px var(--pixel); }
.template-game { width:min(100%,520px); height:100%; min-height:100%; display:flex; flex-direction:column; padding:14px; background:linear-gradient(180deg,#15152c,#0c0c16); }
.game-top,.game-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--lime); font-size:10px; letter-spacing:.08em; }
.game-top h1 { margin:0; color:var(--ink); font-size:clamp(16px,5vw,25px); letter-spacing:.02em; }
.game-top .type { color:var(--muted); font-size:9px; }
.stage { position:relative; flex:1; min-height:420px; display:flex; flex-direction:column; gap:18px; margin:14px 0; padding:18px; overflow:hidden; border:1px solid rgba(246,243,234,.2); background:radial-gradient(circle at 80% 18%,rgba(255,79,216,.25),transparent 28%),linear-gradient(145deg,#222252,#111126); }
.stage::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background:linear-gradient(transparent 95%,rgba(201,255,74,.3) 96%),linear-gradient(90deg,transparent 95%,rgba(201,255,74,.12) 96%); background-size:26px 26px; transform:perspective(300px) rotateX(58deg) scale(1.8) translateY(55px); transform-origin:bottom; }
.stage > * { position:relative; z-index:1; }
.intro { color:var(--muted); font:13px system-ui,sans-serif; line-height:1.45; }
.prompt { margin:0; color:var(--blue); font-size:10px; line-height:1.5; }
.game-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:auto; }
button { border:1px solid rgba(246,243,234,.3); padding:11px 13px; color:var(--ink); background:rgba(16,16,32,.8); font:12px var(--pixel); cursor:pointer; }
button:hover,button:focus-visible { border-color:var(--lime); color:var(--night); background:var(--lime); outline:none; }
.primary { color:var(--night); border-color:var(--lime); background:var(--lime); }
.score { color:var(--lime); }
.grid { display:grid; gap:6px; }
.grid button { min-width:42px; min-height:42px; padding:0; }
.grid-3 { grid-template-columns:repeat(3,1fr); max-width:250px; margin:auto; }
.grid-5 { grid-template-columns:repeat(5,1fr); max-width:270px; margin:auto; }
.card-row,.choice-row,.wardrobe,.clue-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.game-card { width:82px; min-height:116px; display:grid; place-items:center; padding:10px; border:1px solid var(--pink); background:linear-gradient(145deg,#4d2757,#171323); text-align:center; }
.world { flex:1; min-height:240px; display:grid; place-items:center; border:1px solid rgba(117,169,255,.5); background:radial-gradient(circle,#335596,#121934 65%); }
.island { width:150px; height:100px; position:relative; border-radius:45% 55% 48% 52%; background:#5e9b67; box-shadow:0 18px 0 #233c50,0 0 30px rgba(117,169,255,.5); transform:perspective(220px) rotateX(52deg); }
.island::before,.island::after { content:"✦"; position:absolute; color:var(--lime); font-size:24px; transform:rotateX(-52deg); }.island::before{left:30px;top:-24px}.island::after{right:22px;top:8px}
.maze { width:min(100%,290px); aspect-ratio:1; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; margin:auto; padding:5px; background:#182a2c; }
.maze span { display:grid; place-items:center; min-height:35px; color:transparent; background:#315b50; }.maze span.wall { background:#111d22; }.maze span.player,.maze span.key,.maze span.exit { color:var(--lime); background:#47735c; }
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-width:280px; margin:auto; }.board button { min-height:55px; color:var(--orange); border-color:rgba(255,155,88,.55); }
.meter { height:10px; border:1px solid var(--red); }.meter span { display:block; width:30%; height:100%; background:var(--red); transition:width .2s ease; }
.elevator { flex:1; min-height:210px; display:grid; place-items:center; border:1px solid rgba(255,107,120,.45); background:linear-gradient(90deg,#17131f 0 45%,#62506a 46% 54%,#17131f 55%); font-size:54px; color:var(--red); }
.snake-board { width:min(100%,270px); aspect-ratio:1; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin:auto; padding:5px; background:#172725; }.snake-board span { background:#294d43; }.snake-board span.snake { background:var(--lime); }.snake-board span.food { background:var(--pink); border-radius:50%; }
.avatar { width:130px; height:180px; position:relative; margin:auto; border:2px solid var(--pink); background:linear-gradient(#ffcfb2 0 30%,#263f8d 31% 68%,#f08c53 69%); box-shadow:0 0 0 9px rgba(255,79,216,.1); }.avatar::before { content:"◉"; position:absolute; top:18px; left:45px; color:var(--night); font-size:35px; }.avatar::after { content:"✦"; position:absolute; right:-22px; bottom:20px; color:var(--lime); font-size:29px; }
.escape-room { flex:1; display:grid; place-items:center; border:1px solid rgba(117,169,255,.5); background:linear-gradient(145deg,#1c3159,#111528); }.lock { font-size:60px; color:var(--blue); }
@media (max-width:420px) { .template-game { padding:10px; }.stage { min-height:390px; padding:14px; }.game-top h1 { font-size:16px; } button { padding:10px 9px; } }
/* Playable rules and mobile layouts. */
html,body{max-width:100%;overflow-x:hidden}.template-game{min-width:0}.stage{overflow:visible}.stage::before{display:none}.stage>*,.game-controls{max-width:100%;min-width:0}button{min-height:44px;touch-action:manipulation;overflow-wrap:anywhere}button:disabled{opacity:.65;cursor:default}.intro{min-height:36px}.restart{align-self:center;margin-top:12px}.crossword-grid{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,240px);margin:auto;gap:4px}.crossword-grid button{aspect-ratio:1;background:#f6f3ea;color:#101020;font-size:26px}.crossword-grid .selected{background:var(--lime);outline:3px solid var(--pink)}.clues{padding-left:22px;font:13px/1.7 system-ui,sans-serif}.maze-board{display:grid;grid-template-columns:repeat(7,1fr);width:min(100%,300px);aspect-ratio:1;margin:auto;gap:2px;background:#132322;touch-action:none}.maze-board span{display:grid;place-items:center;font-size:22px;min-width:0}.maze-board .wall{background:#416a5a}.maze-board .path{background:#111d22;color:var(--lime)}.snake-board{touch-action:none}.snake-board span{min-width:0;min-height:0}.snack-card{white-space:pre-line;display:grid;place-items:center;min-height:100px;width:80px;border:2px solid var(--pink);background:#352040;color:var(--lime);line-height:2}.code-display{text-align:center;font-size:36px;color:var(--blue);letter-spacing:.2em}.finished{outline:4px solid var(--lime)}.world{perspective:700px;overflow:hidden;min-height:260px}.island3d{position:relative;width:210px;height:210px;background:linear-gradient(135deg,#579d75,#274c49);transform-style:preserve-3d;border:8px solid #a9b883;box-shadow:0 18px 0 #1c3141;transition:transform .25s}.stone{position:absolute;color:var(--lime);font-size:22px;transform:translateZ(28px);background:#182449;min-width:52px;box-shadow:0 12px 0 #263941}.stone-0{top:12px;left:14px}.stone-1{top:85px;right:10px}.stone-2{bottom:12px;left:26px}.direction{min-width:52px;font-size:22px}.grid-3 button{overflow-wrap:anywhere}.game-top{flex-wrap:wrap}.game-top>div{min-width:0}.game-top h1{overflow-wrap:anywhere}.game-bottom{flex-wrap:wrap}