/* Duelry — the card. A fight bill: one duel in the middle of the screen, two pips under it, the ladder beside it.
   Serif billing against a mono ledger; ember on the seat that is yours, cold steel on the one across from it. */
:root{
  --ground:#0B0A0A; --slab:#151110; --slab-2:#1E1816; --edge:#2A2220;
  --ink:#F6F1EA; --ink-dim:#9A8D85; --ink-faint:#61574F;
  --ember:#FF3B14; --ember-soft:rgba(255,59,20,.14); --ember-line:rgba(255,59,20,.42);
  --steel:#7C8A93; --steel-soft:rgba(124,138,147,.12);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gap:14px; --radius:3px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--mono);font-weight:300;font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;padding-bottom:86px;
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(255,59,20,.10),transparent 60%)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.pitch{max-width:520px;margin:0 auto;padding:22px 16px 0}

/* ---- the billing line: identity lives inside the bill, there is no header ---- */
.billing{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--edge);padding-bottom:9px;margin-bottom:18px}
.billing-name{font-family:var(--serif);font-size:27px;line-height:1;letter-spacing:.01em}
.billing-name em{font-style:italic;color:var(--ember)}
.billing-meta{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);text-align:right}

/* ---- the pit: one duel, centred, flips when the round settles ---- */
.pit{perspective:1200px;margin:0 0 16px}
.pit-face{background:linear-gradient(180deg,var(--slab),var(--slab-2));border:1px solid var(--edge);border-radius:var(--radius);
  padding:20px 16px 18px;position:relative;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.6,0,.4,1)}
.pit.is-turning .pit-face{transform:rotateY(90deg)}
.pit-round{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--ground);
  padding:0 10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.pit-note{text-align:center;color:var(--ink-faint);font-size:11.5px;margin:14px 0 0}

.corners{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:6px;margin-top:6px}
.corner{min-width:0;text-align:center}
.corner-seat{font-family:var(--serif);font-size:46px;line-height:.92;letter-spacing:-.01em;color:var(--steel)}
.corner.is-mine .corner-seat{color:var(--ember);text-shadow:0 0 26px rgba(255,59,20,.4)}
.corner.is-gone .corner-seat{color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:2px}
.corner-who{font-size:10.5px;color:var(--ink-faint);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.corner-odds{font-family:var(--serif);font-size:19px;margin-top:2px;color:var(--ink-dim)}
.corner.is-mine .corner-odds{color:var(--ink)}
.corner-vs{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-faint);text-align:center}

.oddsbar{display:flex;height:7px;margin:16px 0 4px;background:var(--slab-2);border:1px solid var(--edge);overflow:hidden}
.oddsbar-a{background:var(--ember);box-shadow:0 0 16px rgba(255,59,20,.55);transition:width .5s cubic-bezier(.6,0,.4,1)}
.oddsbar-b{background:var(--steel);opacity:.55;transition:width .5s cubic-bezier(.6,0,.4,1)}
.oddsbar-key{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

.tocsin{text-align:center;margin-top:16px}
.tocsin-n{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tocsin-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.tocsin.is-hot .tocsin-n{color:var(--ember)}

/* ---- the pips are the move: tap one to lean on the flip ---- */
.lean{margin:18px 0 6px;text-align:center}
.pips{display:flex;gap:10px;justify-content:center}
.pip{width:58px;height:58px;border:1px solid var(--ember-line);border-radius:50%;background:var(--ember-soft);
  display:grid;place-items:center;font-family:var(--serif);font-size:23px;color:var(--ember);
  transition:transform .14s ease,background .2s ease,box-shadow .2s ease}
.pip:active{transform:scale(.93)}
.pip:disabled{border-color:var(--edge);background:transparent;color:var(--ink-faint);cursor:default}
.pip.is-spent{background:var(--ember);color:var(--ground);border-color:var(--ember);box-shadow:0 0 22px rgba(255,59,20,.5)}
.lean-l{font-size:11.5px;color:var(--ink-dim);margin-top:11px}

.commit{display:block;width:100%;margin-top:16px;padding:16px 14px;background:var(--ember);color:#160604;
  border-radius:var(--radius);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-align:center;
  box-shadow:0 0 30px rgba(255,59,20,.28)}
.commit:disabled{background:var(--slab-2);color:var(--ink-faint);box-shadow:none;cursor:default}
.commit-2{display:block;width:100%;margin-top:9px;padding:13px;border:1px solid var(--edge);border-radius:var(--radius);
  text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none}

/* ---- filling: the sixteen slots ---- */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.slot{aspect-ratio:1;border:1px solid var(--edge);border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--serif);font-size:20px;color:var(--ink-faint);background:var(--slab-2)}
.slot.is-taken{color:var(--steel);background:var(--slab);border-color:#332927}
.slot.is-mine{color:var(--ember);border-color:var(--ember-line);background:var(--ember-soft);box-shadow:inset 0 0 18px rgba(255,59,20,.18)}

/* ---- the ladder: sixteen into one ---- */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:22px 0 0;align-items:stretch}
.rung-h{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;text-align:center}
.rung{display:flex;flex-direction:column;justify-content:space-around;height:285px}
.chip{height:15px;border:1px solid var(--edge);border-radius:1px;background:var(--slab-2);
  font-size:9px;line-height:13px;text-align:center;color:var(--ink-faint)}
.chip.is-in{background:var(--slab);color:var(--steel);border-color:#3A2F2C}
.chip.is-mine{background:var(--ember);color:#160604;border-color:var(--ember)}
.chip.is-crown{background:var(--ember);color:#160604;border-color:var(--ember);box-shadow:0 0 16px rgba(255,59,20,.6)}

/* ---- the tape of settled duels ---- */
.tape{margin-top:26px;border-top:1px solid var(--edge);padding-top:12px}
.tape-h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.taleline{display:grid;grid-template-columns:auto 1fr auto;gap:9px;padding:6px 0;border-bottom:1px solid rgba(42,34,32,.55);
  font-size:11.5px;color:var(--ink-dim);align-items:baseline}
.taleline b{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--ink)}
.taleline i{font-style:normal;color:var(--ink-faint);font-size:10.5px;text-align:right}
.taleline em{font-style:italic;color:var(--ember)}

/* ---- numbers under the bill ---- */
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;background:var(--edge);border:1px solid var(--edge)}
.tally-cell{background:var(--ground);padding:12px 10px;text-align:center}
.tally-n{font-family:var(--serif);font-size:25px;line-height:1}
.tally-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}

/* ---- rules ---- */
.rules{margin-top:6px}
.rule{border-bottom:1px solid var(--edge);padding:16px 0}
.rule h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 6px}
.rule p{margin:0;color:var(--ink-dim);font-size:12.5px}
.rule-n{font-family:var(--serif);font-size:13px;color:var(--ember);letter-spacing:.1em}

