:root { --bg:#050505; --fg:#e8e6df; --dim:#8a8880; --line:#3a3a36; --red:#c4372f; --green:#9fe3b4; --amber:#e0b04a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 12px/1.45 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; }
canvas#bracket { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
canvas#bracket:active { cursor: grabbing; }
canvas#bracket:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }

#hud { position: fixed; top: 10px; left: 12px; right: 330px; pointer-events: none; text-shadow: 0 0 6px #000, 0 0 2px #000; }
#hud h1 { margin: 0; font-size: 13px; letter-spacing: .22em; font-weight: 600; pointer-events: auto; }
#hud h1 span { cursor: pointer; }
.banner { display: inline-block; margin: 6px 0 0; padding: 1px 6px; border: 1px solid var(--amber); color: var(--amber); letter-spacing: .08em; font-size: 11px; }
.banner.real { border-color: var(--green); color: var(--green); }
.bigcount { margin-top: 8px; font-size: clamp(18px, 3.6vw, 40px); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.remain { color: var(--dim); font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.meta { display: flex; gap: 22px; margin: 8px 0 0; }
.meta div { display: block; } .meta dt { color: var(--dim); font-size: 10px; letter-spacing: .14em; } .meta dd { margin: 0; letter-spacing: .08em; }

#controls { position: fixed; top: 10px; right: 10px; width: 310px; padding: 8px; background: rgba(5,5,5,.82); border: 1px solid var(--line); display: grid; gap: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
button, .btn { font: inherit; letter-spacing: .08em; color: var(--fg); background: #0d0d0c; border: 1px solid var(--line); padding: 5px 8px; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--fg); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
button:disabled { opacity: .4; cursor: default; }
input[type=text], select { font: inherit; color: var(--fg); background: #0d0d0c; border: 1px solid var(--line); padding: 5px 6px; }
#search input { flex: 1; min-width: 0; }
.chk { display: flex; gap: 5px; align-items: center; color: var(--dim); letter-spacing: .05em; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav button { flex: 1; }

#readout { position: fixed; left: 12px; bottom: 34px; display: grid; grid-template-columns: repeat(3, auto); gap: 2px 18px; background: rgba(5,5,5,.78); padding: 6px 8px; border: 1px solid var(--line); }
#readout span { display: block; color: var(--dim); font-size: 10px; letter-spacing: .12em; }
#readout b { font-weight: 500; font-variant-numeric: tabular-nums; }

#champion { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); text-align: center;
  background: rgba(5,5,5,.9); border: 1px solid var(--fg); padding: 14px 14px 10px; display: grid; gap: 8px; justify-items: center; }
.ch-title { font-size: clamp(16px, 3vw, 26px); font-weight: 700; letter-spacing: .12em; }
.ch-did { word-break: break-all; color: var(--green); font-size: clamp(12px, 1.8vw, 16px); }
.ch-sub { color: var(--dim); font-style: italic; letter-spacing: .08em; }
.ch-facts { color: var(--dim); font-size: 11px; }
.ch-count { color: var(--amber); letter-spacing: .1em; min-height: 1.4em; }

.panel { position: fixed; top: 10px; bottom: 34px; width: min(420px, calc(100vw - 24px)); left: 12px; overflow: auto; padding: 12px 14px;
  background: rgba(5,5,5,.94); border: 1px solid var(--fg); display: block; }
.panel h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .2em; }
.panel .x { position: absolute; top: 6px; right: 6px; padding: 1px 8px; font-size: 16px; }
.panel label { display: block; margin: 8px 0 3px; color: var(--dim); letter-spacing: .08em; }
.panel label.chk { display: flex; }
.panel fieldset { border: 1px solid var(--line); margin: 6px 0; }
.panel legend { color: var(--dim); letter-spacing: .12em; }
.panel .row { margin: 8px 0; }
.note { color: var(--dim); white-space: pre-wrap; }
.prose p { margin: 0 0 9px; } code { color: var(--green); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; word-break: break-all; }
table.t { border-collapse: collapse; width: 100%; margin: 6px 0; } table.t td, table.t th { padding: 2px 6px 2px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #1a1a18; }
table.t th { color: var(--dim); font-weight: 400; letter-spacing: .08em; }
.lost { color: var(--red); } .won { color: var(--green); } .miss { color: var(--amber); }
.did { cursor: pointer; text-decoration: underline dotted var(--dim); background: none; border: 0; padding: 0; color: inherit; letter-spacing: 0; text-align: left; }

#foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 4px 12px; display: flex; gap: 18px; color: var(--dim); font-size: 11px; background: rgba(5,5,5,.7); }
#foot a { color: var(--dim); }

@media (max-width: 760px) {
  #hud { right: 12px; }
  #controls { position: fixed; top: auto; bottom: 28px; right: 6px; left: 6px; width: auto; max-height: 40vh; overflow: auto; }
  #readout { bottom: auto; top: 118px; left: 12px; grid-template-columns: repeat(2, auto); font-size: 11px; }
  #champion { bottom: calc(40vh + 34px); }
  .panel { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }