/* =====================================================================
   LIT FUSE — style.css
   Chunky pixel / voxel-block look. Original art: tex/*.svg, logo.svg,
   favicon.svg and the inline bomb are all drawn for this site.
   Everything is square: 4px steps, hard shadows, no blur, no radius.
   ===================================================================== */
:root {
  --night: #0f1530;
  --ink: #07091a;
  --stone: #2b2f45;
  --stone-hi: #454b6b;
  --stone-lo: #1a1d2e;
  --panel: #0b0e22;
  --grass: #4fae35;
  --grass-hi: #7fe055;
  --grass-lo: #2f7d25;
  --lava: #ff7a1a;
  --lava-hi: #ffb067;
  --lava-lo: #b8430c;
  --red: #e8322b;
  --red-lo: #8e1610;
  --gold: #ffd23f;
  --gold-lo: #b88a0c;
  --sky: #8fa3ff;
  --cream: #f4ecd8;
  --mute: #a9adc9;
  --dim: #7a7fa3;
  --pix: 'Press Start 2P', ui-monospace, monospace;
  --term: 'VT323', ui-monospace, 'Courier New', monospace;
  --b: 4px;
  /* pixel border with notched corners + hard drop shadow */
  --edge: 0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink), calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink);
  --drop: 8px 8px 0 0 rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0; min-width: 0; overflow-x: hidden;
  background-color: var(--night);
  background-image: url(tex/stars.svg), linear-gradient(180deg, #0b1028 0 320px, #0f1530 320px 900px, #121a40 900px 1800px, #16204f 1800px);
  background-size: 192px 192px, 100% 100%;
  color: var(--cream);
  font: 21px/1.2 var(--term);
  image-rendering: pixelated;
}
img, svg, canvas { image-rendering: pixelated; }
a { color: var(--sky); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
b, strong { font-weight: 400; color: #ffffff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.mono { font-family: var(--term); color: var(--sky); }
.muted { color: var(--mute); }
h2 { font: 14px/1.3 var(--pix); letter-spacing: .02em; margin: 0; color: var(--cream); text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }

/* shared block surfaces */
.stage, .card, .honest, .docs, .toast {
  background: var(--stone) url(tex/stone.svg) 0 0 / 64px 64px;
  box-shadow: var(--edge), inset 4px 4px 0 0 var(--stone-hi), inset -4px -4px 0 0 var(--stone-lo), var(--drop);
}

/* ---------------- header ---------------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 12px 16px;
  background: var(--stone-lo) url(tex/stone.svg) 0 0 / 64px 64px;
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 0 var(--grass-lo), 0 8px 0 0 var(--ink);
  margin-bottom: 8px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); min-height: 44px; }
.brand:hover { text-decoration: none; color: var(--cream); }
.brand img { width: 40px; height: 40px; display: block; }
.brand .word { white-space: nowrap; font: 18px/1 var(--pix); color: var(--gold); text-shadow: 3px 3px 0 var(--lava-lo), 6px 6px 0 var(--ink); }
.brand .tick { font: 10px/1 var(--pix); color: var(--ink); background: var(--grass); padding: 6px 6px 5px; box-shadow: inset -3px -3px 0 var(--grass-lo), inset 3px 3px 0 var(--grass-hi); }
.ca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; background: var(--panel); padding: 4px 4px 4px 12px; box-shadow: var(--edge); margin: 4px; min-height: 48px; }
.ca-k { font: 10px/1 var(--pix); color: var(--gold); }
.ca code { font: 20px/1 var(--term); color: var(--cream); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ca-copy { flex: none; }
.links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 21px; color: var(--sky); }

/* pressable blocks: two-tone bevel, pushes down 4px */
.connect, .ca-copy, .ghost, button.take, .tabs button, .vrf {
  border: 0; cursor: pointer; position: relative;
  box-shadow: var(--edge), inset -4px -4px 0 0 var(--bev-lo), inset 4px 4px 0 0 var(--bev-hi), 0 8px 0 0 var(--ink);
}
.connect:active, .ca-copy:active, .ghost:active, button.take:not(:disabled):active, .tabs button:active, .vrf:active {
  transform: translateY(4px);
  box-shadow: var(--edge), inset 4px 4px 0 0 var(--bev-lo), inset -4px -4px 0 0 var(--bev-hi), 0 4px 0 0 var(--ink);
}
.connect {
  --bev-hi: var(--grass-hi); --bev-lo: var(--grass-lo);
  background: var(--grass); color: var(--ink);
  font: 12px/1 var(--pix); padding: 0 18px; min-height: 48px; margin: 4px 4px 8px;
}
.connect.on { --bev-hi: #c3ccff; --bev-lo: #3b4aa8; background: var(--sky); }
.connect.bad { --bev-hi: #ff8a7f; --bev-lo: var(--red-lo); background: var(--red); color: #fff; }
.ca-copy { --bev-hi: var(--stone-hi); --bev-lo: var(--stone-lo); background: #353a55; font: 9px/1 var(--pix); padding: 0 12px; min-height: 36px; min-width: 64px; color: var(--cream); margin-bottom: 4px; }
.ca-copy::after { content: ''; position: absolute; inset: -6px -4px; }

/* ---------------- layout ---------------- */
.game {
  max-width: 1280px; margin: 0 auto; padding: 28px 16px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 32px; align-items: start;
}
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "world hud" "fuse fuse";
  margin: 4px; position: relative; min-width: 0;
}

/* ---------------- the world: sky, hills, grass block, bomb ---------------- */
.world {
  grid-area: world; position: relative; overflow: hidden; min-height: 420px;
  box-shadow: inset 0 0 0 4px var(--ink);
  background: linear-gradient(180deg, #0a0f27 0 22%, #0e1534 22% 44%, #121b44 44% 66%, #172255 66%);
}
.sky { position: absolute; inset: 4px; background: url(tex/stars.svg) 0 0 / 192px 192px; opacity: .9; }
.moon { position: absolute; top: 64px; right: 28px; width: 72px; height: 72px; background: url(tex/moon.svg) 0 0 / 72px 72px no-repeat; }
.hills { position: absolute; left: 4px; right: 4px; bottom: 96px; height: 64px; background: url(tex/hills.svg) 0 100% / 320px 64px repeat-x; }
.ground {
  position: absolute; left: 4px; right: 4px; bottom: 4px; height: 96px;
  background: url(tex/grass.svg) 0 0 / 64px 64px repeat-x, url(tex/dirt.svg) 0 64px / 64px 64px repeat;
  box-shadow: 0 -4px 0 0 var(--ink);
}
.hud-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; z-index: 3; }
.round { font: 11px/1 var(--pix); color: var(--cream); background: var(--ink); padding: 8px 10px; box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .5); }
.badge { font: 10px/1 var(--pix); padding: 8px 9px 7px; color: var(--ink); background: #b7bdd9; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .3), inset 3px 3px 0 rgba(255, 255, 255, .45), 4px 4px 0 0 rgba(0, 0, 0, .5); }
.badge.live { background: var(--grass); }
.badge.live::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--ink); margin-right: 8px; animation: blink 1s steps(1) infinite; }
.badge.paused { background: var(--stone-hi); color: var(--cream); }
.badge.boom { background: var(--red); color: #fff; }
.badge.slam { background: var(--gold); animation: slamflash .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes slamflash { 50% { background: var(--lava); } }

.bombrig { position: absolute; left: 50%; bottom: 84px; width: 200px; height: 248px; margin-left: -100px; pointer-events: none; z-index: 1; }
.bombrig .bob { position: absolute; inset: 0; animation: hop 1.2s steps(1) infinite; }
.bombrig .bomb { display: block; width: 200px; height: 248px; overflow: visible; }
.bombrig .shadow { position: absolute; left: 36px; bottom: -4px; width: 120px; height: 8px; background: rgba(7, 9, 26, .6); }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.bombrig .spark .f1 { animation: frameA .24s steps(1) infinite; }
.bombrig .spark .f2 { animation: frameB .24s steps(1) infinite; }
@keyframes frameA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes frameB { 0% { opacity: 0; } 50% { opacity: 1; } }
.bombrig .spark .sk { transform-box: fill-box; transform-origin: center; }
.bombrig.s2 .spark .sk { transform: scale(1.25); }
.bombrig.s3 .spark .sk { transform: scale(1.5); }
.bombrig.s4 .spark .sk { transform: scale(1.75); }
.bombrig .heatc { opacity: 0; }
.bombrig.s2 .heatc { opacity: .3; }
.bombrig.s3 .heatc { animation: heat 1s steps(1) infinite; }
.bombrig.s4 .heatc { opacity: 1; animation: heat .4s steps(1) infinite; }
.bombrig.s4 .bob { animation: shake .16s steps(1) infinite; }
@keyframes heat { 0% { opacity: .5; } 50% { opacity: 1; } }
@keyframes shake { 0% { transform: translate(-4px, 0); } 50% { transform: translate(4px, -4px); } }
.bombrig.unlit .spark { display: none; }
.bombrig.unlit .fuse-rope { stroke: #9c8450; }
.bombrig.unlit .bob { animation: none; }
.bombrig.passed .bob { animation: passed .8s steps(4) 1; }
@keyframes passed { 0% { transform: translateY(0); } 25% { transform: translateY(-28px); } 50% { transform: translateY(-36px); } 75% { transform: translateY(-12px); } 100% { transform: translateY(0); } }
.bombrig.gone .bob, .bombrig.gone .shadow { visibility: hidden; }
.bombrig.blowing .bob { visibility: visible; animation: pop .5s steps(3) 1 forwards; }
@keyframes pop { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(3); } 100% { transform: scale(1.4); opacity: 0; } }

/* left over after a boom: scorched pixel blocks */
.debris { position: absolute; inset: 0; display: none; }
.bombrig.gone .debris { display: block; }
.debris i { position: absolute; width: 16px; height: 16px; background: #2a2f45; box-shadow: inset -4px -4px 0 #15182a, inset 4px 4px 0 #454b6b; }
.debris i:nth-child(1) { left: 40px; bottom: 0; }
.debris i:nth-child(2) { left: 64px; bottom: 0; width: 24px; height: 12px; background: #3a2414; }
.debris i:nth-child(3) { left: 100px; bottom: 0; width: 20px; height: 20px; }
.debris i:nth-child(4) { left: 132px; bottom: 0; width: 12px; height: 12px; background: var(--lava); box-shadow: inset -4px -4px 0 var(--lava-lo); animation: blink .6s steps(1) infinite; }
.debris i:nth-child(5) { left: 84px; bottom: 16px; width: 8px; height: 8px; background: var(--gold); box-shadow: none; animation: blink .9s steps(1) infinite; }
.debris i:nth-child(6) { left: 80px; bottom: 40px; width: 40px; height: 24px; background: rgba(169, 173, 201, .25); box-shadow: 8px -20px 0 -4px rgba(169, 173, 201, .18), -8px -40px 0 -6px rgba(169, 173, 201, .12); }
.debris i:nth-child(7) { left: 156px; bottom: 0; width: 8px; height: 8px; }
.debris i:nth-child(8) { left: 24px; bottom: 0; width: 8px; height: 8px; background: var(--red); box-shadow: none; }

.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.flash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4; opacity: 0; }
.flash b { font: 56px/1 var(--pix); color: var(--gold); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 var(--ink); }
.stage.blowing .flash { animation: flash 1.6s steps(8) 1; }
.stage.blowing .world { animation: quake .5s steps(5) 1; }
@keyframes flash { 0% { opacity: 1; background: rgba(255, 255, 255, .9); } 12% { background: rgba(255, 210, 63, .55); } 30% { background: rgba(255, 122, 26, .2); opacity: 1; } 85% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@keyframes quake { 0% { transform: translate(8px, 0); } 25% { transform: translate(-8px, 4px); } 50% { transform: translate(4px, -4px); } 75% { transform: translate(-4px, 0); } 100% { transform: translate(0, 0); } }

/* ---------------- HUD ---------------- */
.hud { grid-area: hud; padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.status { margin: 0; font-size: 22px; line-height: 1.15; color: var(--cream); }
.status b { color: var(--gold); }
.pot { background: var(--panel); box-shadow: var(--edge), inset 0 -8px 0 0 #050716; margin: 4px; padding: 16px 16px 20px; display: grid; gap: 12px; }
.pot-k, .pk, .ro-k, .fuse-k, .jk, .rows dt { font: 10px/1.25 var(--pix); color: var(--mute); text-transform: uppercase; letter-spacing: .02em; }
.pot-v { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pot-v b { font: 40px/1 var(--pix); color: var(--cream); text-shadow: 4px 4px 0 var(--lava-lo); }
.unit { font: 14px/1 var(--pix); color: var(--lava); }
.pot-usd { font-size: 22px; color: var(--mute); }
.jack { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 14px; background: rgba(255, 210, 63, .08); box-shadow: inset 0 0 0 4px rgba(255, 210, 63, .3); }
.jack .jk { color: var(--gold); }
.jack b { font: 16px/1 var(--pix); color: var(--gold); }
.jack .jn { font-size: 19px; color: var(--mute); }
.jack.on { background: rgba(255, 210, 63, .18); box-shadow: inset 0 0 0 4px var(--gold); animation: jackon 1s steps(1) infinite; }
.jack.on .jn { color: var(--gold); }
@keyframes jackon { 50% { box-shadow: inset 0 0 0 4px var(--lava); } }
.rows { margin: 0; display: grid; }
.rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 10px; background: linear-gradient(90deg, var(--stone-hi) 50%, transparent 50%) 0 100% / 8px 4px repeat-x; }
.rows > div:last-child { background: none; }
.rows dt { flex: none; }
.rows dd { margin: 0; text-align: right; font-size: 21px; min-width: 0; overflow-wrap: anywhere; }
.you { color: var(--grass-hi); }
.rows dd .bombi { color: var(--lava); margin-right: 6px; }

/* ---------------- the fuse bar: one block per 5% ---------------- */
.fuse { grid-area: fuse; padding: 20px 24px 24px; box-shadow: inset 0 4px 0 0 var(--ink); min-width: 0; }
.fuse-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 22px; }
.fuse-k { color: var(--cream); font-size: 12px; }
.fuse-left { font-size: 20px; color: var(--mute); }
.fuse-left.hot { color: var(--lava); }
.fbar { position: relative; height: 44px; margin: 4px 68px 4px 4px; background: var(--ink); box-shadow: var(--edge); }
.zones { position: absolute; inset: 0; display: flex; overflow: hidden; }
.zones i { display: block; height: 100%; flex: none; }
.zones .z0 { background: #204615; }
.zones .z1 { background: #665419; }
.zones .z2 { background: #66310a; }
.zones .z3 { background: #5d1411; }
.zones .z4 { background: #666666; }
.burnt { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .14); }
@supports ((backdrop-filter: brightness(2)) or (-webkit-backdrop-filter: brightness(2))) {
  .burnt { background: transparent; -webkit-backdrop-filter: brightness(2.5); backdrop-filter: brightness(2.5); }
}
.segs { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(5% - 4px), var(--ink) calc(5% - 4px) 5%),
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px calc(100% - 8px), rgba(0, 0, 0, .4) calc(100% - 8px));
}
.checked { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; background: var(--sky); }
.fhead { position: absolute; top: -10px; bottom: -10px; width: 8px; margin-left: -4px; background: var(--cream); box-shadow: 0 0 0 4px var(--ink); }
.fhead::before { content: ''; position: absolute; left: -8px; top: -16px; width: 24px; height: 12px; background: linear-gradient(90deg, transparent 0 8px, var(--gold) 8px 16px, transparent 16px), linear-gradient(180deg, transparent 0 4px, var(--lava) 4px 8px, transparent 8px); animation: blink .3s steps(1) infinite; }
.fend { position: absolute; right: -68px; top: -4px; bottom: -4px; width: 56px; display: grid; place-items: center; font: 9px/1 var(--pix); color: #fff; background: var(--red); box-shadow: var(--edge), inset -4px -4px 0 var(--red-lo), inset 4px 4px 0 #ff8a7f; }
.fbar.unlit .zones { filter: grayscale(1) brightness(.8); }
.fbar.unlit .fhead { display: none; }
.fbar.blown .zones i { background: var(--red); animation: blink .5s steps(1) infinite; }
.fbar.blown .fhead { display: none; }
.fbar.blown .fend { animation: blink .3s steps(1) infinite; }
.zlabels { position: relative; height: 44px; margin: 16px 68px 6px 4px; }
.zlabels span { position: absolute; top: 0; padding-left: 8px; font-size: 18px; line-height: 1; color: var(--dim); white-space: nowrap; background: linear-gradient(var(--dim), var(--dim)) 0 0 / 4px 100% no-repeat; }
.zlabels span b { display: block; margin-top: 6px; font: 9px/1 var(--pix); color: var(--mute); }
.zlabels span.on { color: var(--gold); background-image: linear-gradient(var(--gold), var(--gold)); }
.zlabels span.on b { color: var(--gold); }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 4px 0; }
.ro { background: var(--panel); box-shadow: var(--edge), inset 0 -6px 0 #050716; padding: 14px 12px 16px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.ro-v { font: 22px/1 var(--pix); color: var(--cream); white-space: nowrap; overflow: hidden; }
.ro-v.hot { color: var(--lava); text-shadow: 3px 3px 0 var(--red-lo); }
.ro-v small { font-size: .5em; color: var(--mute); margin-left: 4px; }
.rate { margin: 12px 4px 0; font-size: 18px; color: var(--dim); text-align: right; }

/* ---------------- side cards ---------------- */
.side { display: grid; gap: 32px; min-width: 0; }
.card { padding: 22px 20px 24px; margin: 4px; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.wallet { font-size: 19px; color: var(--mute); }
.pricebox { background: var(--panel); box-shadow: var(--edge), inset 0 -6px 0 #050716; margin: 4px; padding: 14px 14px 16px; display: grid; gap: 12px; }
.pv { display: flex; align-items: baseline; gap: 10px; }
.pv b { font: 26px/1 var(--pix); color: var(--gold); text-shadow: 3px 3px 0 var(--gold-lo); }
.pu { font-size: 20px; color: var(--mute); }
.pnote { margin: 14px 0 18px; font-size: 18px; color: var(--mute); }
button.take {
  --bev-hi: var(--lava-hi); --bev-lo: var(--lava-lo);
  display: block; width: calc(100% - 8px); margin: 4px 4px 16px; min-height: 80px; padding: 16px 12px 18px;
  background: var(--lava); color: var(--ink);
  font: 16px/1.25 var(--pix); text-align: center; letter-spacing: .02em;
}
button.take:not(:disabled):hover { background: #ff8c33; }
button.take .tp { display: block; margin-top: 10px; font: 18px/1.1 var(--term); letter-spacing: 0; color: #3a1500; }
button.take:disabled { --bev-hi: #5b617f; --bev-lo: #20233a; background: #3a3f5a; color: var(--dim); cursor: not-allowed; }
button.take.busy { animation: blink .8s steps(1) infinite; }
.crown { margin: 8px 0 10px; font-size: 19px; color: var(--cream); padding-left: 16px; background: linear-gradient(var(--grass), var(--grass)) 0 6px / 8px 8px no-repeat; }
.crown.boom { color: #ff8a7f; background-image: linear-gradient(var(--red), var(--red)); }
.crown.you { color: var(--grass-hi); }
.crown.slam { color: var(--gold); background-image: linear-gradient(var(--gold), var(--gold)); }
.fine { margin: 0; font-size: 17px; color: var(--dim); }
.extra { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.extra:not(:has(button:not([hidden]))) { display: none; }
.ghost { --bev-hi: var(--stone-hi); --bev-lo: var(--stone-lo); background: #353a55; color: var(--cream); font: 10px/1.2 var(--pix); min-height: 48px; padding: 0 16px; flex: 1 1 140px; margin: 4px 4px 8px; }
.ghost.ok { --bev-hi: #ffe58a; --bev-lo: var(--gold-lo); background: var(--gold); color: var(--ink); }

/* feed */
.feed .card-h { margin-bottom: 16px; }
#feedLive { font: 9px/1 var(--pix); color: var(--dim); padding: 7px 8px; background: var(--panel); }
#feedLive.on { color: var(--grass-hi); }
#feedLive.on::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--grass-hi); margin-right: 8px; animation: blink 1s steps(1) infinite; }
.tabs { display: flex; gap: 16px; margin: 0 4px 20px; }
.tabs button { --bev-hi: var(--stone-hi); --bev-lo: var(--stone-lo); background: #353a55; color: var(--mute); font: 10px/1 var(--pix); min-height: 44px; padding: 0 16px; flex: 1; }
.tabs button[aria-selected="true"] { --bev-hi: var(--grass-hi); --bev-lo: var(--grass-lo); background: var(--grass); color: var(--ink); }
#feed { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 360px; overflow-y: auto; overflow-x: hidden; scrollbar-color: var(--stone-hi) var(--panel); }
#feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag who when" "what what what"; align-items: center; gap: 0 10px; padding: 2px 10px 10px; margin: 0 0 8px; background: rgba(7, 9, 26, .6); box-shadow: inset 4px 0 0 var(--stone-hi); }
#feed li.won { box-shadow: inset 4px 0 0 var(--red); background: rgba(232, 50, 43, .12); }
#feed li.won.slam { box-shadow: inset 4px 0 0 var(--gold); background: rgba(255, 210, 63, .12); }
#feed li.new { animation: newrow 1.2s steps(3) 1; }
@keyframes newrow { 0% { background: rgba(255, 210, 63, .45); } 100% { background: rgba(7, 9, 26, .6); } }
#feed li.empty { display: block; padding: 22px 12px; text-align: center; color: var(--mute); font-size: 19px; box-shadow: inset 0 0 0 4px rgba(69, 75, 107, .6); }
#feed .tag { grid-area: tag; font: 8px/1 var(--pix); padding: 6px 6px 5px; color: var(--ink); background: var(--sky); }
#feed .tag.boom { background: var(--red); color: #fff; }
#feed .tag.slam { background: var(--gold); }
#feed .tag.burn { background: var(--lava); }
#feed .tag.fund { background: var(--grass); }
#feed .tag.ref { background: #b7bdd9; }
#feed .who { grid-area: who; font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feed .what { grid-area: what; font-size: 18px; color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#feed .what b { color: var(--cream); }
#feed .when { grid-area: when; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 8px; font-size: 17px; color: var(--dim); }
.vrf { --bev-hi: var(--stone-hi); --bev-lo: var(--stone-lo); background: #353a55; color: var(--cream); font: 8px/1 var(--pix); padding: 7px 8px; margin: 4px 4px 8px; }
.vrf::after { content: ''; position: absolute; inset: -10px -8px; }

/* ---------------- disclosure ---------------- */
.honest, .docs { max-width: 1248px; margin: 24px auto 36px; padding: 28px 24px; width: calc(100% - 40px); }
.honest h2, .docs h2 { font-size: 16px; margin-bottom: 20px; }
.split { display: flex; height: 40px; margin: 4px 4px 12px; box-shadow: var(--edge); background: var(--ink); }
.split i { display: block; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .3), inset 4px 4px 0 rgba(255, 255, 255, .35); }
.split .sp-pot { flex: 77; background: var(--grass); }
.split .sp-team { flex: 20; background: var(--sky); }
.split .sp-burn { flex: 3; min-width: 16px; background: var(--lava); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 4px 24px; font-size: 19px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend span::before { content: ''; width: 12px; height: 12px; background: var(--c); box-shadow: 3px 3px 0 var(--ink); }
.legend b { font: 11px/1 var(--pix); color: #fff; }
.legend .l-pot { --c: var(--grass); } .legend .l-team { --c: var(--sky); } .legend .l-burn { --c: var(--lava); }
.honest ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.honest li { position: relative; padding-left: 24px; font-size: 20px; line-height: 1.22; color: #d9d6cc; }
.honest li::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--gold); box-shadow: 3px 3px 0 var(--ink); }
.honest li b { color: #fff; }
.honest li.warn::before { background: var(--red); }
.honest li.warn > b:first-child { color: #ff8a7f; }

/* ---------------- docs ---------------- */
.docs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.doc-col { min-width: 0; }
.doc-col p { margin: 0 0 14px; font-size: 20px; color: #d9d6cc; }
.formula { margin: 4px 4px 18px; padding: 14px; background: var(--panel); box-shadow: var(--edge); font: 18px/1.25 var(--term); color: var(--grass-hi); overflow-x: auto; white-space: pre; }
.tablewrap { overflow-x: auto; margin: 4px; box-shadow: var(--edge); background: var(--panel); }
.haz { width: 100%; border-collapse: collapse; font-size: 19px; }
.haz th { font: 8px/1.5 var(--pix); color: var(--mute); text-align: left; padding: 12px 10px; background: #12162e; text-transform: uppercase; vertical-align: bottom; }
.haz td { padding: 10px; border-top: 4px solid var(--ink); vertical-align: top; }
.haz td small { display: block; color: var(--dim); font-size: 16px; }
.haz tr:nth-child(1) td:first-child { box-shadow: inset 6px 0 0 var(--grass); }
.haz tr:nth-child(2) td:first-child { box-shadow: inset 6px 0 0 var(--gold); }
.haz tr:nth-child(3) td:first-child { box-shadow: inset 6px 0 0 var(--lava); }
.haz tr:nth-child(4) td:first-child { box-shadow: inset 6px 0 0 var(--red); }
.haz tr.end td { color: #ff8a7f; }
.haz tr td:first-child { padding-left: 16px; }
.dist { list-style: none; margin: 20px 0 12px; padding: 0; display: grid; gap: 8px; }
.dist li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 19px; color: var(--mute); padding: 8px 12px; background: rgba(7, 9, 26, .6); }
.dist li b { font: 11px/1.6 var(--pix); color: var(--cream); text-align: right; }

/* ---------------- footer: a strip of grass blocks ---------------- */
.foot { margin-top: 20px; background: url(tex/grass.svg) 0 0 / 64px 64px repeat-x, url(tex/dirt.svg) 0 64px / 64px 64px; border-top: 4px solid var(--ink); padding: 80px 16px 28px; }
.foot-in { max-width: 1248px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; background: rgba(7, 9, 26, .85); box-shadow: var(--edge); padding: 8px 16px; font-size: 19px; color: var(--mute); }
.fl { display: flex; flex-wrap: wrap; gap: 0 20px; }
.fl a { display: inline-flex; align-items: center; min-height: 44px; font: 10px/1 var(--pix); color: var(--gold); }

/* ---------------- toast ---------------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100% - 40px)); padding: 16px 18px; z-index: 50; font-size: 20px; }
.toast.ok { box-shadow: var(--edge), inset 0 0 0 4px var(--grass), var(--drop); }
.toast.err { box-shadow: var(--edge), inset 0 0 0 4px var(--red), var(--drop); }
.toast a { color: var(--gold); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  body { font-size: 20px; }
  .top { padding: 10px 16px 12px; gap: 6px 12px; }
  .brand { flex: 1; }
  .brand .word { font-size: 13px; }
  .ro-v small { display: block; margin: 8px 0 0; font-size: 9px; }
  .ca { order: 3; flex-basis: 100%; }
  .links { order: 4; flex-basis: 100%; }
  .game { padding: 20px 16px 12px; gap: 28px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "world" "hud" "fuse"; }
  .world { min-height: 400px; }
  .hud { padding: 20px 16px 12px; }
  .pot-v b { font-size: 30px; }
  .fuse { padding: 18px 16px 20px; }
  .fbar { margin-right: 56px; height: 40px; }
  .fend { right: -56px; width: 44px; font-size: 7px; }
  .zlabels { margin-right: 56px; }
  .zlabels span { font-size: 16px; padding-left: 6px; }
  .zlabels span b { font-size: 7px; }
  .readouts { gap: 12px; }
  .ro { padding: 12px 8px 14px; gap: 10px; }
  .ro-k { font-size: 7px; }
  .ro-v { font-size: 14px; }
  .side { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .card { padding: 20px 16px 22px; }
  button.take { font-size: 15px; }
  .honest, .docs { width: calc(100% - 40px); padding: 24px 16px; margin: 20px auto 28px; }
  .honest ul, .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .foot { padding-top: 76px; }
}
@media (max-width: 480px) {
  .brand .tick { display: none; }
  .connect { padding: 0 14px; }
}
@media (max-width: 380px) {
  .zlabels span b { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- buy / sell $FUSE ---------------- */
.swap .tabs { margin-bottom: 16px; }
.sw-in { display: flex; align-items: center; gap: 10px; margin: 4px; padding: 0 14px; background: var(--panel); box-shadow: var(--edge), inset 0 4px 0 #050716; min-height: 56px; }
.sw-in:focus-within { outline: 4px solid var(--gold); outline-offset: 4px; }
.sw-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--cream); font: 24px/1 var(--pix); padding: 14px 0; }
.sw-in input::placeholder { color: var(--dim); }
.sw-in .unit { font: 12px/1 var(--pix); color: var(--mute); }
.sw-presets { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 4px 18px; }
.sw-presets .ghost { --bev-hi: var(--stone-hi); --bev-lo: var(--stone-lo); background: #353a55; color: var(--cream); font: 10px/1 var(--pix); min-height: 40px; padding: 0 12px; flex: 1; }
.sw-box { margin-bottom: 20px; }
.sw-out { font-size: 22px; color: var(--cream); font-variant-numeric: tabular-nums; }
.sw-out b { font: 20px/1 var(--pix); color: var(--gold); text-shadow: 3px 3px 0 var(--gold-lo); margin-right: 6px; }
.sw-err { color: #ff8a7f; font-size: 18px; }
button.take.sw-go.sell { --bev-hi: #c3cdff; --bev-lo: #3d4a94; background: var(--sky); color: var(--ink); }
button.take.sw-go.sell:not(:disabled):hover { background: #a9b8ff; }
.sw-rows { display: grid; gap: 6px; margin: 20px 4px 12px; }
.sw-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 19px; }
.sw-rows dt { color: var(--mute); } .sw-rows dd { margin: 0; color: var(--cream); font-variant-numeric: tabular-nums; }