:root {
  --night: #070616;
  --night-2: #0d0924;
  --violet: #26124e;
  --violet-bright: #6e3ed7;
  --gold: #f7c95d;
  --gold-light: #ffe9a9;
  --gold-dark: #9b5c17;
  --ruby: #f0447a;
  --cyan: #48dce9;
  --paper: #fff7df;
  --muted: #aaa0bd;
  --line: rgba(247, 201, 93, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--paper);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sky-noise {
  position: fixed;
  inset: 0;
  opacity: .075;
  pointer-events: none;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.ember-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ember {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
  animation: rise var(--duration) linear infinite;
  animation-delay: var(--delay);
  opacity: 0;
}
@keyframes rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--drift), -105vh, 0); }
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 76px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(4,3,14,.82), rgba(4,3,14,.08));
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(247,201,93,.65);
  box-shadow: 0 0 24px rgba(247,201,93,.16);
}
.brand span { display: grid; gap: 2px; }
.brand b { font-family: 'Cinzel', serif; color: var(--gold-light); font-size: 14px; letter-spacing: .12em; }
.brand small { color: #8f86a4; font: 500 9px/1 'DM Mono', monospace; letter-spacing: .16em; }
nav { display: flex; align-items: center; gap: 34px; }
nav a { color: #bbb2cb; font: 600 11px/1 'DM Mono', monospace; letter-spacing: .12em; transition: color .2s; }
nav a:hover { color: var(--gold); }
.chain-pill {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(7,6,22,.58);
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--gold-light);
  font: 500 10px/1 'DM Mono', monospace;
}
.chain-pill i, .live-dot i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}

.arena { min-height: 1120px; position: relative; isolation: isolate; overflow: hidden; }
.arena-art {
  position: absolute;
  inset: 0;
  background: url('/assets/countdown-crown-hero.png') center top / cover no-repeat;
  filter: saturate(.96) contrast(1.05);
  transform: scale(1.015);
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe { to { transform: scale(1.045); } }
.arena-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,3,15,.22) 0%, rgba(4,3,15,.03) 28%, rgba(7,6,22,.68) 78%, var(--night) 100%),
    radial-gradient(circle at 50% 45%, rgba(16,9,37,.05) 0 20%, rgba(4,3,15,.7) 78%);
}
.arena-content {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 126px 0 72px;
  text-align: center;
}
.eyebrow {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  color: var(--gold); font: 600 10px/1 'DM Mono', monospace; letter-spacing: .22em;
}
.eyebrow span { width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow span:last-child { transform: scaleX(-1); }
h1 {
  margin: 18px 0 -6px;
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 6.2vw, 82px);
  line-height: .91;
  letter-spacing: -.045em;
  text-shadow: 0 8px 30px rgba(0,0,0,.7);
}
h1 em { color: var(--gold-light); font-style: normal; font-size: .82em; }
.crown-stage {
  width: min(640px, 90vw);
  height: 500px;
  margin: -10px auto -30px;
  position: relative;
  display: grid;
  place-items: center;
}
.hero-crown {
  position: absolute;
  z-index: 3;
  width: min(520px, 83vw);
  filter: drop-shadow(0 26px 24px rgba(0,0,0,.58)) drop-shadow(0 0 42px rgba(247,201,93,.2));
  animation: crownFloat 4.8s ease-in-out infinite;
}
@keyframes crownFloat { 50% { transform: translateY(-11px) rotate(.6deg); } }
.orbit {
  position: absolute;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(247,201,93,.26);
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(110,62,215,.18), 0 0 40px rgba(247,201,93,.08);
}
.orbit::before, .orbit::after {
  content: '';
  position: absolute;
  left: 50%; top: -5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 16px var(--cyan);
}
.orbit::after { top: auto; bottom: -5px; background: var(--ruby); box-shadow: 0 0 16px var(--ruby); }
.orbit-one { animation: spin 18s linear infinite; }
.orbit-two { width: 350px; height: 350px; border-style: dashed; animation: spin 13s linear infinite reverse; opacity: .55; }
@keyframes spin { to { transform: rotate(360deg); } }
.timer-wrap {
  position: absolute;
  z-index: 5;
  top: 228px;
  display: grid;
  justify-items: center;
  text-shadow: 0 4px 18px #070616;
}
.timer-label { color: var(--gold-light); font: 600 9px/1 'DM Mono', monospace; letter-spacing: .16em; }
.timer {
  color: #fff8de;
  font: 500 clamp(58px, 8vw, 96px)/.95 'DM Mono', monospace;
  letter-spacing: -.09em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 18px rgba(247,201,93,.42));
}
.timer.danger { color: #ffd1d7; animation: pulseDanger .72s ease-in-out infinite alternate; }
@keyframes pulseDanger { to { transform: scale(1.035); filter: drop-shadow(0 0 24px var(--ruby)); } }
.timer-sub { color: #b8aec8; font: 500 9px/1 'DM Mono', monospace; letter-spacing: .08em; margin-top: 5px; }
.arena-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(820px, 100%); margin: 0 auto; }
.stat-card {
  text-align: left;
  min-height: 150px;
  padding: 23px 26px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16,10,38,.9), rgba(7,6,22,.78));
  border: 1px solid var(--line);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.stat-card::before { content:''; position:absolute; width:130px; height:130px; right:-46px; top:-48px; border:1px solid rgba(247,201,93,.15); border-radius:50%; }
