/* ==========================================================================
   Riftstake — view-specific layout
   Collection · Packs · Duel Table · Wager Pit
   ========================================================================== */

/* ── Collection: deck bar ──────────────────────────────────────────────── */

.deckbar{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"head hint" "slots slots";
  gap:var(--s-3) var(--s-4);
  align-items:center;
  padding:var(--s-4);
  margin-bottom:var(--s-5);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255,141,92,.11), transparent 62%),
    linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-2);
}
.deckbar__head{ grid-area:head; display:flex; align-items:baseline; gap:var(--s-2); }
.deckbar__label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-faint); font-weight:800;
}
.deckbar__count{ font-size:.78rem; font-weight:700; color:var(--brass); }
.deckbar__hint{ grid-area:hint; color:var(--ink-faint); font-size:.76rem; justify-self:end; text-align:right; }
.deckbar__hint b{ color:var(--ember); }
.deckbar__slots{ grid-area:slots; display:flex; gap:var(--s-2); flex-wrap:wrap; }

.slot-empty{
  width:104px; aspect-ratio:5 / 7;
  border-radius:12px;
  border:1.5px dashed var(--line);
  display:grid; place-items:center;
  color:var(--ink-faint); font-size:.66rem; text-align:center;
  background:rgba(26,16,11,.14);
  transition:border-color var(--t-med), color var(--t-med);
}
.slot-empty:hover{ border-color:var(--brass-deep); color:var(--ink-dim); }

@media (max-width:720px){
  .deckbar{ grid-template-columns:1fr; grid-template-areas:"head" "slots" "hint"; }
  .deckbar__hint{ justify-self:start; text-align:left; }
}

/* ── Collection: detail panel ──────────────────────────────────────────── */

.detail{
  display:flex; gap:var(--s-5); flex-wrap:wrap;
  padding:var(--s-5);
  margin-bottom:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(60% 100% at 100% 0%, color-mix(in srgb, var(--el) 10%, transparent), transparent 70%),
    linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-2);
  animation:rise-in .3s var(--e-out) both;
}
.detail__info{ flex:1; min-width:250px; display:flex; flex-direction:column; gap:var(--s-3); }
.detail__title{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.detail__title h3{ font-size:1.35rem; }
.detail__meta{ color:var(--ink-faint); font-size:.78rem; margin-top:3px; }
.detail__meta b{ color:var(--rar); }
.detail__flavor{
  font-family:var(--font-display); font-style:italic;
  color:var(--ink-dim); font-size:.9rem; line-height:1.4;
  padding-left:var(--s-3); border-left:2px solid color-mix(in srgb, var(--el) 45%, transparent);
}
.detail__ability{ font-size:.85rem; color:var(--ink-dim); line-height:1.45; }
.detail__ability b{ color:var(--ink); }
.detail__row{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.detail__stat{ font-size:.78rem; color:var(--ink-faint); }
.detail__stat b{ font-family:var(--font-mono); }
.detail__spacer{ margin-left:auto; }

/* ── Packs ─────────────────────────────────────────────────────────────── */

.pack-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--s-5); }

.pack{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, var(--felt-2), var(--felt-0) 70%);
  box-shadow:var(--sh-2);
  transition:transform var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
}
.pack:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.pack::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 88% -8%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 70%);
}
.pack > *{ position:relative; z-index:1; }

.pack__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.pack__art{ width:78px; height:104px; flex:none; filter:drop-shadow(0 8px 18px rgba(26,16,11,.45)); animation:float-y 5s var(--e-in-out) infinite; }
.pack__art svg{ width:100%; height:100%; display:block; }
.pack h3{ font-size:1.2rem; }
.pack__desc{ color:var(--ink-dim); font-size:.83rem; line-height:1.45; margin-top:var(--s-1); }

.odds{ width:100%; border-collapse:collapse; font-size:.76rem; }
.odds td{ padding:3px 0; color:var(--ink-dim); }
.odds tr td:first-child{ display:flex; align-items:center; gap:6px; }
.odds tr td:last-child{ text-align:right; font-family:var(--font-mono); color:var(--ink); }
.odds .dot{ width:7px; height:7px; border-radius:50%; background:var(--rar); flex:none; }

