:root {
  --fg: #f3f1fa;
  --fg-2: #a9a5b8;
  --fg-3: #6a6679;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --vio: #a78bfa;
  --ember: #ff6d2b;
  --glass: rgba(6, 5, 10, .62);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --gut: clamp(16px, 2.6vw, 32px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #000; color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.ember { color: var(--ember); }

.hud { position: fixed; z-index: 5; pointer-events: none; }
.hud a, .hud button { pointer-events: auto; }
.top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(var(--gut) + env(safe-area-inset-top)) var(--gut) 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .18em; font-size: 13px; }
.brand img { width: 26px; height: 26px; border-radius: 50%; }
.burn { text-align: right; }
.burn b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(22px, 3vw, 34px); font-weight: 500; letter-spacing: .02em; margin-top: 2px; text-shadow: 0 0 24px rgba(255, 109, 43, .35); }

.stats { left: var(--gut); bottom: calc(var(--gut) + env(safe-area-inset-bottom)); display: flex; gap: clamp(18px, 3vw, 36px); }
.stats b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; margin-top: 3px; }

.burn b.hot { color: var(--ember); text-shadow: 0 0 28px rgba(255, 109, 43, .7); animation: throb 1s ease-in-out infinite; }
@keyframes throb { 50% { text-shadow: 0 0 10px rgba(255, 109, 43, .3); } }

.corner { position: fixed; right: var(--gut); bottom: calc(var(--gut) + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 14px; }
.credit { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: rgba(255, 255, 255, .22); }
#sound { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(4, 3, 8, .5); color: var(--fg-3); transition: color .2s, border-color .2s; }
#sound:hover { color: var(--fg); border-color: var(--line-2); }
#sound .w { display: none; }
#sound.on { color: var(--vio); border-color: rgba(167, 139, 250, .5); }
#sound.on .w { display: inline; }
#sound.on .x { display: none; }

/* Event labels */
#fx { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fxl { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: rgba(4, 3, 8, .55); border: 1px solid var(--line); color: var(--fg-2); will-change: transform, opacity; }
.fxl.arb { color: #c4b5fd; border-color: rgba(167, 139, 250, .35); }
.fxl.buy { color: #e9e2ff; }
.fxl.sell { color: #ff9aa8; border-color: rgba(255, 97, 128, .3); }

/* Burn overlay */
#burnfx { position: fixed; z-index: 7; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; }
#burnfx .label { color: var(--ember); letter-spacing: .4em; font-size: 11px; }
#burnfx b { display: block; margin-top: 8px; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: clamp(28px, 5vw, 64px); color: #ffd9c4; text-shadow: 0 0 30px rgba(255, 109, 43, .8), 0 0 80px rgba(255, 109, 43, .45); }
#burnfx.show { animation: burnin 6.2s ease forwards; }
@keyframes burnin { 0% { opacity: 0; transform: translateX(-50%) scale(.92); } 12% { opacity: 0; } 22% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1.04); } }

.replay { font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 109, 43, .4); color: var(--ember); transition: background .2s; }
.replay:hover { background: rgba(255, 109, 43, .1); }

/* Planet tags */
#tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(4, 3, 8, .5); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--mono); font-size: 11px; color: var(--fg-2); pointer-events: auto; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; will-change: transform, opacity; }
.tag img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.tag.hov, .tag.on { color: var(--fg); border-color: var(--line-2); background: rgba(10, 8, 18, .75); }
.tag.on { border-color: rgba(167, 139, 250, .6); }

/* Info panel */
#panel { position: fixed; z-index: 6; right: var(--gut); top: 50%; transform: translateY(-50%); width: min(340px, calc(100vw - 2 * var(--gut))); padding: 18px 18px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); animation: pin .35s cubic-bezier(.2, .8, .2, 1); }
#panel[hidden] { display: none; }
@keyframes pin { from { opacity: 0; transform: translateY(-50%) translateX(12px); } }
#close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--fg-3); }
#close:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.ph { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 24px; }
.coins { display: flex; flex: none; }
.coins img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #07060b; background: #07060b; }
.coins img + img { margin-left: -10px; }
.pt { font-weight: 600; font-size: 16px; letter-spacing: .01em; }
.ps { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.row span { color: var(--fg-2); }
.row b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.links a { font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--fg-2); transition: color .2s, border-color .2s; }
.links a:hover { color: var(--fg); border-color: var(--line-2); }

#loader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: #000; transition: opacity 1.2s ease; }
#loader .label { letter-spacing: .5em; animation: breathe 1.6s ease-in-out infinite; }
#loader.gone { opacity: 0; pointer-events: none; }
@keyframes breathe { 50% { opacity: .35; } }

@media (max-width: 640px) {
  #panel { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; transform: none; max-height: 55vh; overflow: auto; animation: pup .35s cubic-bezier(.2, .8, .2, 1); }
  @keyframes pup { from { opacity: 0; transform: translateY(12px); } }
  .stats { gap: 16px; }
  .credit { display: none; }
  .tag { font-size: 10px; }
}