:root{font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173252;background:#f2f5fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.46;cursor:not-allowed}a{color:inherit}input,textarea,select{width:100%;padding:12px 14px;background:#fff;border:1px solid #cfdae7;border-radius:12px;color:#173252;outline:none}input:focus,textarea:focus,select:focus{border-color:#3d79c9;box-shadow:0 0 0 3px #cde2ff}textarea{min-height:88px;resize:vertical}label{display:block;font-weight:650;font-size:.9rem;margin-bottom:7px}small,.muted{color:#647a96}.shell{max-width:1180px;margin:0 auto;padding:24px 24px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0 30px}.brand{font-size:.92rem;letter-spacing:.12em;font-weight:900;color:#194273}.brand span{color:#68a5dc}.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.pill{display:inline-flex;gap:7px;align-items:center;background:#e8eef7;border:1px solid #d5e1ef;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:700;color:#486587}.pill.online{background:#e9f7ef;color:#267d53;border-color:#bfe4ce}.pill.offline{background:#fff2e6;color:#a26324;border-color:#f2d8b2}.dot{width:7px;height:7px;border-radius:50%;background:currentColor}.btn{appearance:none;border:0;border-radius:12px;padding:12px 19px;font-weight:750;line-height:1.25;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px}@media (hover:hover) and (pointer:fine){.btn:not(:disabled):hover{filter:brightness(.96);transform:translateY(-1px)}}.btn.primary{background:#176ac2;color:white}.btn.secondary{background:#e8eff9;color:#205183}.btn.ghost{background:transparent;color:#3d648b;border:1px solid #d1deea}.btn.danger{background:#fae9e9;color:#9c3333}.btn.full{width:100%}.btn.sm{padding:9px 12px;min-height:36px;font-size:.85rem}.btn.copy{background:white;border:1px solid #cfdae7;color:#255b92}.card{background:white;border:1px solid #dce5f0;border-radius:22px;box-shadow:0 8px 32px rgba(24,59,100,.055)}.pad{padding:28px}.hero{min-height:530px;display:grid;grid-template-columns:1.14fr .86fr;align-items:center;gap:40px}.eyebrow{color:#2877b9;letter-spacing:.13em;font-size:.75rem;font-weight:900;text-transform:uppercase}.hero h1{font-size:clamp(2.6rem,5vw,5.3rem);letter-spacing:-.055em;line-height:1.03;color:#0d2d55;margin:18px 0 22px}.hero h1 span{color:#237bc8}.hero p{color:#526f8b;line-height:1.75;font-size:1.08rem;max-width:570px}.choice-stack{display:grid;gap:14px}.role-card{text-align:left;padding:23px;border:1px solid #d7e4f1;border-radius:19px;background:white;display:flex;gap:17px;align-items:center;box-shadow:0 10px 25px rgba(27,62,104,.05);width:100%}@media (hover:hover) and (pointer:fine){.role-card:hover{border-color:#87b9e5;background:#f9fcff}}.role-icon{background:#e8f3ff;border-radius:15px;padding:16px;font-size:1.65rem}.role-text b{display:block;font-size:1.14rem;color:#143b64}.role-text small{display:block;margin-top:5px;line-height:1.5}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.section-title h1,.section-title h2{margin:0;color:#102f54}.section-title h1{font-size:1.75rem}.section-title p{margin:5px 0 0;color:#7387a0}.builder{display:grid;grid-template-columns:292px minmax(0,1fr);gap:20px}.sidebar{padding:18px;align-self:start}.question-list{display:grid;gap:7px;margin:17px 0}.q-list-row{display:flex;align-items:center;gap:6px}.q-list-item{flex:1;text-align:left;background:#f6f9fd;border:1px solid transparent;border-radius:11px;padding:12px;min-width:0;color:#315272}.q-list-item.active{background:#e7f1fd;border-color:#9fc4e8;color:#144e85}.q-list-item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.87rem}.q-list-item small{font-size:.72rem}.handle{font-size:.92rem;color:#8fa4b8;cursor:grab;border:0;background:none;padding:8px}.editor{padding:26px}.editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field{margin-bottom:18px}.field.compact{margin:0}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-field{border:1px solid #dce5f0;border-radius:13px;padding:11px;background:#fafcff}.option-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.option-head label{margin:0}.option-head input[type=radio]{width:auto;accent-color:#176ac2}.editor-tools{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}.hint{background:#eff7ff;border:1px solid #d8eafb;border-radius:13px;padding:12px 15px;color:#36628a;font-size:.86rem;line-height:1.55}.notice{background:#fff6ec;border:1px solid #f1d8b8;border-radius:14px;color:#8a5323;padding:12px 15px;margin:16px 0}.notice.error{background:#fff0f0;border-color:#f2c9c9;color:#9a3a3a}.preview-layout,.room-layout{display:grid;grid-template-columns:1.5fr .85fr;gap:22px}.preview-block{padding:40px;min-height:350px}.question-big{font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.35;color:#122f51;margin:10px 0 24px;font-weight:800}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-choice{border:2px solid #d9e5f2;background:#f8fbff;border-radius:15px;min-height:84px;padding:16px;text-align:left;font-weight:700;color:#244970;display:flex;align-items:center;gap:12px;width:100%;font-size:1rem}.answer-choice strong{background:#e1eefc;border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}@media (hover:hover) and (pointer:fine){.answer-choice:hover:enabled{border-color:#83b4e5}}.answer-choice.selected{border-color:#176ac2;background:#e5f2ff}.answer-choice.correct{border-color:#2aa36d;background:#eafaf1}.answer-choice.wrong{border-color:#d45f60;background:#fff0f0}.answer-choice:disabled{opacity:1;cursor:default}.room-pin{font-size:clamp(3.8rem,7vw,6rem);letter-spacing:.11em;color:#102f54;margin:4px 0 14px;font-weight:850;font-variant-numeric:tabular-nums}.qr{width:200px;min-height:200px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;margin:18px auto}.qr img{max-width:100%}.room-roster{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.roster-name{padding:8px 11px;background:#edf4fc;border-radius:999px;color:#315c86;font-size:.86rem;font-weight:650}.stat-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stat{background:#edf4fa;border-radius:13px;padding:13px 17px;color:#214c76}.stat strong{display:block;font-size:1.3rem;color:#143a61}.game-shell{max-width:900px;margin:0 auto}.game-card{padding:clamp(22px,4vw,44px)}.game-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.timer{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:#e9f4ff;border:2px solid #b8d8f6;border-radius:50%;font-size:1.5rem;font-weight:900;color:#1764ad;font-variant-numeric:tabular-nums}.timer.warn{background:#fff1e6;color:#b04e16;border-color:#f7cfac}.feedback{margin-top:18px;border-radius:13px;background:#eaf6ef;color:#1e794e;padding:13px 17px;font-weight:700}.feedback.waiting{background:#e9f1fb;color:#315c84}.feedback.warn{background:#fff2e7;color:#a15c25}.explanation{margin-top:16px;padding:18px;background:#f0f6fc;border-radius:14px;color:#365b7c;line-height:1.65}.score-big{font-size:3.7rem;color:#165da6;letter-spacing:-.045em;font-weight:900;margin:5px 0}.rank-list{display:grid;gap:9px}.rank-row{display:flex;align-items:center;gap:14px;background:#f4f8fd;padding:14px;border-radius:13px}.rank-number{width:38px;text-align:center;font-size:1.3rem;font-weight:900;color:#2365a0}.rank-name{flex:1;font-weight:700}.rank-score{font-variant-numeric:tabular-nums;font-weight:900;color:#154776}.winner{background:linear-gradient(140deg,#103862,#155fa7);color:white;text-align:center;padding:45px;border-radius:22px}.winner h1,.winner h2{color:white}.winner .score-big{color:#e2f1ff}.center{text-align:center}.join-card{max-width:500px;margin:35px auto;padding:35px}.join-card h1{font-size:2.1rem;margin:7px 0 24px}.join-card input{font-size:1.12rem}.join-card #pin{letter-spacing:.15em;font-size:1.6rem;text-align:center;font-weight:850}.stack{display:grid;gap:14px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.space{justify-content:space-between}.divider{height:1px;background:#dce5f0;margin:20px 0}.link{border:0;background:transparent;color:#176ac2;padding:5px;font-weight:700}.boot{padding:60px;text-align:center;color:#567}.footer-note{padding-top:25px;text-align:center;font-size:.78rem;color:#90a1b5}.empty{padding:25px;color:#7791a9;text-align:center}.host-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}.progress-track{height:7px;border-radius:10px;overflow:hidden;background:#e1eaf5;margin:13px 0 17px}.progress-fill{height:100%;background:#267fcd;transition:width .3s}.status-inline{font-size:.82rem;color:#65809b}.host-answer-summary{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}.host-answer-summary .stat{text-align:center}.tag{padding:5px 9px;border-radius:7px;background:#e8f0f9;color:#37618b;font-weight:750;font-size:.72rem}.topbar button{white-space:nowrap}@media(max-width:850px){.hero{grid-template-columns:1fr;gap:15px;min-height:0;padding-top:35px}.choice-stack{grid-template-columns:1fr 1fr}.builder,.preview-layout,.room-layout{grid-template-columns:1fr}.builder .sidebar{position:static}.question-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.sidebar{order:2}.editor{order:1}}@media(max-width:600px){.shell{padding:12px 14px 38px}.topbar{padding:12px 0 22px}.brand{font-size:.78rem}.top-actions .btn{min-height:36px;padding:8px 10px}.top-actions{gap:5px}.pad,.editor,.join-card{padding:20px}.hero h1{font-size:2.7rem}.choice-stack{grid-template-columns:1fr}.editor-grid{grid-template-columns:1fr 1fr}.options-grid,.choices{grid-template-columns:1fr}.answer-choice{min-height:64px}.room-pin{font-size:3.7rem}.question-big{font-size:1.6rem}.game-card{padding:20px}.rank-row{padding:11px}.section-title{align-items:flex-start;flex-wrap:wrap}.join-card{margin:12px auto}.footer-note{line-height:1.5}}@media(prefers-reduced-motion:reduce){.btn,.progress-fill{transition:none}}