*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#fff;-webkit-user-select:none;user-select:none;background:#000;flex-direction:column;align-items:center;height:100dvh;font-family:-apple-system,sans-serif;display:flex;overflow:hidden}.canvas-section{flex-shrink:0;justify-content:center;align-items:center;padding-top:56px;display:flex}.controls-section{flex-direction:column;flex:1;align-items:center;width:100%;padding:12px 0 24px;display:flex;overflow-y:auto}.menu-btn{cursor:pointer;z-index:100;background:#ffffff0d;border:1px solid #333;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;transition:border-color .15s,background .15s;display:flex;position:fixed;top:16px;right:20px}.menu-btn:hover{background:#8b4db81a;border-color:#8b4db8}.menu-btn span{background:#888;border-radius:2px;width:18px;height:1.5px;transition:background .15s;display:block}.menu-btn:hover span{background:#c084fc}body.bg-light .menu-btn{background:#0000000f;border-color:#ccc}body.bg-light .menu-btn span{background:#444}body.bg-light .menu-btn:hover{background:#8b4db81a;border-color:#8b4db8}body.bg-light .menu-btn:hover span{background:#8b4db8}.menu-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;opacity:0;pointer-events:none;background:#000000b3;justify-content:flex-end;align-items:flex-start;transition:opacity .2s;display:flex;position:fixed;inset:0}.menu-overlay.open{opacity:1;pointer-events:all}.menu-panel{background:#111;border-left:1px solid #222;flex-direction:column;gap:8px;width:220px;min-height:100dvh;padding:24px 20px;transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;transform:translate(100%)}.menu-overlay.open .menu-panel{transform:translate(0)}.menu-title{color:#444;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;margin-bottom:8px;font-size:11px}.menu-item{color:#888;border:1px solid #0000;border-radius:10px;padding:12px 14px;font-size:14px;text-decoration:none;transition:color .15s,border-color .15s,background .15s;display:block}.menu-item:hover{color:#c084fc;background:#8b4db81a;border-color:#8b4db850}.menu-item.active{color:#c084fc;background:#8b4db81f;border-color:#8b4db8}.menu-close{color:#555;cursor:pointer;background:0 0;border:none;padding:4px;font-size:20px;line-height:1;position:absolute;top:16px;right:16px}.menu-close:hover{color:#fff}.menu-divider{border-top:1px solid #222;margin:8px 0}.menu-toggle-row{justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.menu-toggle-label{color:#888;font-size:13px}.toggle-switch{cursor:pointer;width:40px;height:22px;display:inline-block;position:relative}.toggle-switch input{display:none}.toggle-track{background:#333;border-radius:99px;transition:background .2s;position:absolute;inset:0}.toggle-track:after{content:"";background:#666;border-radius:50%;width:16px;height:16px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle-switch input:checked+.toggle-track{background:#8b4db866}.toggle-switch input:checked+.toggle-track:after{background:#c084fc;transform:translate(18px)}.menu-section-label{color:#444;text-transform:uppercase;letter-spacing:.08em;padding:4px 14px 6px;font-size:11px}.bg-swatches{grid-template-columns:repeat(5,30px);gap:10px;padding:0 14px 10px;display:grid}.bg-swatch{cursor:pointer;border:2px solid #ffffff1a;border-radius:50%;width:30px;height:30px;transition:border-color .15s,transform .15s}.bg-swatch:hover{transform:scale(1.1)}.bg-swatch.active{border-color:#c084fc}.bg-swatch[data-bg=\#0a0a0a]{background:#0a0a0a}.bg-swatch[data-bg=\#0f1621]{background:#0f1621}.bg-swatch[data-bg=\#111a14]{background:#111a14}.bg-swatch[data-bg=\#16101f]{background:#16101f}.bg-swatch[data-bg=\#1a1510]{background:#1a1510}.bg-swatch[data-bg=\#f8f8f8]{background:#f8f8f8;border-color:#ccc}.bg-swatch[data-bg=\#fdf8f0]{background:#fdf8f0;border-color:#ccc}.bg-swatch[data-bg=\#e5e5e5]{background:#e5e5e5;border-color:#ccc}.bg-swatch[data-bg=\#e8f0fc]{background:#e8f0fc;border-color:#ccc}.bg-swatch[data-bg=\#e8f5ee]{background:#e8f5ee;border-color:#ccc}#riveCanvas{border-radius:20px;width:360px;height:360px;display:block}.user-camera{object-fit:cover;opacity:0;background:#ffffff0d;border:1px solid #ffffff26;border-radius:20px;transition:opacity .3s;display:block;transform:scaleX(-1)}.user-camera.active{opacity:1}.voice-bar{align-items:center;gap:8px;margin-top:12px;display:flex}.voice-bar label{color:#555;font-size:12px}#voiceSelect{color:#ccc;cursor:pointer;background:#ffffff0d;border:1px solid #333;border-radius:8px;outline:none;min-width:140px;padding:4px 10px;font-size:13px}#voiceSelect:focus{border-color:#8b4db8}.personality-bar{flex-shrink:0;gap:8px;margin-top:14px;display:flex}.personality-btn{color:#555;cursor:pointer;background:#ffffff0a;border:1px solid #333;border-radius:20px;padding:5px 16px;font-size:12px;transition:color .15s,border-color .15s,background .15s}.personality-btn.active{color:#c084fc;background:#8b4db826;border-color:#8b4db8}.level-bar{flex-shrink:0;gap:6px;margin-top:6px;display:flex}.level-btn{color:#555;cursor:pointer;background:#ffffff0a;border:1px solid #333;border-radius:20px;padding:4px 13px;font-size:11px;transition:color .15s,border-color .15s,background .15s}.level-btn.active{color:#67e8f9;background:#0e749026;border-color:#0e7490}.lang-bar{flex-shrink:0;gap:6px;margin-top:6px;display:flex}.lang-btn{color:#555;cursor:pointer;background:#ffffff0a;border:1px solid #333;border-radius:20px;padding:4px 16px;font-size:11px;transition:color .15s,border-color .15s,background .15s}.lang-btn.active{color:#fbbf24;background:#92400e26;border-color:#92400e}#statusText{color:#555;letter-spacing:.08em;flex-shrink:0;min-height:1.4em;margin-top:10px;font-size:13px}#micBtn{cursor:pointer;touch-action:none;background:#8b4db81f;border:2.5px solid #8b4db8;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;margin-top:20px;transition:background .2s,border-color .2s,transform .1s;display:flex}#micBtn.session-active{background:#dc262633;border-color:#ef4444}#micBtn svg{fill:#c084fc;width:30px;height:30px;transition:fill .2s}#micBtn.session-active svg{fill:#ef4444}#stopIcon,#micBtn.session-active #micIcon{display:none}#micBtn.session-active #stopIcon{display:block}#transcript{flex-direction:column;gap:5px;width:360px;max-height:150px;margin-top:16px;padding:0 4px;display:flex;overflow-y:auto}.transcript-line{border-radius:10px;max-width:88%;padding:5px 10px;font-size:13px;line-height:1.5}.transcript-line.user{color:#d8b4fe;background:#8b4db833;align-self:flex-end}.result-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:300;opacity:0;pointer-events:none;background:#000000bf;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.result-overlay.open{opacity:1;pointer-events:all}.result-dialog{background:#111;border:1px solid #2a2a2a;border-radius:20px;flex-direction:column;gap:18px;width:320px;max-height:82dvh;padding:24px 20px 20px;transition:transform .25s cubic-bezier(.34,1.4,.64,1);display:flex;overflow-y:auto;transform:scale(.9)}.result-overlay.open .result-dialog{transform:scale(1)}.result-header{justify-content:space-between;align-items:center;display:flex}.result-title{color:#666;letter-spacing:.05em;font-size:13px}.result-close{color:#444;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:18px;line-height:1;transition:color .15s}.result-close:hover{color:#fff}.result-score{text-align:center;padding:8px 0}.score-number{color:#c084fc;letter-spacing:-2px;font-size:72px;font-weight:700;line-height:1}.score-max{color:#555;font-size:20px;font-weight:400}.score-label{color:#555;letter-spacing:.08em;margin-top:6px;font-size:12px}.score-comment{color:#888;margin-top:10px;font-size:13px;font-style:italic;line-height:1.6}.result-divider{border:none;border-top:1px solid #222;margin:0}.result-phrases-title{color:#444;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;font-size:11px}.result-phrases{flex-direction:column;gap:8px;display:flex}.phrase-card{background:#ffffff08;border:1px solid #222;border-radius:12px;padding:11px 13px;animation:.3s both fadeIn}.phrase-card-top{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px;display:flex}.phrase-card .phrase-text{color:#c084fc;flex:1;font-size:13px;font-style:italic}.phrase-save-btn{color:#444;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:16px;line-height:1;transition:color .15s}.phrase-save-btn:hover,.phrase-save-btn.saved{color:#c084fc}.phrase-card .phrase-meaning{color:#777;font-size:12px;line-height:1.5}.phrase-loading{color:#444;text-align:center;padding:8px;font-size:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.transcript-line.model{color:#e5e7eb;background:#ffffff12;align-self:flex-start}@media (width>=768px){#riveCanvas{width:600px;height:600px}#statusText{font-size:15px}#transcript{width:600px;max-height:220px}.transcript-line{font-size:14px}#micBtn{width:88px;height:88px}#micBtn svg{width:38px;height:38px}.result-dialog{width:440px}.score-number{font-size:88px}}@media (width>=1200px){#riveCanvas{width:720px;height:720px}#transcript{width:720px}}body.bg-light #statusText{color:#666}body.bg-light .personality-btn{color:#888;background:#0000000a;border-color:#ccc}body.bg-light .personality-btn.active{color:#8b4db8;background:#8b4db81a;border-color:#8b4db8}body.bg-light .level-btn{color:#888;background:#0000000a;border-color:#ccc}body.bg-light .level-btn.active{color:#0e7490;background:#0e74901a;border-color:#0e7490}body.bg-light .lang-btn{color:#888;background:#0000000a;border-color:#ccc}body.bg-light .lang-btn.active{color:#92400e;background:#92400e1a;border-color:#92400e}body.bg-light #micBtn{background:#8b4db81a;border-color:#8b4db8;box-shadow:0 2px 12px #8b4db826}body.bg-light .transcript-line.model{color:#333;background:#00000012}body.bg-light .transcript-line.user{color:#6b21a8;background:#8b4db826}.hp-side{flex-direction:column;flex:0 0 44px;align-items:center;gap:8px;display:none}#battleHud.active .hp-side{display:flex}.hp-label{letter-spacing:.12em;color:#fffc;text-shadow:0 1px 4px #000000b3;flex-shrink:0;font-size:12px;font-weight:700}.hp-track{background:#ffffff1a;border:2px solid #fff6;border-radius:14px;flex:auto;width:26px;min-height:40px;position:relative;overflow:hidden}.hp-track:before{content:"";background:#fff6;border-radius:3px 3px 0 0;width:14px;height:8px;position:absolute;top:-9px;left:50%;transform:translate(-50%)}.hp-fill{border-radius:10px;width:100%;height:100%;transition:height .35s;position:absolute;bottom:0;left:0;right:0}.mel-hp{background:linear-gradient(#f97316,#ef4444)}.user-hp{background:linear-gradient(#8b4db8,#818cf8)}.hp-num{color:#fff;text-shadow:0 1px 4px #000000b3;flex-shrink:0;font-size:14px;font-weight:800}@media (width>=768px){.hp-side{flex-basis:56px}.hp-track{width:30px}}@keyframes damage-float{0%{opacity:1;transform:translateY(0)scale(1)}15%{transform:translateY(-6px)scale(1.25)}to{opacity:0;transform:translateY(-52px)scale(.85)}}.damage-number{pointer-events:none;z-index:60;text-shadow:0 2px 10px #000000e6;letter-spacing:-1px;font-size:28px;font-style:italic;font-weight:900;animation:.95s ease-out forwards damage-float;position:fixed}.damage-number.mel{color:#ef4444}.damage-number.user{color:#818cf8}.damage-number.big{font-size:44px}.damage-number.crit{text-shadow:0 0 18px #fbbf24cc,0 2px 10px #000000e6;font-size:64px}@keyframes screen-shake-light{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(2px,2px)}}@keyframes screen-shake-heavy{0%,to{transform:translate(0)}10%{transform:translate(-10px,6px)}30%{transform:translate(9px,-5px)}50%{transform:translate(-8px,-4px)}70%{transform:translate(6px,5px)}90%{transform:translate(-4px,2px)}}body.shake-light{animation:.3s ease-out screen-shake-light}body.shake-heavy{animation:.45s ease-out screen-shake-heavy}@keyframes screen-flash-fade{0%{opacity:.75}to{opacity:0}}.screen-flash{pointer-events:none;z-index:350;animation:.35s ease-out forwards screen-flash-fade;position:fixed;inset:0}.screen-flash.white{background:#fff}.screen-flash.red{background:#ef4444}@keyframes crit-cutin{0%{opacity:0;transform:translate(-50%,-50%)skew(-12deg)scaleX(0)}12%{opacity:1;transform:translate(-50%,-50%)skew(-12deg)scaleX(1.05)}18%{transform:translate(-50%,-50%)skew(-12deg)scaleX(1)}80%{opacity:1}to{opacity:0;transform:translate(-46%,-50%)skew(-12deg)scaleX(1)}}.crit-cutin{color:#fff;letter-spacing:2px;white-space:nowrap;z-index:360;pointer-events:none;text-shadow:0 2px 8px #0009;background:linear-gradient(100deg,#0000,#ef4444eb 12% 88%,#0000);padding:10px 60px;font-size:34px;font-style:italic;font-weight:900;animation:1s ease-out forwards crit-cutin;position:fixed;top:38%;left:50%}@keyframes ko-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(3)}35%{opacity:1;transform:translate(-50%,-50%)scale(.9)}50%{transform:translate(-50%,-50%)scale(1.06)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.ko-text{letter-spacing:-4px;z-index:370;pointer-events:none;font-size:110px;font-style:italic;font-weight:900;transition:opacity .4s;animation:.55s cubic-bezier(.34,1.4,.64,1) both ko-pop;position:fixed;top:42%;left:50%}.ko-text.win{color:#fbbf24;text-shadow:0 0 30px #fbbf2499,0 4px 20px #000c}.ko-text.lose{color:#ef4444;text-shadow:0 0 30px #ef444499,0 4px 20px #000c}.ko-text.out{opacity:0}@keyframes ko-particle-fly{0%{opacity:1;transform:translate(0)rotate(0)}to{transform:translate(var(--dx), var(--dy)) rotate(var(--rot));opacity:0}}.ko-particle{z-index:365;pointer-events:none;border-radius:2px;width:10px;height:10px;animation:1s ease-out both ko-particle-fly;position:fixed;top:42%;left:50%}.genre-bar{flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:6px;max-width:320px;margin-top:6px;display:flex}.genre-btn{color:#555;cursor:pointer;background:#ffffff0a;border:1px solid #333;border-radius:20px;padding:4px 13px;font-size:11px;transition:color .15s,border-color .15s,background .15s}.genre-btn.active{color:#fb923c;background:#c2410c26;border-color:#c2410c}body.bg-light .genre-btn{color:#888;background:#0000000a;border-color:#ccc}body.bg-light .genre-btn.active{color:#c2410c;background:#c2410c1a;border-color:#c2410c}.battle-result-overlay{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:400;opacity:0;pointer-events:none;background:#000000eb;flex-direction:column;justify-content:center;align-items:center;gap:20px;transition:opacity .4s;display:flex;position:fixed;inset:0}.battle-result-overlay.open{opacity:1;pointer-events:all}@keyframes result-pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.battle-result-title{letter-spacing:-2px;font-size:60px;font-weight:900;line-height:1;animation:.5s cubic-bezier(.34,1.4,.64,1) both result-pop}.battle-result-title.win{color:#c084fc}.battle-result-title.lose{color:#ef4444}.battle-result-comment{color:#777;text-align:center;max-width:260px;font-size:15px;font-style:italic;line-height:1.6}.battle-result-actions{gap:12px;margin-top:8px;display:flex}.battle-btn{cursor:pointer;border:1.5px solid;border-radius:99px;padding:11px 26px;font-size:14px;font-weight:600;transition:all .15s}.battle-btn-primary{color:#c084fc;background:#8b4db833;border-color:#8b4db8}.battle-btn-primary:hover{background:#8b4db859}.battle-btn-secondary{color:#555;background:0 0;border-color:#333}.battle-btn-secondary:hover{color:#aaa;border-color:#555}.text-input-row{flex-shrink:0;gap:8px;width:320px;margin-top:12px;display:flex}#textInput{color:#e5e7eb;background:#ffffff0d;border:1px solid #333;border-radius:12px;outline:none;flex:1;padding:10px 14px;font-size:14px;transition:border-color .15s}#textInput:focus{border-color:#8b4db8}#textInput::placeholder{color:#444}#textSendBtn{color:#c084fc;cursor:pointer;background:#8b4db826;border:1px solid #8b4db8;border-radius:12px;flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:600;transition:background .15s}#textSendBtn:hover{background:#8b4db84d}#textSendBtn:disabled{opacity:.35;cursor:default}body.bg-light #textInput{color:#222;background:#0000000a;border-color:#ccc}body.bg-light #textInput::placeholder{color:#aaa}.mode-select{z-index:150;opacity:1;background:radial-gradient(at 50% 0,#1b1226 0%,#0a0a0a 60%);justify-content:center;transition:opacity .25s;display:flex;position:fixed;inset:0;overflow-y:auto}.mode-select.hidden{opacity:0;pointer-events:none}.mode-select-inner{flex-direction:column;align-items:center;gap:6px;width:min(400px,92vw);margin:auto 0;padding:200px 0 40px;display:flex}.home-avatar{background:radial-gradient(at 50% 30%,#8b4db847,#0000 70%);border:1px solid #8b4db859;border-radius:28px;width:132px;height:132px;margin-bottom:4px;overflow:hidden}.home-avatar #riveCanvas{border-radius:0;width:100%;height:100%;display:block}.mode-select-title{letter-spacing:.14em;background:linear-gradient(120deg,#c084fc,#818cf8);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:900}.mode-select-sub{color:#666;margin-bottom:40px;font-size:13px}.mode-cards{flex-direction:column;gap:12px;width:100%;display:flex}.mode-card{cursor:pointer;text-align:left;background:#ffffff0a;border:1px solid #2a2a2a;border-radius:16px;align-items:center;gap:16px;width:100%;padding:16px 18px;transition:border-color .15s,background .15s,transform .1s;display:flex}.mode-card:hover{background:#8b4db81a;border-color:#8b4db8;transform:translateY(-1px)}.mode-card:active{transform:translateY(0)}.mode-card-icon{flex-shrink:0;font-size:28px}.mode-card-body{flex-direction:column;gap:3px;display:flex}.mode-card-name{color:#e5e7eb;font-size:15px;font-weight:700}.mode-card-desc{color:#777;font-size:12px;line-height:1.5}.mode-back-btn{color:#888;cursor:pointer;z-index:100;background:#ffffff0d;border:1px solid #333;border-radius:10px;align-items:center;gap:7px;height:40px;padding:0 14px 0 10px;font-size:12px;transition:border-color .15s,color .15s,background .15s;display:flex;position:fixed;top:16px;left:20px}.mode-back-btn:hover{color:#c084fc;background:#8b4db81a;border-color:#8b4db8}.mode-back-arrow{font-size:14px}body.bg-light .mode-back-btn{color:#555;background:#0000000f;border-color:#ccc}.meter-hud{z-index:50;pointer-events:none;background:linear-gradient(#000000d9 55%,#0000);padding:72px 16px 18px;display:none;position:fixed;top:0;left:0;right:0}.meter-hud.active{display:block}.meter-row{align-items:center;gap:10px;max-width:420px;margin:0 auto;display:flex}.meter-label{letter-spacing:.1em;color:#999;flex-shrink:0;font-size:11px;font-weight:700}.meter-track{background:#ffffff14;border-radius:99px;flex:1;height:8px;overflow:hidden}.meter-fill{border-radius:99px;height:100%;transition:width .45s cubic-bezier(.34,1.2,.64,1)}.meter-fill.charm{background:linear-gradient(90deg,#f472b6,#fb7185)}.meter-fill.vibe{background:linear-gradient(90deg,#fbbf24,#fb923c)}.meter-num{color:#999;text-align:center;flex-shrink:0;width:26px;font-size:12px;font-weight:700}.damage-number.meter-charm{color:#f472b6}.damage-number.meter-vibe{color:#fbbf24}.damage-number.minus{color:#64748b}.stage{padding-top:72px;padding-bottom:var(--bottom-panel-height,215px);z-index:0;flex-direction:column;display:flex;position:fixed;inset:0}.stage-half{flex:1 1 0;gap:10px;min-height:0;padding:14px 16px;display:flex}.view-slot{flex:1;justify-content:center;align-items:center;min-width:0;height:100%;min-height:0;display:flex;container-type:size}.view-square{width:min(100cqw,100cqh);height:min(100cqw,100cqh);position:relative}.latest-message{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f2f2f5;text-align:center;-webkit-line-clamp:3;background:#0a0a0e8c;border-radius:12px;-webkit-box-orient:vertical;padding:8px 12px;font-size:13px;line-height:1.4;display:-webkit-box;position:absolute;bottom:6%;left:6%;right:6%;overflow:hidden}.latest-message:empty{display:none}body.bg-light .latest-message{color:#222;background:#ffffffbf}.stage #riveCanvas,.stage .user-camera{border-radius:20px;width:100%;height:100%;transition:opacity .3s}body:not(.mode-active) .stage-half-user{display:none}@media (width>=768px){.stage{flex-direction:row}}.bottom-panel{z-index:40;padding:46px 12px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none;background:linear-gradient(#0000,#000000d1 45%);flex-direction:column;align-items:center;gap:4px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-panel>*{pointer-events:auto}body.bg-light .bottom-panel{background:linear-gradient(#0000,#ffffffdb 45%)}.bottom-panel #statusText{color:#999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border:1px solid #ffffff17;border-radius:99px;align-items:center;gap:7px;min-height:0;margin-top:8px;padding:5px 14px;font-size:12px;display:flex}.bottom-panel #statusText:before{content:"";background:#555;border-radius:50%;flex-shrink:0;width:7px;height:7px}#statusText[data-state=listening]:before{background:#4ade80;animation:1.6s ease-in-out infinite status-pulse}#statusText[data-state=speaking]:before{background:#c084fc;animation:.9s ease-in-out infinite status-pulse}#statusText[data-state=thinking]:before{background:#fbbf24;animation:1.2s ease-in-out infinite status-pulse}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}body.bg-light .bottom-panel #statusText{color:#666;background:#0000000d;border-color:#0000001a}body:not(.in-session) .bottom-panel{display:none}#stopBtn{cursor:pointer;background:#dc262633;border:2.5px solid #ef4444;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;margin-top:8px;transition:background .2s,transform .1s;display:flex}#stopBtn:hover{background:#dc262652}#stopBtn svg{fill:#ef4444;width:22px;height:22px}body.in-session .menu-btn,body.in-session .mode-back-btn{opacity:0;pointer-events:none}.menu-btn,.mode-back-btn{transition:opacity .25s,border-color .15s,color .15s,background .15s}.speaker{margin-right:6px;font-weight:700}.speaker-0{color:#fb923c}.speaker-1{color:#f472b6}.speaker-2{color:#4ade80}.account-chip{color:#888;cursor:pointer;z-index:150;background:#ffffff0d;border:1px solid #333;border-radius:10px;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:13px;transition:color .15s,border-color .15s;display:flex;position:fixed;top:16px;right:68px}.account-chip:hover{color:#c084fc;border-color:#8b4db8}body:not(.mode-active) .account-chip{right:calc(50vw - min(200px,46vw))}body.bg-light .account-chip{color:#555;background:#0000000f;border-color:#ccc}.account-chip-sub{color:#555;font-size:11px}body.bg-light .account-chip-sub{color:#999}.account-chip-badge{color:#fbbf24}.account-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:400;opacity:0;pointer-events:none;background:#000000bf;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.account-overlay.open{opacity:1;pointer-events:all}.account-dialog{color:#ccc;background:#111;border:1px solid #2a2a2a;border-radius:20px;flex-direction:column;gap:12px;width:320px;max-height:82dvh;padding:28px 24px 24px;transition:transform .25s cubic-bezier(.34,1.4,.64,1);display:flex;position:relative;overflow-y:auto;transform:scale(.9)}.account-overlay.open .account-dialog{transform:scale(1)}.account-close{color:#444;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:18px;line-height:1;position:absolute;top:14px;right:16px}.account-close:hover{color:#888}.account-title{color:#eee;margin-bottom:4px;padding-right:24px;font-size:16px;font-weight:600}.account-note{color:#888;font-size:13px;line-height:1.6}.account-error{color:#f87171;font-size:12px;line-height:1.5}.account-input{color:#eee;background:#1a1a1a;border:1px solid #333;border-radius:10px;outline:none;height:44px;padding:0 14px;font-size:14px;transition:border-color .15s}.account-input:focus{border-color:#8b4db8}.account-btn{color:#ccc;cursor:pointer;background:#ffffff0d;border:1px solid #333;border-radius:10px;justify-content:center;align-items:center;gap:8px;height:44px;font-size:14px;transition:border-color .15s,background .15s;display:flex}.account-btn:hover{border-color:#555}.account-btn-primary{color:#fff;background:#8b4db8;border-color:#8b4db8;font-weight:600}.account-btn-primary:hover{background:#9d5fd0;border-color:#9d5fd0}.account-btn-google{color:#333;background:#fff;border-color:#fff;font-weight:500}.account-btn-google:hover{background:#eee}.account-link{color:#c084fc;cursor:pointer;background:0 0;border:none;padding:4px;font-size:13px}.account-link:hover{text-decoration:underline}.account-divider{color:#555;align-items:center;gap:10px;font-size:11px;display:flex}.account-divider:before,.account-divider:after{content:"";background:#2a2a2a;flex:1;height:1px}.setup-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60;background:#0000008c;justify-content:center;align-items:center;padding:88px 16px 24px;display:none;position:fixed;inset:0}body.mode-active:not(.in-session) .setup-overlay{display:flex}body.bg-light .setup-overlay{background:#ffffff8c}.setup-panel{background:#111111eb;border:1px solid #2a2a2a;border-radius:22px;flex-direction:column;align-items:center;gap:14px;width:min(400px,100%);max-height:100%;padding:26px 24px 24px;animation:.25s cubic-bezier(.34,1.4,.64,1) setup-pop;display:flex;overflow-y:auto}@keyframes setup-pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}body.bg-light .setup-panel{background:#fffffff0;border-color:#ddd}.setup-title{color:#eee;letter-spacing:.04em;margin-bottom:2px;font-size:17px;font-weight:700}body.bg-light .setup-title{color:#222}.setup-row{align-items:center;gap:12px;width:100%;display:flex}.setup-row-label{color:#666;letter-spacing:.06em;text-align:right;flex-shrink:0;width:44px;font-size:11px}.setup-row .personality-bar,.setup-row .level-bar,.setup-row .lang-bar,.setup-row .genre-bar{flex-wrap:wrap;flex:1;justify-content:flex-start;margin-top:0}.setup-panel .personality-btn,.setup-panel .level-btn,.setup-panel .lang-btn,.setup-panel .genre-btn{padding:6px 15px;font-size:12px}.setup-panel #micBtn{margin-top:10px}.setup-hint{color:#888;font-size:12px}body.bg-light .setup-hint{color:#777}.sub-cards{gap:12px;width:100%;display:flex}.sub-card{cursor:pointer;background:#ffffff08;border:1px solid #222;border-radius:14px;flex:1;justify-content:center;align-items:center;gap:8px;padding:13px 10px;transition:border-color .15s,background .15s,transform .1s;display:flex;position:relative}.sub-card:hover{background:#8b4db814;border-color:#8b4db8;transform:translateY(-1px)}.sub-card-icon{font-size:17px}.sub-card-name{color:#aaa;font-size:13px;font-weight:600}.sub-card-badge{color:#c084fc;background:#8b4db840;border:1px solid #8b4db8;border-radius:99px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;display:inline-flex}.sub-card-soon{letter-spacing:.08em;color:#fbbf24;border:1px solid #fbbf2473;border-radius:99px;padding:2px 7px;font-size:9px;font-weight:700}.book-overlay{z-index:160;background:radial-gradient(at 50% 0,#1b1226 0%,#0a0a0a 60%);justify-content:center;display:none;position:fixed;inset:0}.book-overlay.open{display:flex}.book-screen{flex-direction:column;width:min(480px,100vw);height:100dvh;padding:16px 16px 0;display:flex}.book-header{justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;display:flex}.book-back{color:#888;cursor:pointer;background:#ffffff0d;border:1px solid #333;border-radius:10px;flex-shrink:0;width:40px;height:40px;font-size:16px;transition:border-color .15s,color .15s}.book-back:hover{color:#c084fc;border-color:#8b4db8}.book-title{color:#eee;letter-spacing:.04em;font-size:16px;font-weight:700}.book-review-btn{color:#fff;cursor:pointer;background:#8b4db8;border:none;border-radius:99px;height:34px;padding:0 16px;font-size:13px;font-weight:600;transition:background .15s}.book-review-btn:hover{background:#9d5fd0}.book-body{flex-direction:column;flex:1;gap:10px;padding-bottom:24px;display:flex;overflow-y:auto}.book-stats{color:#666;padding:2px 2px 6px;font-size:12px}.book-list{flex-direction:column;gap:10px;display:flex}.book-empty{text-align:center;color:#666;margin-top:40%;font-size:13px;line-height:1.9}.book-card{background:#ffffff0a;border:1px solid #2a2a2a;border-radius:14px;align-items:center;gap:10px;padding:14px;display:flex}.book-card.learned{opacity:.55}.book-card-main{flex:1;min-width:0}.book-card-phrase{color:#e5e7eb;font-size:14px;font-weight:600;line-height:1.5}.book-card-meaning{color:#888;margin-top:3px;font-size:12px;line-height:1.5}.book-card-actions{flex-shrink:0;gap:4px;display:flex}.book-card-btn{color:#777;cursor:pointer;background:0 0;border:1px solid #2a2a2a;border-radius:8px;width:32px;height:32px;font-size:13px;transition:border-color .15s,color .15s}.book-card-btn:hover{color:#c084fc;border-color:#8b4db8}.book-card-del:hover{color:#ef4444;border-color:#ef4444}.book-card.learned .book-card-btn[data-act=learned]{color:#4ade80;border-color:#4ade8066}.review-progress{text-align:center;color:#666;margin-top:8px;font-size:12px}.review-card{cursor:pointer;text-align:center;background:#ffffff0a;border:1px solid #2a2a2a;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:220px;margin-top:10px;padding:28px 22px;display:flex}.review-phrase{color:#eee;font-size:19px;font-weight:700;line-height:1.6}.review-meaning{color:#aaa;font-size:14px;line-height:1.7}.review-tap-hint{color:#555;font-size:11px}.review-actions{gap:12px;margin-top:4px;display:flex}.review-btn{cursor:pointer;border-radius:12px;flex:1;height:46px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s}.review-btn-again{color:#999;background:#ffffff0d;border:1px solid #333}.review-btn-again:hover{border-color:#555}.review-btn-got{color:#fff;background:#8b4db8;border:1px solid #8b4db8}.review-btn-got:hover{background:#9d5fd0}.book-review-exit{color:#666;cursor:pointer;background:0 0;border:none;margin:6px auto 0;font-size:12px}.book-review-exit:hover{color:#999;text-decoration:underline}.review-done{color:#ccc;flex-direction:column;align-items:center;gap:14px;margin-top:30%;font-size:15px;display:flex}.review-done-emoji{font-size:40px}.review-done .account-btn{width:200px}.soon-body{flex:1;padding-bottom:24px;overflow-y:auto}.soon-lead{color:#888;text-align:center;margin:6px 0 18px;font-size:13px;line-height:1.7}.soon-card{cursor:default;opacity:.6;position:relative}.soon-card:hover{background:#ffffff0a;border-color:#2a2a2a;transform:none}.soon-badge{letter-spacing:.08em;color:#fbbf24;border:1px solid #fbbf2473;border-radius:99px;padding:2px 8px;font-size:9px;font-weight:700;position:absolute;top:10px;right:12px}.home-divider{align-items:center;gap:12px;width:100%;margin:14px 0;display:flex}.home-divider:before,.home-divider:after{content:"";background:#222;flex:1;height:1px}.home-divider span{letter-spacing:.14em;color:#555;font-size:10px}.home-tiktok{justify-content:center;width:100%;display:flex}.tiktok-card{aspect-ratio:9/16;border:1px solid #2a2a2a;border-radius:16px;width:100%;max-width:220px;text-decoration:none;transition:border-color .15s,transform .1s;display:block;position:relative;overflow:hidden}.tiktok-card:hover{border-color:#8b4db8;transform:translateY(-1px)}.tiktok-card-thumb{object-fit:cover;width:100%;height:100%;display:block}.tiktok-card-overlay{background:#0000001a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tiktok-card-play{color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000008c;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;padding-left:2px;font-size:14px;display:flex}.tiktok-card-caption{background:linear-gradient(#0000,#000000d9);flex-direction:column;gap:2px;padding:22px 10px 8px;display:flex;position:absolute;bottom:0;left:0;right:0}.tiktok-card-author{color:#fff;font-size:11px;font-weight:700}.tiktok-card-text{color:#ccc;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;line-height:1.4;display:-webkit-box;overflow:hidden}.tiktok-actions{justify-content:flex-end;gap:8px;width:100%;margin:2px 0 4px;display:flex}.tiktok-action-btn{color:#777;cursor:pointer;background:0 0;border:1px solid #2a2a2a;border-radius:99px;align-items:center;gap:5px;padding:5px 12px;font-size:11px;transition:border-color .15s,color .15s;display:flex}.tiktok-action-btn:hover{color:#c084fc;border-color:#8b4db8}.tiktok-admin-btn{color:#fbbf24;border-color:#fbbf2473}.tiktok-admin-btn:hover{color:#fbbf24;border-color:#fbbf24}.tiktok-row{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:10px;width:100%;padding-bottom:6px;display:flex;overflow-x:auto}.tiktok-row::-webkit-scrollbar{height:5px}.tiktok-row::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:99px}.tiktok-row:empty{display:none}.tiktok-row .tiktok-card{scroll-snap-align:start;background:#16161a;flex:0 0 148px;max-width:none}.tiktok-pending-list{color:#888;flex-direction:column;gap:12px;max-height:55dvh;font-size:13px;display:flex;overflow-y:auto}.tiktok-pending-item{background:#ffffff08;border:1px solid #2a2a2a;border-radius:14px;gap:12px;padding:12px;display:flex}.tiktok-pending-thumb{aspect-ratio:9/16;object-fit:cover;border-radius:8px;flex-shrink:0;width:64px}.tiktok-pending-main{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.tiktok-pending-author{color:#c084fc;font-size:12px;font-weight:700;text-decoration:none}.tiktok-pending-author:hover{text-decoration:underline}.tiktok-pending-caption{color:#888;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.5;display:-webkit-box;overflow:hidden}.tiktok-pending-actions{gap:8px;display:flex}.tiktok-pending-actions .account-btn{flex:1;height:34px;font-size:12px}.tiktok-head{justify-content:space-between;align-items:center;gap:10px;width:100%;margin:2px 0 8px;display:flex}.tiktok-head-title{color:#ccc;letter-spacing:.02em;font-size:13px;font-weight:700}.tiktok-cta{background:#8b4db812;border:1px solid #8b4db84d;border-radius:14px;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:10px;padding:14px 16px;display:flex}.tiktok-cta-text{color:#aaa;text-align:center;font-size:12px;line-height:1.6}.tiktok-cta-btn{color:#fff;cursor:pointer;background:#8b4db8;border:none;border-radius:99px;height:38px;padding:0 22px;font-size:13px;font-weight:600;transition:background .15s}.tiktok-cta-btn:hover{background:#9d5fd0}.tt-player-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:400;background:#000000d9;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.tt-player-overlay.open{display:flex}.tt-player{flex-direction:column;align-items:center;gap:10px;width:min(360px,100vw - 32px,56.25dvh - 78.75px);display:flex}.tt-player-close{color:#888;cursor:pointer;background:0 0;border:none;align-self:flex-end;padding:4px 8px;font-size:20px}.tt-player-close:hover{color:#fff}.tt-player-frame{aspect-ratio:9/16;background:#000;border-radius:16px;width:100%;overflow:hidden}.tt-player-frame iframe{border:0;width:100%;height:100%;display:block}.tt-player-link{color:#c084fc;font-size:13px;text-decoration:none}.tt-player-link:hover{text-decoration:underline}.account-btn-line{color:#fff;background:#06c755;border-color:#06c755;font-weight:500}.account-btn-line:hover{background:#05b34c;border-color:#05b34c}.account-btn-x{color:#fff;background:#000;border-color:#333;font-weight:500}.account-btn-x:hover{background:#16181c}.account-consent{color:#777;text-align:center;margin-top:2px;font-size:11px;line-height:1.7}.account-consent a{color:#c084fc}.account-consent-check{color:#999;cursor:pointer;align-items:flex-start;gap:9px;padding:2px 2px 4px;font-size:11px;line-height:1.7;display:flex}.account-consent-check input{accent-color:#8b4db8;cursor:pointer;flex-shrink:0;width:15px;height:15px;margin-top:3px}.account-consent-check a{color:#c084fc}.account-btn:disabled{opacity:.4;cursor:not-allowed}.home-footer{flex-wrap:wrap;justify-content:center;gap:6px 18px;width:100%;margin-top:26px;display:flex}.home-footer a{color:#555;font-size:11px;text-decoration:none}.home-footer a:hover{color:#999;text-decoration:underline}#sessionTimer{color:#777;font-variant-numeric:tabular-nums;min-height:16px;font-size:12px}#sessionTimer.warning{color:#f87171;animation:1.2s ease-in-out infinite status-pulse}#sessionTimer:empty{display:none}.account-btn-danger{color:#f87171;background:#dc262626;border-color:#ef4444;font-weight:600}.account-btn-danger:hover{background:#dc262647}.account-link-danger{color:#7a4040;font-size:12px}.account-link-danger:hover{color:#f87171}.plan-btn{flex-direction:column;align-items:center;gap:2px;height:auto;padding:12px 16px;position:relative}.plan-btn-main{font-size:14px}.plan-btn-sub{opacity:.75;font-size:11px;font-weight:400}.plan-badge{color:#1a1200;background:#fbbf24;border-radius:99px;padding:2px 9px;font-size:10px;font-weight:700;position:absolute;top:-8px;right:12px}.plan-btn-main b{font-size:17px}.plan-note{color:#777;text-align:center;font-size:11px}@media (width<=767px){#battleHud.active .stage-half-ai .view-slot{justify-content:flex-end}#battleHud.active .stage-half-user .view-slot{justify-content:flex-start}.stage-half{padding:8px 12px}.bottom-panel{gap:2px;padding-top:20px}#stopBtn{display:none}body.in-session .mode-back-btn{opacity:1;pointer-events:auto;justify-content:center;gap:0;width:40px;padding:0}body.in-session .mode-back-btn #modeBackLabel{display:none}body.in-session .account-chip{opacity:0;pointer-events:none}}