/* ====================================================================
   PARTY KOD — общие стили
   ==================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Montserrat',system-ui,sans-serif;background:#050505;color:#ededed;}
:root{
  --bg:#0e0e0e;--bg2:#141414;--bg3:#1a1a1a;
  --border:#2a2a2a;--border2:#333;
  --accent:#D748B3;--accent2:#e055c0;
  --text:#ededed;--text2:#888;--text3:#555;
  --radius:10px;
}

/* ====================================================================
   ГЛАВНАЯ СТРАНИЦА / (вход оператора)
   ==================================================================== */
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#050505;}
.home-glow{position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(215,72,179,.18) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);animation:homeGlow 4s ease-in-out infinite;pointer-events:none;}
@keyframes homeGlow{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.home-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:24px;}
.home-logo{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:.45em;text-transform:uppercase;margin-bottom:24px;}
.home-logo span{color:var(--accent);}
.home-tagline{font-size:32px;font-weight:700;color:var(--text);text-align:center;line-height:1.25;margin-bottom:40px;letter-spacing:-.01em;}
.home-line{width:32px;height:1px;background:var(--border2);margin-bottom:32px;}
.home-input{width:100%;background:rgba(255,255,255,.03);border:.5px solid var(--border2);border-radius:10px;padding:16px 18px;font-size:14px;color:var(--text);font-family:'Montserrat',sans-serif;letter-spacing:.04em;transition:border-color .2s;margin-bottom:10px;}
.home-input:focus{outline:none;border-color:var(--accent);}
.home-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:16px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.12em;text-transform:uppercase;font-family:'Montserrat',sans-serif;transition:background .2s,opacity .2s;}
.home-btn:hover{background:var(--accent2);}
.home-btn:disabled{opacity:.5;cursor:default;}
.home-error{font-size:11px;color:#f87171;text-align:center;min-height:14px;letter-spacing:.04em;margin-top:10px;}

/* ====================================================================
   СТРАНИЦА КЛИЕНТА /join
   ==================================================================== */
.join-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#050505;}
.join-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(215,72,179,.15) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);animation:homeGlow 4s ease-in-out infinite;pointer-events:none;}
.join-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:24px;}
.join-logo{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.4em;text-transform:uppercase;margin-bottom:52px;}
.join-logo span{color:var(--accent);}
.join-label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.35em;text-transform:uppercase;margin-bottom:14px;}
.join-code{font-size:96px;font-weight:800;color:var(--text);letter-spacing:.15em;font-family:'Montserrat',monospace;line-height:1;text-shadow:0 0 48px rgba(215,72,179,.35);}
.join-code-line{width:220px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:14px auto 36px;}
.join-hint{font-size:15px;color:var(--text2);text-align:center;letter-spacing:.03em;}
.join-status{font-size:10px;color:var(--text3);letter-spacing:.15em;text-transform:uppercase;margin-top:20px;}

/* ====================================================================
   ЛЕНДИНГ / (старый — не используется, оставлен для совместимости)
   ==================================================================== */
.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;}
.landing-logo{font-size:14px;font-weight:700;color:var(--text3);letter-spacing:.3em;text-transform:uppercase;margin-bottom:48px;}
.landing-logo span{color:var(--accent);}
.landing-card{background:var(--bg);border:0.5px solid var(--border);border-radius:14px;padding:40px 48px;max-width:480px;width:100%;}
.landing-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:8px;}
.landing-sub{font-size:13px;color:var(--text2);margin-bottom:32px;line-height:1.5;}

