:root {
  --night: #1A2148; --night2: #11152E; --panel-a: #33407F; --panel-b: #232C5C; --ink: #1A1410; --parch: #FFF3D6; --parch-ink: #4A3C2A;
  --gold-a: #FFE27A; --gold-b: #E09A12; --gold: #F2B830; --yellow: #FFD84D; --ember: #FF6B2C; --mist: #C9D0F5; --cream: #FFF6E0; --green: #6EDB3A;
  --display: 'Lilita One', 'Arial Black', sans-serif; --body: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { margin: 0; min-height: 100vh; background: radial-gradient(140% 70% at 50% 0%, #34458A 0%, #1A2148 55%, #11152E 100%) fixed; color: var(--cream); font-family: var(--body); font-weight: 700 }
.page { max-width: 1240px; margin: 0 auto; padding: 20px 16px 56px; display: flex; flex-direction: column; gap: 40px }
a { color: var(--yellow) }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400 }
h2 { font-size: 30px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill }
.panel { background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); border: 5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--gold), 0 8px 0 var(--ink); border-radius: 26px }
.fine { margin: 0; font-size: 13px; color: var(--mist); line-height: 1.5 }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--night2); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 14px; color: var(--yellow) }
code { font-family: ui-monospace, Menlo, monospace }

/* header */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: 22px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.brand .word { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--yellow); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink) }
.brand .tag { font-family: var(--display); font-size: 15px; line-height: 1.1; color: var(--ink); letter-spacing: .03em; background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 8px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap }
nav { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 900; font-size: 16px }
nav a { color: var(--cream); text-decoration: none }
nav a:hover { color: var(--yellow) }
.bar-right { display: flex; align-items: center; gap: 12px }
.coinpill { display: flex; align-items: center }
.coinpill span { height: 34px; background: var(--night2); border: 4px solid var(--ink); border-radius: 999px; display: flex; align-items: center; padding: 0 34px 0 14px; margin-right: -26px; font-family: var(--display); font-size: 18px; color: var(--cream); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill }

/* buttons */
.btn { font-family: var(--display); font-size: 18px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; border: 4px solid var(--ink); border-radius: 14px; padding: 8px 16px; min-height: 44px; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s }
.btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 2px 0 var(--ink) }
.btn[disabled] { opacity: .55; cursor: not-allowed }
.btn.blue { background: linear-gradient(180deg, #6EA0FF, #2457D6) }
.btn.ember { background: linear-gradient(180deg, #FF9A5A 0%, #FF6B2C 55%, #D94A10 100%) }
.btn.green { background: linear-gradient(180deg, #6EDB3A 0%, #45B826 55%, #2F9A1C 100%) }
.btn.gold { background: linear-gradient(180deg, #FFE27A, #E09A12); color: var(--ink); -webkit-text-stroke: 0 }
.btn.grey { background: linear-gradient(180deg, #C2CAEB, #7C86B2); color: var(--ink); -webkit-text-stroke: 0 }
.btn.big { font-size: 26px; -webkit-text-stroke: 4px var(--ink); border-radius: 18px; padding: 14px 28px; box-shadow: inset 0 4px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.25), 0 6px 0 var(--ink) }
.btn.wide { width: 100%; font-size: 22px }
.mini { font: 900 12px var(--body); color: var(--ink); background: var(--gold-a); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; cursor: pointer }

/* hero */
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center }
.hero-copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.clock { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: var(--ink); border-radius: 999px; padding: 6px 16px 6px 8px; font-weight: 900; font-size: 15px; color: var(--yellow) }
.clock b { font-variant-numeric: tabular-nums }
.pill.demo { align-self: flex-start; background: var(--parch); color: var(--ink); border-color: var(--ink); font-size: 13px; padding: 6px 14px; white-space: normal }
.pill.demo a { color: var(--ember) }
h1 { font-size: clamp(48px, 7vw, 92px); line-height: .98; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink) }
.lede { margin: 0; max-width: 560px; font-size: 20px; line-height: 1.55; color: #E4E8FF }
.cta { display: flex; flex-wrap: wrap; gap: 16px }
.ca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--mist) }
.ca code { background: var(--night2); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px; color: var(--cream); font-size: 12px; word-break: break-all }
.battle { flex: 1 1 400px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px }
.battle-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.fronts { display: flex; flex-direction: column; gap: 12px }
.front { display: flex; flex-direction: column; gap: 6px }
.front .top { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.front .who { display: flex; align-items: center; gap: 10px }
.rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; font-family: var(--display); font-size: 17px; color: var(--ink); border: 3px solid var(--ink); border-radius: 8px 8px 16px 16px }
.front .name { font-weight: 900; font-size: 16px }
.front .chain { font-size: 13px; color: var(--mist) }
.front .vol { font-weight: 900; font-size: 14px; color: var(--mist); font-variant-numeric: tabular-nums }
.track { height: 22px; background: var(--night2); border: 4px solid var(--ink); border-radius: 999px; overflow: hidden }
.track i { display: block; height: 100%; box-shadow: inset 0 4px 0 rgba(255,255,255,.35); transition: width .6s cubic-bezier(.2,.9,.3,1) }

/* clans */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.sec-head h2 { font-size: 44px; color: var(--yellow); -webkit-text-stroke: 8px var(--ink); text-shadow: 0 6px 0 var(--ink) }
.sec-head p { margin: 0; color: var(--mist); font-weight: 800 }
.clan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px }
.clan { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); border: 5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--gold), 0 8px 0 var(--ink); border-radius: 24px; overflow: hidden; cursor: pointer; text-align: center; padding: 0; color: var(--cream); font-family: var(--body); transition: transform .12s }
.clan:hover { transform: translateY(-4px) }
.clan.on { box-shadow: inset 0 0 0 3px var(--gold), 0 8px 0 var(--ink), 0 0 0 5px var(--yellow) }
.clan .art { height: 220px; border-bottom: 5px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; position: relative }
.clan .art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 8px 6px 20px; filter: drop-shadow(0 6px 0 rgba(26,20,16,.35)) }
.clan .crest { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); width: 58px; height: 66px; border: 5px solid var(--ink); border-radius: 12px 12px 32px 32px; box-shadow: inset 0 5px 0 rgba(255,255,255,.35), 0 5px 0 var(--ink); display: flex; align-items: center; justify-content: center }
.clan .body { padding: 42px 14px 18px; display: flex; flex-direction: column; gap: 8px; align-items: center }
.clan .cname { font-family: var(--display); font-size: 24px; line-height: 1.05; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink) }
.clan .cchain { font-weight: 900; font-size: 12px; letter-spacing: .12em; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 12px }
.clan .motto { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.4 }
.clan .stat { font-size: 12px; color: var(--mist) }
.clan.soon { opacity: .75; cursor: default }
.clan.soon:hover { transform: none }

