/* STS2 Doubles - Slay the Spire 2 themed dark-stone / parchment skin.
   Self-hosted only: no CDNs, no inline styles, no inline data URIs. All art under
   /static/img is converted from the extracted game assets (see docs/). */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Kreon";
  src: url("/static/fonts/kreon-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreon";
  src: url("/static/fonts/kreon-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- palette ---------- */
:root {
  --bg: #100f17;
  --bg-2: #171624;
  --stone: #22222f;
  --stone-2: #2b2b3b;
  --stone-3: #343548;
  --line: #3b3c52;
  --ink: #ede4d2;          /* 15.9:1 on --bg  */
  --muted: #b1a894;        /*  9.0:1 on --bg  */
  --gold: #efb95c;
  --gold-dim: #8f6d2a;
  --teal: #6fd0e0;
  --red: #e0685c;
  --red-deep: #8d2f28;
  --green: #74c98e;
  --violet: #a690d8;
  --paper: #d9bf93;
  --paper-2: #c9ae82;
  --paper-ink: #2b2016;    /* 9.6:1 on --paper */
  --paper-muted: #5a4429;  /* 4.9:1 on --paper */
  --head: "Kreon", Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(143, 109, 42, .22), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(60, 74, 110, .20), transparent 65%);
  background-attachment: fixed;
  font: 16px/1.55 var(--body);
}
.wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 16px; }

