/* ============================================================
   Niche Wars — warm arena
   Light is the default. Every colour is a token; nothing is
   defined only inside a media or [data-theme] block.
   ============================================================ */
:root{
  /* warm neutrals — paper, not screen */
  --ground:#F7F4EF; --panel:#FFFFFF; --panel2:#F2EEE7; --sunk:#EFEAE1;
  --line:#E2DBD0; --line-strong:#CFC5B6;
  --ink:#1A1714; --muted:#5A5148; --dim:#8A7F72;

  --dave:#C2410C; --dave-soft:#F0CBB6; --dave-wash:#FDF1EA; --dave-ink:#FFFFFF;
  --foe:#1F6FB2;  --foe-soft:#C0D6EA;  --foe-wash:#EDF4FA;
  --giant:#5B5347; --giant-soft:#DDD5C8; --giant-wash:#F0EBE2;
  --gold:#8A6114;  --gold-soft:#E0C892; --gold-wash:#FBF3E0;
  --win:#1B7F4B; --hot:#BE3A2B;
  --bronze:#8A6038; --bronze-soft:#DCC5AE;
  --silver:#5D6570; --silver-soft:#CDD3DA;

  --note-bg:#FBF0DA; --note-line:#E6D3AA; --note-ink:#6B4E16;
  --shadow-sm:0 1px 2px rgba(26,23,20,.05);
  --shadow-md:0 1px 3px rgba(26,23,20,.06), 0 4px 14px rgba(26,23,20,.05);
  --shadow-crown:0 2px 6px rgba(138,97,20,.14), 0 10px 28px rgba(138,97,20,.10);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14110E; --panel:#1D1915; --panel2:#252019; --sunk:#191510;
    --line:#332C24; --line-strong:#4A4136;
    --ink:#F2EDE6; --muted:#B3A897; --dim:#8A7F70;
    --dave:#FF7A3D; --dave-soft:#5C2E14; --dave-wash:#2A1A11; --dave-ink:#1A0C04;
    --foe:#5CA8E8;  --foe-soft:#1B3D5A;  --foe-wash:#131E28;
    --giant:#A79B87; --giant-soft:#433C31; --giant-wash:#221E18;
    --gold:#E5B450; --gold-soft:#584312; --gold-wash:#2A2113;
    --win:#4BD489; --hot:#FF6B57;
    --bronze:#C08E5E; --bronze-soft:#4A3524;
    --silver:#9AA4B0; --silver-soft:#3A414A;
    --note-bg:#2A2113; --note-line:#4A3A1C; --note-ink:#E0C58C;
    --shadow-sm:none; --shadow-md:none;
    --shadow-crown:0 0 0 1px rgba(229,180,80,.20);
  }
}
:root[data-theme="dark"]{
  --ground:#14110E; --panel:#1D1915; --panel2:#252019; --sunk:#191510;
  --line:#332C24; --line-strong:#4A4136;
  --ink:#F2EDE6; --muted:#B3A897; --dim:#8A7F70;
  --dave:#FF7A3D; --dave-soft:#5C2E14; --dave-wash:#2A1A11; --dave-ink:#1A0C04;
  --foe:#5CA8E8;  --foe-soft:#1B3D5A;  --foe-wash:#131E28;
  --giant:#A79B87; --giant-soft:#433C31; --giant-wash:#221E18;
  --gold:#E5B450; --gold-soft:#584312; --gold-wash:#2A2113;
  --win:#4BD489; --hot:#FF6B57;
  --bronze:#C08E5E; --bronze-soft:#4A3524;
  --silver:#9AA4B0; --silver-soft:#3A414A;
  --note-bg:#2A2113; --note-line:#4A3A1C; --note-ink:#E0C58C;
  --shadow-sm:none; --shadow-md:none;
  --shadow-crown:0 0 0 1px rgba(229,180,80,.20);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Public Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--dave);}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}

/* labels are spaced small caps in the body face — mono at 9px was unreadable */
.lbl{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);}

.note{
  background:var(--note-bg); border-bottom:1px solid var(--note-line); color:var(--note-ink);
  font-size:12.5px; padding:8px 20px; text-align:center;
}

/* ---------------- header: same structure on every page ---------------- */
.hdr{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;}
.hdr-in{max-width:1320px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:18px;}
.brand{font-family:"Archivo",sans-serif; font-weight:900; font-size:19px; letter-spacing:-.02em; white-space:nowrap;}
.brand a{color:var(--ink); text-decoration:none;}
.brand span{color:var(--dave);}
.hdr-ctx{display:flex; align-items:baseline; gap:9px; padding-left:17px; border-left:1px solid var(--line); min-width:0;}
.hdr-ctx .lbl{font-size:10px;}
.hdr-ctx b{font-family:"Archivo",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.01em;}
.hdr-right{display:flex; align-items:center; gap:22px; margin-left:auto;}
.hdr-stats{display:flex; gap:22px;}
.hdr-stats div{text-align:right;}
.hdr-stats b{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:17px;
  line-height:1.1; margin-top:1px; font-variant-numeric:tabular-nums;}
.hdr-stats b.live{color:var(--win);}
.hdr-actions{display:flex; align-items:center; gap:9px;}

.btn-primary{
  background:var(--dave); color:var(--dave-ink); border:none; border-radius:7px;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; padding:10px 16px; cursor:pointer; text-decoration:none;
  white-space:nowrap; display:inline-block;
}
.btn-primary:hover{filter:brightness(1.08);}
.avatar{border-radius:50%; display:block; border:1px solid var(--line);}
.who{font-size:13px; color:var(--muted);}
.linkbtn{background:none; border:none; color:var(--dim); cursor:pointer; padding:0;
  font-size:12px; text-decoration:underline; text-underline-offset:2px; font-family:inherit;}
.linkbtn:hover{color:var(--dave);}
.auth{display:flex; align-items:center; gap:9px;}
.themebtn{background:none; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  color:var(--muted); width:34px; height:34px; display:grid; place-items:center; padding:0;}
.themebtn:hover{border-color:var(--dave-soft); color:var(--dave);}
.themebtn svg{width:16px; height:16px;}
.themebtn .moon{display:none;} .themebtn .sun{display:block;}
:root[data-theme="dark"] .themebtn .moon{display:block;}
:root[data-theme="dark"] .themebtn .sun{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .moon{display:block;}
  :root:not([data-theme="light"]) .themebtn .sun{display:none;}
}
button:focus-visible, a:focus-visible{outline:2px solid var(--dave); outline-offset:2px;}

/* ---------------- home ---------------- */
.home{max-width:1320px; margin:0 auto; padding:52px 22px 80px;}
.hero{max-width:860px;}
.hero h1{font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(34px,5vw,58px);
  line-height:1.03; letter-spacing:-.033em; margin:0 0 16px; text-wrap:balance;}
.hero h1 em{font-style:normal; color:var(--dave); display:block;}
.hero p{font-size:18.5px; color:var(--muted); margin:0; max-width:620px;}