/* trade + barracks */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px }
.card { padding: 24px; display: flex; flex-direction: column; gap: 14px }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.chainpick { display: flex; gap: 6px; flex-wrap: wrap }
.chainpick button { width: 36px; height: 36px; border-radius: 10px; border: 3px solid var(--ink); background: var(--night2); cursor: pointer; padding: 3px; opacity: .55 }
.chainpick button.on { opacity: 1; box-shadow: 0 0 0 3px var(--yellow) }
.chainpick img { width: 100%; height: 100%; border-radius: 6px }
.seg { display: flex; background: var(--night2); border: 4px solid var(--ink); border-radius: 14px; overflow: hidden }
.seg button { flex: 1; font-family: var(--display); font-size: 18px; color: var(--mist); background: none; border: 0; padding: 8px; cursor: pointer }
.seg button.on { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); color: var(--ink) }
.field { display: flex; align-items: center; gap: 10px; background: var(--night2); border: 4px solid var(--ink); border-radius: 14px; padding: 8px 12px }
.field span { font-size: 13px; color: var(--mist); white-space: nowrap }
.field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--cream); font: 900 22px var(--body); outline: none; text-align: right }
.quote { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; color: var(--mist); flex-wrap: wrap }
.quote b { color: var(--cream); font-size: 18px }
.quote.small b { font-size: 14px }
.parchment { background: var(--parch); color: var(--ink); box-shadow: 0 8px 0 var(--ink) }
.parchment h2 { color: var(--ember) }
.parchment .fine { color: var(--parch-ink) }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.stats div { background: #fff8; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px }
.stats span { font-size: 12px; color: var(--parch-ink) }
.stats b { font-size: 18px; font-variant-numeric: tabular-nums }
.field.dark { background: #fff8 }
.field.dark input { color: var(--ink) }
.field.dark span { color: var(--parch-ink) }
.row { display: flex; gap: 10px; flex-wrap: wrap }
.row .btn { flex: 1 1 120px; font-size: 16px }

/* rules */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px }
.rule { background: var(--parch); color: var(--ink); border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--ink); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px }
.rule .num { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--ember); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill }
.rule h3 { font-size: 26px }
.rule p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--parch-ink) }

/* reports */
.reports { padding: 24px; display: flex; flex-direction: column; gap: 14px }
.report-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px }
.report { background: var(--night2); border: 4px solid var(--ink); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px }
.report .day { font-family: var(--display); font-size: 20px; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill }
.report .win { font-weight: 900; font-size: 16px }
.report ol { margin: 0; padding-left: 18px; font-size: 13px; color: var(--mist) }
.report .copy { align-self: flex-start }

/* roadmap */
.roadmap { padding: 24px 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center }
.road { flex: 999 1 600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px }
.road div { background: var(--night2); border: 4px solid var(--ink); border-radius: 16px; padding: 14px 16px; font-weight: 900; font-size: 16px; display: flex; flex-direction: column; gap: 4px }
.road small { font-size: 12px; letter-spacing: .12em; color: var(--mist) }
.road small.g { color: var(--green) } .road small.y { color: var(--yellow) }

