@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-deep-ocean:#030712;--bg-abyss:#070f1e;--bg-trench:#0b1528;--primary-teal:#00f5d4;--primary-cyan:#00bbf9;--accent-purple:#7209b7;--accent-magenta:#f72585;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--glass-border:#ffffff0f;--neon-border-teal:#00f5d44d;--neon-border-cyan:#00bbf94d;--neon-shadow-teal:0 0 15px #00f5d433;--neon-shadow-cyan:0 0 15px #00bbf933;--glass-bg:#0b1528a6;--glass-bg-hover:#0f1e36cc;--transition-fast:.2s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep-ocean);color:var(--text-primary);min-height:100vh;font-family:Outfit,Noto Sans KR,sans-serif;overflow-x:hidden}.app-container{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;min-height:100vh;padding:40px 0;display:flex}.ocean-bg{z-index:-2;background:radial-gradient(circle,#0c1c38 0%,#030814 100%);width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.ocean-bg:after{content:"";z-index:-1;background:radial-gradient(circle at 10% 20%,#00f5d40d 0%,#0000 40%),radial-gradient(circle at 90% 80%,#7209b714 0%,#0000 50%);width:100%;height:100%;position:absolute;top:0;left:0}.bubble-container{z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}.bubble{background:radial-gradient(circle at 30% 30%,#ffffff1a,#00f5d40d);border-radius:50%;animation:15s linear infinite float-up;position:absolute;bottom:-100px;box-shadow:0 4px 10px #00f5d40d,inset 0 2px 5px #ffffff1a}@keyframes float-up{0%{opacity:0;transform:translateY(0)translate(0)scale(1)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-120vh)translate(50px)scale(.8)}}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:16px;padding:24px;box-shadow:0 8px 32px #00000080}.glass-card:hover{box-shadow:0 8px 32px 0 #0009, var(--neon-shadow-teal);border-color:#00f5d440}.glass-card-neon-cyan{border:1px solid #00bbf933}.glass-card-neon-cyan:hover{box-shadow:0 8px 32px 0 #0009, var(--neon-shadow-cyan);border-color:#00bbf966}.text-neon-teal{color:var(--primary-teal);text-shadow:0 0 10px #00f5d466}.text-neon-cyan{color:var(--primary-cyan);text-shadow:0 0 10px #00bbf966}.text-neon-purple{color:#c77dff;text-shadow:0 0 10px #7209b766}.btn{cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-cyan) 100%);color:var(--bg-deep-ocean);box-shadow:0 4px 15px #00f5d44d}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #00f5d480, 0 0 12px var(--primary-teal);transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover:not(:disabled){background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.btn-accent{background:linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-magenta) 100%);color:#fff;box-shadow:0 4px 15px #7209b74d}.btn-accent:hover:not(:disabled){box-shadow:0 6px 20px #7209b780, 0 0 12px var(--accent-purple);transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.input-field{border:1px solid var(--glass-border);width:100%;color:var(--text-primary);transition:all var(--transition-fast);background:#050c18b3;border-radius:12px;outline:none;padding:14px 16px;font-family:inherit;font-size:15px}.input-field:focus{border-color:var(--primary-teal);box-shadow:0 0 0 2px #00f5d426, var(--neon-shadow-teal)}.chat-container{border:1px solid var(--glass-border);background:#050c1880;border-radius:16px;flex-direction:column;height:680px;display:flex;overflow:hidden}.chat-messages{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.chat-bubble{border-radius:14px;max-width:80%;padding:12px 16px;font-size:15px;line-height:1.5;animation:.3s fadeIn}.bubble-user{background:#00bbf91f;border:1px solid #00bbf933;border-bottom-right-radius:2px;align-self:flex-end}.bubble-ai{box-shadow:var(--neon-shadow-teal);background:#00f5d414;border:1px solid #00f5d440;border-bottom-left-radius:2px;align-self:flex-start;position:relative}.bubble-system{color:var(--text-secondary);background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;align-self:center;padding:6px 12px;font-size:13px}.bubble-hint{color:#fbbf24;text-align:center;background:#f59e0b14;border:1px solid #f59e0b40;align-self:center;max-width:90%;font-size:14px;box-shadow:0 0 15px #f59e0b1a}.bubble-attempt-wrong{color:#f87171;text-align:center;background:#ef444414;border:1px solid #ef444440;align-self:center;font-size:14px}.bubble-attempt-correct{color:#34d399;text-align:center;background:#10b9811f;border:1px solid #10b9814d;align-self:center;font-size:15px;font-weight:600;box-shadow:0 0 20px #10b98133}.typing-dots{align-items:center;gap:4px;padding:4px 8px;display:inline-flex}.typing-dots span{background-color:var(--primary-teal);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite both bounce}.typing-dots span:first-child{animation-delay:-.32s}.typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#00f5d44d}.pulse-teal{animation:2s infinite pulse-animation-teal}@keyframes pulse-animation-teal{0%{box-shadow:0 0 #00f5d466}70%{box-shadow:0 0 0 8px #00f5d400}to{box-shadow:0 0 #00f5d400}}.game-grid{grid-template-columns:1fr 450px;gap:24px;display:grid}@media (width<=1024px){.game-grid{grid-template-columns:1fr}}.scoreboard-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;display:grid}@media (width<=768px){.scoreboard-grid{grid-template-columns:1fr}}.lobby-grid{grid-template-columns:1fr 1.3fr;gap:20px;margin:12px 0;display:grid}@media (width<=640px){.lobby-grid{grid-template-columns:1fr}body{font-size:14px}h1{font-size:20px!important}h2{font-size:16px!important}}.game-room-header{background-color:#0b152880;border:1px solid #ffffff0f;border-radius:16px;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.game-room-header-left{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.game-room-header-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:18px;font-weight:700;overflow:hidden}.game-room-header-right{flex-shrink:0;align-items:center;gap:16px;display:flex}.game-room-code-badge{color:#94a3b8;white-space:nowrap;font-size:14px}.game-room-leave-btn{white-space:nowrap;padding:6px 14px;font-size:12px}@media (width<=640px){.game-room-header{flex-direction:column;align-items:stretch;gap:12px;padding:12px 14px!important}.game-room-header-left{justify-content:flex-start;gap:8px}.game-room-header-title{white-space:normal;width:100%;margin-top:4px;font-size:15px!important}.game-room-header-right{border-top:1px solid #ffffff0d;justify-content:space-between;gap:8px;width:100%;padding-top:8px}.game-room-code-badge{font-size:12px}.game-room-leave-btn{padding:4px 10px;font-size:11px}}.app-main{z-index:10;width:100%;max-width:1600px;padding:0 24px}@media (width<=1024px){.game-grid{flex-direction:column!important;gap:16px!important;display:flex!important}.game-grid-left,.game-grid-right{display:contents!important}}@media (width<=640px){.app-main{padding:0 12px!important}.app-container{padding:16px 0!important}.glass-card{padding:16px!important}.chat-container{height:500px!important}.mystery-question{font-size:15px!important;line-height:1.6!important}.welcome-profile-row{flex-direction:column!important;align-items:stretch!important}.welcome-input-row{flex-direction:column!important;align-items:stretch!important;gap:16px!important}.welcome-nickname-input{flex:1!important;width:100%!important}.welcome-stats-row{flex-direction:column!important;gap:14px!important;width:100%!important;display:flex!important}.welcome-stats-row>div{flex-direction:column!important;gap:6px!important;width:100%!important;display:flex!important}}.welcome-nickname-input{width:160px}.story-reading-content{font-size:20px!important;font-weight:400!important;line-height:1.9!important}@media (width<=768px){.story-reading-content{font-size:16px!important;line-height:1.7!important}}