.tape{display:flex; flex-wrap:wrap; gap:34px; margin:34px 0 8px; padding:18px 22px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.tape b{display:block; font-family:"Archivo",sans-serif; font-weight:900; font-size:26px;
  line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums;}
.tape .t-live b{color:var(--win);}
.tape .t-gold b{color:var(--gold);}

.sec{display:flex; align-items:baseline; gap:12px; margin:42px 0 14px; flex-wrap:wrap;}
.sec h2{font-family:"Archivo",sans-serif; font-weight:900; font-size:21px; margin:0; letter-spacing:-.02em;}
.sec .sub{font-size:13.5px; color:var(--dim);}

.ngrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px;}
.ncard{display:flex; align-items:center; gap:13px; padding:15px 17px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s, box-shadow .15s;}
.ncard:hover{border-color:var(--dave-soft); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.ncard-b{display:grid; min-width:0;}
.ncard-b b{font-family:"Archivo",sans-serif; font-weight:800; font-size:16px; letter-spacing:-.01em;}
.ncard-b i{font-style:normal; font-size:12.5px; color:var(--dim);}
.ncount{margin-left:auto; text-align:right;}
.ncount b{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:18px; color:var(--dave);}
.ncount span{font-size:10px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase;}

.bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px;}
.bcard{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:16px 18px; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink); display:block;}
.bcard:hover{border-color:var(--dave-soft);}
.bcard.gold{border-color:var(--gold-soft); background:linear-gradient(100deg,var(--gold-wash),var(--panel) 55%);}
.bcard .top{display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap;}
.bcard .nm{font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.015em;}
.bcard .in{font-size:13px; color:var(--dim); margin-bottom:10px;}
.bcard .in b{color:var(--giant); font-weight:600;}
.bcard .foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.rec-inline{font-size:13.5px; font-variant-numeric:tabular-nums;}
.rec-inline b{color:var(--win); font-weight:700;}
.rec-inline i{font-style:normal; color:var(--dim);}

/* ---------------- arena ---------------- */
.arena{max-width:1320px; margin:0 auto; padding:22px 22px 70px;}
.anchor{background:linear-gradient(180deg,var(--giant-wash),var(--panel) 78%);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:20px 24px;
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; box-shadow:var(--shadow-sm);}
.bigmark{width:56px; height:56px; border-radius:13px; display:grid; place-items:center;
  font-family:"Archivo",sans-serif; font-weight:900; font-size:20px;
  background:var(--giant-soft); color:var(--giant); border:1px solid var(--line-strong);}
.aname{font-family:"Archivo",sans-serif; font-weight:900; font-size:29px; letter-spacing:-.03em; line-height:1.04;}
.atag{font-size:14px; color:var(--muted); margin-top:3px;}
.astats{display:flex; gap:26px; text-align:right;}
.astats b{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:19px;
  color:var(--giant); margin-top:2px; font-variant-numeric:tabular-nums;}

.duels{display:grid; gap:11px;}
.d{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:15px 17px; box-shadow:var(--shadow-sm);}
.d.ending{border-color:var(--hot);}
.dtop{display:flex; align-items:center; gap:10px; margin-bottom:11px; flex-wrap:wrap;}
.pill{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid var(--dave-soft);
  color:var(--dave); background:var(--dave-wash);}
.pill.hot{border-color:var(--hot); color:var(--hot); background:transparent;}
.dclock{margin-left:auto; font-size:13px; color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums;}
.d.ending .dclock{color:var(--hot);}
.drow{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;}
.dname{font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.015em;}
.dl .dname{color:var(--dave);}
.dr{text-align:right;}
.dr .dname{color:var(--foe);}
.dsub{font-size:12px; color:var(--dim); margin-top:1px;}
.dscore{font-family:"IBM Plex Mono",monospace; font-size:23px; font-weight:600; margin-top:7px; font-variant-numeric:tabular-nums;}
.dvs{font-family:"Archivo",sans-serif; font-weight:900; font-size:12px; color:var(--dim);}
.dbar{height:9px; border-radius:999px; overflow:hidden; display:flex; margin-top:13px; background:var(--foe);}
.dbar i{display:block; height:100%; background:var(--dave); transition:width .4s cubic-bezier(.2,.9,.3,1);}
.dacts{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap; align-items:center;}
.db{border-radius:7px; padding:8px 14px; cursor:pointer; border:1px solid; background:transparent;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; display:inline-block;}
.db.l{color:var(--dave); border-color:var(--dave-soft);}
.db.l:hover{background:var(--dave-wash);}
.db.r{color:var(--foe); border-color:var(--foe-soft);}
.db.r:hover{background:var(--foe-wash);}
.db.done{opacity:.5; cursor:default;}

/* ---------------- ladder ---------------- */
.lhead{display:grid; grid-template-columns:46px minmax(0,1.5fr) minmax(0,1.15fr) 196px;
  gap:16px; padding:0 18px 8px; align-items:end;}
.lhead .c-vs{display:grid; grid-template-columns:1fr auto 1fr; gap:8px;}
.lhead .c-vs .l{color:var(--dave);}
.lhead .c-vs .r{text-align:right; color:var(--giant);}
.lhead .c-act{text-align:right;}

.board{display:grid; gap:9px;}
.row{display:grid; grid-template-columns:46px minmax(0,1.5fr) minmax(0,1.15fr) 196px;
  gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.2,.9,.25,1.05), border-color .25s, box-shadow .25s;}
@media (prefers-reduced-motion:reduce){.row{transition:none;}}
.row:hover{border-color:var(--line-strong);}

/* podium weight — the top three read as a different class of thing */
.row.p1{border:2px solid var(--gold); background:linear-gradient(100deg,var(--gold-wash),var(--panel) 46%);
  box-shadow:var(--shadow-crown); padding:18px;}
.row.p2{border:2px solid var(--silver-soft);}
.row.p3{border:2px solid var(--bronze-soft);}
.row.you{border-color:var(--dave); background:linear-gradient(100deg,var(--dave-wash),var(--panel) 46%);}
.row.shielded{opacity:.9;}

.rank{font-family:"Archivo",sans-serif; font-weight:900; font-size:23px; color:var(--dim);
  text-align:center; font-variant-numeric:tabular-nums; line-height:1;}
.row.p1 .rank{font-size:34px; color:var(--gold);}
.row.p2 .rank{font-size:27px; color:var(--silver);}
.row.p3 .rank{font-size:27px; color:var(--bronze);}
.row.you .rank{color:var(--dave);}

.crownlab{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:4px;}
.youlab{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dave); margin-bottom:4px;}
.cname{font-family:"Archivo",sans-serif; font-weight:800; font-size:17.5px; letter-spacing:-.018em;
  line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.row.p1 .cname{font-size:20px;}
.ctag{font-size:13.5px; color:var(--muted); margin-top:3px;}

.insig{display:inline-grid; place-items:center; min-width:38px; height:20px; padding:0 6px;
  border-radius:4px; font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.07em; border:1px solid;}
.insig.t0{color:var(--dim); border-color:var(--line-strong); background:var(--sunk);}
.insig.t1{color:var(--bronze); border-color:var(--bronze-soft); background:var(--panel2);}
.insig.t2{color:var(--foe); border-color:var(--foe-soft); background:var(--foe-wash);}
.insig.t3{color:var(--dave); border-color:var(--dave-soft); background:var(--dave-wash);}
.insig.t4{color:var(--gold); border-color:var(--gold); background:var(--gold-wash);}

/* medals — real icons with a tooltip on hover and keyboard focus */
.medals{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; align-items:center;}
.med{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid; flex:0 0 24px; position:relative; cursor:help;}
.med svg{width:13px; height:13px;}
.med.m1{color:var(--bronze); border-color:var(--bronze-soft); background:var(--panel2);}
.med.m2{color:var(--foe); border-color:var(--foe-soft); background:var(--foe-wash);}
.med.m3{color:var(--dave); border-color:var(--dave-soft); background:var(--dave-wash);}
.med.m4{color:var(--gold); border-color:var(--gold); background:var(--gold-wash);}
.med .tip{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); font-size:12px; line-height:1.4; padding:7px 10px;
  border-radius:6px; white-space:nowrap; z-index:45; opacity:0; visibility:hidden;
  transition:opacity .12s; pointer-events:none; box-shadow:var(--shadow-md);}