.luck{ font-size:.72rem; color:var(--ink-faint); }
.luck .bar{ margin-top:5px; }
.luck .bar > i{ background:linear-gradient(90deg, var(--brass), var(--el-tempest)); }

.pack__buy{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  margin-top:auto; padding-top:var(--s-2);
}
.pack__cost{ font-family:var(--font-mono); font-weight:700; font-size:1.02rem; color:var(--tint); }
.pack__cost small{ display:block; font-size:.62rem; color:var(--ink-faint); font-family:var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.pack__actions{ display:flex; gap:var(--s-2); }

/* ── Duel: stage grid ──────────────────────────────────────────────────── */

.stage-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--s-4); }

.stage{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-4);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--e-out), border-color var(--t-med) var(--e-out);
}
.stage:not(.is-locked):hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.stage.is-locked{ opacity:.45; }
.stage.is-selected{ border-color:var(--ember); box-shadow:var(--sh-2), 0 0 24px -10px var(--ember); }
.stage h4{ font-size:1.05rem; }
.stage__sub{ font-size:.74rem; color:var(--ink-faint); }
.stage__rewards{ display:flex; gap:var(--s-3); font-family:var(--font-mono); font-size:.76rem; flex-wrap:wrap; }
.stage__rewards .g{ color:var(--brass); }
.stage__rewards .x{ color:var(--el-tempest); }
.stage__rewards .s{ color:var(--good); }
.stage__foot{ margin-top:auto; padding-top:var(--s-2); }

/* ── Order picker ──────────────────────────────────────────────────────── */

.orderbay{
  margin-top:var(--s-5);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-2);
  animation:rise-in .3s var(--e-out) both;
}
.orderbay h4{ font-size:1.1rem; margin-bottom:var(--s-1); }
.orderbay > p{ color:var(--ink-faint); font-size:.8rem; max-width:64ch; margin-bottom:var(--s-4); }

/* ── The round board ──────────────────────────────────────────────────────
   Five columns, one per round. Each shows what the round is worth, the
   opponent's slot (face down except for the single revealed tell) and your
   slot. Ordering happens against the board you are actually filling.
   ------------------------------------------------------------------------ */

.board{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:var(--s-2);
  margin-bottom:var(--s-5);
}
.board__col{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  transition:border-color var(--t-med), background var(--t-med);
}
.board__col.is-high{
  border-color:color-mix(in srgb, var(--brass) 55%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 12%, transparent), transparent);
}
.board__head{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.board__idx{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-faint); font-weight:800;
}
.board__stake{
  font-size:.8rem; font-weight:700; color:var(--ink-dim);
  padding:2px 9px; border-radius:var(--r-pill);
  background:var(--felt-2);
}
.board__col.is-high .board__stake{
  background:color-mix(in srgb, var(--brass) 24%, transparent);
  color:var(--brass); box-shadow:0 0 16px -6px var(--brass);
}

.board__enemy{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.board__hidden{
  width:104px; aspect-ratio:5 / 7;
  border-radius:12px;
  display:grid; place-items:center;
  border:1px solid var(--line-soft);
  background:repeating-linear-gradient(135deg, var(--felt-2) 0 7px, var(--felt-1) 7px 14px);
  color:var(--ink-faint);
  font-family:var(--font-display); font-size:1.4rem; font-weight:700;
}
.board__tag{
  font-size:.56rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--r-pill);
}
.board__tag--tell{ background:color-mix(in srgb, var(--el-tempest) 26%, transparent); color:var(--el-tempest); }

.board__vs{
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  color:var(--ink-faint); letter-spacing:.14em; text-transform:uppercase;
}
.board__mine{ display:flex; }

/* ── Your hand ─────────────────────────────────────────────────────────── */

