/* Soulsworn Tactics — the one stylesheet.
 *
 * Every page on tactics.vivefire.com links this: the landing page, /leaderboard, /terms/,
 * /privacy/, /delete-account/, and the account pages the service renders under /account/.
 *
 * It exists because those surfaces had five inline copies of "the same" CSS and they had
 * drifted — the account service was serving --gold:#c9a227 against the site's #d6b262, so
 * signing in visibly changed the brand. One file, one palette, no drift.
 *
 * The Logto sign-in page is the ONE exception: different machine
 * (accounts.tactics.vivefire.com), must render even if this box is unreachable, so it inlines
 * its own copy of the palette. Change a colour here, change it there too.
 */

:root{
  --bg:#0e0d12;
  --panel:#17151d;
  --text:#ebe6dc;
  --dim:#988f82;
  --gold:#d6b262;
  --border:rgba(118,100,76,.45);
  --rule:rgba(118,100,76,.28);
  --danger:#e65050;
  --measure:820px;
}

*{box-sizing:border-box}

body{margin:0;background:var(--bg);color:var(--text);
     font:17px/1.7 Georgia,'Times New Roman',serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--gold)}
p{margin:0 0 1.1em}

/* ── nav ────────────────────────────────────────────────────────────────────
 * One bar, identical on every page and every host. Brand left, sections centre,
 * account right.
 */
.nav{border-bottom:1px solid var(--rule);background:rgba(0,0,0,.22)}
.nav .inner{max-width:var(--measure);margin:0 auto;padding:0 24px;
            display:flex;align-items:center;gap:28px;min-height:60px}
.nav .brand{letter-spacing:3.5px;text-transform:uppercase;font-size:.78rem;
            color:var(--text);text-decoration:none;white-space:nowrap;font-weight:normal}
.nav .brand:hover{color:var(--gold)}
.nav .links{display:flex;gap:24px;flex:1}
.nav .links a{color:var(--dim);text-decoration:none;font-size:.92rem;
              padding:19px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav .links a:hover{color:var(--text)}
.nav .links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--gold)}

.acct{display:flex;align-items:center;gap:12px}
.acct .signin,.acct .acct-name{
  color:var(--gold);text-decoration:none;font-size:.88rem;
  border:1px solid var(--border);padding:7px 15px;border-radius:8px;white-space:nowrap}
.acct .acct-name{color:var(--text)}
.acct .signin:hover,.acct .acct-name:hover{background:rgba(214,178,98,.14);color:var(--gold)}
.acct form{margin:0;display:inline}
.acct-out{background:none;border:0;color:var(--dim);font:inherit;font-size:.85rem;
          cursor:pointer;padding:7px 0}
.acct-out:hover{color:var(--text);text-decoration:underline}

.wrap{max-width:var(--measure);margin:0 auto;padding:56px 24px 96px}

/* ── type ───────────────────────────────────────────────────────────────────
 * The rule under an h2 sits well clear of the text. It used to be .3em, which
 * read as an underline rather than a section break.
 */
h1,h2,h3{font-family:Georgia,serif;letter-spacing:.4px;color:var(--text);
         line-height:1.25}
h1{font-size:2.15rem;margin:0 0 .35em}
h1.brand{letter-spacing:6px;text-transform:uppercase;color:#f1ece3;font-size:2.6rem}
h2{font-size:1.28rem;margin:3.2em 0 1.1em;padding-bottom:.7em;
   border-bottom:1px solid var(--rule)}
h3{font-size:1rem;margin:2.2em 0 .4em;color:var(--gold);font-weight:normal;
   letter-spacing:.6px}
.sub{color:var(--gold);letter-spacing:4px;text-transform:uppercase;font-size:.88rem;
     margin:0 0 2em}
.lede{font-size:1.15rem;line-height:1.65;margin-bottom:1.6em}
.dim{color:var(--dim)}
small,.small{font-size:.85rem}
code{font-family:Consolas,monospace;font-size:.9em;color:#f1ece3}

/* ── components ─────────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;
       padding:26px 30px;margin:32px 0}
.panel h2{margin-top:0;border:0;padding:0}

.btn{display:inline-block;background:rgba(214,178,98,.16);border:1px solid var(--gold);
     color:var(--text);padding:12px 26px;border-radius:10px;text-decoration:none;
     margin:18px 10px 6px 0;font:inherit;cursor:pointer;letter-spacing:.3px}
.btn:hover{background:rgba(214,178,98,.3)}
.btn-quiet{background:transparent;border-color:var(--border);color:var(--dim)}
.btn-quiet:hover{background:rgba(214,178,98,.10);color:var(--text)}
.btn-danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn-danger:hover{background:rgba(230,80,80,.14)}

.tag{display:inline-block;border:1px solid var(--border);color:var(--dim);
     border-radius:5px;padding:2px 8px;font-size:.68rem;letter-spacing:1.4px;
     text-transform:uppercase;vertical-align:middle;margin-left:10px;
     font-family:Consolas,monospace;line-height:1.6}

dl{margin:0}
dt{color:var(--gold);margin-top:2em;font-size:1rem;letter-spacing:.6px}
dd{margin:.4em 0 0}

/* ── tabs — clearly clickable, clearly selected ──────────────────────────── */
.tabs{display:flex;gap:4px;margin:0 0 2em;border-bottom:1px solid var(--rule)}
.tabs a{color:var(--dim);text-decoration:none;font-size:.95rem;padding:11px 18px;
        border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;
        margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--text);background:rgba(214,178,98,.07)}
.tabs a[aria-current="page"]{color:var(--text);background:var(--panel);
        border-color:var(--rule);border-bottom:1px solid var(--bg)}

/* ── tables ─────────────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:.96rem;margin:0 0 1.5em}
th,td{text-align:left;vertical-align:middle;padding:11px 14px;
      border-bottom:1px solid var(--rule)}
th{color:var(--dim);font-weight:normal;font-size:.76rem;letter-spacing:1.4px;
   text-transform:uppercase}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:rgba(255,255,255,.02)}
tr.you td{background:rgba(214,178,98,.10)}
tr.you td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
tr.gap td{padding:4px 14px;color:var(--dim);text-align:center;border-bottom:0}

/* ── forms ──────────────────────────────────────────────────────────────── */
label{display:block;color:var(--dim);font-size:.9rem;margin:16px 0 7px}
input[type=text],input[type=email]{width:100%;font:inherit;color:var(--text);
     background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:10px;
     padding:12px 14px;outline:none}
input[type=text]:focus,input[type=email]:focus{border-color:var(--gold)}
.err{color:var(--danger)}

/* ── footer — identical on every page ───────────────────────────────────── */
footer{margin-top:88px;padding-top:24px;border-top:1px solid var(--rule);
       color:var(--dim);font-size:.88rem}
footer a{color:var(--dim);margin-right:20px;text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline}
footer .made{display:block;margin-top:14px;color:var(--dim);opacity:.75}

/* ── account pages (body.account) ───────────────────────────────────────── */
body.account .wrap{max-width:660px}
body.account form{display:inline}
body.account input[type=text]{margin-right:10px;width:auto}

@media (max-width:640px){
  .nav .inner{flex-wrap:wrap;gap:16px;padding:12px 20px;min-height:0}
  .nav .links{order:3;flex-basis:100%;gap:18px}
  .nav .links a{padding:8px 0}
  .nav .brand{flex:1}
  .wrap{padding:36px 20px 64px}
  h1{font-size:1.8rem}
}