.med .tip b{display:block; font-size:12.5px;}
.med .tip i{font-style:normal; opacity:.75;}
.med:hover .tip, .med:focus-visible .tip{opacity:1; visibility:visible;}
.medmore{font-size:11.5px; color:var(--dim);}

/* the asymmetry block — the point of the product, so it must read cleanly */
.vsblock{display:grid; gap:5px; min-width:0;}
.vsrow{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; font-size:13.5px;}
.vsrow .l{color:var(--dave); font-weight:600; font-variant-numeric:tabular-nums;}
.vsrow .r{color:var(--giant); text-align:right; font-variant-numeric:tabular-nums;}
.vsrow .k{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); text-align:center; white-space:nowrap;}

.act{display:flex; align-items:center; justify-content:flex-end; gap:12px;}
.recbox{display:grid; gap:1px; justify-items:end;}
.recmain{font-size:15px; font-variant-numeric:tabular-nums;}
.recmain b{color:var(--win); font-weight:700;}
.recmain i{color:var(--dim); font-style:normal;}
.recrank{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);}
.nrtext{font-size:11px; color:var(--dim);}
.state{font-size:12px; white-space:nowrap; text-align:right;}
.state.fight{color:var(--foe); font-weight:600;}
.state.shield{color:var(--giant); font-weight:600;}
.state.cool{color:var(--dim);}
.btn-chal{border-radius:7px; padding:8px 13px; cursor:pointer; background:var(--gold-wash);
  color:var(--gold); border:1px solid var(--gold-soft); white-space:nowrap;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:11.5px;
  letter-spacing:.05em; text-transform:uppercase;}
.btn-chal:hover{background:var(--gold); color:var(--panel);}

.empty{color:var(--dim); font-size:14px; padding:18px 0;}

@media (max-width:1080px){
  .lhead{display:none;}
  .row{grid-template-columns:40px 1fr; row-gap:12px; padding:14px;}
  .row.p1{padding:16px;}
  .vsblock,.act{grid-column:1/-1;}
  .act{justify-content:space-between;}
  .anchor{grid-template-columns:auto 1fr;}
  .astats{grid-column:1/-1; justify-content:flex-start; text-align:left;}
  .hdr-ctx{display:none;}
  .hdr-right{gap:14px;}
  .hdr-stats{gap:16px;}
}
@media (max-width:620px){
  .drow{grid-template-columns:1fr;}
  .dr{text-align:left;}
  .dvs{display:none;}
  .hdr-stats{display:none;}
}

/* ---------------- home: compact top, submit field ---------------- */
.home .top{max-width:840px; margin:0 auto; text-align:center; padding:8px 0 4px;}
.home .top h1{
  font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(25px,3.4vw,38px);
  line-height:1.14; letter-spacing:-.028em; margin:0 0 20px; text-wrap:balance;
}
.home .top h1 em{font-style:normal; color:var(--dave);}
.enter{display:flex; gap:9px; max-width:580px; margin:0 auto;}
.enter input{
  flex:1; min-width:0; font:inherit; font-size:15px; padding:13px 15px;
  border:1px solid var(--line-strong); border-radius:8px;
  background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm);
}
.enter input::placeholder{color:var(--dim);}
.enter input:focus{outline:none; border-color:var(--dave); box-shadow:0 0 0 3px var(--dave-wash);}
.enter .btn-primary{padding:13px 20px; font-size:13px;}
.entersub{text-align:center; font-size:13.5px; color:var(--dim); margin:11px 0 0;}

/* big dogs — spread across the full width */
.dogs{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;}
.dog{
  display:grid; gap:3px; padding:17px 18px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); text-decoration:none;
  color:var(--ink); box-shadow:var(--shadow-sm);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.dog:hover{border-color:var(--dave-soft); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.dogmark{
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  font-family:"Archivo",sans-serif; font-weight:900; font-size:15px; margin-bottom:9px;
  background:var(--giant-soft); color:var(--giant); border:1px solid var(--line-strong);
}
.dogmark.asc{background:var(--gold-wash); color:var(--gold); border-color:var(--gold-soft);}
.dogname{font-family:"Archivo",sans-serif; font-weight:900; font-size:18px; letter-spacing:-.02em;}
.dogcat{font-size:12.5px; color:var(--dim);}
.dogfoot{font-size:12.5px; color:var(--muted); margin-top:7px; display:grid; gap:1px;}
.dogn{font-family:"Archivo",sans-serif; font-weight:800; color:var(--dave); font-size:14px;}
.doglead{color:var(--dim); font-size:12px;}

/* live wars */
.wars{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px;}
.war{
  display:block; padding:15px 17px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
}
.war:hover{border-color:var(--dave-soft);}
.war.ending{border-color:var(--hot);}
.wartop{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.wartop .dclock{margin-left:auto;}
.warrow{display:grid; grid-template-columns:1fr auto auto auto 1fr; gap:9px; align-items:center;}
.warname{font-family:"Archivo",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.warname.l{color:var(--dave);} .warname.r{color:var(--foe); text-align:right;}
.warscore{font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums;}
.warscore.l{color:var(--dave);} .warscore.r{color:var(--foe);}
.war .dbar{margin-top:11px;}

/* ---------------- forms ---------------- */
.form-page{max-width:620px; margin:0 auto; padding:40px 22px 80px;}
.form-page h1{font-family:"Archivo",sans-serif; font-weight:900; font-size:32px;
  letter-spacing:-.03em; margin:0 0 10px;}
.form-page .lede{font-size:16px; color:var(--muted); margin:0 0 24px;}
.err{background:var(--dave-wash); border:1px solid var(--dave-soft); color:var(--dave);
  padding:11px 14px; border-radius:8px; font-size:14px; margin:0 0 18px;}
.stack{display:grid; gap:16px;}
.stack label{display:grid; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted);}
.stack input, .stack select{
  font:inherit; font-size:15px; font-weight:400; padding:11px 13px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:8px; background:var(--panel);
  /* inputs have a large intrinsic minimum; without these they overflow grid columns */
  width:100%; min-width:0; box-sizing:border-box;
}
.stack input:focus, .stack select:focus{outline:none; border-color:var(--dave); box-shadow:0 0 0 3px var(--dave-wash);}
.stack fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; margin:0;}
.stack legend{font-size:13.5px; font-weight:700; padding:0 7px; color:var(--ink);}
.hint{font-size:13px; color:var(--dim); margin:0 0 13px;}
.three{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:11px;
  align-items:end;}
.lbltxt{display:inline-flex; align-items:center; gap:4px; min-height:17px;}
.stack > .btn-primary{justify-self:start; padding:13px 22px; font-size:13px;}

@media (max-width:560px){
  .enter{flex-direction:column;}
  .warrow{grid-template-columns:1fr auto 1fr;}
  .warrow .dvs{display:none;}
}

/* ---------------- headline fight ---------------- */
.headline{
  margin-top:44px; background:var(--panel); border:3px solid var(--dave);
  border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden;
}
.hl-top{display:flex; align-items:center; gap:12px; padding:12px 26px;
  background:var(--panel2); border-bottom:1px solid var(--line); flex-wrap:wrap;}
.lbl.accent{color:var(--dave);}
.hl-sub{font-size:13px; color:var(--muted);}
.hl-top .dclock{margin-left:auto;}
.hl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,auto) minmax(0,1fr);
  gap:30px; padding:26px 32px 22px; align-items:start;}
