:root {
  --bg: #f6f7fb; --panel: #fff; --ink: #1d2230; --muted: #6b7280; --line: #e3e6ee;
  --blue: #2f6fed; --red: #e5484d; --green: #2bb673; --amber: #f5b400;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.5; background: var(--bg); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 18px; font-weight: 600; }
h1 { font-size: 26px; } h2 { font-size: 18px; margin: 0 0 10px; } h2 small { color: var(--muted); font-weight: 400; font-size: 13px; }
h3 { font-size: 16px; margin: 14px 0 6px; }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.row.wrap { flex-wrap: wrap; } .row.center { justify-content: center; }

.top { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: #1d2230; color: #fff; flex-wrap: wrap; }
.top .muted { color: #b8bfcc; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: .5px; }
.brand span { color: var(--amber); }
.brand.huge { font-size: 64px; color: var(--ink); }
#tabs { display: flex; gap: 4px; margin-left: auto; }
#tabs button { background: transparent; color: #cfd5e1; border: 0; padding: 8px 14px; border-radius: 8px; font-size: 16px; cursor: pointer; }
#tabs button.active { background: #fff; color: var(--ink); font-weight: 700; }
.conn { color: #ffd479; font-size: 13px; }
.pill { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.pill.ok { background: #d8f5e6; color: #0d7a48; } .pill.warn { background: #fff1c2; color: #8a6a05; }
.roomcode { font-size: 22px; font-weight: 800; color: var(--amber); letter-spacing: 2px; }

main#app, .tab { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
main#app { padding: 0; } body.teacher main#app { padding: 16px; }
.tab { width: 100%; }
#tab-rounds { flex-direction: column; }
#tab-rounds .panel { width: 100%; }
.col.left { flex: 0 0 440px; min-width: 0; } .col.right { flex: 1; min-width: 0; }
@media (max-width: 1000px) { main#app, .tab { flex-direction: column; } .col.left { flex: auto; width: 100%; } .col.right { width: 100%; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: #b9c0cf; } .btn:disabled { opacity: .55; cursor: wait; }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.big { padding: 12px 26px; font-size: 18px; } .btn.small { padding: 5px 10px; font-size: 14px; } .btn.tiny { padding: 2px 8px; font-size: 12px; border-radius: 7px; }
.btn.mic.on { background: var(--red); color: #fff; border-color: var(--red); }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; }
select, input, textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; color: var(--ink); max-width: 100%; }
textarea { width: 100%; resize: vertical; font-size: 18px; }

.joinbox, .hero { max-width: 420px; margin: 60px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.hero { text-align: center; max-width: 560px; border: 0; background: transparent; }
.joinbox label { display: flex; flex-direction: column; gap: 4px; }

.car { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.car.rules { border-color: #b8ccf8; background: #f7faff; }
.carhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.carno { font-weight: 800; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 999px; } .tag.me { background: #dbe6fd; color: #1f4fbf; } .tag.bot { background: #eceef3; color: #555; }
.knobs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; } .knobs label { display: flex; gap: 4px; align-items: center; }
details summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-top: 6px; }

.rulecard { background: #fff; border: 1px dashed #c9d2e3; border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.rulecard .cardtitle { font-weight: 700; margin-bottom: 4px; }
.rulecard .chan { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rulecard ol { list-style: none; padding: 0; margin: 2px 0; }
.rulecard li { padding: 3px 0; display: flex; gap: 8px; align-items: baseline; }
.rulecard li.default { color: var(--muted); font-size: 14px; padding-left: 30px; }
.rulecard li.new { background: #fff6d6; border-radius: 6px; }
.num { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.rulecard .numbers, .editor .numbers { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.editor .numbers input { width: 64px; margin-left: 4px; }
.editor .erow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.editor select { font-size: 14px; padding: 3px 4px; }
.x { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 2px 4px; }

.said { color: var(--muted); margin-top: 8px; }
.bubble { border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.bubble.ok { background: #e6f7ee; } .bubble.ask { background: #fff4d1; font-size: 18px; } .bubble.no { background: #fde8e8; }

.summary { margin: 8px 0; }
.player .scorebar { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.team0 { color: var(--blue); } .team1 { color: var(--red); }
.player .clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.canvaswrap { width: 100%; } canvas.field { display: block; border-radius: 10px; border: 1px solid var(--line); }
.controls { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .timeline { flex: 1; }
.ruleinfo .ri { font-size: 14px; padding: 2px 0; } .ruleinfo .ammo { color: var(--muted); font-size: 12px; }
.events { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 120px; overflow: auto; }
.ev { border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.ev.team0 { border-left: 4px solid var(--blue); } .ev.team1 { border-left: 4px solid var(--red); }
.ev-capture { font-weight: 700; }

.verdict { font-size: 22px; font-weight: 800; margin: 4px 0 8px; }
.verdict.good { color: var(--green); } .verdict.bad { color: var(--red); } .verdict.same { color: #8a6a05; }
.tbar { display: grid; grid-template-columns: 110px 1fr 200px; gap: 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.track { height: 14px; background: #eceef3; border-radius: 7px; overflow: hidden; } .fill { height: 100%; background: var(--blue); }

.knob { display: grid; grid-template-columns: 1fr 140px 26px; align-items: center; gap: 8px; margin: 8px 0; }
canvas.curve { width: 100%; height: 240px; display: block; }
.hint { background: #fff7dd; border-radius: 10px; padding: 8px 12px; }

.round { border-top: 1px solid var(--line); padding-top: 6px; } .vs { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
table.roster { width: 100%; border-collapse: collapse; font-size: 14px; } .roster th, .roster td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.matrix { border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.matrix td { cursor: pointer; } .matrix td.win { background: #e3f6ec; } .matrix td.loss { background: #fdeaea; } .matrix td.draw { background: #f4f4f4; } .matrix td.self { background: #ddd; cursor: default; }

body.screen main { padding: 20px 40px; } body.screen .joinhint { font-size: 22px; margin-bottom: 10px; } body.screen .summary { font-size: 22px; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; max-width: 360px; box-shadow: 0 6px 20px #0003; }
.toast.error { background: var(--red); }