@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{--ink:#17182f;--paper:#fbf5df;--line:#91b6d3;--blue:#367fc0;--pink:#ce5666}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:#111b35;font-family:'Press Start 2P',monospace}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center,#283d69 0 55%,#111b35 100%);z-index:-2}button{font:inherit;color:inherit;cursor:pointer}.game-shell{width:min(1375px,100%);min-height:100vh;margin:auto;padding:22px 7.5% 11px;background-color:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 35px,rgba(86,143,190,.28) 36px 37px);position:relative;overflow:hidden}.game-shell:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.23),transparent 20%,transparent 80%,rgba(0,0,0,.08));pointer-events:none}.paper-note{position:absolute;left:7%;top:27px;font-size:clamp(13px,2vw,26px);font-weight:bold;transform:rotate(-2deg)}.barcode{position:absolute;right:9%;top:0;text-align:center;font-size:25px;line-height:13px}.barcode small{font:10px monospace}.topbar,.hud,.play-area,.footer{position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink);padding:40px 8px 9px}.brand-block{text-align:center}.eyebrow{display:none}h1{font-size:clamp(15px,2.3vw,29px);line-height:1.3;margin:0;letter-spacing:1px}h1 strong{color:var(--ink)}.sound-button{position:absolute;right:0;top:44px;border:0;background:transparent;font-size:20px}.hud{display:flex;justify-content:space-between;gap:16px;padding:12px 0 9px}.characters{display:flex;gap:12px;flex-wrap:wrap}.character{background:transparent;border:0;border-bottom:2px solid transparent;padding:0 2px 4px;display:flex;align-items:center;gap:5px;font-size:8px}.character.active{border-color:var(--pink);transform:none}.sprite{display:grid;place-items:center;width:31px;height:28px;font-size:22px;image-rendering:pixelated}.stats{min-width:280px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6px 20px;font-size:9px}.hearts{color:var(--pink);letter-spacing:2px;white-space:nowrap}.coin-count{color:#8e681d;white-space:nowrap}.coin{color:#e1ae25;font-size:18px;text-shadow:1px 1px var(--ink)}.energy{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:7px}.energy-track{flex:1;height:16px;padding:3px;border:2px solid var(--ink);background:#47518d}.energy-track i{display:block;height:100%;width:78%;background:linear-gradient(90deg,#96d65d,#66cbb6)}.play-area{display:flex;gap:11px;align-items:center}.side-decoration{width:83px;display:flex;flex-direction:column;gap:30px;align-items:center;text-align:center;color:#273d70;font-size:27px}.side-decoration.left{color:#bd7b3a}.side-decoration.right{color:#273d70}.side-decoration b{font-size:11px;color:#2e6d9c}.dpad{font-size:17px;line-height:1.5}.maze-card{flex:1;min-width:0;background:transparent;padding:0}.maze-title{display:flex;justify-content:space-between;gap:12px;font-size:8px;color:#405685;padding:0 5px 7px}.maze-title span:nth-child(2){color:var(--pink)}.maze{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(9,1fr);gap:2px;background:rgba(128,188,218,.18);border:3px solid var(--blue);padding:3px;aspect-ratio:15/9}.cell{position:relative;background:rgba(229,244,229,.28);display:grid;place-items:center;font-size:clamp(12px,2vw,25px);user-select:none}.cell.wall{background:transparent}.cell.obstacle{background:rgba(137,188,178,.15)}.cell.player{background:rgba(245,212,119,.4);z-index:2}.cell.goal{background:rgba(245,212,119,.4)}.cell.player:after{content:'🏴‍☠️';filter:drop-shadow(2px 2px 0 #20213b)}.cell.goal:after{content:'🧰'}.cell.coin:after{content:'🪙'}.cell.rock:after{content:'🪨'}.cell.vine:after{content:'🌿'}.cell.fence:after{content:'🪵'}.cell.spike:after{content:'✹';color:#473b67;font-size:1.2em}.controls-hint{display:flex;justify-content:space-between;gap:12px;font-size:7px;color:#405685;padding:7px 5px 0}.controls-hint span{color:#6a7390}.footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 5px 0;border-top:2px solid var(--ink);font-size:7px;color:#6b7192}.footer button{border:0;background:transparent;color:var(--pink);font-size:7px}@media(max-width:760px){.game-shell{padding:16px 4% 10px}.paper-note,.barcode{display:none}.topbar{padding-top:25px}.hud{flex-direction:column}.stats{min-width:0}.side-decoration{display:none}.footer{font-size:6px}.controls-hint{line-height:1.6;flex-direction:column}}
/* Clear maze lanes: the blue blocks are walls, the paper-colored tiles are walkable roads. */
.maze{background:#79b5d2}
.cell{background:#f5f0d9;border:2px solid rgba(63,137,193,.58)}
.cell.wall{background:#6daed0;border-color:#2f71ad;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.cell.obstacle{background:#d8e7d2}
.cell.player{background:#f7d86b!important;box-shadow:inset 0 0 0 3px #d35e62,0 0 0 2px #fff0a5;z-index:5}
.cell.player:after{content:'👧🏻'!important;font-size:clamp(22px,3.2vw,38px);line-height:1;filter:drop-shadow(2px 2px 0 #20213b)!important;transform:translateY(-2px)}
.cell.player:before{content:'START';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:6px 'Press Start 2P',monospace;color:#d35e62;white-space:nowrap;text-shadow:1px 1px #fff8db}
.cell.goal:before{content:'GOAL';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:6px 'Press Start 2P',monospace;color:#d35e62;white-space:nowrap;text-shadow:1px 1px #fff8db}
.cell.pirate{background:#d8c4bd!important;border-color:#754b58!important;z-index:4}.cell.pirate:after{content:'☠️'!important;font-size:clamp(22px,3.2vw,38px);filter:drop-shadow(2px 2px 0 #20213b)}.cell.pirate:before{content:'PIRATE';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:6px 'Press Start 2P',monospace;color:#754b58;white-space:nowrap;text-shadow:1px 1px #fff8db}
.cell.switch{background:#a9dc91!important;border-color:#4a974d!important}.cell.switch:after{content:'⚙️';font-size:clamp(15px,2vw,25px)}.cell.opened{background:#d8e7d2!important;border-color:#6aa867!important}.cell.opened:after{content:'⬇️';font-size:clamp(14px,2vw,23px)}.cell.active-trap{background:#f2a9a1!important;animation:trapPulse .55s infinite alternate}.cell.ninja-hidden{opacity:.4}@keyframes trapPulse{to{transform:scale(.88);background:#df6e76}}
.maze-title select{font:inherit;font-size:8px;color:#405685;background:transparent;border:0;border-bottom:2px solid #367fc0;padding:2px}.footer button:disabled{opacity:.35;cursor:not-allowed}
.cell.fence{background:#bf8b61!important;border:3px solid #70433c!important;box-shadow:inset 0 0 0 2px #e8bd77,0 0 0 2px #fff4ce;z-index:3}.cell.fence:after{content:'🚧'!important;font-size:clamp(19px,2.8vw,34px);filter:drop-shadow(2px 2px 0 #442c36)}.cell.fence:before{content:'LOCKED';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:6px 'Press Start 2P',monospace;color:#a34d4d;white-space:nowrap;text-shadow:1px 1px #fff8db}.cell.fence.opened{background:#a9d58e!important;border-color:#4a974d!important}.cell.fence.opened:after{content:'⬇️'!important}
.cell.pickup{background:#f7df8b!important;border:2px solid #bc7a38!important;z-index:2}.cell.pickup:after{font-size:clamp(16px,2.4vw,30px);filter:drop-shadow(1px 2px 0 #fff)}.cell.potion:after{content:'🧪'}.cell.boots:after{content:'👢'}.cell.compass:after{content:'🧭'}.cell.barrel:after{content:'🛢️'}.cell.shell:after{content:'🐚'}
.cell.bomb{background:#e89a75!important;border-color:#a53e43!important}.cell.bomb:after{content:'💣';font-size:clamp(17px,2.5vw,29px)}.cell.map:after{content:'🗺️'}
.cell.water{background:#78bdd1!important;border-color:#337aa9!important;box-shadow:inset 0 0 0 2px #b8e6df}.cell.water:after{content:'💧';font-size:clamp(15px,2.3vw,27px)}
.rules{position:relative;z-index:1;margin-top:12px;padding:10px 12px 5px;border:2px solid rgba(32,33,59,.7);background:rgba(255,250,224,.55)}.rules h2{font-size:10px;color:#d15b65;margin:0 0 9px}.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px}.rules p{margin:0;font:10px/1.65 monospace;color:#38466b}.rules b{color:#bd5a51}@media(max-width:760px){.rules-grid{grid-template-columns:1fr}.rules p{font-size:9px}}
.maze{position:relative}.maze.under-fire{animation:dangerFlash .22s 3}.maze.under-fire:before{content:attr(data-hazard) '  ➜  •  ➜  •  ➜';position:absolute;z-index:9;left:3%;top:42%;font-size:clamp(15px,3vw,30px);letter-spacing:4px;color:#d4515f;text-shadow:2px 2px #fff4ce;animation:projectileFly .75s linear}.maze.under-fire:after{content:'远程干扰';position:absolute;z-index:10;right:4%;top:5%;font:8px 'Press Start 2P',monospace;color:#d4515f;background:#fff4ce;padding:5px;border:2px solid #d4515f}@keyframes projectileFly{from{transform:translateX(-5%);opacity:0}to{transform:translateX(55%);opacity:1}}@keyframes dangerFlash{50%{filter:sepia(1) saturate(2)}}
/* On-screen controls keep movement usable when the page does not have keyboard focus. */
.dpad{text-align:center}.dpad button{width:27px;height:25px;padding:0;border:2px solid #20213b;background:#78a9c7;color:#20213b;font-size:12px;line-height:1}.dpad button:active{transform:translateY(2px);background:#f3d064}