.hl-side{display:flex; flex-direction:column; align-items:flex-start; gap:5px;}
.hl-side.r{align-items:flex-end; text-align:right;}
.hl-name{font-family:"Archivo",sans-serif; font-weight:900; font-size:30px;
  letter-spacing:-0.03em; line-height:1.08;}
.hl-name.l{color:var(--dave);} .hl-name.r{color:var(--foe);}
.hl-tag{font-size:14px; color:var(--muted);}
.hl-facts{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-top:6px;
  font-family:"IBM Plex Mono",monospace; font-size:13px;}
.hl-facts.l{color:var(--dave);} .hl-facts.r{color:var(--foe); justify-content:flex-end;}
.hl-facts .dot{color:var(--dim);}
.hl-score{font-family:"IBM Plex Mono",monospace; font-size:36px; font-weight:600;
  font-variant-numeric:tabular-nums; margin-top:8px; line-height:1;}
.hl-score.l{color:var(--dave);} .hl-score.r{color:var(--foe);}
.hl-side .db{margin-top:14px;}
.hl-mid{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; align-self:center; max-width:250px; margin:0 auto; padding-top:6px;}
.hl-vs{font-family:"Archivo",sans-serif; font-weight:900; font-size:34px;
  letter-spacing:0.04em; color:var(--dim); line-height:1;}
.hl-story{font-size:13.5px; color:var(--muted); line-height:1.5;}
.hl-story strong{color:var(--giant);}
.hl-link{font-size:12.5px;}
.hl-bar{padding:0 32px 22px;}
.hl-bar .dbar{height:10px;}

/* ---------------- ascension band ---------------- */
.ascband{margin-top:44px; background:var(--gold-wash); border:1px solid var(--gold-soft);
  border-radius:var(--radius); padding:20px 26px; display:flex; align-items:center; gap:20px;}
.asc-ic{width:44px; height:44px; border-radius:10px; background:var(--panel);
  border:1px solid var(--gold-soft); color:var(--gold);
  display:grid; place-items:center; flex:0 0 44px;}
.asc-ic svg{width:22px; height:22px;}
.asc-txt{display:grid; gap:2px;}
.asc-txt b{font-family:"Archivo",sans-serif; font-weight:900; font-size:17.5px;
  letter-spacing:-0.02em; color:var(--gold);}
.asc-txt span{font-size:14px; color:var(--muted);}
.asc-txt em{font-style:normal; color:var(--ink);}

@media (max-width:900px){
  .hl-grid{grid-template-columns:1fr; gap:20px;}
  .hl-side.r{align-items:flex-start; text-align:left;}
  .hl-facts.r{justify-content:flex-start;}
  .hl-mid{order:3; max-width:none; padding-top:0;}
}

/* ============================================================
   Above-the-fold home: everything scales with viewport height.
   Appended last so these override the fixed sizes above.
   ============================================================ */
.home{
  min-height:calc(100dvh - 57px);
  display:flex; flex-direction:column;
  padding:clamp(8px,1.6vh,16px) 22px clamp(8px,1.2vh,12px);
}
.home .top{padding:0;}
.home .top h1{font-size:clamp(20px,3.2vh,30px); margin-bottom:clamp(8px,1.6vh,15px); line-height:1.12;}
.enter input{padding:clamp(7px,1.2vh,11px) 15px; font-size:clamp(13px,1.7vh,15px);}
.enter .btn-primary{padding:clamp(7px,1.2vh,11px) 18px; font-size:clamp(11px,1.5vh,13px);}
.entersub{margin-top:clamp(4px,0.8vh,8px); font-size:clamp(11px,1.5vh,13px);}
.home .sec{margin:clamp(8px,1.6vh,16px) 0 clamp(5px,0.9vh,9px);}
.home .sec h2{font-size:clamp(14px,1.9vh,18px); line-height:1.25;}
.home .sec .sub{font-size:clamp(10.5px,1.4vh,12.5px);}

/* fight card — compact, no header strip; tinted by whoever is winning */
.headline{
  margin-top:clamp(10px,1.8vh,17px);
  border:clamp(2px,0.35vh,3px) solid transparent;
  background:
    linear-gradient(90deg,
      var(--dave-wash) 0%,
      var(--dave-wash) calc(var(--hl-pct,50%) - 7%),
      var(--foe-wash) calc(var(--hl-pct,50%) + 7%),
      var(--foe-wash) 100%) padding-box,
    linear-gradient(90deg,
      var(--dave) 0%,
      var(--dave) calc(var(--hl-pct,50%) - 7%),
      var(--foe) calc(var(--hl-pct,50%) + 7%),
      var(--foe) 100%) border-box;
}
.hl-grid{padding:clamp(10px,1.8vh,17px) clamp(16px,2.2vw,28px) clamp(6px,1.2vh,12px); gap:clamp(14px,2.2vw,28px); align-items:stretch;}
.hl-name{font-size:clamp(18px,2.6vh,24px);}
.hl-tag{font-size:clamp(11px,1.5vh,13px);}
.hl-facts{font-size:clamp(10.5px,1.4vh,12.5px); margin-top:clamp(2px,0.4vh,4px);}
.hl-score{font-size:clamp(20px,3vh,28px); margin-top:clamp(3px,0.6vh,6px);}
.hl-side .db{margin-top:clamp(6px,1vh,10px); padding:clamp(5px,0.9vh,8px) 13px; font-size:clamp(10px,1.3vh,11.5px);}
.hl-mid{gap:clamp(4px,0.8vh,8px); padding-top:0; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; align-items:center;}
.hl-vs{font-size:clamp(22px,3.2vh,30px);}
.hl-mid .dclock{font-size:clamp(11px,1.5vh,12.5px);}
.hl-story{font-size:clamp(11px,1.5vh,13px); line-height:1.4;}
.hl-bar{padding:0 clamp(16px,2.2vw,28px) clamp(8px,1.4vh,13px);}
.hl-bar .dbar{height:clamp(6px,1vh,9px);}
.hl-after{display:flex; justify-content:flex-end; margin-top:clamp(3px,0.6vh,6px); font-size:clamp(11px,1.4vh,12.5px);}

/* dogs — mark sits beside the name, one meta line */
.dogs{gap:clamp(8px,1vw,12px);}
.dog{padding:clamp(9px,1.4vh,13px) clamp(11px,1.2vw,15px); gap:clamp(2px,0.5vh,4px);}
.dog-head{display:flex; align-items:center; gap:10px;}
.dogmark{width:clamp(26px,3.6vh,34px); height:clamp(26px,3.6vh,34px); margin-bottom:0; font-size:clamp(10px,1.5vh,13px); flex:0 0 auto;}
.dogname{font-size:clamp(14px,1.9vh,17px);}
.dogcat{font-size:clamp(10px,1.4vh,12px);}
.dogfoot{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:clamp(2px,0.5vh,5px); font-size:clamp(10.5px,1.4vh,12.5px);}
.dogn{font-size:clamp(11px,1.6vh,13.5px);}
.doglead{font-size:clamp(10px,1.4vh,12px);}

/* wars */
.wars{gap:clamp(8px,1vw,12px);}
.war{padding:clamp(8px,1.4vh,13px) clamp(11px,1.2vw,15px);}
.wartop{margin-bottom:clamp(4px,0.8vh,8px);}
.wartop .lbl{font-size:clamp(9.5px,1.2vh,11px);}
.warname{font-size:clamp(12px,1.7vh,14.5px);}
.war .pav.sm{width:clamp(19px,2.9vh,26px); height:clamp(19px,2.9vh,26px);
  flex-basis:clamp(19px,2.9vh,26px); font-size:clamp(8px,1.1vh,10px);}
