*{box-sizing:border-box;margin:0;padding:0}body{background:#000;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}canvas{display:block}#info{color:#fff;backdrop-filter:blur(8px);pointer-events:none;user-select:none;z-index:10;background:#0009;border:1px solid #ffffff14;border-radius:10px;padding:12px 18px;font-size:14px;line-height:1.5;position:absolute;top:16px;left:16px}#info h2{color:#f0c040;margin-bottom:4px;font-size:18px}#ui-top-right{z-index:10;flex-direction:column;gap:8px;display:flex;position:absolute;top:16px;right:16px}#ui-top-right button{color:#fff;cursor:pointer;backdrop-filter:blur(8px);background:#0009;border:1px solid #fff3;border-radius:8px;padding:8px 14px;font-size:13px;transition:all .2s}#ui-top-right button:hover{background:#ffffff26;border-color:#f0c040}#ui-top-right-extra{flex-direction:column;gap:8px;display:flex}#settings-overlay{z-index:200;-webkit-backdrop-filter:blur(8px);touch-action:none;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#settings-grid{grid-template-columns:1fr 1fr;gap:10px;width:92vw;max-width:340px;max-height:80vh;padding:16px;display:grid;overflow-y:auto}#settings-grid button{color:#fff;cursor:pointer;backdrop-filter:blur(4px);touch-action:manipulation;user-select:none;background:#1e1e3cd9;border:1px solid #ffffff1f;border-radius:12px;min-height:52px;padding:14px 8px;font-size:13px;transition:all .2s}#settings-grid button:hover,#settings-grid button:active{background:#32325ae6;border-color:#f0c040;transform:scale(1.03)}#settings-grid button.danger{color:#f87171;border-color:#ef444466}#settings-grid button.danger:active{background:#ef444426;border-color:#ef4444}#minimap{z-index:10;border:2px solid #ffffff4d;border-radius:12px;width:180px;height:180px;position:absolute;bottom:16px;right:16px;box-shadow:0 4px 20px #00000080}#joystick-zone{z-index:20;touch-action:none;cursor:pointer;backdrop-filter:blur(4px);background:#ffffff1a;border:2px solid #ffffff40;border-radius:50%;width:120px;height:120px;display:none;position:absolute;bottom:4px;left:4px}#joystick-zone.active{display:block}#joystick-knob{pointer-events:none;background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;width:44px;height:44px;transition:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#status-bar{color:#fff;backdrop-filter:blur(8px);z-index:10;pointer-events:none;user-select:none;background:#0009;border-radius:20px;padding:6px 18px;font-size:13px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}#error-toast{color:#fff;z-index:100;text-align:center;pointer-events:auto;backdrop-filter:blur(8px);background:#c80000d9;border:1px solid #ff646466;border-radius:8px;max-width:80vw;padding:10px 20px;font-size:14px;display:none;position:absolute;bottom:60px;left:50%;transform:translate(-50%)}#error-toast.visible{display:block}#perf-overlay{color:#aaa;pointer-events:none;z-index:100;user-select:none;backdrop-filter:blur(4px);background:#000000bf;border:1px solid #ffffff1a;border-radius:8px;padding:8px 12px;font-family:Consolas,Courier New,monospace;font-size:11px;line-height:1.5;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 12px #00000080}#quiz-overlay{z-index:100;opacity:0;pointer-events:none;width:720px;max-width:95vw;max-height:95vh;transition:opacity .4s,transform .4s;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95)}#quiz-overlay.visible{opacity:1;pointer-events:auto;display:block;transform:translate(-50%,-50%)scale(1)}#quiz-overlay.fade-out{opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translate(-50%,-50%)scale(.9)}.quiz-board{-webkit-backdrop-filter:blur(20px);background:linear-gradient(160deg,#1a1a2e8c 0%,#16213e80 50%,#0f346080 100%);border:1.5px solid #4488ff40;border-radius:16px;flex-direction:column;max-height:85vh;padding:20px 24px 16px;display:flex;position:relative;box-shadow:0 0 40px #4488ff14,0 0 80px #4488ff08,inset 0 0 60px #4488ff05}.quiz-board:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#4488ff59,#4488ff0d 30% 70%,#4488ff40);border-radius:18px;padding:2px;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.close-btn{color:#ffffff80;cursor:pointer;z-index:10;background:#0000004d;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;line-height:1;transition:all .2s;display:flex;position:absolute;top:10px;right:14px}.close-btn:hover{color:#ffffffd9;background:#ff444440;border-color:#f446}#all-done-overlay{z-index:100;opacity:0;width:460px;max-width:92vw;transition:opacity .4s,transform .4s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95)}#all-done-overlay.visible{opacity:1;transform:translate(-50%,-50%)scale(1)}#all-done-overlay.fade-out{opacity:0;transition:opacity .3s,transform .3s;transform:translate(-50%,-50%)scale(.9)}.all-done-board{text-align:center;align-items:center;gap:10px;padding:32px 28px 24px}.all-done-icon{margin-bottom:4px;font-size:48px;line-height:1}.all-done-title{color:#fffffff2;margin:0;font-size:22px;font-weight:700}.all-done-subtitle{color:#c8d2e6bf;max-width:420px;margin:0;font-size:15px;line-height:1.4}.all-done-stats{color:#88aaffd9;margin:4px 0 0;font-size:13px}.all-done-continue-btn{color:#ffffffeb;cursor:pointer;background:linear-gradient(160deg,#4488ff47 0%,#4488ff24 100%);border:1px solid #4488ff59;border-radius:10px;margin-top:14px;padding:10px 28px;font-size:15px;font-weight:600;transition:all .2s}.all-done-continue-btn:hover{border-color:#48f9;transform:translateY(-1px);box-shadow:0 4px 20px #4488ff26}.quiz-header{border-bottom:1px solid #4488ff1a;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;display:flex}.subject-badge{color:#88aaffd9;letter-spacing:.5px;font-size:14px;font-weight:600}.difficulty-stars{color:#f0c040d9;letter-spacing:2px;font-size:16px}.question-text{color:#ffffffeb;text-align:center;flex-shrink:0;margin-bottom:8px;padding:0 4px;font-size:16px;font-weight:600;line-height:1.4}.timer-container{flex-shrink:0;align-items:center;gap:10px;margin-bottom:8px;display:flex}.timer-bar-bg{background:#44446640;border-radius:2px;flex:1;height:3px;overflow:hidden}.timer-bar-fill{border-radius:2px;width:100%;height:100%;transition:width .3s linear,background .5s}.timer-label{color:#ffffff59;text-align:right;font-variant-numeric:tabular-nums;min-width:30px;font-size:11px;font-weight:600}.quiz-body{min-height:180px}.mcq-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.mcq-card{color:#ffffffe6;cursor:pointer;user-select:none;background:linear-gradient(160deg,#2a2a4a80 0%,#1a1a3a73 100%);border:1px solid #ffffff0f;border-radius:12px;align-items:center;gap:14px;padding:14px 16px;font-size:15px;transition:all .2s;display:flex;position:relative;overflow:hidden}.mcq-card:hover{background:linear-gradient(160deg,#33335a8c 0%,#22224880 100%);border-color:#4488ff4d;transform:translateY(-1px);box-shadow:0 4px 20px #4488ff1a}.mcq-card .letter{color:#f0c040cc;border:1.5px solid #f0c040bf;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:flex}.mcq-card .text{flex:1;line-height:1.3}.mcq-card.selected{background:linear-gradient(160deg,#1a2a5a8c 0%,#0f1f4a80 100%);border-color:#4488ff80;box-shadow:0 0 20px #4488ff1f}.mcq-card.correct{background:linear-gradient(160deg,#1a3a2a80 0%,#0f2a1f73 100%);border-color:#22cc4480;box-shadow:0 0 20px #22cc441f}.mcq-card.wrong{background:linear-gradient(160deg,#3a1a1a80 0%,#2a0f0f73 100%);border-color:#cc222280;animation:.4s shake;box-shadow:0 0 20px #cc22221a}.mcq-card.dimmed{opacity:.35}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.sort-container{flex-direction:column;gap:8px;display:flex}.sort-item{color:#ffffffe0;cursor:grab;user-select:none;touch-action:none;background:linear-gradient(160deg,#2a2a4a73 0%,#1a1a3a66 100%);border:1px solid #ffffff0f;border-radius:10px;align-items:center;gap:12px;padding:12px 16px;font-size:14px;transition:all .2s;display:flex}.sort-item:hover{background:linear-gradient(160deg,#33335a80 0%,#22224873 100%);border-color:#4488ff40}.sort-item.dragging{opacity:.4;border-color:#48f6}.sort-item.drag-over{background:linear-gradient(160deg,#1a2a5a66 0%,#0f1f4a59 100%);border-style:dashed;border-color:#48f6}.sort-item .handle{color:#ffffff40;cursor:grab;text-align:center;flex-shrink:0;width:24px;font-size:18px}.sort-item .order-badge{color:#88aaffb3;background:#4488ff1f;border:1px solid #48f3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:11px;font-weight:600;display:flex}.sort-item .text{flex:1}.group-container{gap:16px;min-height:200px;display:flex}.group-items-pool{background:#ffffff05;border:1px dashed #ffffff14;border-radius:10px;flex-direction:column;flex:1;gap:6px;min-height:140px;padding:10px;display:flex}.group-items-pool .label{color:#ffffff40;text-transform:uppercase;letter-spacing:1px;text-align:center;padding:4px 0;font-size:10px}.group-zones{flex:2;gap:10px;display:flex}.group-zone{background:#ffffff05;border:1px dashed #ffffff14;border-radius:10px;flex-direction:column;flex:1;gap:4px;min-height:140px;padding:10px;transition:all .2s;display:flex}.group-zone.drag-over{background:#4488ff0f;border-color:#48f6}.group-zone .zone-header{color:#88aaffbf;text-align:center;border-bottom:1px solid #4488ff1a;margin-bottom:4px;padding-bottom:4px;font-size:11px;font-weight:600}.group-item{color:#ccccccd9;cursor:grab;user-select:none;touch-action:none;background:#ffffff0d;border:1px solid #ffffff0f;border-radius:6px;padding:6px 10px;font-size:12px;transition:all .15s}.group-item:hover{background:#ffffff14;border-color:#4488ff40}.group-item.dragging{opacity:.35}.mcq-card.multi-opt{position:relative}.mcq-card.multi-opt .check-mark{color:#4488ffb3;font-size:16px;font-weight:700;display:none;position:absolute;top:8px;right:10px}.mcq-card.multi-opt.selected .check-mark{display:block}.mcq-card.multi-opt .checkbox-letter{border-color:#4488ff59}.mcq-card.multi-opt.selected .checkbox-letter{color:#aaccffe6;background:#48f3;border-color:#48f9}.matching-container{justify-content:center;align-items:stretch;gap:20px;min-height:200px;display:flex}.match-col{flex-direction:column;flex:1;gap:10px;max-width:45%;display:flex}.match-item{color:#ffffffd9;cursor:pointer;user-select:none;background:linear-gradient(160deg,#2a2a4a73 0%,#1a1a3a66 100%);border:1px solid #ffffff0f;border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-size:13px;transition:all .2s;display:flex}.match-item:hover{background:linear-gradient(160deg,#33335a80 0%,#22224873 100%);border-color:#4488ff40}.match-item.active{background:linear-gradient(160deg,#3a301a80 0%,#2a220f73 100%);border-color:#f0c04080;box-shadow:0 0 16px #f0c0401a}.match-item.connected{opacity:.85;background:linear-gradient(160deg,#1a223a80 0%,#0f182a73 100%);border-color:#4488ff4d}.match-letter{color:#f0c040b3;border:1.5px solid #f0c04099;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:600;display:flex}.match-text{flex:1;line-height:1.3}.match-connector{color:#ffffff26;letter-spacing:1px;text-align:center;flex-shrink:0;min-width:20px;font-family:monospace;font-size:12px}.match-item.connected .match-connector{color:#88aaff80}.subjective-container{flex-direction:column;gap:14px;display:flex}.subjective-textarea{color:#ffffffe0;resize:vertical;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;outline:none;width:100%;min-height:100px;padding:12px 14px;font-family:Segoe UI,sans-serif;font-size:14px;line-height:1.6;transition:border-color .2s}.subjective-textarea:focus{border-color:#4488ff59;box-shadow:0 0 20px #4488ff0d}.subjective-textarea::placeholder{color:#fff3}.quiz-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:auto;min-height:120px;overflow-y:auto}.quiz-footer{border-top:1px solid #4488ff14;flex-shrink:0;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;display:flex}.feedback-text{border-radius:6px;padding:4px 12px;font-size:13px;font-weight:600;display:none}.feedback-text.correct{color:#22cc44d9;background:#22cc4414;display:block}.feedback-text.wrong{color:#ff4444d9;background:#ff444414;display:block}.btn{color:#8afc;cursor:pointer;background:#4488ff1a;border:1px solid #4488ff26;border-radius:8px;padding:8px 24px;font-size:13px;font-weight:600;transition:all .2s}.btn:hover{color:#aaccffe6;background:#4488ff2e;border-color:#4488ff59}.btn:disabled{opacity:.25;cursor:not-allowed}.btn.primary{color:#aaccffd9;background:linear-gradient(135deg,#48f3,#4488ff1a);border-color:#4488ff40}.btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#4488ff4d,#4488ff2e)}@media (width<=768px){#ui-top-right{gap:4px;top:8px;right:8px}#ui-top-right button{border-radius:6px;padding:4px 8px;font-size:10px}#info{padding:6px 10px;font-size:11px;top:44px;left:8px}#info h2{font-size:14px}#hud-bar{gap:10px!important;padding:4px 12px!important;font-size:11px!important;top:8px!important}#minimap{width:120px;height:120px;bottom:8px;right:8px}#perf-overlay{padding:4px 8px;font-size:9px;bottom:8px;left:8px}#joystick-zone{width:90px;height:90px;bottom:4px;left:4px}#joystick-knob{width:34px;height:34px}#status-bar{padding:4px 12px;font-size:10px;bottom:8px}#quiz-overlay{width:92vw;max-width:92vw;max-height:95vh}.quiz-board{border-radius:12px;max-height:90vh;margin:0;padding:14px 14px 12px}.question-text{font-size:16px}.mcq-card{padding:10px 12px;font-size:13px}}@media (width<=480px){#ui-top-right button{padding:3px 6px;font-size:9px}#hud-bar{gap:6px!important;padding:3px 8px!important;font-size:10px!important}#minimap{width:90px;height:90px}#perf-overlay{max-width:180px;padding:3px 6px;font-size:8px}}