/* WA Mini League — page-specific rules layered on top of theme.css, same
   split the rest of dreamwa.re uses (shared chrome in theme.css, page
   styling alongside its own markup). Reuses the site's existing component
   conventions rather than inventing new ones: tool-header/tag-strip from
   the WA Tools page, tab-bar buttons for top-level nav, dropzone/card/button
   styling from the Create tab.

   Player/team names are rendered in JetBrains Mono, not the DOS bitmap
   font — replay names are raw single-byte Latin-1, and Perfect DOS VGA 437
   is known to mis-render a handful of those codepoints (þ, è, ç, ì, å, ó,
   nbsp). Same fix the replay reader tool uses: keep name-bearing text off
   the DOS font entirely rather than trying to route around specific glyphs.
   See .name-raw below. */

:root { --panel-2: #0A0A0A; --err: #FF5555; }

body { font-size: 16px; min-height: 100vh; padding-bottom: 60px; }

.wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.name-raw { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace; }

/* ---- tool header (mirrors WA Tools' header.tool-header) ---- */
header.tool-header { padding: 24px 0 0; }
header.tool-header h1 {
  font-size: 20px; margin: 0 0 4px; color: var(--fg-bright);
  text-transform: uppercase; letter-spacing: 1px;
}
header.tool-header p {
  color: var(--fg-dim); margin: 0 0 16px; font-size: 14px;
  max-width: 640px; line-height: 1.5;
}
.tag-strip { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tag {
  font-size: 13px; letter-spacing: 0.5px; padding: 4px 10px;
  border: 1px solid var(--border-mid); color: var(--fg-dim); background: var(--bg-raised);
}

/* ---- top-level page nav, styled like the Extract/Create tab bar ---- */
.tab-bar { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.tab-bar a {
  font-family: var(--font-mono); text-decoration: none;
  background: transparent; border: 1px solid var(--border-mid); color: var(--fg-dim);
  font-size: 13px; letter-spacing: 1.5px; padding: 10px 18px; text-transform: uppercase;
}
.tab-bar a:hover { border-color: var(--accent-2); color: var(--accent-2); }
.tab-bar a.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

section { margin-top: 30px; }
.shead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.shead h2 {
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-2); font-weight: 400; margin: 0;
}
.shead .rule { flex: 1; height: 1px; background: var(--border-dim); }

/* ---- dropzone (matches the Extract/Create tab dropzone styling) ---- */
.drop {
  border: 1px dashed var(--border-mid); background: var(--panel-2);
  padding: 40px 20px; text-align: center; cursor: pointer; margin-bottom: 16px;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.hot { border-color: var(--accent); background: var(--bg-raised); }
.drop .big { font-size: 16px; color: var(--fg-dim); letter-spacing: 0.5px; }
.drop .big b { color: var(--fg-bright); }
.drop .sub { color: var(--fg-dim); font-size: 13px; margin-top: 8px; }
#file { display: none; }

.err { margin-top: 12px; border-left: 2px solid var(--err); background: var(--bg-raised); padding: 10px 14px; font-size: 13.5px; color: var(--fg-bright); }
.ok { margin-top: 12px; border-left: 2px solid var(--accent-2); background: var(--bg-raised); padding: 10px 14px; font-size: 13.5px; color: var(--fg-bright); }

.card { background: var(--bg-raised); border: 1px solid var(--border-dim); padding: 16px 18px; margin-bottom: 12px; }
.card .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.swatch { width: 10px; height: 10px; flex: none; }
.card .rawname { font-size: 14px; color: var(--fg-bright); min-width: 160px; }
select, input[type=text], input[type=password] {
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--border-mid);
  font-family: 'JetBrains Mono', Consolas, monospace;
  padding: 7px 10px; font-size: 13px;
}
.card select, .card input[type=text] { min-width: 220px; }
.hint { font-size: 11.5px; color: var(--fg-dim); margin-top: 6px; }

/* ---- buttons: same conventions as the Create tab's export/reset buttons ---- */
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.opt {
  font-family: var(--font-mono); letter-spacing: 1.5px;
  background: var(--bg-raised); border: 1px solid var(--border-mid); color: var(--fg);
  font-size: 14px; padding: 10px 18px; cursor: pointer; text-transform: uppercase;
}
.opt:hover { border-color: var(--accent); color: var(--fg-bright); }
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.opt.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.opt.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.opt.danger { background: transparent; border-color: var(--border-mid); color: var(--fg-dim); }
.opt.danger:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }
.opt:disabled { opacity: .4; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border-dim); }
th { font-family: var(--font-mono); color: var(--fg-dim); font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: .8px; }
tr:hover td { background: var(--panel-2); }
.rank { color: var(--fg-dim); width: 30px; }
.muted { color: var(--fg-dim); }

.gamecard { background: var(--bg-raised); border: 1px solid var(--border-dim); padding: 14px 16px; margin-bottom: 10px; }
.gamecard .top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.gamecard .players { font-size: 14px; color: var(--fg-bright); }
.gamecard .meta { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.winner-tag { color: var(--accent-2); }
.draw-tag { color: var(--fg-dim); }

.admin-login { max-width: 360px; margin: 60px auto; text-align: center; }
.admin-login input {
  width: 100%; padding: 10px; margin: 10px 0; background: var(--panel-2);
  border: 1px solid var(--border-mid); color: var(--fg); font-family: 'JetBrains Mono', Consolas, monospace;
}