:root {
  --bg: #05040c;
  --ink: #fff8ee;
  --muted: #c4b6d9;
  --dim: #8a7ba3;
  --gold: #ffd24a;
  --gold-deep: #ff9f1c;
  --magma: #ff5a2c;
  --magma-deep: #c2280f;
  --toxic: #8dff6a;
  --ice: #8fe3ff;
  --panel: #241341;
  --panel-edge: #3d2566;
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --outline: 0 2px 0 rgba(40, 8, 20, 0.9), 0 -1px 0 rgba(40, 8, 20, 0.6), 2px 0 0 rgba(40, 8, 20, 0.6), -2px 0 0 rgba(40, 8, 20, 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 800 16px/1.35 var(--body);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

canvas { position: fixed; inset: 0; display: block; touch-action: none; cursor: crosshair; }

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

img[src*="pixellab"] { image-rendering: pixelated; }

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  min-width: 150px;
  padding: 15px 28px 16px;
  border: 0;
  border-radius: 18px;
  font: 24px/1 var(--display);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(120, 30, 0, 0.7);
  background: linear-gradient(#ffc24a, var(--gold-deep) 48%, #ff7a1c 52%, #ff5a1c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(150, 40, 0, 0.35), 0 6px 0 #a3360a, 0 12px 26px rgba(255, 120, 40, 0.35);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #a3360a, 0 4px 12px rgba(255, 120, 40, 0.3); }
.btn:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; }
.btn.big { min-width: 240px; font-size: 28px; padding: 18px 36px 19px; }

.btn.ghost {
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(#5a3a8e, #43276f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 6px 0 #251245, 0 10px 20px rgba(0, 0, 0, 0.3);
}
.btn.ghost:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 1px 0 #251245; }

.btn.google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #2a2140;
  text-shadow: none;
  background: linear-gradient(#ffffff, #eae6f2);
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 #9a90b0, 0 12px 26px rgba(0, 0, 0, 0.3);
}
.btn.google:active { box-shadow: 0 1px 0 #9a90b0; }

.g-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9 3.5l6.7-6.7C35.6 2.4 30.2 0 24 0 14.6 0 6.6 5.4 2.6 13.2l7.8 6.1C12.3 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.5 5.8c4.4-4 6.8-10 6.8-17.2z'/%3E%3Cpath fill='%23FBBC05' d='M10.4 28.7c-.5-1.4-.8-3-.8-4.7s.3-3.2.8-4.7l-7.8-6.1C.9 16.5 0 20.1 0 24s.9 7.5 2.6 10.8l7.8-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.8 2.3-8.4 2.3-6.3 0-11.7-4.1-13.6-9.8l-7.8 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-btn {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(40, 20, 70, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  flex: none;
}
.icon-btn svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn rect, .icon-btn .spk { fill: var(--ink); stroke: none; }
.mute .cross { display: none; }
.mute.is-muted .cross { display: block; }
.mute.is-muted .wave { display: none; }

.kicker { margin: 0; font: 800 13px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fine { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- title */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(40px + var(--safe-top)) 16px calc(36px + var(--safe-bottom));
  text-align: center;
  background:
    linear-gradient(rgba(5, 4, 12, 0.85), rgba(5, 4, 12, 0) 32%),
    linear-gradient(0deg, rgba(5, 4, 12, 0.92), rgba(5, 4, 12, 0) 36%);
  z-index: 4;
  animation: fade-in 0.4s ease-out;
}
.title-top, .title-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.title-bottom .btn { min-width: 280px; }
.title-mark { width: 56px; height: 56px; animation: fall 2.4s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255, 140, 40, 0.8)); }

@keyframes fall {
  0%, 100% { transform: translate(8px, -6px) rotate(35deg); }
  50% { transform: translate(-4px, 4px) rotate(35deg); }
}

.logo {
  margin: 0;
  font: clamp(46px, 12vw, 84px)/0.95 var(--display);
  letter-spacing: 0.01em;
  color: var(--gold);
  background: linear-gradient(#fff3b0, var(--gold) 45%, var(--gold-deep) 75%, var(--magma));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #7a1d06) drop-shadow(0 0 28px rgba(255, 110, 30, 0.45));
}
.tag { margin: 0; font: 800 clamp(16px, 4vw, 20px)/1.3 var(--body); color: var(--muted); }

@keyframes fade-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- map */

.map {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60% 40% at 20% 20%, rgba(255, 80, 140, 0.18), transparent 70%),
    radial-gradient(50% 35% at 85% 55%, rgba(80, 140, 255, 0.16), transparent 70%),
    radial-gradient(60% 40% at 30% 85%, rgba(255, 140, 40, 0.14), transparent 70%),
    linear-gradient(#150a2c, #0b0619 60%, #07040f);
}
.map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 40% 64%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 80%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 90%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 8%, #fff 50%, transparent 51%);
  background-size: 260px 260px;
  opacity: 0.55;
}

.map-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
}
.map-bar .mute { margin-left: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 20px;
  background: rgba(40, 20, 70, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(0, 0, 0, 0.35);
  font: 18px/1 var(--display);
  cursor: default;
}
.chip b { font-weight: normal; }
.chip-star { color: var(--gold); font-size: 20px; text-shadow: 0 0 10px rgba(255, 210, 74, 0.7); }
.chip-earth { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7fd3ff, #2e7fc0 45%, #1c4f8a 60%), #2e7fc0; box-shadow: inset -3px -2px 0 rgba(0, 0, 0, 0.3), 0 0 8px rgba(120, 190, 255, 0.5); position: relative; }
.chip-earth::after { content: "✕"; position: absolute; inset: -2px; display: grid; place-items: center; font-size: 17px; color: var(--magma); text-shadow: 0 1px 0 #000; }
.chip.account { cursor: pointer; max-width: 46vw; }
.chip.account img, .chip.account .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.chip.account .avatar { display: grid; place-items: center; background: var(--magma); font-style: normal; font-size: 16px; }
.chip.account span { font: 800 15px/1 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.map-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.map-scroll::-webkit-scrollbar { display: none; }
.map-track { position: relative; margin: 0 auto; }

.map-path { position: absolute; inset: 0; overflow: visible; }
.map-path path { fill: none; stroke: rgba(160, 130, 220, 0.25); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 22; }
.map-path path.lit { stroke: rgba(255, 170, 60, 0.9); stroke-dasharray: 2 22; filter: drop-shadow(0 0 6px rgba(255, 140, 40, 0.8)); }

.planet { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.5; }
.planet.p0 { background: radial-gradient(circle at 35% 30%, #ffb38a, #c2462b 55%, #4a1410); }
.planet.p1 { background: radial-gradient(circle at 35% 30%, #b8a6ff, #5b3fc4 55%, #1f1450); }
.planet.p2 { background: radial-gradient(circle at 35% 30%, #9ff0d0, #2f9e86 55%, #0d3a33); }
.planet.p3 { background: radial-gradient(circle at 35% 30%, #ffe28a, #d18f22 55%, #4a2c08); box-shadow: 0 0 0 3px rgba(255, 220, 140, 0.15); }
.planet.p4 { background: radial-gradient(circle at 35% 30%, #d7e0ea, #6f7f94 55%, #232b36); }

.node {
  position: absolute;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
  font: 28px/1 var(--display);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.12s;
}
.node:active { transform: scale(0.92); }
.node.is-done {
  background: radial-gradient(circle at 35% 28%, #ffe38a, #ffb627 45%, #e47a12 80%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(150, 60, 0, 0.35), 0 5px 0 #9a4608, 0 0 18px rgba(255, 170, 40, 0.35);
}
.node.is-current {
  width: 80px; height: 80px; margin: -40px 0 0 -40px;
  font-size: 34px;
  background: radial-gradient(circle at 35% 28%, #ffb08a, #ff5a2c 45%, #c2280f 85%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(120, 20, 0, 0.4), 0 6px 0 #7c1606, 0 0 0 6px rgba(255, 110, 50, 0.25), 0 0 40px rgba(255, 90, 40, 0.7);
  animation: throb 1.3s ease-in-out infinite;
}
.node.is-locked {
  cursor: default;
  color: rgba(255, 255, 255, 0.45);
  background: radial-gradient(circle at 35% 28%, #6b5a8c, #3e2e5f 60%, #2a1c45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 0 #1a0f2e;
}
.node.is-boss { width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 36px; }
.node.is-boss.is-locked { background: radial-gradient(circle at 35% 28%, #8c4a5a, #5c2236 60%, #3a1224); color: rgba(255, 200, 200, 0.6); }
.node.is-current.is-boss { width: 92px; height: 92px; margin: -46px 0 0 -46px; }

@keyframes throb { 50% { transform: scale(1.08); } }

.node-stars { position: absolute; bottom: -18px; display: flex; gap: 1px; font-size: 18px; }
.node-stars i { font-style: normal; color: rgba(40, 20, 60, 0.9); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }
.node-stars i.on { color: var(--gold); text-shadow: 0 2px 0 #8a4a00, 0 0 8px rgba(255, 210, 74, 0.8); }
.node-stars i:nth-child(2) { transform: translateY(5px); }
.node-you {
  position: absolute;
  top: -30px;
  padding: 4px 10px 5px;
  border-radius: 10px;
  font: 14px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #fff;
  color: var(--magma-deep);
  text-shadow: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: bob 1.3s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-5px); } }

.chapter {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border-radius: 16px;
  white-space: nowrap;
  background: linear-gradient(#3d2566, #2a1848);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 0 #160b2b, 0 10px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.chapter img { width: 40px; height: 40px; }
.chapter.is-locked { filter: saturate(0.5) brightness(0.8); }
.mini-planet, .band-planet {
  display: block;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 30%, var(--hi), var(--mid) 48%, var(--lo) 78%);
  box-shadow: inset -6px -5px 0 rgba(0, 0, 0, 0.25), 0 0 16px color-mix(in srgb, var(--mid) 60%, transparent);
}
.mini-planet { width: 40px; height: 40px; font-style: normal; }
.band { position: absolute; left: -50vw; right: -50vw; pointer-events: none; overflow: hidden;
  background: radial-gradient(70% 45% at 50% 50%, color-mix(in srgb, var(--m) 30%, transparent), transparent 75%), linear-gradient(transparent, var(--a) 16%, var(--b) 84%, transparent); }
.band-planet { position: absolute; top: 30%; width: 220px; height: 220px; opacity: 0.8; margin: 0 50vw; }
.band-planet { box-shadow: inset -26px -20px 0 rgba(0, 0, 0, 0.3), 0 0 60px color-mix(in srgb, var(--mid) 50%, transparent); }
.band-night .band-planet::after, .band-neon .band-planet::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(2px 2px at 40% 40%, #fff8 50%, transparent 51%), radial-gradient(2px 2px at 60% 55%, #fff8 50%, transparent 51%), radial-gradient(2px 2px at 50% 70%, #fff8 50%, transparent 51%); }
.band-volcanic .band-planet { box-shadow: inset -26px -20px 0 rgba(0, 0, 0, 0.35), 0 0 70px rgba(255, 90, 30, 0.7); }
.chapter div { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.chapter span { font: 800 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.chapter b { font: 20px/1.1 var(--display); font-weight: normal; }

.map-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}

/* ---------------------------------------------------------------- modal cards */

.modal {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 3, 18, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out;
}
.card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 20px 24px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(#3a2268, var(--panel) 40%, #1a0d31);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 0 0 4px var(--panel-edge), 0 8px 0 4px #140a26, 0 30px 60px rgba(0, 0, 0, 0.5);
  animation: pop-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.card.small { width: min(320px, 100%); }
@keyframes pop-in { from { transform: scale(0.7); opacity: 0; } }

.card h2 { margin: 0; font: 40px/1 var(--display); font-weight: normal; text-shadow: var(--outline); }
.goal { margin: 0; font: 800 18px/1.3 var(--body); color: var(--muted); }
.goal b { font: 30px/1 var(--display); font-weight: normal; color: var(--magma); text-shadow: 0 2px 0 #4a0e04; display: block; margin-top: 4px; }

.arsenal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0; }
.ammo {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  width: 76px;
  padding: 8px 4px 7px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.ammo img { width: 44px; height: 44px; }
.ammo b { font: 20px/1 var(--display); font-weight: normal; margin-top: 2px; }
.ammo em { font: 800 11px/1.2 var(--body); font-style: normal; color: var(--muted); }

.new {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: left;
  background: linear-gradient(90deg, rgba(141, 255, 106, 0.16), rgba(141, 255, 106, 0.04));
  box-shadow: inset 0 0 0 2px rgba(141, 255, 106, 0.35);
}
.new img, .new .badge { width: 48px; height: 48px; flex: none; }
.new div { display: flex; flex-direction: column; gap: 2px; }
.new b { font: 19px/1.1 var(--display); font-weight: normal; color: var(--toxic); }
.new span { font-size: 14px; color: var(--muted); }
.badge { display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 28px; }
.shield-badge { background: radial-gradient(circle at 35% 30%, #d8f6ff, #5cc2ff 50%, #1d6fb8); box-shadow: 0 0 16px rgba(110, 200, 255, 0.7); }
.boss-badge { background: radial-gradient(circle at 35% 30%, #ff9a7a, #d8341a 55%, #6a1206); color: #fff; }

.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 6px; }
.row .btn { min-width: 0; flex: 1 1 110px; font-size: 21px; padding: 14px 16px 15px; }
.result-actions #resultNext { flex-basis: 100%; font-size: 24px; }
.result-actions #resultRetry:not(.ghost) { flex-basis: 100%; order: -1; font-size: 24px; }
.stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.result .stars { display: flex; gap: 4px; align-items: flex-end; margin: -2px 0 -4px; }
.result .stars i {
  font-style: normal;
  font-size: 58px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.08);
  transition: color 0.2s;
}
.result .stars i:nth-child(2) { font-size: 76px; transform: translateY(-10px); }
.result .stars i.is-on {
  color: var(--gold);
  text-shadow: 0 4px 0 #9a5200, 0 0 24px rgba(255, 210, 74, 0.8);
  animation: star-pop 0.45s cubic-bezier(0.3, 2, 0.5, 1);
}
.result .stars i:nth-child(2).is-on { animation-name: star-pop-mid; }
@keyframes star-pop { from { transform: scale(0.2) rotate(-40deg); } }
@keyframes star-pop-mid { from { transform: translateY(-10px) scale(0.2) rotate(-40deg); } }

.result:not(.is-win) h2 { color: var(--ice); }
.result.is-win h2 { color: var(--gold); }
.copy { margin: 0; color: var(--muted); font-size: 15px; }
.stats { display: flex; justify-content: center; gap: 16px; margin: 4px 0; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; gap: 3px; }
.stats b { font: 26px/1 var(--display); font-weight: normal; }
.stats span { font: 800 11px/1 var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: calc(10px + var(--safe-top)) 16px 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hud button { pointer-events: auto; }
.hud-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 560px; }
.hud-level { font: 22px/1 var(--display); text-shadow: var(--outline); }

.hud-alive { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.hud-alive .label { font: 800 12px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.alive {
  font: 900 clamp(28px, 8.5vw, 42px)/1.1 var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(120, 180, 255, 0.3);
  transition: color 0.2s;
}
.hud.is-dropping .alive { color: #ff8a6a; text-shadow: 0 3px 0 rgba(60, 0, 0, 0.6), 0 0 24px rgba(255, 80, 40, 0.6); animation: jitter 0.12s linear infinite; }
@keyframes jitter { 50% { transform: translateX(1px); } }

.meters { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; font: 800 13px/1.2 var(--body); color: var(--muted); padding: 0 2px 3px; }
.meter-head b { font: 17px/1 var(--display); font-weight: normal; color: var(--ink); }
.meter.small .meter-head { font-size: 12px; }
.meter.small .meter-head b { font-size: 14px; }

.bar {
  position: relative;
  height: 16px;
  border-radius: 10px;
  background: rgba(20, 8, 36, 0.8);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.bar .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 10px;
  transition: width 0.25s ease-out;
}
.bar.goal .fill { background: linear-gradient(#ffd07a, #ff7a2c 55%, #e0401a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 110, 40, 0.6); }
.bar.destroy { height: 8px; }
.bar.destroy .fill { background: linear-gradient(90deg, #a04020, #ff3b1f); box-shadow: 0 0 8px rgba(255, 60, 30, 0.6); }

.ticks { position: absolute; inset: 0; }
.ticks i {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  color: #4a3a66;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  transition: color 0.2s;
}
.ticks i:last-child { transform: translate(-80%, -50%); }
.ticks i.is-on { color: var(--gold); text-shadow: 0 2px 0 #8a4a00, 0 0 12px rgba(255, 210, 74, 0.9); animation: tick-pop 0.4s cubic-bezier(0.3, 2, 0.5, 1); }
@keyframes tick-pop { from { font-size: 44px; } }

.tip {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(118px + var(--safe-bottom));
  z-index: 2;
  margin: 0 auto;
  max-width: 420px;
  text-align: center;
  font: 800 15px/1.3 var(--body);
  color: var(--ink);
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.tip.is-on { opacity: 0.95; }

.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 12px calc(14px + var(--safe-bottom));
}
.weapon {
  position: relative;
  width: 74px;
  height: 90px;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: linear-gradient(#4a2d7c, #2f1a52);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 5px 0 #180b2e;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
}
.weapon img { width: 52px; height: 52px; }
.weapon.is-giant img { transform: scale(1.18); filter: hue-rotate(-20deg) saturate(1.4); }
.weapon-name { font: 800 12px/1 var(--body); color: var(--muted); }
.weapon-count {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font: 17px/1 var(--display);
  font-weight: normal;
  color: #fff;
  background: linear-gradient(#ff7a5a, #e0301a);
  box-shadow: 0 2px 0 #7c1606, 0 0 0 2px #1a0d31;
}
.weapon kbd { display: none; }
.weapon.is-selected {
  transform: translateY(-8px);
  background: linear-gradient(#ffb347, #ff6a2c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #8a2a06, 0 0 24px rgba(255, 120, 40, 0.6);
}
.weapon.is-selected .weapon-name { color: #fff; text-shadow: 0 1px 0 rgba(120, 30, 0, 0.8); }
.weapon.is-empty { filter: grayscale(1) brightness(0.55); cursor: default; }
.weapon.is-empty .weapon-count { background: #3a2c50; box-shadow: 0 2px 0 #1a0f2e, 0 0 0 2px #1a0d31; }

@media (hover: hover) and (pointer: fine) {
  .weapon kbd {
    display: block;
    position: absolute;
    top: 5px;
    left: 7px;
    font: 800 11px/1 var(--body);
    color: rgba(255, 255, 255, 0.4);
  }
}

.toast {
  position: fixed;
  left: 50%;
  top: calc(70px + var(--safe-top));
  z-index: 9;
  transform: translate(-50%, -12px);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 14px;
  font: 800 14px/1.3 var(--body);
  background: rgba(30, 14, 56, 0.95);
  box-shadow: 0 0 0 2px var(--panel-edge), 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 400px) {
  .weapon { width: 64px; height: 84px; }
  .weapon img { width: 46px; height: 46px; }
  .tray { gap: 6px; }
  .card h2 { font-size: 34px; }
  .row .btn { font-size: 19px; }
}

@media (max-height: 640px) {
  .meter.small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .node.is-current, .node-you, .title-mark, .hud.is-dropping .alive { animation: none; }
}

/* ---------------------------------------------------------------- news ticker */

.news { display: flex; align-items: stretch; width: 100%; max-width: 560px; height: 24px; margin-top: 4px; border-radius: 6px; overflow: hidden; background: rgba(8, 4, 18, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 90, 44, 0.35); }
.news-tag { flex: none; display: grid; place-items: center; padding: 0 8px; background: var(--magma-deep); font: 11px/1 var(--display); font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; animation: news-blink 1.4s steps(2) infinite; }
.news-window { position: relative; flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.news-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.news-track span { font: 800 13px/1 var(--body); color: var(--ink); padding-right: 44px; position: relative; }
.news-track span::after { content: "◆"; position: absolute; right: 16px; color: var(--magma); font-size: 10px; top: 1px; }
.news-track span.hot { color: var(--gold); }
@keyframes news-blink { 50% { background: var(--magma); } }

/* ---------------------------------------------------------------- map art */

.mini-planet, .band-planet { image-rendering: pixelated; }
img.mini-planet { background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mid, #fff) 60%, transparent)); }
.band img.band-planet { background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.18)); }
.decor { position: absolute; pointer-events: none; image-rendering: pixelated; opacity: 0.75; animation: drift 9s ease-in-out infinite alternate; }
.decor-ufo { opacity: 0.9; animation: ufo 6s ease-in-out infinite alternate; }
.decor-satellite { animation-duration: 14s; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(14px, -10px) rotate(25deg); } }
@keyframes ufo { 0% { transform: translate(-20px, 0); } 50% { transform: translate(0, -8px); } 100% { transform: translate(24px, 4px); } }

/* ---------------------------------------------------------------- share */

.btn.share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 20px; padding: 12px 16px 13px; background: linear-gradient(180deg, #7ad8ff, #2f8fd8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 6px 0 #1a4f8a, 0 10px 20px rgba(60, 160, 255, 0.35); }
.btn.share:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #1a4f8a; }
.btn.share svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.share.is-hot { animation: share-pulse 1s ease-in-out infinite; }
@keyframes share-pulse { 50% { transform: scale(1.04); filter: brightness(1.15); } }

/* ---------------------------------------------------------------- daily planet */

.map-foot { flex-direction: column; align-items: center; gap: 10px; }
.daily-btn { display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 6px 16px 6px 8px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; background: linear-gradient(180deg, #4b2a86, #2b1554); box-shadow: inset 0 0 0 2px rgba(255, 106, 216, 0.45), 0 4px 0 #170a30; }
.daily-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 106, 216, 0.45); }
.daily-btn img { width: 40px; height: 40px; image-rendering: pixelated; animation: spin-slow 12s linear infinite; }
.daily-btn span { display: flex; flex-direction: column; }
.daily-btn b { font: 19px/1.1 var(--display); font-weight: normal; color: #ff9ae6; }
.daily-btn em { font: 800 12px/1.2 var(--body); font-style: normal; color: var(--muted); }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.daily-card { width: min(420px, 100%); }
.daily-planet { width: 88px; height: 88px; image-rendering: pixelated; margin: -4px 0; filter: drop-shadow(0 0 18px rgba(255, 106, 216, 0.5)); }
.board { width: 100%; max-height: min(38vh, 320px); overflow-y: auto; border-radius: 12px; background: rgba(0, 0, 0, 0.25); padding: 4px 0; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 12px; font: 800 14px/1.2 var(--body); text-align: left; }
.board li:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.board li.me { background: rgba(255, 210, 74, 0.18); color: var(--gold); }
.board li i { font-style: normal; color: var(--dim); }
.board li:nth-child(-n+3) i { color: var(--gold); }
.board li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li b { font: 17px/1 var(--display); font-weight: normal; color: var(--magma); }
.board .fine { padding: 14px; }

/* ---------------------------------------------------------------- profile */

.profile-card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; align-items: stretch; text-align: left; }
.profile-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; }
.profile-close svg { stroke-width: 2.6; }
.profile-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.profile-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff9a6a, var(--magma) 55%, var(--magma-deep)); box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(255, 150, 60, 0.5); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar i { font: 36px/1 var(--display); font-style: normal; color: #fff; text-shadow: var(--outline); }
.profile-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-who h2 { font-size: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: inherit; transition: width 0.6s ease; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); text-align: center; }
.profile-stats b { font: 22px/1 var(--display); font-weight: normal; color: var(--gold); }
.profile-stats span { font: 800 10px/1.2 var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.profile-section { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.profile-section h3 { margin: 0; font: 20px/1 var(--display); font-weight: normal; }
.profile-planets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.profile-planets figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); }
.profile-planets img { width: 44px; height: 44px; image-rendering: pixelated; filter: grayscale(1) brightness(0.45); }
.profile-planets figcaption { font: 800 10px/1.1 var(--body); color: var(--dim); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-planets .is-done { background: rgba(255, 90, 44, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 90, 44, 0.5); }
.profile-planets .is-done img { filter: none; }
.profile-planets .is-done figcaption { color: var(--ink); }
.profile-planets .is-done figcaption::before { content: "✕ "; color: var(--magma); }
.profile-daily { color: var(--ink); }
.profile-card > .btn { margin-top: 6px; font-size: 19px; padding: 13px 16px 14px; }
@media (max-width: 380px) { .profile-planets { grid-template-columns: repeat(3, 1fr); } .profile-stats b { font-size: 19px; } }

/* ---------------------------------------------------------------- share preview */

.share-modal { z-index: 7; }
.share-card { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.share-card h2 { font-size: 32px; }
.share-img { width: 100%; aspect-ratio: 1; border-radius: 16px; background: #0b0618; box-shadow: 0 0 0 3px var(--panel-edge), 0 12px 30px rgba(0, 0, 0, 0.5); animation: pop-in 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.share-text { user-select: text; -webkit-user-select: text; }
.share-card .stack .btn { font-size: 20px; padding: 13px 16px 14px; }
@media (max-height: 700px) { .share-img { width: min(100%, 52dvh); align-self: center; } }

/* ---------------------------------------------------------------- night view */

.hud-right { display: flex; gap: 8px; }
.icon-btn.night svg { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.icon-btn.night.is-on { background: linear-gradient(180deg, #ffe08a, #ffb020); box-shadow: 0 0 16px rgba(255, 200, 80, 0.7); }
.icon-btn.night.is-on svg { fill: #3a1d05; stroke: #3a1d05; }

/* The map scrolls under both bars; the bars float on top with no backdrop. */
.map-scroll { position: absolute; inset: 0; }
.map-bar { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.map-foot { position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; }
.map-bar > *, .map-foot > * { pointer-events: auto; }

/* ---------------------------------------------------------------- shop, coins, leaderboard */

.coin-ico { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -3px; margin: 0 2px; }
.coin-chip { cursor: pointer; }
.coin-chip img { width: 22px; height: 22px; image-rendering: pixelated; }
.art-btn { padding: 4px; }
.art-btn img { width: 100%; height: 100%; image-rendering: pixelated; }
.map-bar #shopBtn { margin-left: auto; }
.map-bar .mute { margin-left: 0; }

.tabs { display: flex; gap: 4px; width: 100%; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); }
.tabs button { flex: 1; border: 0; border-radius: 10px; padding: 8px 4px; background: none; color: var(--muted); font: 800 13px/1 var(--body); cursor: pointer; }
.tabs button.is-on { background: var(--panel-edge); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

.shop-card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.shop-head { display: flex; align-items: center; gap: 10px; width: 100%; padding-right: 40px; }
.shop-head img { width: 44px; height: 44px; image-rendering: pixelated; }
.shop-head h2 { font-size: 32px; }
.shop-coins { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font: 20px/1 var(--display); color: var(--gold); }
.shop-coins .coin-ico { width: 24px; height: 24px; }
.shop-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.shop-list li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); text-align: left; }
.shop-list li > img { flex: none; width: 44px; height: 44px; image-rendering: pixelated; object-fit: cover; object-position: left; }
.shop-list li > img.big { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(255, 150, 60, 0.7)); }
.shop-list li > img.sheet { object-fit: none; object-position: -256px 0; width: 44px; height: 44px; transform: scale(0.7); }
.shop-list li div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shop-list li b { font: 17px/1.1 var(--display); font-weight: normal; }
.shop-list li b em { font: 800 13px/1 var(--body); font-style: normal; color: var(--gold); }
.shop-list li span { font: 800 12px/1.3 var(--body); color: var(--muted); }
.pips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.pips i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 210, 74, 0.7); }
.trail-swatch { flex: none; width: 44px; height: 14px; border-radius: 999px; box-shadow: 0 0 12px rgba(255, 255, 255, 0.25); }
.buy { flex: none; display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 12px; padding: 9px 11px; cursor: pointer; font: 16px/1 var(--display); color: #2a1300; background: linear-gradient(180deg, #ffe08a, #ffb020); box-shadow: 0 3px 0 #a3600a; }
.buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #a3600a; }
.buy.ghost { color: var(--ink); background: var(--panel-edge); box-shadow: 0 3px 0 #1a0d31; }
.buy:disabled { cursor: default; opacity: 0.5; filter: grayscale(0.6); transform: none; }
.buy .coin-ico { width: 16px; height: 16px; }

.coins-won { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; width: 100%; padding: 8px 10px; border-radius: 14px; background: rgba(255, 210, 74, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.4); animation: pop-in 0.5s 0.6s both cubic-bezier(0.3, 1.6, 0.5, 1); }
.coins-won .coin-ico { width: 26px; height: 26px; }
.coins-won b { font: 24px/1 var(--display); font-weight: normal; color: var(--gold); }
.coins-won span { font: 800 12px/1.2 var(--body); color: var(--muted); }

.boosts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%; }
.boost-label { width: 100%; font: 800 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.boost { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 12px; padding: 6px 10px 6px 6px; cursor: pointer; background: rgba(0, 0, 0, 0.3); color: var(--ink); font: 800 13px/1 var(--body); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.boost img { width: 26px; height: 26px; image-rendering: pixelated; }
.boost em { font-style: normal; color: var(--dim); }
.boost.is-on { background: rgba(141, 255, 106, 0.18); box-shadow: inset 0 0 0 2px var(--toxic), 0 0 12px rgba(141, 255, 106, 0.4); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--gold); font: 800 14px/1 var(--body); cursor: pointer; padding: 4px 8px; }
.link-btn img { width: 22px; height: 22px; image-rendering: pixelated; }
.board small { color: var(--dim); font-size: 11px; }
@media (max-width: 380px) { .map-bar { gap: 6px; } .map-bar .chip { padding-left: 8px; padding-right: 8px; } .chip.account span { display: none; } }
.daily-card { position: relative; }