/* ---- the plate at the bottom of the bill ---- */
.plate{margin:28px 0 8px;border-top:1px solid var(--edge);padding-top:14px;
  font-size:10.5px;color:var(--ink-faint);word-break:break-all;line-height:1.7}
.plate a{color:var(--ink-dim)}
.plate-ca{color:var(--ink-dim)}

/* ---- floating pill: the only chrome on the page ---- */
.menu{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:3px;padding:5px 5px 5px 12px;
  background:rgba(14,11,11,.93);border:1px solid var(--edge);border-radius:999px;
  backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.6);max-width:calc(100vw - 24px)}
.menu-mark{display:flex;gap:1px;font-family:var(--serif);font-size:19px;color:var(--ember);text-decoration:none;line-height:1;margin-right:5px}
.menu-go{padding:7px 9px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-decoration:none;border-radius:999px}
.menu-go.is-here{color:var(--ink);background:var(--slab-2)}
.menu-wallet{padding:8px 13px;margin-left:4px;border-radius:999px;background:var(--ember-soft);border:1px solid var(--ember-line);
  color:var(--ember);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.menu-wallet.is-on{background:transparent;border-color:var(--edge);color:var(--ink-dim);text-transform:none;letter-spacing:0}

/* ---- wallet picker + flare ---- */
.picker[hidden]{display:none}
.picker{position:fixed;inset:0;z-index:40;background:rgba(6,5,5,.86);display:grid;place-items:center;padding:20px}
.picker-box{width:100%;max-width:330px;background:var(--slab);border:1px solid var(--edge);border-radius:var(--radius);padding:18px}
.picker-head{font-family:var(--serif);font-size:22px;margin:0 0 14px}
.picker-opt{display:flex;align-items:center;gap:10px;width:100%;padding:12px;margin-bottom:7px;
  border:1px solid var(--edge);border-radius:var(--radius);text-align:left;font-size:12.5px}
.picker-opt img{width:22px;height:22px;border-radius:5px}
.picker-x{width:100%;padding:11px;color:var(--ink-faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.flare{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:50;
  background:var(--slab);border:1px solid var(--ember-line);border-radius:var(--radius);
  padding:11px 16px;font-size:12px;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.6)}

.hush{color:var(--ink-faint);text-align:center;padding:40px 10px;font-size:12.5px}

@media (min-width:560px){
  .pitch{padding-top:34px}
  .billing-name{font-size:34px}
  .corner-seat{font-size:58px}
  .tocsin-n{font-size:54px}
}
@media (prefers-reduced-motion:reduce){
  .pit-face,.oddsbar-a,.oddsbar-b,.pip{transition:none}
}