/* === Қазақтың ұлттық өнері — Командалық ойын === */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0a0806;--bg2:#151210;--bg3:#1e1914;--bg4:#282018;
    --gold:#d4a843;--gold2:#e8c35a;--gold3:#f0d060;
    --gold-dim:rgba(212,168,67,.1);--gold-glow:rgba(212,168,67,.3);--gold-glow2:rgba(212,168,67,.08);
    --team1:#d4a843;--team1-bg:rgba(212,168,67,.06);--team1-border:rgba(212,168,67,.18);
    --team2:#e05555;--team2-bg:rgba(224,85,85,.06);--team2-border:rgba(224,85,85,.18);
    --team3:#3db89a;--team3-bg:rgba(61,184,154,.06);--team3-border:rgba(61,184,154,.18);
    --text:#f5ede0;--text2:#b8a88c;--text3:#6e6050;
    --border:rgba(212,168,67,.08);--border2:rgba(212,168,67,.15);
    --radius:14px;--radius-lg:20px;
    --shadow:0 20px 60px rgba(0,0,0,.5);
}
html,body{height:100%;overflow:hidden}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--text)}

/* === Ою-өрнек фоны === */
.ornament-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.ornament-bg::before{content:'';position:absolute;inset:0;opacity:.025;
    background-image:
        repeating-linear-gradient(45deg,transparent,transparent 24px,var(--gold) 24px,var(--gold) 25px),
        repeating-linear-gradient(-45deg,transparent,transparent 24px,var(--gold) 24px,var(--gold) 25px)}
.ornament-bg::after{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(212,168,67,.04),transparent 60%),
               radial-gradient(ellipse 60% 40% at 20% 100%,rgba(224,85,85,.03),transparent),
               radial-gradient(ellipse 60% 40% at 80% 100%,rgba(61,184,154,.03),transparent)}

/* === Ою-жиек === */
.orn-border{position:relative;overflow:visible}
.orn-border::before,.orn-border::after{content:'';position:absolute;pointer-events:none;z-index:1}
.orn-border::before{inset:-3px;border:2px solid var(--border2);border-radius:inherit;
    background:
        repeating-linear-gradient(90deg,var(--gold-dim) 0 6px,transparent 6px 12px,rgba(212,168,67,.15) 12px 14px,transparent 14px 20px) top/100% 2px no-repeat,
        repeating-linear-gradient(90deg,var(--gold-dim) 0 6px,transparent 6px 12px,rgba(212,168,67,.15) 12px 14px,transparent 14px 20px) bottom/100% 2px no-repeat,
        repeating-linear-gradient(0deg,var(--gold-dim) 0 6px,transparent 6px 12px,rgba(212,168,67,.15) 12px 14px,transparent 14px 20px) left/2px 100% no-repeat,
        repeating-linear-gradient(0deg,var(--gold-dim) 0 6px,transparent 6px 12px,rgba(212,168,67,.15) 12px 14px,transparent 14px 20px) right/2px 100% no-repeat}
.orn-border::after{top:-8px;left:50%;transform:translateX(-50%);width:60px;height:16px;
    background:var(--bg2);
    border:1px solid var(--border2);border-radius:0 0 10px 10px;
    box-shadow:inset 0 -4px 8px var(--gold-dim)}

/* === Экрандар === */
.screen{display:none;height:100vh;flex-direction:column;position:relative;z-index:1}
.screen.active{display:flex}

/* ========== БАСТАУ ЭКРАНЫ ========== */
.start-screen{display:flex;align-items:center;justify-content:center;padding:40px 20px;overflow-y:auto;min-height:100vh;
    background:radial-gradient(ellipse 100% 60% at 50% 0%,rgba(212,168,67,.06),transparent 50%),
               radial-gradient(ellipse 50% 40% at 10% 100%,rgba(224,85,85,.04),transparent),
               radial-gradient(ellipse 50% 40% at 90% 100%,rgba(61,184,154,.04),transparent)}
.start-card{width:100%;max-width:780px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:var(--radius-lg);padding:48px;box-shadow:var(--shadow),0 0 80px rgba(212,168,67,.05)}