.warscore{font-size:clamp(12.5px,1.8vh,15px);}
.war .dbar{margin-top:clamp(4px,0.9vh,9px); height:clamp(5px,0.8vh,7px);}
.war .dclock{font-size:clamp(10.5px,1.4vh,12.5px);}

/* crown band — the last thing above the fold */
.ascband{margin-top:clamp(8px,1.6vh,16px); padding:clamp(8px,1.5vh,14px) clamp(12px,1.8vw,22px); gap:clamp(10px,1.4vw,18px);}
.asc-ic{width:clamp(26px,3.8vh,36px); height:clamp(26px,3.8vh,36px); flex-basis:clamp(26px,3.8vh,36px);}
.asc-ic svg{width:clamp(13px,2vh,18px); height:clamp(13px,2vh,18px);}
.asc-txt b{font-size:clamp(12.5px,1.8vh,16px);}
.asc-txt span{font-size:clamp(10.5px,1.5vh,13px);}

/* short windows shed quiet text, never a section */
@media (max-height:820px){ .hl-tag{display:none;} .dogcat{display:none;} }
@media (max-height:700px){ .hl-story{display:none;} .doglead{display:none;} .asc-txt span{display:none;} .entersub{display:none;} .hl-after{display:none;} }

/* footer — below the fold: logo and links */
.foot{border-top:1px solid var(--line); background:var(--panel);}
.foot-in{max-width:1320px; margin:0 auto; padding:26px 22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.foot-links{display:flex; gap:18px; font-size:13.5px;}
.foot-links a{color:var(--muted); text-decoration:none;}
.foot-links a:hover{color:var(--dave);}
.foot-c{margin-left:auto; font-size:12.5px; color:var(--dim);}

/* headline middle column: VS pinned to the true centre, the rest below it */
.hl-mid{
  display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  justify-items:center; align-items:start; align-self:stretch;
  max-width:none; margin:0; gap:0; padding:0; text-align:center;
}
.hl-vs{grid-row:2; align-self:center;}
.hl-mid-sub{grid-row:3; display:flex; flex-direction:column; align-items:center;
  gap:clamp(2px,0.5vh,5px); padding-top:clamp(4px,0.9vh,9px);}
.hl-mid .dclock{margin-left:0;}
.hl-story{white-space:nowrap;}
@media (max-width:1080px){ .hl-story{white-space:normal;} }

/* the bar row sits below the grid; stretch the middle column into that
   space so the VS centres on the whole card, not just the fighters area */
.hl-mid{height:calc(100% + clamp(18px,3vh,26px));}

/* every fight card wears the score split: wash fill, fading border */
.war, .d{
  border:2px solid transparent;
  background:
    linear-gradient(90deg,
      var(--dave-wash) 0%,
      var(--dave-wash) calc(var(--hl-pct,50%) - 7%),
      var(--foe-wash) calc(var(--hl-pct,50%) + 7%),
      var(--foe-wash) 100%) padding-box,
    linear-gradient(90deg,
      var(--dave) 0%,
      var(--dave) calc(var(--hl-pct,50%) - 7%),
      var(--foe) calc(var(--hl-pct,50%) + 7%),
      var(--foe) 100%) border-box;
}
.war:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.war{transition:box-shadow .15s, transform .15s;}
/* an ending fight overrides the border with the alarm colour, keeps the fill */
.war.ending, .d.ending{
  background:
    linear-gradient(90deg,
      var(--dave-wash) 0%,
      var(--dave-wash) calc(var(--hl-pct,50%) - 7%),
      var(--foe-wash) calc(var(--hl-pct,50%) + 7%),
      var(--foe-wash) 100%) padding-box,
    linear-gradient(var(--hot), var(--hot)) border-box;
}

/* arena duel cards: compact, several per row */
.duels{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.d{padding:11px 14px;}
.d .dtop{margin-bottom:7px;}
.d .warrow{gap:9px;}
.d .dbar{margin-top:9px; height:7px;}
.d .dacts{margin-top:9px; gap:7px;}
.d .db{padding:6px 11px; font-size:10.5px;}

/* compact duel cards: each back button sits under its own fighter */
.d .dacts{display:grid; grid-template-columns:1fr auto 1fr; margin-top:7px;}
.d .dacts .db.l{grid-column:1; justify-self:start;}
.d .dacts .db.r{grid-column:3; justify-self:end;}

/* ============================================================
   Ladder rows, redesigned: the product's own story, not a vs-table
   ============================================================ */
.row{grid-template-columns:46px minmax(0,1.15fr) auto 168px; align-items:center;}
.ident{min-width:0;}
.srow{display:flex; gap:clamp(14px,1.8vw,30px); align-items:flex-start; flex-wrap:wrap;}
.scell{display:grid; gap:3px; justify-items:start;}
.slbl{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); cursor:default;}
.sval{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.sval .sw{color:var(--win); font-weight:700;}
.sval .sl{color:var(--dim); font-style:normal;}
.form{display:flex; gap:4px; align-items:center; height:19px;}
.fdot{width:10px; height:10px; border-radius:50%; cursor:help;}
.fdot.w{background:var(--win);}
.fdot.x{background:var(--hot); opacity:.45;}
.fnone{font-size:12px; color:var(--dim); line-height:19px;}
.act{display:grid; gap:3px; justify-items:end; align-content:center;}
.crownstreak{font-size:11px; font-weight:600; color:var(--gold);}

/* the crown row gets a touch more presence */
.row.p1 .sval{font-size:15px;}
.row.p1 .srow{gap:clamp(16px,2vw,34px);}

@media (max-width:1180px){
  .row{grid-template-columns:40px 1fr; row-gap:12px;}
  .srow,.act{grid-column:1/-1;}
  .act{justify-items:start;}
}

/* generic styled tooltip, shared by medals, rank chips and stat labels */
.hastip{position:relative; cursor:help;}
.hastip .tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); font-size:12px; line-height:1.4;
  padding:7px 10px; border-radius:6px; white-space:normal; width:max-content; max-width:240px;
  z-index:45; opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none;
  box-shadow:var(--shadow-md); text-transform:none; letter-spacing:normal;
  font-weight:400; text-align:left;
}
.hastip .tip b{display:block; font-size:12.5px; font-weight:700;}
.hastip .tip i{font-style:normal; opacity:.85;}
.hastip:hover .tip, .hastip:focus-visible .tip, .hastip:focus .tip{opacity:1; visibility:visible;}

/* insignia chip becomes an icon chip, sitting after the name */
.insig{width:26px; height:22px; min-width:0; padding:0; display:inline-grid; place-items:center;}
.insig svg{width:15px; height:15px; display:block;}

/* ---------------- profile images ---------------- */
/* marks become layered: the favicon paints over the initials when it loads */
.dogmark, .bigmark{position:relative; overflow:hidden;}
.avimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:inherit; background:var(--panel); z-index:1;}
.avtxt{position:relative; z-index:0;}
.dogmark .avimg, .bigmark .avimg{padding:6px; box-sizing:border-box; object-fit:contain;}

/* product avatar on ladder rows and the headline fight */
.pav{position:relative; width:40px; height:40px; border-radius:9px; flex:0 0 40px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--panel2); border:1px solid var(--line-strong);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:13px; color:var(--muted);}
.pav.big{width:48px; height:48px; flex-basis:48px; font-size:15px;}
.pav .avimg{padding:5px; object-fit:contain;}