.landing-btn{display:block;width:100%;padding:18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;border:none;background:var(--accent);color:#fff;margin-bottom:14px;text-align:center;text-decoration:none;}
.landing-btn:hover{background:var(--accent2);}
.landing-btn.secondary{background:transparent;border:0.5px solid var(--border2);color:var(--text);}
.landing-btn.secondary:hover{border-color:var(--accent);color:var(--accent);background:transparent;}

.landing-join-row{display:flex;gap:8px;margin-top:14px;}
.landing-join-inp{flex:1;background:#0a0a0a;border:0.5px solid var(--border2);border-radius:10px;padding:14px;font-size:18px;font-weight:700;color:var(--text);letter-spacing:.2em;font-family:'Montserrat',monospace;text-align:center;text-transform:uppercase;}
.landing-join-inp:focus{outline:none;border-color:var(--accent);}
.landing-join-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:14px 22px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;}
.landing-join-btn:hover{background:var(--accent2);}
.landing-error{font-size:11px;color:#f87171;margin-top:8px;min-height:14px;letter-spacing:.04em;}

.landing-divider{display:flex;align-items:center;gap:12px;margin:28px 0;color:var(--text3);font-size:9px;letter-spacing:.2em;text-transform:uppercase;}
.landing-divider::before,.landing-divider::after{content:'';flex:1;height:0.5px;background:var(--border);}

/* ====================================================================
   ЭКРАН КЛИЕНТА /play/:code
   ==================================================================== */
.client-app{height:100vh;background:#050505;display:flex;flex-direction:column;}
.client-bar{padding:8px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--border);background:var(--bg2);flex-shrink:0;}
.client-bar-logo{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.25em;text-transform:uppercase;}
.client-bar-logo span{color:var(--accent);}
.client-bar-code{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.2em;font-family:'Montserrat',monospace;}
.client-bar-code span{color:var(--accent);}
.client-bar-vol{display:flex;align-items:center;gap:6px;}
.client-bar-vol input{width:70px;-webkit-appearance:none;appearance:none;height:3px;background:#222;border-radius:3px;outline:none;cursor:pointer;}
.client-bar-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:var(--accent);border-radius:50%;cursor:pointer;border:0;}
.client-bar-vol input::-moz-range-thumb{width:11px;height:11px;background:var(--accent);border-radius:50%;cursor:pointer;border:0;}
.client-bar-vol svg{color:var(--text3);}

.client-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.client-stage-inner{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;}
.client-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.flash-overlay{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}

.slide-img{max-width:96%;max-height:96%;object-fit:contain;border-radius:4px;}
.slide-video{max-width:96%;max-height:96%;border-radius:4px;}
.slide-placeholder{display:flex;flex-direction:column;align-items:center;gap:14px;color:#2a2a2a;}
.slide-placeholder svg{width:64px;height:64px;opacity:.4;}
.slide-placeholder span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);}

/* Экран ожидания клиента (до старта игры) */
.c-enter{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:radial-gradient(ellipse at 50% 60%,#1a0515 0%,#080808 70%);}
.c-logo{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.3em;text-transform:uppercase;margin-bottom:36px;}
.c-logo span{color:var(--accent);}
.c-code-big{font-size:72px;font-weight:700;color:var(--text);letter-spacing:.3em;font-family:'Montserrat',monospace;line-height:1;}
.c-code-underline{width:160px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:14px auto 0;}
.c-code-hint{font-size:11px;color:var(--text3);margin-top:18px;text-align:center;letter-spacing:.12em;text-transform:uppercase;}

.emoji-screen{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.emoji-screen img,.emoji-screen video{max-width:96%;max-height:90%;object-fit:contain;border-radius:4px;}
.emoji-progress{position:absolute;bottom:14px;left:5%;right:5%;height:6px;background:#1a1a1a;border-radius:3px;overflow:hidden;}
.emoji-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));will-change:width;}

.karaoke-text-screen{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:40px;}
.karaoke-text{font-family:'Montserrat',sans-serif;font-size:48px;font-weight:600;color:var(--text);text-align:center;line-height:1.4;letter-spacing:.02em;max-width:90%;white-space:pre-wrap;}

.melody-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:24px;gap:24px;}
.melody-timer{font-size:64px;font-weight:700;color:var(--text);font-family:'Montserrat',monospace;letter-spacing:.08em;}
.melody-timer.warn{color:#fbbf24;}
.melody-timer.danger{color:#f87171;}
.melody-scale{display:flex;gap:8px;margin-bottom:8px;}
.melody-cell{width:42px;height:42px;border-radius:6px;background:#0a0a0a;border:1px solid var(--border2);transition:all .3s;}
.melody-cell.filled{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:var(--accent);box-shadow:0 0 12px #D748B355;}
.melody-rank{font-size:22px;font-weight:600;color:var(--text);letter-spacing:.08em;text-transform:uppercase;text-align:center;min-height:24px;}
.melody-rank.gold{color:var(--accent);}
.melody-finished{font-size:13px;color:var(--text3);letter-spacing:.15em;text-transform:uppercase;margin-top:8px;}

.client-status{position:absolute;bottom:10px;right:14px;font-size:10px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;}
.client-status.disconnected{color:#f87171;}

@keyframes flashAnim{0%{opacity:0}15%{opacity:.85}100%{opacity:0}}
.flashing{animation:flashAnim .48s ease-out forwards;}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.fadein{animation:fadeIn .3s ease-out forwards;}
@keyframes cellFill{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.melody-cell.just-filled{animation:cellFill .35s ease-out;}

/* ====================================================================
   ВХОД ОПЕРАТОРА /operator (форма пароля)
   ==================================================================== */
.op-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.op-login-card{background:var(--bg);border:0.5px solid var(--border);border-radius:14px;padding:36px 40px;max-width:380px;width:100%;}
.op-login-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.3em;text-transform:uppercase;margin-bottom:6px;text-align:center;}
.op-login-title span{color:var(--accent);}
.op-login-sub{font-size:18px;font-weight:600;color:var(--text);text-align:center;margin-bottom:28px;}
.op-login-input{width:100%;background:#0a0a0a;border:0.5px solid var(--border2);border-radius:10px;padding:14px;font-size:14px;color:var(--text);margin-bottom:12px;font-family:'Montserrat',sans-serif;}
.op-login-input:focus{outline:none;border-color:var(--accent);}
.op-login-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:14px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;}
.op-login-btn:hover{background:var(--accent2);}
.op-login-error{font-size:11px;color:#f87171;margin-top:10px;text-align:center;min-height:14px;letter-spacing:.04em;}