.start-logo{text-align:center;margin-bottom:36px}
.shanyraq{width:100px;height:100px;margin:0 auto 20px;border:3px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;
    box-shadow:0 0 40px var(--gold-glow),inset 0 0 24px var(--gold-dim);animation:shanyraq-glow 3s ease-in-out infinite}
.shanyraq::before{content:'';position:absolute;inset:-8px;border:1px solid rgba(212,168,67,.12);border-radius:50%;animation:shanyraq-ring 6s linear infinite}
.shanyraq::after{content:'';position:absolute;inset:-15px;border:1px dashed rgba(212,168,67,.06);border-radius:50%;animation:shanyraq-ring 10s linear infinite reverse}
@keyframes shanyraq-glow{0%,100%{box-shadow:0 0 40px var(--gold-glow),inset 0 0 24px var(--gold-dim)}50%{box-shadow:0 0 60px rgba(212,168,67,.4),inset 0 0 30px rgba(212,168,67,.15)}}
@keyframes shanyraq-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.start-title{font-size:2rem;font-weight:900;letter-spacing:2px;margin-bottom:4px;
    background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.start-sub{font-size:.95rem;color:var(--text2);font-weight:600}

.setup-section{margin-bottom:26px}
.setup-label{font-size:.72rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.setup-label::before{content:'';width:12px;height:2px;background:var(--gold);border-radius:1px}
.setup-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.setup-input{padding:11px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.9rem;font-family:inherit;outline:none;width:100px;text-align:center;font-weight:700;transition:.2s}
.setup-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow2)}

.team-setup{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.team-setup-card{padding:18px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:.2s;position:relative;overflow:hidden}
.team-setup-card:hover{transform:translateY(-2px)}
.team-setup-card:nth-child(1){border-color:var(--team1-border)}
.team-setup-card:nth-child(1)::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--team1)}
.team-setup-card:nth-child(2){border-color:var(--team2-border)}
.team-setup-card:nth-child(2)::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--team2)}
.team-setup-card:nth-child(3){border-color:var(--team3-border)}
.team-setup-card:nth-child(3)::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--team3)}
.team-setup-card .icon{font-size:32px;margin-bottom:8px}
.team-setup-card input{width:100%;padding:9px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.88rem;font-family:inherit;outline:none;text-align:center;font-weight:800;transition:.2s}
.team-setup-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow2)}

.words-area{width:100%;min-height:80px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.85rem;font-family:inherit;outline:none;resize:vertical;line-height:1.7;transition:.2s}
.words-area:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow2)}
.words-hint{font-size:.72rem;color:var(--text3);margin-top:6px}

/* --- Аспаптар витринасы --- */
.instruments-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:30px}
.showcase-item{padding:20px 14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:.3s;position:relative;overflow:hidden}
.showcase-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.showcase-dombra{border-color:var(--team1-border)}
.showcase-dombra:hover{border-color:var(--team1);box-shadow:0 8px 30px rgba(212,168,67,.15)}
.showcase-dombra::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--team1),transparent)}
.showcase-dombra .showcase-svg{color:var(--team1)}
.showcase-kobyz{border-color:var(--team2-border)}
.showcase-kobyz:hover{border-color:var(--team2);box-shadow:0 8px 30px rgba(224,85,85,.15)}
.showcase-kobyz::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--team2),transparent)}
.showcase-kobyz .showcase-svg{color:var(--team2)}
.showcase-jetigen{border-color:var(--team3-border)}
.showcase-jetigen:hover{border-color:var(--team3);box-shadow:0 8px 30px rgba(61,184,154,.15)}
.showcase-jetigen::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--team3),transparent)}
.showcase-jetigen .showcase-svg{color:var(--team3)}
.showcase-svg{height:80px;margin-bottom:10px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));transition:.3s}
.showcase-svg-wide{height:50px;margin-top:15px;margin-bottom:15px}
.showcase-item:hover .showcase-svg{transform:scale(1.08);filter:drop-shadow(0 6px 16px rgba(0,0,0,.3))}
.showcase-name{font-size:1rem;font-weight:900;letter-spacing:1px;margin-bottom:3px}
.showcase-dombra .showcase-name{color:var(--team1)}
.showcase-kobyz .showcase-name{color:var(--team2)}
.showcase-jetigen .showcase-name{color:var(--team3)}
.showcase-desc{font-size:.7rem;color:var(--text3);font-weight:600}

