*{box-sizing:border-box}
:root{font-family:"Trebuchet MS",Arial,sans-serif;color:#fff;background:#061528}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#3274a4,#0b3155 45%,#061528 85%)}
.game-shell{width:min(1540px,98vw);margin:auto;padding:10px 0 16px}
.topbar{display:grid;grid-template-columns:275px 1fr auto;gap:10px;align-items:center;padding:9px;border:3px solid #03101f;border-radius:14px 14px 4px 4px;background:linear-gradient(#155c91,#0a355f);box-shadow:0 8px 22px #0009}
.brand{display:flex;align-items:center;gap:7px}
.brand-art{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#f4c33b;color:#0b3155;font-size:2.5rem;font-weight:1000;border:3px solid #061528;transform:rotate(-8deg)}
h1{margin:0;color:#ffd21c;font-size:clamp(2rem,4vw,3.2rem);line-height:.8;letter-spacing:.02em;text-shadow:3px 3px #061528}
.brand p{margin:7px 0 0;font-weight:900;font-size:.82rem}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hud-card{padding:7px;border:1px solid #1d679a;border-radius:7px;background:#061d35;text-align:center}
.hud-card span{display:block;color:#ffd21c;font-size:.68rem;font-weight:1000}
.hud-card strong{display:block;font-size:1.35rem;line-height:1.05}
.hud-card small{display:block;color:#c1d5e6;font-size:.7rem}
.bar{height:8px;overflow:hidden;border-radius:9px;background:#020a13;border:1px solid #000}
.bar i{display:block;width:0;height:100%;background:#62d629;transition:width .2s}
.actions{display:flex;gap:6px}
button{border:2px solid #03101f;border-radius:8px;padding:11px 12px;background:linear-gradient(#1972ad,#0a3d67);color:#fff;font-weight:1000;cursor:pointer;box-shadow:0 3px #03101f}
button:hover{filter:brightness(1.12)}
button:active{transform:translateY(2px);box-shadow:0 1px #03101f}
button.danger{background:linear-gradient(#ec493d,#a8201e)}
.layout{display:grid;grid-template-columns:205px minmax(500px,1fr) 245px;gap:7px;margin-top:7px}
.panel{padding:10px;border:2px solid #15588a;border-radius:9px;background:linear-gradient(#082c48ee,#06182bec);box-shadow:0 8px 22px #0008}
.panel h2{margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid #20587d;color:#ffd21c;font-size:1rem;text-shadow:1px 1px #000}
.left-panel{text-align:center}
.controls{display:grid;grid-template-columns:repeat(3,30px);gap:3px;justify-content:center}
kbd{display:grid;place-items:center;width:30px;height:28px;border:2px solid #577f9e;border-radius:5px;background:linear-gradient(#315c7e,#173952);box-shadow:0 2px #020b15;font-weight:1000}
.or{margin:6px 0 4px;color:#839caf;font-size:.7rem}
.wasd{display:flex;justify-content:center;gap:3px}.wasd kbd{width:28px}
.move{margin:5px 0 14px;font-size:.67rem;font-weight:1000;letter-spacing:.12em}
.goal{font-weight:1000;font-size:.9rem}
.legend{display:grid;gap:7px;text-align:left}
.legend div{display:grid;grid-template-columns:34px 1fr;align-items:center;padding:4px;border-radius:5px;background:#0c3756}
.legend span{font-size:22px;text-align:center}.legend b{font-size:.7rem}
.sprint{margin-top:15px;padding:8px;border:1px solid #24628b;border-radius:6px;background:#061728;font-size:.67rem;font-weight:1000}
.sprint kbd{display:inline-grid;width:50px;height:23px;margin:0 3px;font-size:.68rem}
.game-area{position:relative;overflow:hidden;border:3px solid #03101f;border-radius:8px;background:#609e45;box-shadow:0 10px 28px #000a}
canvas{display:block;width:100%;height:auto}
.story-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(530px,90%);padding:7px;border:4px solid #061528;border-radius:17px;background:#e8d6ad;box-shadow:0 14px 45px #000c;color:#261c12}
.story-inner{position:relative;padding:20px 30px 23px;border:2px solid #4f412f;border-radius:10px;text-align:center;background:linear-gradient(#f8eccd,#e9d7ab)}
.story-card h2{margin:0 0 12px;color:#9e2e23;font-size:2rem;text-shadow:1px 1px #fff}
.story-portrait{width:84px;height:84px;margin:0 auto 8px;border-radius:50%;background:#e9bd98;position:relative;border:4px solid #206ca0;box-shadow:inset 0 0 0 12px #2c78ac}
.story-portrait:before{content:"";position:absolute;left:21px;top:17px;width:39px;height:31px;border-radius:50%;background:#e7bd96}
.story-portrait:after{content:"";position:absolute;left:27px;top:14px;width:28px;height:10px;border-radius:50% 50% 10% 10%;background:#bc7e3d}
.story-card p{margin:8px 0;line-height:1.35;font-size:.96rem}
.story-card hr{border:0;border-top:2px solid #78694d;margin:14px 0 9px}
.story-card h3{margin:0;color:#9e2e23;font-size:1.3rem}
.objective{font-weight:900}
.close{position:absolute;right:-9px;top:-9px;width:39px;height:39px;padding:0;border-radius:9px;background:#d73c31;color:#fff;font-size:2rem;line-height:1}
.go{margin-top:8px;padding:10px 35px;border-color:#173b08;background:linear-gradient(#74d72e,#2f8d14);font-size:1.35rem;text-shadow:1px 2px #245d0d}
.pause{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#031528b8;backdrop-filter:blur(3px)}
.pause strong{color:#ffd21c;font-size:3rem;text-shadow:3px 3px #000}.pause span{font-size:.9rem}
.hidden{display:none}
.right-panel section{margin-bottom:14px}
.inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.inventory>div{min-height:91px;padding:4px;border:1px solid #205a81;border-radius:6px;background:#0b3654;text-align:center}
.inventory span{display:block;font-size:25px}.inventory b{display:block;font-size:.75rem}.inventory small{display:block;color:#b8cde0;font-size:.57rem;line-height:1.15}
.hat-icon{display:grid;place-items:center;width:39px;height:25px;margin:0 auto 3px;border-radius:50% 50% 20% 20%;background:#1d5a9b;color:#ffd21c!important;border:2px solid #061528}
.stat{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid #174968;font-size:.72rem}.stat b{font-size:.8rem}
.unlock{display:flex;align-items:center;gap:8px;padding:7px;margin-bottom:5px;border-radius:6px;background:#0b3654}.unlock span{font-size:25px}.unlock b{display:block;color:#5cdcff;font-size:.74rem}.unlock small{display:block;color:#b7cbdc;font-size:.6rem}
.mini-map{height:78px;display:grid;place-content:center;text-align:center;border:2px solid #246e95;border-radius:6px;background:repeating-linear-gradient(25deg,#4c8f3e 0 12px,#5ea348 12px 24px);font-size:.7rem;font-weight:1000}
.area-row{display:flex;justify-content:space-between;margin-top:5px;font-size:.68rem}.save{margin-top:10px;color:#60d7ff;text-align:center;font-size:.63rem}
footer{display:flex;justify-content:space-between;padding:8px 12px;border-radius:4px 4px 12px 12px;background:#0a3864;font-size:.76rem}
@media(max-width:1150px){.topbar{grid-template-columns:1fr}.actions{justify-content:flex-end}.layout{grid-template-columns:180px 1fr}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:760px){.layout{grid-template-columns:1fr}.right-panel{grid-column:auto;display:block}.game-area{order:-1}.hud{grid-template-columns:repeat(2,1fr)}}
\n\n/* Touch controls */\n.touch-controls{display:none;position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}\n.touch-dpad{position:absolute;left:16px;bottom:16px;width:154px;height:154px;pointer-events:auto}\n.touch-btn{position:absolute;width:52px;height:52px;padding:0;border:2px solid #061528;border-radius:12px;background:linear-gradient(#2b78ac,#0b3f67);color:#fff;font-size:22px;box-shadow:0 4px #061528,inset 0 0 0 1px #6ba1c5;opacity:.88;touch-action:none;-webkit-tap-highlight-color:transparent}\n.touch-btn:active,.touch-btn.pressed{transform:translateY(3px);box-shadow:0 1px #061528,inset 0 0 0 1px #6ba1c5;background:linear-gradient(#3d91c9,#15547e)}\n.touch-btn.up{left:51px;top:0}.touch-btn.left{left:0;top:51px}.touch-btn.down{left:51px;top:51px}.touch-btn.right{left:102px;top:51px}\n.touch-sprint{position:absolute;right:18px;bottom:30px;width:94px;height:58px;padding:0;border-radius:50%;background:linear-gradient(#74d72e,#2f8d14);color:#fff;font-size:.8rem;font-weight:1000;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}\n.touch-sprint:active,.touch-sprint.pressed{transform:translateY(3px);filter:brightness(1.15)}\n@media (hover:none) and (pointer:coarse){.touch-controls{display:block}.game-area{touch-action:none}.game-area canvas{touch-action:none}.story-card{max-height:88%;overflow:auto}}\n@media(max-width:760px){.game-shell{width:100%;padding:4px}.topbar{padding:7px}.brand-art{width:45px;height:45px;font-size:1.9rem}h1{font-size:2rem}.brand p{font-size:.68rem}.actions button{padding:8px;font-size:.7rem}.layout{gap:4px}.game-area{width:100%;border-width:2px}.left-panel,.right-panel{display:none}.game-area{order:-1}footer{font-size:.6rem;padding:6px}}\n
@media (hover:none) and (pointer:coarse){
  .touch-controls{display:none !important}
  .game-area,.game-area canvas{touch-action:none}
}

/* Mobile playfield: browser gestures must not steal touches from the game. */
.game-area,
.game-area canvas {
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Make the actual playfield a dedicated touch surface. */
html, body {
  overscroll-behavior: none;
}
.game-area,
.game-area canvas {
  touch-action: none !important;
  -ms-touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}