:root {
  --ink: #fff0cb;
  --paper: #ffe7ad;
  --muted: #b58b78;
  --panel: #24131e;
  --line: #6f332d;
  --red: #ef4a2c;
  --red-hot: #ff6934;
  --red-deep: #a62e2a;
  --orange: #ffab38;
  --yellow: #ffd45c;
}

* { box-sizing: border-box; }
html { background: #100a13; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 52% 31%, rgba(137, 46, 26, 0.3), transparent 31rem),
    linear-gradient(110deg, #120b15 0%, #231118 48%, #110a13 100%);
  font-family: "Courier New", "PingFang SC", monospace;
  letter-spacing: 0;
}

button { font: inherit; }

.game-shell {
  width: min(1520px, calc(100% - 56px));
  margin: 0 auto;
  padding: 26px 0 15px;
}

.topbar,
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  padding: 0 2px 21px;
  border-bottom: 2px solid var(--red);
  box-shadow: 0 5px 0 rgba(113, 35, 31, 0.18);
}

.brand-lockup { display: flex; align-items: center; gap: 15px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  color: #2c101a;
  background: var(--orange);
  box-shadow: 4px 4px 0 var(--red-deep);
  font-size: 13px;
  font-weight: 900;
}

.eyebrow,
.hud-label,
.frame-topline,
.frame-bottomline,
.footer-bar,
.signal,
.mission-chip,
.restart-button,
.score-unit,
.meter-note,
.life-note,
.progress-meta,
.mission-reward,
.online-dot,
.play-caption,
.collect-item small {
  font-size: 10px;
  letter-spacing: 0.07em;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--orange);
  font-weight: 700;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin: 0;
  color: var(--paper);
  font-family: "Trebuchet MS", "PingFang SC", sans-serif;
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1;
  letter-spacing: 0.025em;
  text-shadow: 3px 3px 0 #7e2e2b;
}

h1 span { color: var(--red-hot); font-family: "Courier New", monospace; }
h1 b { color: var(--red-hot); font-weight: 900; }

.top-actions { display: flex; align-items: center; gap: 15px; }

.mission-chip,
.signal {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.mission-chip strong { color: var(--yellow); }
.chip-dot, .signal-dot, .frame-status i, .caption-center i, .online-dot::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 171, 56, 0.12);
}
.signal { color: #87c18e; }
.signal-dot { background: #87c18e; }

.restart-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #9b4335;
  color: var(--paper);
  background: #3a1e26;
  cursor: pointer;
  font-weight: 700;
}
.restart-button span:first-child { color: var(--orange); font-size: 18px; line-height: 12px; }
.restart-button:hover, .restart-button:focus-visible { border-color: var(--orange); background: #54222a; outline: none; }

.game-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 230px;
  gap: 17px;
  align-items: start;
  padding: 25px 0 17px;
}

.left-rail,
.right-rail { display: grid; gap: 13px; }

.hud-card,
.tip-card {
  border: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(64, 28, 31, 0.96), rgba(30, 17, 27, 0.98));
  box-shadow: 4px 4px 0 rgba(98, 31, 31, 0.35);
}

.score-block,
.life-block,
.dpad-card,
.mission-block,
.collection-block,
.status-block { padding: 16px; }

.hud-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d08669;
  font-weight: 700;
}
.label-line { width: 15px; height: 2px; background: var(--red-hot); }

.score-row { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 6px; }
.score-row strong {
  color: var(--paper);
  font-family: "Courier New", monospace;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 #8d382f;
}
.score-unit { color: var(--orange); font-weight: 700; }
.score-meter, .oxygen-meter, .progress-track { width: 100%; height: 6px; background: #512a32; }
.score-meter span, .oxygen-meter span, .progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow);
  transition: width 0.25s ease;
}
.meter-note, .progress-meta, .mission-reward, .life-note {
  display: flex;
  justify-content: space-between;
  color: #a37b6e;
  line-height: 23px;
}
#comboLabel, .mission-reward strong { color: var(--yellow); }

