:root{--bg-gradient: linear-gradient(135deg, #090d16 0%, #111329 100%);--card-bg: rgba(20, 24, 45, .6);--card-border: rgba(99, 102, 241, .15);--accent-color: #6366f1;--accent-glow: rgba(99, 102, 241, .4);--text-primary: #f8fafc;--text-secondary: #94a3b8;--danger-color: #f43f5e;--danger-glow: rgba(244, 63, 94, .4);--success-color: #10b981}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Prompt,sans-serif;background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;overflow-y:auto}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:2rem;max-width:800px;position:relative;z-index:10}header{margin-bottom:1.5rem}h1{font-size:2.5rem;font-weight:800;background:linear-gradient(to right,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}p.subtitle{color:var(--text-secondary);font-size:1.1rem;font-weight:300}.timer-container{position:relative;width:320px;height:320px;margin:1.5rem auto;display:flex;align-items:center;justify-content:center}.timer-svg{transform:rotate(-90deg);width:100%;height:100%}.timer-circle-bg{fill:none;stroke:#ffffff08;stroke-width:12}.timer-circle-progress{fill:none;stroke:var(--accent-color);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .1s linear,stroke .3s ease;filter:drop-shadow(0 0 8px var(--accent-glow))}.timer-text-container{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center}.time-display{font-size:5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary);transition:color .3s ease}.time-label{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-top:.5rem}.panel{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:20px;padding:1.5rem 2rem;margin-top:1rem;width:100%;max-width:500px;box-shadow:0 10px 30px #0000004d}.status-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;padding:.35rem .75rem;border-radius:9999px;background:#ffffff0d;margin-bottom:1rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-secondary);display:inline-block}.status-connected .status-dot{background:var(--success-color);box-shadow:0 0 8px var(--success-color)}.status-disconnected .status-dot{background:var(--danger-color);box-shadow:0 0 8px var(--danger-color)}.hotkeys-list{display:flex;flex-direction:column;gap:.75rem;text-align:left}.hotkey-item{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}.hotkey-label{color:var(--text-secondary)}.hotkey-key{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.2rem .5rem;font-family:monospace;font-size:.85rem;font-weight:600;box-shadow:0 2px #0003}.low-time{animation:pulse-danger 1s infinite alternate}.low-time .timer-circle-progress{stroke:var(--danger-color);filter:drop-shadow(0 0 12px var(--danger-glow))}.low-time .time-display{color:var(--danger-color)}@keyframes pulse-danger{0%{transform:scale(1)}to{transform:scale(1.03)}}.back-link-container{position:absolute;top:2rem;left:2rem;z-index:100}.back-link{color:var(--text-secondary);text-decoration:none;font-size:.95rem;transition:color .2s ease;display:inline-flex;align-items:center;gap:.5rem}.back-link:hover{color:var(--text-primary)}.staff-body{padding:1rem}.staff-body .timer-container{width:min(80vw,360px);height:min(80vw,360px)}.staff-body h1{font-size:2rem}.cycle-badge{font-size:1.1rem;font-weight:600;color:#c084fc;background:#c084fc1a;border:1px solid rgba(192,132,252,.2);padding:.4rem 1rem;border-radius:9999px;margin-top:1rem;display:inline-block;letter-spacing:.05em}.state-paused-badge{font-size:.9rem;font-weight:600;color:#f59e0b;background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);padding:.3rem .8rem;border-radius:9999px;margin-top:1rem;display:inline-block;text-transform:uppercase;letter-spacing:.05em;animation:flash 1.5s infinite}@keyframes flash{0%,to{opacity:1}50%{opacity:.4}}@media (max-width: 600px){.back-link-container{position:relative;top:0;left:0;margin-bottom:1.5rem;align-self:flex-start}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;z-index:9999;background:#e73535c2;transition:opacity .3s ease}body.disaster-flash:after,body.times-up-flash:after{animation:redBlink 1.2s ease-in-out infinite}@keyframes redBlink{0%{opacity:0}30%,60%{opacity:1}to{opacity:0}}.disaster-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#29080d,#0d0002);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;animation:disaster-bg-pulse 2s infinite alternate}.disaster-content{text-align:center;max-width:400px;background:#f43f5e14;border:2px solid rgba(244,63,94,.3);box-shadow:0 0 30px #f43f5e33;border-radius:28px;padding:3rem 2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.disaster-icon{font-size:5rem;margin-bottom:1.5rem;animation:warning-bounce .8s infinite alternate ease-in-out}.disaster-content h2{font-size:2.2rem;font-weight:900;color:var(--danger-color);margin-bottom:1rem;letter-spacing:.05em;text-shadow:0 0 10px var(--danger-glow)}.disaster-content p{font-size:1.3rem;font-weight:500;color:var(--text-primary);line-height:1.4}@keyframes disaster-bg-pulse{0%{background-color:#0d0002}to{background-color:#29080d}}@keyframes warning-bounce{0%{transform:translateY(0) scale(1)}to{transform:translateY(-12px) scale(1.05)}}.welcome-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#10162f,#050714);z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.welcome-content{text-align:center;max-width:400px;background:#6366f114;border:1px solid rgba(99,102,241,.3);box-shadow:0 0 30px #6366f133;border-radius:28px;padding:3rem 2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.welcome-icon{font-size:5rem;margin-bottom:1.5rem}.welcome-content h2{font-size:2rem;font-weight:800;background:linear-gradient(to right,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem;letter-spacing:.05em}.welcome-content p{font-size:1.1rem;color:var(--text-secondary);line-height:1.5;margin-bottom:2rem}.welcome-btn{font-family:Prompt,sans-serif;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:9999px;cursor:pointer;box-shadow:0 10px 20px #6366f14d;transition:all .3s ease}.welcome-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px #6366f166}.welcome-btn:active{transform:translateY(1px)}.times-up-screen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#11030699,#050102cc);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:times-up-fade-in .5s ease-out forwards}.times-up-banner{text-align:center;padding:3rem 5rem;background:#f43f5e0d;border:3px solid rgba(244,63,94,.3);box-shadow:0 0 50px #f43f5e40,inset 0 0 30px #f43f5e1a;border-radius:40px;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);animation:banner-pulse 2s infinite ease-in-out}.times-up-title{display:block;font-size:7rem;font-weight:900;color:var(--danger-color);text-shadow:0 0 20px rgba(244,63,94,.8),0 0 40px rgba(244,63,94,.5);letter-spacing:.1em;margin-bottom:1rem;line-height:1}.times-up-subtitle{display:block;font-size:2rem;font-weight:600;color:var(--text-primary);letter-spacing:.25em;text-transform:uppercase;opacity:.9}@keyframes times-up-fade-in{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes banner-pulse{0%,to{transform:scale(1);box-shadow:0 0 50px #f43f5e40}50%{transform:scale(1.02);box-shadow:0 0 70px #f43f5e66}}@media (max-width: 768px){.times-up-title{font-size:4rem}.times-up-subtitle{font-size:1.25rem}.times-up-banner{padding:2rem 3rem}}body.timer-hidden .back-link-container,body.timer-hidden #timer-app{display:none!important}#particle-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.ambient-glow{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 50%,#6366f114,#0000 70%);transition:background 1.5s ease-in-out,opacity 1.5s ease-in-out;opacity:.7}body.state-running .ambient-glow{background:radial-gradient(circle at 50% 50%,#6366f12e,#0000 75%);animation:glow-pulse-indigo 8s infinite alternate ease-in-out}body.state-lowtime .ambient-glow{background:radial-gradient(circle at 50% 50%,#f43f5e38,#0000 75%);animation:glow-pulse-lowtime 1.5s infinite alternate ease-in-out}body.state-paused .ambient-glow{background:radial-gradient(circle at 50% 50%,#f59e0b2e,#0000 75%);animation:glow-pulse-paused 4s infinite alternate ease-in-out}body.state-disaster .ambient-glow{background:radial-gradient(circle at 50% 50%,#dc262659,#0000 80%);animation:glow-pulse-disaster 1s infinite alternate ease-in-out}body.state-timesup .ambient-glow{background:radial-gradient(circle at 50% 50%,#9f123966,#0000 80%);animation:glow-pulse-timesup 3s infinite ease-in-out}@keyframes glow-pulse-indigo{0%{opacity:.5}to{opacity:.9}}@keyframes glow-pulse-lowtime{0%{opacity:.6}to{opacity:1}}@keyframes glow-pulse-paused{0%{opacity:.4}to{opacity:.8}}@keyframes glow-pulse-disaster{0%{opacity:.4}to{opacity:1}}@keyframes glow-pulse-timesup{0%,to{opacity:.7}50%{opacity:1}}.timer-circle-outer-dash{fill:none;stroke:#6366f126;stroke-width:1.5;transform-origin:170px 170px;animation:rotate360 40s linear infinite;transition:stroke .4s ease}.timer-circle-outer-solid{fill:none;stroke:#ffffff0a;stroke-width:1}.timer-circle-inner-dash{fill:none;stroke:#ffffff0d;stroke-width:1;transform-origin:170px 170px;animation:rotate360-reverse 30s linear infinite;transition:stroke .4s ease}body.state-lowtime .timer-circle-outer-dash{stroke:#f43f5e59;animation-duration:15s}body.state-lowtime .timer-circle-inner-dash{stroke:#f43f5e33;animation-duration:10s}body.state-disaster .timer-circle-outer-dash{stroke:#dc262680;animation-duration:8s}body.state-paused .timer-circle-outer-dash,body.state-paused .timer-circle-inner-dash{animation-play-state:paused}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate360-reverse{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.panel.hidden{display:none!important}@media (min-width: 1024px){.container{padding:3rem}header{margin-bottom:2rem}h1{font-size:3.8rem;margin-bottom:.75rem}p.subtitle{font-size:1.3rem}.timer-container{width:460px;height:460px;margin:2.5rem auto}.time-display{font-size:7.5rem}.time-label{font-size:1.25rem}.cycle-badge{font-size:1.3rem;padding:.5rem 1.5rem}.state-paused-badge{font-size:1.1rem;padding:.4rem 1.2rem}.times-up-banner{padding:4rem 7rem;border-radius:50px}.times-up-title{font-size:9rem}.times-up-subtitle{font-size:2.5rem}}