.hand__label{
  font-family:var(--font-body); font-size:.66rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:var(--s-2);
}
.hand{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.hand__card{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hand__card .card{ transition:transform var(--t-med) var(--e-spring), opacity var(--t-med); }
.hand__card.is-placed .card{ opacity:.3; transform:scale(.93); }
.hand__state{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  color:var(--ink-faint);
  padding:2px 8px; border-radius:var(--r-pill);
}
.hand__card.is-placed .hand__state{ background:var(--ember); color:#2a1408; }

@media (max-width:860px){
  .board{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--s-1); }
  .board__col{ padding:var(--s-2) 4px; }
  .board__hidden{ width:100%; }
  .board__mine .card, .board__enemy .card{ --card-w:100%; width:100%; }
  .board__idx{ font-size:.54rem; }
}

/* ── Stake controls ────────────────────────────────────────────────────── */

.stake{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4); }
.stake input[type="range"]{ flex:1; min-width:180px; accent-color:var(--ember); height:22px; }
.stake__amt{
  font-family:var(--font-mono); font-weight:700; font-size:1.05rem;
  color:var(--brass); min-width:110px; text-align:right;
}
.stake__payout{ font-size:.75rem; color:var(--ink-faint); }
.stake__payout b{ color:var(--good); font-family:var(--font-mono); }

/* ── Arena ─────────────────────────────────────────────────────────────── */

.arena{
  position:relative; overflow:hidden;
  margin-top:var(--s-5);
  padding:var(--s-5) var(--s-4) var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255,141,92,.11), transparent 64%),
    linear-gradient(180deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-2);
  animation:rise-in .34s var(--e-out) both;
}

/* ── Scoreline ─────────────────────────────────────────────────────────── */

.scoreline{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-5); flex-wrap:wrap;
  margin-bottom:var(--s-4);
}
.scoreline__side{ display:flex; align-items:baseline; gap:var(--s-2); }
.scoreline__who{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-faint); font-weight:800;
}
.scoreline__pts{
  font-family:var(--font-mono); font-size:1.6rem; font-weight:700;
  color:var(--brass); line-height:1;
}
.scoreline__side--o .scoreline__pts{ color:var(--ink-dim); }
.scoreline__mid{ font-size:.78rem; color:var(--ink-faint); }
.scoreline__mid b{ color:var(--ink); font-family:var(--font-mono); }
.scoreline__stake{ color:var(--brass); }

/* ── Round pips — now stake values, not round numbers ──────────────────── */

.pips{ display:flex; gap:var(--s-2); justify-content:center; margin-bottom:var(--s-5); }
.pip{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  color:var(--ink-faint);
  transition:transform var(--t-med) var(--e-spring), background var(--t-med),
             border-color var(--t-med), color var(--t-med);
}
.pip.is-high{ border-color:var(--brass-deep); color:var(--brass); }
.pip.is-active{ border-color:var(--ember); color:var(--ember); transform:scale(1.18); box-shadow:0 0 16px -4px var(--ember); }
.pip.is-win { background:color-mix(in srgb, var(--good) 26%, transparent); border-color:var(--good); color:var(--good); }
.pip.is-lose{ background:color-mix(in srgb, var(--bad) 26%, transparent);  border-color:var(--bad);  color:var(--bad);  }
.pip.is-void{ opacity:.4; }
.pip.is-doubled{ box-shadow:0 0 0 2px color-mix(in srgb, var(--ember) 45%, transparent); }

/* ── Nerve ─────────────────────────────────────────────────────────────── */

.nerve{ display:flex; align-items:center; gap:5px; min-height:20px; }
.nerve__lbl{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-faint); font-weight:800; margin-right:2px;
}
.nerve i{
  width:9px; height:9px; border-radius:50%;
  background:var(--felt-3);
  box-shadow:inset 0 1px 1px rgba(26,16,11,.35);
  transition:background var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
}
.nerve i.is-on{
  background:linear-gradient(160deg, var(--el-tempest), var(--ember));
  box-shadow:0 0 8px -1px var(--el-tempest);
}
.nerve__n{ font-size:.72rem; font-weight:700; color:var(--ink-dim); margin-left:3px; }

/* ── Oracle foresight ──────────────────────────────────────────────────── */

.foresight{
  display:none;
  align-items:center; justify-content:center; gap:var(--s-3);
  max-width:420px; margin:0 auto var(--s-4);
  padding:var(--s-2) var(--s-4);
  border:1px solid color-mix(in srgb, var(--el-tempest) 40%, var(--line));
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--el-tempest) 10%, transparent);
  animation:rise-in .32s var(--e-out) both;
}
.foresight.is-on{ display:flex; }
.foresight__lbl{ font-size:.76rem; color:var(--ink-dim); }
.foresight__lbl b{ color:var(--el-tempest); }
.foresight .card{ --card-w:78px; }

/* ── Gambits ───────────────────────────────────────────────────────────── */

