:root {
  --bg: #0d0b14;
  --ink: #f6f2ff;
  --dim: #9c93b8;
  --line: #2a2340;
  --lime: #b6ff3d;
  --melon: #ff5d73;
  --sun: #ffc93c;
  --grape: #8b5cf6;
  --cyan: #4cd7f6;
  --font: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1000px 700px at 50% -20%, #2a1b4d 0%, transparent 62%),
    radial-gradient(700px 500px at 0% 110%, #4a1230 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 110%, #123a4a 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: hidden;
}

.wrap {
  max-width: 1250px;
  margin: 0 auto;
  padding: 18px 22px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- header ---------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wordmark {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.16em;
  background: linear-gradient(92deg, var(--lime), var(--sun) 45%, var(--melon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The words are separated by real spaces, not by dimming one of them. PAPER was set
   to 55% opacity and became unreadable against a lighter ground. */
.wordmark span { opacity: 1; }
.sub { color: var(--dim); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.controls { display: flex; gap: 8px; align-items: center; }
.ctl {
  border: 1px solid var(--line);
  background: #ffffff0d;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.ctl:hover { border-color: var(--grape); }
.ctl.on { background: var(--lime); color: #17111f; border-color: var(--lime); }
.ctl:disabled { opacity: .3; cursor: default; }
.ctl:disabled:hover { border-color: var(--line); }

/* ---------- operator ---------- */

.opbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff08;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: .06em;
}
.opbar .opid { color: var(--cyan); font-weight: 900; letter-spacing: .14em; }
.opbar .opname {
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .04em;
  padding: 1px 10px;
  border-radius: 999px;
  background: #4cd7f61f;
  border: 1px solid #4cd7f644;
}
.opbar .opsep { opacity: .4; }
.opbar .onair { margin-left: auto; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.opbar .onair i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--melon);
  box-shadow: 0 0 10px var(--melon);
  animation: blink 2.2s ease-in-out infinite;
}
.opbar .onair em { font-style: normal; opacity: .5; font-size: 11px; }
.opbar .onair .today {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  color: var(--dim);
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* real operators speak in white with a lime handle; the bench is dimmer */
.badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.badge {
  font-size: 17px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff08;
  /* opacity only — grayscale() is a filter, and filters box colour emoji on Windows */
  opacity: .3;
  cursor: help;
  transition: filter .3s, transform .2s;
}
.badge.on { opacity: 1; border-color: #ffc93c55; background: #ffc93c14; }
.badge.on:hover { transform: translateY(-2px) scale(1.08); }

.chat li.op b { color: var(--lime); }
.chat li.op { color: var(--ink); }
.chat li.addressed { color: var(--ink); }
.chat li.addressed b { color: var(--sun); }
.chat li.sys, .chat li.sys b { color: #6d6590; font-style: italic; }

.chatbox { display: flex; gap: 8px; margin-top: 10px; }
.chatbox input {
  flex: 1;
  min-width: 0;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff0d;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.chatbox input:focus { border-color: var(--cyan); }
.chatbox.closed input { opacity: .5; }
.chatbox.closed button { background: var(--line); color: #6d6590; cursor: not-allowed; }
.chatbox button {
  border: 0;
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #17111f;
  background: var(--cyan);
  cursor: pointer;
}

.opbar .onair.off i { background: #6d6590; box-shadow: none; animation: none; }
.opbar .onair.off { color: #6d6590; }

/* ---------- the betting window ----------
   This is the one interaction the whole site asks for, so it gets the loudest
   treatment on the page. The first version put a small button inside each card and
   nobody found it — 0 of 7 visitors on day one. */

.betbar {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 20px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  border: 2px solid transparent;
}
.betbar.show { max-height: 130px; padding: 13px 20px; }

.betbar.open {
  background: linear-gradient(100deg, #b6ff3d1f, #4cd7f614);
  border-color: var(--lime);
  box-shadow: 0 0 34px #b6ff3d22;
  animation: betpulse 2.1s ease-in-out infinite;
}
@keyframes betpulse {
  0%, 100% { box-shadow: 0 0 26px #b6ff3d1a; }
  50% { box-shadow: 0 0 44px #b6ff3d3d; }
}
.betbar.locked { background: #ffc93c14; border-color: #ffc93c66; }
.betbar.won { background: #b6ff3d1f; border-color: var(--lime); }
.betbar.lost { background: #ff5d731a; border-color: #ff5d7377; }

.beticon { grid-row: 1 / 3; font-size: 34px; line-height: 1; }
.betbar.open .beticon { animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}
.bettext { font-size: 25px; font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
.betbar.open .bettext { color: var(--lime); }
.betbar.won .bettext { color: var(--lime); }
.betbar.lost .bettext { color: var(--melon); }
.betbar.locked .bettext { color: var(--sun); }
.betsub { grid-column: 2; font-size: 13px; color: var(--dim); }
.betclock {
  grid-row: 1 / 3;
  font-size: 34px;
  font-weight: 900;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  min-width: 82px;
  text-align: right;
}
.betclock.urgent { color: var(--melon); animation: blink .5s ease-in-out infinite; }
.betdrain {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  margin-top: 9px;
  border-radius: 99px;
  background: #ffffff12;
  overflow: hidden;
}
.betdrain > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  transition: width .12s linear;
}
.betdrain > i.urgent { background: var(--melon); }

/* The card itself is the button. */
.fighter.callable { cursor: pointer; }
.fighter.callable:hover,
.fighter.callable:focus-visible {
  border-color: var(--lime);
  box-shadow: 0 0 40px #b6ff3d2e;
  transform: translateY(-3px);
}
.fighter.callable .calloverlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0b1466;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: 2;
}
.fighter.callable:hover .calloverlay { opacity: 1; }
.fighter.callable .calloverlay span {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  color: #17111f;
  background: var(--lime);
  padding: 11px 20px;
  border-radius: 999px;
  line-height: 1.15;
}
/* On touch there is no hover, so show the prompt outright. */
@media (hover: none) {
  .fighter.callable .calloverlay { opacity: 1; background: transparent; align-items: flex-end; padding-bottom: 12px; }
  .fighter.callable .calloverlay span { font-size: 14px; padding: 8px 14px; }
}
.fighter.mypick { border-color: var(--sun); box-shadow: 0 0 34px #ffc93c2e; }
.backedflag {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #17111f;
  background: var(--sun);
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 3;
}

@media (max-width: 700px) {
  .betbar.show { padding: 11px 14px; }
  .bettext { font-size: 17px; }
  .betclock { font-size: 25px; min-width: 62px; }
  .beticon { font-size: 25px; }
  .betsub { font-size: 11.5px; }
}

/* ---------- the floor's call ---------- */

.crowdsplit {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: center;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
}
.crowdsplit.show {
  max-height: 90px;
  padding: 10px 16px;
  background: #ffffff08;
  border-color: var(--line);
}
.crowdsplit .cs-side { color: var(--dim); white-space: nowrap; }
.crowdsplit .cs-side b { color: var(--ink); font-size: 17px; }
.crowdsplit .cs-side.right { text-align: right; }
.crowdsplit .cs-bar { height: 9px; border-radius: 99px; background: #ff5d7355; overflow: hidden; }
.crowdsplit .cs-bar > i { display: block; height: 100%; background: var(--cyan); transition: width .4s ease; }
.crowdsplit .cs-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6d6590;
}

/* ---------- the booth ---------- */

.banner {
  max-height: 0;
  overflow: hidden;
  border-radius: 14px;
  text-align: center;
  font-size: 17px;
  letter-spacing: .05em;
  transition: max-height .4s ease, padding .4s ease;
  padding: 0 18px;
}
.banner.show {
  max-height: 70px;
  padding: 12px 18px;
  background: linear-gradient(100deg, #ffc93c2e, #ff5d732e);
  border: 1px solid #ffc93c77;
  animation: fanfare .5s ease both;
}
.banner.show.wild {
  background: linear-gradient(100deg, #8b5cf63a, #4cd7f62e);
  border-color: #4cd7f688;
}
.banner b { color: var(--sun); letter-spacing: .12em; }
.banner.show.secret {
  background: linear-gradient(100deg, #ff5d7340, #000000aa);
  border-color: var(--melon);
  color: #ffd9df;
  font-family: 'Consolas', ui-monospace, monospace;
  animation: fanfare .5s ease both, rage .5s ease 3;
}
.banner.show.secret b { color: var(--melon); }
.banner.show.secret code { color: var(--sun); font-size: 15px; }
@keyframes fanfare {
  0% { transform: scale(.94); opacity: 0; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.boothrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.booth {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(100deg, #8b5cf62b, #ffffff08);
  position: relative;
  overflow: hidden;
}
#punditBox { background: linear-gradient(100deg, #ff5d732b, #ffffff08); }
.booth.hot { border-color: #b6ff3d66; box-shadow: 0 0 40px #b6ff3d22 inset; }
.booth.cold { border-color: #ff5d7366; box-shadow: 0 0 40px #ff5d7322 inset; }
/* text-shadow, not filter — see the note by .face.lvl-* */
.booth .orb { font-size: 44px; line-height: 1; text-shadow: 0 0 18px #8b5cf6aa; }
.booth .who { font-size: 11px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }
.booth .call { font-size: 25px; font-weight: 900; line-height: 1.15; }
.booth .call em { font-style: normal; color: var(--sun); }
.booth .quip { color: var(--dim); font-size: 14px; margin-top: 4px; font-style: italic; line-height: 1.35; }
.booth .stats { grid-column: 2; font-size: 12px; color: var(--dim); white-space: nowrap; }
.booth .stats b { color: var(--ink); font-size: 16px; }

.duel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 900;
  font-size: 19px;
  color: var(--dim);
  padding: 0 6px;
}
.duel .mid { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.duel .lead { color: var(--sun); }

.yourcall {
  text-align: center;
  font-size: 15px;
  color: var(--dim);
  padding: 2px;
}
.yourcall b { color: var(--ink); }
.yourcall .beat { color: var(--lime); font-weight: 800; }
.ohead { text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #6d6590; }

.backers {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 19px;
  letter-spacing: 3px;
}
button.yourcall {
  border: 2px solid var(--grape);
  background: #8b5cf626;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  align-self: center;
}
button.yourcall:hover { background: var(--grape); }
.conf { height: 6px; border-radius: 99px; background: #ffffff14; margin-top: 8px; overflow: hidden; }
.conf > i { display: block; height: 100%; background: linear-gradient(90deg, var(--grape), var(--cyan)); transition: width .4s ease; }

/* ---------- arena ---------- */

.arena {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 14px;
  align-items: stretch;
}

.fighter {
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 18px 20px 20px;
  background: #ffffff0a;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .3s, box-shadow .3s, transform .2s;
  position: relative;
}
.fighter.backed { border-color: #ffc93c88; box-shadow: 0 0 34px #ffc93c1f; }
.fighter.won { border-color: var(--lime); box-shadow: 0 0 46px #b6ff3d33; transform: translateY(-4px); }
.fighter.lost { border-color: #ff5d7355; opacity: .82; }
.fighter.furious { animation: rage .5s ease infinite; }
@keyframes rage {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); }
  75% { transform: translate(3px, -1px); }
}

.fname { display: flex; align-items: center; gap: 12px; }
.fname .face { font-size: 42px; line-height: 1; }
.fname .n { font-size: 26px; font-weight: 900; letter-spacing: .06em; }
.fname .tag { font-size: 12px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.crown { margin-left: auto; font-size: 13px; color: var(--sun); font-weight: 800; white-space: nowrap; }

.hand {
  font-size: 96px;
  line-height: 1;
  text-align: center;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hand.thrown { animation: slam .4s cubic-bezier(.2,1.6,.4,1) both; }

/* Deliberation: the hand riffles through the three throws while the betting window
   is open, so the bots look like they are choosing rather than idling. */
.hand.deciding { animation: bob 1.1s ease-in-out infinite; }
.cycle { position: relative; display: inline-block; width: 1em; height: 1em; }
.cycle i {
  position: absolute;
  inset: 0;
  font-style: normal;
  opacity: 0;
  animation: riffle 1.05s steps(1, end) infinite;
}
.cycle i:nth-child(1) { animation-delay: 0s; }
.cycle i:nth-child(2) { animation-delay: .35s; }
.cycle i:nth-child(3) { animation-delay: .7s; }
@keyframes riffle {
  0%, 33.32% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}
.thinking { color: var(--cyan); animation: blink 1.1s ease-in-out infinite; }

.yourcall .prompt { color: var(--lime); }
.yourcall .locked { color: var(--sun); margin-right: 10px; }
.yourcall .clock {
  display: inline-block;
  min-width: 46px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #4cd7f61f;
  border: 1px solid #4cd7f655;
  color: var(--cyan);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.yourcall .clock.urgent {
  background: #ff5d7326;
  border-color: var(--melon);
  color: var(--melon);
  animation: blink .5s ease-in-out infinite;
}
.hand.waiting { font-size: 60px; opacity: .28; animation: hover 1s ease-in-out infinite alternate; }
@keyframes slam { 0% { transform: translateY(-46px) scale(.5) rotate(-16deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hover { from { transform: translateY(-6px); } to { transform: translateY(4px); } }
.handlabel { text-align: center; font-size: 13px; letter-spacing: .24em; color: var(--dim); min-height: 18px; }
.handlabel .raged { color: var(--melon); font-weight: 900; }

.bubble {
  background: #ffffff12;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
  animation: fadein .35s ease both;
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pips { display: flex; gap: 7px; }
.pip { width: 15px; height: 15px; border-radius: 99px; background: #ffffff1a; border: 1px solid var(--line); }
.pip.on { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 12px #b6ff3d88; }

.meters { display: flex; flex-direction: column; gap: 6px; }
.meter { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .16em; color: var(--dim); }
.meter .track { flex: 1; height: 7px; border-radius: 99px; background: #ffffff12; overflow: hidden; }
.meter .track > i { display: block; height: 100%; transition: width .45s ease; }
.meter.tilt .track > i { background: linear-gradient(90deg, var(--sun), var(--melon)); }
.meter.ego .track > i { background: linear-gradient(90deg, var(--cyan), var(--grape)); }
.meter .v { width: 26px; text-align: right; color: var(--ink); font-weight: 800; }

.vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
}
.vs .big { font-size: 34px; color: var(--dim); letter-spacing: .1em; }
.vs .verdict { font-size: 13px; color: var(--dim); text-align: center; letter-spacing: .1em; }
.vs .verdict.hit { color: var(--lime); }
.vs .verdict.miss { color: var(--melon); }

/* ---------- lower deck ---------- */

.deck { display: grid; grid-template-columns: 1.1fr .75fr 1fr 1fr; gap: 14px; }

/* ---------- the floor ---------- */

.panel.floor h3 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.carried { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6d6590; font-size: 11px; }
.carried b { color: var(--sun); }

.motions {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 168px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.motions::-webkit-scrollbar { width: 7px; }
.motions::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.motions li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.motions li.empty { color: #5d5680; font-style: italic; }
.motions .mtext { flex: 1; color: var(--ink); word-break: break-word; }
.motions .mby { color: #6d6590; font-size: 11px; white-space: nowrap; }
.motions li.seconded .mtext { color: var(--lime); }

.secondbtn {
  flex-shrink: 0;
  min-width: 44px;
  border: 1px solid var(--line);
  background: #ffffff0d;
  color: var(--dim);
  border-radius: 8px;
  padding: 3px 7px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.secondbtn b { color: var(--ink); font-size: 13px; }
.secondbtn:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }
.secondbtn:disabled { opacity: .35; cursor: not-allowed; }
li.seconded .secondbtn { border-color: var(--lime); background: #b6ff3d1f; color: var(--lime); }

.motionbox { display: flex; gap: 8px; margin-top: 10px; }
.motionbox input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff0d;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.motionbox input:focus { border-color: var(--sun); }
.motionbox button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #17111f;
  background: var(--sun);
  cursor: pointer;
}
.motionbox.locked input { opacity: .55; }
.motionbox.locked button { background: var(--line); color: #6d6590; cursor: not-allowed; }
.floornote { margin-top: 8px; font-size: 11px; color: #6d6590; line-height: 1.5; }
.floornote b { color: var(--ink); }

.explainer { margin: -2px 0 10px; font-size: 11.5px; }
.explainer summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}
.explainer p { margin: 8px 0 6px; color: var(--dim); line-height: 1.5; }
.explainer p b { color: var(--ink); }
.explainer .fmt { color: var(--sun); }
.explainer .egs { margin: 4px 0 0; padding-left: 2px; list-style: none; line-height: 1.6; }
.explainer .egs li { color: #6d6590; }
.explainer .egs .good { color: #9fd67a; }
.explainer .egs .bad { color: #c9737f; }

.ledger { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ledger h4 {
  margin: 0 0 7px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 800;
}
.lrow { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; margin-bottom: 4px; }
.lstatus { white-space: nowrap; color: #6d6590; font-weight: 800; }
.lrow.shipped .lstatus { color: var(--lime); }
.lrow.declined .lstatus { color: var(--melon); }
.ltext { flex: 1; color: var(--ink); word-break: break-word; }
.lday { color: #5d5680; white-space: nowrap; font-size: 10px; }

/* Newest at the bottom, scrollable history, pinned unless you scroll up to read. */
.chat {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 214px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior: contain;
}
.chat::-webkit-scrollbar { width: 7px; }
.chat::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.chat::-webkit-scrollbar-track { background: transparent; }
.chat li { font-size: 13.5px; color: #b9b1d4; line-height: 1.35; animation: fadein .3s ease both; word-wrap: break-word; }
.chipset { display: inline-flex; gap: 4px; margin-left: auto; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: #6d6590;
  border-radius: 999px;
  padding: 2px 8px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--grape); }
.chip.on { background: var(--cyan); border-color: var(--cyan); color: #17111f; }

.chat li.empty { color: #5d5680; font-style: italic; }
.chat li.mine b { color: var(--sun); }
.chat li.atme {
  background: #b6ff3d14;
  border-left: 2px solid var(--lime);
  padding: 3px 6px;
  margin-left: -8px;
  border-radius: 4px;
}

.mention { color: var(--cyan); font-weight: 700; }
.mention.bot { color: var(--sun); }
.mention.self { color: #17111f; background: var(--lime); border-radius: 4px; padding: 0 4px; font-weight: 900; }
.chat li b { color: var(--cyan); font-weight: 700; margin-right: 5px; }
.radionote { margin-top: 8px; font-size: 11px; color: #5d5680; letter-spacing: .06em; }

.face { position: relative; display: inline-block; }
.face .mark {
  position: absolute;
  right: -10px;
  bottom: -4px;
  font-size: 19px;
  animation: pop .35s ease both;
}
.face .mark.ego { right: auto; left: -12px; top: -6px; bottom: auto; font-size: 17px; }
/* NEVER use `filter` on colour emoji.
   Chromium on Windows renders COLR/CBDT glyphs as a blank box when a filter is applied
   to them — drop-shadow and saturate both do it. The bots turned into squares the
   moment they levelled up. `text-shadow` glows emoji correctly, so the glow is done
   that way and the saturation shift is dropped entirely. */
.face.lvl-heated { text-shadow: 0 0 10px #ffc93c66; }
.face.lvl-furious { text-shadow: 0 0 12px #ff5d73aa, 0 0 4px #ff5d7355; }
.face.lvl-unhinged {
  text-shadow: 0 0 18px #ff5d73, 0 0 6px #ff5d73aa;
  animation: rage .35s ease infinite;
}
.lvltitle { color: var(--sun); font-weight: 800; }

.feed li.secret, .feed li.levelup { color: var(--melon); font-weight: 800; }
.feed li.secret { letter-spacing: .04em; }
.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff08;
  padding: 14px 18px;
}
.panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 800;
}
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 232px; overflow: hidden; }
.feed li { font-size: 14px; color: var(--dim); animation: fadein .3s ease both; line-height: 1.4; }
.feed li.oracle { color: var(--grape); }
.feed li.hit { color: var(--lime); }
.feed li.miss { color: var(--melon); }
.feed li.match { color: var(--sun); font-weight: 800; }
.feed li.grudge { color: var(--cyan); }
.feed li.pundit { color: var(--melon); }
.feed li.event { color: var(--sun); font-weight: 800; }
.feed li.you { color: var(--lime); font-weight: 800; }

.standings { display: flex; flex-direction: column; gap: 2px; }

.lbrow {
  display: grid;
  grid-template-columns: 26px 24px 1fr 40px 62px;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background .3s;
}
.lbrow .rank {
  font-size: 12px;
  font-weight: 900;
  color: #5d5680;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lbrow.podium .rank { font-size: 15px; }
.lbrow .f { font-size: 18px; }
.lbrow .nm { font-weight: 800; letter-spacing: .03em; color: var(--ink); min-width: 0; }
.lbrow .rg { color: var(--sun); font-style: normal; font-size: 11px; margin-left: 5px; }
.lbrow .rate {
  text-align: right;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.lbrow .rec {
  text-align: right;
  color: #6d6590;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.lbrow .rec em { font-style: normal; opacity: .5; font-size: 10px; }

/* The bar is the point — relative wins readable without reading a single number. */
.lbrow .bar {
  display: block;
  height: 3px;
  margin-top: 3px;
  border-radius: 99px;
  background: #ffffff0f;
  overflow: hidden;
}
.lbrow .bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--grape), var(--cyan));
  transition: width .5s ease;
}
.lbrow.podium .bar > i { background: linear-gradient(90deg, var(--sun), var(--lime)); }

.lbrow.infight { background: #ffffff0a; }
.lbrow.champ { background: linear-gradient(90deg, #ffc93c1f, transparent); border-left-color: var(--sun); }
.lbrow.champ .nm { color: var(--sun); }

footer { color: var(--dim); font-size: 13px; text-align: center; line-height: 1.7; }
footer b { color: var(--ink); }
footer .privacy { display: inline-block; margin-top: 6px; font-size: 11px; color: #5d5680; }

@media (max-width: 980px) {
  .arena { grid-template-columns: 1fr; }
  .vs { flex-direction: row; padding: 4px 0; gap: 16px; }
  .deck { grid-template-columns: 1fr; }
  .boothrow { grid-template-columns: 1fr; }
  .chat { height: 190px; }
  .duel { flex-direction: row; gap: 12px; padding: 2px 0; }
}

/* On a phone the fight comes first. Everything else is commentary about it. */
@media (max-width: 700px) {
  .wrap { display: flex; flex-direction: column; padding: 14px 14px 26px; gap: 12px; }
  header { order: 0; }
  .opbar { order: 1; }
  .banner { order: 2; }
  .arena { order: 3; }
  .yourcall { order: 4; }
  .crowdsplit { order: 5; }
  .boothrow { order: 6; }
  .ohead { order: 7; }
  .deck { order: 8; }
  footer { order: 9; }

  .wordmark { font-size: 22px; letter-spacing: .1em; }
  .sub { font-size: 10px; }
  .controls { gap: 6px; }
  .ctl { padding: 6px 11px; font-size: 12px; }

  /* Two fighters side by side stays far more legible than stacked on a phone. */
  .arena { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vs { display: none; }
  .fighter { padding: 12px 11px 14px; gap: 7px; border-radius: 16px; }
  .fname { gap: 7px; }
  .fname .face { font-size: 30px; }
  .fname .n { font-size: 16px; letter-spacing: 0; }
  .fname .tag { font-size: 9px; line-height: 1.25; }
  .crown { display: none; }
  .hand { font-size: 56px; min-height: 66px; }
  .hand.waiting { font-size: 38px; }
  .handlabel { font-size: 10px; letter-spacing: .12em; }
  .bubble { font-size: 12.5px; padding: 8px 10px; min-height: 38px; }
  .pip { width: 11px; height: 11px; }
  .meter { font-size: 9px; gap: 6px; }
  .backers { top: 7px; right: 9px; font-size: 15px; }
  button.yourcall { font-size: 11px; padding: 7px 10px; }

  .booth { padding: 11px 13px; gap: 11px; }
  .booth .orb { font-size: 32px; }
  .booth .call { font-size: 19px; }
  .booth .quip { font-size: 12.5px; }
  .opbar { font-size: 11px; padding: 7px 12px; gap: 7px; }
  .opbar .opname { font-size: 13px; }
  .feed { max-height: 150px; }
  .chat { height: 210px; }
}