*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.game-container{position:relative;width:640px;height:480px;border:2px solid #4a4a6a;border-radius:4px;overflow:hidden}.game-container canvas{display:block;width:640px!important;height:480px!important}.hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.hud-controls{position:absolute;bottom:10px;left:10px;color:#ffffff80;font-size:11px;line-height:1.6}.hud-zone-label{position:absolute;top:10px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;font-weight:600;text-shadow:0 0 10px rgba(100,150,255,.5);text-align:center}.hud-interact{position:absolute;bottom:50px;left:50%;transform:translate(-50%);color:#fff;font-size:14px;background:#0009;padding:6px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.2);animation:pulse-interact 1.5s ease-in-out infinite}@keyframes pulse-interact{0%,to{opacity:.7}50%{opacity:1}}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border:1px solid rgba(255,255,255,.4);border-radius:50%}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:20;pointer-events:all}.overlay-content{background:linear-gradient(135deg,#1e1e3a,#2a2a4a);border:1px solid rgba(100,150,255,.3);border-radius:12px;padding:24px;max-width:540px;width:90%;max-height:420px;overflow-y:auto;color:#e0e0f0;box-shadow:0 0 30px #5078ff33}.overlay-content h2{font-size:18px;margin-bottom:12px;color:#a0c0ff;text-align:center}.overlay-content h3{font-size:15px;margin-bottom:8px;color:#b0d0ff}.overlay-content p{font-size:13px;line-height:1.6;margin-bottom:12px;color:#c0c0d8}.overlay-content .educational-note{background:#5078c826;border-left:3px solid rgba(100,150,255,.5);padding:10px 14px;margin-bottom:14px;border-radius:0 6px 6px 0;font-size:12px;line-height:1.5;color:#b0c0e0}.overlay-content .scenario-box{background:#ffc8641a;border:1px solid rgba(255,200,100,.3);padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;color:#e0d0a0;text-align:center;font-style:italic}.overlay-content label{display:block;font-size:12px;color:#a0a0c0;margin-bottom:4px}.overlay-content input[type=text],.overlay-content textarea{width:100%;padding:8px 12px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#e0e0f0;font-size:13px;outline:none;margin-bottom:10px;font-family:inherit}.overlay-content input[type=text]:focus,.overlay-content textarea:focus{border-color:#6496ff80;box-shadow:0 0 8px #6496ff33}.overlay-content textarea{resize:vertical;min-height:50px}.emotion-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.emotion-choice{padding:6px 14px;background:#6496ff26;border:1px solid rgba(100,150,255,.3);border-radius:20px;color:#b0c8ff;font-size:12px;cursor:pointer;transition:all .2s}.emotion-choice:hover{background:#6496ff4d;border-color:#6496ff99}.emotion-choice.selected{background:#6496ff66;border-color:#6496ffcc;color:#fff}.btn-submit{display:block;width:100%;padding:10px;background:linear-gradient(135deg,#4060c0,#5070d0);border:1px solid rgba(100,150,255,.4);border-radius:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px}.btn-submit:hover{background:linear-gradient(135deg,#5070d0,#6080e0)}.btn-submit:disabled{opacity:.4;cursor:not-allowed}.btn-close{display:block;width:100%;padding:8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#c0c0d8;font-size:13px;cursor:pointer;margin-top:8px;transition:all .2s}.btn-close:hover{background:#fff3}.mindful-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000014cc;display:flex;justify-content:center;align-items:center;z-index:25;pointer-events:none}.mindful-message{color:#b4c8ffe6;font-size:20px;text-align:center;font-style:italic;text-shadow:0 0 20px rgba(100,150,255,.4);animation:fade-in-mindful 1s ease;padding:20px;line-height:1.6}@keyframes fade-in-mindful{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.summary-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000014eb;display:flex;justify-content:center;align-items:center;z-index:30;pointer-events:all}.summary-content{background:linear-gradient(135deg,#1a1a35,#252548);border:1px solid rgba(100,150,255,.3);border-radius:12px;padding:20px;max-width:580px;width:95%;max-height:440px;overflow-y:auto;color:#e0e0f0;box-shadow:0 0 40px #5078ff4d}.summary-content h2{font-size:18px;color:#a0c0ff;text-align:center;margin-bottom:16px}.summary-section{margin-bottom:14px}.summary-section h3{font-size:14px;color:#90b0e0;margin-bottom:6px;border-bottom:1px solid rgba(100,150,255,.2);padding-bottom:4px}.summary-item{font-size:12px;color:#c0c0d8;padding:4px 0;line-height:1.5}.summary-item strong{color:#b0c8ff}.summary-final{background:#5078c826;border:1px solid rgba(100,150,255,.3);border-radius:8px;padding:14px;margin:14px 0;text-align:center}.summary-final p{font-size:13px;color:#b0c8ff;margin:4px 0;line-height:1.5}.btn-copy{display:block;width:100%;padding:10px;background:linear-gradient(135deg,#306030,#408040);border:1px solid rgba(100,200,100,.4);border-radius:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-copy:hover{background:linear-gradient(135deg,#408040,#509050)}.title-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0a0a1e,#1a1a3e,#0a0a1e);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:40;pointer-events:all}.title-screen h1{font-size:28px;color:#b0c8ff;text-shadow:0 0 30px rgba(100,150,255,.5);margin-bottom:8px}.title-screen .subtitle{font-size:14px;color:#b4c8f099;margin-bottom:30px}.title-screen .description{font-size:12px;color:#b4c8f080;text-align:center;max-width:400px;line-height:1.6;margin-bottom:30px}.btn-start{padding:12px 40px;background:linear-gradient(135deg,#4060c0,#5070d0);border:1px solid rgba(100,150,255,.4);border-radius:8px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;animation:pulse-start 2s ease-in-out infinite}.btn-start:hover{background:linear-gradient(135deg,#5070d0,#6080e0);transform:scale(1.05)}@keyframes pulse-start{0%,to{box-shadow:0 0 10px #5078ff4d}50%{box-shadow:0 0 25px #5078ff99}}.progress-bar{position:absolute;top:10px;right:10px;display:flex;gap:4px}.progress-dot{width:8px;height:8px;border-radius:50%;background:#ffffff26;border:1px solid rgba(255,255,255,.2)}.progress-dot.completed{background:#64c86499;border-color:#64c864cc}.scrollbar-custom::-webkit-scrollbar{width:6px}.scrollbar-custom::-webkit-scrollbar-track{background:#ffffff0d}.scrollbar-custom::-webkit-scrollbar-thumb{background:#6496ff4d;border-radius:3px}