footer { display: flex; flex-direction: column; gap: 8px; max-width: 900px; font-size: 13px; line-height: 1.6; color: var(--mist) }
footer p { margin: 0 }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--parch); color: var(--ink); border: 4px solid var(--ink); border-radius: 14px; padding: 10px 16px; font-weight: 900; box-shadow: 0 5px 0 var(--ink); z-index: 300; max-width: calc(100% - 32px) }
.toast a { color: var(--ember) }

/* connect modal */
.cw-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: #0a0d20cc; backdrop-filter: blur(6px) }
.cw { width: min(420px, 100%); background: var(--parch); color: var(--ink); border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--ink); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; animation: cw-pop .3s cubic-bezier(.34,1.45,.5,1) }
.cw-head { display: flex; align-items: center; justify-content: space-between }
.cw-head b { font-family: var(--display); font-size: 24px; font-weight: 400; color: var(--ember); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill }
.cw-x { border: 3px solid var(--ink); background: var(--gold-a); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-weight: 900 }
.cw-sub { margin: 0; font-size: 13px; color: var(--parch-ink) }
.cw-w { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left; color: var(--ink); font: 800 15px var(--body); background: #fff9; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink) }
.cw-w:hover { background: #fff }
.cw-w img, .cw-w i { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--night2); font-style: normal }
.cw-w small { display: block; color: var(--parch-ink); font-weight: 600; font-size: 11.5px }
.cw-w[disabled] { opacity: .5; cursor: not-allowed }
@keyframes cw-pop { from { opacity: 0; transform: translateY(14px) scale(.96) } }

@media (max-width: 640px) {
  .page { gap: 28px }
  nav { display: none }
  .brand .word { font-size: 28px }
  h1 { -webkit-text-stroke: 7px var(--ink) }
  .stats { grid-template-columns: 1fr 1fr }
}

/* today's battle: one line shared by volume */
.share { display: flex; height: 34px; background: var(--night2); border: 4px solid var(--ink); border-radius: 999px; overflow: hidden }
.share i { display: flex; align-items: center; justify-content: center; height: 100%; box-shadow: inset 0 4px 0 rgba(255,255,255,.35); border-right: 3px solid var(--ink); transition: width .6s cubic-bezier(.2,.9,.3,1); min-width: 0 }
.share i:last-child { border-right: 0 }
.share b { font-family: var(--display); font-size: 15px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap }
.share .empty { align-self: center; padding: 0 14px; font-size: 13px; color: var(--mist) }
.legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px }
.leg { display: grid; grid-template-columns: 30px 28px 1fr auto auto; align-items: center; gap: 10px; font-weight: 900; font-size: 15px }
.leg img { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--ink); background: var(--night2) }
.leg .lpct { font-family: var(--display); font-size: 18px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; min-width: 58px; text-align: right }
.leg .lvol { font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right }
.leg.soon { opacity: .5 }
.lead { margin-top: 12px; font-size: 13px; color: var(--mist) }
.lead b { color: var(--cream) }

/* clan cards: the chain's logo is the clan */
.clan .art { height: 170px; align-items: center }
.clan .art img { width: 110px; height: 110px; padding: 0; border-radius: 28px; border: 5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: var(--night2); object-fit: cover }
.clan .body { padding: 18px 14px }

/* chart + trades */
.chartcard { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px }
.ch-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.ch-title { display: flex; align-items: center; gap: 12px }
.ch-stats { display: flex; gap: 18px; flex-wrap: wrap }
.ch-stats div { display: flex; flex-direction: column; gap: 2px }
.ch-stats span { font-size: 11px; color: var(--mist); letter-spacing: .06em; text-transform: uppercase }
.ch-stats b { font-size: 17px; color: var(--cream); font-variant-numeric: tabular-nums }
.ch-stats .up { color: var(--green) } .ch-stats .down { color: var(--ember) }
.dots { display: flex; gap: 4px; align-items: center; height: 22px }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink) }
.ch-bar { display: flex; gap: 10px; flex-wrap: wrap }
.mini-seg button { font: 900 13px var(--body); padding: 5px 12px; min-width: 44px }
#chart { width: 100%; height: 300px; display: block; background: var(--night2); border: 4px solid var(--ink); border-radius: 16px; cursor: crosshair }
.tradewrap { overflow: auto; max-height: 360px; border: 4px solid var(--ink); border-radius: 16px; background: var(--night2) }
.tradetable { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap }
.tradetable th { position: sticky; top: 0; background: var(--ink); color: var(--mist); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 8px 12px }
.tradetable td { padding: 7px 12px; border-top: 1px solid rgba(201,208,245,.1); color: var(--cream) }
.tradetable td.buy { color: var(--green) } .tradetable td.sell { color: var(--ember) }
.tradetable td img { width: 20px; height: 20px; border-radius: 6px; vertical-align: middle }
.tradetable td.empty { color: var(--mist); text-align: center; padding: 20px }
.tradetable a { text-decoration: none }
@media (max-width: 700px) { .leg { font-size: 13px } .ch-stats { gap: 12px } .ch-stats b { font-size: 14px } #chart { height: 220px } }