/* ===================================================================
   Kartellet — private club site
   Black, white, and one electric blue borrowed from Millwall.
   =================================================================== */

:root{
  --black:#000;
  --bg:#06070a;
  --panel:#0c0e13;
  --panel-2:#11141b;
  --line:#1b1f29;
  --line-soft:#14171f;

  --ink:#e9ecf3;
  --ink-dim:#98a1b4;
  --ink-faint:#5f6879;

  --blue:#2f6dff;          /* electric accent */
  --blue-deep:#001d5b;     /* Millwall navy */
  --blue-glow:#7fb2ff;

  --win:#31d07a;
  --lose:#ff4d5e;
  --wait:#f0b429;

  --r:14px;
  --r-sm:9px;
  --shadow:0 18px 50px rgba(0,0,0,.7);

  --display:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
[hidden]{display:none !important}

/* ===================================================================
   THE MARK — the logo, as a mask so it can be lit from behind
   =================================================================== */

.mark,
.hero-mark,
.topbar-mark{
  -webkit-mask-image:url(/img/kartellet-logo.svg);
          mask-image:url(/img/kartellet-logo.svg);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:contain;      mask-size:contain;
  display:block;
}

/* ===================================================================
   LOGIN GATE
   =================================================================== */

.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--black);
  padding:24px;
  overflow:hidden;
}
.gate.is-gone{
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}

/* the sky behind the sign — mostly black, flashes during the strike */
.gate-storm{
  position:absolute; inset:-20%;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(47,109,255,.22), transparent 70%),
    radial-gradient(90% 70% at 50% 50%, rgba(10,20,45,.55), transparent 75%);
  opacity:0;
  animation:storm 3.4s cubic-bezier(.2,.7,.2,1) forwards;
}

.gate-inner{
  position:relative;
  width:100%; max-width:352px;
  text-align:center;
}

/* --- the mark and its lightning --- */

.markwrap{
  position:relative;
  width:min(280px,74vw);
  aspect-ratio:145/94;
  margin:0 auto 26px;
}

.markwrap .mark{ position:absolute; inset:0 }

