/* BITBRAWL — 3D pixel look: chunky notched panels, thick card slabs, a tilted arena. */
:root {
  --bg: #0d0b1a; --bg2: #13102a; --panel: #18142f; --panel2: #201a3d;
  --line: #2e2752; --line2: #43397a; --hi: #5a4fa0;
  --text: #efeaff; --mute: #a39cc9; --dim: #6e6799;
  --gold: #f2c14e; --gold-d: #b8862a; --pump: #5ee08a; --pump-d: #22a356;
  --red: #ff5d5d; --heal: #7dff9a; --energy: #57c7ff;
  --ember: #e2603a; --tide: #3a9fd4; --grove: #5fb04a; --dusk: #9a62d8;
  --px: 'Pixelify Sans', 'Courier New', monospace;
  --tiny: 'Silkscreen', 'Courier New', monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --notch: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 60% at 70% 0%, #2a1d5c 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, #1a2650 0%, transparent 60%), var(--bg); }
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(#fff 1px, transparent 1.5px), radial-gradient(#cdb9ff 1px, transparent 1.5px);
  background-size: 140px 140px, 220px 220px; background-position: 10px 20px, 80px 130px; image-rendering: pixelated; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--px); font-weight: 700; margin: 0; letter-spacing: .01em; }
.h3d { color: #fff; text-shadow: 0 2px 0 #7a62ff, 0 4px 0 #4c37c9, 0 6px 0 #2a1c7a, 0 10px 18px rgba(0,0,0,.5); }
.pump-t { color: var(--pump); font-weight: 700; }
img.px, .px img { image-rendering: pixelated; }

/* ---------- panels & controls ---------- */
.panel { background: var(--panel); clip-path: var(--notch); padding: 20px; position: relative;
  box-shadow: inset 0 0 0 3px var(--line), inset 3px 3px 0 3px rgba(255,255,255,.04), inset -3px -3px 0 3px rgba(0,0,0,.25); }
.panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel h2 { font-size: 22px; }
.tag { font: 400 11px var(--tiny); color: var(--mute); background: var(--bg2); padding: 4px 8px; clip-path: var(--notch); white-space: nowrap; }
.tag-pump { color: var(--pump); }
.tag.live { color: var(--pump); display: inline-flex; align-items: center; gap: 6px; }
.tag.live i { width: 6px; height: 6px; background: var(--pump); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.btn { --b: var(--line2); --f: var(--panel2); --t: var(--text);
  position: relative; border: 0; background: var(--f); color: var(--t); padding: 11px 18px; font: 600 15px var(--px); letter-spacing: .02em;
  clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--b), inset 0 -6px 0 rgba(0,0,0,.25), inset 0 3px 0 3px rgba(255,255,255,.08);
  transition: transform .08s, filter .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); }