.gambits{ min-height:8px; margin-bottom:var(--s-4); }
.gambits__prompt{
  text-align:center; font-size:.82rem; color:var(--ink-dim);
  margin-bottom:var(--s-3);
}
.gambits__prompt b{ color:var(--brass); }
.gambits__note{
  display:inline-block; margin-left:6px;
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--el-tide) 22%, transparent); color:var(--el-tide);
}
.gambits__row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
  gap:var(--s-2);
  max-width:760px; margin:0 auto;
}
.gambits.is-asking .gambits__row{ animation:rise-in .3s var(--e-out) both; }

.gambit{
  position:relative; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:2px;
  padding:11px 13px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--felt-2), var(--felt-1));
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--e-out), border-color var(--t-fast),
             box-shadow var(--t-fast), opacity var(--t-fast);
}
.gambit:hover:not(:disabled){
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:var(--sh-2);
}
.gambit:disabled{ opacity:.34; cursor:not-allowed; }
.gambit__key{
  position:absolute; top:8px; right:9px;
  font-size:.6rem; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:4px;
  padding:0 4px; line-height:1.5;
}
.gambit__name{ font-weight:800; font-size:.92rem; }
.gambit__cost{ font-size:.68rem; font-weight:700; color:var(--brass); }
.gambit__blurb{ font-size:.68rem; color:var(--ink-faint); line-height:1.32; }

.gambit--steady .gambit__name{ color:var(--el-tide); }
.gambit--feint  .gambit__name{ color:var(--el-tempest); }
.gambit--allin  .gambit__name{ color:var(--ember); }

.gambit.is-chosen{
  border-color:var(--ember);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ember) 35%, transparent), var(--sh-2);
  opacity:1;
}

.versus{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-6); flex-wrap:wrap;
  margin-bottom:var(--s-4); min-height:290px;
}
.versus__side{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); }
.versus__who{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint); font-weight:800; }
.versus__mark{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink-faint); font-weight:900; }

.versus__side .card{ animation:none; }
.versus__side--p .card{ animation:slide-from-left .42s var(--e-out) both; }
.versus__side--o .card{ animation:slide-from-right .42s var(--e-out) both; }
@keyframes slide-from-left { from{ opacity:0; transform:translateX(-46px) rotate(-7deg); } to{ opacity:1; transform:none; } }
@keyframes slide-from-right{ from{ opacity:0; transform:translateX( 46px) rotate( 7deg); } to{ opacity:1; transform:none; } }

.versus__side.is-winner .card{ animation:win-pulse .6s var(--e-out) both; }
.versus__side.is-loser  .card{ animation:lose-fall .6s var(--e-out) both; }
@keyframes win-pulse{
  0%  { transform:none; filter:brightness(1); }
  35% { transform:translateY(-12px) scale(1.06); filter:brightness(1.35); }
  100%{ transform:translateY(-4px) scale(1.02); filter:brightness(1.1); }
}
@keyframes lose-fall{
  0%  { transform:none; filter:none; }
  25% { transform:translateX(-6px) rotate(-2deg); }
  50% { transform:translateX(6px) rotate(2deg); }
  100%{ transform:translateY(6px) scale(.96); filter:grayscale(.75) brightness(.6); }
}

/* Power readout under each combatant */
.power-tag{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center;
  min-height:24px;
}
.power-tag__n{
  font-family:var(--font-mono); font-weight:700; font-size:1.25rem;
  animation:pop-in .24s var(--e-spring) both;
}
.power-tag__mod{
  font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px;
  animation:pop-in .24s var(--e-spring) both;
}
.power-tag__mod--el{ background:color-mix(in srgb, var(--good) 22%, transparent);       color:var(--good); }
.power-tag__mod--fe{ background:color-mix(in srgb, var(--el-tempest) 24%, transparent); color:var(--el-tempest); }
.power-tag__mod--ai{ background:color-mix(in srgb, var(--ember) 26%, transparent);      color:var(--ember-soft); }
.power-tag__concede{
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:3px 10px; border-radius:var(--r-pill);
  border:1px dashed var(--line);
  animation:pop-in .24s var(--e-spring) both;
}