/* ---------- top bar ---------- */
.topbar {
  background: linear-gradient(180deg, #1c1b28 0%, #14131e 100%);
  border-bottom: 2px solid var(--gold-dim);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brandmark {
  width: 28px; height: 28px; flex: none;
  background: url("/static/img/icon-energy.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(239, 185, 92, .55));
}
.brandname {
  font-family: var(--head); font-weight: 700; font-size: 1.22rem;
  color: var(--gold); letter-spacing: .05em; text-shadow: 0 1px 0 #000;
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: auto; }
.nav a {
  font-family: var(--head); font-weight: 700; color: var(--ink); text-decoration: none;
  padding: 8px 2px; border-bottom: 2px solid transparent; min-height: 40px;
  display: inline-flex; align-items: center;
}
.nav a:hover, .nav a:focus { color: var(--gold); border-bottom-color: var(--gold); }
.who { color: var(--muted); font-size: .9rem; }
.foot {
  color: var(--muted); font-size: .85rem; padding-top: 28px; padding-bottom: 36px;
  font-family: var(--head);
}

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 1.85rem; margin: 26px 0 10px; color: var(--gold); text-shadow: 0 2px 0 #000; }
h2 {
  font-size: 1.3rem; margin: 30px 0 10px; padding-bottom: 8px; color: var(--ink);
  border-bottom: 1px solid var(--gold-dim);
}
h3 { font-size: 1.1rem; margin: 18px 0 8px; color: var(--gold); }
h4 { font-size: .98rem; margin: 16px 0 6px; color: var(--muted); }
a { color: var(--gold); }
a:hover { color: #ffd689; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.dim { opacity: .55; }
code.pw {
  background: #07060c; padding: 3px 7px; border-radius: 4px; color: var(--gold);
  word-break: break-all; font-size: .95em;
}
.meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px; }

/* ---------- panels: dark stone in a gold filigree frame ---------- */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%),
    var(--stone);
  border: 22px solid transparent;
  border-image: url("/static/img/frame-gold.webp") 62 / 22px / 0 round;
  margin: 18px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.card > * { position: relative; }
.card.narrow, .narrow { max-width: 470px; }
.card > h2:first-child, .card > h3:first-child, .card > h4:first-child { margin-top: 0; }
.card.danger {
  background: linear-gradient(180deg, #2b1b1c, #201416);
  border-image-source: url("/static/img/btn-red.webp");
  border-image-slice: 30;
  border-width: 12px;
  border-image-width: 12px;
}
.card.danger > summary { color: #ffb3aa; }

/* ---------- parchment surfaces (tables) ---------- */
.tablewrap {
  overflow-x: auto;
  background:
    linear-gradient(180deg, #e2cba2 0%, var(--paper) 45%, var(--paper-2) 100%);
  border: 20px solid transparent;
  border-image: url("/static/img/panel-parchment.webp") 54 / 20px / 0 stretch;
  margin: 12px 0 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
/* base table: dark-stone, for any table not wrapped in .tablewrap */
table { border-collapse: collapse; width: 100%; color: var(--ink); }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--head); font-weight: 700; font-size: .82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  border-bottom: 2px solid var(--gold-dim);
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--head); }
td.actions { white-space: nowrap; }
td.actions form.inline { margin-bottom: 0; }
td .btn, td button, .teamlist .btn { margin-top: 0; }

/* parchment table */
.tablewrap table { min-width: 560px; color: var(--paper-ink); }
.tablewrap th, .tablewrap td { border-bottom: 1px solid rgba(90, 68, 41, .30); }
.tablewrap th { color: var(--paper-muted); border-bottom: 2px solid rgba(90, 68, 41, .55); }
.tablewrap tbody tr:last-child td { border-bottom: none; }
.tablewrap tbody tr:hover td { background: rgba(90, 68, 41, .10); }
.tablewrap td.rank { color: #6b3f0d; font-family: var(--head); font-weight: 700; width: 2.6rem; }
.tablewrap tr.mine td { background: rgba(143, 109, 42, .22); box-shadow: inset 3px 0 0 #6b3f0d; }
.tablewrap tr.mine:hover td { background: rgba(143, 109, 42, .28); }
.tablewrap a { color: #7a3f10; font-weight: 700; }
.tablewrap a:hover { color: #52280a; }
.tablewrap .muted { color: var(--paper-muted); }
.tablewrap td.strong { color: #4a3212; }

/* ---------- forms ---------- */
label { display: block; margin: 12px 0 5px; font-size: .9rem; color: var(--muted); font-family: var(--head); }
label.radio { display: flex; align-items: center; gap: 8px; color: var(--ink); margin: 4px 0; min-height: 40px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; min-height: 42px; padding: 9px 11px;
  background: #14131d; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; font: inherit;
}
input[type=number] { max-width: 240px; }
input[type=radio] { width: 20px; height: 20px; accent-color: #b98c2f; }
input:focus, select:focus, button:focus, summary:focus, a:focus {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 14px 0; padding: 6px 12px 10px; }
legend { color: var(--gold); font-family: var(--head); font-size: .88rem; padding: 0 6px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.field { flex: 1 1 200px; min-width: 0; }
form.inline { display: inline-block; margin: 0 8px 8px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* ---------- buttons: nine-sliced game button faces ---------- */
.btn, main button:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; margin-top: 12px; padding: 4px 14px;
  font-family: var(--head); font-weight: 700; font-size: .98rem; letter-spacing: .03em;
  color: #d9f4fb; text-decoration: none; cursor: pointer;
  background: transparent;
  border: 13px solid transparent;
  border-image: url("/static/img/btn-teal.webp") 30 44 fill / 13px 18px / 0 stretch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  transition: filter .12s ease-out, transform .12s ease-out;
}
.btn:hover, main button:not(.btn):hover { filter: brightness(1.28) saturate(1.1); transform: translateY(-1px); }
.btn:active, main button:not(.btn):active { filter: brightness(.9); transform: translateY(1px); }
.btn-primary { color: #fff3d4; border-image-source: url("/static/img/btn-gold.webp"); }
.btn-danger, main button.danger { color: #ffd4cf; border-image-source: url("/static/img/btn-red.webp"); }
.btn-quiet {
  margin-top: 0; min-height: 40px; font-size: .88rem;
  border-width: 10px 14px; border-image-width: 10px 14px;
}
.btn[disabled], main button[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }
.btn[hidden], main button[hidden] { display: none; }   /* display:inline-flex would beat the UA [hidden] rule */
.btn[disabled]:hover { filter: grayscale(.6); transform: none; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--head); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid var(--line); background: rgba(10, 9, 16, .72); color: #cfc7b6;
}
.badge-setup { border-color: #6f7fb8; color: #b9c6ef; }
.badge-active, .badge-ok { border-color: #3f8a5c; color: #9fe2b6; }
.badge-done { border-color: var(--gold-dim); color: var(--gold); }
.badge-org { border-color: var(--gold-dim); color: var(--gold); }
.badge-warn { border-color: #b08326; color: #ffd489; }
.badge-draw { border-color: #7a6bb0; color: #cbbdf2; }
.badge-pending { border-color: #4d4e66; color: #c2bcae; }
.badge-bad { border-color: #a4443a; color: #ffb3aa; }
.badge-bye { border-color: #7a6bb0; color: #cbbdf2; }
.badge-win::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("/static/img/icon-trophy.webp") center/contain no-repeat;
}
.tablewrap .badge { background: rgba(43, 32, 22, .85); }

/* ---------- flashes ---------- */
.flash {
  padding: 12px 14px; color: #d9f4fb; font-family: var(--head);
  background: #16222a;
  border: 14px solid transparent;
  border-image: url("/static/img/tip-teal.webp") 26 / 14px / 0 round;
}
.flash-bad { background: #241416; border-image-source: url("/static/img/btn-red.webp"); border-image-slice: 30; color: #ffd8d3; }
.flash-good { background: #14231a; border-image-source: url("/static/img/btn-teal.webp"); border-image-slice: 30; color: #cdf3dd; }
.flash-warn { background: #241d10; border-image-source: url("/static/img/btn-gold.webp"); border-image-slice: 30; color: #fff0cf; }
.flash.ok { background: #14231a; border-image-source: url("/static/img/btn-teal.webp"); border-image-slice: 30; color: #cdf3dd; }
.flash.warn { background: #241d10; border-image-source: url("/static/img/btn-gold.webp"); border-image-slice: 30; color: #fff0cf; }
.flash[hidden] { display: none; }
.flash strong { color: var(--gold); }
.flash-good strong, .flash-bad strong { color: inherit; }

/* ---------- gold / energy iconography ---------- */
.ico {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  margin-right: 4px;
}
.ico-gold { background-image: url("/static/img/icon-gold.webp"); }
.ico-energy { background-image: url("/static/img/icon-energy.webp"); }
.ico-floor { background-image: url("/static/img/icon-floor.webp"); }
.ico-swords { background-image: url("/static/img/icon-swords.webp"); }
.pts { color: #5c3a0c; font-weight: 700; }

/* ---------- team relic badges ---------- */
.team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.teamname { font-weight: 700; }
.team-dropped .teamname { text-decoration: line-through; opacity: .7; }
.tbadge {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background-color: #262433;
  background-image: url("/static/img/sprite-relics.webp");
  background-repeat: no-repeat;
  background-size: 800% 400%;          /* 8 columns x 4 rows */
  background-position: 50% 50%;        /* fallback: centre of the sheet */
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .6);
}
.tablewrap .tbadge { background-color: #3a2c1c; border-color: #6b3f0d; }
.r0  { background-position:   0%   0%; } .r1  { background-position: 14.2857%   0%; }
.r2  { background-position: 28.5714%   0%; } .r3  { background-position: 42.8571%   0%; }
.r4  { background-position: 57.1429%   0%; } .r5  { background-position: 71.4286%   0%; }
.r6  { background-position: 85.7143%   0%; } .r7  { background-position: 100%      0%; }
.r8  { background-position:   0%  33.3333%; } .r9  { background-position: 14.2857%  33.3333%; }
.r10 { background-position: 28.5714%  33.3333%; } .r11 { background-position: 42.8571%  33.3333%; }
.r12 { background-position: 57.1429%  33.3333%; } .r13 { background-position: 71.4286%  33.3333%; }
.r14 { background-position: 85.7143%  33.3333%; } .r15 { background-position: 100%     33.3333%; }
.r16 { background-position:   0%  66.6667%; } .r17 { background-position: 14.2857%  66.6667%; }
.r18 { background-position: 28.5714%  66.6667%; } .r19 { background-position: 42.8571%  66.6667%; }
.r20 { background-position: 57.1429%  66.6667%; } .r21 { background-position: 71.4286%  66.6667%; }
.r22 { background-position: 85.7143%  66.6667%; } .r23 { background-position: 100%     66.6667%; }
.r24 { background-position:   0% 100%; } .r25 { background-position: 14.2857% 100%; }
.r26 { background-position: 28.5714% 100%; } .r27 { background-position: 42.8571% 100%; }
.r28 { background-position: 57.1429% 100%; } .r29 { background-position: 71.4286% 100%; }
.r30 { background-position: 85.7143% 100%; } .r31 { background-position: 100%    100%; }

/* ---------- map-node round progression strip ---------- */
.mapstrip {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0;
  list-style: none; margin: 14px 0 20px; padding: 14px 18px;
  background: linear-gradient(180deg, #1b1a27, #131220);
  border: 1px solid var(--gold-dim); border-radius: 3px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .7);
  overflow-x: auto;
}
.mapnode {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 0 16px; min-width: 62px;
}
.mapnode + .mapnode::before {
  content: ""; position: absolute; left: -14px; top: 21px; width: 28px; height: 0;
  border-top: 2px dashed var(--gold-dim);
}
.nodedot {
  width: 44px; height: 44px;
  background-image: url("/static/img/sprite-nodes.webp");
  background-repeat: no-repeat;
  background-size: 800% 100%;          /* 8 cells in one row */
  border-radius: 50%;
  background-color: #232231;
  box-shadow: 0 0 0 2px #3b3c52, inset 0 0 8px rgba(0, 0, 0, .8);
}
.node-monster  .nodedot { background-position:   0% 50%; }
.node-elite    .nodedot { background-position: 14.2857% 50%; }
.node-boss     .nodedot { background-position: 28.5714% 50%; }
.node-rest     .nodedot { background-position: 42.8571% 50%; }
.node-shop     .nodedot { background-position: 57.1429% 50%; }
.node-treasure .nodedot { background-position: 71.4286% 50%; }
.node-event    .nodedot { background-position: 85.7143% 50%; }
.nodelabel {
  font-family: var(--head); font-weight: 700; font-size: .78rem;
  letter-spacing: .07em; color: var(--muted);
}
.is-done .nodedot { box-shadow: 0 0 0 2px var(--gold-dim), inset 0 0 8px rgba(0, 0, 0, .8); }
.is-done .nodelabel { color: var(--gold); }
.is-current .nodedot {
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(239, 185, 92, .65), inset 0 0 8px rgba(0, 0, 0, .7);
  transform: scale(1.1);
}
.is-current .nodelabel { color: var(--gold); text-shadow: 0 0 8px rgba(239, 185, 92, .6); }
.is-todo .nodedot { filter: grayscale(.7) brightness(.72); opacity: .8; }

/* ---------- rounds and matches ---------- */
.round { margin-bottom: 22px; }
.round > h3 {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); text-transform: uppercase; letter-spacing: .09em; font-size: .98rem;
}
.round > h3::before {
  content: ""; width: 22px; height: 22px;
  background: url("/static/img/icon-swords.webp") center/contain no-repeat;
}
.matches { list-style: none; margin: 0; padding: 0; }
.match {
  background: linear-gradient(180deg, #232231, #1b1a27);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim);
  border-radius: 3px; padding: 12px 14px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.match.mine { border-color: var(--gold-dim); border-left-color: var(--gold); background: linear-gradient(180deg, #2a2637, #201d2d); }
.matchline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.teams { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 1.02rem; }
.vs {
  display: inline-block; width: 20px; height: 20px;
  background: url("/static/img/icon-swords.webp") center/contain no-repeat;
  text-indent: -999em; overflow: hidden;
}
.result { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.score {
  color: var(--gold); font-family: var(--head); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.note { color: var(--muted); font-size: .9rem; margin: 8px 0 0; font-style: italic; }

details.reportbox { margin-top: 10px; }
details summary {
  cursor: pointer; color: var(--gold); font-family: var(--head); font-weight: 700;
  font-size: .92rem; padding: 10px 0; min-height: 40px; display: flex; align-items: center;
}
details summary:hover { color: #ffd689; }
.reportform { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }

.teamlist { list-style: none; margin: 0; padding: 0; }
.teamlist li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.teamlist li:last-child { border-bottom: none; }

.err-code { font-size: 3.4rem; color: var(--red); margin-bottom: 0; text-shadow: 0 2px 0 #000; }
.err-detail { color: var(--muted); }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .wrap { padding: 0 12px; }
  .bar { gap: 8px; }
  .nav { gap: 12px; width: 100%; margin-left: 0; }
  .row { flex-direction: column; gap: 0; }
  .matchline { flex-direction: column; align-items: flex-start; gap: 8px; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.12rem; }
  .card { border-width: 16px; border-image-width: 16px; }
  .tablewrap { border-width: 14px; border-image-width: 14px; }
  .mapstrip { padding: 12px 8px; flex-wrap: nowrap; }
  .mapnode { padding: 0 10px; min-width: 56px; }
  .mapnode + .mapnode::before { left: -10px; width: 20px; }
  .teams { font-size: .98rem; }
  form.inline { display: block; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}