/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * genre: live ranking board · tone: playful, precise · palette anchor: SolanaPoke violet and mint
 * structural fingerprint: editorial intro → single ranking column → quiet invitation
 */
:root {
  --board-positive: var(--color-mint);
  --board-negative: #ff879f;
  --board-gold: #ffe3a2;
  --board-silver: #d8e5f3;
  --board-bronze: #eab999;
  --board-hover: #1c274b;
  --board-halo: #304477;
  --board-transparent: transparent;
}
@property --edge-progress { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.site-header nav a[aria-current="page"] { color: var(--color-mint); }
.board-page { position: relative; overflow: hidden; }
.board-intro { max-width: var(--content-max); margin: 0 auto; padding: clamp(55px, 7vw, 105px) var(--page-gutter) clamp(45px, 6vw, 85px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(200px, .7fr); gap: 4vw; align-items: center; }
.board-intro-copy { position: relative; z-index: 1; }
.board-intro .eyebrow { margin-bottom: 25px; }
.board-intro h1 { max-width: 910px; margin-bottom: 23px; font-size: clamp(50px, 6.6vw, 104px); }
.board-intro h1 span { color: var(--color-violet-soft); }
.board-lede { max-width: 47ch; color: var(--color-muted); font-size: clamp(17px, 1.45vw, 21px); margin: 0; }
.board-disclosure { display: flex; gap: 14px; align-items: flex-start; max-width: 640px; padding: 16px 20px; margin-top: 33px; border: 1px solid var(--color-line); border-radius: var(--radius-soft); background: var(--color-deep); }
.board-disclosure p { color: var(--color-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.board-disclosure-icon { color: var(--color-mint); line-height: 1; font-size: 25px; }
.board-mascot { position: relative; display: grid; place-items: center; min-height: 310px; isolation: isolate; }
.mascot-halo { position: absolute; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--board-halo); box-shadow: 0 0 0 22px var(--color-deep), 0 0 0 23px var(--color-line); transform: rotate(-16deg) scaleX(1.08); }
.board-mascot img { width: min(75%, 250px); height: auto; border-radius: 50%; position: relative; filter: drop-shadow(0 22px 40px var(--color-shadow)); }
.board-mascot span { position: absolute; bottom: 6%; right: 5%; color: var(--color-violet-soft); font: 700 11px var(--font-display); letter-spacing: .04em; transform: rotate(-8deg); }
.board-content { background: var(--color-deeper); border-block: 1px solid var(--color-line); padding: clamp(54px, 6.5vw, 95px) var(--page-gutter) clamp(75px, 7vw, 110px); }
.board-content > * { width: min(100%, 1040px); margin-inline: auto; }
.board-section-header { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
.board-section-header .eyebrow { margin-bottom: 12px; }
.board-section-header h2 { font-size: clamp(31px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.05em; margin: 0; }
.board-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; padding-bottom: 5px; color: var(--color-dim); font-size: 10px; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
.board-live { display: flex; align-items: center; gap: 8px; color: var(--color-mint); }
.board-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 12px var(--color-mint); animation: boardBlink 2.4s ease-in-out infinite; }
.board-columns { display: flex; justify-content: space-between; gap: 20px; color: var(--color-dim); font-size: 10px; font-weight: 700; letter-spacing: .16em; padding: 0 25px 12px; }
.ranking-list { display: grid; gap: 9px; }
.rank-card { --edge-progress: 0%; --rank-accent: var(--color-violet); position: relative; min-height: 93px; display: grid; grid-template-columns: 65px 49px minmax(0, 1fr) minmax(180px, auto); align-items: center; gap: 18px; padding: 13px 26px 14px 18px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-deep); isolation: isolate; transition: transform .55s cubic-bezier(.2,.78,.18,1), background .25s ease, border-color .25s ease, box-shadow .35s ease; }
.rank-card:hover { background: var(--board-hover); border-color: var(--color-violet); }
.rank-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--board-transparent); background: linear-gradient(var(--color-deep), var(--color-deep)) padding-box, conic-gradient(from 270deg, var(--rank-accent) 0 var(--edge-progress), var(--board-transparent) var(--edge-progress) 100%) border-box; opacity: 0; pointer-events: none; z-index: 0; }
.rank-card > * { position: relative; z-index: 1; }
.rank-card.pulse-up { --rank-accent: var(--board-positive); box-shadow: 0 0 29px -16px var(--board-positive); }
.rank-card.pulse-down { --rank-accent: var(--board-negative); box-shadow: 0 0 29px -17px var(--board-negative); }
.rank-card.pulse-up::before, .rank-card.pulse-down::before { animation: cardEdge 1.45s ease-out both; }
.rank-card.pulse-up .rank-pnl, .rank-card.is-up .rank-pnl { color: var(--board-positive); }
.rank-card.pulse-down .rank-pnl, .rank-card.is-down .rank-pnl { color: var(--board-negative); }
.rank-card.top-three { background: var(--color-panel); }
.rank-card.top-three::after { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 3px; background: var(--medal-color); }
.rank-card.rank-one { --medal-color: var(--board-gold); }
.rank-card.rank-two { --medal-color: var(--board-silver); }
.rank-card.rank-three { --medal-color: var(--board-bronze); }
.rank-position { color: var(--color-dim); font: 600 17px var(--font-display); letter-spacing: -.04em; white-space: nowrap; }
.top-three .rank-position { color: var(--medal-color); }
.rank-avatar { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 15px; background: var(--color-panel-soft); color: var(--color-violet-soft); font: 700 17px var(--font-display); }
.rank-card:nth-child(4n + 2) .rank-avatar { color: var(--color-mint); }
.rank-card:nth-child(4n + 3) .rank-avatar { color: var(--color-warning); }
.rank-identity { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-name { color: var(--color-ink); font: 600 clamp(14px, 1.5vw, 18px) var(--font-display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.rank-trophy { display: inline-flex; justify-content: center; align-items: center; min-width: 26px; height: 26px; border-radius: 7px; background: var(--color-panel-soft); font-size: 15px; filter: saturate(.9); }
.rank-trophy[hidden] { display: none; }
.rank-demo { border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 3px 7px; color: var(--color-dim); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.rank-pnl-wrap { display: flex; flex-direction: column; text-align: right; align-items: flex-end; }
.rank-pnl { color: var(--color-ink); font: 600 clamp(16px, 1.7vw, 22px) var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s ease; }
.pulse-up .rank-pnl, .pulse-down .rank-pnl { animation: numberPulse .55s ease-out; transform-origin: right center; }
.rank-delta { color: var(--color-dim); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; }
.is-up .rank-delta { color: var(--board-positive); }
.is-down .rank-delta { color: var(--board-negative); }
.board-actions { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: 27px; }
.board-more { width: min(100%, 360px); min-height: 53px; padding: 12px 20px; border: 1px solid var(--color-violet); border-radius: var(--radius-pill); background: var(--color-panel); color: var(--color-ink); display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 700 13px var(--font-body); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.board-more[hidden] { display: none; }
.board-more:hover { background: var(--board-hover); border-color: var(--color-mint); transform: translateY(-2px); }
.board-more:focus-visible { outline: 3px solid var(--color-mint); outline-offset: 4px; }
.shown-count { margin: 0; color: var(--color-dim); font-size: 12px; }
.board-after { max-width: var(--content-max); margin: auto; padding: clamp(75px, 8vw, 118px) var(--page-gutter); display: grid; grid-template-columns: 65px minmax(0, 1fr) auto; gap: clamp(15px, 4vw, 55px); align-items: center; }
.board-after-mark { color: var(--color-mint); font-size: 45px; align-self: start; line-height: 1; }
.board-after .eyebrow { margin-bottom: 9px; }
.board-after h2 { font-size: clamp(27px, 3.2vw, 45px); letter-spacing: -.05em; margin: 0 0 9px; }
.board-after p:not(.eyebrow) { max-width: 50ch; color: var(--color-muted); margin: 0; }
@keyframes boardBlink { 50% { opacity: .35; box-shadow: 0 0 2px var(--color-mint); } }
@keyframes numberPulse { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cardEdge { 0% { --edge-progress: 0%; opacity: 0; } 15% { opacity: 1; } 85% { --edge-progress: 100%; opacity: 1; } 100% { --edge-progress: 100%; opacity: 0; } }
@media (max-width: 850px) { .board-intro { grid-template-columns: minmax(0, 1fr) 210px; } .board-mascot { min-height: 230px; } .mascot-halo { width: 190px; } .board-mascot img { width: 160px; } .board-after { grid-template-columns: 40px minmax(0, 1fr); } .board-after .button { grid-column: 2; justify-self: start; } }
@media (max-width: 620px) { .board-intro { display: block; padding-top: 54px; } .board-intro h1 { font-size: clamp(43px, 12vw, 62px); } .board-mascot { display: none; } .board-content { padding-inline: 15px; } .board-section-header { align-items: start; } .board-meta { font-size: 9px; padding-top: 8px; } .board-meta .board-measure { display: none; } .board-columns { padding-inline: 15px; } .rank-card { min-height: 79px; grid-template-columns: 38px 36px minmax(0, 1fr) auto; gap: 9px; padding: 10px 12px; border-radius: 14px; } .rank-position { font-size: 12px; } .rank-avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; } .rank-identity { gap: 5px; } .rank-name { font-size: 11px; line-height: 1.25; } .rank-trophy { height: 20px; min-width: 20px; font-size: 12px; } .rank-demo { display: none; } .rank-pnl { font-size: 12px; } .rank-delta { font-size: 9px; } .board-after { grid-template-columns: 1fr; } .board-after-mark { display: none; } .board-after .button { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .board-live i, .rank-card.pulse-up::before, .rank-card.pulse-down::before, .pulse-up .rank-pnl, .pulse-down .rank-pnl { animation: none; } .rank-card { transition: none; } .board-more { transition: none; } }