/* Scorecard, feed, fee flow, receipts, token, fight card, FAQ, corners, footer */

/* ---------- scorecard (ink) ---------- */
.scorecard { background: var(--ink); color: var(--chalk); }
.scorecard .kicker { color: var(--banana); }
.sc-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.chart { margin: 0; padding: 1rem 1rem 0.75rem; background: var(--ink-2); border: 2px solid #5E5436; }
#chart { display: block; width: 100%; height: auto; }
#chart .ax { font-family: var(--f-mono); font-size: 12px; fill: #B9B09A; }
#chart .ax--r { font-weight: 700; fill: var(--banana); }
#chart .grid { stroke: #3F3826; stroke-width: 1; }
#chart .zero { stroke: #8A7F5E; stroke-width: 1.5; }
#chart .future { fill: rgba(255, 243, 196, 0.04); }
#chart .ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
#chart .ln--randy { stroke: var(--banana); stroke-width: 4; }
#chart .ln--alpha { stroke: var(--blue-lite); stroke-width: 4; }
#chart .ln--spy { stroke: var(--chalk); stroke-width: 2; stroke-dasharray: 6 6; }
#chart .area--randy { fill: rgba(255, 210, 63, 0.12); }
#chart .end-lbl { font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
#chart .draw { animation: draw 1.6s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes draw { from { stroke-dashoffset: var(--len); } }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; padding-top: 0.6rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; }
.lg { display: inline-flex; align-items: center; gap: 0.45rem; }
.lg::before { content: ""; width: 22px; height: 4px; background: var(--banana); }
.lg--alpha::before { background: var(--blue-lite); }
.lg--spy::before { height: 0; border-top: 2px dashed var(--chalk); }

.ledger { border: 2px solid #5E5436; font-variant-numeric: tabular-nums; }
.ledger__head, .ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.5rem; align-items: center; padding: 0.55rem 0.9rem; }
.ledger__head { background: var(--banana); color: var(--ink); font-family: var(--f-slab); font-size: var(--t-md); }
.ledger__head span:nth-child(2) { text-align: center; font-family: var(--f-body); font-stretch: 62%; font-weight: 900; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.ledger__head span:last-child, .ledger__row span:last-child { text-align: right; }
.ledger__row { border-top: 1px dashed #4A4230; font-family: var(--f-mono); font-weight: 700; }
.ledger__row span:first-child { color: var(--banana); }
.ledger__row span:last-child { color: var(--blue-lite); }
.ledger__row span.neg { color: var(--red-lite); }
.ledger__row span:nth-child(2) { text-align: center; font-family: var(--f-body); font-stretch: 62%; font-weight: 800; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: #BFB38A; }
.ledger__row--sub { border-top: 0; padding-top: 0; font-weight: 400; font-size: var(--t-xs); }
.ledger__row--sub span:first-child, .ledger__row--sub span:last-child { color: #B9B09A; }

.judges { max-width: var(--max); margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; overflow-x: auto; }
.judges__table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.judges__table caption { text-align: left; padding-bottom: 0.75rem; font-family: var(--f-body); font-stretch: 62%; font-weight: 850; font-size: var(--t-md); letter-spacing: 0.14em; text-transform: uppercase; color: var(--banana); }
.judges__table th { text-align: left; padding: 0.5rem 0.75rem; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #B9B09A; border-bottom: 2px solid var(--chalk); }
.judges__table td { padding: 0.65rem 0.75rem; border-bottom: 1px dashed #4A4230; }
.judges__table td:first-child { font-family: var(--f-slab); font-size: var(--t-lg); }
.judges__table td.empty { padding: 1.6rem 0.75rem; text-align: center; font-family: var(--f-body); font-size: var(--t-md); color: #D9CFA8; }
.judges__table .neg { color: var(--red-lite); }
.winb { display: inline-block; padding: 0.1rem 0.5rem; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.08em; }
.winb--randy { background: var(--banana); color: var(--ink); }
.winb--alpha { background: var(--blue); color: var(--chalk); }

/* ---------- feed (chalk) ---------- */
.feed { background: var(--chalk); }
.filters { max-width: var(--max); margin: 0 auto 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter { padding: 0.45rem 0.9rem; background: transparent; border: 2px solid var(--ink); font: 700 var(--t-sm)/1 var(--f-mono); letter-spacing: 0.06em; cursor: pointer; color: var(--ink); }
.filter.is-on { background: var(--ink); color: var(--banana); }
.posts { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; columns: 3 300px; column-gap: 1rem; }
.post { break-inside: avoid; margin: 0 0 1rem; padding: 1rem 1.1rem; border: var(--edge); box-shadow: var(--shadow-sm); background: var(--banana-lite); display: grid; gap: 0.7rem; }
.post[hidden] { display: none; }
.post--alpha { background: var(--navy); color: var(--chalk); }
.post--bell { background: var(--ink); color: var(--chalk); }
.post__head { display: flex; align-items: center; gap: 0.6rem; }
.post__av { width: 44px; height: 44px; flex: none; border: 2px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--banana); }
.post--alpha .post__av { background: var(--chalk); }
.post--bell .post__av { background: var(--red); display: grid; place-items: center; font-family: var(--f-slab); color: var(--chalk); font-size: 1.1rem; }
/* crop the full-body art down to each fighter's head */
.post__av { position: relative; }
.post__av img { position: absolute; max-width: none; height: auto; }
.post__av--randy img { width: 195%; left: -66%; top: -5%; }
.post__av--alpha img { width: 157%; left: -18%; top: -2%; }
.post__id { display: grid; line-height: 1.2; }
.post__name { font-weight: 800; }
.post__handle { font-family: var(--f-mono); font-size: var(--t-xs); opacity: 0.75; }
.post__rd { margin-left: auto; }
.post__body { font-size: 0.975rem; line-height: 1.5; }
.post__body--ook { font-family: var(--f-slab); font-size: 2.6rem; line-height: 1; }
.post__pick { display: inline-flex; gap: 0.4rem; align-items: center; width: fit-content; padding: 0.2rem 0.55rem; background: var(--ink); color: var(--banana); font: 700 var(--t-xs)/1.5 var(--f-mono); letter-spacing: 0.06em; }
.post--alpha .post__pick { background: var(--banana); color: var(--ink); }
.post__meta { font-family: var(--f-mono); font-size: var(--t-xs); opacity: 0.7; }

/* ---------- money (electric blue) ---------- */
.money { background: var(--blue); color: var(--chalk); }
.flow { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; }
.flow__step { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: 1.1rem 1.1rem 1.3rem; background: var(--navy); border: var(--edge); box-shadow: var(--shadow); }
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.1rem;
  right: -1.3rem;
  width: 1.2rem;
  height: 1.3rem;
  background: var(--banana);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.flow__step--burn { background: var(--red); }
.flow__n { font-family: var(--f-slab); font-size: 2.6rem; line-height: 1; color: var(--banana); }
.flow__step h3 { font-size: var(--t-lg); }
.flow__step p { font-size: var(--t-sm); color: #D5DBFF; }
.flow__step--burn p { color: var(--chalk); }

.feebar { max-width: var(--max); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.feebar figcaption { margin-bottom: 0.5rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.feebar__track { display: flex; border: var(--edge); box-shadow: var(--shadow); min-height: 58px; }
.feebar__seg { width: calc(var(--w) * 1%); display: flex; align-items: center; gap: 0.5rem; padding: 0 0.9rem; font-family: var(--f-mono); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; }
.feebar__seg b { font-family: var(--f-slab); font-weight: 400; font-size: clamp(0.95rem, 2vw, 1.5625rem); }
.feebar__seg + .feebar__seg { border-left: var(--edge); }
.feebar__seg--pons { background: var(--ink); color: var(--chalk); }
.feebar__seg--randy { background: var(--banana); color: var(--ink); }
.feebar__seg--alpha { background: var(--navy); color: var(--chalk); }

/* ---------- receipts (ink) ---------- */
.proof { background: var(--ink); color: var(--chalk); }
.proof .kicker { color: var(--banana); }
.proof__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.claim { display: grid; align-content: start; gap: 0.55rem; padding-top: 1rem; border-top: 6px solid var(--banana); }
.claim h3 { color: var(--banana); font-size: var(--t-lg); }
.claim p { color: #D9CFA8; font-size: 0.95rem; }
.verify { max-width: var(--max); margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.1rem, 3vw, 1.75rem); background: var(--chalk); color: var(--ink); border: var(--edge); box-shadow: 8px 8px 0 var(--banana); }
.verify__copy { display: grid; align-content: start; gap: 0.5rem; }
.verify__copy h3 { font-size: var(--t-2xl); }
.verify__form label { display: block; margin-bottom: 0.4rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.verify__row { display: flex; gap: 0.5rem; }
.verify__row input { flex: 1; min-width: 0; padding: 0.65rem 0.75rem; border: var(--edge); background: #FFFFFF; color: var(--ink); font: 500 var(--t-sm)/1.3 var(--f-mono); }
.verify__out { display: block; margin-top: 0.9rem; padding: 0.75rem 0.9rem; background: var(--ink); color: var(--chalk); font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.6; overflow-wrap: anywhere; }
.verify__out b { color: var(--banana); }
.verify__out .err { color: var(--red-lite); }

/* ---------- token (banana) ---------- */
.specs { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; background: var(--ink); border: var(--edge); box-shadow: 10px 10px 0 var(--ink); }
.spec { display: grid; align-content: start; gap: 0.3rem; padding: 1.1rem 1.2rem 1.25rem; background: var(--chalk); }
.spec dt { font-stretch: 62%; font-weight: 850; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.spec dd { margin: 0; font-weight: 800; font-size: var(--t-lg); line-height: 1.25; }
.spec--big { grid-column: span 2; background: var(--ink); color: var(--banana); }
.spec--big dt { color: #BFB38A; }
.spec--big dd { font-family: var(--f-slab); font-weight: 400; font-size: var(--t-3xl); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- fight card (chalk) ---------- */
.card { background: var(--chalk); }
.bouts { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; border: var(--edge); box-shadow: 10px 10px 0 var(--blue); background: var(--chalk); }
.bout { display: grid; grid-template-columns: 7rem minmax(0, 0.9fr) minmax(0, 2fr); gap: 0.5rem 1.5rem; align-items: baseline; padding: 1.2rem 1.4rem; }
.bout + .bout { border-top: 2px solid var(--ink); }
.bout h3 { font-family: var(--f-slab); font-weight: 400; text-transform: none; font-size: var(--t-xl); }
.bout p { max-width: 62ch; }
.bout__status { width: fit-content; padding: 0.15rem 0.55rem; border: 2px solid var(--ink); font: 700 var(--t-xs)/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.bout.is-now { background: var(--banana); }
.bout.is-now .bout__status { background: var(--red); color: var(--chalk); border-color: var(--red); }
.bout--zoo h3 { color: var(--blue); }
html[lang="zh-CN"] .bout h3 { font-family: var(--f-cjk-display); font-weight: 900; }

/* ---------- FAQ (banana) ---------- */
.faq__list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; align-items: start; }
.faq details { background: var(--chalk); border: var(--edge); box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-stretch: 75%; font-weight: 850; font-size: var(--t-lg); text-transform: uppercase; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-slab); font-size: 1.4rem; line-height: 1; color: var(--red); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 1.2rem 1.15rem; max-width: 62ch; }

/* ---------- corners CTA ---------- */
main > .corners { padding: 0; background: var(--ink); color: var(--chalk); }
.corners h2 { padding: clamp(2.25rem, 5vw, 3.5rem) var(--pad-x) clamp(1.5rem, 3vw, 2rem); text-align: center; font-size: clamp(3rem, 9vw, 7rem); color: var(--banana); }
.corners__row { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--edge); }
.corners__btn { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad-x); text-decoration: none; font-family: var(--f-slab); font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.05; transition: filter 0.15s; }
.corners__btn--randy { background: var(--banana); color: var(--ink); border-right: var(--edge); }
.corners__btn--alpha { background: var(--blue); color: var(--chalk); }
.corners__btn:hover { filter: brightness(1.06) saturate(1.1); }
.corners__btn:hover .corners__art { transform: rotate(-8deg) scale(1.06); }
.corners__art { width: clamp(80px, 11vw, 150px); flex: none; transition: transform 0.2s; }
.corners__art img { display: block; width: 100%; height: auto; }
html[lang="zh-CN"] .corners__btn { font-family: var(--f-cjk-display); font-weight: 900; }

/* ---------- footer ---------- */
.foot { padding: clamp(2rem, 5vw, 3rem) var(--pad-x); background: var(--ink); color: var(--chalk); border-top: var(--edge); }
.foot__top { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.foot__brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--f-slab); font-size: var(--t-xl); color: var(--banana); }
.foot__brand img { width: 44px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--f-mono); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.foot__links a { text-decoration: none; border-bottom: 2px solid var(--red); }
.foot__legal { max-width: var(--max); margin: 1.5rem auto 0; font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.7; color: #B9B09A; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__step:nth-child(3)::after { display: none; }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sc-grid, .verify { grid-template-columns: minmax(0, 1fr); }
  .bout { grid-template-columns: 1fr; }
  .faq__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step::after { display: none; }
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .spec--big { grid-column: auto; }
  .spec--big dd { font-size: clamp(1.8rem, 9vw, 2.6rem); overflow-wrap: anywhere; }
  .corners__row { grid-template-columns: 1fr; }
  .corners__btn--randy { border-right: 0; border-bottom: var(--edge); }
  .feebar__seg { flex-direction: column; justify-content: center; gap: 0; font-size: var(--t-xs); padding: 0.4rem; }
}