/* --- Музыка ақпарат --- */
.music-info{margin-bottom:10px}
.music-auto{display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(135deg,var(--gold-dim),rgba(212,168,67,.04));border:1px solid var(--border2);border-radius:var(--radius);position:relative;overflow:hidden}
.music-auto::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.music-auto-icon{flex-shrink:0;opacity:.6}
.music-auto-title{font-size:.92rem;font-weight:800;color:var(--gold);margin-bottom:2px}
.music-auto-desc{font-size:.75rem;color:var(--text3);font-weight:600}

.music-upload{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:.2s}
.music-upload:hover{border-color:var(--gold);background:var(--gold-dim);transform:translateY(-1px)}
.music-upload-icon{font-size:22px;flex-shrink:0}
.music-upload-text{font-size:.82rem;color:var(--text3);font-weight:600}
.music-upload-name{font-size:.78rem;color:var(--gold);font-weight:700;margin-top:2px}

.start-btn{width:100%;padding:18px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--bg);border:none;border-radius:var(--radius);font-size:1.2rem;font-weight:900;font-family:inherit;cursor:pointer;letter-spacing:2px;transition:.2s;margin-top:10px;position:relative;overflow:hidden}
.start-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:.5s}
.start-btn:hover::before{left:100%}
.start-btn:hover{box-shadow:0 8px 32px var(--gold-glow);transform:translateY(-2px)}

/* ========== ОЙЫН ЭКРАНЫ ========== */
.game-screen{overflow:hidden;display:flex;flex-direction:column;height:100vh}

/* --- Жоғарғы панель --- */
.game-top{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border-bottom:1px solid var(--border2);flex-shrink:0;height:64px;position:relative}
.game-top::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.3}
.round-badge{display:flex;align-items:center;gap:10px;padding:6px 16px;background:var(--gold-dim);border:1px solid var(--border2);border-radius:10px}
.round-num{font-size:.9rem;font-weight:800;color:var(--gold)}
.round-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;font-weight:700;letter-spacing:1px}

.timer-box{display:flex;align-items:center;gap:12px;position:relative}
.timer-display{font-family:'Courier New',monospace;font-size:2.6rem;font-weight:900;color:var(--text);letter-spacing:4px;min-width:130px;text-align:center;transition:color .3s;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.timer-display.warn{color:#ff4444;text-shadow:0 0 20px rgba(255,68,68,.4);animation:timer-blink .5s infinite}
@keyframes timer-blink{0%,100%{opacity:1}50%{opacity:.3}}
.timer-display.idle{color:var(--text3);font-size:2rem;text-shadow:none}

.top-controls{display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;font-family:inherit}
.icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--border2)}
.icon-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px var(--gold-glow2)}

.volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--gold);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* --- Командалар аймағы --- */
.teams-area{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;overflow:hidden;position:relative}

.team-col{display:flex;flex-direction:column;position:relative;overflow:hidden}
.team-col:nth-child(1){background:var(--team1-bg)}
.team-col:nth-child(2){background:var(--team2-bg);border-left:1px solid var(--border);border-right:1px solid var(--border)}
.team-col:nth-child(3){background:var(--team3-bg)}

.team-col::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2}
.team-col:nth-child(1)::before{background:linear-gradient(90deg,transparent,var(--team1),transparent)}
.team-col:nth-child(2)::before{background:linear-gradient(90deg,transparent,var(--team2),transparent)}
.team-col:nth-child(3)::before{background:linear-gradient(90deg,transparent,var(--team3),transparent)}

.team-col::after{content:'';position:absolute;top:4px;left:0;right:0;height:40px;z-index:1;pointer-events:none}
.team-col:nth-child(1)::after{background:linear-gradient(180deg,rgba(212,168,67,.06),transparent)}
.team-col:nth-child(2)::after{background:linear-gradient(180deg,rgba(224,85,85,.06),transparent)}
.team-col:nth-child(3)::after{background:linear-gradient(180deg,rgba(61,184,154,.06),transparent)}

