:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;color:#18212f;background:#f5f7fa}*{box-sizing:border-box}body{margin:0}.site-header{min-height:70px;background:#fff;border-bottom:1px solid #d6dde7;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,4vw,56px)}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:6px;background:#17365d;color:#fff;display:grid;place-items:center;font-weight:800}.brand strong,.brand small{display:block}.brand small{color:#667085;font-size:.78rem;margin-top:2px}.connection{color:#667085;font-size:.85rem}.connection.online{color:#237a57}.connection.offline{color:#9b1c1c}.shell{max-width:1100px;margin:0 auto;padding:36px 20px}.card{background:#fff;border:1px solid #d6dde7;border-radius:16px;padding:clamp(24px,5vw,42px);box-shadow:0 10px 30px rgba(23,54,93,.06)}.narrow{max-width:560px;margin:40px auto}.eyebrow{color:#2e74b5;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero h1,.card h1{font-size:clamp(2.2rem,6vw,4.2rem);margin:8px 0 12px;color:#17365d}.card h2{color:#17365d}.card h3{font-size:.9rem;color:#667085;margin-bottom:8px}label{display:grid;gap:7px;font-weight:700;color:#344054;margin:15px 0}input,select,textarea{width:100%;border:1px solid #d6dde7;border-radius:9px;padding:10px 12px;background:#fff;color:inherit;font:inherit}input,select{min-height:44px}.actions,.room-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}button{min-height:44px;border:0;border-radius:10px;padding:0 22px;background:#17365d;color:#fff;font:inherit;font-weight:750;cursor:pointer}button.secondary{background:#eaf2f8;color:#17365d}button:disabled{opacity:.45;cursor:not-allowed}.error{color:#9b1c1c;min-height:1.3em}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}.panel{border:1px solid #d6dde7;border-radius:12px;padding:22px}.room-top,.game-head,.score-line,.player-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.badge{display:inline-flex;align-items:center;border-radius:99px;background:#eaf2f8;color:#17365d;padding:8px 13px;font-size:.86rem;font-weight:800}.players,.admin-list{display:grid;gap:10px;margin:24px 0}.player-row{border:1px solid #d6dde7;border-radius:10px;padding:14px}.player-row span{color:#667085;font-size:.9rem}.game-shell{display:grid;gap:18px}.score-line{padding:0 4px;color:#667085}.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.board-card{background:#fff;border:1px solid #d6dde7;border-radius:16px;padding:22px}.board{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:14px}.char-column{position:relative}.char-column>strong{display:block;text-align:center;color:#667085;font-size:.85rem;margin-bottom:7px}.char-grid{display:grid;grid-template-rows:repeat(3,42px);border:1px solid #9cb0c3;background:#f8fbfd}.char-grid span{display:grid;place-items:center;border-bottom:1px solid #9cb0c3;font-size:1.45rem;font-weight:800;color:#17365d}.char-grid span:last-child{border-bottom:0}.tone{position:absolute;right:-22px;top:50%;transform:translateY(-50%);font-size:1.1rem;font-weight:800;color:#2e74b5}.pool{padding:24px}.card-groups{display:grid;gap:18px}.symbol-grid{display:flex;flex-wrap:wrap;gap:7px}.symbol{min-width:44px;padding:0 10px;background:#fff;color:#17365d;border:1px solid #9cb0c3;border-radius:8px}.symbol.used{background:#eef1f4;color:#98a2b3;border-color:#d6dde7}.result-window{border:2px solid #2e74b5}.result-screen{text-align:center}.score-final{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:22px 0;color:#667085}.answer{font-size:1.4rem;font-weight:800;text-align:center;color:#17365d}.modal-backdrop{position:fixed;inset:0;background:rgba(15,31,49,.48);display:grid;place-items:center;padding:20px;z-index:3}.modal{width:min(440px,100%)}@media(max-width:700px){.home-grid,.boards{grid-template-columns:1fr}.board{grid-template-columns:repeat(2,minmax(105px,1fr))}.shell{padding:22px 14px}}@media(prefers-color-scheme:dark){:root{color:#f1f6fa;background:#142536}.site-header,.card,.board-card,.panel{background:#1d3347;border-color:#456579}.brand small,.connection,.player-row span{color:#b7c8d4}.card h1,.card h2,.hero h1{color:#78a9d6}.card p{color:#b7c8d4}input,select,textarea,.symbol{background:#142536;color:#f1f6fa;border-color:#456579}.char-grid{background:#264256;border-color:#456579}.char-grid span{border-color:#456579;color:#f1f6fa}.badge,button.secondary{background:#264256;color:#f1f6fa}.player-row{border-color:#456579}.result-window{border-color:#78a9d6}.answer{color:#78a9d6}}
:root[data-theme="light"]{color:#18212f;background:#f5f7fa}:root[data-theme="light"] .site-header,:root[data-theme="light"] .card,:root[data-theme="light"] .board-card,:root[data-theme="light"] .panel{background:#fff;border-color:#d6dde7}:root[data-theme="light"] .brand small,:root[data-theme="light"] .connection,:root[data-theme="light"] .player-row span{color:#667085}:root[data-theme="light"] .card h1,:root[data-theme="light"] .card h2,:root[data-theme="light"] .hero h1{color:#17365d}:root[data-theme="light"] .card p{color:#344054}:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea,:root[data-theme="light"] .symbol{background:#fff;color:#18212f;border-color:#d6dde7}:root[data-theme="light"] .char-grid{background:#f8fbfd;border-color:#9cb0c3}:root[data-theme="light"] .char-grid span{border-color:#9cb0c3;color:#17365d}:root[data-theme="light"] .badge,:root[data-theme="light"] button.secondary{background:#eaf2f8;color:#17365d}:root[data-theme="light"] .player-row{border-color:#d6dde7}:root[data-theme="light"] .result-window{border-color:#2e74b5}:root[data-theme="light"] .answer{color:#17365d}:root[data-theme="dark"]{color:#f1f6fa;background:#142536}:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .card,:root[data-theme="dark"] .board-card,:root[data-theme="dark"] .panel{background:#1d3347;border-color:#456579}:root[data-theme="dark"] .brand small,:root[data-theme="dark"] .connection,:root[data-theme="dark"] .player-row span{color:#b7c8d4}:root[data-theme="dark"] .card h1,:root[data-theme="dark"] .card h2,:root[data-theme="dark"] .hero h1{color:#78a9d6}:root[data-theme="dark"] .card p{color:#b7c8d4}:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .symbol{background:#142536;color:#f1f6fa;border-color:#456579}:root[data-theme="dark"] .char-grid{background:#264256;border-color:#456579}:root[data-theme="dark"] .char-grid span{border-color:#456579;color:#f1f6fa}:root[data-theme="dark"] .badge,:root[data-theme="dark"] button.secondary{background:#264256;color:#f1f6fa}:root[data-theme="dark"] .player-row{border-color:#456579}:root[data-theme="dark"] .result-window{border-color:#78a9d6}:root[data-theme="dark"] .answer{color:#78a9d6}.header-tools{display:flex;align-items:center;gap:12px}.theme-toggle{min-height:38px;padding:0 14px;font-size:.85rem;background:#eaf2f8;color:#17365d}.theme-toggle:hover{filter:brightness(.97)}
:root[data-theme="light"] .room-code,:root[data-theme="dark"] .room-code{display:block;border:0;background:transparent;color:#17365d;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:850;letter-spacing:.06em;padding:0;line-height:1;cursor:pointer}:root[data-theme="dark"] .room-code{color:#78a9d6}.room-top small{display:block;color:#667085;margin-top:8px}.room-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.char-board-row{display:flex;align-items:stretch;justify-content:center}.char-board-row .char-grid{flex:1}.tone-cell{width:42px;min-height:126px;display:grid;place-items:center;border:1px solid #9cb0c3;border-left:0;background:#f8fbfd;color:#2e74b5;font-size:1.25rem;font-weight:800}.countdown{font-weight:850;color:#b42318;margin-left:auto}.theme-toggle{position:relative;z-index:1}@media(max-width:700px){.room-layout{grid-template-columns:1fr}}:root[data-theme="dark"] .tone-cell{background:#264256;border-color:#456579;color:#78a9d6}
:root[data-theme="light"] .admin-stat,:root[data-theme="light"] .admin-tabs,:root[data-theme="light"] .admin-panel{background:#fff;border-color:#d6dde7}:root[data-theme="dark"] .admin-stat,:root[data-theme="dark"] .admin-tabs,:root[data-theme="dark"] .admin-panel{background:#1d3347;border-color:#456579}.admin-dashboard{display:grid;gap:18px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-stat{border:1px solid #d6dde7;border-radius:14px;padding:18px 20px}.admin-stat span{display:block;color:#667085;font-size:.88rem}.admin-stat strong{display:block;font-size:2rem;color:#17365d;margin-top:5px}.admin-tabs{display:flex;gap:8px;padding:6px;border-radius:14px;background:#e8eef5;border:1px solid #d6dde7}.admin-tab{background:transparent;color:#17365d;min-height:40px}.admin-tab.active{background:#fff;box-shadow:0 2px 8px rgba(23,54,93,.12)}.admin-panel{display:none;border:1px solid #d6dde7;border-radius:16px;padding:28px}.admin-panel.active{display:block}.admin-panel-heading{display:flex;justify-content:space-between}.empty-state{border:1px dashed #9cb0c3;border-radius:12px;padding:28px;color:#667085}@media(max-width:700px){.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-tabs{overflow-x:auto}.admin-tab{white-space:nowrap}}
:root[data-theme="light"] .board-character{color:#17365d}:root[data-theme="dark"] .board-character{color:#78a9d6}.board-character{display:block;text-align:center;font-size:1.5rem;font-weight:850;line-height:1.1;margin:-2px 0 7px}
.admin-batch-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}.admin-batch-toolbar label{display:flex;align-items:center;gap:7px;margin:0;font-weight:700}.admin-batch-toolbar input{width:18px;min-height:18px}.question-select-row{display:flex;align-items:center;gap:12px;margin:0;flex:1}.question-select-row input{width:18px;min-height:18px;flex:0 0 auto}.question-select-row span{margin-left:auto}@media(max-width:700px){.question-select-row{align-items:flex-start;flex-wrap:wrap}.question-select-row span{margin-left:30px;width:100%}}