/* Home page */
.hero { position: relative; min-height: min(100svh, 920px); padding: 0; display: flex; align-items: center; overflow: hidden; margin-top: -64px; padding-top: 64px; }
/* The share art holds the place while the live world streams in; the world fades in once the view around the camera is built. */
.hero::before { content: ""; position: absolute; inset: 0; background: #0b0d11 url(/img/hero.png) center/cover; }
.hero-world { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease); }
.hero-world.ready { opacity: 1; }
.hero-world.no-webgl { opacity: 1; background: #0b0d11 url(/img/hero.png) center/cover; filter: brightness(.8); }
@media (prefers-reduced-motion: reduce) { .hero-world { transition: none; } }
.hero-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,13,17,.92) 0%, rgba(11,13,17,.7) 38%, rgba(11,13,17,.1) 75%), linear-gradient(0deg, var(--night) 0%, transparent 28%); }
@media (max-width: 760px) { .hero-fade { background: linear-gradient(180deg, rgba(11,13,17,.25) 0%, rgba(11,13,17,.75) 55%, var(--night) 100%); } }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 60px; padding-bottom: 80px; }
.hero-copy { max-width: 640px; min-width: 0; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(11,13,17,.7); border: 1px solid var(--line); font: 600 12px/1 var(--mono); margin-bottom: 22px; }
.hero-h1 { font-size: clamp(38px, 7.2vw, 80px); line-height: 1.02; letter-spacing: 0; margin-bottom: 20px; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.hero-h1 span { display: inline-block; animation: drop .7s var(--ease) both; }
.hero-h1 span:nth-child(2) { animation-delay: .08s; } .hero-h1 span:nth-child(3) { animation-delay: .16s; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px); } }
.hero .lead { color: #c3c9d0; margin-bottom: 26px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
@media (max-width: 520px) { .hero-btns .btn { flex: 1 1 100%; } }
.ca-strip { display: flex; align-items: center; gap: 10px; max-width: 520px; min-width: 0; background: rgba(18,23,30,.85); border: 1px solid var(--line); padding: 8px 8px 8px 12px; }
.ca-k { font: 700 12px/1 var(--mono); color: var(--gold); }
.ca-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.ca-copy { background: var(--gold); color: #1a1406; border: 0; font: 700 11px/1 var(--mono); text-transform: uppercase; padding: 7px 10px; cursor: pointer; }
.ca-copy:disabled { background: var(--line); color: var(--muted); cursor: default; }
.trust-line { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.trust-line b { color: var(--text); }

/* How */
.how { background: #090b0e linear-gradient(rgba(35,43,53,.28) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(35,43,53,.28) 1px, transparent 1px) 0 0 / 40px 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how h2 em, .pool h2 em { font-style: normal; color: var(--gold); text-shadow: 0 0 30px rgba(245,197,66,.35); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 34px 0 18px; }
.tab { position: relative; text-align: left; padding: 14px 14px 18px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; overflow: hidden; transition: border-color var(--mid), transform var(--fast) var(--ease); min-width: 0; }
.tab .num { display: block; font: 600 12px/1 var(--mono); color: var(--muted); margin-bottom: 8px; letter-spacing: .1em; }
.tab .nm { font: 600 clamp(16px, 2.4vw, 22px)/1 var(--pix); color: var(--muted); }
.tab .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); box-shadow: 0 0 10px rgba(245,197,66,.6); }
.tab.on { border-color: rgba(245,197,66,.55); box-shadow: inset 0 0 0 1px rgba(245,197,66,.25); }
.tab.on .nm { color: var(--text); } .tab.on .num { color: var(--gold); }
.tab.on .bar { animation: tabbar 7s linear forwards; }
.tabs.paused .tab.on .bar { animation: none; width: 100%; }
@keyframes tabbar { to { width: 100%; } }
.tab:hover { transform: translateY(-2px); }
.panes { position: relative; }
.pane { display: none; grid-template-columns: 1fr; gap: 24px; background: var(--panel); border: 1px solid var(--line); padding: clamp(18px, 3vw, 34px); }
.pane.on { display: grid; animation: rise var(--slow) var(--ease); }
@media (min-width: 860px) { .pane { grid-template-columns: 1.05fr 1fr; align-items: center; } }
.pane-k { font: 600 12px/1 var(--mono); color: var(--gold); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.pane h3 { font-size: clamp(24px, 3vw, 32px); }
.pts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.pts li { display: flex; gap: 10px; } .pts li::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: 6px; background: var(--gold); }
.pane-vis { background: #0d1116; border: 1px solid var(--line); padding: 20px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.calc-l { font: 600 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.calc { display: grid; gap: 10px; }
.calc output { font-size: 15px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, #1b222c 8px 10px); }
input[type=range]::-moz-range-track { height: 8px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-d); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 0; background: var(--gold); cursor: pointer; }
.calc-res { display: flex; align-items: baseline; gap: 10px; }
.big { font-size: clamp(40px, 6vw, 60px); line-height: 1; }
.plots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 320px; }
.plots i { aspect-ratio: 1; background: #1b222c; border: 1px solid var(--line); transition: background var(--mid) var(--step), border-color var(--mid); }
.plots i.on { background: rgba(245,197,66,.25); border-color: var(--gold); }
.mini-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.mini-grid i { aspect-ratio: 1; background: #3f7d34; border: 1px solid rgba(0,0,0,.2); }
.mini-grid i.w { background: #2e6fbf; } .mini-grid i.s { background: #c9b98a; }
.mini-grid i.c { box-shadow: inset 0 0 0 2px var(--gold); animation: claimpulse .8s var(--step); }
@keyframes claimpulse { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 14px var(--gold); } }
.vis-cap { font: 600 11px/1 var(--mono); color: var(--muted); }
.mult { display: grid; gap: 10px; }
.meter { height: 14px; background: #1b222c; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; width: 50%; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--gold-d) 8px 10px); box-shadow: 0 0 12px rgba(245,197,66,.4); transition: width var(--mid) var(--ease); }
.meter-l { display: flex; justify-content: space-between; font: 600 11px/1 var(--mono); color: var(--muted); }
.ex-h { display: flex; gap: 8px; align-items: center; }
.ex-rows { display: grid; gap: 12px; }
.ex-row { display: grid; grid-template-columns: 64px 1fr 92px; gap: 10px; align-items: center; font-size: 14px; }
.ex-row .b { height: 12px; background: #1b222c; }
.ex-row .b i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--grass) 0 8px, #5fae3f 8px 10px); transition: width 1.1s var(--ease); }
.ex-row .sol { text-align: right; font: 600 14px/1 var(--pix); color: var(--gold); }

/* Pool */
.pool { padding-top: 80px; }
.stats { margin-top: 26px; }
.stat.hud { box-shadow: inset 0 0 0 1px rgba(245,197,66,.4), 0 0 30px rgba(245,197,66,.08); }
.flip { display: flex; gap: 4px; }
.flip .fd { display: inline-block; min-width: .62em; text-align: center; background: #0d1116; border: 1px solid var(--line); padding: 2px 4px; font-variant-numeric: tabular-nums; }
.flip .fd.sep { min-width: auto; background: none; border: 0; padding: 2px 0; }
.flip .fd.go { animation: flip .32s var(--step); }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); color: var(--gold); } 100% { transform: rotateX(0); } }
.pool-note { margin-top: 12px; }
.green-k { color: var(--grass); } .green-k::before { background: var(--grass); }

/* Earn */
.earn { border-top: 1px solid var(--line); }
.earn-grid { margin-top: 28px; }
.split { display: flex; height: 44px; border: 1px solid var(--line); margin-bottom: 10px; }
.split i { display: flex; align-items: center; padding: 0 10px; font: 700 12px/1 var(--mono); white-space: nowrap; overflow: hidden; }
.split .land { background: repeating-linear-gradient(90deg, rgba(126,214,80,.85) 0 8px, rgba(95,174,63,.85) 8px 10px); color: #0d1a06; }
.split .own { background: #2a3340; } .split .bb { background: #3a2a1a; color: #ffb26b; }
.mt { margin-top: 24px; }
.formula { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; }
.ex-table th { text-align: left; font: 600 10px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ex-table td { padding: 9px 6px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.ex-table td.gold { font-family: var(--pix); white-space: nowrap; }
@media (max-width: 520px) { .ex-table th:nth-child(3), .ex-table td:nth-child(3) { display: none; } }
.cover { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 8px; }
.cover .k { font: 600 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.cover-v { display: flex; gap: 14px; align-items: center; }
.cover-v .big { font-size: 40px; color: var(--grass); }
.trust-box { margin-top: 20px; background: rgba(245,197,66,.06); border: 1px solid rgba(245,197,66,.35); padding: 16px 18px; color: var(--muted); }
.trust-box b { color: var(--text); }

/* Map */
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.map-head h2 { margin: 0; }
.map-prev { height: clamp(320px, 60vh, 560px); }

/* Leaders */
.leaders .grid { margin-top: 24px; }
.cta-pair { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
body.has-claimbar .ftr { padding-bottom: 120px; }