/* Shared "Chronicle" theme for all trivia clients. */
:root{
  --ink:#131a24; --ink-2:#1b2530; --parchment:#efe6d2; --brass:#c69749; --brass-deep:#a87d34;
  --correct:#5b8a51; --wrong:#b04a30; --muted:#8794a3; --ink-text:#272015;
  --hair:rgba(239,230,210,0.14); --hair-dark:rgba(39,32,21,0.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:radial-gradient(120% 80% at 50% -10%, #1c2734 0%, var(--ink) 55%, #0f151d 100%);
  color:var(--parchment); font-family:"Newsreader",Georgia,serif; min-height:100dvh; line-height:1.55;}
.wrap{max-width:780px;margin:0 auto;padding:24px 18px 64px}
.wrap.wide{max-width:1100px}
h1,h2,h3{font-family:"Fraunces",serif;font-weight:600;margin:0;line-height:1.1}
.eyebrow{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.masthead{text-align:center;padding:14px 0 12px;border-bottom:1px solid var(--hair);margin-bottom:22px}
.masthead h1{font-size:clamp(1.9rem,7vw,3rem)} .masthead h1 em{font-style:italic;color:var(--brass)}
.masthead .sub{color:var(--muted);font-style:italic;margin-top:6px;font-size:.95rem}
.section-label{display:flex;align-items:center;gap:14px;margin:26px 0 12px}
.section-label .line{height:1px;background:var(--hair);flex:1}
.muted{color:var(--muted)} .small{font-size:.85rem}
.mono{font-family:"Space Mono",monospace}
.btn{font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;padding:12px 18px;
  border-radius:3px;cursor:pointer;border:1px solid var(--hair);background:transparent;color:var(--parchment);transition:.18s}
.btn:hover{border-color:var(--brass)}
.btn-primary{background:var(--brass);color:var(--ink);border-color:var(--brass);font-weight:700}
.btn-primary:hover{background:#d6a94f}
.btn-danger:hover{border-color:var(--wrong);color:var(--wrong)}
.btn:disabled{opacity:.32;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{background:var(--ink-2);border:1px solid var(--hair);color:var(--parchment);border-radius:3px;
  padding:12px 13px;font-family:"Newsreader",serif;font-size:1rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass)}
input.code{font-family:"Space Mono",monospace;font-size:1.5rem;letter-spacing:.4em;text-transform:uppercase;text-align:center}
.panel{background:linear-gradient(180deg,var(--ink-2),#161f29);border:1px solid var(--hair);border-radius:4px;padding:20px;margin-bottom:16px}
.panel h3{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.chip{font-family:"Space Mono",monospace;font-size:.78rem;background:transparent;color:var(--parchment);
  border:1px solid var(--hair);padding:9px 13px;border-radius:2px;cursor:pointer;transition:.15s}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass);font-weight:700}
.bigcode{font-family:"Space Mono",monospace;font-size:2.4rem;letter-spacing:.35em;color:var(--brass);text-align:center;padding:10px 0 4px}
table{width:100%;border-collapse:collapse}
th{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair)}
td{padding:10px;border-bottom:1px solid var(--hair);font-size:.96rem;vertical-align:middle}
tr:hover td{background:rgba(198,151,73,.05)}
.status-pill{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:99px;padding:4px 10px}
.status-pill.live{color:var(--correct);border-color:var(--correct)}
.status-pill.off{color:var(--muted)}
.status-pill.brass{color:var(--brass);border-color:var(--brass)}
/* question card (player) */
.card{background:var(--parchment);color:var(--ink-text);border-radius:4px;padding:26px 22px;margin-top:14px;box-shadow:0 18px 50px -28px rgba(0,0,0,.7)}
.card .cat{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:12px}
.card .q{font-family:"Fraunces",serif;font-size:clamp(1.3rem,4.5vw,1.8rem);font-weight:600;line-height:1.2}
.options{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#f7f1e2;border:1px solid var(--hair-dark);
  border-radius:3px;padding:14px 15px;font-family:"Newsreader",serif;font-size:1.05rem;color:var(--ink-text);cursor:pointer;transition:.15s}
.opt:hover:not(:disabled){border-color:var(--brass-deep);background:#fff}
.opt .key{font-family:"Space Mono",monospace;font-size:.8rem;font-weight:700;width:26px;height:26px;flex:0 0 26px;display:grid;
  place-items:center;border:1px solid var(--hair-dark);border-radius:50%;color:var(--brass-deep)}
.opt.correct{background:rgba(91,138,81,.16);border-color:var(--correct)}
.opt.wrong{background:rgba(176,74,48,.13);border-color:var(--wrong)}
.opt:disabled{cursor:default} .opt.dim{opacity:.55}
.feedback{min-height:24px;margin-top:14px;font-style:italic}
.feedback.right{color:var(--correct)} .feedback.miss{color:var(--wrong)}
.wikilink{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);
  text-decoration:none;border-bottom:1px dotted var(--brass-deep);display:inline-block;margin-top:8px}
.wikilink:hover{color:var(--brass);border-bottom-style:solid}
.miss-q .wikilink{font-size:.62rem;color:var(--brass);border-bottom-color:var(--brass)}
.timerbar{height:4px;background:var(--hair);border-radius:2px;margin-top:14px;overflow:hidden}
.timerbar>i{display:block;height:100%;width:100%;background:var(--brass)}
.timerbar.low>i{background:var(--wrong)}
/* scoreboard */
.led-row{display:grid;grid-template-columns:46px minmax(110px,1fr) 2fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}
.led-row .rank{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--brass);text-align:center}
.led-row .led-name{font-family:"Fraunces",serif;font-size:1.2rem}
.led-row .led-sub{color:var(--muted);font-size:.8rem;font-family:"Space Mono",monospace}
.led-bar{height:10px;background:rgba(239,230,210,.08);border-radius:5px;overflow:hidden}
.led-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-deep),var(--brass));border-radius:5px;transition:width .6s ease}
.led-num{font-family:"Space Mono",monospace;font-size:1rem;color:var(--parchment);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink-2);color:var(--parchment);
  border:1px solid var(--brass);border-radius:4px;padding:11px 18px;font-family:"Space Mono",monospace;font-size:.8rem;
  opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.screen{display:none} .screen.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--hair);margin-bottom:18px;flex-wrap:wrap}
.tab{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:transparent;
  color:var(--muted);border:0;border-bottom:2px solid transparent;padding:11px 8px;margin-bottom:-1px;cursor:pointer}
.tab[aria-pressed="true"]{color:var(--brass);border-bottom-color:var(--brass)}
.miss-q{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.miss-q .mq{font-size:1rem}
.miss-q .ma-good{color:var(--correct);font-style:italic}
.miss-q .ma-bad{color:var(--wrong);font-style:italic;text-decoration:line-through}