*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{width:100vw;height:100svh;overflow:hidden;background:#050008;font-family:system-ui,sans-serif;color:#f0e6f6;display:flex;justify-content:center;align-items:center}#app-shell{position:relative;width:100%;max-width:430px;height:100svh;overflow:hidden;background:#0d0010;box-shadow:0 0 60px #96007826;transform:translateZ(0)}#canvas-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#canvas-container canvas{width:100%!important;height:100%!important}#ui-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:16px;gap:16px}#mic-btn{pointer-events:all;position:fixed;top:70%;left:50%;transform:translate(-50%,-50%);z-index:60;background:#961e7880;border:2px solid rgba(200,80,180,.5);border-radius:50%;width:64px;height:64px;cursor:pointer;color:#f0e8f8;font-size:26px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s,box-shadow .2s;flex-shrink:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 0 20px #9600784d}#mic-btn:hover{background:#b43296a6;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 28px #b4329673}#mic-btn:active{transform:translate(-50%,-50%) scale(.95)}#mic-btn.listening{background:#dc1e64a6;box-shadow:0 0 32px #dc1e6480;animation:pulse 1s infinite}#mic-btn.processing{background:#6464dca6;box-shadow:0 0 32px #6464dc80;animation:pulse .6s infinite}.mic-error{position:fixed;top:calc(70% + 40px);left:50%;transform:translate(-50%);background:#c81e3ce6;color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:61}#dialog-box{pointer-events:all;width:100%;background:#08000fd9;border:1px solid rgba(180,50,150,.4);border-radius:16px;padding:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 30px #96007833}#char-name{font-size:13px;font-weight:600;color:#e090d0;margin-bottom:8px;display:flex;align-items:center;gap:8px}#char-text{font-size:14px;line-height:1.8;color:#f0e8f8;min-height:60px;margin-bottom:12px;letter-spacing:.02em}#input-area{display:flex;gap:8px;align-items:center;position:relative}#player-input{flex:1;background:#ffffff0d;border:1px solid rgba(180,50,150,.3);border-radius:24px;padding:10px 16px;color:#f0e8f8;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}#player-input:focus{border-color:#c850b4b3}#player-input::placeholder{color:#c896c866;font-size:12px}#player-input:disabled{opacity:.5}#send-btn{background:#961e7866;border:1px solid rgba(200,80,180,.4);border-radius:20px;height:40px;cursor:pointer;color:#f0e8f8;font-size:12px;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;padding:0 14px}#send-btn:hover{background:#b4329699}#send-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes pulse{0%,to{box-shadow:0 0 #dc1e6466}50%{box-shadow:0 0 0 8px #dc1e6400}}#debug-toggle{pointer-events:all;position:fixed;top:10px;right:10px;z-index:100;width:36px;height:36px;border-radius:50%;border:1px solid rgba(180,50,150,.25);background:#14001e73;color:#c896c880;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#debug-toggle:hover{background:#28003c99;color:#e090d0;border-color:#c850b466}#debug-toggle.active{background:#961e7866;color:#fff;border-color:#c850b499;transform:rotate(90deg)}#debug-panel{pointer-events:all;position:fixed;top:88px;right:10px;z-index:99;width:280px;max-height:65vh;overflow-y:auto;background:#0a00128c;border:1px solid rgba(180,50,150,.25);border-radius:14px;padding:14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 32px #0000004d,0 0 12px #9600781a;transition:opacity .2s,transform .2s;transform-origin:top right}#debug-panel::-webkit-scrollbar{width:4px}#debug-panel::-webkit-scrollbar-thumb{background:#b432964d;border-radius:2px}#debug-panel.closed{opacity:0;transform:scale(.9);pointer-events:none}.dbg-section{margin-bottom:14px}.dbg-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#c896c880;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.dbg-voice-grid{display:flex;flex-wrap:wrap;gap:6px}.dbg-voice-card{background:#ffffff0a;border:1px solid rgba(180,50,150,.2);border-radius:10px;padding:8px 6px;cursor:pointer;text-align:center;transition:all .15s;color:#f0e8f8;flex:0 0 calc(25% - 5px);min-width:60px}.dbg-voice-card:hover{background:#b4329626;border-color:#c850b466}.dbg-voice-card.selected{background:#961e7859;border-color:#dc50c8b3;box-shadow:0 0 12px #9600784d}.dbg-voice-name{display:block;font-size:11px;font-weight:600;margin-bottom:1px}.dbg-voice-desc{display:block;font-size:9px;color:#c896c899}.dbg-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.dbg-provider-btn{background:#ffffff0a;border:1px solid rgba(180,50,150,.2);border-radius:10px;padding:10px;cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:#c8aac8b3;transition:all .15s}.dbg-provider-btn:hover{background:#b4329626;color:#f0e8f8}.dbg-provider-btn.selected{background:#961e7866;border-color:#dc50c8b3;color:#fff;box-shadow:0 0 12px #9600784d}.dbg-hint{font-size:9px;color:#c896c859;margin-top:6px;line-height:1.4}.dbg-emotion-group{margin-bottom:8px}.dbg-group-label{display:block;font-size:9px;font-weight:500;color:#c896c859;margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}.dbg-emotion-grid{display:flex;flex-wrap:wrap;gap:4px}.dbg-emotion-btn{background:#ffffff0a;border:1px solid rgba(180,50,150,.2);border-radius:14px;padding:4px 10px;font-size:11px;cursor:pointer;color:#c8aac8cc;transition:all .15s;white-space:nowrap}.dbg-emotion-btn.hungry{border-color:#dc325033}.dbg-emotion-btn:hover{background:#b4329626;color:#f0e8f8}.dbg-emotion-btn.hungry:hover{background:#dc325026}.dbg-emotion-btn.selected{background:#961e7866;border-color:#dc50c899;color:#fff}.dbg-emotion-btn.hungry.selected{background:#dc325066;border-color:#ff506499}#dbg-speed-val{color:#e090d0;font-weight:400;font-size:11px}#dbg-speed{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:#b4329633;outline:none}#dbg-speed::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#e090d0;cursor:pointer;border:2px solid rgba(10,0,18,.9);box-shadow:0 0 8px #c850b466}#dbg-speed::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#e090d0;cursor:pointer;border:2px solid rgba(10,0,18,.9)}.dbg-toggle-label{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:#c896c880;cursor:pointer}.dbg-toggle-label input[type=checkbox]{accent-color:#e090d0;width:12px;height:12px;cursor:pointer}#dbg-instructions{width:100%;background:#ffffff08;border:1px solid rgba(180,50,150,.15);border-radius:8px;padding:8px 10px;color:#c8aac866;font-size:11px;font-family:inherit;line-height:1.5;resize:vertical;outline:none;transition:all .2s}#dbg-instructions.active{border-color:#c850b480;color:#f0e8f8;background:#ffffff0f}#dbg-instructions:focus{border-color:#c850b499}#dbg-instructions::placeholder{color:#c896c84d;font-size:10px}.dbg-test-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.dbg-test-btn{padding:10px;border-radius:10px;border:1px solid rgba(180,50,150,.3);background:#961e7840;color:#f0e8f8;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.dbg-test-btn:hover{background:#b4329673;border-color:#c850b499}.dbg-test-btn:active{transform:scale(.97)}.video-player{position:fixed;top:0;left:0;right:0;bottom:40%;display:none;align-items:center;justify-content:center;z-index:20;pointer-events:none;overflow:hidden}.video-player-video{position:absolute;top:0;left:50%;transform:translate(-50%);max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;transition:opacity .5s ease}#affinity-bar{position:fixed;top:8px;left:12px;right:56px;height:28px;display:flex;align-items:center;gap:8px;z-index:50;pointer-events:none}.affinity-bar-track{flex:1;height:8px;background:#280a3299;border-radius:4px;overflow:hidden;border:1px solid rgba(150,50,120,.3)}.affinity-bar-fill{height:100%;width:0%;background:#84a;border-radius:4px;transition:width .4s ease,background .4s ease}.affinity-bar-stage{font-size:13px;font-weight:700;color:#84a;min-width:24px;text-align:center;text-shadow:0 0 6px rgba(136,68,170,.5)}#satisfaction-bar{position:fixed;top:40px;left:12px;right:56px;height:28px;display:flex;align-items:center;gap:8px;z-index:50;pointer-events:none}.sat-bar-label{font-size:16px;min-width:24px}.sat-bar-track{flex:1;height:10px;background:#320a1499;border-radius:5px;overflow:hidden;border:1px solid rgba(200,50,80,.4)}.sat-bar-fill{height:100%;width:0%;background:#a14;border-radius:5px;transition:width .15s linear,background .3s ease}#satisfaction-bar.sat-bar-full .sat-bar-fill{animation:sat-full-glow .8s ease-in-out infinite}#satisfaction-bar.sat-bar-full .sat-bar-track{border-color:#f8b9}@keyframes sat-full-glow{0%,to{box-shadow:0 0 6px #ff88bb80}50%{box-shadow:0 0 16px #ff88bbe6,0 0 30px #f486}}#yandere-bar{position:fixed;left:8px;top:80px;bottom:45%;width:36px;display:flex;flex-direction:column;align-items:center;z-index:50;pointer-events:none}.yandere-bar-track{flex:1;width:14px;background:#280a3280;border-radius:7px;overflow:hidden;border:1px solid rgba(150,50,120,.3);position:relative}.yandere-bar-fill{position:absolute;bottom:0;left:0;right:0;height:0%;background:#84a;border-radius:7px;transition:height .4s ease}.yandere-bar-label{font-size:14px;margin-top:4px}#yandere-bar.yandere-mode .yandere-bar-fill{background:#f48;box-shadow:0 0 12px #f489;animation:yandere-glow 1.5s ease-in-out infinite}#yandere-bar.yandere-mode .yandere-bar-label{animation:yandere-glow-text 1.5s ease-in-out infinite}#yandere-bar.yandere-draining .yandere-bar-fill{background:#f48;animation:yandere-sparkle .6s ease-in-out infinite}#yandere-bar.yandere-draining .yandere-bar-label{animation:yandere-sparkle-text .6s ease-in-out infinite}@keyframes yandere-glow{0%,to{box-shadow:0 0 8px #f486}50%{box-shadow:0 0 20px #f48c,0 0 40px #ff44884d}}@keyframes yandere-glow-text{0%,to{text-shadow:0 0 4px rgba(255,68,136,.3)}50%{text-shadow:0 0 12px rgba(255,68,136,.7)}}@keyframes yandere-sparkle{0%,to{box-shadow:0 0 8px #f489;filter:brightness(1)}25%{box-shadow:0 0 25px #fffc,0 0 40px #f489;filter:brightness(1.4)}50%{box-shadow:0 0 12px #ff448880;filter:brightness(1)}75%{box-shadow:0 0 30px #ffc8ffe6,0 0 50px #ff4488b3;filter:brightness(1.5)}}@keyframes yandere-sparkle-text{0%,to{text-shadow:0 0 4px rgba(255,68,136,.4)}25%{text-shadow:0 0 15px rgba(255,255,255,.8)}50%{text-shadow:0 0 6px rgba(255,68,136,.4)}75%{text-shadow:0 0 18px rgba(255,200,255,.9)}}#debug-speech-btn{display:none}#debug-speech-btn:hover{opacity:.85;background:#28b43c99;border-color:#50dc6480}#gift-btn{align-self:flex-end;padding:8px 20px;border:2px solid rgba(180,80,160,.5);border-radius:20px;background:#64145099;color:#f0e6f6;font-size:14px;cursor:pointer;z-index:45;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .2s;pointer-events:auto}#gift-btn:hover{background:#8c286eb3;border-color:#dc64b499;transform:scale(1.05)}.gift-selector{position:fixed;top:0;right:0;bottom:0;left:0;background:#08000feb;display:flex;flex-direction:column;align-items:center;padding:20px;z-index:150;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.gift-selector-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:20px;color:#d0b0e0;font-size:18px}.gift-close-btn{background:none;border:1px solid rgba(180,80,160,.5);color:#d0b0e0;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:16px}.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:400px;width:100%}.gift-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:#3c0f32b3;border:2px solid rgba(150,50,120,.4);border-radius:12px;cursor:pointer;transition:all .2s;color:#f0e6f6}.gift-card:hover{background:#641e50b3;border-color:#dc64b499;transform:scale(1.05)}.gift-emoji{font-size:36px}.gift-name{font-size:13px;color:#c0a0d0}.tap-grid{position:fixed;bottom:180px;left:50%;transform:translate(-50%);display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(90vw,360px);z-index:55;pointer-events:auto;max-height:40vh}.tap-option{padding:18px 12px;border:2px solid rgba(150,50,120,.5);border-radius:12px;background:#280a32cc;color:#f0e6f6;font-size:20px;cursor:pointer;transition:all .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}.tap-option:hover{background:#501446cc;border-color:#c850a099}.tap-option:active{transform:scale(.96)}.tap-option.tap-correct{background:#28a05099;border-color:#50dc78b3;animation:tapFlash .4s ease}.tap-option.tap-incorrect{background:#b4282899;border-color:#dc5050b3;animation:tapShake .4s ease}.tap-option.tap-hint{border-color:#50dc78cc;box-shadow:0 0 12px #50dc7866}.tap-option-jp{font-family:Noto Sans JP,system-ui,sans-serif}@keyframes tapFlash{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes tapShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}#lesson-ui{position:fixed;top:55%;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;pointer-events:none;overflow:hidden}#lesson-ui>*{pointer-events:auto}.lesson-teaching-moment{text-align:center;background:#280a32cc;padding:16px 24px;border-radius:12px;border:1px solid rgba(150,50,120,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.teaching-japanese{font-size:28px;font-weight:700;color:#f0e6f6;margin-bottom:4px;font-family:Noto Sans JP,system-ui,sans-serif}.teaching-reading{font-size:16px;color:#c0a0d0;margin-bottom:4px}.teaching-english{font-size:14px;color:#9080a0}.lesson-progress{display:flex;gap:12px;font-size:13px;color:#a080b0}.lesson-phase-label{font-weight:600;color:#c0a0d0}.lesson-talk-area{text-align:center;margin-top:8px}.talk-prompt-text{font-size:18px;color:#d0b0e0;margin-bottom:8px;font-family:Noto Sans JP,system-ui,sans-serif}.talk-rep-counter{font-size:14px;color:#a080b0;margin-bottom:4px}.talk-accuracy-feedback{font-size:15px;font-weight:600;min-height:20px;transition:opacity .3s}.accuracy-perfect{color:#fc4}.accuracy-average{color:#8c6}.accuracy-poor{color:#c84}.accuracy-fail{color:#c44}.lesson-back-btn-container{position:absolute;top:0;left:50%;transform:translate(-50%);width:min(90vw,400px);display:flex;justify-content:flex-end}.lesson-back-btn{background:#3c0f3299;border:1px solid rgba(150,50,120,.4);border-radius:8px;color:#a080b0;padding:6px 16px;font-size:13px;cursor:pointer;transition:all .2s;pointer-events:auto}.lesson-back-btn:hover{background:#641e5099;color:#d0b0e0}.mode-lesson #dialog-box{position:fixed;bottom:40%;left:50%;transform:translate(-50%);width:min(90vw,400px);text-align:center;background:#08000fa6;border:none;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mode-lesson #char-text{text-align:center;min-height:auto;margin-bottom:0}.mode-lesson #input-area{justify-content:center;margin-top:10px}.mode-lesson #mic-btn{top:70%}.mode-yandere #dialog-box{border-color:#c81e3c80;background:#140005e6}.mode-yandere #char-name{color:#f48}.mode-yandere #player-input{border-color:#c81e3c66}.mode-yandere #send-btn{background:#b41e3c80}.mode-yandere #send-btn:hover{background:#dc325099}