.btn.primary { --f: #f2c14e; --b: #ffe08a; --t: #2a1a00; box-shadow: inset 0 0 0 3px #ffe08a, inset 0 -6px 0 #c48a1e, inset 0 3px 0 3px rgba(255,255,255,.35); }
.btn.green { --f: #3fc46f; --t: #04210f; box-shadow: inset 0 0 0 3px #8ff0b0, inset 0 -6px 0 #1d8a47, inset 0 3px 0 3px rgba(255,255,255,.3); }
.btn.ghost { --f: transparent; box-shadow: inset 0 0 0 3px var(--line2); }
.btn.big { padding: 15px 24px; font-size: 18px; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fine { color: var(--dim); font-size: 12.5px; }

/* pixel icons (CSS-drawn) */
.ic-gold, .ic-pump, .ic-wallet, .ic-energy { display: inline-block; width: 14px; height: 14px; flex: none; image-rendering: pixelated; }
.ic-gold { background: var(--gold); clip-path: polygon(30% 0, 70% 0, 70% 15%, 85% 15%, 85% 30%, 100% 30%, 100% 70%, 85% 70%, 85% 85%, 70% 85%, 70% 100%, 30% 100%, 30% 85%, 15% 85%, 15% 70%, 0 70%, 0 30%, 15% 30%, 15% 15%, 30% 15%); box-shadow: inset -3px -3px 0 var(--gold-d), inset 3px 3px 0 #fff3c2; }
.ic-pump { background: var(--pump); clip-path: polygon(20% 0, 80% 0, 80% 20%, 100% 20%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0 80%, 0 20%, 20% 20%); box-shadow: inset -3px -3px 0 var(--pump-d), inset 3px 3px 0 #c9ffd9; }
.ic-wallet { background: currentColor; clip-path: polygon(0 20%, 80% 20%, 80% 40%, 100% 40%, 100% 80%, 80% 80%, 80% 100%, 0 100%); }
.ic-energy { background: var(--energy); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 0 22px; height: 64px;
  background: rgba(13,11,26,.88); backdrop-filter: blur(8px); border-bottom: 3px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.lm { width: 26px; height: 26px; background: var(--gold); clip-path: polygon(0 0, 70% 0, 70% 10%, 85% 10%, 85% 45%, 75% 45%, 75% 55%, 90% 55%, 90% 90%, 80% 90%, 80% 100%, 0 100%); box-shadow: inset -4px -4px 0 var(--gold-d), inset 4px 4px 0 #fff3c2; }
.lt { font: 700 24px var(--px); letter-spacing: .06em; text-shadow: 0 2px 0 #7a62ff, 0 4px 0 #2a1c7a; }
.tabs { display: flex; gap: 2px; }
.tabs button { background: none; border: 0; padding: 8px 14px; font: 600 16px var(--px); color: var(--mute); }
.tabs button:hover { color: #fff; }
.tabs button.on { color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--panel); padding: 8px 12px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); font: 600 15px var(--px); font-variant-numeric: tabular-nums; }
.pump-chip { color: var(--pump); }
.pump-chip:hover { box-shadow: inset 0 0 0 3px var(--pump-d); }
.btn.wallet { --f: #6c4cf5; --t: #fff; box-shadow: inset 0 0 0 3px #a693ff, inset 0 -6px 0 #3e25b0, inset 0 3px 0 3px rgba(255,255,255,.2); padding: 9px 14px; }
.btn.wallet.on { --f: var(--panel2); box-shadow: inset 0 0 0 3px var(--line2); }

main { max-width: 1240px; margin: 0 auto; padding: 0 22px 60px; }
.view { display: none; } .view.on { display: block; }
.page-head { padding: 34px 0 24px; }
.page-head h1 { font-size: 40px; }
.page-head p { color: var(--mute); margin: 10px 0 0; max-width: 620px; }

/* ================= CARD (3D slab) ================= */
.card { --w: 150px; --fc: var(--ember); --fr: var(--fc);
  position: relative; width: var(--w); aspect-ratio: 5 / 7; flex: none; font-size: calc(var(--w) * .075); user-select: none;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s;
  filter: drop-shadow(0 .5em .7em rgba(0,0,0,.55)); }
.card.f-ember { --fc: var(--ember); } .card.f-tide { --fc: var(--tide); } .card.f-grove { --fc: var(--grove); } .card.f-dusk { --fc: var(--dusk); }
.card.r-L { --fr: #f2c14e; }
.card .slab { position: absolute; inset: 0; clip-path: var(--notch); background: color-mix(in srgb, var(--fr) 45%, #000); transform: translateY(.45em); }
.card .face { position: absolute; inset: 0; clip-path: var(--notch); background: var(--fr); padding: .38em; display: flex; flex-direction: column;
  box-shadow: inset .18em .18em 0 rgba(255,255,255,.35), inset -.18em -.18em 0 rgba(0,0,0,.3); }
.card.r-L .face { background: linear-gradient(135deg, #ffe08a, #f2c14e 30%, #b8862a 50%, #ffd76a 70%, #c48a1e); }
.card .in { flex: 1; display: flex; flex-direction: column; background: #15122a; clip-path: var(--notch); padding: .3em; min-height: 0; }
.card .hd { display: flex; align-items: center; gap: .3em; height: 1.7em; }
.card .cost { flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; font: 700 1.05em var(--px); color: #fff; position: relative; text-shadow: 0 .08em 0 #0a3a66; }
.card .cost::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--energy); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: inset -.2em -.2em 0 #1f7fc0; }
.card .cost { isolation: isolate; }
.card .nm { flex: 1; font: 700 .86em/1 var(--px); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .1em 0 #000; }
.card .art { position: relative; margin-top: .25em; aspect-ratio: 112 / 96; flex: none; clip-path: var(--notch); background: #000; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.card .art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 .15em rgba(0,0,0,.6); pointer-events: none; }
.card .ty { display: flex; align-items: center; justify-content: space-between; margin-top: .3em; font: 400 .5em var(--tiny); color: var(--mute); letter-spacing: .04em; }
.card .gem { width: .9em; height: .9em; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #8a8fa3; }
.card.r-R .gem { background: #7fc3ff; } .card.r-E .gem { background: #c58bff; } .card.r-L .gem { background: var(--gold); }
.card .tx { flex: 1; margin-top: .25em; font: 500 .68em/1.22 var(--sans); color: #d9d3f3; overflow: hidden; text-align: center; padding: 0 .1em; }
.card .tx b { font: 700 1.05em var(--px); color: #fff; }
.card .tx i { color: var(--mute); }
.card .ft { display: flex; justify-content: space-between; align-items: flex-end; height: 1.8em; margin-top: .15em; }
.card .st { min-width: 2em; height: 1.75em; display: flex; align-items: center; justify-content: center; gap: .15em; font: 700 1.05em var(--px); color: #fff; clip-path: var(--notch); padding: 0 .3em; text-shadow: 0 .08em 0 rgba(0,0,0,.5); }
.card .st.atk { background: #c2412c; box-shadow: inset -.15em -.15em 0 #7a2216, inset .15em .15em 0 #ff8a6a; }
.card .st.hp { background: #2f9e57; box-shadow: inset -.15em -.15em 0 #19613a, inset .15em .15em 0 #7ff0a4; }
.card .st svg { width: .8em; height: .8em; shape-rendering: crispEdges; }
.card .st.up { color: #d6ff9a; } .card .st.down { color: #ffd0c4; }
.card .no { font: 400 .5em var(--tiny); color: var(--dim); padding-bottom: .5em; }
.card .glare { position: absolute; inset: 0; clip-path: var(--notch); pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.22), transparent 55%); opacity: 0; transition: opacity .2s; }
.card.tilt:hover .glare { opacity: 1; }
.card.foil .face::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: linear-gradient(115deg, transparent 25%, rgba(255,120,200,.5) 35%, rgba(120,220,255,.5) 42%, rgba(255,240,140,.5) 49%, transparent 60%); background-size: 250% 100%; animation: holo 4s linear infinite; }
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.card.foil .badge-foil { position: absolute; top: -.5em; right: .7em; z-index: 3; font: 700 .5em var(--tiny); background: #fff; color: #6c4cf5; padding: .25em .5em; clip-path: var(--notch); }
.card.r-L .face::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%); background-size: 300% 100%; animation: holo 3s linear infinite; mix-blend-mode: overlay; }
.card.tech .in { background: #1a1230; }

/* back */
.card.back .face { background: #2a2154; }
.card.back .in { background: repeating-conic-gradient(#221a48 0 25%, #1b1540 0 50%) 0 0 / 1em 1em; display: grid; place-items: center; }
.card.back .crest { width: 46%; aspect-ratio: 1; background: var(--gold); clip-path: polygon(0 0, 70% 0, 70% 10%, 85% 10%, 85% 45%, 75% 45%, 75% 55%, 90% 55%, 90% 90%, 80% 90%, 80% 100%, 0 100%); box-shadow: inset -.4em -.4em 0 var(--gold-d), inset .4em .4em 0 #fff3c2; }
.card.back .slab { background: #120e28; }

/* compact (on the board) */
.card.unit { font-size: calc(var(--w) * .09); }
.card.unit .ty, .card.unit .tx, .card.unit .no { display: none; }
.card.unit .art { flex: 1; aspect-ratio: auto; }
.card.unit .nm { font-size: .78em; }
.card.unit .ft { margin-top: .2em; }
.card.unit .st { font-size: 1.15em; }
.card .ukw { display: none; }
.card.unit .ukw { display: flex; gap: .2em; position: absolute; left: .5em; right: .5em; bottom: 2.6em; justify-content: center; flex-wrap: wrap; z-index: 2; }
.card.unit .ukw span { font: 700 .42em var(--tiny); background: rgba(10,8,22,.85); color: #fff; padding: .2em .4em; clip-path: var(--notch); }
.wardmark { position: absolute; inset: -.3em; z-index: 3; pointer-events: none; clip-path: var(--notch); box-shadow: inset 0 0 0 .22em #9fe8ff, inset 0 0 1em rgba(159,232,255,.45); animation: ward 1.6s ease-in-out infinite; }
@keyframes ward { 50% { box-shadow: inset 0 0 0 .22em #d7f6ff, inset 0 0 1.4em rgba(159,232,255,.7); } }

/* ================= HOME ================= */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; padding: 48px 0 36px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--tiny); color: var(--mute); background: var(--panel); padding: 7px 12px; clip-path: var(--notch); }
.eyebrow .dot { width: 8px; height: 8px; background: var(--pump); animation: blink 1.4s steps(2) infinite; }
.hero h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.02; margin: 20px 0 18px; }
.hero p { color: var(--mute); font-size: 17px; max-width: 520px; margin: 0; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.resume { margin-top: 18px; display: inline-flex; gap: 12px; align-items: center; background: var(--panel); padding: 8px 8px 8px 16px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--gold-d); color: var(--gold); font: 600 14px var(--px); }
.hero-stage { position: relative; height: 420px; perspective: 1000px; }
.hero-fan { position: absolute; inset: 0; transform-style: preserve-3d; animation: sway 8s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotateY(-8deg) rotateX(4deg); } }
.hero-fan .card { --w: 210px; position: absolute; left: 50%; top: 46%; }
.hero-fan .card:nth-child(1) { transform: translate(-118%, -50%) rotateY(28deg) rotateZ(-6deg); animation: bob 4s ease-in-out infinite; }
.hero-fan .card:nth-child(2) { transform: translate(-50%, -56%) translateZ(60px); z-index: 2; animation: bob2 4s ease-in-out infinite .6s; }
.hero-fan .card:nth-child(3) { transform: translate(18%, -50%) rotateY(-28deg) rotateZ(6deg); animation: bob3 4s ease-in-out infinite 1.2s; }
@keyframes bob { 50% { transform: translate(-118%, -54%) rotateY(28deg) rotateZ(-6deg); } }
@keyframes bob2 { 50% { transform: translate(-50%, -61%) translateZ(60px); } }
@keyframes bob3 { 50% { transform: translate(18%, -54%) rotateY(-28deg) rotateZ(6deg); } }
.hero-floor { position: absolute; left: 10%; right: 10%; bottom: 18px; height: 40px; background: radial-gradient(ellipse at center, rgba(122,98,255,.35), transparent 70%); filter: blur(4px); }

.modes { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 16px; }
.mode p { color: var(--mute); font-size: 14px; margin: 0 0 16px; }
.diffs { display: grid; gap: 8px; }
.diff { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: var(--bg2); padding: 12px 14px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); transition: box-shadow .15s, transform .1s; }
.diff:hover { box-shadow: inset 0 0 0 3px var(--gold); transform: translateX(3px); }
.diff b { font: 700 17px var(--px); }
.diff small { display: block; color: var(--dim); font-size: 12px; }
.diff .rw { text-align: right; font: 600 13px var(--px); white-space: nowrap; }
.diff .rw .g { color: var(--gold); display: block; } .diff .rw .p { color: var(--pump); display: block; } .diff .rw .p.off { color: var(--dim); }
.ladder { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ladder li { text-align: center; font: 400 10px var(--tiny); color: var(--dim); }
.ladder .medal { aspect-ratio: 1; clip-path: var(--notch); background: #000; position: relative; margin-bottom: 6px; box-shadow: inset 0 0 0 3px var(--line2); }
.ladder .medal img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; object-position: 50% 70%; image-rendering: pixelated; }
.ladder li b { display: block; font: 600 12px/1.15 var(--px); color: var(--text); margin-bottom: 2px; }
.ladder li.next .medal { box-shadow: inset 0 0 0 3px var(--gold); }
.ladder li.next .medal::after { content: 'NEXT'; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font: 700 9px var(--tiny); background: var(--gold); color: #2a1a00; padding: 1px 5px; }
.ladder li.done .medal img { filter: grayscale(1) brightness(.5); }
.ladder li.done .medal::after { content: ''; position: absolute; inset: 30%; background: var(--pump); clip-path: polygon(10% 50%, 25% 50%, 25% 65%, 40% 65%, 40% 80%, 55% 80%, 55% 65%, 70% 65%, 70% 50%, 85% 50%, 85% 35%, 100% 35%, 100% 20%, 85% 20%, 85% 35%, 70% 35%, 70% 50%, 55% 50%, 55% 65%, 40% 65%, 40% 50%, 25% 50%, 25% 35%, 10% 35%); }
.g-prize { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.g-prize span { font: 600 13px var(--px); background: var(--bg2); padding: 6px 10px; clip-path: var(--notch); display: inline-flex; align-items: center; gap: 6px; }
.vault-mini .big { font: 700 34px/1 var(--px); color: var(--pump); display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.vault-mini .big .ic-pump { width: 22px; height: 22px; }
.vault-mini .usd { color: var(--mute); font-size: 13px; }
.meter { height: 12px; background: var(--bg2); clip-path: var(--notch); margin: 14px 0 6px; position: relative; }
.meter i { position: absolute; left: 3px; top: 3px; bottom: 3px; background: repeating-linear-gradient(90deg, var(--pump) 0 6px, var(--pump-d) 6px 8px); max-width: calc(100% - 6px); }
.vault-mini .lbl { display: flex; justify-content: space-between; font: 400 10px var(--tiny); color: var(--dim); }
.vault-mini .btn { width: 100%; margin-top: 14px; }

.boards { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.feed, .lb { list-style: none; margin: 0; padding: 0; }
.feed li, .lb li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 2px solid var(--line); font-size: 14px; }
.feed li:last-child, .lb li:last-child { border-bottom: 0; }
.feed .who { font: 600 14px var(--px); }
.feed .what { color: var(--mute); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .amt { font: 600 13px var(--px); color: var(--pump); white-space: nowrap; }
.feed .ago { font: 400 10px var(--tiny); color: var(--dim); }
.lb li .rk { width: 26px; font: 700 15px var(--px); color: var(--dim); }
.lb li:nth-child(1) .rk { color: var(--gold); } .lb li:nth-child(2) .rk { color: #cfd6e6; } .lb li:nth-child(3) .rk { color: #d9905a; }
.lb li .nm { flex: 1; font: 600 14px var(--px); }
.lb li .v { font: 600 13px var(--px); color: var(--pump); }
.empty { color: var(--dim); font-size: 13px; padding: 10px 4px; }

.how { margin-top: 16px; }
.how h2 { margin-bottom: 16px; }
.steps { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps li { display: flex; gap: 12px; background: var(--bg2); padding: 14px; clip-path: var(--notch); }
.steps li > b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--gold); color: #2a1a00; font: 700 18px var(--px); clip-path: var(--notch); }
.steps h3 { font-size: 17px; }
.steps p { margin: 4px 0 0; color: var(--mute); font-size: 13px; }
.kwlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.kwlist div { background: var(--bg2); padding: 10px 12px; clip-path: var(--notch); }
.kwlist dt { font: 700 14px var(--px); color: var(--gold); }
.kwlist dd { margin: 2px 0 0; color: var(--mute); font-size: 13px; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; color: var(--dim); font: 400 11px var(--tiny); }

/* ================= PACKS ================= */
.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.offer { display: flex; gap: 26px; align-items: center; }
.offer h3 { font-size: 24px; }
.offer p { color: var(--mute); font-size: 14px; margin: 6px 0 14px; }
.offer .price { display: inline-flex; align-items: center; gap: 6px; font: 700 18px var(--px); color: var(--gold); margin-bottom: 14px; }
.pack { --pw: 130px; --pc: #6c4cf5; width: var(--pw); aspect-ratio: 5 / 7.6; flex: none; position: relative; transform-style: preserve-3d; transform: perspective(600px) rotateY(-14deg) rotateX(4deg); transition: transform .3s; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.offer:hover .pack { transform: perspective(600px) rotateY(-4deg) rotateX(2deg) translateY(-6px); }
.pack.champ { --pc: #e2603a; }
.pack .pf { position: absolute; inset: 0; clip-path: var(--notch); background: var(--pc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7%;
  box-shadow: inset calc(var(--pw) * .04) calc(var(--pw) * .04) 0 rgba(255,255,255,.25), inset calc(var(--pw) * -.04) calc(var(--pw) * -.04) 0 rgba(0,0,0,.3); }
.pack .pf::before, .pack .pf::after { content: ''; position: absolute; left: 0; right: 0; height: 7%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 6%, transparent 6% 12%); }
.pack .pf::before { top: 0; } .pack .pf::after { bottom: 0; }
.pack .pimg { width: 72%; aspect-ratio: 112 / 96; clip-path: var(--notch); background: #000; position: relative; box-shadow: 0 0 0 3px #fff; }
.pack .pimg img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pack .pl { font: 700 calc(var(--pw) * .14) var(--px); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); letter-spacing: .04em; }
.pack .ps { font: 400 calc(var(--pw) * .065) var(--tiny); color: rgba(255,255,255,.85); }
.pack .side { position: absolute; top: 0; right: 0; width: 10px; height: 100%; background: color-mix(in srgb, var(--pc) 55%, #000); transform-origin: right; transform: rotateY(90deg); }
.odds { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.odds table { width: 100%; border-collapse: collapse; font-size: 14px; }
.odds caption { text-align: left; font: 700 16px var(--px); padding-bottom: 8px; }
.odds td { padding: 6px 0; border-bottom: 2px solid var(--line); color: var(--mute); }
.odds td:last-child { text-align: right; color: var(--text); font-family: var(--px); }

.opening { position: fixed; inset: 0; z-index: 60; background: rgba(8,6,18,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 20px; }
.opening .pack { --pw: 200px; cursor: pointer; animation: hover 2.4s ease-in-out infinite; }
.opening .pack.tear { animation: tear .55s forwards; }
@keyframes hover { 50% { transform: perspective(600px) rotateY(10deg) translateY(-10px); } }
@keyframes tear { 30% { transform: perspective(600px) scale(1.1) rotateZ(4deg); } 100% { transform: perspective(600px) scale(.4) rotateY(90deg); opacity: 0; } }
.opening .hint2 { color: var(--mute); font: 600 15px var(--px); }
.pulls { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding-bottom: 28px; }
.flip { --w: 176px; width: var(--w); aspect-ratio: 5 / 7; position: relative; cursor: pointer; animation: deal .45s backwards; }
.flip:not(.up):hover { transform: translateY(-6px); }
.flip > .card { position: absolute; inset: 0; }
.flip > .card:not(.back), .flip.up > .card.back { display: none; }
.flip.up > .card:not(.back) { display: block; }
.flip.turning { animation: turn .34s ease-in-out; }
@keyframes turn { 50% { transform: scaleX(0) scaleY(1.05); } }
@keyframes deal { from { transform: translateY(60px) rotate(8deg); opacity: 0; } }
.flip .melt { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font: 600 13px var(--px); color: var(--gold); display: none; }
.flip .melt.new { color: var(--pump); }
.flip.up .melt { display: block; }
.flip.r-E.up { filter: drop-shadow(0 0 16px rgba(197,139,255,.55)); }
.flip.r-L.up { filter: drop-shadow(0 0 22px rgba(242,193,78,.65)); }

/* ================= COLLECTION ================= */
.builder { display: grid; grid-template-columns: 1fr 310px; gap: 22px; align-items: start; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.filters button { border: 0; background: var(--panel); padding: 7px 12px; font: 600 14px var(--px); color: var(--mute); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); }
.filters button.on { color: #fff; box-shadow: inset 0 0 0 3px var(--gold); }
.filters .sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 16px; }
.slot { container-type: inline-size; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.slot .card { --w: min(176px, 100cqw); }
.slot.missing .card { filter: grayscale(1) brightness(.35) drop-shadow(0 .5em .7em rgba(0,0,0,.55)); }
.slot .cnt { font: 400 10px var(--tiny); color: var(--mute); display: flex; gap: 8px; align-items: center; }
.slot .pips { display: flex; gap: 3px; }
.slot .pips i { width: 9px; height: 9px; background: var(--line2); }
.slot .pips i.on { background: var(--gold); }
.decklist { position: sticky; top: 84px; }
.decklist header b { font: 700 18px var(--px); }
.decklist #deck-n.ok { color: var(--pump); }
.curve { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: 10px 0 18px; }
.curve div { flex: 1; background: var(--energy); min-height: 3px; position: relative; box-shadow: inset 0 3px 0 rgba(255,255,255,.3); }
.curve div span { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font: 400 9px var(--tiny); color: var(--dim); }
#deck-ul { list-style: none; padding: 0; margin: 0 0 14px; max-height: 50vh; overflow: auto; }
#deck-ul li { display: flex; align-items: center; gap: 10px; padding: 6px 6px; cursor: pointer; font: 500 15px var(--px); }
#deck-ul li:hover { background: var(--bg2); }
#deck-ul .dc { width: 22px; height: 22px; display: grid; place-items: center; background: var(--energy); color: #fff; font: 700 12px var(--px); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; }
#deck-ul .dn { flex: 1; } #deck-ul .dn i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; }
#deck-ul .dx { color: var(--mute); }

/* ================= DUEL TABLE ================= */
body.in-duel main { max-width: none; padding: 0; }
body.in-duel .top { display: none; }
.table {
  --hw: clamp(84px, min(11vw, 17vh), 136px);
  --uw: clamp(62px, min(calc((100vw - 200px) / 4 - 18px), calc((100vh - 330px - var(--hw) * 1.4) / 2.6 - 12px)), 128px);
  height: 100vh; height: 100dvh; min-height: 540px; display: grid; grid-template-rows: auto 1fr auto auto; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, #2b2360 0%, #15112e 60%, #0b0918 100%);
}
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; position: relative; z-index: 3; }
.bar.me { background: linear-gradient(transparent, rgba(0,0,0,.25)); }
.hero-plate { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: var(--panel); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line2); }
.portrait { width: 48px; height: 48px; flex: none; clip-path: var(--notch); background: #000; position: relative; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; image-rendering: pixelated; transform: scale(1.6); transform-origin: 50% 55%; }
.hp-box b { font: 700 24px/1 var(--px); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.hp-box b::before { content: ''; width: 14px; height: 13px; background: var(--red); clip-path: polygon(0 15%, 15% 15%, 15% 0, 40% 0, 40% 15%, 60% 15%, 60% 0, 85% 0, 85% 15%, 100% 15%, 100% 55%, 85% 55%, 85% 70%, 70% 70%, 70% 85%, 55% 85%, 55% 100%, 45% 100%, 45% 85%, 30% 85%, 30% 70%, 15% 70%, 15% 55%, 0 55%); }
.hp-box small { display: block; font: 400 10px var(--tiny); color: var(--mute); margin-top: 3px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-bar { width: 130px; height: 8px; background: #0b0918; margin-top: 4px; position: relative; }
.hp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--red) 0 6px, #c43a3a 6px 8px); transition: width .4s steps(8); }
.energy { display: flex; gap: 3px; align-items: center; }
.energy i { width: 13px; height: 13px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #23305a; }
.energy i.full { background: var(--energy); }
.energy b { margin-left: 8px; font: 600 14px var(--px); color: var(--energy); }
.pile { display: flex; align-items: center; gap: 6px; font: 400 10px var(--tiny); color: var(--mute); }
.pile .card { --w: 24px; filter: none; }
.opp-hand { display: flex; margin-left: auto; }
.opp-hand .card { --w: 30px; margin-left: -16px; filter: none; }
.bar .spacer { flex: 1; }
.btn.flee { padding: 7px 11px; font-size: 13px; }

.arena { position: relative; perspective: 1100px; perspective-origin: 50% 20%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.mat { transform: rotateX(24deg); transform-style: preserve-3d; padding: 14px 20px; position: relative;
  background: linear-gradient(rgba(122,98,255,.10) 2px, transparent 2px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(122,98,255,.10) 2px, transparent 2px) 0 0 / 24px 24px, rgba(20,16,44,.65);
  clip-path: var(--notch); box-shadow: inset 0 0 0 3px #3a3170, 0 40px 60px rgba(0,0,0,.5); }
.lanes { display: flex; justify-content: center; gap: 14px; padding: 8px 0; }
.lane { width: calc(var(--uw) + 12px); aspect-ratio: 5 / 7.4; position: relative; display: grid; place-items: center; clip-path: var(--notch);
  background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.07); }
.lane .card { --w: var(--uw); }
.lane.open { background: rgba(242,193,78,.14); box-shadow: inset 0 0 0 3px var(--gold); cursor: pointer; animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { background: rgba(242,193,78,.26); } }
.lane .card.targetable { cursor: pointer; }
.lane .card.targetable::after { content: ''; position: absolute; inset: -.35em; clip-path: var(--notch); box-shadow: inset 0 0 0 .22em var(--gold); animation: pulse2 .8s steps(2) infinite; z-index: 4; pointer-events: none; }
@keyframes pulse2 { 50% { box-shadow: inset 0 0 0 .22em #fff; } }
.lane .card.rest .art img { filter: saturate(.4) brightness(.7); }
.lane .card.rest::before { content: 'Zz'; position: absolute; z-index: 5; right: .5em; top: 2em; font: 700 .9em var(--px); color: #cfc7ff; text-shadow: 0 .1em 0 #000; animation: zz 1.6s steps(4) infinite; }
@keyframes zz { 50% { transform: translateY(-.3em); } }
.lane .card.ready .face { box-shadow: inset .18em .18em 0 rgba(255,255,255,.35), inset -.18em -.18em 0 rgba(0,0,0,.3), 0 0 0 .2em var(--gold); }
.midline { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; transform: translateZ(1px); }
.midline .rule { flex: 1; height: 3px; background: repeating-linear-gradient(90deg, rgba(242,193,78,.6) 0 6px, transparent 6px 12px); }
.turnlbl { font: 700 15px var(--px); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; min-width: 140px; text-align: center; }
.clash { font-size: 17px !important; padding: 12px 26px !important; letter-spacing: .08em; }
.hint { display: flex; gap: 10px; align-items: center; background: #0b0918; padding: 6px 6px 6px 16px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--gold); font: 600 14px var(--px); white-space: nowrap; }
.hint .btn { padding: 6px 12px; font-size: 13px; }

.handzone { display: flex; justify-content: center; align-items: flex-end; padding: 2px 12px 10px; height: calc(var(--hw) * 1.4 + 14px); position: relative; z-index: 4; }
.hand { display: flex; justify-content: center; }
.hand .card { --w: var(--hw); cursor: pointer; transition: transform .18s, margin .2s; }
.hand .card:hover { transform: translateY(-14%) scale(1.06); z-index: 5; }
.hand .card.sel { transform: translateY(-18%) scale(1.08); z-index: 6; }
.hand .card.sel .face { box-shadow: inset .18em .18em 0 rgba(255,255,255,.35), inset -.18em -.18em 0 rgba(0,0,0,.3), 0 0 0 .25em #fff; }
.hand .card.cant .in { filter: brightness(.55) saturate(.5); }
.hand .card.drawn { animation: drawin .45s backwards; }
@keyframes drawin { from { transform: translate(50vw, -20vh) rotate(25deg) scale(.6); opacity: 0; } }

.lunge-up { animation: lungeU .32s ease-in-out; z-index: 6; }
.lunge-down { animation: lungeD .32s ease-in-out; z-index: 6; }
@keyframes lungeU { 45% { transform: translateY(-45%) scale(1.08); } }
@keyframes lungeD { 45% { transform: translateY(45%) scale(1.08); } }
.hit { animation: hit .3s steps(4); }
@keyframes hit { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.flash .art img { animation: flash .3s steps(2); }
@keyframes flash { 50% { filter: brightness(3) saturate(0); } }
.dying { animation: die .45s steps(6) forwards; }
@keyframes die { to { transform: scale(.4) rotate(20deg); opacity: 0; filter: grayscale(1) brightness(2); } }
.arrive { animation: arrive .4s cubic-bezier(.2,1.6,.4,1) backwards; }
@keyframes arrive { from { transform: translateY(-60%) scale(1.3); opacity: 0; } }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.float { position: absolute; transform: translate(-50%, -50%); font: 700 30px var(--px); color: #ff6b5b; text-shadow: 3px 3px 0 #000; animation: floatUp .9s forwards; white-space: nowrap; }
.float.heal { color: var(--heal); } .float.info { color: var(--gold); font-size: 17px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -170%); } }
.spark { position: absolute; width: 6px; height: 6px; background: #fff; animation: spark .5s steps(5) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.castcard { position: fixed; left: 50%; top: 44%; z-index: 55; transform: translate(-50%, -50%); animation: cast 1s forwards; pointer-events: none; }
.castcard .card { --w: 200px; }
@keyframes cast { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.7) rotateY(60deg); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
.banner { position: absolute; left: 0; right: 0; top: 44%; z-index: 30; text-align: center; pointer-events: none; animation: banner 1.1s forwards; }
.banner span { display: inline-block; font: 700 clamp(26px, 4.4vw, 42px) var(--px); color: #fff; background: #0b0918; padding: 12px 48px; clip-path: var(--notch); box-shadow: inset 0 0 0 4px var(--gold); text-shadow: 0 3px 0 #7a62ff; }
@keyframes banner { 0% { opacity: 0; transform: scaleY(0); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.shake { animation: shake .3s steps(4); }
@keyframes shake { 25% { transform: translate(-5px, 3px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, -2px); } }

.inspect { position: fixed; z-index: 45; pointer-events: none; display: none; }
.inspect .card { --w: 240px; }
.inspect.on { display: block; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(6,4,14,.82); display: grid; place-items: center; padding: 18px; }
.dialog { width: 100%; max-width: 460px; text-align: center; padding: 30px; }
.dialog h2 { font-size: 40px; }
.dialog h2.win { color: var(--gold); text-shadow: 0 3px 0 #9a6a10; }
.dialog h2.lose { color: #ff8a7a; text-shadow: 0 3px 0 #6a1a14; }
.dialog p { color: var(--mute); margin: 10px 0 18px; }
.dialog .eyebrow { margin-bottom: 8px; }
.rewards { display: grid; gap: 8px; margin: 0 0 20px; }
.rewards div { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg2); padding: 12px; clip-path: var(--notch); font: 700 22px var(--px); }
.rewards .g { color: var(--gold); } .rewards .p { color: var(--pump); }
.rewards small { display: block; font: 400 12px var(--sans); color: var(--mute); }
.rewards .note { font: 500 13px var(--sans); color: var(--mute); }
.dialog .row { justify-content: center; }
.vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 14px; }
.vs .portrait { width: 96px; height: 96px; }
.vs small { display: block; font: 600 13px var(--px); margin-top: 8px; }
.vs h3 { font-size: 34px; color: var(--gold); }
.close-x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--bg2); width: 32px; height: 32px; clip-path: var(--notch); font: 700 16px var(--px); color: var(--mute); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; text-align: left; margin: 16px 0; font-size: 14px; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; font-family: var(--px); font-weight: 600; }
.addr { font: 500 12px ui-monospace, monospace; color: var(--mute); word-break: break-all; }
.err { color: #ff8a7a; font-size: 13px; min-height: 18px; margin-top: 8px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; background: #0b0918; padding: 12px 18px; z-index: 90; transition: .2s; pointer-events: none; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line2); font: 600 15px var(--px); max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; }
  .hero-stage { height: 340px; }
  .hero-fan .card { --w: 170px; }
  .modes, .boards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .kwlist { grid-template-columns: 1fr 1fr; }
  .builder { grid-template-columns: 1fr; }
  .decklist { position: static; }
  .shop, .odds { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding: 0 14px 48px; }
  .top { padding: 0 10px; gap: 8px; height: 56px; backdrop-filter: none; background: #0d0b1a; }
  .lt { font-size: 17px; letter-spacing: .02em; }
  .lm { width: 18px; height: 18px; }
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(13,11,26,.96); border-top: 3px solid var(--line); justify-content: space-around; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .tabs button { flex: 1; padding: 10px 0; }
  .tabs button.on { box-shadow: inset 0 3px 0 var(--gold); }
  body:not(.in-duel) main { padding-bottom: 90px; }
  .top-r { gap: 6px; }
  .chip { padding: 6px 8px; font-size: 13px; gap: 5px; }
  .gold-chip { display: none; }
  .btn.wallet { padding: 7px 10px; font-size: 13px; }
  .btn.wallet span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero h1 { font-size: 40px; }
  .hero-stage { height: 270px; }
  .hero-fan .card { --w: 130px; }
  .hero-cta .btn { flex: 1; }
  .steps, .kwlist { grid-template-columns: 1fr; }
  .ladder { gap: 4px; } .ladder li b { font-size: 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 18px 10px; }
  .offer { flex-direction: column; text-align: center; }
  .flip { --w: 104px; }
  .pulls { gap: 8px; }
  .table { --uw: calc((100vw - 64px) / 4); --hw: calc((100vw - 10px) / 4.4); }
  .mat { padding: 8px 6px; transform: rotateX(16deg); }
  .lanes { gap: 5px; }
  .lane { width: calc(var(--uw) + 4px); }
  .bar { padding: 7px 8px; gap: 7px; }
  .portrait { width: 36px; height: 36px; }
  .hp-bar { width: 60px; }
  .hp-box b { font-size: 19px; }
  .hp-box small { max-width: 80px; }
  .energy i { width: 9px; height: 9px; }
  .energy b { margin-left: 4px; font-size: 12px; }
  .pile { display: none; }
  .opp-hand .card { --w: 20px; margin-left: -12px; }
  .turnlbl { min-width: 0; font-size: 12px; }
  .clash { padding: 9px 14px !important; font-size: 14px !important; }
  .midline { gap: 8px; }
  .hint { font-size: 12px; padding-left: 10px; }
  .card.unit .ukw { display: none; }
  .castcard .card { --w: 150px; }
  .dialog { padding: 24px 18px; }
}

/* numbers use Silkscreen — its digits read clearly at pixel sizes */
.card .cost, .card .st, .hp-box b, .chip b, .energy b, .vault-mini .big, .rewards div, .float, .diff .rw, .g-prize span,
.decklist #deck-n, #deck-ul .dc, #deck-ul .dx, .lb li .v, .lb li .rk, .feed .amt, .offer .price, .kv dd, .turnlbl { font-family: var(--tiny); font-weight: 700; letter-spacing: 0; }
.card .cost { font-size: .82em; }
.card .st { font-size: .82em; }
.card.unit .st { font-size: .95em; }
.hp-box b { font-size: 20px; }
.float { font-size: 26px; }
.float.info { font-size: 14px; }
.vault-mini .big { font-size: 28px; }
.rewards div { font-size: 18px; }
.turnlbl { font-size: 12px; }
@media (max-width: 640px) { .hp-box b { font-size: 16px; } .turnlbl { font-size: 10px; } }

/* X (Twitter) links */
.ic-x { width: 14px; height: 14px; flex: none; shape-rendering: crispEdges; }
a.chip.x-link { color: var(--text); text-decoration: none; }
a.chip.x-link:hover { box-shadow: inset 0 0 0 3px var(--hi); }
.x-follow { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--mute); text-decoration: none; font-size: 14px; }
.x-follow .ic-x { width: 18px; height: 18px; color: #fff; background: #000; padding: 6px; box-sizing: content-box; clip-path: var(--notch); }
.x-follow b { color: #fff; }
.x-follow:hover span { color: #fff; }
.foot a { color: var(--mute); }
@media (max-width: 900px) { .x-h { display: none; } }
@media (max-width: 640px) { a.chip.x-link { display: none; } .x-follow { font-size: 13px; } }

/* $BITBRAWL coin */
a.btn { text-decoration: none; }
.buy-top { padding: 9px 14px; font-size: 14px; }
.ca-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; background: var(--panel); padding: 8px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--pump-d); max-width: 720px; }
.ca-l { flex: 1; min-width: 0; padding-left: 8px; }
.ca-t { display: block; font: 700 10px var(--tiny); color: var(--pump); }
.ca { display: block; font: 500 12.5px ui-monospace, monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-ca { width: 100%; word-break: break-all; }
.foot-ca code { color: var(--mute); }
@media (max-width: 900px) { .bt-l { display: none; } }
@media (max-width: 640px) { .buy-top { padding: 7px 9px; font-size: 12px; } .ca-box .ca-l { flex-basis: 100%; } }
@media (max-width: 640px) { .pump-chip { display: none; } }