:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #14324a;
  color: #13202a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(12, 41, 61, .1), rgba(4, 20, 30, .48)),
    #1f5475;
}

button { font: inherit; cursor: pointer; }
.game-shell {
  width: min(100vw, 1600px);
  height: min(100vh, 940px);
  height: min(100dvh, 940px);
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 44px;
  background: #f6f3e9;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

.topbar, footer {
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 42px);
}
.topbar { justify-content: space-between; border-bottom: 3px solid #183d53; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 18px; white-space: nowrap; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: white; background: #e64032; border: 3px solid #8f1e1a;
  border-radius: 50%; font-family: Georgia, serif; font-size: 23px;
}
.hud { display: flex; gap: clamp(18px, 5vw, 64px); }
.hud div { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hud span { color: #64727a; font-weight: 700; font-size: 12px; }
.hud strong { font-family: "Courier New", monospace; font-size: 21px; }
.life-stat { display: none !important; }
.actions { display: flex; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border: 2px solid #b9c0c1; background: transparent;
  color: #22343f; font-weight: 900; font-size: 18px; border-radius: 6px;
}
.icon-btn:hover, .icon-btn:focus-visible { background: #e8ece9; outline: none; border-color: #22343f; }

.stage-wrap { position: relative; min-height: 0; overflow: hidden; background: #68c6ed; }
canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.heart-hud { position:absolute;z-index:4;top:16px;right:18px;display:flex;gap:7px;padding:8px 10px;border:2px solid rgba(255,255,255,.72);border-radius:6px;background:rgba(18,48,60,.38);backdrop-filter:blur(4px);pointer-events:none; }
.heart-hud span { color:#ef4538;font-size:22px;line-height:1;text-shadow:0 2px 0 #8c261f,0 0 3px white; }
.heart-hud span.empty { color:rgba(255,255,255,.34);text-shadow:none; }
.overlay {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  text-align: center; color: white; background: rgba(9, 39, 57, .34);
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }
.map-overlay { background: rgba(8,28,39,.82);backdrop-filter:blur(7px);text-align:left; }
.map-panel { width:min(1040px,92vw);height:min(650px,82vh);padding:28px 34px;color:#142733;background:#d9ead7;border:4px solid #173c4f;border-radius:8px;box-shadow:0 18px 0 rgba(5,22,31,.3);overflow:hidden; }
.map-heading { display:flex;align-items:flex-start;justify-content:space-between; }
.map-heading h2 { color:#fff7db;font-size:clamp(34px,5vw,58px); }
.map-close { background:#f7f2df; }
.map-route { position:relative;height:440px;margin-top:16px;background:linear-gradient(#8dcbe2 0 47%,#76bd64 47% 70%,#489357 70%);border:3px solid #315c62;border-radius:6px;overflow:hidden; }
.map-route::before { content:"";position:absolute;inset:auto 0 0;height:115px;background:repeating-linear-gradient(90deg,#3d754b 0 70px,#437f50 70px 140px); }
.route-line { position:absolute;height:8px;background:#f7dc83;border:2px solid #9e7230;transform-origin:left center;z-index:1; }
.line-1{left:13%;top:61%;width:20%;transform:rotate(-18deg)}.line-2{left:32%;top:53%;width:21%;transform:rotate(13deg)}.line-3{left:51%;top:60%;width:20%;transform:rotate(-16deg)}.line-4{left:69%;top:51%;width:17%;transform:rotate(18deg)}
.map-node { position:absolute;z-index:2;width:130px;padding:0;border:0;background:transparent;color:#16303a;text-align:center; }
.map-node[data-stage="surface"]{left:7%;top:51%}.map-node[data-stage="desert"]{left:27%;top:34%}.map-node[data-stage="snow"]{left:47%;top:52%}.map-node[data-stage="ghost"]{left:67%;top:30%}.map-node[data-stage="castle"]{left:83%;top:51%}
.node-icon { display:grid;place-items:center;width:58px;height:58px;margin:0 auto 7px;border:4px solid #71352c;border-radius:50%;background:#eb4737;color:#fff;font:900 24px/1 "Courier New",monospace;box-shadow:0 5px 0 #71352c; }
.map-node strong,.map-node small{display:block;text-shadow:0 1px rgba(255,255,255,.7)}.map-node strong{font-size:14px}.map-node small{margin-top:3px;font-size:10px;font-weight:800}.map-node.active:hover .node-icon{transform:translateY(-4px);background:#ffcb3d;color:#432e22}.map-node.locked{filter:grayscale(1);opacity:.6;cursor:not-allowed}.boss-node .node-icon{border-radius:5px;background:#543e56}.map-legend{display:flex;gap:24px;margin-top:14px;font-size:11px;font-weight:800;color:#4d6266}.map-legend span:last-child{margin-left:auto}
.logo-lockup, .result-panel { padding: 24px; max-width: 650px; }
.eyebrow { display: block; color: #ffe452; font: 900 14px/1 "Courier New", monospace; letter-spacing: 0; margin-bottom: 12px; }
h1, h2 { margin: 0; text-shadow: 0 5px 0 #923023, 0 8px 18px rgba(0,0,0,.28); }
h1 { font-size: clamp(46px, 8vw, 96px); line-height: .95; color: #fff6d8; }
h2 { font-size: clamp(40px, 6vw, 72px); color: #fff6d8; }
.overlay p { font-weight: 700; font-size: clamp(15px, 2vw, 20px); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.primary-btn {
  margin-top: 18px; min-width: 190px; padding: 14px 24px; border: 3px solid #7d211b;
  border-radius: 6px; background: #e64334; color: white; font-weight: 900; font-size: 18px;
  box-shadow: 0 6px 0 #7d211b;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #7d211b; }
.primary-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7d211b; }
.key-guide { display: flex; justify-content: center; gap: 26px; margin-top: 30px; font-size: 13px; font-weight: 700; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 25px; margin: 0 2px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; background: rgba(9,28,39,.5); }

.touch-controls { display: none; position: absolute; inset: auto 18px 18px; z-index: 4; justify-content: space-between; pointer-events: none; }
.touch-controls button { pointer-events: auto; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); color: white; background: rgba(13,46,64,.52); font-size: 25px; font-weight: 900; backdrop-filter: blur(4px); }
.dpad { display: flex; gap: 10px; }
.skill-pad { display: flex; align-items: flex-end; gap: 10px; }
.touch-controls .fire-btn { width: 50px; height: 50px; background: rgba(244, 154, 35, .76); }
.touch-controls .jump-btn { background: rgba(218,53,43,.72); }

footer { gap: 18px; background: #f6f3e9; border-top: 3px solid #183d53; }
.progress-track { flex: 1; height: 7px; overflow: hidden; background: #d5dbd7; border-radius: 4px; }
.progress-track span { display: block; width: 0; height: 100%; background: #e64334; transition: width .15s linear; }
footer > span { color: #526168; font-size: 11px; font-weight: 800; white-space: nowrap; }

@media (pointer: coarse), (max-width: 780px) {
  .touch-controls { display: flex; }
  .heart-hud { top:10px;right:10px;padding:6px 8px;gap:5px; }.heart-hud span{font-size:18px}
  .game-shell { grid-template-rows: 58px minmax(0, 1fr) 34px; }
  .topbar { padding-inline: 12px; }
  .brand span:last-child { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .hud { gap: 12px; }
  .hud div:nth-child(2), .hud div:nth-child(4) { display: none; }
  .hud div { gap: 5px; }
  .hud strong { font-size: 16px; }
  .actions .icon-btn:first-child { display: none; }
  .key-guide { display: none; }
  footer { padding-inline: 12px; }
  footer > span { display: none; }
  .map-panel{padding:16px;height:min(620px,88vh)}.map-route{height:450px}.map-node{width:86px}.map-node strong{font-size:11px}.node-icon{width:46px;height:46px}.map-node[data-stage="surface"]{left:2%}.map-node[data-stage="desert"]{left:21%}.map-node[data-stage="snow"]{left:41%}.map-node[data-stage="ghost"]{left:61%}.map-node[data-stage="castle"]{left:79%}.map-legend span:nth-child(2){display:none}
}

@media (max-height: 500px) {
  .game-shell { grid-template-rows: 48px minmax(0, 1fr) 26px; }
  .topbar { padding-inline: 12px; }
  .brand-mark { width: 30px; height: 30px; font-size: 18px; }
  .hud strong { font-size: 16px; }
  .overlay p, .key-guide { display: none; }
  .primary-btn { margin-top: 12px; padding-block: 9px; }
  .touch-controls { bottom: 10px; }
  .touch-controls button { width: 52px; height: 52px; }
}