.team-header{padding:12px 18px;background:rgba(0,0,0,.2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:2}
.team-info{display:flex;align-items:center;gap:10px}
.team-icon{font-size:24px}
.team-name{font-size:1rem;font-weight:900;letter-spacing:1px}
.team-col:nth-child(1) .team-name{color:var(--team1)}
.team-col:nth-child(2) .team-name{color:var(--team2)}
.team-col:nth-child(3) .team-name{color:var(--team3)}
.team-score-box{display:flex;align-items:center;gap:8px;padding:4px 12px;background:rgba(0,0,0,.3);border-radius:10px}
.team-score{font-family:'Courier New',monospace;font-size:1.6rem;font-weight:900;color:var(--text);text-shadow:0 2px 8px rgba(0,0,0,.3)}
.score-label{font-size:.6rem;color:var(--text3);text-transform:uppercase;font-weight:700;letter-spacing:1px}

/* --- Сөзді көрсету --- */
.word-reveal{padding:10px 16px;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);text-align:center;flex-shrink:0;min-height:50px;display:flex;align-items:center;justify-content:center}
.word-hidden{padding:9px 24px;background:var(--gold-dim);border:1px dashed var(--gold);border-radius:12px;cursor:pointer;font-size:.85rem;font-weight:800;color:var(--gold);transition:.2s;font-family:inherit;letter-spacing:.5px}
.word-hidden:hover{background:rgba(212,168,67,.2);box-shadow:0 4px 16px var(--gold-glow2)}
.word-shown{font-size:1.15rem;font-weight:900;color:var(--gold);letter-spacing:2px;animation:wordReveal .4s ease;text-shadow:0 2px 12px var(--gold-glow)}
@keyframes wordReveal{0%{opacity:0;transform:scale(.8) rotateX(20deg)}100%{opacity:1;transform:scale(1) rotateX(0)}}
.word-placeholder{font-size:.82rem;color:var(--text3);font-weight:600}

/* --- Canvas --- */
.canvas-area{flex:1;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#f8f4ec,#f0ead8);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.1)}
.draw-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;position:relative;z-index:2}

/* --- Аспап силуэті (canvas фонында) --- */
.instrument-ref{position:absolute;z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.12;transition:opacity .3s}
.canvas-area:hover .instrument-ref{opacity:.06}
.instrument-svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}
.instrument-label{font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}

