:root{
  --bg:#07090b; --panel:#0c0f12; --line:#2b333a; --text:#f2eee7; --muted:#858a8e;
  --red:#ff3d2e; --orange:#ff9838; --green:#94c73d; --cyan:#42c6db; --purple:#cf64dc;
}
*{box-sizing:border-box}
html,body{margin:0;background:transparent;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body.overlay{width:1920px;height:1080px;overflow:hidden;background:transparent}
.overlay #app{width:1920px;height:1080px;padding:14px;background:
  radial-gradient(circle at 50% -10%,rgba(255,90,20,.14),transparent 35%),
  linear-gradient(180deg,rgba(6,8,9,.96),rgba(7,9,10,.94))}
.topbar{height:142px;display:grid;grid-template-columns:1.35fr .9fr 1.45fr;gap:12px}
.topbox,.player-card,.footbox{border:2px solid #34251f;background:linear-gradient(180deg,rgba(18,17,15,.96),rgba(8,10,11,.96));box-shadow:inset 0 0 0 1px #090909,0 0 28px rgba(0,0,0,.35);position:relative;overflow:hidden}
.topbox:before,.player-card:before,.footbox:before{content:"";position:absolute;inset:0;background-image:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.02) 49%,transparent 50%);pointer-events:none}
.catbox{padding:15px 20px}
.cat-title{color:var(--red);font-weight:900;font-size:24px;letter-spacing:1px}
.cat-text{margin-top:8px;color:#d9d4cc;font-size:17px;line-height:1.35}
.brandbox{display:flex;align-items:center;justify-content:center;text-align:center}
.brand{font-size:58px;font-weight:1000;letter-spacing:5px;text-shadow:0 3px 0 #3b3329}
.brand small{display:block;font-size:16px;letter-spacing:2px;color:var(--red);margin-top:2px}
.bunkerbox{padding:14px 18px}
.bunker-title{font-weight:900;color:var(--orange);font-size:21px;margin-bottom:8px}
.bunker-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:15px}
.bunker-cols b{color:#9b9b91;margin-right:4px}
.players-grid{height:790px;margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px}
.player-card{border-color:var(--pc);box-shadow:inset 0 0 0 1px #090909,0 0 22px color-mix(in srgb,var(--pc) 15%,transparent)}
.player-card.out{filter:grayscale(.75);opacity:.6}
.player-card.out .cam:after{content:"ИЗГНАН";position:absolute;inset:0;display:grid;place-items:center;color:#ff3b2f;font-size:56px;font-weight:1000;letter-spacing:4px;background:rgba(0,0,0,.55);transform:rotate(-7deg);text-shadow:0 2px 18px #000}
.phead{height:50px;display:flex;align-items:center;padding:0 13px;border-bottom:1px solid color-mix(in srgb,var(--pc) 50%,#111);background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 22%,#0d0d0d),#0b0d0f)}
.pnum{font-size:31px;font-weight:1000;color:var(--pc);width:58px}
.pname{font-size:20px;font-weight:800;letter-spacing:.5px;flex:1}
.pstatus{font-size:13px;color:#9ea2a4}
.pcontent{display:grid;grid-template-columns:180px 1fr;height:calc(100% - 50px)}
.fields{border-right:1px solid color-mix(in srgb,var(--pc) 34%,#202020);padding:8px}
.field{height:42px;border-bottom:1px solid #2a2928;display:flex;align-items:center;gap:8px;font-size:13px}
.field .label{color:#c9c4bb;flex:1}
.field .value{color:var(--pc);font-weight:800;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camwrap{padding:10px;display:grid;grid-template-rows:1fr 45px;gap:8px}
.cam{position:relative;border:2px solid color-mix(in srgb,var(--pc) 70%,#191919);background:rgba(0,0,0,0);min-height:0}
.cam-label{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);color:#5d6063;font-weight:700;font-size:12px;letter-spacing:1px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{border:1px solid color-mix(in srgb,var(--pc) 55%,#202020);padding:11px 12px;font-size:13px;background:rgba(7,8,9,.75);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fact b{color:#bab5ad;margin-right:8px}.fact span{color:var(--pc);font-weight:800}
.footer{height:110px;margin-top:10px;display:grid;grid-template-columns:1.2fr 1.1fr .75fr 1.2fr;gap:10px}
.footbox{padding:13px 16px;display:flex;align-items:center;gap:15px}
.footbox .big{font-size:25px;font-weight:900;color:var(--red)}
.footbox .small{color:#b7b2aa;font-size:14px;line-height:1.35}
.roundbox{justify-content:center;text-align:center;border-color:#5d231c}
.roundbox .round{font-size:30px;font-weight:1000;color:var(--red)}
.roundbox .phase{font-size:13px;color:#aaa;margin-top:4px}
.vote-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;background:rgba(7,8,9,.97);border:3px solid var(--red);padding:28px 70px;text-align:center;box-shadow:0 0 80px #000}
.vote-banner h2{margin:0;color:var(--red);font-size:40px;letter-spacing:2px}
.vote-banner p{margin:8px 0 0;color:#d7d2ca;font-size:19px}

/* Admin */
body.admin{background:#080b0e;min-height:100vh;color:#eee}
.admin-shell{max-width:1500px;margin:0 auto;padding:28px}
.admin-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #2a3035;padding-bottom:18px}
.eyebrow{color:var(--red);font-weight:900;letter-spacing:2px;font-size:12px}
.admin h1{margin:5px 0 0;font-size:36px}.admin h1 span{color:#697078;font-size:20px}
.admin-links{display:flex;gap:10px}.admin a,.admin button{border:1px solid #343b42;background:#12171b;color:#eee;padding:11px 14px;text-decoration:none;border-radius:7px;cursor:pointer;font-weight:700}
.admin button:hover,.admin a:hover{border-color:#58616a;background:#182026}.admin button.danger{border-color:#652820;color:#ff6b5e}
.control-strip{display:flex;gap:15px;align-items:end;margin:18px 0}.control-strip label,.global-card label{display:flex;flex-direction:column;gap:6px;color:#9ba1a6;font-size:12px;font-weight:700}
.admin input,.admin textarea{background:#0e1215;border:1px solid #303840;color:#f0eee9;border-radius:6px;padding:10px;outline:none}
.admin input:focus,.admin textarea:focus{border-color:#bf4c35}.control-strip input{width:220px}
.global-card{border:1px solid #2c343a;background:#0c1013;padding:18px;border-radius:10px}.global-card h2{margin:0 0 10px;color:#ff744e}
.global-card textarea{width:100%;height:74px;resize:vertical}.bunker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.admin-players{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.admin-player{border:1px solid #2f353b;background:#0c1013;border-radius:10px;overflow:hidden}
.admin-player.out{opacity:.55}.admin-player-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #2c3339}
.admin-player-head strong{font-size:22px;color:var(--pc);width:38px}.admin-player-head input{flex:1;font-size:16px}.admin-player-head .alive{width:110px}
.admin-fields{padding:10px 14px}.admin-row{display:grid;grid-template-columns:130px 1fr 105px;gap:8px;align-items:center;margin:7px 0}.admin-row label{color:#aeb3b6;font-size:12px}.admin-row input{width:100%}.reveal.on{border-color:var(--pc);color:var(--pc);background:#151515}
.player-actions{display:flex;gap:8px;padding:0 14px 14px}.player-actions button{flex:1}


.ninja-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.no-cam{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#343a3e;font-size:20px;font-weight:900;letter-spacing:2px}
.no-cam small{font-size:11px;font-weight:700;letter-spacing:0;color:#555c61;margin-top:5px}
.cam-label{z-index:3;text-shadow:0 1px 4px #000;background:rgba(0,0,0,.4);padding:3px 8px;border-radius:3px}
.ninja-control{padding:11px 14px 4px;border-bottom:1px solid #242b30}
.ninja-control label{display:block;color:#48c9d8;font-size:11px;font-weight:900;margin-bottom:6px}
.ninja-line{display:grid;grid-template-columns:1fr 160px;gap:8px}
.ninja-line input{width:100%;font-size:12px}
.ninja-line button{font-size:11px}
.random-btn{border-color:#77501f!important;color:#ffb24e!important;background:linear-gradient(180deg,#241a0d,#12100d)!important}
.random-btn:hover{border-color:#d28628!important}

/* v3: overlay lies ABOVE six direct VDO.Ninja sources in OBS */
body.overlay{background:transparent!important}
.overlay #app{
  background:rgba(7,9,10,.96);
  position:relative;
}
.cam-transparent{
  background:transparent!important;
  box-shadow:inset 0 0 0 9999px transparent!important;
}
.cam-transparent:before{display:none!important}

.overlay #app{background:transparent!important}
.overlay:before{
 content:"";position:fixed;inset:0;z-index:-20;
 background:transparent;
}
.topbox,.footbox{background:linear-gradient(180deg,rgba(18,17,15,.98),rgba(8,10,11,.98))}
.player-card{background:transparent!important}
.phead,.fields,.facts .fact{background:rgba(8,10,11,.97)}
.pcontent{background:transparent!important}
.fields{border-left:1px solid rgba(20,20,20,.9)}
.camwrap{background:transparent!important}
.cam-transparent{background:transparent!important}

.obs-tools{display:flex;align-items:center;gap:8px;margin-top:8px}
.obs-tools button{font-size:10px;padding:8px 10px}
.obs-tools span{font-size:10px;color:#747d83;margin-left:auto}


/* ===== V4: VDO.Ninja embedded directly in overlay ===== */
body.overlay{background:#07090b!important}
.overlay #app{
  background:
    radial-gradient(circle at 50% -10%,rgba(255,90,20,.14),transparent 35%),
    linear-gradient(180deg,rgba(6,8,9,.96),rgba(7,9,10,.94))!important;
}
.player-card{
  background:linear-gradient(180deg,rgba(18,17,15,.96),rgba(8,10,11,.96))!important;
}
.pcontent,.camwrap{background:transparent!important}
.cam{
  position:relative;
  overflow:hidden;
  background:#050608!important;
}
.vdo-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#050608;
  z-index:1;
}
.cam-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#07090b;
  color:#5f686d;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.5px;
  pointer-events:none;
}
.no-cam{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#3f484d;
  font-size:20px;
  font-weight:900;
  letter-spacing:2px;
}
.no-cam small{
  margin-top:5px;
  font-size:11px;
  letter-spacing:0;
  color:#5c6469;
}
.cam-label{z-index:4!important}
.player-card.out .cam:after{z-index:5}


/* ===== V4.1 responsive 16:9 stage ===== */
html,body.overlay{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#07090b!important;
}
#viewport{
  position:fixed;
  width:1920px;
  height:1080px;
  transform-origin:top left;
}
#viewport #app{
  width:1920px!important;
  height:1080px!important;
}

/* ===== V4.1 voting ===== */
.vote-stage{
  position:absolute;
  z-index:50;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-width:640px;
  background:rgba(6,8,9,.965);
  border:3px solid #ff3d2e;
  box-shadow:0 0 0 1px #000,0 0 80px rgba(0,0,0,.9),0 0 35px rgba(255,61,46,.18);
  padding:26px 34px;
  text-align:center;
}
.vote-kicker{font-size:13px;font-weight:900;letter-spacing:3px;color:#ff8b6f}
.vote-title{font-size:46px;font-weight:1000;letter-spacing:4px;color:#ff3d2e;margin:4px 0 8px}
.vote-sub{font-size:18px;color:#d4cec5}
.vote-results{min-width:760px}
.vote-results-list{margin:18px auto 14px;max-width:650px}
.vote-result-row{
  display:grid;
  grid-template-columns:48px 180px 1fr 42px;
  gap:12px;
  align-items:center;
  height:44px;
  border-bottom:1px solid #292d30;
  text-align:left;
}
.vote-result-row.winner{background:rgba(255,61,46,.10)}
.vote-result-row.tie{background:rgba(255,165,50,.08)}
.vr-num{color:#ff6a50;font-weight:1000;font-size:20px}
.vr-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-bar{height:9px;background:#1a1e21;overflow:hidden}
.vr-bar i{display:block;height:100%;background:#ff4d32}
.vote-result-row b{text-align:right;font-size:22px;color:#fff}
.vote-verdict{
  margin-top:18px;
  border-top:1px solid #47231e;
  padding-top:16px;
  font-size:20px;
  color:#ddd5cb;
}
.vote-verdict b{color:#ff5b40;font-size:26px}
.tie-text{color:#ffae55;font-weight:900}

.voting-admin{margin-top:14px}
.vote-admin-head{display:flex;justify-content:space-between;gap:16px;align-items:center}
.vote-admin-head h2{margin:3px 0 0!important}
.vote-admin-buttons{display:flex;gap:8px;flex-wrap:wrap}
.vote-status{margin:12px 0;color:#aeb5ba;font-size:13px}
.vote-status b{color:#ff6b4f}
.vote-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
.vote-admin-row{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:8px;border:1px solid #252c31;background:#0a0e11;padding:8px;border-radius:6px}
.vote-voter{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vote-voter b{color:#ff694c;font-size:16px;margin-right:5px}
.vote-admin-row select{background:#0e1215;border:1px solid #303840;color:#eee;padding:9px;border-radius:5px}
.vote-count{font-size:11px;color:#858e94;text-align:right}
.vote-count b{color:#fff;font-size:16px}


/* =========================================================
   V4.2 FIXES
   ========================================================= */

/* FIX: v4.1 accidentally applied overflow:hidden to the HTML
   element on every page, which prevented the admin panel
   from scrolling. */
html{
  overflow:auto !important;
  height:auto !important;
}

body.admin{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  min-height:100vh !important;
}

/* Overlay itself must remain a fixed, non-scrollable 16:9 stage. */
body.overlay{
  overflow:hidden !important;
  width:100vw !important;
  height:100vh !important;
}

/* More room for character characteristics. */
.pcontent{
  grid-template-columns:220px 1fr !important;
}

.fields{
  padding:6px 8px !important;
}

.field{
  min-height:42px !important;
  height:42px !important;
  gap:6px !important;
  font-size:12px !important;
}

.field .label{
  flex:0 0 88px !important;
  font-size:11px !important;
  line-height:1.05 !important;
}

.field .value{
  flex:1 1 auto !important;
  max-width:none !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:right !important;
  line-height:1.05 !important;
  font-size:11px !important;
  word-break:break-word !important;
}

/* Keep facts readable as well. */
.fact{
  min-width:0 !important;
  font-size:12px !important;
}

.fact span{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.05 !important;
}

/* Camera itself keeps filling its box without visual stretching. */
.vdo-frame{
  width:100% !important;
  height:100% !important;
}

/* Admin layout: long page must always remain scrollable. */
.admin-shell{
  min-height:max-content !important;
  padding-bottom:80px !important;
}

.admin-players{
  padding-bottom:40px !important;
}