/* ============================================================
   Sorcery League — theme
   Design system extracted from sorcerytcg.com (computed styles,
   14 Nov 2026): #121212 ground, #e1e1e1 text, --primary #ff7b00,
   1px rgba(255,255,255,.15) rules, square corners,
   Cinzel (titles) + Enriqueta (body). See design/DESIGN.md.
   ============================================================ */

@font-face{font-family:Cinzel;font-style:normal;font-weight:400 800;
  src:url("/static/fonts/cinzel-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
  font-display:swap}
@font-face{font-family:Cinzel;font-style:normal;font-weight:400 800;
  src:url("/static/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1EFF;font-display:swap}
@font-face{font-family:Enriqueta;font-style:normal;font-weight:400;
  src:url("/static/fonts/enriqueta-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
  font-display:swap}
@font-face{font-family:Enriqueta;font-style:normal;font-weight:400;
  src:url("/static/fonts/enriqueta-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1EFF;font-display:swap}
@font-face{font-family:Enriqueta;font-style:normal;font-weight:700;
  src:url("/static/fonts/enriqueta-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
  font-display:swap}
@font-face{font-family:Enriqueta;font-style:normal;font-weight:700;
  src:url("/static/fonts/enriqueta-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1EFF;font-display:swap}

:root{
  --ink:#121212;          /* measured body background */
  --ink-2:#191919;        /* measured form control */
  --panel:#171717;
  --panel-2:#1c1d21;
  --line:rgba(255,255,255,.15);
  --line-soft:rgba(255,255,255,.08);
  --text:#e1e1e1;
  --muted:#9a9a9a;
  --faint:#6f6f6f;
  --gold:#e8b66b;
  --gold-soft:#f0cd95;
  --ember:#ff7b00;        /* measured --color-primary */
  --frost:#206deb;        /* measured --color-secondary */
  --win:#6fbf8f;
  --loss:#e06a6a;
  --draw:#9a9a9a;
  --font-title:Cinzel,Georgia,"Times New Roman",serif;
  --font-body:Enriqueta,Georgia,"Times New Roman",serif;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  background-image:radial-gradient(ellipse 80% 46% at 50% -12%,rgba(255,123,0,.075),transparent 70%);
  background-repeat:no-repeat;
  color:var(--text);
  font:16px/1.6 var(--font-body);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ember);color:#121212}
a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:#fff;border-bottom-color:var(--ember)}
img{max-width:100%}

h1,h2,h3,h4{font-family:var(--font-title);font-weight:700;line-height:1.1;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(28px,4.6vw,44px);text-transform:uppercase;letter-spacing:.02em}
h2{font-size:clamp(19px,2.4vw,24px);text-transform:uppercase;letter-spacing:.03em}
h3{font-size:clamp(15px,1.8vw,18px);text-transform:uppercase;letter-spacing:.05em}
p{margin:0 0 1em}
small{color:var(--muted)}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem clamp(.9rem,3vw,2rem);border-bottom:1px solid var(--line-soft);
  background:rgba(18,18,18,.94);position:sticky;top:0;backdrop-filter:blur(10px);z-index:10;
}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text)}
.brand:hover{border-bottom-color:transparent;color:#fff}
.brand .crest{width:26px;height:34px;flex:none;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand strong{font-family:var(--font-title);font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;display:block;line-height:1.15}
.brand small{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.topbar nav{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);flex-wrap:wrap}
.topbar nav a{
  color:var(--text);font-family:var(--font-title);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid transparent;padding:.35rem 0;
}
.topbar nav a.on,.topbar nav a:hover{color:#fff;border-bottom-color:var(--ember)}
.topbar nav a.admin-link{color:var(--ember);border:1px solid var(--line);padding:.35rem .7rem}
.topbar nav a.admin-link:hover{border-color:var(--ember)}
.topbar nav a.lang{color:var(--muted);border:1px solid var(--line);padding:.3rem .55rem;font-size:.66rem}

/* ---------- shell ---------- */
main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) clamp(.9rem,3vw,2rem) 3rem}
footer{
  border-top:1px solid var(--line-soft);padding:1.5rem clamp(.9rem,3vw,2rem) 2.2rem;
  color:var(--faint);font-size:.75rem;display:flex;gap:1rem;flex-wrap:wrap;
  justify-content:space-between;max-width:var(--maxw);margin:0 auto;width:100%;
}
footer .credit{flex-basis:100%;border-top:1px solid var(--line-soft);padding-top:14px;color:var(--dim)}
footer .credit b{font-family:var(--font-title);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.72rem;color:var(--gold-soft)}
footer .credit a{color:var(--dim);border-bottom:1px solid var(--line)}
footer .credit a:hover{color:var(--ember);border-bottom-color:var(--ember)}

/* ---------- hero ---------- */
.hero{text-align:center;padding:clamp(1.6rem,5vw,3.4rem) 1rem clamp(1.2rem,3vw,2rem);
  border-bottom:1px solid var(--line-soft);margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hero h1{font-size:clamp(30px,6vw,56px);margin-bottom:.35rem}
.hero--banner{padding:0;border-bottom:none;text-align:center}
.hero-banner{width:100%;max-width:880px;height:auto;margin:0 auto;display:block;border:1px solid var(--line)}
.hero-strip{padding:1.1rem 1rem 1.3rem;margin-bottom:clamp(1.3rem,3vw,2rem);
  border-bottom:1px solid var(--line-soft)}
.hero p{color:var(--muted);margin:.2rem 0 1.1rem;font-size:.95rem}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:clamp(1rem,2.4vw,1.4rem);margin-bottom:1.4rem}
.panel.tight{padding:.9rem 1rem}
.panel h2:first-child{margin-top:0}
.grid{display:grid;gap:1.4rem;align-items:start}
@media(min-width:820px){.grid.two{grid-template-columns:1.25fr .75fr}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.55rem .6rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--font-title);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num strong{font-family:var(--font-title);font-weight:800;font-size:1rem;color:#fff}
.rank{width:2.4rem;font-family:var(--font-title);font-weight:700;color:var(--muted)}
.rank.gold{color:var(--ember)}
tr.me{background:rgba(255,123,0,.07)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.panel .table-wrap{border:none;border-top:1px solid var(--line)}

/* ---------- pills ---------- */
.pill{display:inline-block;font-family:var(--font-title);font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);
  padding:.2rem .5rem;color:var(--muted);white-space:nowrap}
.pill.win{color:var(--win);border-color:rgba(111,191,143,.45)}
.pill.loss{color:var(--loss);border-color:rgba(224,106,106,.45)}
.pill.draw{color:var(--draw)}
.pill.bye{color:var(--muted)}
.pill.draft{color:var(--gold);border-color:rgba(232,182,107,.45)}
.pill.ok{color:var(--frost);border-color:rgba(32,107,235,.5)}

/* ---------- tabs (filter row, not buttons) ---------- */
.tabs{display:flex;gap:1.1rem;margin:0 0 1.2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:0}
.tabs a{padding:.55rem 0;color:var(--muted);font-family:var(--font-title);font-size:.7rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.tabs a.on{color:#fff;border-bottom-color:var(--ember)}

/* ---------- notes ---------- */
.note{color:var(--muted);font-size:.82rem;margin:.2rem 0 1rem}
.note a{color:var(--ember);border-bottom-color:rgba(255,123,0,.3)}
.empty{color:var(--faint);font-style:italic;padding:1rem 0}
.handle{display:block;font-size:.72rem;color:var(--faint);letter-spacing:.02em;margin-top:1px}
.handle-line{color:var(--ember);font-family:var(--font-title);letter-spacing:.08em;margin-top:-.6rem}

/* ---------- forms ---------- */
form .row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.9rem}
label{display:block;font-family:var(--font-title);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email],select,textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  border-radius:0;padding:.55rem .65rem;font:inherit;font-size:.92rem;
}
input:focus,select:focus,textarea:focus{outline:1px solid var(--ember);outline-offset:0;border-color:var(--ember)}
textarea{min-height:14rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.55}
.field{min-width:11rem;flex:1}
.field.small{min-width:6rem;flex:0 1 7rem}

button,.btn{
  cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:0;padding:.62rem 1.1rem;font-family:var(--font-title);font-weight:700;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  transition:border-color .18s,background .18s,color .18s;
}
button:hover,.btn:hover{border-color:var(--ember);color:var(--ember);text-decoration:none}
button[type=submit]:not(.ghost):not(.danger),.btn.primary{border-color:var(--ember);color:var(--ember)}
button[type=submit]:not(.ghost):not(.danger):hover,.btn.primary:hover{background:var(--ember);color:#121212}
button.ghost{color:var(--muted)}
button.danger{border-color:rgba(224,106,106,.5);color:var(--loss)}
button.danger:hover{background:rgba(224,106,106,.12);border-color:var(--loss)}
.inline{display:inline}

/* ---------- rules prose ---------- */
.rules{max-width:74ch}
.rules h2{margin-top:2.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.rules h2:first-child{margin-top:0}
.rules h3{color:#fff;margin-top:1.5rem;font-size:.95rem}
.rules ul,.rules ol{padding-left:1.2rem}
.rules li{margin:.3rem 0}
.rules strong{color:#fff}
.rules code{background:var(--ink-2);border:1px solid var(--line-soft);padding:.1rem .35rem;
  font-size:.86em;font-family:ui-monospace,Menlo,monospace}
.rules blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--ember);color:var(--muted)}

/* ---------- kpi ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--line-soft)}
.kpi div{background:var(--ink-2);padding:.8rem .9rem}
.kpi strong{display:block;font-family:var(--font-title);font-weight:800;font-size:1.45rem;color:#fff;line-height:1.2}
.kpi span{font-family:var(--font-title);font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

/* ---------- avatar blocks ---------- */
.avatar-block{margin-bottom:1.6rem}
.avatar-block h3{margin-bottom:.1rem;color:#fff}
.avatar-block .realm{font-family:var(--font-title);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ember)}

/* ---------- flash / messages ---------- */
.flash{border-left:2px solid var(--ember);background:var(--panel);padding:.8rem 1rem;margin:0 0 1.2rem;font-size:.88rem}

/* Below 640 px a wide table is better scrolled than crushed: keep the columns
   legible and let .table-wrap do the horizontal scrolling. */
@media(max-width:640px){
  /* the wide tables drop their detail columns (.hide-sm) rather than scroll:
     position, player and points must fit on a phone without a sideways drag */
  table{min-width:0}
  .hide-sm{display:none}
}
@media(max-width:560px){
  .field.small{flex:1 1 100%}
  h1{font-size:1.55rem}
  main{padding:1.2rem .9rem 2.2rem}
  th,td{padding:.45rem .4rem}
  th{white-space:normal;letter-spacing:.08em}
  .topbar{gap:.5rem}
  .topbar nav{gap:.7rem}
  .brand strong{font-size:.7rem}
}