:root{--panel:#1a1a2e;--ink:#e0e7ff;--pumpkin:#ff6b35;--purple:#8b5cf6;--green:#10b981;--dark:#0a0a0f;--gray:#8892b0}*{box-sizing:border-box;font-family:Comic Sans MS,cursive,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{margin:0;padding:0;background:var(--dark);color:var(--ink);background-image:radial-gradient(circle at 10% 20%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(255,107,53,.1) 0%,transparent 50%)}button{background:linear-gradient(135deg,#8b5cf6,#ff6b35);color:#fff;border:2px solid #ff6b35;border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .3s ease;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3);box-shadow:0 0 15px #8b5cf64d}button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #ff6b3580;border-color:var(--pumpkin)}button:active{transform:translateY(0)}label{display:block;color:#cdd3ff;font-size:12px;margin-top:6px;font-weight:500}input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#323855;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);cursor:pointer;border-radius:50%;box-shadow:0 2px 8px #00e5ff66}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);cursor:pointer;border-radius:50%;border:none;box-shadow:0 2px 8px #00e5ff66}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.panel{background:linear-gradient(135deg,#1a1a2ee6,#0a0a0fe6);color:var(--ink);padding:14px;border-radius:12px;box-shadow:0 8px 24px #8b5cf666,inset 0 1px 1px #ffffff1a;border:2px solid #ff6b35;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stack{display:flex;flex-direction:column;gap:8px}.hud{position:absolute;left:12px;top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hud .score{color:var(--ink);font-weight:700;font-size:16px;background:linear-gradient(135deg,#00e5ff,#7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.adventure-canvas-container{width:100%;height:600px;border-radius:12px;overflow:hidden}.app-root{width:100%;max-width:1200px;margin:0 auto;padding:24px;background:#0a0a0f;min-height:100vh}.header{text-align:center;margin-bottom:16px}.title{font-size:36px;font-weight:800;background:linear-gradient(135deg,#ff6b35,#8b5cf6,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;text-shadow:0 0 30px rgba(139,92,246,.5)}.subtitle{color:#ff6b35;font-size:16px;margin:8px 0 0;font-weight:700}.switcher{margin-top:12px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{padding:10px 24px;border-radius:8px;border:2px solid #444;background:#1a1a2e;color:#888;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s}.btn--adventure-active{border-color:ff6b35;background:linear-gradient(135deg,gold,#fa0);color:#000;box-shadow:0 0 20px #ffd70080}.btn--classic-active{border-color:#8b5cf6;background:linear-gradient(135deg,#8b5cf6,#7c4dff);color:#fff;box-shadow:0 0 20px #8b5cf680}.grid-two{display:grid;grid-template-columns:800px 320px;gap:24px;margin-bottom:16px;justify-content:center;align-items:start}.grid-two>div:last-child{display:flex;flex-direction:column;gap:12px}.canvas-card{border:2px solid #ff6b35;padding:3px;border-radius:12px;overflow:hidden;box-shadow:0 0 40px #ffd70066;background:#000;width:fit-content;height:fit-content;max-width:800px;max-height:600px}.instructions{text-align:center;color:#ff6b35;font-size:14px;margin-top:12px;font-weight:700;padding:16px;background:#7e4e3c1a;border-radius:12px;border:2px solid rgba(255,107,53,.3)}.instructions-title{font-size:16px;margin-bottom:8px;color:gold}.instructions-body{color:#e0e7ff;font-size:13px;line-height:1.6}.instructions-item{margin-bottom:4px}.classic-wrapper{position:relative;width:960px;height:540px;margin:16px auto;border:3px solid #8b5cf6;border-radius:12px;overflow:hidden;box-shadow:0 0 40px #8b5cf666}.classic-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.classic-overlay-right{position:absolute;right:12px;top:12px;width:260px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}.classic-hint{text-align:center;color:#ff6b35;font-size:14px;margin-top:12px;font-weight:700}.teacher-panel{background:linear-gradient(135deg,#1a1a2e,#0a0a0f);border:2px solid #8b5cf6;border-radius:12px;padding:20px;margin-top:20px;box-shadow:0 0 20px #8b5cf64d}.teacher-title{color:#ff6b35;margin:0 0 12px;font-size:20px}.teacher-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;color:#e0e7ff}.teacher-subtitle-green{color:#10b981;margin-top:0}.teacher-subtitle-purple{color:#8b5cf6;margin-top:0}.teacher-subtitle-orange{color:#ff6b35;margin-top:0}.teacher-note{grid-column:1 / -1;background:#8b5cf61a;padding:12px;border-radius:8px;border:1px solid #8b5cf6}.teacher-list{margin:0;padding-left:20px;font-size:13px}.teacher-p{font-size:13px;margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.classic-layout{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:1400px;margin:0 auto}.level-selector-top{width:100%}.classic-main-grid{display:grid;grid-template-columns:1fr 400px;gap:16px;min-height:600px}.canvasWrap{position:relative;background:#0b0b14;border-radius:12px;box-shadow:0 10px 30px #00000059;height:540px;overflow:hidden}.canvasWrap>canvas{width:100%;height:100%;display:block;border-radius:12px;cursor:grab}.canvasWrap>canvas:active{cursor:grabbing}.question-answer-panel{display:flex;flex-direction:column;gap:12px}.how-to-play-bottom{width:100%;margin-top:16px}.how-to-play-bottom .small-legend{background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:8px;padding:16px;font-size:14px}.how-to-play-bottom .small-legend h4{margin:0 0 12px;color:#8b5cf6;font-size:16px;text-align:center}.how-to-play-bottom .legend-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#e0e7ff;font-size:13px}.how-to-play-bottom .legend-icon{font-size:16px;width:20px;text-align:center}@media (max-width: 980px){.classic-main-grid{grid-template-columns:1fr;gap:12px}.canvasWrap{height:50vh;min-height:400px}}@media (max-width: 640px){.classic-layout{padding:8px}.canvasWrap{height:40vh;min-height:300px}}