:root {
  --gold: #ffd23f;
  --dog-orange: #ff7a1a;
  --panel-bg: rgba(10, 12, 22, 0.72);
  --panel-border: rgba(255, 210, 63, 0.25);
  --text: #f2f4f8;
  --text-dim: #9aa3b8;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #04050a;
  overflow: hidden;
  color: var(--text);
}

#scene {
  position: fixed;
  inset: 0;
  display: block;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

#titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.15);
  /* backdrop-filter creates a stacking context, so without an explicit
     z-index here the buy dropdown (a descendant) can never paint above
     #mission-panel below it — that panel also uses backdrop-filter and
     comes later in the DOM, so it would otherwise win by default. */
  position: relative;
  z-index: 30;
}

#title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dog-emoji { font-size: 22px; }

#title h1 {
  font-size: 17px;
  margin: 0;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}

#title h1 em {
  font-style: normal;
  color: var(--gold);
  margin-left: 6px;
}

.bullet {
  color: var(--dog-orange);
  margin: 0 2px;
}

#status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.badge.live {
  background: rgba(63, 255, 143, 0.15);
  color: #6bffb0;
  border: 1px solid rgba(107, 255, 176, 0.4);
}

.badge.demo {
  background: rgba(255, 196, 63, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 210, 63, 0.4);
}

#buy-dog-link,
#connect-wallet-btn {
  pointer-events: auto;
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

#buy-dog-link {
  color: #04050a;
  background: linear-gradient(90deg, var(--gold), var(--dog-orange));
  border: none;
}

#buy-dog-link:hover {
  filter: brightness(1.08);
}

#connect-wallet-btn {
  color: var(--text);
  background: rgba(111, 201, 255, 0.12);
  border: 1px solid rgba(111, 201, 255, 0.4);
}

#connect-wallet-btn:hover {
  background: rgba(111, 201, 255, 0.2);
}

#connect-wallet-btn.connected {
  color: #6bffb0;
  background: rgba(63, 255, 143, 0.12);
  border-color: rgba(107, 255, 176, 0.4);
}

#connect-wallet-btn.error {
  color: #ff8f8f;
  background: rgba(255, 90, 90, 0.12);
  border-color: rgba(255, 120, 120, 0.4);
}

#buy-menu {
  position: relative;
  pointer-events: auto;
}

#buy-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(10, 12, 22, 0.97);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

#buy-menu.open #buy-dropdown {
  display: flex;
}

#buy-dropdown a,
#buy-dropdown button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 7px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

#buy-dropdown a:hover,
#buy-dropdown button:hover {
  background: rgba(255, 255, 255, 0.08);
}

#buy-dropdown strong {
  font-size: 12px;
  color: var(--gold);
}

#buy-dropdown span {
  font-size: 10.5px;
  color: var(--text-dim);
}

#buy-dropdown span.mono {
  font-family: Consolas, monospace;
}

#copy-sol-ca.copied strong {
  color: #6bffb0;
}

#mission-panel {
  margin-top: 10px;
  padding: 12px 20px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(120, 170, 255, 0.12);
  /* Positioned + z-index so this reliably paints above #cockpit-frame,
     which sits later in the DOM and would otherwise win by default. */
  position: relative;
  z-index: 10;
}

.mission-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 10px;
}

#mission-sparkline-stat {
  min-width: 100px;
}

#mission-sparkline {
  width: 110px;
  height: 28px;
}

#mission-sparkline polyline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

#mission-eta {
  font-size: 11px;
  color: var(--text-dim);
  margin: -2px 0 10px;
}

#mission-eta strong {
  color: var(--gold);
}

.mission-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mission-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.mission-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.mission-value.accent {
  color: var(--gold);
}

.mission-change {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mission-change.up { color: #6bffb0; }
.mission-change.down { color: #ff6b6b; }

#mission-bar-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#mission-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #6fc9ff, var(--gold));
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.6);
  transition: width 1.2s ease;
}

#mission-bar-label {
  position: relative;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 16px;
  font-weight: 800;
  color: #fff;
  mix-blend-mode: difference;
}

#leaderboard {
  position: absolute;
  top: 168px;
  left: 16px;
  width: 300px;
  max-height: calc(100vh - 198px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  padding: 12px 14px;
  overflow-y: auto;
  z-index: 10;
  pointer-events: auto;
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.1);
}

#leaderboard h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

#leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.holder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.holder-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.holder-row.focus {
  background: rgba(255, 210, 63, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.4);
}

.rank {
  width: 20px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.rank.p1 { color: var(--gold); font-weight: 800; }

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 0 6px currentColor;
}

.addr {
  flex: 1;
  font-family: "Consolas", monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bal {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

#wallet-panel {
  position: absolute;
  top: 168px;
  right: 16px;
  width: 240px;
  overflow-y: auto;
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  padding: 12px 14px;
  pointer-events: auto;
  box-shadow: 0 0 24px rgba(107, 255, 176, 0.1);
  z-index: 10;
}

#wallet-panel h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

#wallet-address {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.wallet-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#wallet-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

#share-card-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 210, 63, 0.4);
  background: rgba(255, 210, 63, 0.1);
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

#share-card-btn:hover {
  background: rgba(255, 210, 63, 0.18);
}

