/* Layout: a trading-desk "exam ticket" — question card on the left, live ranking board on the right; stacks on phones. */
:root{
  --bg:#0E131B; --panel:#151C27; --panel2:#1A2230; --line:#263142;
  --fg:#EEF1F5; --body:#B4C0D0; --mute:#8592A6;
  --gold:#E2B45A; --gold-ink:#16110A; --gold-soft:#2A2210;
  --buy:#3FB68B; --buy-soft:#12291F; --sell:#E5645A; --sell-soft:#2E1716; --cyan:#6FD3E6;
  --f-display:'Noto Serif Thai', Georgia, serif;
  --f-body:'IBM Plex Sans Thai', Tahoma, sans-serif;
  --f-mono:'IBM Plex Mono', 'Courier New', monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:28px 48px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.2;margin:4px 0 0;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--f-mono);font-size:12.5px;color:var(--body);border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
/* progress */
.progress{display:flex;gap:6px;margin-bottom:18px}
.progress button{flex:1;height:8px;border-radius:4px;border:0;background:var(--line);cursor:pointer;padding:0}
.progress button.done{background:#5C4A22}
.progress button.cur{background:var(--gold)}
.progress button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.qnum{font-family:var(--f-mono);font-size:13px;color:var(--mute);letter-spacing:.08em}
.timer{font-family:var(--f-mono);font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.qtopic{font-family:var(--f-mono);font-size:12px;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}
.qtext{font-family:var(--f-display);font-size:clamp(20px,2.4vw,25px);font-weight:500;line-height:1.45;margin:8px 0 16px;text-wrap:balance}
.qimg{width:100%;border-radius:12px;border:1px solid var(--line);margin-bottom:16px;display:block;background:#121923}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;font-size:16.5px;line-height:1.5;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#3A4860}
.opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.opt .key{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;font-weight:600;background:var(--bg);color:var(--mute);border:1px solid var(--line)}
.opt[aria-checked="true"]{border-color:var(--gold);background:var(--gold-soft)}
.opt[aria-checked="true"] .key{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{font:inherit;font-weight:600;font-size:15px;border-radius:10px;padding:10px 18px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--fg)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.hint{font-size:13.5px;color:var(--mute)}
/* result */
.score{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:8px}
.big{font-family:var(--f-mono);font-weight:600;font-size:64px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.big small{font-size:28px;color:var(--mute)}
.verdict{font-family:var(--f-display);font-size:22px;font-weight:700}
.sub{color:var(--body);font-size:15px}
.bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden;margin:14px 0 6px}
.bar span{display:block;height:100%;background:var(--gold)}
.save{font-size:13.5px;color:var(--mute);margin:8px 0 18px}
.save.ok{color:var(--buy)}
.review{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ritem{border:1px solid var(--line);border-left:4px solid var(--buy);border-radius:12px;padding:12px 16px;background:var(--panel2)}
.ritem.wrong{border-left-color:var(--sell)}
.ritem .rtop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tag{font-family:var(--f-mono);font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px}
.tag.ok{background:var(--buy-soft);color:var(--buy)}
.tag.no{background:var(--sell-soft);color:var(--sell)}
.ritem p{margin:6px 0 0;font-size:15px;color:var(--body)}
.ritem b{color:var(--fg);font-weight:600}
/* board */
.board h2{font-family:var(--f-display);font-size:22px;margin:2px 0 4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 16px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat b{display:block;font-family:var(--f-mono);font-size:20px;color:var(--fg);font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--mute)}
ol.top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ol.top li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
ol.top li.me{border-color:var(--gold)}
.rank{font-family:var(--f-mono);font-weight:600;font-size:15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--mute);border:1px solid var(--line)}
li:nth-child(1) .rank{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
li:nth-child(2) .rank{background:#C9D1DC;color:#1A2230;border-color:#C9D1DC}
li:nth-child(3) .rank{background:#C88A5A;color:#1E1208;border-color:#C88A5A}
.who{display:flex;gap:10px;align-items:center;min-width:0}
.who img{width:28px;height:28px;border-radius:50%;flex:none}
.who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.who .tm{font-size:12px;color:var(--mute);font-family:var(--f-mono)}
.pts{font-family:var(--f-mono);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;color:var(--gold)}
.empty{border:1px dashed var(--line);border-radius:12px;padding:18px;color:var(--mute);font-size:14.5px;text-align:center}
.mine{margin-top:12px;font-size:14px;color:var(--body)}
.admin{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.admin h3{font-size:15px;margin:0 0 8px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mute);font-weight:600}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:14px}
.btn.danger{border-color:var(--sell);color:var(--sell)}
.btn.danger.solid{background:var(--sell);color:#1B0B0A}
.foot{color:var(--mute);font-size:12.5px;font-family:var(--f-mono)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.nick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:18px}
.nick label{font-size:14px;color:var(--body)}
.nick input{font:inherit;font-size:15px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0;flex:1 1 180px;max-width:280px}
.nick input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.nick input[aria-invalid="true"]{border-color:var(--sell)}
.nick .note{font-size:12.5px;color:var(--mute);flex-basis:100%}
.err{color:var(--sell);font-size:14px;margin-top:10px}