.life-block { border-top: 3px solid var(--red-hot); }
.life-row { display: flex; gap: 8px; margin: 13px 0 8px; }
.heart {
  color: var(--red-hot);
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  text-shadow: 2px 2px 0 #862b2c;
}
.heart.empty { color: #4c2732; text-shadow: none; }
.life-note { font-size: 9px; }
.life-note strong { color: var(--paper); font-size: 9px; }
.oxygen-meter { height: 4px; margin-top: 4px; }
.oxygen-meter span { width: 76%; background: var(--orange); }

.dpad-card { padding-bottom: 18px; }
.dpad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(3, 37px);
  justify-content: center;
  gap: 3px;
  margin: 14px auto 0;
}
.touch-key {
  border: 1px solid #b64736;
  border-bottom: 3px solid #7b2c2d;
  color: var(--paper);
  background: #5c232b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  touch-action: manipulation;
}
.touch-key:hover, .touch-key:focus-visible { border-color: var(--yellow); outline: none; }
.touch-key:active { color: #2c111a; background: var(--orange); transform: translateY(2px); }
.touch-up { grid-column: 2; grid-row: 1; }
.touch-left { grid-column: 1; grid-row: 2; }
.touch-down { grid-column: 2; grid-row: 3; }
.touch-right { grid-column: 3; grid-row: 2; }
.dpad-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  color: #5e2329;
  background: var(--red-hot);
  border: 2px solid #ff9a58;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tip-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-color: #8b5636;
  background: #3d2025;
}
.tip-spark { color: var(--yellow); font-size: 20px; }
.tip-card p { margin: 0; color: var(--paper); font-size: 10px; line-height: 1.6; }