#username-form {
  margin-bottom: 10px;
  cursor: default;
}

#username-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

#username-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: rgba(4, 5, 10, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

#username-input:focus {
  outline: 1px solid rgba(111, 201, 255, 0.55);
}

#username-save-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(111, 201, 255, 0.4);
  background: rgba(111, 201, 255, 0.12);
  color: #9fd6ff;
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

#username-save-btn:hover {
  background: rgba(111, 201, 255, 0.22);
}

#username-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#username-status {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  min-height: 12px;
}

#username-status.error {
  color: #ff8080;
}

#username-status.success {
  color: #7cf29a;
}

#camera-hud {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 10;
}

#camera-ring {
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 3;
}

#ring-progress {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px var(--gold));
  transition: stroke-dashoffset 0.2s linear;
}

#camera-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--gold);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 3px 10px;
  border-radius: 999px;
}

#cockpit-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Explicitly below the HUD panels (z-index: 10) so it never paints over
     the leaderboard/wallet panel/mission bar where the corners or reticle
     happen to overlap them. */
  z-index: 1;
}

/* Fixed-pixel corner brackets, not viewport-relative — a stretched SVG
   viewBox here previously turned small corner wedges into huge diagonal
   lines across the whole page on wide/non-square viewports. */
.cockpit-corner {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(111, 201, 255, 0.4);
}

.cockpit-corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.cockpit-corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; }
.cockpit-corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.cockpit-corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

#loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #04050a;
  color: var(--text-dim);
  font-size: 14px;
  transition: opacity 0.6s ease;
  pointer-events: auto;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 210, 63, 0.2);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Width alone misses landscape phones — wide (>720px) but short enough
   that the desktop leaderboard's fixed top:168px + calc(100vh-198px)
   height math overlaps the mission panel instead of leaving it room. */
@media (max-width: 720px), (max-height: 480px) {
  #hud { padding: 10px; }

  /* Titlebar wraps to its own two rows instead of squeezing the title,
     Buy DOG, and Connect Xverse into one row that overflows the screen. */
  #titlebar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .dog-emoji { font-size: 18px; }
  #title h1 { font-size: 12px; letter-spacing: 0.04em; }

  #status {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Least essential titlebar item on a narrow screen — the leaderboard's
     own "Updated" timestamp still covers this. */
  #updated-at { display: none; }

  #buy-dropdown { width: min(260px, 80vw); }

  #mission-panel { padding: 10px 12px 12px; margin-top: 8px; }

  /* A 5-across flex row doesn't fit a phone width — 2-column grid instead. */
  .mission-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }

  .mission-value { font-size: 15px; }
  .mission-label { font-size: 9px; }

  /* The 3D scene is the actual point of the site — on a phone-height
     viewport the sparkline + ETA line ate most of what little vertical
     room was left for it once the HUD panels stack up, so they're dropped
     here in favor of the 4 core stats + progress bar. */
  #mission-sparkline-stat,
  #mission-eta {
    display: none;
  }

  /* The always-open 300px/240px side panels ate the entire screen on
     phones and fully hid the 3D scene (see the bug report screenshot).
     Anchored to the bottom, capped to well under half the viewport height,
     and split into two half-width columns so the scene stays visible and
     tappable above them. */
  #leaderboard,
  #wallet-panel {
    top: auto;
    bottom: 10px;
    width: calc(50% - 15px);
    max-height: 36vh;
    padding: 10px;
  }

  #leaderboard { left: 10px; }
  #wallet-panel { right: 10px; }

  /* Before connecting (or on browsers without :has() support) the wallet
     panel is hidden, so let the leaderboard reclaim the full width. */
  body:has(#wallet-panel[hidden]) #leaderboard {
    width: calc(100% - 20px);
  }

  #leaderboard h2,
  #wallet-panel h2 {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .holder-row { font-size: 11px; padding: 7px 6px; }
  .bal { font-size: 10px; }
  #wallet-address { font-size: 10px; }

  /* Below 16px, iOS Safari zooms the whole page in on focus — keep this
     at 16px so tapping the username field doesn't yank the viewport. */
  #username-input { font-size: 16px; }

  /* The mission panel's height varies with text wrapping (e.g. narrower
     screens wrap "41.6% of 85,823" to 2 lines), so no fixed offset for
     this secondary indicator reliably clears it without also colliding
     with the leaderboard on the shortest landscape-phone viewports.
     It's not essential info on mobile — the cockpit frame already cues
     the camera mode visually — so it's simplest to just hide it here. */
  #camera-hud { display: none; }
  #camera-ring { width: 40px; height: 40px; }
  #camera-label { font-size: 9px; padding: 2px 8px; }

  .cockpit-corner { width: 36px; height: 36px; }
  .cockpit-corner.tl, .cockpit-corner.tr { top: 12px; }
  .cockpit-corner.bl, .cockpit-corner.br { bottom: 12px; }
  .cockpit-corner.tl, .cockpit-corner.bl { left: 12px; }
  .cockpit-corner.tr, .cockpit-corner.br { right: 12px; }
}

@media (max-width: 420px) {
  #title h1 { font-size: 10.5px; }
  #leaderboard, #wallet-panel { max-height: 30vh; font-size: 10px; }
}