.card-kicker { display:block; color: var(--gold); font: 600 9px/1 'DM Mono', monospace; letter-spacing:.18em; margin-bottom:10px; }
.stat-card strong { display:block; color:var(--gold-light); font:700 clamp(28px,4vw,42px)/1 'Cinzel',serif; }
.stat-card strong small { color:#978dac; font:500 13px/1 'DM Mono',monospace; }
.stat-card p { color:#91879e; font-size:12px; line-height:1.5; margin:12px 0 0; }
.vault-line { height:2px; background:#241638; margin-top:16px; overflow:hidden; }
.vault-line i { display:block; width:60%; height:100%; background:linear-gradient(90deg,var(--violet-bright),var(--gold)); animation:vaultGlow 3s ease-in-out infinite alternate; }
@keyframes vaultGlow { to { width:95%; } }
.wallet-link { display:block; color:#fff5d0; font:500 20px/1.2 'DM Mono',monospace; margin:12px 0 4px; word-break:break-all; }
.wallet-link:not(.disabled):hover { color:var(--cyan); }
.status-badge { position:absolute; right:22px; bottom:20px; color:#777087; font:600 8px/1 'DM Mono',monospace; letter-spacing:.12em; }
.status-badge.live { color:var(--cyan); }
.contract-bar {
  width:min(820px,100%); margin:14px auto 0; padding:12px 14px 12px 18px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  border:1px solid rgba(247,201,93,.15); background:rgba(5,4,17,.72); border-radius:4px;
}
.contract-bar span { color:#827a90; font:600 8px/1 'DM Mono',monospace; letter-spacing:.14em; }
.contract-bar code { overflow:hidden; text-overflow:ellipsis; color:#b7adbf; font:400 11px/1 'DM Mono',monospace; }
.contract-bar button { border:1px solid var(--line); background:#17102b; color:var(--gold); padding:8px 12px; cursor:pointer; font:600 9px/1 'DM Mono',monospace; }
.contract-bar button:disabled { opacity:.35; cursor:not-allowed; }
.truth-line { color:#92899e; font:400 11px/1.5 'DM Mono',monospace; margin:14px auto 0; max-width:720px; }
.scroll-cue { display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:38px; color:#90879e; font:600 8px/1 'DM Mono',monospace; letter-spacing:.18em; }
.scroll-cue span { color:var(--gold); font-size:19px; animation:nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateY(5px); } }

.rules-section, .chronicle { position:relative; z-index:3; padding:110px clamp(20px,6vw,90px); }
.rules-section { background:radial-gradient(circle at 50% 20%, #1a0d39 0, var(--night) 53%); }
.section-heading { text-align:center; max-width:800px; margin:0 auto 54px; }
.section-heading.left { text-align:left; margin:0 0 44px; }
.chapter { color:var(--gold); font:600 9px/1 'DM Mono',monospace; letter-spacing:.25em; }
.section-heading h2 { margin:13px 0 14px; font:800 clamp(35px,5vw,60px)/.98 'Cinzel',serif; letter-spacing:-.035em; }
.section-heading p { margin:0; color:#8f869d; font-size:15px; }
.rules-grid { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.rule-card {
  min-height:350px; position:relative; padding:38px 30px 30px; overflow:hidden;
  background:linear-gradient(150deg,rgba(24,14,50,.85),rgba(8,6,23,.9)); border:1px solid var(--line);
}
.rule-card.featured { transform:translateY(-14px); border-color:rgba(247,201,93,.45); box-shadow:0 24px 70px rgba(0,0,0,.35), inset 0 0 55px rgba(110,62,215,.12); }
.rule-number { position:absolute; right:20px; top:12px; color:rgba(247,201,93,.08); font:900 112px/1 'Cinzel',serif; }
.rule-icon { width:70px; height:70px; display:grid; place-items:center; border:1px solid var(--line); transform:rotate(45deg); color:var(--gold); font-size:31px; margin:20px 0 55px 10px; background:#100a26; }
.rule-icon::first-letter { transform:rotate(-45deg); }
.rule-card h3 { margin:0 0 12px; color:var(--gold-light); font:800 23px/1 'Cinzel',serif; }
.rule-card p { margin:0; color:#9c92aa; font-size:13px; line-height:1.7; }
.mechanism-note { max-width:1120px; margin:34px auto 0; display:grid; grid-template-columns:170px 1fr; gap:30px; align-items:center; padding:25px 30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mechanism-note span { color:var(--cyan); font:600 9px/1 'DM Mono',monospace; letter-spacing:.2em; }
.mechanism-note p { margin:0; color:#8f879a; font:400 12px/1.7 'DM Mono',monospace; }

.chronicle { background:linear-gradient(180deg,var(--night),#0b081e); }
.chronicle-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ledger-panel { min-width:0; background:#0e0a23; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.2); }
.ledger-panel > header { display:flex; align-items:center; justify-content:space-between; padding:21px 24px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.ledger-panel header span { color:#857c92; font:600 8px/1 'DM Mono',monospace; letter-spacing:.18em; }
.ledger-panel h3 { margin:5px 0 0; color:var(--gold-light); font:700 17px/1 'Cinzel',serif; }
.ledger-panel header b { color:var(--gold); font:600 9px/1 'DM Mono',monospace; letter-spacing:.12em; }
.live-dot { display:flex; align-items:center; gap:7px; }
.ledger-list { min-height:290px; max-height:480px; overflow:auto; }
.ledger-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:17px 21px; border-bottom:1px solid rgba(247,201,93,.09); }
.ledger-row:hover { background:rgba(110,62,215,.08); }
.row-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); color:var(--gold); border-radius:50%; background:#16102d; }
.row-main { min-width:0; display:grid; gap:4px; }
.row-main a, .row-main b { color:#dfd5e8; font:500 11px/1.2 'DM Mono',monospace; overflow:hidden; text-overflow:ellipsis; }
.row-main a:hover { color:var(--cyan); }
.row-main span { color:#756e80; font:400 9px/1.2 'DM Mono',monospace; }
.row-value { text-align:right; color:var(--gold-light); font:600 10px/1.4 'DM Mono',monospace; }
.empty-state { min-height:290px; display:grid; place-content:center; justify-items:center; gap:12px; color:#746d7d; font:400 11px/1.5 'DM Mono',monospace; text-align:center; padding:30px; }
.empty-state span { color:var(--gold-dark); font-size:34px; }

.final-banner { position:relative; z-index:3; margin:0 clamp(20px,6vw,90px) 70px; padding:34px 40px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; background:linear-gradient(110deg,#28134f,#120b2e); border:1px solid rgba(247,201,93,.32); overflow:hidden; }
.final-banner::after { content:''; position:absolute; width:400px; height:400px; border:1px solid rgba(247,201,93,.1); border-radius:50%; right:-180px; top:-160px; }
.final-banner img { width:86px; height:86px; border-radius:50%; border:2px solid var(--gold); }
.final-banner span { color:var(--gold); font:600 9px/1 'DM Mono',monospace; letter-spacing:.2em; }
.final-banner h2 { margin:7px 0 0; font:800 clamp(24px,3vw,38px)/1 'Cinzel',serif; }
.final-banner a { position:relative; z-index:1; border:1px solid var(--gold); color:var(--gold-light); padding:14px 18px; font:600 9px/1 'DM Mono',monospace; letter-spacing:.12em; }
footer { position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.06); padding:30px clamp(20px,6vw,90px); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#6f6878; font:500 9px/1.4 'DM Mono',monospace; }
footer p { margin:0; text-align:center; }
footer a:hover { color:var(--gold); }

@media (max-width: 820px) {
  .topbar { height:72px; padding:0 17px; }
  .brand img { width:40px; height:40px; }
  .brand b { font-size:11px; }
  nav a { display:none; }
  .arena { min-height:1080px; }
  .arena-content { padding-top:108px; }
  .crown-stage { height:440px; margin-top:0; }
  .hero-crown { width:min(480px,98vw); }
  .orbit { width:340px;height:340px; }
  .orbit-two { width:290px;height:290px; }
  .timer-wrap { top:202px; }
  .arena-stats, .rules-grid, .chronicle-grid { grid-template-columns:1fr; }
  .rule-card.featured { transform:none; }
  .mechanism-note { grid-template-columns:1fr; gap:12px; }
  .final-banner { grid-template-columns:auto 1fr; padding:25px; }
  .final-banner a { grid-column:1/-1; text-align:center; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width: 520px) {
  .brand small { display:none; }
  .chain-pill { padding:9px 10px; font-size:8px; }
  .arena { min-height:1100px; }
  h1 { margin-top:15px; }
  .crown-stage { width:100%; height:410px; margin-top:8px; }
  .hero-crown { width:430px; max-width:112vw; }
  .orbit { width:300px;height:300px; }
  .orbit-two { width:250px;height:250px; }
  .timer-wrap { top:190px; }
  .timer { font-size:61px; }
  .arena-stats { gap:10px; }
  .stat-card { min-height:140px; padding:20px; }
  .contract-bar { grid-template-columns:1fr auto; }
  .contract-bar span { grid-column:1/-1; }
  .rules-section,.chronicle { padding:80px 18px; }
  .rule-card { min-height:310px; }
  .ledger-row { grid-template-columns:auto 1fr; }
  .row-value { grid-column:2; text-align:left; }
  .final-banner { margin:0 18px 50px; }
  .final-banner img { width:64px;height:64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; }
}