:root {
  --ink: #102122;
  --muted: #72908b;
  --cream: #f7f0dd;
  --paper: #fffaf0;
  --acid: #d4f25f;
  --orange: #ff7a45;
  --teal: #1eaca3;
  --violet: #8367ee;
  --line: rgba(16, 33, 34, .14);
  --shadow: 0 18px 50px rgba(16, 33, 34, .16);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #f4ecd8;
  font-family: Nunito, system-ui, sans-serif;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
button, .clickable { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 80% -20%, #d7f4dd 0, transparent 40%), radial-gradient(circle at 5% 15%, rgba(255,125,180,.2) 0, transparent 28%), var(--cream); }
.topbar {
  min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(18px, 4vw, 60px); border-bottom: 1px solid rgba(16,33,34,.12);
  background: rgba(255,250,240,.78); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand-mark { width: 40px; height: 40px; background: var(--acid); border: 2px solid var(--ink); border-radius: 13px 13px 16px 8px; position: relative; transform: rotate(-7deg); box-shadow: 3px 3px 0 var(--ink); }
.brand-mark::before { content: '●  ●'; position: absolute; left: 6px; top: 7px; font-size: 8px; letter-spacing: 5px; }
.brand-mark::after { content: ''; width: 16px; height: 7px; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; position: absolute; left: 10px; bottom: 8px; }
.brand-copy { line-height: 1; }
.brand-copy strong { display: block; font: 32px/0.9 Bangers, cursive; letter-spacing: 1.5px; }
.brand-copy span { color: var(--muted); font: 10px DM Mono, monospace; letter-spacing: 1.3px; text-transform: uppercase; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.pill-btn, .sound-btn { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); padding: 10px 15px; font-weight: 900; font-size: 12px; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.pill-btn:hover, .sound-btn:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--ink); }
.pill-btn.primary { background: var(--ink); color: var(--acid); }
.sound-btn { width: 40px; padding: 9px 0; font-size: 15px; }

.screen { min-height: calc(100vh - 76px); padding: clamp(28px, 5vw, 72px) clamp(18px, 6vw, 92px); }
.screen-inner { max-width: 1240px; margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font: 11px DM Mono, monospace; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: clamp(66px, 10vw, 150px)/.82 Bangers, cursive; letter-spacing: 3px; margin: 18px 0; max-width: 800px; }
h2 { font: clamp(42px, 6vw, 82px)/.9 Bangers, cursive; letter-spacing: 1.5px; margin: 12px 0; }
h3 { font-size: 18px; margin-bottom: 7px; }
.lede { color: #4c6764; font-size: clamp(16px, 2vw, 20px); line-height: 1.5; max-width: 570px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.big-btn { border: 2px solid var(--ink); border-radius: 9px; background: var(--orange); box-shadow: 5px 5px 0 var(--ink); padding: 14px 21px; font-weight: 900; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.big-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.big-btn.alt { background: var(--acid); }
.big-btn.dark { background: var(--ink); color: var(--cream); }
.tiny-note { color: var(--muted); font: 11px DM Mono, monospace; letter-spacing: .6px; margin-top: 15px; }

.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 7vw, 100px); align-items: center; }
.hero-copy { padding-bottom: 12px; }
.hero-title .accent { color: var(--orange); text-shadow: 4px 4px 0 var(--ink); }
.hero-title .outline { color: var(--acid); -webkit-text-stroke: 2px var(--ink); }
.hero-art { position: relative; min-height: 470px; display: grid; place-items: center; }
.hero-art::before { content:'✦  ·  ✧  ·  ✦  ·  ✧'; position:absolute; inset:5% 5% 7%; display:grid; place-items:center; color:rgba(255,255,255,.7); font-size:25px; letter-spacing:22px; background:radial-gradient(circle at 50% 50%, #32266e, #111344 72%); border-radius:46% 54% 50% 42%; transform:rotate(5deg); box-shadow:0 0 45px rgba(128,103,238,.5); }
.burst { position: absolute; inset: 4% 4% auto auto; width: 82%; aspect-ratio: 1; background: var(--acid); clip-path: polygon(50% 0%, 58% 17%, 78% 7%, 76% 28%, 100% 28%, 83% 45%, 100% 60%, 78% 63%, 87% 87%, 63% 78%, 53% 100%, 43% 80%, 18% 94%, 25% 70%, 0 66%, 18% 49%, 2% 31%, 26% 31%, 20% 7%, 42% 18%); opacity: .96; }
.hero-figure { position: relative; z-index: 1; width: min(100%, 520px); filter: drop-shadow(0 22px 10px rgba(16,33,34,.17)); }
.hero-figure img { width: 100%; height: 360px; object-fit: cover; object-position: 48% 65%; border-radius: 42% 45% 32% 32%; mix-blend-mode: multiply; transform: rotate(3deg); }
.sticker { position: absolute; z-index: 2; padding: 10px 13px; background: var(--orange); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 19px Bangers, cursive; letter-spacing: 1px; transform: rotate(10deg); }
.sticker.one { top: 15%; left: 4%; }
.sticker.two { right: 4%; bottom: 12%; background: var(--paper); transform: rotate(-8deg); }
.tape { position: absolute; height: 28px; width: 106px; background: rgba(255, 210, 108, .78); transform: rotate(-13deg); top: 2%; left: 34%; z-index: 3; }

.section-rule { display:flex; justify-content:space-between; align-items:end; gap:20px; margin: 75px 0 23px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.section-rule h2 { margin-bottom: 0; font-size: 46px; }
.section-rule p { color: var(--muted); max-width: 330px; margin-bottom: 2px; font-size: 14px; line-height: 1.4; }
.hero-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hero-card { text-align:left; border: 1.5px solid var(--ink); background: var(--paper); border-radius: 17px; padding: 9px; cursor:pointer; box-shadow: 4px 4px 0 rgba(16,33,34,.15); transition: transform .18s, box-shadow .18s, border-color .18s; }
.hero-card:hover, .hero-card.selected { transform: translateY(-5px); box-shadow: 5px 8px 0 var(--ink); }
.hero-card.selected { border-color: var(--orange); }
.hero-card .sketch { height: 180px; border-radius: 11px; overflow: hidden; background: #dbe3d1; }
.hero-card img { width: 300%; max-width: none; height: 100%; object-fit: cover; object-position: left bottom; mix-blend-mode: multiply; filter: saturate(1.25) contrast(1.03); }
.hero-card:nth-child(2) img { transform: translateX(-33.33%); }
.hero-card:nth-child(3) img { transform: translateX(-66.66%); }
.hero-card .card-body { padding: 13px 9px 9px; }
.hero-card .card-top { display:flex; justify-content:space-between; align-items:center; }
.hero-card h3 { font: 26px/1 Bangers, cursive; letter-spacing: 1px; margin:0; }
.hero-card .role { color: var(--muted); font: 10px DM Mono, monospace; text-transform:uppercase; letter-spacing:.8px; margin-top: 5px; }
.stat-row { display:flex; gap: 5px; margin-top: 13px; }
.stat { flex:1; height: 6px; border-radius: 99px; background: #dfe8de; overflow:hidden; }
.stat i { display:block; height:100%; background: var(--teal); }
.hero-card:nth-child(2) .stat i { background: var(--violet); }
.hero-card:nth-child(3) .stat i { background: var(--orange); }
.source-strip { display:grid; grid-template-columns: .8fr 1.2fr 1fr; gap:16px; margin-top: 16px; }
.source-card { border:1.5px solid var(--ink); border-radius:17px; background:#e0e9d4; padding: 16px; overflow:hidden; min-height:170px; }
.source-card h3 { font: 27px Bangers, cursive; letter-spacing:1px; }
.source-card p { font-size:13px; line-height:1.4; max-width:250px; }
.source-card img { width:100%; height:100%; min-height:140px; object-fit:cover; mix-blend-mode:multiply; filter:saturate(.8); opacity:.75; }
.source-card.art-map { position:relative; }
.source-card.art-map img { position:absolute; inset:0; width:100%; }
.source-card.art-map .source-overlay { position:relative; z-index:1; }
.source-card.rogues { background:#dbe8d0; display:flex; flex-direction:column; justify-content:space-between; }
.rogue-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rogue-pair > div { position:relative; height:118px; overflow:hidden; border:1.5px solid var(--ink); border-radius:10px; background:#eff0df; }
.rogue-pair img { width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.rogue-pair span { position:absolute; left:5px; bottom:4px; background:var(--acid); border:1px solid var(--ink); padding:3px 5px; font:9px DM Mono, monospace; }

.map-shell { max-width: 1240px; margin:0 auto; }
.map-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:25px; }
.map-heading p { max-width:330px; color:var(--muted); line-height:1.4; margin:0; }
.map-board { position:relative; min-height:580px; overflow:hidden; border:2px solid var(--acid); border-radius:28px; background: #12143f; box-shadow: 0 0 0 5px rgba(212,242,95,.1), 0 18px 50px rgba(16,33,34,.28); }
.map-board::before { content:'✦  ·  ✧  ·  ·  ✦  ·  ✧  ·  ✦  ·  ·  ✧  ·  ✦'; position:absolute; inset:0; color:rgba(255,255,255,.56); font-size:18px; letter-spacing:20px; line-height:4.5; padding:25px; background:radial-gradient(circle at 23% 22%, rgba(255,109,171,.22), transparent 20%), radial-gradient(circle at 79% 76%, rgba(92,220,255,.18), transparent 24%), #12143f; opacity:.9; }
.map-board::after { content:'DULK UNIVERSE • CHARTED BY HUDSON + CARTER'; position:absolute; right:24px; bottom:18px; color:rgba(236,255,243,.56); font:10px DM Mono, monospace; letter-spacing:1.5px; }
.map-path { position:absolute; height:20px; border-top:3px dashed rgba(16,33,34,.5); transform-origin:left center; z-index:1; }
.path-a { width:35%; left:29%; top:52%; transform:rotate(-38deg); }
.path-b { width:29%; left:46%; top:31%; transform:rotate(39deg); }
.path-c { width:30%; left:50%; top:61%; transform:rotate(24deg); }
.path-d { width:28%; left:73%; top:52%; transform:rotate(-61deg); }
.map-region { position:absolute; z-index:2; text-align:center; }
.map-region h3 { font: 28px Bangers, cursive; letter-spacing:1px; margin:0; color:var(--cream); text-shadow:2px 2px #151040, 0 0 12px rgba(255,255,255,.25); }
.map-region small { font: 9px DM Mono, monospace; letter-spacing:1px; color:rgba(233,255,243,.7); }
.region-jungle { left:5%; top:10%; }
.region-snowy { right:5%; top:11%; }
.region-clowd { left:7%; bottom:10%; }
.region-core { left:47%; top:42%; }
.region-core h3 { color:var(--orange); font-size:22px; }
.island { position:relative; display:flex; gap:10px; padding:16px; border:2px solid var(--ink); background:rgba(73,183,108,.9); border-radius:48% 42% 55% 45%; min-width:214px; min-height:135px; align-items:center; justify-content:center; transform:rotate(-3deg); box-shadow: 0 0 0 4px rgba(255,255,255,.12), 4px 5px 0 rgba(0,0,0,.32); }
.region-snowy .island { background:rgba(105,194,231,.92); transform:rotate(5deg); }
.region-clowd .island { background:rgba(185,112,228,.92); transform:rotate(4deg); }
.node { position:relative; width:35px; height:35px; border-radius:50%; border:2px solid var(--ink); background:var(--orange); color:var(--ink); font:15px Bangers, cursive; cursor:pointer; box-shadow:2px 3px 0 var(--ink); transition: transform .15s, filter .15s; }
.node:hover:not(:disabled) { transform:scale(1.15) rotate(-8deg); }
.node:disabled { background:#a7b6af; filter:grayscale(.5); cursor:not-allowed; opacity:.75; }
.node.beaten { background:var(--acid); color:var(--ink); }
.node.boss { background:var(--violet); color:var(--cream); width:44px; height:44px; }
.node.current { background:var(--acid); }
.node::after { content: attr(data-label); position:absolute; top:40px; left:50%; transform:translateX(-50%); white-space:nowrap; font:9px DM Mono, monospace; color:var(--ink); }
.node:disabled::before { content:'×'; position:absolute; inset:0; display:grid; place-items:center; color:var(--paper); font-size:19px; }
.map-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; color:var(--muted); font:10px DM Mono, monospace; text-transform:uppercase; letter-spacing:1px; }
.legend-dot { display:inline-block; width:10px; height:10px; border:1px solid var(--ink); border-radius:50%; vertical-align:-1px; margin-right:5px; background:var(--orange); }
.legend-dot.lock { background:#a7b6af; }
.map-callout { position:absolute; top:25px; left:50%; transform:translateX(-50%) rotate(-2deg); padding:12px 16px; border:2px solid var(--ink); border-radius:7px; background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-size:13px; font-weight:900; z-index:4; }
.map-callout::after { content:''; position:absolute; bottom:-14px; left:50%; width:2px; height:14px; background:var(--ink); }

.planet-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; padding:88px 22px 28px; }
.planet-card { min-width:0; padding:12px; border:1.5px solid rgba(255,255,255,.58); border-radius:18px; background:rgba(255,250,240,.1); box-shadow:0 9px 0 rgba(0,0,0,.15); }
.planet-orb { min-height:142px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:14px 9px; border:2px solid var(--ink); border-radius:48% 52% 46% 54%; background:radial-gradient(circle at 32% 23%, rgba(255,255,255,.7), transparent 11%), var(--planet); box-shadow:inset -15px -14px 0 rgba(16,33,34,.16), 0 0 0 4px rgba(255,255,255,.16); transform:rotate(-4deg); }
.planet-card:nth-child(even) .planet-orb { transform:rotate(4deg); }
.planet-orb span { color:rgba(16,33,34,.58); font:10px DM Mono,monospace; letter-spacing:2px; }
.planet-orb h3 { max-width:145px; margin:7px 0 2px; color:var(--ink); font:24px/1 Bangers,cursive; letter-spacing:1px; }
.planet-orb small { color:rgba(16,33,34,.72); font:9px DM Mono,monospace; }
.level-row { display:flex; justify-content:center; gap:9px; padding:18px 0 14px; }
.level-row .node { flex:0 0 35px; }
.level-row .node.boss { background:var(--violet); color:var(--cream); }
.level-row .node.beaten { background:var(--acid); color:var(--ink); }
.planet-village { padding-top:10px; border-top:1px solid rgba(255,255,255,.26); color:#f7f0dd; font:10px DM Mono,monospace; text-align:center; }
.planet-village span { display:block; color:#a9d8d5; font-size:8px; margin-top:5px; }

.shop-shell { max-width:1100px; margin:0 auto; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.shop-card { border:1.5px solid var(--ink); border-radius:17px; background:var(--paper); padding:20px; box-shadow:5px 5px 0 rgba(16,33,34,.15); }
.shop-card h3 { font:29px/1 Bangers,cursive; letter-spacing:1px; margin:12px 0 8px; }
.shop-card p { color:var(--muted); font-size:14px; line-height:1.4; min-height:42px; }
.shop-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:2px solid var(--ink); background:var(--acid); box-shadow:3px 3px 0 var(--ink); font-size:24px; }
.shop-price { color:var(--orange); font:11px DM Mono,monospace; letter-spacing:1px; margin:18px 0 12px; }
.shop-card .big-btn { width:100%; }
.shop-card .big-btn:disabled { opacity:1; cursor:default; }
.loot-shelf { margin-top:26px; padding:20px; border:1.5px solid var(--ink); border-radius:17px; background:#dcebd3; }
.loot-shelf h3 { font:28px Bangers,cursive; letter-spacing:1px; margin:5px 0 14px; }
.loot-list { display:flex; flex-wrap:wrap; gap:8px; }
.loot-chip, .empty-loot { padding:9px 12px; border:1.5px solid var(--ink); border-radius:999px; background:var(--acid); font:10px DM Mono,monospace; }
.loot-chip.frog { background:#87d6ae; }
.loot-chip.rock { background:#bbb9b0; }
.empty-loot { background:#f7f0dd; color:var(--muted); }

.credits-screen { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:32px 18px; overflow:hidden; background:radial-gradient(circle at 50% 45%, rgba(255,109,171,.25), transparent 27%), radial-gradient(circle at 15% 20%, rgba(102,221,255,.23), transparent 19%), #0b0d2b; position:relative; }
.credits-screen::before { content:'✦  ·  ✧  ·  ✦  ·  ·  ✧  ·  ✦  ·  ✧  ·  ✦  ·  ·  ✦'; position:absolute; inset:0; color:rgba(255,255,255,.68); font-size:19px; letter-spacing:26px; line-height:5; padding:18px; }
.credits-card { width:min(630px,100%); position:relative; z-index:1; padding:clamp(30px,7vw,72px) 24px; border:2px solid var(--acid); border-radius:24px; text-align:center; background:linear-gradient(145deg,rgba(39,30,100,.93),rgba(16,17,63,.95)); box-shadow:0 0 0 7px rgba(255,112,175,.16), 0 0 70px rgba(109,96,255,.58), 10px 10px 0 rgba(0,0,0,.35); }
.credit-stars { color:#ffe36c; font-size:24px; letter-spacing:5px; margin-bottom:24px; }
.credits-card .eyebrow { color:#7cf0ff; }
.credit-logo { color:#ffcf56; font:clamp(80px,16vw,145px)/.78 Bangers,cursive; letter-spacing:5px; text-shadow:6px 6px 0 #ff557d, 0 0 26px rgba(255,207,86,.7); margin:25px 0; transform:rotate(-3deg); }
.credit-logo span { color:#91f2ff; font-size:.36em; letter-spacing:9px; text-shadow:2px 2px 0 #5b4cdf; }
.credit-line { width:110px; height:4px; margin:0 auto 23px; background:linear-gradient(90deg,#ff557d,#ffe36c,#7cf0ff); }
.credit-by { margin-bottom:1px; color:#d7e5eb; font:13px DM Mono,monospace; text-transform:uppercase; letter-spacing:2px; }
.credits-card h1 { color:#fff7dd; font-size:clamp(58px,12vw,106px); margin:0 0 8px; text-shadow:4px 4px 0 #5b4cdf; }
.credit-role { color:#b9c8e7; font-size:14px; margin-bottom:30px; }
.credit-foot { color:#8ba6bd; font:10px DM Mono,monospace; letter-spacing:.8px; margin-top:22px; }

.game-screen { padding: 15px clamp(12px, 3vw, 42px) 34px; background:#102122; min-height:calc(100vh - 76px); }
.game-shell { max-width:1280px; margin:0 auto; }
.game-top { display:flex; align-items:center; justify-content:space-between; color:var(--cream); padding: 4px 0 13px; gap:15px; }
.game-top .level-name { font: 30px Bangers, cursive; letter-spacing:1px; }
.game-top .level-name span { color:var(--acid); font:10px DM Mono, monospace; letter-spacing:1px; margin-left:8px; }
.game-stats { display:flex; align-items:center; gap:16px; font:11px DM Mono, monospace; color:#b9d5ca; }
.game-stat b { color:var(--acid); font-size:14px; }
.game-stage { position:relative; height:clamp(380px, 70vh, 720px); background:#11143a; border:2px solid #d4f25f; border-radius:12px; overflow:hidden; box-shadow: 0 0 0 5px rgba(212,242,95,.11), 0 24px 50px rgba(0,0,0,.35); }
#game-3d { width:100%; height:100%; min-height:380px; }
#game-3d canvas { width:100%; height:100%; display:block; cursor:crosshair; }
.game-reticle { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); color:#fff9dd; font:700 28px/1 DM Mono,monospace; text-shadow:0 1px 4px #172234; pointer-events:none; }
.objective-hud { position:absolute; top:16px; right:16px; z-index:2; display:grid; gap:3px; min-width:190px; padding:10px 13px; border:1px solid rgba(255,239,158,.8); border-radius:10px; background:rgba(21,43,47,.72); color:#fff9dd; box-shadow:0 6px 18px rgba(0,0,0,.22); pointer-events:none; }
.objective-hud span { color:#ffe28a; font:700 9px DM Mono,monospace; letter-spacing:1.4px; }
.objective-hud strong { font:700 13px Space Grotesk,sans-serif; }
.objective-hud small { color:#c9ddd1; font:10px DM Mono,monospace; }
.game-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(16,33,34,.74); z-index:4; }
.game-overlay.hidden { display:none; }
.game-toast { position:absolute; left:50%; top:16px; transform:translate(-50%,-20px); opacity:0; pointer-events:none; padding:10px 15px; border:1.5px solid var(--ink); border-radius:999px; background:var(--acid); color:var(--ink); font:11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.5px; transition:opacity .2s, transform .2s; z-index:3; white-space:nowrap; }
.game-toast.show { opacity:1; transform:translate(-50%,0); }
.control-hint { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; padding:13px 0 0; color:#a9c0b7; font:10px DM Mono,monospace; letter-spacing:.25px; text-align:center; }
.control-tip { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid rgba(130,173,157,.45); border-radius:7px; background:rgba(28,57,55,.62); }
.control-tip kbd { padding:3px 5px; border:1px solid #d4f25f; border-radius:4px; color:var(--ink); background:var(--acid); font:700 9px DM Mono,monospace; white-space:nowrap; }
.control-tip span { white-space:nowrap; }
.overlay-card { width:min(440px, calc(100% - 32px)); background:var(--paper); border:2px solid var(--ink); border-radius:16px; padding:26px; text-align:center; box-shadow:7px 7px 0 var(--ink); }
.overlay-card h2 { margin:0 0 7px; font-size:52px; }
.overlay-card p { color:var(--muted); line-height:1.45; margin-bottom:20px; }
.game-footer { display:flex; justify-content:space-between; gap:20px; color:#78968e; font:11px DM Mono, monospace; margin-top:14px; }
.touch-controls { display:none; gap:8px; margin-top:15px; }
.move-pad { display:grid; grid-template-columns:repeat(3, 44px); gap:5px; }
.move-pad button:nth-child(1) { grid-column:1; grid-row:2; }
.move-pad button:nth-child(2) { grid-column:2; grid-row:1; }
.move-pad button:nth-child(3) { grid-column:2; grid-row:2; }
.move-pad button:nth-child(4) { grid-column:3; grid-row:2; }
.touch-controls button { width:55px; height:45px; background:#233e3d; color:var(--acid); border:1px solid #6b968a; border-radius:8px; font-weight:900; font-size:18px; }
.touch-controls .jump { margin-left:auto; width:90px; font-size:12px; }
.art-credit { color:rgba(255,250,240,.55); font:10px DM Mono, monospace; }

@media (max-width: 800px) {
  .topbar { min-height:66px; padding:11px 16px; }
  .brand-copy strong { font-size:27px; }
  .brand-copy span { display:none; }
  .screen { min-height:calc(100vh - 66px); padding:36px 18px; }
  .hero-grid { grid-template-columns:1fr; gap:10px; }
  .hero-art { min-height:300px; order:-1; }
  .hero-figure img { height:260px; }
  h1 { font-size:82px; }
  .hero-cards { grid-template-columns:1fr; }
  .hero-card { display:flex; padding:8px; gap:12px; align-items:center; }
  .hero-card .sketch { width:118px; min-width:118px; height:118px; }
  .hero-card .card-body { padding:8px 4px; flex:1; }
  .source-strip { grid-template-columns:1fr; }
  .source-card { min-height:135px; }
  .map-board { min-height:640px; }
  .map-region h3 { font-size:22px; }
  .island { min-width:160px; min-height:115px; padding:10px; gap:6px; }
  .node { width:31px; height:31px; }
  .region-jungle { left:-3%; top:10%; }
  .region-snowy { right:-3%; top:14%; }
  .region-clowd { left:-2%; bottom:10%; }
  .region-core { left:40%; top:47%; }
  .path-a { width:30%; left:31%; top:43%; }
  .path-b { width:25%; left:50%; top:30%; }
  .path-c { width:26%; left:48%; top:63%; }
  .path-d { width:24%; left:72%; top:53%; }
  .map-callout { font-size:11px; top:24px; white-space:nowrap; }
  .planet-grid { grid-template-columns:repeat(2,1fr); padding:80px 12px 20px; gap:10px; }
  .planet-card:last-child { grid-column:span 2; width:50%; justify-self:center; }
  .planet-orb { min-height:125px; }
  .planet-orb h3 { font-size:21px; }
  .shop-grid { grid-template-columns:1fr; }
  .game-top .level-name { font-size:24px; }
  .game-stats { gap:8px; font-size:9px; }
  .game-footer { flex-direction:column; gap:7px; }
  .control-hint { gap:5px; padding-top:10px; }
  .control-tip { padding:4px 6px; font-size:9px; }
  .touch-controls { display:flex; }
  .objective-hud { top:10px; right:10px; min-width:150px; padding:8px 10px; }
  .objective-hud strong { font-size:11px; }
}

@media (max-width: 450px) {
  .nav-actions .pill-btn { display:none; }
  .game-stats .hide-mobile { display:none; }
  .map-board { min-height:610px; }
  .planet-grid { grid-template-columns:1fr; padding-top:82px; }
  .planet-card:last-child { grid-column:auto; width:auto; }
  .map-region h3 { font-size:18px; }
  .island { min-width:140px; transform:scale(.9); }
  .region-snowy .island { transform:scale(.9) rotate(5deg); }
  .region-clowd .island { transform:scale(.9) rotate(4deg); }
}