/* crisp white face */
.mark-face{
  background:linear-gradient(178deg,#fff 0%,#e7eefc 46%,#b9cdf2 100%);
  opacity:0;
  animation:strike 2.6s cubic-bezier(.2,.8,.2,1) forwards;
}

/* blue halo bleeding out from behind the letters */
.mark-glow{
  background:var(--blue-glow);
  filter:blur(20px);
  opacity:0;
  transform:scale(1.04);
  animation:halo 2.6s ease-out forwards, breathe 5.5s 2.6s ease-in-out infinite;
}

/* the bolt itself, drawn on with a dash sweep */
.bolt{
  position:absolute; inset:-38% -10% -10%;
  width:120%; height:170%;
  overflow:visible;
  pointer-events:none;
}
.bolt-path{
  fill:none;
  stroke:#dcebff;
  stroke-width:2.4;
  stroke-linejoin:miter;
  filter:drop-shadow(0 0 7px #6fa8ff) drop-shadow(0 0 20px #2f6dff);
  stroke-dasharray:300;
  stroke-dashoffset:300;
  opacity:0;
  animation:bolt 2.6s cubic-bezier(.15,.9,.25,1) forwards;
}

/* --- keyframes: a strike, two aftershocks, then it holds --- */

@keyframes storm{
  0%,16%{opacity:0}
  18%{opacity:.95}
  21%{opacity:.12}
  27%{opacity:.85}
  31%{opacity:.1}
  46%{opacity:.7}
  100%{opacity:.42}
}

@keyframes bolt{
  0%,14%{opacity:0; stroke-dashoffset:300}
  16%{opacity:1; stroke-dashoffset:120}
  20%{opacity:1; stroke-dashoffset:0}
  24%{opacity:.15}
  28%{opacity:.9}
  33%{opacity:0}
  100%{opacity:0; stroke-dashoffset:0}
}

@keyframes strike{
  0%,14%   {opacity:0;   filter:brightness(3) blur(7px); transform:scale(1.10)}
  17%      {opacity:1;   filter:brightness(2.6) blur(0);  transform:scale(1.015)}
  21%      {opacity:.06; filter:brightness(1)   blur(3px);transform:scale(1.03)}
  27%      {opacity:1;   filter:brightness(2.1) blur(0);  transform:scale(1)}
  31%      {opacity:.14; filter:brightness(1)   blur(2px)}
  38%      {opacity:1;   filter:brightness(1.5)}
  43%      {opacity:.55; filter:brightness(1)}
  56%,100% {opacity:1;   filter:brightness(1) blur(0);    transform:scale(1)}
}

@keyframes halo{
  0%,14%{opacity:0}
  17%{opacity:.95}
  21%{opacity:.05}
  27%{opacity:.8}
  31%{opacity:.08}
  56%,100%{opacity:.34}
}

@keyframes breathe{
  0%,100%{opacity:.30; filter:blur(20px)}
  50%    {opacity:.46; filter:blur(25px)}
}

/* --- gate furniture --- */

.gate-tag{
  margin:0 0 30px;
  font-family:var(--display);
  font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
  animation:fadeup .8s 1.55s ease forwards;
}

.gate-form{
  display:grid; gap:13px;
  opacity:0;
  animation:fadeup .8s 1.8s ease forwards;
}

.gate-lang{
  margin-top:22px;
  display:flex; gap:8px; justify-content:center; align-items:center;
  color:var(--ink-faint); font-size:12px;
  opacity:0; animation:fadeup .8s 2.1s ease forwards;
}
/* ---------- language flags ----------
   Inline SVG rather than emoji: 🇬🇧 and 🇩🇰 do not render on Windows at all. */

.flag{
  display:block;
  width:26px; height:19px;
  border-radius:3px;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.13);
}
.flag-en{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}
.flag-da{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23C8102E'/%3E%3Cpath d='M0,14 h37 M12,0 v28' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E");
}

.langs{display:flex; gap:5px; align-items:center}
.lang{
  padding:3px; border-radius:5px;
  opacity:.38;
  transition:opacity .15s, transform .12s;
}
.lang:hover{opacity:.75}
.lang.is-on{opacity:1}
.lang.is-on .flag{box-shadow:0 0 0 1.5px var(--blue)}
.lang:active{transform:translateY(1px)}

.lang-mini{
  padding:3px; border-radius:5px; display:grid; place-items:center;
  transition:transform .12s;
}
.lang-mini:active{transform:translateY(1px)}

@keyframes fadeup{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ===================================================================
   FORM BITS
   =================================================================== */

.field{display:grid; gap:6px; text-align:left; min-width:0}
.field>span{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.field input,.field select{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:11px 13px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,109,255,.18);
}
/* -webkit-appearance is not optional here: without it iOS keeps its own
   control, ignores the arrow drawn below, and the box reads as a dead
   rectangle — you cannot tell it is a dropdown at all. The explicit colours
   are for the same reason: `color:inherit` leaves Safari free to paint the
   collapsed label in a system colour that vanishes on black. */
.field select{
  -webkit-appearance:none; appearance:none;
  color:var(--ink); background-color:var(--panel-2);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px;
}
/* the popup list is drawn by the OS — give it colours that work there too */
.field select option{color:#111; background:#fff}

.btn{
  border-radius:var(--r-sm);
  padding:11px 17px;
  font-weight:600; font-size:14px;
  letter-spacing:.02em;
  transition:transform .12s, background .15s, border-color .15s, opacity .15s;
  border:1px solid transparent;
  /* a .btn is sometimes an <a>, and a bare anchor arrives underlined and in
     the browser's own blue — or purple once visited, which looked broken */
  display:inline-block; text-decoration:none; text-align:center;
  cursor:pointer;
}
a.btn, a.btn:visited{color:inherit}
a.btn-primary, a.btn-primary:visited{color:#fff}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 22px rgba(47,109,255,.3)}
.btn-primary:hover{background:#4880ff}
.btn-ghost{border-color:var(--line); color:var(--ink-dim); background:var(--panel-2)}
.btn-ghost:hover{border-color:#2b3242; color:var(--ink)}
.btn-block{width:100%; margin-top:4px}
.btn-sm{padding:7px 12px; font-size:13px}

.err{
  margin:2px 0 0; min-height:18px;
  color:var(--lose); font-size:13px;
}

/* ===================================================================
   APP CHROME
   =================================================================== */

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:11px clamp(14px,4vw,30px);
  background:rgba(6,7,10,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-mark{
  width:74px; height:48px; flex:none;
  background:var(--ink);
  transition:background .2s;
}
.topbar-mark:hover{background:#fff}

/* ---------- burger (phones only) ---------- */

.burger{
  display:none;
  width:42px; height:42px; flex:none;
  border-radius:9px; border:1px solid var(--line); background:var(--panel-2);
  padding:0;
  place-items:center; align-content:center; justify-items:center;
  gap:4px;
}
.burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink-dim);
  transition:transform .2s ease, opacity .15s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:8px 13px; border-radius:8px; white-space:nowrap;
  color:var(--ink-faint); font-weight:600; font-size:13.5px;
  transition:color .15s, background .15s;
}
.tab:hover{color:var(--ink-dim)}
.tab.is-on{color:var(--ink); background:var(--panel-2)}
.tab-count{
  display:inline-grid; place-items:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:6px;
  border-radius:99px; background:var(--wait); color:#161003;
  font-size:10.5px; font-weight:700; line-height:1;
  vertical-align:1px;
}

/* a bet you just added — show it landing on the slip */
@keyframes slipflash{
  0%   {box-shadow:0 0 0 0 rgba(47,109,255,.55); border-color:var(--blue)}
  60%  {box-shadow:0 0 0 8px rgba(47,109,255,0); border-color:var(--blue)}
  100% {box-shadow:0 0 0 0 rgba(47,109,255,0)}
}
.panel.flash{animation:slipflash 1.1s ease-out}

.topbar-right{display:flex; align-items:center; gap:9px; flex:none}
.who{
  display:flex; align-items:center; gap:8px;
  padding:5px 11px 5px 5px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel-2);
  font-size:13px; font-weight:600;
}
.who .av{width:25px;height:25px;border-radius:99px;flex:none}

.menu{
  position:absolute; right:clamp(14px,4vw,30px); top:62px; z-index:50;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow);
  padding:5px; display:grid; min-width:186px;
}
.menu button{
  text-align:left; padding:9px 12px; border-radius:6px;
  font-size:14px; color:var(--ink-dim);
}
.menu button:hover{background:var(--panel); color:var(--ink)}

.view{display:none}
.view.is-on{display:block; animation:viewin .3s ease}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wrap{
  max-width:1080px; margin:0 auto;
  padding:20px clamp(14px,4vw,30px) 60px;
  display:grid; gap:18px;
}

/* ===================================================================
   HERO
   =================================================================== */

.hero{position:relative; height:clamp(250px,44vh,420px); overflow:hidden}
.hero-bg,.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-bg img{object-position:50% 42%}
/* No logo over the photo any more — it is already in the top bar, and the
   point of the picture is the five of them. So the veil only has to darken
   the very bottom, enough for the caption and to blend into the page. */
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(6,7,10,.34) 0%,
    rgba(6,7,10,0) 26%,
    rgba(6,7,10,0) 52%,
    rgba(6,7,10,.86) 94%,
    rgba(6,7,10,1) 100%);
}
.hero-inner{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  text-align:center; padding:0 20px 16px;
}
.hero-sub{
  margin:0; font-family:var(--display);
  font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}

/* ===================================================================
   PANELS
   =================================================================== */

.panel{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:17px;
}
.panel-accent{border-color:rgba(47,109,255,.28); box-shadow:0 0 0 1px rgba(47,109,255,.06), 0 14px 40px rgba(0,0,0,.5)}
.panel-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.panel-head h2{font-size:19px; letter-spacing:.06em}
.hint{font-size:12.5px; color:var(--ink-faint)}
.footnote{margin:12px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.5}

.filters{display:flex; gap:5px; margin-left:auto; flex-wrap:wrap}
.chip{
  padding:5px 11px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel-2);
  font-size:12.5px; font-weight:600; color:var(--ink-faint);
}
.chip.is-on{background:var(--blue); border-color:var(--blue); color:#fff}

.loading{padding:26px; text-align:center; color:var(--ink-faint)}
.empty{padding:26px 14px; text-align:center; color:var(--ink-faint); font-size:14px}

/* ===================================================================
   TURN CARD
   =================================================================== */

.turn-card{
  background:linear-gradient(135deg, var(--blue-deep) 0%, #0a1024 62%, var(--panel) 100%);
  border:1px solid rgba(47,109,255,.3);
  border-radius:var(--r);
  padding:20px;
  display:grid; gap:7px; justify-items:start;
  position:relative; overflow:hidden;
}
.turn-card::after{
  content:''; position:absolute; right:-40px; top:-60px;
  width:230px; height:230px;
  background:radial-gradient(circle, rgba(47,109,255,.3), transparent 68%);
  pointer-events:none;
}
.turn-label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-glow); font-weight:700}
.turn-name{font-family:var(--display); font-size:clamp(30px,7vw,46px); line-height:1; text-transform:uppercase; letter-spacing:.02em}
.turn-order{font-size:12.5px; color:var(--ink-dim); line-height:1.7}
.turn-order b{color:var(--ink)}
.turn-fixture{
  display:inline-block;
  font-family:var(--display); font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue-glow);
}
.turn-yours{
  color:#fff; background:var(--blue);
  padding:2px 8px; border-radius:99px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.turn-card .btn{margin-top:6px; position:relative; z-index:1}

/* ===================================================================
   WHO BETS WHICH GAME
   =================================================================== */

.rota{display:grid; gap:7px}
.rota-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:10px 12px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--panel-2);
}
.rota-row.is-next{border-color:rgba(47,109,255,.5); background:rgba(47,109,255,.08)}
.rota-row.is-me .rota-man b{color:#fff}
.rota-av{width:32px; height:32px; border-radius:99px; flex:none; object-fit:cover}
.rota-man{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.rota-man b{
  font-family:var(--display); font-size:16px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--ink);
}
.rota-you, .rota-next{
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px;
}
.rota-you{background:rgba(255,255,255,.1); color:var(--ink-dim)}
.rota-next{background:var(--blue); color:#fff}
.rota-game{display:grid; justify-items:end; gap:1px; text-align:right; min-width:0}
.rota-teams{font-size:12.5px; color:var(--ink-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:46vw}
.rota-when{font-size:11px; color:var(--ink-faint); white-space:nowrap}
.rota-state{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-top:3px;
}
.rota-none     {color:var(--wait)}
.rota-draft    {color:var(--wait)}
.rota-confirmed{color:var(--blue-glow)}
.rota-placed   {color:var(--win)}
.rota-settled  {color:var(--ink-faint)}

@media (max-width:560px){
  .rota-row{grid-template-columns:auto 1fr; row-gap:6px; padding:11px}
  .rota-game{grid-column:1/-1; justify-items:start; text-align:left}
  .rota-teams{max-width:none; white-space:normal}
}

/* ===================================================================
   STAT TILES
   =================================================================== */

.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px}
.stat{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:15px;
}
.stat-k{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.stat-v{font-family:var(--display); font-size:31px; line-height:1.15; margin-top:5px}
.stat-sub{font-size:12px; color:var(--ink-faint); margin-top:2px}
.pos{color:var(--win)} .neg{color:var(--lose)} .neutral{color:var(--ink)}

/* ===================================================================
   BET LIST
   =================================================================== */

.list{display:grid; gap:9px}
.bet{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px; align-items:center;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  padding:12px 13px;
}
.bet .av{width:36px;height:36px;border-radius:99px;flex:none}
.bet-main{min-width:0}
.bet-sel{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bet-meta{font-size:12.5px; color:var(--ink-faint); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bet-right{text-align:right; display:grid; gap:5px; justify-items:end}
.odds{font-family:var(--display); font-size:20px; line-height:1}
.tag{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; border:1px solid;
}
.tag-pending{color:var(--wait); border-color:rgba(240,180,41,.4); background:rgba(240,180,41,.08)}
.tag-placed {color:var(--blue-glow); border-color:rgba(47,109,255,.4); background:rgba(47,109,255,.09)}
.tag-won    {color:var(--win); border-color:rgba(49,208,122,.4); background:rgba(49,208,122,.09)}
.tag-lost   {color:var(--lose); border-color:rgba(255,77,94,.36); background:rgba(255,77,94,.08)}
.tag-void   {color:var(--ink-faint); border-color:var(--line); background:var(--panel)}
.tag-auto   {color:var(--ink-faint); border-color:var(--line); background:transparent; font-weight:600}
.score-in{
  font-size:12px; color:var(--wait); margin-top:3px; font-weight:600;
}
.bet-acts{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.mini{
  font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:6px;
  border:1px solid var(--line); color:var(--ink-dim); background:var(--panel);
}
.mini:hover{color:var(--ink); border-color:#2b3242}
.mini-win:hover{color:var(--win); border-color:rgba(49,208,122,.5)}
.mini-lose:hover{color:var(--lose); border-color:rgba(255,77,94,.5)}

.stack{display:grid; gap:18px}

/* ---------- the usual bets ---------- */

.quick{display:grid; gap:8px}
.quick-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.quick-head>span:first-child{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.warn-yellow{
  margin:0;
  padding:10px 13px;
  border-radius:var(--r-sm);
  border:1px solid rgba(240,180,41,.42);
  background:rgba(240,180,41,.09);
  color:#f5cd6b;
  font-size:12.5px; line-height:1.5;
}

.quick-chips{display:grid; gap:12px}
.qgroup{display:grid; gap:6px}
.qgroup-name{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.qgroup-chips{display:flex; gap:6px; flex-wrap:wrap}
.qchip.has-param{border-style:dashed}
.qchip{
  padding:6px 12px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel-2);
  font-size:12.5px; font-weight:500; color:var(--ink-dim);
  transition:border-color .15s, background .15s, color .15s;
}
.qchip:hover{border-color:rgba(47,109,255,.5); color:var(--ink)}
.qchip.is-on{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---------- a bet bet365 would not take ---------- */

.bet-blocked{
  border-color:rgba(255,77,94,.45);
  background:linear-gradient(180deg, rgba(255,77,94,.07), var(--panel-2));
}
.blocked-note{
  font-size:12px; color:var(--lose); margin-top:3px; line-height:1.45;
}

/* a bet someone else substituted — never hidden, on the record */
.sub-note{
  display:block; font-size:11.5px; line-height:1.45; margin-top:3px;
  color:#c9a6ff;
}
.mini-steward{border-color:rgba(160,120,255,.45); color:#c9a6ff}
.mini-steward:hover{border-color:rgba(160,120,255,.8); color:#ddc9ff}

/* ---------- live market picker ---------- */

.markets{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); padding:13px; display:grid; gap:11px;
}
.markets-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.markets-head h3{font-size:14px; letter-spacing:.1em; color:var(--ink-dim)}
.markets-head .mini{margin-left:auto}

.mkt-tabs{display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.mkt-tabs::-webkit-scrollbar{display:none}
.mkt-tab{
  padding:5px 11px; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line); background:var(--panel-2);
  font-size:12.5px; font-weight:600; color:var(--ink-faint);
}
.mkt-tab.is-on{background:var(--blue); border-color:var(--blue); color:#fff}

.mkt-body{display:grid; gap:6px; max-height:290px; overflow-y:auto}
.mkt-pick{
  display:grid; grid-template-columns:1fr auto auto; gap:11px; align-items:center;
  width:100%; text-align:left;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--panel-2); padding:9px 12px;
  transition:border-color .15s, background .15s;
}
.mkt-pick:hover{border-color:rgba(47,109,255,.5); background:#131826}
.mkt-pick.is-on{border-color:var(--blue); background:rgba(47,109,255,.11)}
.mkt-lab{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mkt-sub{font-size:11.5px; color:var(--ink-faint); margin-top:1px}
.mkt-price{font-family:var(--display); font-size:20px; line-height:1}
.mkt-imp{font-size:11px; color:var(--ink-faint); min-width:38px; text-align:right}

.mkt-scope{
  margin:-3px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}
.field-wide{grid-column:1/-1}
.field-help{
  font-style:normal; font-size:11.5px; line-height:1.45;
  color:var(--ink-faint); margin-top:1px;
}
.mkt-warn{
  margin:0; font-size:11.5px; line-height:1.5; color:var(--wait);
  border-top:1px solid var(--line-soft); padding-top:10px;
}
.mkt-msg{padding:18px 10px; text-align:center; color:var(--ink-faint); font-size:13px}

.drift{font-size:11px; color:var(--ink-faint)}
.drift b{font-weight:600}
.drift.up b{color:var(--win)} .drift.down b{color:var(--lose)}

/* ===================================================================
   CARDS — one man's bets for one match, the coupon that goes to bet365
   =================================================================== */

.cards{display:grid; gap:13px}

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,#0e1119,var(--panel-2));
  overflow:hidden;
}
.card-draft    {border-color:rgba(240,180,41,.35)}
.card-confirmed{border-color:rgba(47,109,255,.45); box-shadow:0 0 0 1px rgba(47,109,255,.1)}
.card-placed   {border-color:rgba(49,208,122,.35)}
.card-settled  {border-color:var(--line-soft); opacity:.85}

.card-top{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
}
.card-face{
  width:42px; height:42px; border-radius:99px; flex:none;
  object-fit:cover; border:1px solid var(--line);
}
.card-who{display:grid; gap:1px; min-width:0; flex:1}
.card-name{
  font-family:var(--display); font-size:19px; text-transform:uppercase;
  letter-spacing:.04em; line-height:1.1;
}
.card-when{
  font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tag-card-draft    {color:var(--wait); border:1px solid rgba(240,180,41,.4); background:rgba(240,180,41,.08)}
.tag-card-confirmed{color:var(--blue-glow); border:1px solid rgba(47,109,255,.45); background:rgba(47,109,255,.1)}
.tag-card-placed   {color:var(--win); border:1px solid rgba(49,208,122,.4); background:rgba(49,208,122,.09)}
.tag-card-settled  {color:var(--ink-faint); border:1px solid var(--line); background:transparent}
.card-top .tag{flex:none; font-size:10px; padding:3px 8px; border-radius:99px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase}

.card-legs{display:grid}
.leg{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px; align-items:start;
  padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
}
.leg:last-child{border-bottom:0}
.leg-blocked{background:rgba(255,77,94,.06)}
.leg-main{min-width:0; display:grid; gap:2px}
.leg-sel{font-weight:600; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere}
.leg-meta{font-size:12px; color:var(--ink-faint)}
.leg-right{display:flex; align-items:center; gap:7px; flex:none}
.leg-odds{font-family:var(--display); font-size:19px; line-height:1}
.leg-acts{grid-column:1/-1; display:flex; gap:5px; flex-wrap:wrap; margin-top:2px}

.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px 14px;
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.22);
}
.card-money{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.card-money strong{font-family:var(--display); font-size:23px; line-height:1}
.card-acts{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}

@media (max-width:520px){
  .card-foot{flex-direction:column; align-items:stretch}
  .card-acts{margin-left:0}
  .card-acts .btn{flex:1}
}

.betform{display:grid; gap:13px}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:11px}
.betform-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:3px}
.returns{font-size:12.5px; color:var(--ink-faint); display:grid; gap:1px}
.returns strong{font-family:var(--display); font-size:23px; color:var(--ink)}

/* ===================================================================
   LEADERBOARD
   =================================================================== */

.tablewrap{overflow-x:auto; margin:0 -4px}
.lb{width:100%; border-collapse:collapse; font-size:14px; min-width:620px}
.lb th{
  text-align:right; padding:8px 10px;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
  border-bottom:1px solid var(--line);
}
.lb th:first-child,.lb th:nth-child(2){text-align:left}
.lb td{padding:11px 10px; text-align:right; border-bottom:1px solid var(--line-soft)}
.lb td:first-child,.lb td:nth-child(2){text-align:left}
.lb tr:last-child td{border-bottom:0}
.lb .rank{font-family:var(--display); font-size:19px; color:var(--ink-faint); width:34px}
.lb tr.top .rank{color:var(--blue-glow)}
.lb .man{display:flex; align-items:center; gap:9px; font-weight:600; white-space:nowrap}
.lb .av{width:30px;height:30px;border-radius:99px;flex:none}
.lb .num{font-family:var(--display); font-size:17px}

.curve{height:190px; position:relative}
.curve svg{width:100%; height:100%; overflow:visible}

/* ===================================================================
   MILLWALL
   =================================================================== */

.mw-top{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center}
.mw-crest{width:60px;height:60px;object-fit:contain;flex:none}
.mw-pos{font-family:var(--display); font-size:44px; line-height:1}
.mw-pos small{font-size:16px; color:var(--ink-faint); margin-left:5px}
.mw-rec{font-size:13px; color:var(--ink-dim); margin-top:3px}

.form-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.fchip{
  width:29px;height:29px; border-radius:7px;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:15px;
  border:1px solid;
}
.fchip.W{background:rgba(49,208,122,.14); border-color:rgba(49,208,122,.45); color:var(--win)}
.fchip.D{background:var(--panel-2); border-color:var(--line); color:var(--ink-dim)}
.fchip.L{background:rgba(255,77,94,.12); border-color:rgba(255,77,94,.4); color:var(--lose)}

/* the whole division, scrollable, with Millwall pinned into view */
.table-scroll{
  max-height:340px; overflow-y:auto;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--panel-2);
}
.table-scroll thead th{
  position:sticky; top:0; z-index:1;
  background:#11141b;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
  text-align:right; padding:9px 8px;
  border-bottom:1px solid var(--line);
}
.table-scroll thead th:nth-child(2){text-align:left}
.table-scroll .us td{position:relative}
.table-scroll .us td:first-child::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue);
}

.mini-table{width:100%; border-collapse:collapse; font-size:13.5px}
.mini-table td{padding:8px 8px; border-bottom:1px solid var(--line-soft); text-align:right}
.mini-table td:nth-child(2){text-align:left; width:100%}
.mini-table tr.us{background:rgba(47,109,255,.1)}
.mini-table tr.us td{color:#fff; font-weight:600}
.mini-table tr:last-child td{border-bottom:0}
.mini-table .cr{width:19px;height:19px;object-fit:contain;vertical-align:-4px;margin-right:7px}

.fix{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--panel-2); padding:13px; display:grid; gap:10px;
}
.fix-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap}
.fix-teams{font-weight:600}
.fix-when{font-size:12px; color:var(--ink-faint); white-space:nowrap}
.bars{display:grid; gap:6px}
.bar{display:grid; grid-template-columns:78px 1fr 46px; gap:9px; align-items:center; font-size:12.5px}
.bar-k{color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-t{height:7px; border-radius:99px; background:var(--panel); overflow:hidden}
.bar-f{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.bar-v{text-align:right; font-family:var(--display); font-size:15px}
.fix-extra{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-faint); padding-top:3px; border-top:1px solid var(--line-soft)}
.fix-extra b{color:var(--ink-dim); font-weight:600}

.live{
  border:1px solid rgba(255,77,94,.4);
  background:linear-gradient(135deg,rgba(255,77,94,.09),var(--panel-2));
}
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--lose);
  margin-right:7px; animation:blink 1.3s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- news ---------- */

.news{display:grid; gap:8px}

/* Publisher chips — one loud feed shouldn't drown the rest out */
.news-filter{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.nchip{
  font:inherit; font-size:11.5px; cursor:pointer;
  padding:5px 11px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
  transition:border-color .15s, color .15s, background .15s;
}
.nchip:hover{color:var(--ink); border-color:rgba(47,109,255,.4)}
.nchip.is-on{
  color:var(--ink); border-color:var(--blue-glow);
  background:rgba(47,109,255,.12);
}

.news-item{
  border-radius:var(--r-sm);
  border:1px solid var(--line-soft); background:var(--panel-2);
  transition:border-color .15s, background .15s;
  overflow:hidden;
}
.news-item:hover{border-color:rgba(47,109,255,.4); background:#131826}
.news-item.is-open{border-color:rgba(47,109,255,.4)}

/* the headline row is the button that opens the item in place */
.news-tap{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  width:100%; padding:11px 12px; text-align:left;
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
}
.news-item.no-thumb .news-tap{grid-template-columns:1fr}

.news-body{
  padding:0 12px 12px; border-top:1px solid var(--line-soft);
  margin-top:2px; padding-top:11px;
}
.news-extract{
  font-size:13px; line-height:1.6; color:var(--ink-dim); margin:0 0 11px;
}
.news-thumb{
  width:74px; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:6px; flex:none; background:var(--panel);
  filter:saturate(.75) brightness(.92);
}
/* These are spans, and spans are inline — the headline and its standfirst ran
   together on one endless line and pushed the panel off the right of the
   screen. They are stacked rows; say so. */
.news-main{min-width:0; overflow-wrap:anywhere; display:block}
.news-head,.news-sum,.news-meta{display:block; min-width:0}
.news-head{font-weight:600; font-size:13.5px; line-height:1.4}
.news-out{
  display:inline-block; margin-left:6px;
  color:var(--ink-faint); font-size:11px; vertical-align:1px;
}
.news-item:hover .news-out{color:var(--blue-glow)}
.news-sum{font-size:12.5px; color:var(--ink-dim); margin-top:3px; line-height:1.45}
.news-meta{
  font-size:11px; color:var(--ink-faint); margin-top:5px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.news-kind{
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:2px 6px; border-radius:99px; border:1px solid var(--line);
}
.news-kind.audio{color:var(--blue-glow); border-color:rgba(47,109,255,.4)}
.news-kind.video{color:var(--wait); border-color:rgba(240,180,41,.4)}

@media (max-width:520px){
  .news-tap{grid-template-columns:1fr}
  .news-thumb{width:100%; max-width:none}
}

.mw-note{
  font-size:11.5px; color:var(--ink-faint); line-height:1.55;
  border-top:1px solid var(--line-soft); padding-top:11px; margin-top:3px;
}

/* ===================================================================
   THE FIRM
   =================================================================== */

/* The chant. Sits above the five of them, where it belongs. */
.motto{
  position:relative;
  display:grid; justify-items:center; gap:2px;
  padding:26px 16px 24px;
  text-align:center;
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(47,109,255,.16), transparent 62%),
    linear-gradient(180deg, #0b0e16, var(--panel));
  overflow:hidden;
}
.motto::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:150px; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
}
.motto-a,.motto-b{
  font-family:var(--display);
  text-transform:uppercase; line-height:.98;
  letter-spacing:.03em;
}
.motto-a{
  font-size:clamp(23px,6.2vw,40px);
  font-weight:500;
  color:var(--ink-dim);
}
.motto-b{
  font-size:clamp(31px,8.6vw,58px);
  font-weight:700;
  color:#fff;
  text-shadow:0 0 26px rgba(47,109,255,.5);
}

.firm-hero{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft)}
.firm-hero img{display:block; width:100%; height:auto}
.firm-hero-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 17px 13px;
  background:linear-gradient(to top, rgba(6,7,10,.94), transparent);
  font-family:var(--display); font-size:13px; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}

.firm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.man-card{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; text-align:center;
  transition:border-color .2s, transform .2s;
}
.man-card:hover{border-color:rgba(47,109,255,.35); transform:translateY(-2px)}
/* 4:5 — phone selfies are portrait, so the cards are too */
.man-photo{
  aspect-ratio:4/5; width:100%; object-fit:cover; display:block;
  filter:grayscale(.18) contrast(1.02);
}
.man-mono{
  aspect-ratio:4/5; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 34%, #131a2c, #080a10 72%);
  font-family:var(--display); font-size:47px; color:var(--ink-faint);
  letter-spacing:.04em;
}
.man-body{padding:12px}
.man-name{font-family:var(--display); font-size:20px; text-transform:uppercase; letter-spacing:.04em}
.man-nick{font-size:12px; color:var(--blue-glow); margin-top:1px}
.man-roi{font-size:12.5px; color:var(--ink-faint); margin-top:6px}
.man-badge{
  display:inline-block; margin-top:8px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px;
  border:1px solid rgba(47,109,255,.4); color:var(--blue-glow); background:rgba(47,109,255,.09);
}

.foot{
  padding:26px 20px 34px; text-align:center;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
  border-top:1px solid var(--line-soft);
}

/* ===================================================================
   DIALOG — replaces every browser prompt box
   =================================================================== */

.sheet{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px}
.sheet-back{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px)}
.sheet-box{
  position:relative;
  width:100%; max-width:430px;
  max-height:calc(100vh - 32px); overflow-y:auto;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px;
  display:grid; gap:14px;
  animation:sheetin .18s ease-out;
}
@keyframes sheetin{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.sheet-title{font-size:20px; letter-spacing:.04em}
.sheet-sub{margin:-6px 0 0; font-size:13px; color:var(--ink-dim); line-height:1.5}
.sheet-body{display:grid; gap:13px}
.sheet-acts{display:flex; gap:9px; justify-content:flex-end; margin-top:2px}
.sheet-acts .btn{min-width:104px}
.btn-danger{background:var(--lose); box-shadow:0 6px 22px rgba(255,77,94,.28)}
.btn-danger:hover{background:#ff6473}

@media (max-width:560px){
  /* a bottom sheet reads better one-handed than a centred box */
  .sheet{place-items:end center; padding:0}
  .sheet-box{
    max-width:none; border-radius:var(--r) var(--r) 0 0;
    padding:20px 16px max(20px, calc(env(safe-area-inset-bottom) + 14px));
    max-height:88vh;
  }
  @keyframes sheetin{from{transform:translateY(100%)}to{transform:none}}
  .sheet-acts{flex-direction:column-reverse}
  .sheet-acts .btn{width:100%}
  .sheet-input{font-size:16px}
}

/* ===================================================================
   WHO IS PICKING RIGHT NOW
   =================================================================== */

.picking-now{
  display:grid; gap:6px; margin-top:9px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.12);
  position:relative; z-index:1;
}
.picking-one{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-dim)}
.picking-one b{color:#fff}
.picking-av{width:22px; height:22px; border-radius:99px; flex:none; object-fit:cover}

.man-badges{display:flex; gap:5px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.badge-steward{border-color:rgba(160,120,255,.45); color:#c9a6ff; background:rgba(160,120,255,.09)}

/* ===================================================================
   TOAST
   =================================================================== */

.toast{
  position:fixed; left:50%; bottom:26px; z-index:200;
  transform:translate(-50%,26px);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:99px; padding:11px 20px;
  font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  max-width:calc(100vw - 34px); text-align:center;
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}
.toast.bad{border-color:rgba(255,77,94,.5)}

/* ===================================================================
   SMALL SCREENS
   =================================================================== */

@media (max-width:640px){
  .topbar{gap:10px; padding:9px 13px}
  .topbar-mark{width:56px;height:37px}
  .tab{padding:9px 11px; font-size:13px}
  .who span.nm{display:none}
  .bet{grid-template-columns:auto 1fr; row-gap:10px}
  .bet-right{grid-column:1/-1; justify-items:stretch; text-align:left}
  .bet-acts{justify-content:flex-start}
  .menu{top:56px}
}

/* ===================================================================
   PHONES — most bets get placed on one, so this is the primary case
   =================================================================== */

@media (max-width:700px){
  /* Six tabs will not fit on a phone, and a sideways-scrolling nav hides
     half of them. Burger instead. */
  .burger{display:grid}
  .tabs{
    position:fixed; left:0; right:0; top:0;
    z-index:60;
    display:none;
    flex-direction:column; gap:0;
    padding:calc(env(safe-area-inset-top, 0px) + 66px) 12px 14px;
    background:rgba(6,7,10,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 50px rgba(0,0,0,.65);
    max-height:100vh; overflow-y:auto;
  }
  .tabs.is-open{display:flex}
  .tabs .tab{
    width:100%; text-align:left;
    padding:15px 14px; font-size:16px;
    border-radius:10px;
    display:flex; align-items:center; gap:9px;
  }
  .tabs .tab.is-on{background:var(--blue); color:#fff}
  .tabs .tab-count{margin-left:auto}
  .topbar-mark{margin-right:auto}
}

@media (max-width:560px){

  /* iOS Safari zooms the whole page in when you focus an input smaller
     than 16px. That one rule is the difference between a form that
     works on a phone and one that lurches about every time you tap it. */
  .field input, .field select, #bSelection, #bOdds, #bStake, #bParamInput{
    font-size:16px;
  }

  /* one field per row — two 155px columns on a 390px screen is unusable */
  .row{grid-template-columns:1fr}

  /* thumbs, not cursors */
  .mini{padding:9px 13px; font-size:13px; border-radius:8px}
  .qchip{padding:9px 14px; font-size:13.5px}
  .chip{padding:8px 13px; font-size:13px}
  .btn{padding:13px 18px; font-size:15px}
  .btn-sm{padding:11px 15px; font-size:14px}
  .leg-acts .mini, .bet-acts .mini, .card-acts .btn{flex:1; text-align:center}

  /* the card is the thing they will actually stare at */
  .card-top{padding:13px 13px}
  .card-face{width:46px; height:46px}
  .card-name{font-size:21px}
  .leg{padding:13px; grid-template-columns:1fr auto}
  .leg-sel{font-size:14.5px}
  .leg-odds{font-size:21px}
  .card-money strong{font-size:26px}

  /* the standings table is 620px wide — on a phone show only the four
     columns anyone actually argues about, and drop the rest */
  .lb{min-width:0; width:100%}
  .lb th:nth-child(3), .lb td:nth-child(3),
  .lb th:nth-child(4), .lb td:nth-child(4),
  .lb th:nth-child(5), .lb td:nth-child(5),
  .lb th:nth-child(6), .lb td:nth-child(6),
  .lb th:nth-child(7), .lb td:nth-child(7),
  .lb th:nth-child(8), .lb td:nth-child(8),
  .lb th:nth-child(11), .lb td:nth-child(11){display:none}
  .lb td, .lb th{padding:11px 6px}
  .lb .man{font-size:14px}
  .lb .av{width:26px; height:26px}
  .lb .num{font-size:15px}

  .mini-table td{padding:9px 5px; font-size:13px}

  /* stat tiles two-up rather than one enormous column */
  .grid-3{grid-template-columns:1fr 1fr; gap:9px}
  .grid-3 .stat:first-child{grid-column:1/-1}
  .stat-v{font-size:27px}

  /* the photo is the point now, so give it a bit more room */
  .hero{height:clamp(210px,36vh,300px)}
  .hero-sub{font-size:11.5px; letter-spacing:.24em}

  .wrap{padding-left:12px; padding-right:12px; gap:14px}
  .panel{padding:14px 13px}
  .panel-head h2{font-size:17px}

  .mkt-body{max-height:none}
  .mkt-pick{padding:12px}
  .mkt-price{font-size:22px}

  .man-name{font-size:18px}
  .firm-grid{grid-template-columns:1fr 1fr; gap:10px}

  .motto{padding:20px 12px 18px}
}

/* iPhone notch and home indicator */
@supports (padding:max(0px)){
  .topbar{
    padding-left:max(13px, env(safe-area-inset-left));
    padding-right:max(13px, env(safe-area-inset-right));
  }
  .wrap{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .foot{padding-bottom:max(34px, calc(env(safe-area-inset-bottom) + 20px))}
  .toast{bottom:max(26px, calc(env(safe-area-inset-bottom) + 14px))}
}

/* Nothing should ever push the page sideways on a phone. */
html, body{max-width:100%; overflow-x:hidden}
.leg-sel, .bet-sel, .mkt-lab, .news-head{overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .mark-face{opacity:1} .mark-glow{opacity:.34} .gate-storm{opacity:.42}
  .gate-tag,.gate-form,.gate-lang{opacity:1}
}

/* ---------- the board ---------- */

/* A labelled pill, not a bare icon. A symbol you have to guess at gets
   ignored, and a message nobody opens may as well never have been written. */
.board-open{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:99px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#e9eefb; background:#173070; border:1px solid #2f6dff;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  transition:background .15s, transform .12s;
  padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));
}
.board-open:hover{background:#1d3d8c}
.board-open:active{transform:scale(.97)}
.board-open-ico{font-size:14px; line-height:1}
/* Something waiting turns the whole pill red and it says how many. A bare dot
   makes you open the thing to find out whether it was worth opening. */
.board-open.has-unread{
  background:#4a1216; border-color:var(--lose); color:#ffdfe2;
  animation:board-knock 1.6s ease-out 3;
}
.board-open.has-unread:hover{background:#5d171c}
.board-dot{
  min-width:19px; height:19px; padding:0 6px; border-radius:99px;
  background:var(--lose); color:#fff;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
}

/* two soft knocks when it first appears, then it holds — a badge that pulses
   forever stops being a signal and becomes wallpaper */
@keyframes board-knock{
  0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.55)}
  50%{box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 0 6px rgba(255,77,94,.16)}
}
@media (prefers-reduced-motion:reduce){
  .board-open.has-unread{animation:none}
}

.board{position:fixed; inset:0; z-index:70}
.board-back{position:absolute; inset:0; background:rgba(2,4,9,.72)}
.board-panel{
  position:absolute; top:0 ;right:0; bottom:0; width:min(420px, 100%);
  display:flex; flex-direction:column;
  background:#0a0d14; border-left:1px solid #1f2939;
  padding:0 0 env(safe-area-inset-bottom, 0px);
}
.board-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--line-soft);
}
.board-title{
  margin:0; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}
.board-x{
  font:inherit; font-size:15px; cursor:pointer; line-height:1;
  background:none; border:0; color:var(--ink-faint); padding:4px 6px;
}
.board-x:hover{color:var(--ink)}

.board-new{padding:12px 16px; border-bottom:1px solid var(--line-soft)}
.board-new textarea{
  width:100%; resize:vertical; min-height:52px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink);
  font:inherit; font-size:16px; line-height:1.5; padding:9px 11px;
}
.board-new textarea:focus{outline:none; border-color:var(--blue-glow)}
.board-new-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.board-err{font-size:12px; color:var(--loss, #e0483f)}

.board-list{flex:1; overflow-y:auto; padding:12px 16px 24px; display:flex; flex-direction:column; gap:14px}

.post{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.post-av{width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none; background:var(--panel)}
.post-av-txt{
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#7f8ba3; background:#1b2740;
}
.post-main{min-width:0}
.post-who{font-size:12.5px; font-weight:600; color:var(--blue-glow)}
.post-when{font-weight:400; color:var(--ink-faint); margin-left:5px}
.post-body{font-size:13.5px; line-height:1.55; color:var(--ink); margin-top:2px; white-space:pre-wrap; overflow-wrap:anywhere}
.post-meta{font-size:11px; color:var(--ink-faint); margin-top:2px}
.post-acts{display:flex; gap:12px; margin-top:5px}
.post-act{
  font:inherit; font-size:11.5px; cursor:pointer;
  background:none; border:0; padding:0; color:var(--ink-faint);
}
.post-act:hover{color:var(--blue-glow)}

.post-kids{margin-top:10px; padding-left:11px; border-left:1px solid var(--line-soft); display:flex; flex-direction:column; gap:11px}
.post-reply .post-av{width:24px; height:24px; font-size:10px}
.post-reply .post-body{font-size:13px}

.post-reply-form{display:flex; gap:7px; margin-top:9px}
.post-reply-in{
  flex:1; min-width:0; font:inherit; font-size:16px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink); padding:7px 10px;
}
.post-reply-in:focus{outline:none; border-color:var(--blue-glow)}

/* the club writing to itself — present, but not shouting */
.post-auto{
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  color:var(--ink-faint); opacity:.85;
}
.post-auto .post-body{font-size:12.5px; color:var(--ink-dim)}
.post-auto-ico{font-size:13px; line-height:1.4; color:var(--ink-faint)}

/* one line on the dashboard, so a message can't hide behind a shut drawer */
.board-peek{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font:inherit; cursor:pointer; margin-bottom:14px;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line-soft); background:var(--panel-2); color:inherit;
  transition:border-color .15s, background .15s;
}
.board-peek:hover{border-color:rgba(47,109,255,.4); background:#131826}
.board-peek.is-unread{border-color:rgba(255,77,94,.45); background:#160d10}
.board-peek.is-unread .board-peek-lab{color:var(--lose)}
.board-peek-lab{
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue-glow); flex:none;
}
.board-peek-body{
  flex:1; min-width:0; font-size:12.5px; color:var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.board-peek-go{color:var(--ink-faint); font-size:15px; line-height:1; flex:none}

@media (max-width:560px){
  .board-panel{width:100%; border-left:0}
  .board-open{right:12px; bottom:12px}
}