:root{--bg:#0b1220;--panel:#0c1424d1;--fg:#f8fafc;--muted:#b6c2d1;--accent:#f7c21b;--ok:#2ecc71;--bad:#ff5a4e;--radius:14px;font-family:Sarabun,Noto Sans Thai,system-ui,sans-serif}html,body,#root{background:var(--bg);height:100%;color:var(--fg);margin:0}button,a.btn{font:inherit;cursor:pointer;background:var(--accent);color:#1b1b1b;border:0;border-radius:999px;padding:10px 18px;font-weight:700;text-decoration:none}a{color:var(--accent)}.app-shell{position:fixed;inset:0}.loading{background:var(--bg);position:fixed;inset:0}.page{max-width:980px;margin:0 auto;padding:24px 16px 64px}.page-head h1{margin:0 0 4px;font-size:2rem}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:0;list-style:none;display:grid}.card{border-radius:var(--radius);color:var(--fg);background:#15223a;flex-direction:column;gap:6px;min-height:88px;padding:16px;text-decoration:none;display:flex}.card span{color:var(--muted);font-size:.95rem}.hud-top{pointer-events:none;align-items:center;gap:10px;display:flex;position:absolute;top:12px;left:12px;right:12px}.hud-top>*{pointer-events:auto}.gallery-label{color:#1b2533;white-space:nowrap;background:#ffffffd9;border-radius:6px;padding:2px 6px;font:600 12px system-ui,sans-serif}.hud-top button,.hud-top a{background:var(--panel);color:var(--fg);border-radius:999px;padding:8px 14px;font-weight:600;text-decoration:none}.hud-title{background:var(--panel);border-radius:999px;padding:8px 14px;font-weight:700}.hud-hint{background:var(--panel);color:var(--muted);text-align:center;pointer-events:none;border-radius:12px;max-width:92vw;padding:8px 14px;font-size:.9rem;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.joystick{touch-action:none;background:#ffffff24;border:2px solid #ffffff59;border-radius:50%;place-items:center;width:140px;height:140px;display:grid;position:absolute;bottom:110px;left:24px}.joystick-knob{background:#fffc;border-radius:50%;width:60px;height:60px}.look-area{touch-action:none;width:50%;position:absolute;top:64px;bottom:180px;right:0}.look-buttons{justify-content:flex-end;gap:12px;display:flex;position:absolute;bottom:110px;left:190px;right:12px}.look-btn{touch-action:none;min-width:96px;min-height:72px;font-size:1.05rem}.tap-btn{color:#fff;background:#ff5a4e;min-width:140px;min-height:80px;font-size:1.2rem;position:absolute;bottom:200px;right:16px}.overlay{background:#050a148c;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.panel{background:#101b2e;border-radius:18px;width:min(560px,100%);max-height:90vh;padding:20px;overflow:auto;box-shadow:0 10px 40px #0006}.panel h2{margin:0 0 8px}.score{font-size:2.2rem;font-weight:800}.pass{color:var(--ok)}.fail{color:var(--bad)}.msg-list{padding-left:18px;line-height:1.5}.muted{color:var(--muted)}.field{flex-direction:column;gap:6px;margin:12px 0;display:flex}.field.row{flex-direction:row;align-items:center}.field input,.field select{font:inherit;color:var(--fg);background:#0f1a2e;border:1px solid #33415c;border-radius:10px;padding:10px 12px}.choice-row{border:0;flex-wrap:wrap;gap:10px;margin:14px 0;padding:0;display:flex}.choice-row legend{margin-bottom:8px;font-weight:700}.big-choice{color:var(--fg);background:#15223a;border:2px solid #0000;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:96px;min-height:72px;display:flex}.big-choice.on{border-color:var(--accent);background:#213355}.big-icon{font-size:2rem}.cta{padding:14px 24px;font-size:1.15rem}.mascot-hello{font-size:4rem}.map-head{justify-content:space-between}.grow-end{margin-left:auto}.btn-ghost{color:var(--fg);background:#15223a;border-radius:999px;padding:8px 14px;text-decoration:none}.avatar-badge{font-size:2.4rem}.chip{background:#15223a;border-radius:999px;padding:8px 14px}.town{border-radius:24px;width:100%;height:auto;margin:16px 0}.place{cursor:pointer}.place.locked{cursor:not-allowed;opacity:.75}.place:focus-visible circle{stroke:var(--accent);stroke-width:8px}.brief .mascot{font-size:3rem}.speech{color:#1b2533;background:#fdf6d8;border-radius:16px;padding:14px 16px;font-size:1.1rem;line-height:1.5}.lesson{background:#13253f;border-radius:12px;padding:10px 14px}.sticker{color:#1b1b1b;background:#f7c21b;border-radius:999px;padding:6px 12px;font-weight:800}.guide-hint{color:#1b1b1b;background:#f7c21b;border-radius:999px;padding:12px 22px;font-size:1.6rem;font-weight:800;animation:1s ease-in-out infinite alternate pulse;position:absolute;top:72px;left:50%;transform:translate(-50%)}@keyframes pulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.06)}}@media (prefers-reduced-motion:reduce){.guide-hint{animation:none}}.phone-overlay{pointer-events:none;place-items:center;display:grid;position:absolute;inset:auto 0 0}.phone{pointer-events:auto;color:#fff;background:#111;border:10px solid #2b2b2b;border-radius:32px 32px 0 0;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:min(300px,70vw);height:46vh;display:flex}.phone-msg{color:#062b12;background:#25d366;border-radius:14px;padding:10px 14px;font-weight:700}.phone-msg.small{color:#fff;background:#333}.vignette{place-items:center;padding:12px;display:grid;position:absolute;inset:auto 0 0}.options{gap:10px;margin:12px 0;display:grid}.option{color:var(--fg);text-align:left;background:#15223a;border-radius:14px;min-height:64px;padding:12px 16px;font-weight:600}.option.on{background:#2d4a7a}.feedback{border-radius:14px;padding:12px}.replay{background:#000;position:absolute;inset:0}.replay-controls{background:var(--panel);border-radius:14px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex;position:absolute;bottom:8px;left:8px;right:8px}.replay-controls input[type=range]{flex:200px}.replay-controls .on{outline:3px solid #fff}.freeze-banner{color:#fff;background:#c81e1ee6;border-radius:20px;padding:16px 32px;font-size:3rem;font-weight:900;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.ribbon-legend{background:var(--panel);border-radius:12px;gap:4px;padding:10px 14px;display:grid;position:absolute;top:12px;right:12px}.amber{color:#ffb000}.red{color:#ff5a4e}.licence-card{color:#1b2533;background:linear-gradient(135deg,#fef3c7,#fde68a);border:3px solid #1b2533;border-radius:20px;padding:20px}.stamps{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:14px 0;display:grid}.stamp{background:#fff;border:3px dashed #9aa3ab;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:10px;display:flex}.stamp.bronze{border:3px solid #b87333}.stamp.silver{border:3px solid #9aa3ab}.stamp.gold{border:3px solid #d4a017}html.hc{--panel:#000;--muted:#fff}html.hc .card,html.hc .option,html.hc .big-choice{background:#000;border:2px solid #fff}@media print{.no-print{display:none}body{background:#fff}}.banner{z-index:50;color:#fff;text-align:center;background:#7a4b00;padding:10px 16px;font-weight:600;position:sticky;top:0}.login-choices{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0;display:grid}.login-choices .big-choice{flex-direction:column;gap:6px;min-height:150px}.login-choices small{color:var(--muted);font-weight:400}.join-code-input{letter-spacing:.4em;text-transform:uppercase;text-align:center;max-width:320px;font-size:2rem!important}.classmates{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0;display:grid}.form-msg{color:#ffd7dc;background:#3a1d24;border-radius:10px;padding:10px 14px}.pin-pad{flex-direction:column;align-items:center;gap:12px;margin:12px 0;display:flex}.pin-dots{gap:14px;display:flex}.pin-dots span{border:3px solid var(--muted);border-radius:50%;place-items:center;width:22px;height:22px;font-size:.9rem;display:grid}.pin-dots span.on{background:var(--accent);border-color:var(--accent)}.pin-pad.reveal .pin-dots span{border-radius:10px;width:40px;height:40px;font-size:1.5rem}.pin-grid{grid-template-columns:repeat(3,76px);gap:10px;display:grid}.pin-grid button{cursor:pointer;background:#15223a;border:2px solid #2b3a57;border-radius:16px;height:76px;font-size:2.3rem}.pin-grid button:disabled{opacity:.5}.join-code-card{border-radius:var(--radius);background:#15223a;flex-direction:column;align-items:flex-start;gap:4px;margin:12px 0;padding:16px;display:flex}.join-code-card strong{letter-spacing:.3em;color:var(--accent);font-size:2.6rem}.roster{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.roster li{background:#101b2e;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 12px;display:flex}.new-student{border:1px solid #2b3a57;border-radius:12px;margin:10px 0}.panel summary{cursor:pointer;font-weight:700}table.attempts{border-collapse:collapse;width:100%}table.attempts th,table.attempts td{text-align:left;border-bottom:1px solid #22304a;padding:6px 8px}.privacy section h2{margin:18px 0 4px;font-size:1.2rem}.account{width:auto;margin:12px 0}@media (max-width:420px){.pin-grid{grid-template-columns:repeat(3,64px)}.pin-grid button{height:64px;font-size:2rem}}button.chip{font:inherit;color:var(--fg);cursor:pointer;border:2px solid #0000}button.chip.on{border-color:var(--accent)}.editor{flex-direction:column;height:100dvh;display:flex}.ed-top{background:#0f1a2e;border-bottom:1px solid #22304a;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.ed-top>button,.ed-top select{font:inherit;color:var(--fg);cursor:pointer;background:#15223a;border:1px solid #2b3a57;border-radius:10px;padding:6px 10px}.ed-top>button:disabled{opacity:.45;cursor:default}.ed-top>button.cta{background:var(--accent);color:#1a1a1a;border:0}.ed-msg{color:var(--accent)}.ed-verdict{background:#13271c;border-radius:10px;flex-basis:100%;padding:8px 12px}.ed-verdict.bad{background:#3a1d24}.ed-verdict ul{margin:4px 0 0;padding-left:18px}.ed-verdict li.warning{color:#ffd180}.ed-body{flex:1;grid-template-columns:250px 1fr 330px;min-height:0;display:grid}.ed-palette,.ed-inspector{background:#0d1627;padding:10px;overflow:auto}.ed-palette summary,.ed-inspector h3{cursor:pointer;margin:8px 0;font-weight:700}.ed-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.ed-grid button,.ed-outline button{font:inherit;text-align:left;color:var(--fg);cursor:pointer;background:#15223a;border:1px solid #22304a;border-radius:8px;padding:6px 8px;font-size:.85rem}.ed-outline ul{flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;display:flex}.ed-outline button{width:100%}.ed-outline button.on{border-color:var(--accent)}.ed-view{min-height:0;position:relative}.ed-view-error{color:#ffd7dc;place-items:center;display:grid}.ed-viewbar{gap:6px;display:flex;position:absolute;top:8px;right:8px}.ed-viewbar button{font:inherit;color:var(--fg);background:#15223acc;border:1px solid #2b3a57;border-radius:8px;padding:4px 10px}.ed-viewbar button.on{border-color:var(--accent)}.ed-head{align-items:center;gap:6px;display:flex}.ed-head h2{flex:1;margin:0;font-size:1.1rem}.efield{flex-direction:column;gap:3px;margin:6px 0;font-size:.9rem;display:flex}.efield.check{flex-direction:row;align-items:center;gap:8px}.efield input,.efield select{font:inherit;color:var(--fg);background:#0f1a2e;border:1px solid #33415c;border-radius:8px;padding:6px 8px}.ed-row{flex-wrap:wrap;gap:8px;display:flex}.ed-row .efield{flex:80px}.ed-rules ul{padding:0;list-style:none}.ed-rules li{border:1px solid #22304a;border-radius:10px;margin:6px 0;padding:6px 8px}.ed-rule-head{justify-content:space-between;align-items:center;display:flex}.danger{color:#ff8a80}.small{font-size:.8rem}.card.tpl{cursor:pointer;text-align:left;color:var(--fg);font:inherit;border:1px solid #22304a}@media (max-width:900px){.ed-body{grid-template-rows:45vh auto auto;grid-template-columns:1fr}.ed-view{order:-1}}.ed-verdict strong{margin-right:10px}.umbrella-overlay{pointer-events:none;z-index:3;background:radial-gradient(120% 160% at 50% -40%,#0c1c3cf5 55%,#0c1c3cd9 62%,#0000 63%),repeating-conic-gradient(at 50% -40%,#ffffff0f 0deg 2deg,#0000 2deg 30deg);height:34%;position:absolute;inset:0 0 auto}.comfort-vignette{pointer-events:none;z-index:3;background:radial-gradient(#0000 55%,#0000008c 100%);position:absolute;inset:0}.toast{color:var(--fg);z-index:6;background:#15223aee;border-radius:12px;padding:10px 16px;animation:3.5s forwards toast;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast{0%,85%{opacity:1}to{opacity:0}}.play2d{width:100%;height:100%;position:absolute;inset:0}.class-tools{margin:8px 0}.tabs{margin:12px 0}.dashboard .mistakes{padding-left:20px}.dashboard .mistakes li{margin:6px 0;padding:4px 8px;position:relative}.dashboard .mistakes .bar{z-index:-1;background:#e5393533;border-radius:6px;position:absolute;inset:0 auto 0 0}.table-wrap{overflow-x:auto}table.matrix{border-collapse:collapse;font-size:.9rem}table.matrix th,table.matrix td{text-align:center;color:#0f1a2e;border:1px solid #22304a;padding:4px 8px}table.matrix th{color:var(--fg);background:#101b2e}table.matrix.gain td,table.matrix.heat td:not([style*=background]){color:var(--fg)}table.matrix.gain td{text-align:left}.overlay{z-index:40;background:#000c;position:fixed;inset:0}.signature{flex-direction:column;gap:8px;margin:10px 0;display:flex}.signature img{background:#fff;border-radius:6px}.sig-pad{touch-action:none;background:#fff;border-radius:8px;width:min(480px,100%)}.classroom{grid-template-columns:1fr 360px;height:100dvh;display:grid}.classroom-view{position:relative}.classroom-panel{background:#0d1627;padding:16px;font-size:1.15rem;overflow:auto}.big-q{font-size:1.8rem;font-weight:800}.tally{gap:4px;height:56px;margin:12px 0;display:flex}.tally .bar{border-radius:10px;place-items:center;min-width:56px;font-size:1.3rem;font-weight:800;display:grid}.tally .safe{background:#1b5e20}.tally .unsafe{background:#b71c1c}.verdict{font-size:1.4rem;font-weight:800}.annotate{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.annotate.on{pointer-events:auto;cursor:crosshair}.annotate-tools{gap:6px;display:flex;position:absolute;bottom:12px;left:12px}.annotate-tools button{font:inherit;color:var(--fg);background:#15223acc;border:1px solid #2b3a57;border-radius:10px;padding:6px 10px}.annotate-tools button.on{border-color:var(--accent)}.vote-buttons{grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;display:grid}.vote-buttons .big-choice{justify-content:center;min-height:160px;font-size:1.6rem}.vote-buttons .safe{background:#1b5e20}.vote-buttons .unsafe{background:#b71c1c}.vote-buttons button:disabled{opacity:.4}.cert-svg svg{width:100%;height:auto;box-shadow:0 8px 30px #0008}.doc{background:#101b2e;border-radius:14px;padding:16px 20px}.doc blockquote{border-left:4px solid var(--accent);color:var(--muted);margin:8px 0;padding-left:12px}.big-code{letter-spacing:.3em;font-size:4rem;font-weight:800}.form-sheet{color:#111;background:#fff;border-radius:8px;margin:12px 0;padding:24px}.form-sheet .muted{color:#4a4a4a}@media (max-width:900px){.classroom{grid-template-rows:55vh auto;grid-template-columns:1fr}}@media print{.no-print,.banner{display:none!important}body,.page{color:#111!important;background:#fff!important}.cert-svg svg{box-shadow:none}.form-sheet{page-break-after:always}}.import-preview{cursor:crosshair;background:#6f8f55;border-radius:12px;width:100%;height:420px}label.chip{cursor:pointer;align-items:center;gap:4px;display:inline-flex}label.chip input{accent-color:var(--accent,#2ecc71)}label.chip.on{outline:2px solid}.pins{padding:0;list-style:none}.pins li{border-bottom:1px solid #7f7f7f40;padding:6px 0}.sound-caption{color:#fff;pointer-events:none;background:#000000b8;border-radius:10px;padding:6px 14px;font-size:1.1rem;position:absolute;bottom:132px;left:50%;transform:translate(-50%)}.sound-caption.loud{outline:2px solid #ffd43b;font-weight:700}:focus-visible{outline-offset:2px;outline:3px solid #ffd43b}html.reduce-motion :not(.toast),html.reduce-motion :before,html.reduce-motion :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.assist{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:16px;left:0;right:0}.assist>*{pointer-events:auto}.assist .look-buttons{position:static}.assist-go{min-width:260px;min-height:64px;font-size:1.3rem}.assist-go:disabled{opacity:.6}.assist-hint{position:static}.pwa-toast{z-index:50;color:#fff;background:#15223a;border-radius:12px;padding:10px 14px;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0006}.gain-bar{vertical-align:middle;border-radius:3px;max-width:100px;height:10px;display:inline-block}.gain-bar.pre{background:repeating-linear-gradient(45deg,#9aa3ab 0 4px,#6b7580 4px 8px)}.gain-bar.post{background:#2ecc71}