/* ladder identity: avatar beside the text block */
.ident{display:flex; gap:12px; align-items:flex-start; min-width:0;}
.identtxt{min-width:0; display:grid; gap:0;}

/* headline fight identity rows */
.hl-id{display:flex; gap:12px; align-items:center;}
.hl-id.r{flex-direction:row-reverse;}
.hl-id .pav{width:44px; height:44px; flex-basis:44px;}

/* tiny inline avatars in fight rows: an image or nothing */
/* fight-card tile: the ladder's avatar, shrunk — never a blank space */
.pav.sm{width:26px; height:26px; flex:0 0 26px; border-radius:7px; font-size:10px;}
.pav.sm .avimg{padding:3px;}

/* ---------------- bigger identity everywhere ---------------- */
/* home giant cards */
.dogmark{width:clamp(44px,6.6vh,58px); height:clamp(44px,6.6vh,58px);
  border-radius:13px; font-size:clamp(15px,2.2vh,19px);}
.dogmark .avimg{padding:8px;}
.dog-head{gap:13px;}

/* arena anchor: the giant at full presence */
.bigmark{width:78px; height:78px; border-radius:17px; font-size:26px;}
.bigmark .avimg{padding:10px;}

/* ladder rows: rank, then a large square tile, then the listing */
.row{grid-template-columns:46px auto minmax(0,1.15fr) auto 168px;}
.pav.xl{width:74px; height:74px; flex:none; border-radius:13px;
  font-size:21px; align-self:center;}
.pav.xl .avimg{padding:9px;}
/* the podium is a staircase: gold, silver, bronze, then everyone else on one step */
.row .pav.xl{width:60px; height:60px; border-radius:11px; font-size:17px;}
.row .pav.xl .avimg{padding:7px;}
.row.p3 .pav.xl{width:74px; height:74px; border-radius:13px; font-size:21px;}
.row.p2 .pav.xl{width:83px; height:83px; border-radius:14px; font-size:24px;}
.row.p1 .pav.xl{width:92px; height:92px; border-radius:15px; font-size:26px;}
.row.p1 .pav.xl .avimg, .row.p2 .pav.xl .avimg, .row.p3 .pav.xl .avimg{padding:9px;}
.ident{display:grid; gap:0; align-self:center;}

@media (max-width:1180px){
  .row{grid-template-columns:40px auto 1fr;}
  .srow,.act{grid-column:1/-1;}
  .row .pav.xl{width:44px; height:44px; border-radius:9px; font-size:14px;}
  .row.p3 .pav.xl{width:52px; height:52px; border-radius:10px; font-size:16px;}
  .row.p2 .pav.xl{width:58px; height:58px; border-radius:11px; font-size:18px;}
  .row.p1 .pav.xl{width:64px; height:64px; border-radius:12px; font-size:19px;}
}

/* ---------------- back dialog ---------------- */
.dlg-overlay{position:fixed; inset:0; background:rgba(26,23,20,.45); z-index:80;
  display:grid; place-items:center; padding:20px;}
.dlg{background:var(--panel); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--shadow-md); width:min(400px,100%); padding:18px; display:grid; gap:9px;}
.dlg-title{font-family:"Archivo",sans-serif; font-weight:900; font-size:18px;
  letter-spacing:-.02em; margin-bottom:4px;}
.dlg-opt{display:grid; gap:3px; text-align:left; padding:12px 14px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:9px; font:inherit; color:var(--ink);}
.dlg-opt:hover{border-color:var(--dave); background:var(--dave-wash);}
.dlg-opt b{font-family:"Archivo",sans-serif; font-weight:800; font-size:14.5px;}
.dlg-opt span{font-size:12.5px; color:var(--muted); line-height:1.45;}
.dlg-cancel{background:none; border:none; color:var(--dim); cursor:pointer; font:inherit;
  font-size:13px; padding:6px; justify-self:center;}
.dlg-cancel:hover{color:var(--dave);}

/* tip amounts inside the back dialog */
.dlg-amounts{display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center;
  background:var(--gold-wash); border:1px solid var(--gold-soft); border-radius:9px; padding:11px 13px;}
.dlg-amlbl{font-family:"Archivo",sans-serif; font-weight:800; font-size:13.5px; color:var(--gold);}
.dlg-amt{font:inherit; font-weight:700; font-size:14px; padding:8px 13px; cursor:pointer;
  background:var(--panel); border:1px solid var(--gold-soft); border-radius:7px; color:var(--ink);
  text-align:center;}
.dlg-amt:hover{background:var(--gold); color:var(--panel); border-color:var(--gold);}
.dlg-note{font-size:12px; color:var(--dim); line-height:1.45; padding:0 2px;}
.tipsval{color:var(--gold);}

/* ---------------- profile, manage, admin ---------------- */
.form-page.wide{max-width:880px;}
.wholink{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; border-radius:7px;}
.wholink:hover .who{color:var(--dave);}
.okmsg{background:#E8F4EC; border:1px solid #BFE0CB; color:var(--win);
  padding:11px 14px; border-radius:8px; font-size:14px; margin:0 0 18px;}
:root[data-theme="dark"] .okmsg{background:#12251A; border-color:#1F4630;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .okmsg{background:#12251A; border-color:#1F4630;} }
.hint-inline{font-weight:400; font-size:12px; color:var(--dim);}
.mlist{display:grid; gap:10px; margin-top:20px;}
.mrow{display:flex; gap:14px; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm);}
.mrow-id{min-width:0; flex:1;}
.mrow-name{font-family:"Archivo",sans-serif; font-weight:800; font-size:16.5px;
  display:flex; align-items:center; gap:8px;}
.mrow-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.mrow-actions{display:flex; gap:8px;}
.panelbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-top:18px; box-shadow:var(--shadow-sm);}
.panelbox h2{font-family:"Archivo",sans-serif; font-weight:900; font-size:16px; margin:0 0 8px;}
.panelbox p{font-size:14px; color:var(--muted); margin:0 0 10px;}
.inline-form{display:flex; gap:10px; align-items:end;}
.inline-form label{display:grid; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted);}
.inline-form select{font:inherit; padding:7px 9px; border:1px solid var(--line-strong);
  border-radius:7px; background:var(--panel); color:var(--ink);}
.embed{width:100%; font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  border:1px solid var(--line-strong); border-radius:7px; padding:9px 11px;
  background:var(--sunk); color:var(--ink); resize:none;}
.admin-h{font-family:"Archivo",sans-serif; font-weight:900; font-size:18px; margin:30px 0 10px;}
.tablebox{overflow-x:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.atable{border-collapse:collapse; width:100%; font-size:13.5px;}
.atable th{text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); padding:10px 14px; border-bottom:1px solid var(--line-strong);}
.atable td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
.atable tr:last-child td{border-bottom:none;}
.atable .num{text-align:right; font-variant-numeric:tabular-nums;}
.linkbtn.danger{color:var(--hot);}
.warn-txt{color:var(--hot); font-size:12px;}
.addniche{margin:14px 0 0;}
.addniche summary{cursor:pointer; font-weight:700; font-size:14px; color:var(--dave); padding:6px 0;}
.addniche .stack{margin-top:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;}
.state.self{color:var(--dave); font-weight:600; text-decoration:none;}

/* greyed dialog options + zero-tips styling */
.dlg-opt.off, .dlg-amounts.off{opacity:.55; cursor:not-allowed; border-style:dashed;}
.dlg-amt.off{opacity:.7; cursor:not-allowed; pointer-events:none;}
.dlg-amounts.off .dlg-amlbl{color:var(--dim);}
.dlg.notice{width:min(360px,100%);}
.tipsval.zero{color:var(--dim); font-weight:400;}