.instrument-dombra{bottom:8px;right:8px;color:#8b7340}
.instrument-dombra .instrument-svg{height:80px}
.instrument-kobyz{bottom:8px;right:8px;color:#a04040}
.instrument-kobyz .instrument-svg{height:80px}
.instrument-jetigen{bottom:8px;right:8px;color:#2d8a70}
.instrument-jetigen .instrument-svg{width:100px;height:auto}
.instrument-svg-wide{width:100px;height:auto}

/* --- Құралдар панелі --- */
.tools-bar{display:flex;align-items:center;gap:5px;padding:7px 12px;background:rgba(0,0,0,.3);border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;backdrop-filter:blur(8px)}
.tool-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.tool-btn:hover{background:rgba(255,255,255,.1);color:var(--text)}
.tool-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);box-shadow:0 0 8px var(--gold-glow2)}
.tools-sep{width:1px;height:20px;background:var(--border);margin:0 3px;flex-shrink:0}
.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:.15s;flex-shrink:0}
.color-dot:hover{transform:scale(1.15)}
.color-dot.active{border-color:#fff;transform:scale(1.25);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.size-select{padding:5px 8px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.75rem;font-family:inherit;outline:none;cursor:pointer;font-weight:700}

/* --- Тапты батырмасы --- */
.guess-btn-wrap{padding:8px 14px;background:rgba(0,0,0,.3);border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:6px}
.guess-btn{flex:1;padding:12px;border:none;border-radius:12px;font-size:.9rem;font-weight:900;font-family:inherit;cursor:pointer;transition:.2s;letter-spacing:1px;position:relative;overflow:hidden}
.guess-btn-yes{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.team-col:nth-child(1) .guess-btn-yes{background:linear-gradient(135deg,var(--team1),#e8c050)}
.team-col:nth-child(2) .guess-btn-yes{background:linear-gradient(135deg,var(--team2),#e87070)}
.team-col:nth-child(3) .guess-btn-yes{background:linear-gradient(135deg,var(--team3),#50d4b0)}
.guess-btn-yes:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.guess-btn-yes:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.guess-btn-yes::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:.4s}
.guess-btn-yes:not(:disabled):hover::before{left:100%}

/* --- +1 анимациясы --- */
.score-anim{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;font-weight:900;pointer-events:none;z-index:20;animation:scoreUp 1.4s ease-out forwards}
.team-col:nth-child(1) .score-anim{color:var(--team1);text-shadow:0 4px 24px rgba(212,168,67,.5)}
.team-col:nth-child(2) .score-anim{color:var(--team2);text-shadow:0 4px 24px rgba(224,85,85,.5)}
.team-col:nth-child(3) .score-anim{color:var(--team3);text-shadow:0 4px 24px rgba(61,184,154,.5)}
@keyframes scoreUp{0%{opacity:0;transform:translate(-50%,-40%) scale(.3)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}35%{transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-120%) scale(.8)}}

/* ========== ЖҮРГІЗУШІ ПАНЕЛІ ========== */
.host-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border-top:1px solid var(--border2);flex-shrink:0;flex-wrap:wrap;position:relative}
.host-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.2}
.host-btn{padding:8px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s}
.host-btn:hover{background:rgba(255,255,255,.07);color:var(--text);transform:translateY(-1px)}
.host-btn-primary{background:var(--gold-dim);border-color:var(--border2);color:var(--gold)}
.host-btn-primary:hover{background:rgba(212,168,67,.18);box-shadow:0 4px 12px var(--gold-glow2)}
.host-btn-danger{border-color:rgba(224,85,85,.2);color:var(--team2)}
.host-btn-danger:hover{background:rgba(224,85,85,.08)}
.host-sep{width:1px;height:24px;background:var(--border);margin:0 4px}

/* ========== ФИНАЛ ЭКРАНЫ ========== */
.final-screen{display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;overflow-y:auto;position:relative;min-height:100vh}
.final-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(212,168,67,.12),transparent 60%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(224,85,85,.05),transparent),radial-gradient(ellipse 40% 30% at 80% 80%,rgba(61,184,154,.05),transparent)}
.final-card{max-width:720px;width:100%;position:relative;z-index:1}
.final-icon{font-size:80px;margin-bottom:20px;animation:trophy 2s ease-in-out infinite;filter:drop-shadow(0 8px 24px rgba(212,168,67,.3))}
@keyframes trophy{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.08) rotate(-3deg)}75%{transform:scale(1.08) rotate(3deg)}}
.final-title{font-size:2.4rem;font-weight:900;margin-bottom:8px;letter-spacing:3px;
    background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.final-sub{font-size:1.1rem;color:var(--text2);margin-bottom:40px;font-weight:600}

.final-results{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.final-team{display:flex;align-items:center;gap:20px;padding:22px 28px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--radius-lg);transition:.3s;animation:fadeIn .5s ease}
.final-team:nth-child(1){animation-delay:0s}
.final-team:nth-child(2){animation-delay:.15s}
.final-team:nth-child(3){animation-delay:.3s}
.final-team:first-child{border-color:var(--gold);box-shadow:0 8px 32px var(--gold-glow2),inset 0 1px 0 rgba(212,168,67,.1);transform:scale(1.04);background:linear-gradient(135deg,var(--bg3),rgba(212,168,67,.05))}
.final-place{font-size:2.4rem;flex-shrink:0;width:56px;text-align:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.final-team-info{flex:1;text-align:left}
.final-team-name{font-size:1.3rem;font-weight:900;letter-spacing:1px}
.final-team-score{font-family:'Courier New',monospace;font-size:2.2rem;font-weight:900;color:var(--gold);flex-shrink:0;text-shadow:0 2px 12px var(--gold-glow2)}
.final-team-score small{font-size:.8rem;color:var(--text3);font-weight:700;font-family:inherit;margin-left:4px}

.restart-btn{padding:18px 56px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--bg);border:none;border-radius:var(--radius);font-size:1.1rem;font-weight:900;font-family:inherit;cursor:pointer;letter-spacing:2px;transition:.2s;position:relative;overflow:hidden}
.restart-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:.5s}
.restart-btn:hover::before{left:100%}
.restart-btn:hover{box-shadow:0 8px 32px var(--gold-glow);transform:translateY(-2px)}