.play-column { min-width: 0; }
.game-frame {
  padding: 11px;
  border: 1px solid #9e4938;
  background: #29151e;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.32), 0 0 0 5px rgba(86, 29, 31, 0.18);
}
.frame-topline, .frame-bottomline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #b27b6b;
  line-height: 24px;
}
.frame-topline b { color: var(--red-hot); }
.frame-status { color: #76ab80; }
.frame-status i { margin-right: 6px; width: 5px; height: 5px; background: #76ab80; }
.canvas-wrap { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background: #8e3d32; }
#gameCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
.canvas-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  color: var(--paper);
  background: rgba(25, 12, 20, 0.8);
  border: 1px solid rgba(255, 212, 92, 0.66);
  transform: translateX(-50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  font-size: 10px;
}
.canvas-hint.hidden { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid #8e564a;
  border-bottom-width: 2px;
  color: var(--paper);
  background: #3a2029;
  font-size: 9px;
  font-weight: 700;
}
.frame-bottomline { padding-top: 2px; }
#snackReadout { color: var(--yellow); }
.play-caption {
  display: flex;
  justify-content: space-between;
  padding: 10px 1px 0;
  color: #89605b;
}
.play-caption b { color: var(--orange); }
.caption-center { color: #b27d6a; }
.caption-center i { width: 5px; height: 5px; margin: 0 5px; background: #75a97c; }

.mission-block { border-top: 3px solid var(--orange); }
.mission-title-row { display: flex; align-items: center; gap: 9px; margin: 14px 0 8px; }
.mission-icon { display: grid; place-items: center; width: 26px; height: 26px; color: #2e141a; background: var(--yellow); font-size: 15px; }
h2 { margin-bottom: 0; color: var(--paper); font-family: "Trebuchet MS", "PingFang SC", sans-serif; font-size: 15px; }
.mission-block p { color: #b48c78; font-size: 10px; line-height: 1.65; }
.mission-progress { margin-top: 14px; }
.progress-meta { color: #9c7166; }
.progress-meta strong { color: var(--paper); font-size: 10px; }
.progress-track { height: 7px; margin-top: 4px; }
.progress-track span { background: var(--red-hot); }
.mission-reward { margin-top: 8px; }
.mission-reward strong { font-size: 10px; }

.collection-block { padding-top: 15px; }
.collect-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  border-bottom: 1px solid rgba(111, 51, 45, 0.6);
}
.collect-item:last-child { border-bottom: 0; }
.collect-art { display: grid; place-items: center; width: 29px; height: 29px; font-size: 20px; }
.snack-art { color: var(--yellow); background: #75412c; transform: rotate(-30deg); }
.crystal-art { color: #4fd5f4; background: #183746; }
.rover-art { color: var(--paper); background: #4f3231; font-size: 16px; }
.collect-item strong { display: block; color: var(--paper); font-size: 9px; }
.collect-item small { display: block; margin-top: 3px; color: #987467; font-size: 8px; letter-spacing: 0; }
.collect-item > b { color: var(--orange); font-size: 9px; }

.status-block { padding-top: 15px; }
.status-row { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: var(--paper); font-size: 9px; }
.status-row:first-of-type { margin-top: 8px; }
.status-row.muted { color: #9a7267; }
.status-cat { display: flex; align-items: center; gap: 7px; }
.cat-face { display: inline-grid; place-items: center; width: 19px; height: 19px; color: #2b131a; background: var(--red-hot); font-size: 13px; }
.online-dot { display: flex; align-items: center; gap: 6px; color: #82bd87; }
.online-dot::before { width: 5px; height: 5px; background: #82bd87; }
.mood-value { color: var(--yellow); }

.footer-bar { padding: 7px 2px 0; color: #745455; }
.footer-center { color: #a27168; }

@media (max-width: 1080px) {
  .game-shell { width: min(920px, calc(100% - 32px)); }
  .game-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .right-rail { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; }
  .tip-card { display: none; }
}

@media (max-width: 700px) {
  .game-shell { width: calc(100% - 18px); padding-top: 15px; }
  .topbar { align-items: flex-start; padding-bottom: 16px; }
  .top-actions { gap: 0; }
  .mission-chip, .signal { display: none; }
  .restart-button { padding: 8px 9px; font-size: 9px; }
  .brand-lockup { gap: 10px; }
  .brand-mark { width: 35px; height: 35px; box-shadow: 3px 3px 0 var(--red-deep); font-size: 10px; }
  .eyebrow { margin-bottom: 5px; font-size: 7px; }
  h1 { font-size: 21px; line-height: 1.15; }
  h1 b { display: block; font-size: 18px; }
  .game-layout { display: flex; flex-direction: column; gap: 13px; padding-top: 17px; }
  .play-column { order: 1; width: 100%; }
  .left-rail { order: 2; width: 100%; grid-template-columns: 1fr 1fr; }
  .right-rail { order: 3; width: 100%; display: grid; grid-template-columns: 1fr; }
  .score-block, .life-block { min-height: 112px; }
  .dpad-card { grid-column: 1 / -1; }
  .dpad { margin-top: 10px; }
  .frame-topline, .frame-bottomline, .play-caption { font-size: 8px; }
  .frame-bottomline span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .canvas-hint { bottom: 9px; max-width: calc(100% - 16px); font-size: 8px; }
  .play-caption { flex-wrap: wrap; gap: 7px; }
  .caption-center { order: 3; width: 100%; text-align: center; }
  .footer-bar { flex-wrap: wrap; gap: 5px 12px; font-size: 8px; }
  .footer-center { order: 3; width: 100%; text-align: center; }
}

/* Mars Cat token landing layer */
.site-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,calc((100% - 1380px)/2));background:rgba(16,7,12,.9);border-bottom:1px solid #5c2425;backdrop-filter:blur(14px)}.nav-brand{display:flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none;font:800 18px "Trebuchet MS",sans-serif}.nav-brand img{width:42px;height:42px;object-fit:contain}.nav-brand small{display:block;color:var(--orange);font:700 9px "Courier New",monospace;letter-spacing:.15em}.site-nav nav{display:flex;gap:28px}.site-nav nav a,footer{color:#b88a78;text-decoration:none;font:700 11px "Courier New",monospace;letter-spacing:.1em}.site-nav nav a:hover{color:var(--yellow)}.nav-cta,.button{display:inline-block;text-decoration:none;font:800 11px "Courier New",monospace;letter-spacing:.08em}.nav-cta{padding:11px 15px;color:#2a1017;background:var(--orange)}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:650px;max-width:1380px;margin:auto;padding:90px 40px 50px;align-items:center}.kicker{margin:0 0 13px;color:var(--orange);font:700 10px "Courier New",monospace;letter-spacing:.18em}.hero h1{font-size:clamp(50px,7vw,102px);line-height:.9;margin-bottom:28px}.hero h1 em{color:var(--red-hot);font-style:normal}.hero-lede{max-width:560px;color:#c49683;font:16px/1.7 "Trebuchet MS",sans-serif}.hero-actions{display:flex;gap:12px;margin:30px 0}.button{padding:14px 20px}.button-hot{color:#2b1018;background:var(--orange);border:1px solid var(--orange)}.button-ghost{color:var(--paper);border:1px solid #9d4a3b;background:#28151e}.contract{display:flex;align-items:center;gap:12px;color:#9d7166;font:10px "Courier New",monospace}.contract code{color:var(--yellow)}.contract button{border:1px solid #6d342f;color:var(--paper);background:transparent;padding:5px 8px;font:10px "Courier New",monospace}.hero-art{position:relative;display:grid;place-items:center;min-height:490px;background:radial-gradient(circle,rgba(199,53,31,.32),transparent 58%)}.hero-art>img{position:relative;z-index:2;width:min(430px,78%);filter:drop-shadow(0 20px 20px rgba(0,0,0,.45));animation:float 5s ease-in-out infinite}.orbit{position:absolute;border:1px solid rgba(255,171,56,.35);border-radius:50%;transform:rotate(-18deg)}.orbit-a{width:440px;height:170px}.orbit-b{width:520px;height:220px;transform:rotate(25deg)}.art-tag{position:absolute;right:7%;bottom:12%;z-index:3;padding:9px 12px;color:var(--yellow);background:#25131b;border:1px solid #9d4a3b;font:10px/1.5 "Courier New",monospace;letter-spacing:.1em}.art-tag b{color:var(--paper)}@keyframes float{50%{transform:translateY(-10px)}}.ticker{display:flex;justify-content:space-around;overflow:hidden;padding:13px;background:var(--red);color:#250e14;font:800 10px "Courier New",monospace;letter-spacing:.12em}.stats{display:grid;grid-template-columns:repeat(5,1fr);max-width:1380px;margin:auto;border-left:1px solid #5c292a}.stats div{padding:20px 24px;border-right:1px solid #5c292a}.stats span{display:block;color:#a47768;font:10px "Courier New",monospace}.stats strong{display:block;margin-top:8px;color:var(--paper);font:800 18px "Trebuchet MS",sans-serif}.section{max-width:1380px;margin:auto;padding:100px 40px 20px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-heading h2,.join h2{margin:0;color:var(--paper);font:800 clamp(30px,4vw,54px) "Trebuchet MS",sans-serif}.section-heading>p{color:#a97b6d;font:14px/1.6 "Trebuchet MS",sans-serif}.game-layout{padding-top:0}.token-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.token-card{min-height:230px;padding:28px;border:1px solid #6f332d;background:linear-gradient(140deg,#3a1d26,#1d1018)}.token-card.featured{border-top:3px solid var(--orange)}.card-index{color:var(--orange);font:11px "Courier New",monospace}.token-card h3{color:var(--paper);font:800 23px "Trebuchet MS",sans-serif}.token-card p{color:#b58b78;line-height:1.7}.mini-bar,.token-stat{margin-top:28px;color:#a97a6c;font:10px "Courier New",monospace}.mini-bar{height:6px;background:#5a2930}.mini-bar i{display:block;height:100%;background:var(--yellow)}.token-card small{display:flex;justify-content:space-between;margin-top:8px;color:#a97a6c;font:10px "Courier New",monospace}.token-card small b,.token-stat b{color:var(--yellow);float:right}.roadmap-track{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #7c3933}.road-step{position:relative;padding:28px 18px;border-right:1px solid #54272b}.road-step:before{content:"";position:absolute;top:-5px;left:18px;width:9px;height:9px;background:#54272b;border:2px solid #1a0d13}.road-step.done:before,.road-step.active:before{background:var(--orange)}.road-step span{color:#a97a6c;font:11px "Courier New",monospace}.road-step b{display:block;margin:18px 0 8px;color:var(--paper);font:800 20px "Trebuchet MS",sans-serif}.road-step p{color:#a97a6c;font:12px/1.6 "Courier New",monospace}.join{display:flex;justify-content:space-between;align-items:center;max-width:1380px;margin:100px auto 30px;padding:46px 40px;border:1px solid #a64a35;background:linear-gradient(110deg,#5a2328,#25121b)}.join p{color:#d09a7b}.join-actions{display:flex;gap:10px}footer{display:flex;justify-content:space-between;max-width:1380px;margin:auto;padding:30px 40px;border-top:1px solid #52262a}
@media(max-width:800px){.site-nav nav{display:none}.hero{grid-template-columns:1fr;padding:60px 20px 30px}.hero-art{min-height:360px}.stats{grid-template-columns:repeat(2,1fr)}.stats div:last-child{grid-column:span 2}.section{padding:65px 18px 15px}.section-heading{display:block}.section-heading>p{margin-top:14px}.token-grid,.roadmap-track{grid-template-columns:1fr}.join{display:block;margin:65px 18px 25px;padding:30px 22px}.join-actions{margin-top:25px;flex-wrap:wrap}footer{padding:24px 18px;display:block;line-height:2}.game-layout{display:flex}.left-rail,.right-rail{width:100%}}