/* Clash flash in the middle of the arena */
.clash{
  position:absolute; inset:0; pointer-events:none;
  display:grid; place-items:center;
  opacity:0;
}
.clash.is-on{ animation:flash .45s var(--e-out) both; }
.clash i{
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,242,.9), rgba(255,141,92,.42) 40%, transparent 70%);
  transform:scale(.3);
}
.clash.is-on i{ animation:clash-ring .45s var(--e-out) both; }
@keyframes clash-ring{ from{ transform:scale(.25); } to{ transform:scale(2.1); } }

.log{
  display:flex; flex-direction:column; gap:var(--s-1);
  max-width:600px; margin:0 auto; min-height:76px;
  text-align:center;
}
.log div{
  font-size:.82rem; color:var(--ink-dim);
  animation:rise-in .3s var(--e-out) both;
}
.log div b{ color:var(--ink); }
.log div:not(:last-child){ opacity:.42; font-size:.75rem; }
.log__round{ color:var(--ink-faint); }
.log__gain{ color:var(--good); font-family:var(--font-mono); font-weight:700; }
.log__loss{ color:var(--bad);  font-family:var(--font-mono); font-weight:700; }

/* ── Result card ───────────────────────────────────────────────────────── */

.result{
  text-align:center; margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
  animation:rise-in .4s var(--e-out) both;
}
.result h3{ font-size:1.7rem; margin-bottom:4px; letter-spacing:.01em; }
.result.is-win  h3{ color:var(--good); text-shadow:0 0 28px rgba(123,201,95,.4); }
.result.is-lose h3{ color:var(--bad); }
.result__sub{ color:var(--ink-faint); font-size:.82rem; }
.result__row{ display:flex; gap:var(--s-6); justify-content:center; flex-wrap:wrap; margin:var(--s-4) 0; }
.result__k{ display:block; font-size:.63rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); font-weight:800; }
.result__v{ font-family:var(--font-mono); font-size:1.15rem; font-weight:700; }

/* ── Ladder ────────────────────────────────────────────────────────────── */

.ladder{ display:flex; flex-direction:column; gap:var(--s-2); }
.rank{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  transition:border-color var(--t-med), transform var(--t-med) var(--e-out);
}
.rank:not(.is-locked):hover{ transform:translateX(3px); border-color:var(--line-strong); }
.rank.is-current{ border-color:var(--brass-deep); background:linear-gradient(170deg, var(--felt-2), var(--felt-1)); }
.rank.is-locked{ opacity:.42; }
.rank__badge{ width:42px; height:42px; flex:none; }
.rank__badge svg{ width:100%; height:100%; display:block; }
.rank__body{ flex:1; min-width:0; }
.rank__name{ font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:var(--s-2); }
.rank__tag{
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--brass) 18%, transparent); color:var(--brass);
}
.rank__meta{ font-size:.74rem; color:var(--ink-faint); margin-top:2px; }
.rank__meta b{ font-family:var(--font-mono); color:var(--ink-dim); }

.rank-progress{ margin-top:var(--s-4); font-size:.76rem; color:var(--ink-faint); }
.rank-progress .bar{ margin-top:6px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE LADDER (ranked)
   Your standing, the two things you can do about it side by side, then the
   season book and your own record underneath.
   ═════════════════════════════════════════════════════════════════════════ */

.standing{
  display:flex; align-items:center; gap:var(--s-5);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--felt-2), var(--felt-0) 70%);
  box-shadow:var(--sh-2);
}
.standing__badge{ width:72px; height:72px; flex:none; }
.standing__badge svg{ width:100%; height:100%; display:block; }
.standing__body{ flex:1; min-width:0; }
.standing__tier{
  display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;
  font-family:var(--font-display); font-weight:900; font-size:1.35rem;
}
.standing__season{
  font-family:var(--font-body); font-weight:600; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.standing__mmr{
  display:flex; align-items:baseline; gap:var(--s-2);
  font-size:2rem; font-weight:700; color:var(--brass);
  line-height:1.1; margin-top:2px;
}
.standing__mmr small{
  font-family:var(--font-body); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.standing__record{
  display:flex; gap:var(--s-4); flex-wrap:wrap;
  margin-top:var(--s-2);
  font-size:.76rem; color:var(--ink-faint);
}
.standing__record b{ font-family:var(--font-mono); color:var(--ink-dim); }
.standing__note{
  margin-top:var(--s-2);
  font-size:.74rem; color:var(--el-tempest);
}

.ranked-cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-4);
}