/* === Confetti === */
.confetti{position:fixed;top:-10px;z-index:100;pointer-events:none;animation:confetti-fall linear forwards}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}80%{opacity:.8}100%{transform:translateY(110vh) rotate(720deg) scale(.4);opacity:0}}

/* === Уақыт аяқталды overlay === */
.time-up-overlay{position:absolute;inset:0;background:rgba(10,8,6,.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:30;animation:fadeIn .4s}
.time-up-text{font-size:2rem;font-weight:900;color:var(--team2);text-align:center;letter-spacing:2px;text-shadow:0 4px 20px rgba(224,85,85,.3)}
.time-up-text span{display:block;font-size:1rem;color:var(--text2);margin-top:12px;font-weight:600;letter-spacing:0}

@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* === Round transition === */
.round-overlay{position:fixed;inset:0;background:rgba(10,8,6,.94);backdrop-filter:blur(8px);z-index:50;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.round-overlay.show{display:flex}
.round-overlay-num{font-size:5rem;font-weight:900;letter-spacing:4px;animation:roundPop .6s ease;
    background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    filter:drop-shadow(0 4px 20px var(--gold-glow))}
@keyframes roundPop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.round-overlay-text{font-size:1.4rem;color:var(--text2);font-weight:800;text-transform:uppercase;letter-spacing:3px}
.round-overlay-answer{margin-top:20px;padding:18px 36px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);text-align:center}
.round-overlay-answer b{display:block;font-size:.7rem;color:var(--text3);text-transform:uppercase;margin-bottom:10px;letter-spacing:2px}
.round-overlay-answer span{font-size:1.3rem;font-weight:900;color:var(--gold);letter-spacing:1px}

/* === Responsive === */
@media(max-width:900px){
    .team-setup{grid-template-columns:1fr}
    .instruments-showcase{grid-template-columns:1fr;gap:10px}
    .showcase-svg{height:50px}
    .showcase-svg-wide{height:30px}
    .teams-area{grid-template-columns:1fr}
    .team-col{border-right:none;border-bottom:1px solid var(--border);max-height:none}
    .tools-bar{padding:4px 6px;gap:3px}
    .tool-btn{width:28px;height:28px;font-size:12px}
    .start-card{padding:24px}
    .start-title{font-size:1.4rem}
    .shanyraq{width:70px;height:70px;font-size:32px}
    .instrument-dombra .instrument-svg,.instrument-kobyz .instrument-svg{height:50px}
    .instrument-jetigen .instrument-svg{width:60px}
}
@media(min-width:1400px){
    .start-card{max-width:900px;padding:56px}
    .start-title{font-size:2.6rem}
    .shanyraq{width:120px;height:120px;font-size:52px}
    .instruments-showcase{gap:20px}
    .showcase-svg{height:100px}
    .showcase-svg-wide{height:60px}
    .showcase-name{font-size:1.15rem}
}

:root{--team4:#819df0;--team4-bg:rgba(129,157,240,.06);--team4-border:rgba(129,157,240,.18)}.team-setup-card:nth-child(4){border-color:var(--team4-border)}.team-setup-card:nth-child(4)::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--team4)}.team-col:nth-child(4){background:var(--team4-bg);border-left:1px solid var(--border)}.team-col:nth-child(4)::before{background:linear-gradient(90deg,transparent,var(--team4),transparent)}.team-col:nth-child(4) .team-name,.team-col:nth-child(4) .score-anim{color:var(--team4)}.team-col:nth-child(4) .guess-btn-yes{background:linear-gradient(135deg,var(--team4),#6478ca)}.final-team:nth-child(4){animation-delay:.45s}.team-col{min-width:0}.team-header{padding:10px;gap:5px}.team-name{font-size:.85rem}.team-info{gap:5px}.tools-bar{padding:6px;gap:4px}@media(max-width:768px){.teams-area{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.team-col{max-height:none;min-height:0}.team-setup{grid-template-columns:repeat(2,minmax(0,1fr))}.team-header{padding:5px}.team-icon{font-size:18px}.team-score{font-size:1.1rem}.team-name{font-size:.7rem}.tools-bar{padding:3px;gap:2px}.tool-btn{width:25px;height:25px;font-size:12px}.guess-btn-wrap{padding:4px}.word-reveal{padding:5px}.team-score-box{padding:3px 5px}}