@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--neon-cyan: #00f7ff;--neon-pink: #ff00aa;--dark-bg: #0b001a}.app-version{position:fixed;top:10px;left:12px;z-index:200;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:11px;font-weight:500;letter-spacing:.04em;color:#00f7ff6b;text-shadow:0 0 8px rgba(0,247,255,.2);pointer-events:none;-webkit-user-select:none;user-select:none}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--dark-bg);color:var(--neon-cyan);font-family:"Press Start 2P",system-ui;overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center;position:relative}header{width:100%;max-width:1000px;display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#000c;border-bottom:6px solid var(--neon-cyan);box-shadow:0 0 20px var(--neon-cyan);z-index:10}.logo{font-size:24px;letter-spacing:4px;text-shadow:0 0 10px var(--neon-pink)}.stats{display:flex;align-items:center;gap:30px;font-size:14px}.stat{display:flex;flex-direction:column;align-items:center;gap:4px}.label{font-size:10px;opacity:.7;letter-spacing:2px}.score-value{color:#fff;font-size:22px;text-shadow:0 0 15px #fff}.threat{color:#f06;text-shadow:0 0 15px #ff0066;font-size:22px}.health-container{width:280px;height:28px;background:#111;border:4px solid var(--neon-cyan);position:relative;box-shadow:0 0 15px var(--neon-cyan);overflow:hidden}.health-bar{height:100%;width:100%;background:linear-gradient(90deg,#0f8,#0c6);transition:width .2s ease;box-shadow:0 0 20px #0f8}.health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#000;text-shadow:0 0 5px #fff;z-index:2;width:100%;text-align:center}main{flex:1;width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:40px 20px}.word-container{width:100%;max-width:800px;background:#0009;border:6px solid var(--neon-cyan);border-radius:12px;padding:40px 30px;margin-bottom:40px;box-shadow:0 0 40px var(--neon-cyan);min-height:140px;display:flex;align-items:center;justify-content:center;font-size:3.2rem;letter-spacing:8px;text-transform:lowercase}.letter{display:inline-block;transition:all .1s ease;padding:2px 4px;margin:0 2px;border-radius:4px}.correct{color:#0f8;text-shadow:0 0 15px #00ff88;transform:scale(1.1)}.incorrect{color:#f06;text-shadow:0 0 15px #ff0066;animation:shake .3s ease}.pending{color:var(--neon-cyan)}#typing-input{width:100%;max-width:min(800px,calc(100% - 24px));background:#000c;border:5px solid var(--neon-pink);color:#fff;font-family:"Press Start 2P",monospace;font-size:clamp(1rem,2.2vw + .65rem,1.8rem);padding:22px clamp(14px,4vw,30px);text-align:center;letter-spacing:3px;outline:none;box-shadow:0 0 30px var(--neon-pink);text-transform:lowercase}#typing-input::placeholder{font-size:clamp(.55rem,1.35vw + .45rem,1.05rem);letter-spacing:.06em;opacity:.55}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0b001af2;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:22px}.overlay.show{display:flex}.title{font-size:3rem;text-shadow:0 0 20px var(--neon-cyan),0 0 40px var(--neon-pink);letter-spacing:8px;text-align:center}.lobby-title-block{position:relative;display:inline-block;text-align:center;margin-bottom:6px;padding:0 2.75em .55em .25em;max-width:96vw}.lobby-main-title{position:relative;z-index:1;font-size:clamp(1rem,3.6vw,2rem);letter-spacing:4px;line-height:1.25;text-align:center}.lobby-subtitle{position:absolute;right:0;bottom:.02em;z-index:2;font-family:"Press Start 2P",ui-monospace,monospace;font-size:clamp(7px,2.5vw,25px);font-weight:400;letter-spacing:.14em;text-transform:lowercase;color:#ffe312;text-shadow:2px 2px 0 #2a2000,-1px -1px 0 #000,0 0 12px rgba(255,234,85,.45);white-space:nowrap;pointer-events:none;transform-origin:right bottom;transform:rotate(-1deg) translate(-42%,10%)}button{background:transparent;border:4px solid var(--neon-cyan);color:var(--neon-cyan);font-family:"Press Start 2P",monospace;font-size:1rem;padding:16px 28px;cursor:pointer;box-shadow:0 0 18px var(--neon-cyan);transition:all .2s}button:hover{background:var(--neon-cyan);color:#0b001a;transform:scale(1.03)}button:disabled{opacity:.5;cursor:not-allowed}.in-game-leave{position:absolute;left:22px;bottom:22px;z-index:60;padding:12px 18px;font-size:.8rem;box-shadow:0 0 18px #f06}.button-row{display:flex;gap:20px}.username-input,.code-input{width:320px;padding:16px;font-size:1.1rem;text-align:center;background:#000c;color:#fff;border:4px solid var(--neon-pink)}.username-input{text-transform:none}.code-input{text-transform:uppercase}.code-input{border-color:var(--neon-cyan);letter-spacing:6px}.player-list-wrap{margin-top:10px;width:100%;max-width:420px}.label-pink,.code-label,.creator-label{color:#f0a;margin-bottom:10px;text-align:center}.player-list{background:#000000d9;padding:15px;border:4px solid var(--neon-cyan);border-radius:8px;min-height:160px;width:100%}.room-code-wrap{text-align:center}.code-display{font-size:2.2rem;letter-spacing:10px;color:#00f7ff;background:#0009;padding:10px 20px;border:4px solid var(--neon-cyan);min-width:280px}.creator-controls{display:none;text-align:center}.danger,.danger:hover,.danger-title{color:#f06;border-color:#f06;text-shadow:0 0 15px #ff0066}.victory-title{color:#0f8;border-color:#0f8;text-shadow:0 0 22px #00ff88,0 0 44px #00cc66}.danger:hover{background:#f06;color:#0b001a}.final-stats{font-size:1rem;line-height:1.8;margin:30px 0;text-align:center}#multiplayer-sidebar{position:absolute;top:90px;right:30px;z-index:50;min-width:300px}.typo-flash{animation:typoFlashAnim .85s ease forwards}.correct-flash{animation:correctFlashAnim 1.1s ease forwards}.bonus-popup{animation:bonusFloat 1.2s ease forwards}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}to{transform:translate(-1px,-2px) rotate(-1deg)}}@keyframes typoFlashAnim{0%,to{color:var(--neon-cyan)}20%,60%{color:#f06;text-shadow:0 0 20px #ff0066}}@keyframes correctFlashAnim{0%,to{color:var(--neon-cyan)}15%,50%{color:#0f8;text-shadow:0 0 25px #00ff88;transform:scale(1.08)}}@keyframes bonusFloat{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-120px)}}