.attack, .defense, .board-panel, .history{
  padding:var(--s-5);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-1);
}
.board-panel, .history{ margin-top:var(--s-4); }
.attack h3, .defense h3, .board-panel h3, .history h3{
  font-size:1.05rem; margin-bottom:var(--s-2);
}

/* ── Attack ────────────────────────────────────────────────────────────── */

.attack__blurb{ color:var(--ink-faint); font-size:.79rem; line-height:1.5; }
.attack__blurb b{ color:var(--brass); }
.attack__bet{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-4);
}
.attack__bet input[type="range"]{ flex:1; min-width:150px; accent-color:var(--ember); }
.attack__amt{ font-weight:700; font-size:.95rem; color:var(--brass); }
.attack__ret{ font-size:.73rem; color:var(--ink-faint); width:100%; }
.attack__nobet{ font-size:.76rem; color:var(--ink-faint); line-height:1.45; }
.attack__warn{ margin-top:var(--s-2); font-size:.73rem; color:var(--bad); }

/* ── Defense ───────────────────────────────────────────────────────────── */

.defense__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.defense__when{ font-size:.68rem; color:var(--ink-faint); letter-spacing:.06em; }
.defense__blurb{ color:var(--ink-faint); font-size:.79rem; line-height:1.5; }
.defense__deck{
  display:flex; gap:var(--s-2); flex-wrap:wrap;
  margin:var(--s-4) 0;
}
.defense__slot{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.defense__lv{
  font-size:.62rem; font-weight:700; color:var(--ink-faint);
  padding:1px 7px; border-radius:var(--r-pill); background:var(--felt-2);
}
.defense > .btn{ margin-top:var(--s-3); }

/* ── Leaderboard ───────────────────────────────────────────────────────── */

.lb{ width:100%; border-collapse:collapse; margin-top:var(--s-2); font-size:.8rem; }
.lb th{
  text-align:left; padding:6px 8px;
  font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
  border-bottom:1px solid var(--line-soft);
}
.lb td{ padding:7px 8px; border-bottom:1px solid var(--line-soft); }
.lb tbody tr:last-child td{ border-bottom:none; }
.lb__num{ text-align:right; }
.lb tr.is-me td{ background:color-mix(in srgb, var(--brass) 10%, transparent); color:var(--ink); }
.lb__you{
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:1px 6px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--brass) 20%, transparent); color:var(--brass);
}
.lb__pos{ margin-top:var(--s-3); font-size:.74rem; color:var(--ink-faint); }

/* ── Match history ─────────────────────────────────────────────────────── */

.history__list{ display:flex; flex-direction:column; margin-top:var(--s-2); }
.history__row{
  display:grid;
  grid-template-columns:64px 1fr auto 56px 84px 48px;
  align-items:center; gap:var(--s-3);
  padding:8px 6px;
  border-bottom:1px solid var(--line-soft);
  border-left:2px solid transparent;
  font-size:.78rem;
}
.history__row:last-child{ border-bottom:none; }
.history__row.is-win { border-left-color:var(--good); }
.history__row.is-lose{ border-left-color:var(--bad); }
.history__mode{
  font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.history__opp{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history__opp em{ color:var(--ink-faint); font-size:.7rem; }
.history__pts, .history__bet{ font-size:.73rem; color:var(--ink-faint); text-align:right; }
.history__mmr{ font-size:.71rem; font-family:var(--font-mono); text-align:right; }
.history__mmr.up  { color:var(--good); }
.history__mmr.down{ color:var(--bad); }
.history__res{
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-align:right;
}
.history__row.is-win  .history__res{ color:var(--good); }
.history__row.is-lose .history__res{ color:var(--bad); }

@media (max-width:640px){
  .standing{ flex-direction:column; align-items:flex-start; gap:var(--s-3); }
  .standing__badge{ width:56px; height:56px; }
  .history__row{ grid-template-columns:56px 1fr auto 56px; }
  .history__mmr, .history__bet{ display:none; }
}

@media (max-width:560px){
  .rank{ gap:var(--s-3); padding:var(--s-3); }
  .rank__badge{ width:34px; height:34px; }
  .versus{ gap:var(--s-4); }
  .result__row{ gap:var(--s-4); }
}