/* ---------------- product showcase ---------------- */
.dlg.showcase{width:min(560px,100%);}
.sc-open{color:inherit; text-decoration:none; display:inline-block;}
.sc-open.name:hover{color:var(--dave); text-decoration:underline; text-underline-offset:3px;}
.sc-open:hover .pav{border-color:var(--dave-soft);}
.sc-card{display:grid; gap:13px;}
.sc-head{display:flex; gap:14px; align-items:center;}
.sc-name{font-family:"Archivo",sans-serif; font-weight:900; font-size:22px; letter-spacing:-.02em;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.sc-sub{font-size:13.5px; color:var(--muted); margin-top:2px;}
.sc-tagline{font-size:15px; font-weight:600; margin:0;}
.sc-desc{font-size:14px; color:var(--muted); margin:0; white-space:pre-line; line-height:1.55;}
.sc-video{position:relative; width:100%; aspect-ratio:16/9; border-radius:9px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--sunk);}
.sc-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.sc-stats{display:flex; gap:clamp(12px,2vw,24px); flex-wrap:wrap; padding:12px 14px;
  background:var(--panel2); border-radius:9px;}
.sc-links{display:flex; gap:8px; flex-wrap:wrap;}
.sc-chip{font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--muted); text-decoration:none; background:var(--panel);}
.sc-chip:hover{border-color:var(--dave); color:var(--dave);}
.sc-chip.main{border-color:var(--dave-soft); color:var(--dave); background:var(--dave-wash);}
.sc-chip.tip{border-color:var(--gold-soft); color:var(--gold); background:var(--gold-wash);}
.sc-page .sc-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow-sm);}
.sc-back{margin-top:18px; font-size:14px;}
.stack textarea{font:inherit; font-size:15px; padding:11px 13px; color:var(--ink);
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid var(--line-strong); border-radius:8px; background:var(--panel); resize:vertical;}
.stack textarea:focus{outline:none; border-color:var(--dave); box-shadow:0 0 0 3px var(--dave-wash);}

/* ---------------- showcase v2: site chip in the head, icon socials, gallery ---------------- */
.sc-head{flex-wrap:wrap;}
.sc-site{margin-left:auto; align-self:center; white-space:nowrap;}
.sc-soc{width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--muted); background:var(--panel); position:relative;}
.sc-soc svg{width:15px; height:15px; display:block; fill:currentColor;}
.sc-soc:hover{border-color:var(--dave); color:var(--dave);}
.sc-links{align-items:center;}
.sc-gallery{display:grid; gap:8px;}
.sc-gallery.n2{grid-template-columns:1fr 1fr;}
.sc-gallery.n3{grid-template-columns:repeat(3,1fr);}
.sc-gallery a{display:block; border-radius:9px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--sunk);}
.sc-gallery img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover;}
@media (max-width:560px){ .sc-gallery.n3{grid-template-columns:1fr 1fr;} }

/* ---------------- dialog chrome v3: no scrollbar, close on top, tooltips free ---------------- */
/* the overlay does the scrolling, so the dialog itself never clips a tooltip */
.dlg-overlay.scrolls{--dlg-pad-top:max(4vh,18px);
  place-items:start center; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--dlg-pad-top) 20px 76px; scrollbar-width:none; -ms-overflow-style:none;}
.dlg-overlay.scrolls::-webkit-scrollbar{width:0; height:0; display:none;}
.dlg{position:relative;}
.dlg.showcase{overflow:visible;}

.dlg-x{width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel2); border:1px solid var(--line-strong); color:var(--muted);
  font:inherit; font-size:18px; line-height:1; cursor:pointer; padding:0;}
.dlg-x:hover{border-color:var(--dave); color:var(--dave); background:var(--dave-wash);}
.dlg-x:focus-visible{outline:2px solid var(--dave); outline-offset:2px;}
.dlg-x.corner{position:absolute; top:12px; right:12px; z-index:4;}
.dlg-title{padding-right:38px;}

/* the close sits on the title row, and that row rides the top while a tall card scrolls */
.dlg .sc-head{position:sticky; top:calc(-1 * var(--dlg-pad-top, 0px)); z-index:6;
  background:var(--panel); margin:-18px -18px 0; padding:18px 18px 11px;
  border-radius:12px 12px 0 0;}
.dlg .sc-head::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px;
  background:linear-gradient(to bottom, var(--panel), transparent); pointer-events:none;}
.dlg-x.in-head{flex:0 0 auto;}
.dlg .sc-site{margin-left:auto;}

.dlg-more{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90;
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:999px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line-strong);
  box-shadow:var(--shadow-md); cursor:pointer;}
.dlg-more{bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
.dlg-more:hover{border-color:var(--dave); color:var(--dave);}
.dlg-more[hidden]{display:none;}

/* script-placed tooltips: fixed to the viewport, never clipped by anything */
.tip.fixed{position:fixed; transform:none; bottom:auto; right:auto;
  max-width:min(280px,86vw); z-index:95;}

/* tips block */
.sc-tips{display:grid; gap:7px;}
.sc-tipnote{font-size:12px; color:var(--dim); line-height:1.45; margin:0; padding:0 2px;}
.sc-tipnote a{color:var(--gold); font-weight:700;}

/* tiny screens: the tip amounts stack under their label instead of squeezing */
@media (max-width:400px){
  .dlg-amounts{grid-template-columns:repeat(3,1fr);}
  .dlg-amlbl{grid-column:1 / -1;}
  .dlg-overlay.scrolls{padding-left:12px; padding-right:12px;}
}

/* ---------------- fight cards: every fighter has a face and a showcase ---------------- */
.warname{display:inline-flex; align-items:center; gap:7px; min-width:0;
  color:var(--dave); text-decoration:none;}
.warname.r{flex-direction:row; justify-content:flex-end;}
.warname .wntxt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.warname:hover .wntxt{text-decoration:underline; text-underline-offset:3px;}
.warname:hover .pav{border-color:currentColor;}
.warname:focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:6px;}

/* the whole war card still opens its ladder, from underneath the fighters */
.war{position:relative;}
.war-cover{position:absolute; inset:0; border-radius:var(--radius); z-index:0;}
.war .wartop, .war .warrow, .war .dbar{position:relative; z-index:1;}
.war .wartop, .war .dbar{pointer-events:none;}

/* ---------------- giants: plain values, the wording behind tooltips ---------------- */
.a-id .lbl{display:inline-flex; align-items:center; gap:5px; position:relative; cursor:help;}
.a-id .lbl .i-info{width:11px; height:11px; opacity:.6;}
.a-id .lbl:hover .i-info{opacity:1; color:var(--dave);}
.aname{display:flex; align-items:center; gap:8px;}
.fmark{display:inline-flex; align-items:flex-start; gap:2px;}
/* the anchor sits directly below the sticky header: its tooltips open downwards */
.hastip.tipdown .tip, .anchor .hastip .tip{bottom:auto; top:calc(100% + 8px);}
/* anchor tooltips hang from their trigger's edge rather than centring, so they
   cannot spill past the card when the stats wrap onto their own row */
.anchor .hastip .tip{left:0; right:auto; transform:none;}
.astats .astat:last-child .tip{left:auto; right:0;}
/* the mark sits mid-line after the name, so its tooltip hangs leftwards */
.anchor .fmark .tip{left:auto; right:0;}
.fchk{display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:var(--win-wash,var(--panel2)); color:var(--win); border:1px solid currentColor;
  font-size:11px; font-weight:800; position:relative; cursor:help; flex:0 0 auto;}
.fchk svg{width:11px; height:11px;}
.fchk.asc{color:var(--gold);}
.fchk.none{color:var(--dim);}
.fsrc{font-size:10px; font-weight:700; color:var(--muted); text-decoration:none;
  align-self:flex-start; margin-left:2px; padding:0 1px;}
.fsrc:hover{color:var(--dave); text-decoration:underline;}
.astat{position:relative;}
.astat.hastip{cursor:help;}
.astat.hastip:hover .lbl{color:var(--dave);}
.footinfo{display:inline-grid; place-items:center; position:relative; cursor:help; color:var(--dim);}
.footinfo .i-info{width:14px; height:14px;}
.footinfo:hover, .footinfo:focus-visible{color:var(--dave);}
/* The notice hangs off the footer ROW, not the icon: the icon's position moves
   as the footer wraps, and a tooltip anchored to it overflowed the page. */
.foot-in{position:relative;}
.footinfo.hastip{position:static;}
.footinfo .tip{left:22px; right:22px; bottom:calc(100% - 8px); transform:none;
  max-width:520px; width:auto;}
.foot-c .heart{color:var(--dave); font-size:13px; vertical-align:-1px;}
.foot-c a{color:var(--muted); text-decoration:none; font-weight:700;}
.foot-c a:hover{color:var(--dave); text-decoration:underline; text-underline-offset:3px;}
.dim-txt{color:var(--dim); font-size:11.5px;}

/* ---------------- the rest of the niches ---------------- */
.dogmore{align-content:center; justify-items:start; border-style:dashed; background:var(--panel2);}
.dogmore-n{font-family:"Archivo",sans-serif; font-weight:900; font-size:22px; color:var(--dave); line-height:1;}
.dogmore-t{font-family:"Archivo",sans-serif; font-weight:800; font-size:14px;}
.dogmore-c{font-size:11.5px; color:var(--muted);}

.ngrid-full{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px;}
.ncard{display:grid; grid-template-columns:auto 1fr; gap:4px 13px; align-items:center;
  padding:15px 17px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:border-color .15s, transform .15s;}
.ncard:hover{border-color:var(--dave-soft); transform:translateY(-1px);}
.nc-id{min-width:0;}
.nc-name{font-family:"Archivo",sans-serif; font-weight:800; font-size:16.5px; letter-spacing:-.015em;
  display:flex; align-items:center; gap:6px;}
.nc-asc{color:var(--gold); font-size:14px;}
.nc-cat{font-size:12px; color:var(--muted);}
.nc-meta{grid-column:2; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:12.5px;}
.nc-n{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink);}
.nc-l{color:var(--muted);}
.nc-lead{color:var(--muted);}
.nc-empty{color:var(--dim); font-style:italic;}
.nc-foot{margin-top:18px; font-size:13px; color:var(--muted);}

/* ---------------- unclaimed spots: the shape of the game before anyone is in ---------------- */
.slot{
  border:1.5px dashed var(--line-strong) !important;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--line) 26%, transparent) 9px 10px),
    var(--panel);
  box-shadow:none !important; color:var(--muted); text-decoration:none;
  transition:border-color .16s, background-color .16s, transform .16s;
}
.slot:hover{border-color:var(--dave) !important; color:var(--ink); transform:translateY(-1px);}
.slot .rank{color:var(--dim); font-weight:700;}
.slotmark{
  border:1.5px dashed var(--line-strong) !important; background:transparent !important;
  color:var(--dim); font-weight:700; display:inline-grid; place-items:center;
}
.slot:hover .slotmark{border-color:var(--dave) !important; color:var(--dave);}
.slotname{font-family:"Archivo",sans-serif; font-weight:800; color:var(--muted);}
.slot:hover .slotname{color:var(--dave);}
.slotsub{font-size:12.5px; color:var(--dim); margin-top:2px; line-height:1.45;}
.slotcta{
  grid-column:-2 / -1; justify-self:end; align-self:center; white-space:nowrap;
  font-size:12.5px; font-weight:700; color:var(--dave);
  border:1px dashed var(--dave-soft); border-radius:999px; padding:7px 14px;
  background:var(--dave-wash);
}
.slot:hover .slotcta{background:var(--dave); border-color:var(--dave); color:var(--panel);}
.slotcta.wide{grid-column:1/-1; justify-self:center; margin-top:9px;}
.slotclock{color:var(--dim) !important; border:1px dashed var(--line-strong) !important;
  border-radius:7px; padding:3px 9px;}
.slotside{color:var(--dim) !important;}
.slotbar{opacity:.45;}
.slotbar i{background:var(--line-strong) !important;}
.headline.slot .hl-vs{color:var(--dim);}
.headline.slot .hl-score{color:var(--dim);}
.headline.slot .db{
  border:1px dashed var(--dave-soft); background:var(--dave-wash); color:var(--dave);
  text-decoration:none; text-align:center;
}
.headline.slot:hover .db{background:var(--dave); border-color:var(--dave); color:var(--panel);}
.d.slot .warrow{opacity:.95;}

/* ---------------- the indie limit and the big-dog door ---------------- */
.hdr-apply{font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:none;
  white-space:nowrap; padding:7px 4px;}
.hdr-apply:hover{color:var(--dave);}
.leginfo{display:inline-grid; place-items:center; position:relative; cursor:help;
  vertical-align:-2px; margin-left:3px; color:var(--dim);}
.leginfo .i-info{width:13px; height:13px;}
.leginfo:hover{color:var(--dave);}
.err-cta{font-weight:700; color:inherit; text-underline-offset:3px;}
input.hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important;}
.dim-row{opacity:.55;}
.notecell{max-width:260px; font-size:12px; color:var(--muted);}
@media (max-width:900px){.hdr-apply{display:none;}}

/* verified tips on fight cards: a quiet gold mark, never a lever */
.ftip{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  color:var(--gold); white-space:nowrap; flex:0 0 auto; cursor:help;}
.hl-facts .ftip{font-size:inherit;}

/* ---------------- legal pages ---------------- */
.form-page.legal{max-width:760px;}
.legal h1{margin-bottom:4px;}
.legal .lu{font-size:12.5px; color:var(--dim); margin:0 0 26px;}
.legal h2{font-family:"Archivo",sans-serif; font-weight:800; font-size:19px;
  letter-spacing:-.02em; margin:30px 0 8px;}
.legal p, .legal li{font-size:14.5px; line-height:1.65; color:var(--muted);}
.legal p{margin:0 0 12px;}
.legal ul{margin:0 0 12px; padding-left:20px;}
.legal li{margin-bottom:7px;}
.legal strong{color:var(--ink);}
.legal a{color:var(--dave); text-underline-offset:3px;}
.legal .tablebox{overflow-x:auto; margin:0 0 12px;}
.ltable{border-collapse:collapse; width:100%; font-size:13px;}
.ltable th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); padding:8px 12px 6px; border-bottom:1px solid var(--line-strong);}
.ltable td{padding:9px 12px; border-bottom:1px solid var(--line); color:var(--muted);
  line-height:1.5; vertical-align:top;}
.ltable code{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink);}
.foot{margin-top:48px;}

/* rungs below the next free one: shape, not an offer */
.row.slot.shut{opacity:.5; cursor:default;}
.row.slot.shut:hover{border-color:var(--line-strong) !important; transform:none;}
.row.slot.shut .slotname{color:var(--dim);}