@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@500;700;800&display=swap');

:root{
  --ink:#0c1022; --ink-2:#151b35; --ink-3:#232b50; --ink-4:#303a68;
  --paper:#f4f7fb; --paper-line:#dce4f1; --yellow:#f6b60e; --blue:#3e7bfa;
  --red:#ef4a3d; --green:#33c27f; --purple:#9147ff; --pink:#ff2f69;
  --text:#f1f3fb; --text-dim:#9ba5c7; --radius:18px; --radius-sm:11px; --radius-xl:26px;
  --accent-grad:linear-gradient(135deg,#8b5cf6,#ff3d77 65%,#ff8a4c);
  --accent-grad-soft:linear-gradient(135deg,rgba(139,92,246,.18),rgba(255,61,119,.14));
  --surface:rgba(255,255,255,.045); --surface-border:rgba(255,255,255,.08);
  font-size:16px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;height:100%;font-family:'Manrope',sans-serif;background:var(--ink);color:var(--text)}
button,input,select{font-family:'Manrope',sans-serif} button{font-weight:800;border:0;border-radius:999px;cursor:pointer;transition:.15s cubic-bezier(.2,.8,.2,1);color:var(--ink);background:var(--text)}
button:hover{filter:brightness(1.1);transform:translateY(-1px)} button:active{transform:scale(.96)} button:disabled{opacity:.4;cursor:not-allowed;transform:none}
button.primary{background:var(--accent-grad);color:#fff;box-shadow:0 8px 22px rgba(139,92,246,.3)} button.blue{background:var(--blue);color:#fff} button.twitch{background:var(--purple);color:#fff} button.dark{background:var(--ink-4);color:#fff} button.ghost{background:var(--ink-3);color:var(--text)} button.danger{background:var(--red);color:#fff}
input,select{font-weight:700;background:var(--ink-3);border:1px solid #36416d;color:var(--text);border-radius:var(--radius-sm);padding:10px 12px;min-width:0;transition:border-color .15s}
input:focus,select:focus{outline:none;border-color:#8b5cf6}
.card,.stream-card{background:linear-gradient(180deg,rgba(30,37,72,.98),rgba(17,22,45,.98));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);box-shadow:0 14px 34px rgba(0,0,0,.22);position:relative}
.card::before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent);opacity:.5}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;background:var(--ink-3);color:var(--text-dim);font-weight:800;font-size:.78rem;border:1px solid var(--surface-border)}
.scrollbar::-webkit-scrollbar{width:7px}.scrollbar::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:10px}.paper-surface{background:var(--paper);background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);background-size:28px 28px} canvas{display:block;touch-action:none}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent-grad);color:#fff;font-family:'Unbounded';font-weight:900;font-size:1rem;box-shadow:0 0 28px rgba(139,92,246,.32)}.brand-mark.small{width:36px;height:36px;border-radius:11px;font-size:.9rem}

/* HOST */
.host-page{display:flex;height:100vh;overflow:hidden}.host-sidebar{width:390px;flex:0 0 390px;padding:16px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:12px;background:radial-gradient(120% 60% at 0% 0%,rgba(139,92,246,.06),transparent 60%)}.host-sidebar .card{padding:18px}.brand-row{display:flex;align-items:center;gap:10px;padding:4px}.brand-row>div:last-child{display:flex;flex-direction:column}.brand-row b{font-family:'Unbounded';font-size:.98rem;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-row small{color:var(--text-dim);margin-top:2px}.section-eyebrow,.field-label{font-size:.68rem;letter-spacing:.1em;color:var(--text-dim);font-weight:800;text-transform:uppercase}.word-card{text-align:center;overflow:hidden}.word-card .cat{margin-top:8px}.word-card .word{font-family:'Unbounded';font-size:1.75rem;font-weight:900;margin-top:12px;word-break:break-word;background:linear-gradient(180deg,#fff,#c9cff0);-webkit-background-clip:text;background-clip:text;color:transparent}.word-card .hint{margin-top:10px;color:var(--text-dim);letter-spacing:4px;font-family:'Unbounded';font-size:.8rem;min-height:1.2em}
.timer-row{display:flex;gap:12px;align-items:center}.timer-num{font-family:'Unbounded';font-size:1.75rem;min-width:58px}.timer-bar{height:12px;flex:1;background:var(--ink-3);border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.timer-fill{height:100%;width:100%;background:var(--accent-grad);transition:width .3s linear,background .2s;border-radius:999px}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn-row button{flex:1;min-width:100px;padding:12px 10px}.btn-row.compact button{min-width:90px}.top-gap{margin-top:10px}.mini-field{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:.72rem;font-weight:800}.mini-field input{width:72px;padding:8px;border-radius:12px}.switch-grid{display:grid;gap:8px}.switch-line{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--text-dim);font-weight:700}.switch-line input{accent-color:#8b5cf6;width:17px;height:17px}.custom-word,.inline-input{display:flex;gap:7px}.custom-word input,.inline-input input{flex:1;border-radius:12px}.custom-word button,.inline-input button{padding:9px 14px}.controls-card select{width:100%;margin-top:6px;border-radius:12px}.connection-head,.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.connection-head b,.card-title-row h3{font-size:.92rem}.connection-head span,.card-title-row span{color:var(--text-dim);font-size:.68rem}.status-line{display:flex;align-items:center;margin-top:9px;font-size:.76rem;color:var(--text-dim)}.status-dot{width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--red)}.status-dot.on{background:var(--green);box-shadow:0 0 12px rgba(51,194,127,.55)}.status-dot.wait{background:var(--yellow)}
.leader-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.leader-list li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;padding:9px 10px;background:var(--ink-3);border-radius:12px;font-size:.78rem}.leader-list .platform-badge{font-size:.7rem}.leader-list .score{color:var(--yellow);font-weight:900}.host-log-card{min-height:150px}.host-log{height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;font-size:.72rem;color:var(--text-dim)}.host-log b{color:var(--text)}
.host-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px}.host-toolbar{padding:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:var(--radius-xl)}.tool-group,.history-group,.color-group,.sizes,.swatches{display:flex;gap:5px;align-items:center}.tool-group,.history-group{background:rgba(255,255,255,.03);padding:5px;border-radius:16px;border:1px solid var(--surface-border)}.tool-btn{padding:9px 11px;background:transparent;color:var(--text-dim);font-size:.72rem;border-radius:12px;box-shadow:none}.tool-btn:hover{background:rgba(255,255,255,.06);color:var(--text);transform:none}.tool-btn.active{background:var(--accent-grad);color:#fff;box-shadow:0 6px 16px rgba(139,92,246,.35)}.tool-btn.danger-soft{color:#ffb2aa}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:transform .12s}.swatch:hover{transform:scale(1.1)}.swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(139,92,246,.6)}.color-picker-wrap{width:30px;height:30px;display:grid;place-items:center;position:relative;border-radius:10px;background:var(--ink-3);overflow:hidden;cursor:pointer}.color-picker-wrap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.color-picker-wrap span{font-weight:900}.size-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink-3);cursor:pointer;transition:transform .12s}.size-dot:hover{transform:scale(1.08)}.size-dot.active{outline:2px solid #8b5cf6;outline-offset:1px}.size-dot i{display:block;border-radius:50%;background:var(--text)}.canvas-header{display:flex;justify-content:space-between;align-items:end;padding:0 4px}.canvas-header>div:first-child{display:flex;gap:10px;align-items:baseline}.canvas-header span,.kbd-hints{color:var(--text-dim);font-size:.72rem}kbd{background:var(--ink-3);border:1px solid var(--ink-4);padding:2px 6px;border-radius:6px}.host-canvas-wrap{flex:1;min-height:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06)}#host-canvas{width:100%;height:100%;cursor:crosshair}

/* BOARD */
.board-page{background:transparent;overflow:hidden}.board-stage{width:100vw;height:100vh;padding:14px;background:radial-gradient(circle at 50% -20%,rgba(139,92,246,.18),transparent 40%),radial-gradient(circle at 100% 100%,rgba(255,61,119,.1),transparent 45%),linear-gradient(180deg,rgba(8,12,27,.96),rgba(11,15,31,.96));display:flex;flex-direction:column;gap:12px}.board-topbar{height:66px;display:grid;grid-template-columns:260px 1fr 420px;align-items:center;gap:14px}.board-brand{display:flex;align-items:center;gap:9px}.board-brand>div{display:flex;flex-direction:column}.board-brand b{font-family:'Unbounded';font-size:.86rem;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.board-brand small{font-size:.7rem;color:var(--text-dim)}.board-round-meta{display:flex;align-items:center;justify-content:center;gap:10px}.cat-chip{color:#fff;background:var(--accent-grad-soft);border:1px solid rgba(139,92,246,.4)}.hint-chip{font-family:'Unbounded';letter-spacing:4px;color:#fff;min-width:240px}.timer-wrap{display:grid;grid-template-columns:auto 52px 1fr;align-items:center;gap:9px}.timer-state{font-size:.65rem;font-weight:900;color:var(--text-dim);letter-spacing:.09em}.timer-num{font-family:'Unbounded';font-size:1.2rem;text-align:center;background:var(--ink-2);padding:7px;border-radius:10px}.timer-track{height:11px;background:var(--ink-2);border-radius:999px;overflow:hidden}.timer-fill{height:100%;width:100%;background:var(--accent-grad);transition:width .3s linear,background .2s}
.board-grid{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr) 330px;gap:12px}.board-left,.board-right{display:flex;flex-direction:column;gap:12px;min-height:0}.stream-card{padding:14px;border-radius:var(--radius-xl)}.panel-title{display:flex;justify-content:space-between;align-items:center;font-family:'Unbounded';font-size:.68rem;margin-bottom:11px}.panel-title small{font-family:'Manrope';font-size:.62rem;color:var(--text-dim)}.leaderboard-card{flex:1;min-height:0}.board-leader-list{list-style:none!important;counter-reset:rank;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.board-leader-list li::marker{content:'';font-size:0;color:transparent}.board-leader-list li{counter-increment:rank;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:9px 10px;background:var(--ink-3);border-radius:12px;font-size:.76rem}.board-leader-list li:before{content:counter(rank);display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--ink-4);font-weight:900;color:var(--text-dim)}.board-leader-list li:first-child{background:var(--accent-grad-soft);border:1px solid rgba(139,92,246,.3)}.board-leader-list li:first-child:before{background:var(--accent-grad);color:#fff}.board-leader-list .viewer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-leader-list .score{color:var(--yellow);font-weight:900}.platform-icon{margin-right:5px}.rules-card{flex:0 0 auto}.rule{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start;margin:8px 0;color:var(--text-dim);font-size:.7rem;line-height:1.35}.rule b{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:var(--ink-3);color:var(--text)}.rule.overtime-rule b{color:var(--yellow)}
.board-center{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.board-canvas-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--radius-xl);box-shadow:0 20px 55px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06)}#board-canvas{width:100%;height:100%}.canvas-watermark{position:absolute;right:15px;bottom:12px;color:rgba(16,21,42,.18);font-family:'Unbounded';font-weight:900;font-size:.8rem;pointer-events:none}.chat-card{flex:1;min-height:0;display:flex;flex-direction:column}.twitch-chat-card{border-top:2px solid var(--purple)}.tiktok-chat-card{border-top:2px solid var(--pink)}.chat-list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}.chat-msg{font-size:.72rem;line-height:1.28;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.035);animation:chatIn .18s ease}.chat-msg b{display:block;font-size:.68rem;margin-bottom:2px}.chat-msg.twitch b{color:#b99aff}.chat-msg.tiktok b{color:#ff7e9f}@keyframes chatIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.toast{position:absolute;left:50%;bottom:35px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--ink-2);border:1px solid var(--ink-4);padding:12px 18px;border-radius:999px;font-family:'Unbounded';font-size:.85rem;transition:.22s ease;z-index:20}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.timeup{border-color:var(--red)}
.winner-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,9,20,.58);backdrop-filter:blur(5px);z-index:30;opacity:0;pointer-events:none;transition:opacity .22s}.winner-overlay.show{opacity:1}.winner-box{position:relative;width:min(620px,70vw);padding:34px;text-align:center;border-radius:28px;background:linear-gradient(180deg,#202951,#12172f);border:3px solid transparent;background-image:linear-gradient(180deg,#202951,#12172f),var(--accent-grad);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 35px 90px rgba(0,0,0,.5),0 0 55px rgba(139,92,246,.25);transform:scale(.78) translateY(20px);transition:.28s cubic-bezier(.2,.9,.2,1.2)}.winner-overlay.show .winner-box{transform:scale(1) translateY(0)}.winner-kicker{font-family:'Unbounded';font-weight:900;color:var(--yellow);font-size:1.1rem}.winner-name{font-family:'Unbounded';font-size:3rem;font-weight:900;margin:13px 0 6px;word-break:break-word}.winner-platform{color:var(--text-dim);font-weight:800}.winner-points{display:inline-block;margin-top:15px;padding:9px 16px;border-radius:999px;background:rgba(246,182,14,.12);color:var(--yellow);font-family:'Unbounded';font-size:1.15rem}.winner-word{margin-top:12px;color:var(--text-dim)}.winner-congrats{margin-top:16px;font-family:'Unbounded';font-weight:900}.confetti{position:absolute;z-index:31;font-size:2rem;color:var(--yellow);opacity:0}.winner-overlay.show .confetti{animation:confetti 1s ease forwards}.confetti-a{left:28%;top:25%}.confetti-b{right:25%;top:28%;color:var(--blue);animation-delay:.08s!important}.confetti-c{right:31%;bottom:24%;color:var(--pink);animation-delay:.14s!important}@keyframes confetti{0%{opacity:0;transform:scale(.4) rotate(0)}40%{opacity:1}100%{opacity:0;transform:translateY(-80px) scale(1.5) rotate(170deg)}}

@media (max-width:1200px){.host-sidebar{width:350px;flex-basis:350px}.tool-btn{font-size:.65rem}.board-grid{grid-template-columns:220px minmax(0,1fr) 290px}.board-topbar{grid-template-columns:220px 1fr 350px}}

/* PAID HINTS */
.paid-hints-card{display:flex;flex-direction:column;gap:12px}.paid-platform-block{padding:11px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--surface-border)}.paid-platform-block+.paid-platform-block{margin-top:1px}.paid-tier-head{display:grid;grid-template-columns:1fr 58px;gap:8px;margin:9px 0 5px 29px;font-size:.58rem;letter-spacing:.06em;color:var(--text-dim);font-weight:900}.paid-tier-row{display:grid;grid-template-columns:22px 76px 44px 16px 58px;align-items:center;gap:6px;margin-top:6px;font-size:.7rem;color:var(--text-dim);font-weight:800}.paid-tier-row>label{display:grid;place-items:center}.paid-tier-row input[type="checkbox"]{width:16px;height:16px;accent-color:#8b5cf6}.paid-tier-row input[type="number"],.paid-tier-row select{width:100%;padding:7px 8px;border-radius:10px}.paid-note{margin-top:9px;font-size:.64rem;line-height:1.4;color:var(--text-dim)}.paid-note b{color:var(--text)}.twitch-paid-block{border-top:2px solid rgba(145,71,255,.4)}.paid-twitch-row{display:grid;grid-template-columns:auto 88px 1fr;align-items:center;gap:7px;margin-top:8px;color:var(--text-dim);font-size:.72rem;font-weight:800}.paid-twitch-row input{padding:8px;border-radius:10px}.paid-reward-title{width:100%;margin-top:8px;padding:8px 10px;border-radius:10px}

/* Невелика анімація покупки підказки. Стоїть у нижньому лівому куті,
   поза центральним полотном, щоб не заважати малюванню та чатам. */
.paid-hint-toast{position:fixed;left:18px;bottom:18px;z-index:24;width:232px;display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:10px 12px;border-radius:16px;background:rgba(18,24,48,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 38px rgba(0,0,0,.32);opacity:0;pointer-events:none;transform:translateY(14px) scale(.97);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.9,.25,1.15)}.paid-hint-toast.show{opacity:1;transform:translateY(0) scale(1)}.paid-hint-toast.tiktok{border-color:rgba(255,47,105,.48)}.paid-hint-toast.twitch{border-color:rgba(145,71,255,.55)}.paid-hint-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-grad-soft);font-size:1.15rem}.paid-hint-toast b{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Unbounded';font-size:.68rem}.paid-hint-toast span{display:block;margin-top:3px;color:var(--text-dim);font-size:.66rem;font-weight:800}

/* ===== HOST SETTINGS DRAWER v5 ===== */
.brand-row .brand-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.menu-btn,.settings-close{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;padding:0;border-radius:14px;background:var(--ink-3);color:var(--text);font-size:1.25rem;line-height:1;border:1px solid var(--surface-border)}
.menu-btn{margin-left:auto;font-size:1.35rem}
.menu-btn:hover,.settings-close:hover{background:var(--accent-grad);color:#fff;border-color:transparent}
.settings-backdrop{position:fixed;inset:0;z-index:90;background:rgba(4,7,17,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.settings-backdrop.show{opacity:1;pointer-events:auto}
.settings-drawer{position:fixed;z-index:100;left:0;top:0;bottom:0;width:min(440px,calc(100vw - 18px));padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:#0b1023;border-right:1px solid rgba(255,255,255,.09);box-shadow:24px 0 60px rgba(0,0,0,.42);transform:translateX(-104%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.settings-drawer.open{transform:translateX(0)}
.settings-drawer .card{padding:16px;flex:0 0 auto}
.settings-head{position:sticky;top:-16px;z-index:2;margin:-16px -16px 0;padding:18px 16px 13px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:linear-gradient(180deg,rgba(11,16,35,1) 75%,rgba(11,16,35,.92));border-bottom:1px solid rgba(255,255,255,.06)}
.settings-head h2{margin:3px 0 3px;font-family:'Unbounded';font-size:1.08rem;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.settings-head p{margin:0;color:var(--text-dim);font-size:.72rem;line-height:1.35}
.settings-close{font-size:1rem;margin-top:2px}
.paid-note-strong{margin-top:-3px;padding:9px 11px;border-radius:12px;background:var(--accent-grad-soft);border:1px solid rgba(139,92,246,.22)}
.host-log-card{min-height:0;overflow:hidden}
.host-log{height:180px;min-height:180px;max-height:180px;overflow-y:auto;overflow-x:hidden}
.host-log>div{overflow-wrap:anywhere;word-break:break-word}
.host-sidebar>.card{flex:0 0 auto}

@media (max-width:900px){
  .host-page{display:block;overflow:auto}
  .host-sidebar{width:100%;height:auto;max-height:none;overflow:visible;border-right:0;padding-bottom:8px}
  .host-main{height:70vh;min-height:560px}
  .settings-drawer{width:min(440px,calc(100vw - 10px))}
}

/* v7: словник / складність */
.full-select,.word-settings-card select{width:100%;margin-top:6px;border-radius:12px}
.word-settings-card .btn-row button{min-width:180px}

/* ===== v8: оптимізовані OBS сцени + переможець ===== */
.host-main{position:relative}
.host-winner-overlay{position:absolute;inset:14px;z-index:70;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s ease}
.host-winner-overlay.show{opacity:1}
.host-winner-card{width:min(650px,72%);padding:26px 30px;text-align:center;border-radius:28px;background:linear-gradient(180deg,rgba(32,41,81,.98),rgba(18,23,47,.98));border:3px solid transparent;background-image:linear-gradient(180deg,rgba(32,41,81,.98),rgba(18,23,47,.98)),var(--accent-grad);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 55px rgba(139,92,246,.28);transform:translateY(25px) scale(.82);transition:transform .3s cubic-bezier(.2,.9,.2,1.18)}
.host-winner-overlay.show .host-winner-card{transform:none}
.host-winner-card small{display:block;color:var(--yellow);font-family:'Unbounded';font-weight:900;letter-spacing:.08em}
.host-winner-card b{display:block;margin:12px 0 8px;font-family:'Unbounded';font-size:clamp(2rem,4vw,4rem);word-break:break-word}
.host-winner-card span{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(246,182,14,.12);color:var(--yellow);font-weight:900}
.host-winner-card em{display:block;margin-top:10px;color:var(--text-dim);font-style:normal;font-weight:800}
.round-flow-card .mini-field input{width:64px}

/* Базова дошка */
.tiktok-winner-bar{display:none}
.webcam-slot{display:none}
.winner-total{margin-top:8px;color:var(--text-dim);font-weight:800}
.winner-spark{position:absolute;z-index:31;font-size:2rem;color:var(--yellow);opacity:0}
.winner-overlay.show .winner-spark{animation:confetti 1s ease forwards}
.spark-a{left:28%;top:25%}.spark-b{right:25%;top:28%;color:var(--blue);animation-delay:.08s!important}.spark-c{right:31%;bottom:24%;color:var(--pink);animation-delay:.14s!important}

/* Twitch 16:9: широке полотно, компактні топ/чат, прозоре місце під вебку */
.board-page.mode-twitch{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent}.mode-twitch .board-stage{width:min(100vw,177.7778vh);height:min(100vh,56.25vw);aspect-ratio:16/9;flex:0 0 auto;padding:10px;gap:9px}
.mode-twitch .board-topbar{height:56px;grid-template-columns:210px minmax(320px,1fr) 330px;gap:10px}
.mode-twitch .board-brand b{font-size:.72rem}.mode-twitch .board-brand small{font-size:.6rem}.mode-twitch .brand-mark.small{width:32px;height:32px}
.mode-twitch .hint-chip{min-width:190px;padding:5px 10px;font-size:.7rem}.mode-twitch .cat-chip{padding:5px 10px;font-size:.68rem}
.mode-twitch .timer-wrap{grid-template-columns:auto 46px 1fr;gap:7px}.mode-twitch .timer-num{font-size:1rem;padding:6px}.mode-twitch .timer-track{height:9px}
.mode-twitch .board-grid{grid-template-columns:165px minmax(0,1fr) 245px;gap:9px}
.mode-twitch .stream-card{padding:10px;border-radius:14px}.mode-twitch .panel-title{font-size:.58rem;margin-bottom:7px}
.mode-twitch .board-leader-list{gap:5px}.mode-twitch .board-leader-list li{grid-template-columns:22px 1fr auto;gap:5px;padding:6px;border-radius:8px;font-size:.64rem}.mode-twitch .board-leader-list li:before{width:20px;height:20px;border-radius:6px;font-size:.62rem}
.mode-twitch .board-right{gap:9px}.mode-twitch .webcam-slot{display:block;flex:0 0 auto;width:100%;aspect-ratio:16/9;background:transparent;pointer-events:none}
.mode-twitch .twitch-chat-card,.mode-twitch .tiktok-chat-card{display:flex;flex:1;min-height:0}
.mode-twitch .chat-list{gap:5px}.mode-twitch .chat-msg{padding:5px 6px;border-radius:7px;font-size:.61rem;line-height:1.2}.mode-twitch .chat-msg b{font-size:.59rem;margin-bottom:1px}
.mode-twitch .board-canvas-frame{border-radius:14px}
.mode-twitch .winner-box{width:min(560px,56vw);padding:26px}.mode-twitch .winner-name{font-size:2.45rem}

/* TikTok 9:16: тільки полотно + переможець зверху.
   Сама сцена завжди залишається 9:16 навіть якщо URL відкрили у широкому браузері.
   Завдяки цьому редактор і реальний OBS мають однакову геометрію. */
.board-page.mode-tiktok{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent}
.mode-tiktok .board-stage{
  width:min(100vw,56.25vh);
  height:min(100vh,177.7778vw);
  aspect-ratio:9/16;
  flex:0 0 auto;
  padding:0;
  background:transparent;
  gap:0;
}
.mode-tiktok .board-topbar,.mode-tiktok .board-left,.mode-tiktok .board-right{display:none!important}
.mode-tiktok .tiktok-winner-bar{height:88px;flex:0 0 88px;display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:10px 18px;background:linear-gradient(180deg,rgba(12,16,34,.96),rgba(12,16,34,.9));border-bottom:2px solid rgba(246,182,14,.8);text-align:left;overflow:hidden}
.mode-tiktok .tiktok-winner-bar small{display:block;color:var(--text-dim);font-size:.62rem;font-weight:900;letter-spacing:.08em}.mode-tiktok .tiktok-winner-bar b{display:block;margin-top:3px;font-family:'Unbounded';font-size:clamp(1rem,4vw,1.35rem);max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mode-tiktok .tiktok-winner-bar strong{color:var(--yellow);font-family:'Unbounded';font-size:1rem;white-space:nowrap}.mode-tiktok .tiktok-winner-crown{font-size:1.8rem}
.mode-tiktok .tiktok-winner-bar.celebrate{animation:tiktokWinnerPulse .7s ease 3}
@keyframes tiktokWinnerPulse{0%,100%{box-shadow:none}50%{box-shadow:0 10px 45px rgba(246,182,14,.38);background:linear-gradient(180deg,rgba(44,36,25,.98),rgba(12,16,34,.94))}}
.mode-tiktok .board-grid{display:block;flex:1;min-height:0}.mode-tiktok .board-center{width:100%;height:100%;padding:10px}.mode-tiktok .board-canvas-frame{width:100%;height:100%;border-radius:22px;box-shadow:0 14px 45px rgba(0,0,0,.25)}
.mode-tiktok .winner-overlay{display:none}.mode-tiktok .toast{bottom:22px;max-width:88vw;text-align:center;font-size:.72rem}.mode-tiktok .paid-hint-toast{left:50%;bottom:18px;transform:translateX(-50%) translateY(14px) scale(.97)}.mode-tiktok .paid-hint-toast.show{transform:translateX(-50%) translateY(0) scale(1)}

@media (max-width:1200px){
  .mode-twitch .board-grid{grid-template-columns:145px minmax(0,1fr) 215px}
  .mode-twitch .board-topbar{grid-template-columns:185px minmax(280px,1fr) 285px}
}

/* =======================================================================
   LANDING PAGE — КАРАКУЛІ
   ======================================================================= */
.landing-page{background:var(--ink);min-height:100%;overflow-x:hidden}
.pill-btn{border-radius:999px;padding:13px 22px;font-weight:800;font-size:.86rem;letter-spacing:.01em}
.pill-btn.lg{padding:16px 30px;font-size:1rem}
button.primary{background:var(--yellow);color:var(--ink)}
button.primary.pill-btn{background:var(--accent-grad);color:#fff;box-shadow:0 10px 30px rgba(139,92,246,.28)}
button.twitch.pill-btn{background:var(--ink-3);color:var(--text);border:1px solid var(--surface-border)}
button.twitch.pill-btn:hover{background:var(--purple);color:#fff}
a.ghost.pill-btn{background:var(--surface);color:var(--text);border:1px solid var(--surface-border);display:inline-flex;align-items:center;text-decoration:none}
a.ghost.pill-btn:hover{background:var(--ink-3)}

.section-inner{max-width:1180px;margin:0 auto;padding:0 26px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(9,12,26,.55);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.site-header.scrolled{border-color:rgba(255,255,255,.08);background:rgba(9,12,26,.85)}
.site-header-inner{max-width:1180px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;gap:26px}
.logo-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-grad);font-size:1.1rem;box-shadow:0 8px 22px rgba(139,92,246,.3)}
.logo-mark.small{width:34px;height:34px;border-radius:10px;font-size:1rem}
.logo-word{font-family:'Unbounded';font-weight:900;font-size:1rem;letter-spacing:.02em}
.site-nav{display:flex;gap:22px;flex:1}
.site-nav a{color:var(--text-dim);text-decoration:none;font-weight:700;font-size:.86rem;transition:color .15s}
.site-nav a:hover{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:10px}

.hero{position:relative;padding:96px 26px 80px;text-align:center;overflow:hidden}
.hero-glow{position:absolute;inset:-30% -10% auto -10%;height:640px;background:radial-gradient(60% 60% at 30% 20%,rgba(139,92,246,.32),transparent 70%),radial-gradient(50% 50% at 75% 10%,rgba(255,61,119,.24),transparent 70%);filter:blur(10px);pointer-events:none;z-index:0}
.hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.eyebrow-chip{display:inline-flex;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--surface-border);font-size:.78rem;font-weight:800;color:var(--text-dim)}
.hero h1{font-family:'Unbounded';font-weight:900;font-size:clamp(3rem,9vw,5.6rem);margin:6px 0 0;line-height:1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--text-dim);font-size:1.08rem;line-height:1.55;max-width:560px}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hero-note{color:var(--text-dim);font-size:.78rem;margin-top:2px}

.section-head{text-align:center;max-width:620px;margin:0 auto 34px;display:flex;flex-direction:column;gap:8px}
.section-head h2{font-family:'Unbounded';font-size:1.9rem;margin:0;display:flex;align-items:center;justify-content:center;gap:10px}
.section-head p{color:var(--text-dim);margin:0}
.live-section,.how-section,.features-section{padding:74px 0}
.live-section{background:linear-gradient(180deg,transparent,rgba(139,92,246,.05),transparent)}
.live-dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(51,194,127,.6);animation:liveDotPulse 1.8s infinite}
@keyframes liveDotPulse{0%{box-shadow:0 0 0 0 rgba(51,194,127,.55)}70%{box-shadow:0 0 0 10px rgba(51,194,127,0)}100%{box-shadow:0 0 0 0 rgba(51,194,127,0)}}

.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.live-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 20px;border-radius:var(--radius-xl);background:var(--surface);border:1px dashed var(--surface-border);color:var(--text-dim);text-align:center}
.live-empty-emoji{font-size:2rem}
.live-empty b{color:var(--text);font-size:1.02rem}
.streamer-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(27,34,67,.9),rgba(18,24,48,.94));border:1px solid var(--surface-border);text-decoration:none;color:var(--text);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.streamer-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.5);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.streamer-live-badge{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;font-size:.6rem;font-weight:900;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.streamer-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--accent-grad);display:grid;place-items:center;font-family:'Unbounded';font-weight:900;color:#fff;border:2px solid rgba(255,255,255,.15)}
.streamer-avatar img{width:100%;height:100%;object-fit:cover}
.streamer-name{font-weight:800;text-align:center;word-break:break-word}
.streamer-cta{font-size:.72rem;color:var(--text-dim);font-weight:700}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-card{padding:26px 22px;border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--surface-border);display:flex;flex-direction:column;gap:8px}
.how-num{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-grad-soft);color:var(--text);font-family:'Unbounded';font-weight:900}
.how-card b{font-size:1.05rem}
.how-card p{margin:0;color:var(--text-dim);font-size:.88rem;line-height:1.5}

.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature-card{padding:20px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--surface-border);display:flex;flex-direction:column;gap:6px}
.feature-card span{font-size:1.5rem}
.feature-card b{font-size:.92rem}
.feature-card p{margin:0;color:var(--text-dim);font-size:.8rem;line-height:1.45}

.site-footer{padding:46px 0 30px;border-top:1px solid var(--surface-border);margin-top:20px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand b{display:block;font-family:'Unbounded';font-size:.92rem}
.footer-brand small{color:var(--text-dim)}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-link{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--surface-border);color:var(--text);text-decoration:none;font-weight:700;font-size:.82rem;transition:.15s}
.footer-link.twitch-link:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.footer-link.tg-link:hover{background:#2aa9e0;color:#fff;border-color:#2aa9e0}
.footer-copy{width:100%;color:var(--text-dim);font-size:.74rem;text-align:center;margin-top:8px}

@media (max-width:900px){
  .site-nav{display:none}
  .how-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:70px 20px 56px}
}
@media (max-width:560px){
  .features-grid{grid-template-columns:1fr}
}

/* Бренд-посилання у панелі ведучого (тепер клікабельне "на головну") */
a.brand-mark{text-decoration:none;display:grid;place-items:center}

/* =======================================================================
   KARAKULI v10 additions: settings tabs, OBS editor, brush stabilizer
   ======================================================================= */
.settings-drawer{width:min(760px,calc(100vw - 18px))}
.settings-tabs{position:sticky;top:76px;z-index:3;display:flex;gap:8px;padding:10px 0 12px;background:#0b1023}
.settings-tab{flex:1;padding:11px 16px;border-radius:14px;background:var(--ink-3);color:var(--text-dim);border:1px solid var(--surface-border)}
.settings-tab.active{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(139,92,246,.2)}
.settings-tab-panel{display:none;flex-direction:column;gap:12px}
.settings-tab-panel.active{display:flex}
.word-history-stats{margin-top:10px;padding:9px 11px;border-radius:12px;background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.2);color:var(--text-dim);font-size:.74rem;font-weight:800}
.auto-hint-field{transition:opacity .15s}.auto-hint-field.disabled{opacity:.45}
.stabilizer-control{display:grid;grid-template-columns:auto 105px 42px;align-items:center;gap:8px;padding:7px 10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--surface-border);color:var(--text-dim);font-size:.68rem;font-weight:800;white-space:nowrap}
.stabilizer-control input{padding:0;min-width:90px;width:105px;accent-color:#8b5cf6;background:transparent;border:0}
.stabilizer-control b{color:var(--text);font-size:.66rem;text-align:right}
.overlay-mode-tabs{display:flex;gap:8px;margin-bottom:10px}.overlay-mode-btn{flex:1;padding:10px 14px;border-radius:14px;background:var(--ink-3);color:var(--text-dim);border:1px solid var(--surface-border)}.overlay-mode-btn.active{background:var(--accent-grad);color:#fff;border-color:transparent}
.obs-editor-shell{width:100%;margin-top:12px;border-radius:18px;overflow:hidden;background:#080c1a;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 42px rgba(0,0,0,.3);position:relative}
.obs-editor-shell.mode-twitch{aspect-ratio:16/9}.obs-editor-shell.mode-tiktok{aspect-ratio:9/16;max-height:70vh;width:min(390px,100%);margin-left:auto;margin-right:auto}
.obs-editor-shell iframe{position:absolute;left:0;top:0;border:0;background:#090d1d;transform-origin:0 0;will-change:transform}
.obs-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.obs-editor-actions button{padding:11px 10px}
.obs-layout-save-status{margin-top:9px;padding:8px 10px;border-radius:11px;background:rgba(61,214,140,.08);border:1px solid rgba(61,214,140,.18);color:#8fe3b8;font-size:.68rem;font-weight:800;transition:.2s ease}
.obs-layout-save-status.saved{background:rgba(61,214,140,.16);border-color:rgba(61,214,140,.42);color:#b8f5d4}
.room-links-card .inline-input input{font-size:.69rem}

/* Custom OBS layout. The editor converts the visible overlay into absolute blocks. */
.board-stage{position:relative}
.board-stage.custom-layout{display:block!important;padding:0!important;gap:0!important;overflow:hidden}
.board-stage.custom-layout .board-topbar,
.board-stage.custom-layout .board-grid,
.board-stage.custom-layout .board-left,
.board-stage.custom-layout .board-right,
.board-stage.custom-layout .board-center{display:contents!important}
.board-stage.custom-layout [data-layout-id]{position:absolute!important;margin:0!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;box-sizing:border-box}
.board-stage.custom-layout .board-canvas-frame{overflow:hidden}
.board-stage.custom-layout .webcam-slot{aspect-ratio:auto!important}
.board-stage.custom-layout .tiktok-winner-bar{display:flex!important}
.board-stage.custom-layout .board-brand{display:flex!important}
.board-stage.custom-layout .board-round-meta{display:flex!important}
.board-stage.custom-layout .timer-wrap{display:grid!important}
.board-stage.custom-layout .leaderboard-card{display:block!important}
.board-stage.custom-layout .twitch-chat-card,
.board-stage.custom-layout .tiktok-chat-card{display:flex!important}
.board-stage.custom-layout [data-layout-hidden="1"]{display:none!important}

/* У custom-layout кожен блок сам відповідає за свою внутрішню геометрію.
   Так збільшення блока в редакторі реально збільшує його в OBS, а не лише рамку. */
.board-stage.custom-layout [data-layout-id]{container-type:size;overflow:hidden}
.board-stage.custom-layout .board-round-meta{
  display:grid!important;
  grid-template-columns:minmax(0,31%) minmax(0,69%);
  align-items:stretch;
  justify-content:stretch;
  gap:1.2cqw;
  padding:.8cqh .8cqw;
}
.board-stage.custom-layout .board-round-meta .badge{
  width:100%;
  height:100%;
  min-width:0!important;
  max-width:none!important;
  padding:0 2.2cqw!important;
  border-radius:999px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  line-height:1;
}
.board-stage.custom-layout .board-brand{
  align-items:center!important;
  gap:2cqw!important;
  padding:1cqh 1cqw;
}
.board-stage.custom-layout .board-brand .brand-mark.small{
  width:min(62cqh,18cqw)!important;
  height:min(62cqh,18cqw)!important;
  min-width:0!important;
  flex:0 0 auto;
  font-size:min(31cqh,8cqw)!important;
  border-radius:min(18cqh,3cqw)!important;
}
.board-stage.custom-layout .board-brand b{
  font-size:clamp(8px,24cqh,42px)!important;
  line-height:1.05;
}
.board-stage.custom-layout .board-brand small{
  font-size:clamp(7px,17cqh,28px)!important;
  line-height:1.05;
}
.board-stage.custom-layout .timer-wrap{
  grid-template-columns:minmax(0,24%) minmax(0,18%) minmax(0,58%)!important;
  align-items:center!important;
  gap:1.3cqw!important;
  padding:.8cqh .8cqw;
}
.board-stage.custom-layout .timer-state{
  font-size:clamp(7px,22cqh,30px)!important;
  overflow:hidden;
  white-space:nowrap;
}
.board-stage.custom-layout .timer-num{
  font-size:clamp(8px,31cqh,42px)!important;
  padding:0!important;
  height:72cqh;
  display:grid;
  place-items:center;
  border-radius:14cqh!important;
}
.board-stage.custom-layout .timer-track{
  height:max(5px,18cqh)!important;
}
.board-stage.custom-layout .leaderboard-card,
.board-stage.custom-layout .chat-card{
  padding:3.2cqw!important;
  border-radius:5cqw!important;
}
.board-stage.custom-layout .leaderboard-card .panel-title,
.board-stage.custom-layout .chat-card .panel-title{
  font-size:clamp(7px,5.2cqw,24px)!important;
  margin-bottom:2.4cqh!important;
}
.board-stage.custom-layout .leaderboard-card .panel-title small,
.board-stage.custom-layout .chat-card .panel-title small{
  font-size:clamp(6px,4.2cqw,20px)!important;
}
.board-stage.custom-layout .board-leader-list{gap:1.6cqh!important}
.board-stage.custom-layout .board-leader-list{list-style:none!important;margin:0!important;padding:0!important;overflow:hidden!important}
.board-stage.custom-layout .board-leader-list li::marker{content:''!important;color:transparent!important;font-size:0!important}
.board-stage.custom-layout .leaderboard-card{overflow:hidden!important}
.board-stage.custom-layout .board-leader-list li{
  grid-template-columns:minmax(18px,12cqw) 1fr auto!important;
  gap:2cqw!important;
  padding:1.5cqh 2cqw!important;
  border-radius:2.8cqw!important;
  font-size:clamp(8px,4.9cqw,24px)!important;
}
.board-stage.custom-layout .board-leader-list .viewer,.board-stage.custom-layout .board-leader-list .score{line-height:1.08!important}
.board-stage.custom-layout .board-leader-list li:before{
  width:min(10cqw,6cqh)!important;
  height:min(10cqw,6cqh)!important;
  min-width:18px!important;
  min-height:18px!important;
  font-size:clamp(7px,4.4cqw,20px)!important;
}
.board-stage.custom-layout .chat-list{gap:1.4cqh!important}
.board-stage.custom-layout .chat-msg{
  padding:1.4cqh 1.8cqw!important;
  border-radius:2.3cqw!important;
  font-size:clamp(7px,4.2cqw,21px)!important;
  line-height:1.18!important;
}
.board-stage.custom-layout .chat-msg b{
  font-size:clamp(7px,3.8cqw,19px)!important;
}
.board-stage.custom-layout .canvas-watermark{
  right:2cqw!important;
  bottom:2cqh!important;
  font-size:clamp(8px,2.2cqw,28px)!important;
}
.board-stage.custom-layout .tiktok-winner-bar{
  align-items:center!important;
  justify-content:center!important;
  gap:2cqw!important;
  padding:2cqh 3cqw!important;
}
.board-stage.custom-layout .tiktok-winner-bar small{
  font-size:clamp(7px,16cqh,24px)!important;
}
.board-stage.custom-layout .tiktok-winner-bar b{
  font-size:clamp(9px,26cqh,40px)!important;
  max-width:none!important;
}
.board-stage.custom-layout .tiktok-winner-bar em{
  display:block!important;
  margin-top:.7cqh!important;
  color:var(--yellow)!important;
  font-size:clamp(7px,15cqh,24px)!important;
  font-style:normal!important;
  font-weight:900!important;
}
.board-stage.custom-layout .tiktok-winner-bar strong{
  font-size:clamp(8px,21cqh,34px)!important;
}
.board-stage.custom-layout .tiktok-winner-crown{
  font-size:clamp(12px,35cqh,50px)!important;
}

.custom-overlay-element{position:absolute;z-index:18;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;line-height:1.2;padding:8px 10px;text-align:center;overflow:hidden;word-break:break-word;white-space:pre-wrap;box-sizing:border-box}
.custom-overlay-element.custom-text{background:transparent;text-shadow:0 2px 8px rgba(0,0,0,.75);font-family:'Unbounded',sans-serif}
.custom-overlay-element.custom-panel{background:linear-gradient(180deg,rgba(30,37,72,.96),rgba(17,22,45,.96));border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.26)}

.overlay-editor-mode .board-stage{user-select:none}
.overlay-editor-mode [data-layout-id],.overlay-editor-mode .custom-overlay-element{outline:1px dashed rgba(139,92,246,.55);cursor:move}
.overlay-editor-mode [data-layout-id]:hover,.overlay-editor-mode .custom-overlay-element:hover{outline-color:#ff6b9e}
.overlay-editor-mode .layout-selected{outline:3px solid #f6b60e!important;z-index:40!important}
.layout-resize-handle{display:none;position:absolute;right:3px;bottom:3px;width:18px;height:18px;border-radius:50%;background:#f6b60e;border:3px solid #11172e;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:nwse-resize;z-index:100}
.overlay-editor-mode .layout-selected>.layout-resize-handle{display:block}
.overlay-editor-mode .winner-overlay,.overlay-editor-mode .paid-hint-toast,.overlay-editor-mode .toast{pointer-events:none}

.obs-editor-help{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0 2px;padding:8px 10px;border-radius:12px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);color:var(--text-dim);font-size:.68rem;font-weight:800;line-height:1.25}
.obs-editor-help span:last-child{opacity:.78;text-align:right}
.overlay-editor-mode [data-layout-id],.overlay-editor-mode .custom-overlay-element{touch-action:none}
.editor-snap-guide{display:none;position:absolute;z-index:999;pointer-events:none;background:#f6b60e;box-shadow:0 0 0 1px rgba(246,182,14,.2),0 0 12px rgba(246,182,14,.75)}
.editor-snap-guide.show{display:block}
.editor-snap-guide.vertical{top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.editor-snap-guide.horizontal{left:0;right:0;height:1px;transform:translateY(-.5px)}

@media (max-width:820px){
  .settings-drawer{width:calc(100vw - 8px)}
  .settings-tabs{top:78px}
  .obs-editor-actions{grid-template-columns:1fr}
  .obs-editor-help{flex-direction:column;align-items:flex-start}.obs-editor-help span:last-child{text-align:left}
  .stabilizer-control{grid-template-columns:auto 90px 38px}.stabilizer-control input{width:90px}
}


/* v10.5 OBS editor + top1 + word emphasis */
.settings-drawer{width:min(1500px,calc(100vw - 24px))!important;max-width:none!important}
.settings-tab-panel[data-settings-panel="obs"].active{display:block}
.obs-layout-card{padding:18px!important}
.obs-editor-shell.mode-twitch{width:100%;aspect-ratio:16/9;max-height:none!important}
.obs-editor-shell.mode-tiktok{height:min(82vh,980px);width:auto;aspect-ratio:9/16;max-height:none!important}
.obs-font-scale-row{display:grid;grid-template-columns:minmax(180px,auto) minmax(220px,1fr) 64px;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:13px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);font-size:.72rem;font-weight:800;color:var(--text-dim)}
.obs-font-scale-row input{width:100%;accent-color:#8b5cf6}.obs-font-scale-row b{color:var(--text);text-align:right}
.board-top1-strip{display:none}
.mode-twitch .board-top1-strip{height:52px;flex:0 0 52px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:8px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(246,182,14,.15),rgba(139,92,246,.15));border:1px solid rgba(246,182,14,.35);overflow:hidden}
.board-top1-strip .top1-rank{font-family:'Unbounded';font-size:.72rem;color:var(--yellow);font-weight:900;white-space:nowrap}
.board-top1-strip .top1-viewer{font-family:'Unbounded';font-size:1rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-top1-strip .top1-score{font-family:'Unbounded';font-size:.95rem;font-weight:900;color:var(--yellow);white-space:nowrap}
.board-grid{column-gap:22px!important}
.cat-chip{font-size:.84rem!important;font-weight:900}.hint-chip{font-size:1.08rem!important;font-weight:900}
.winner-word{margin-top:18px!important;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(246,182,14,.32);color:#fff!important}
.winner-word small{display:block;font-size:.7rem;color:var(--text-dim);font-weight:900;letter-spacing:.08em;margin-bottom:6px}
.winner-word b{display:block;font-family:'Unbounded';font-size:clamp(1.6rem,3vw,3rem);color:var(--yellow);line-height:1.05}
.host-winner-card em{display:block!important;margin-top:14px!important;padding:12px 16px!important;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(246,182,14,.3);color:var(--yellow)!important;font-family:'Unbounded';font-size:clamp(1.1rem,2.2vw,2rem)!important;font-style:normal;font-weight:900!important}
.board-stage.custom-layout .board-round-meta .badge{font-size:calc(1em * var(--layout-font-scale,1))}
.board-stage.custom-layout .board-top1-strip{display:grid!important;container-type:size;padding:1.5cqh 2cqw!important;border-radius:2.5cqw!important}
.board-stage.custom-layout .board-top1-strip .top1-rank{font-size:clamp(8px,18cqh,34px)!important}
.board-stage.custom-layout .board-top1-strip .top1-viewer{font-size:clamp(10px,28cqh,46px)!important}
.board-stage.custom-layout .board-top1-strip .top1-score{font-size:clamp(9px,24cqh,42px)!important}
@media (max-width:820px){.obs-font-scale-row{grid-template-columns:1fr}.settings-drawer{width:calc(100vw - 8px)!important}}


/* =======================================================================
   v10.6 — OBS readability / exact canvas mirror / moving TOP 1 / cursor
   ======================================================================= */
.board-canvas-frame{display:grid!important;place-items:center!important;background:transparent!important;overflow:hidden!important;flex:0 0 auto}
.board-canvas-surface{position:relative;overflow:hidden;width:100%;height:100%;max-width:100%;max-height:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,21,42,.06);background-color:var(--paper)}
#board-canvas{position:absolute;inset:0;width:100%;height:100%}
.board-canvas-surface .canvas-watermark{z-index:4}
.board-pointer{position:absolute;z-index:12;width:30px;height:38px;left:50%;top:50%;opacity:0;pointer-events:none;transform:translate(-3px,-3px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.board-pointer.show{opacity:1}
.board-pointer svg{display:block;width:100%;height:100%;overflow:visible}
.board-pointer path{fill:#fff;stroke:#0b0e18;stroke-width:2.4;stroke-linejoin:round}

/* Twitch: збільшені базові тексти, щоб їх реально читали після масштабування стріму. */
.mode-twitch .board-stage{padding:12px;gap:10px}
.mode-twitch .board-topbar{height:68px;grid-template-columns:235px minmax(380px,1fr) 355px;gap:12px}
.mode-twitch .board-brand b{font-size:.92rem}.mode-twitch .board-brand small{font-size:.72rem}.mode-twitch .brand-mark.small{width:38px;height:38px}
.mode-twitch .hint-chip{min-width:230px;padding:8px 14px;font-size:1.18rem!important}.mode-twitch .cat-chip{padding:8px 14px;font-size:.9rem!important}
.mode-twitch .timer-state{font-size:.78rem}.mode-twitch .timer-num{font-size:1.28rem;padding:7px}.mode-twitch .timer-track{height:11px}
.mode-twitch .board-grid{grid-template-columns:225px minmax(0,1fr) 305px;gap:12px}
.mode-twitch .stream-card{padding:12px;border-radius:16px}.mode-twitch .panel-title{font-size:.84rem;margin-bottom:9px}.mode-twitch .panel-title small{font-size:.76rem}
.mode-twitch .board-leader-list{gap:7px}.mode-twitch .board-leader-list li{grid-template-columns:27px 1fr auto;gap:7px;padding:9px 10px;border-radius:10px;font-size:1rem}.mode-twitch .board-leader-list li:before{width:24px;height:24px;border-radius:7px;font-size:.82rem}
.mode-twitch .board-right{gap:10px}.mode-twitch .webcam-slot{aspect-ratio:16/9}
.mode-twitch .chat-list{gap:6px}.mode-twitch .chat-msg{padding:7px 8px;border-radius:9px;font-size:.94rem;line-height:1.28}.mode-twitch .chat-msg b{font-size:.86rem;margin-bottom:2px}
.mode-twitch .board-canvas-frame{border-radius:16px}

/* TOP 1 — нижня доріжка. Плашка сама проїжджає справа наліво, а не висить у куті. */
.board-top1-strip{display:none;position:relative;overflow:hidden;background:transparent!important;border:0!important;box-shadow:none!important}
.mode-twitch .board-top1-strip{height:58px;flex:0 0 58px;display:block;padding:4px 0;border-radius:0}
.top1-runner{position:absolute;left:100%;top:4px;height:52px;display:flex;align-items:center;gap:16px;width:max-content;max-width:none;padding:0 22px;border-radius:999px;background:linear-gradient(90deg,rgba(246,182,14,.22),rgba(139,92,246,.24),rgba(255,61,119,.2));border:1px solid rgba(246,182,14,.48);box-shadow:0 10px 26px rgba(0,0,0,.25);white-space:nowrap;animation:top1Travel 14s linear infinite;will-change:left,transform}
.board-top1-strip .top1-rank{font-family:'Unbounded';font-size:.88rem;color:var(--yellow);font-weight:900;white-space:nowrap}
.board-top1-strip .top1-viewer{font-family:'Unbounded';font-size:1.22rem;font-weight:900;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none}
.board-top1-strip .top1-score{font-family:'Unbounded';font-size:1.08rem;font-weight:900;color:var(--yellow);white-space:nowrap}
@keyframes top1Travel{from{left:100%;transform:translateX(12px)}to{left:0;transform:translateX(calc(-100% - 12px))}}

/* У редакторі доріжка рухається всередині саме того нижнього блока, який видно в OBS. */
.board-stage.custom-layout .board-top1-strip{display:block!important;container-type:size;padding:0!important;border-radius:0!important;background:transparent!important}
.board-stage.custom-layout .board-top1-strip .top1-runner{top:10%;height:80%;padding:0 2.2cqw;gap:1.8cqw;border-radius:999px}
.board-stage.custom-layout .board-top1-strip .top1-rank{font-size:clamp(10px,24cqh,42px)!important}
.board-stage.custom-layout .board-top1-strip .top1-viewer{font-size:clamp(12px,34cqh,56px)!important}
.board-stage.custom-layout .board-top1-strip .top1-score{font-size:clamp(11px,29cqh,48px)!important}

@media (max-width:1200px){
  .mode-twitch .board-grid{grid-template-columns:195px minmax(0,1fr) 290px}
  .mode-twitch .board-topbar{grid-template-columns:215px minmax(340px,1fr) 330px}
}
.board-stage.custom-layout .leaderboard-card .board-leader-list li:before{font-size:var(--rank-font-size,clamp(7px,4.4cqw,20px))!important}


/* =======================================================================
   v10.8 PATCH — real px font control + locked clean TikTok scene
   ======================================================================= */

/* Реальний px-контроль. Цифри місць більше не "вибухають" окремо від ніків. */
.board-stage.custom-layout .leaderboard-card .board-leader-list li{
  font-size:var(--layout-font-px,26px)!important;
  grid-template-columns:1.65em minmax(0,1fr) auto!important;
  gap:.45em!important;
  padding:.42em .48em!important;
}
.board-stage.custom-layout .leaderboard-card .board-leader-list li:before{
  width:1.45em!important;height:1.45em!important;min-width:0!important;min-height:0!important;
  font-size:.82em!important;line-height:1!important;
}
.board-stage.custom-layout .leaderboard-card .panel-title{
  font-size:calc(var(--layout-font-px,26px) * .78)!important;
}
.board-stage.custom-layout .leaderboard-card .panel-title small{
  font-size:calc(var(--layout-font-px,26px) * .58)!important;
}
.board-stage.custom-layout .board-leader-list .viewer,
.board-stage.custom-layout .board-leader-list .score{font-size:1em!important;line-height:1.1!important}
.board-stage.custom-layout .board-leader-list .platform-icon{font-size:.78em!important;margin-right:.25em!important}

.board-stage.custom-layout .chat-msg{font-size:var(--layout-font-px,22px)!important}
.board-stage.custom-layout .chat-msg b{font-size:.88em!important}
.board-stage.custom-layout .chat-card .panel-title{font-size:calc(var(--layout-font-px,22px) * .82)!important}
.board-stage.custom-layout .chat-card .panel-title small{font-size:calc(var(--layout-font-px,22px) * .62)!important}

.board-stage.custom-layout .board-top1-strip .top1-rank{font-size:calc(var(--layout-font-px,28px) * .72)!important}
.board-stage.custom-layout .board-top1-strip .top1-viewer{font-size:var(--layout-font-px,28px)!important}
.board-stage.custom-layout .board-top1-strip .top1-score{font-size:calc(var(--layout-font-px,28px) * .88)!important}

.board-stage.custom-layout .board-brand b{font-size:var(--layout-font-px,20px)!important}
.board-stage.custom-layout .board-brand small{font-size:calc(var(--layout-font-px,20px) * .68)!important}
.board-stage.custom-layout .timer-state{font-size:calc(var(--layout-font-px,24px) * .72)!important}
.board-stage.custom-layout .timer-num{font-size:var(--layout-font-px,24px)!important}

/* TikTok жорстко мінімальний: переможець + рухомий TOP 1 + полотно. */
.mode-tiktok .board-stage.custom-layout [data-layout-id="brand"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="round-meta"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="timer"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="leaderboard"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="webcam"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="twitch-chat"],
.mode-tiktok .board-stage.custom-layout [data-layout-id="tiktok-chat"],
.mode-tiktok .board-stage.custom-layout .custom-overlay-element{display:none!important}
.mode-tiktok .board-stage.custom-layout [data-layout-id="winner-ribbon"]{display:flex!important}
.mode-tiktok .board-stage.custom-layout [data-layout-id="leader-top1"]{display:block!important}
.mode-tiktok .board-stage.custom-layout [data-layout-id="canvas"]{display:grid!important}
.mode-tiktok .tiktok-winner-copy{display:flex!important;flex-direction:column!important;min-width:0!important}
.mode-tiktok .tiktok-winner-bar em{display:block!important;margin-top:4px!important;color:var(--yellow)!important;font-style:normal!important;font-weight:900!important;font-size:calc(var(--layout-font-px,24px) * .66)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.mode-tiktok .board-stage.custom-layout .tiktok-winner-bar small{font-size:calc(var(--layout-font-px,24px) * .48)!important}
.mode-tiktok .board-stage.custom-layout .tiktok-winner-bar b{font-size:var(--layout-font-px,24px)!important}
.mode-tiktok .board-stage.custom-layout .tiktok-winner-bar strong{font-size:calc(var(--layout-font-px,24px) * .82)!important}
.mode-tiktok .board-stage.custom-layout .tiktok-winner-crown{font-size:calc(var(--layout-font-px,24px) * 1.2)!important}
.mode-tiktok .board-stage.custom-layout .board-top1-strip .top1-runner{top:8%!important;height:84%!important;padding:0 3.2cqw!important;gap:2.2cqw!important}
.mode-tiktok .board-stage.custom-layout .board-canvas-frame{background:transparent!important}

/* Ручка зміни розміру блока тепер помітна й її легше схопити мишкою. */
.layout-resize-handle{width:26px!important;height:26px!important;right:5px!important;bottom:5px!important;border-width:4px!important}


/* =======================================================================
   Twitch leaderboard usability hotfix — readable names + explicit box size
   ======================================================================= */
.board-stage.custom-layout .leaderboard-card .board-leader-list li{
  grid-template-columns:1.55em minmax(0,1fr)!important;
  align-items:center!important;
  gap:.5em!important;
  padding:.38em .48em!important;
}
.board-stage.custom-layout .leaderboard-card .leader-main{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.12em!important;
  overflow:hidden!important;
}
.board-stage.custom-layout .leaderboard-card .viewer{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:1em!important;
  line-height:1.05!important;
  font-weight:900!important;
}
.board-stage.custom-layout .leaderboard-card .score{
  display:block!important;
  width:100%!important;
  font-size:.72em!important;
  line-height:1!important;
  white-space:nowrap!important;
  color:var(--yellow)!important;
  font-weight:900!important;
}
.board-stage.custom-layout .leaderboard-card .platform-icon{font-size:.7em!important;margin-right:.28em!important}

.obs-block-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.obs-block-size-row{display:grid;grid-template-columns:minmax(120px,auto) minmax(150px,1fr) 54px;gap:10px;align-items:center;padding:10px 12px;border-radius:13px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);font-size:.72rem;font-weight:800;color:var(--text-dim)}
.obs-block-size-row input{width:100%;accent-color:#8b5cf6}.obs-block-size-row b{color:var(--text);text-align:right}
@media(max-width:820px){.obs-block-size-grid{grid-template-columns:1fr}.obs-block-size-row{grid-template-columns:1fr}}


/* =======================================================================
   v13 — stable editor fonts + restored TikTok paper + isolated editors
   ======================================================================= */
.obs-editor-shell iframe[hidden]{display:none!important}

/* TikTok white drawing surface is explicit and cannot inherit the dark stage. */
.mode-tiktok .board-canvas-frame,
.mode-tiktok .board-stage.custom-layout .board-canvas-frame{
  background:var(--paper)!important;
}
.mode-tiktok .board-canvas-surface,
.mode-tiktok #board-canvas-surface{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  background-color:var(--paper)!important;
  background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
}

/* One resize handle per selected block. It stays inside even when panel clips content. */
.layout-resize-handle{
  display:none!important;
  position:absolute!important;
  right:6px!important;
  bottom:6px!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  background:#f6b60e!important;
  border:4px solid #11172e!important;
  box-shadow:0 2px 10px rgba(0,0,0,.55)!important;
  cursor:nwse-resize!important;
  z-index:999!important;
}
.overlay-editor-mode .layout-selected>.layout-resize-handle{display:block!important}

/* Font variables remain as fallbacks only; board.js writes final px directly. */
.board-stage.custom-layout [data-layout-id]{--layout-font-px:inherit}


/* =======================================================================
   v14 — universal editor handle + persistent direct font sizing
   ======================================================================= */
.overlay-editor-mode [data-layout-id],
.overlay-editor-mode .custom-overlay-element{position:absolute!important;}
.overlay-editor-mode .layout-selected{overflow:visible!important;outline:3px solid #f6b60e!important;z-index:60!important;}
.layout-resize-handle{
  appearance:none!important;
  display:none!important;
  position:absolute!important;
  right:6px!important;
  bottom:6px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  margin:0!important;
  border:3px solid #10152a!important;
  border-radius:50%!important;
  background:#f6b60e!important;
  color:#10152a!important;
  font:900 17px/24px Arial,sans-serif!important;
  text-align:center!important;
  box-shadow:0 2px 10px rgba(0,0,0,.55)!important;
  cursor:nwse-resize!important;
  pointer-events:auto!important;
  touch-action:none!important;
  z-index:10000!important;
}
.overlay-editor-mode .layout-selected > .layout-resize-handle{display:block!important;}
/* Keep the selected panel's own content clipped where needed, but never clip its handle. */
.overlay-editor-mode .layout-selected .chat-list,
.overlay-editor-mode .layout-selected .board-leader-list{overflow:hidden!important;}


/* v15.1 minimal patch: square TOP + chat panels only */
.board-stage .leaderboard-card,
.board-stage .chat-card,
.mode-twitch .leaderboard-card,
.mode-twitch .chat-card,
.mode-tiktok .leaderboard-card,
.mode-tiktok .chat-card,
.board-stage.custom-layout .leaderboard-card,
.board-stage.custom-layout .chat-card{
  border-radius:0!important;
}


/* v15.2 — compact TOP visual only. No editor/JS/layout logic touched. */
.mode-twitch .leaderboard-card,
.board-stage.custom-layout .leaderboard-card{
  padding:14px 14px 12px!important;
  border-radius:10px!important;
  overflow:hidden!important;
}

.mode-twitch .leaderboard-card .panel-title,
.board-stage.custom-layout .leaderboard-card .panel-title{
  margin:0 2px 10px!important;
  min-height:28px;
  align-items:center!important;
}

.mode-twitch .leaderboard-card .panel-title span,
.board-stage.custom-layout .leaderboard-card .panel-title span{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1!important;
}

.mode-twitch .leaderboard-card .board-leader-list,
.board-stage.custom-layout .leaderboard-card .board-leader-list{
  width:100%!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
}

.mode-twitch .leaderboard-card .board-leader-list li,
.board-stage.custom-layout .leaderboard-card .board-leader-list li{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:50px;
  padding:8px 10px!important;
  gap:8px!important;
  border-radius:8px!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
}

.mode-twitch .leaderboard-card .board-leader-list li:before,
.board-stage.custom-layout .leaderboard-card .board-leader-list li:before{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border-radius:7px!important;
}

.mode-twitch .leaderboard-card .viewer,
.board-stage.custom-layout .leaderboard-card .viewer{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.mode-twitch .leaderboard-card .score,
.board-stage.custom-layout .leaderboard-card .score{
  display:block!important;
  margin-top:2px!important;
  line-height:1!important;
}

/* Keep the inner list close to the panel edges even when the TOP block is resized. */
.board-stage.custom-layout .leaderboard-card{
  display:flex!important;
  flex-direction:column!important;
}
.board-stage.custom-layout .leaderboard-card .board-leader-list{
  flex:0 0 auto!important;
}


/* =======================================================================
   v17 — compact OBS panels: TOP + Twitch Chat + TikTok Chat only
   Visual overrides only. No editor/resize/font logic.
   ======================================================================= */
.mode-twitch .leaderboard-card,
.mode-twitch .twitch-chat-card,
.mode-twitch .tiktok-chat-card,
.board-stage.custom-layout .leaderboard-card,
.board-stage.custom-layout .twitch-chat-card,
.board-stage.custom-layout .tiktok-chat-card{
  padding:10px 11px!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(25,31,61,.97),rgba(17,22,44,.97))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
}

.mode-twitch .leaderboard-card .panel-title,
.mode-twitch .chat-card .panel-title,
.board-stage.custom-layout .leaderboard-card .panel-title,
.board-stage.custom-layout .chat-card .panel-title{
  min-height:26px!important;
  margin:0 2px 7px!important;
  padding:0 2px 6px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  align-items:center!important;
}

.mode-twitch .leaderboard-card .panel-title span,
.mode-twitch .chat-card .panel-title span,
.board-stage.custom-layout .leaderboard-card .panel-title span,
.board-stage.custom-layout .chat-card .panel-title span{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  line-height:1!important;
}

.mode-twitch .leaderboard-card .panel-title small,
.mode-twitch .chat-card .panel-title small,
.board-stage.custom-layout .leaderboard-card .panel-title small,
.board-stage.custom-layout .chat-card .panel-title small{
  opacity:.68!important;
}

.mode-twitch .leaderboard-card .board-leader-list,
.board-stage.custom-layout .leaderboard-card .board-leader-list{
  width:100%!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
}

.mode-twitch .leaderboard-card .board-leader-list li,
.board-stage.custom-layout .leaderboard-card .board-leader-list li{
  width:100%!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:7px!important;
  padding:6px 8px!important;
  border-radius:6px!important;
  background:rgba(47,58,108,.58)!important;
  border:1px solid rgba(255,255,255,.025)!important;
}

.mode-twitch .leaderboard-card .board-leader-list li:first-child,
.board-stage.custom-layout .leaderboard-card .board-leader-list li:first-child{
  background:linear-gradient(90deg,rgba(134,70,190,.34),rgba(109,62,149,.22))!important;
  border-color:rgba(202,133,255,.30)!important;
}

.mode-twitch .leaderboard-card .board-leader-list li:before,
.board-stage.custom-layout .leaderboard-card .board-leader-list li:before{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  border-radius:5px!important;
}

.mode-twitch .leaderboard-card .viewer,
.board-stage.custom-layout .leaderboard-card .viewer{
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.02!important;
}

.mode-twitch .leaderboard-card .score,
.board-stage.custom-layout .leaderboard-card .score{
  display:block!important;
  margin-top:2px!important;
  line-height:1!important;
}

.mode-twitch .chat-card,
.board-stage.custom-layout .chat-card{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}

.mode-twitch .twitch-chat-card,
.board-stage.custom-layout .twitch-chat-card{
  border-top:2px solid rgba(150,105,255,.78)!important;
}
.mode-twitch .tiktok-chat-card,
.board-stage.custom-layout .tiktok-chat-card{
  border-top:2px solid rgba(255,61,119,.72)!important;
}

.mode-twitch .chat-card .chat-list,
.board-stage.custom-layout .chat-card .chat-list{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:0!important;
  padding:0!important;
  gap:4px!important;
  justify-content:flex-end!important;
}

.mode-twitch .chat-card .chat-msg,
.board-stage.custom-layout .chat-card .chat-msg{
  width:100%!important;
  box-sizing:border-box!important;
  padding:6px 7px!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.025)!important;
  line-height:1.18!important;
}

.mode-twitch .chat-card .chat-msg b,
.board-stage.custom-layout .chat-card .chat-msg b{
  margin-bottom:2px!important;
  line-height:1.05!important;
}


/* v19.1 TikTok winner popup only — Twitch/editor/layout untouched */
.mode-tiktok .winner-overlay{
  display:grid!important;
  place-items:start center!important;
  padding-top:23vh!important;
  background:transparent!important;
  backdrop-filter:none!important;
  z-index:80!important;
}
.mode-tiktok .winner-overlay .winner-box{
  width:min(84vw,820px)!important;
  padding:30px 28px 26px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(30,37,72,.98),rgba(14,19,40,.98))!important;
  border:2px solid rgba(246,182,14,.9)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.58),0 0 38px rgba(246,182,14,.20)!important;
}
.mode-tiktok .winner-overlay .winner-kicker{font-size:clamp(22px,4.2vw,46px)!important;letter-spacing:.03em!important}
.mode-tiktok .winner-overlay .winner-name{font-size:clamp(34px,7vw,76px)!important;margin:14px 0 8px!important;line-height:1.05!important}
.mode-tiktok .winner-overlay .winner-platform{font-size:clamp(16px,2.7vw,28px)!important}
.mode-tiktok .winner-overlay .winner-points{margin-top:14px!important;font-size:clamp(20px,3.5vw,36px)!important}
.mode-tiktok .winner-overlay .winner-total{margin-top:8px!important;font-size:clamp(16px,2.6vw,26px)!important}
.mode-tiktok .winner-overlay .winner-word{margin-top:16px!important;padding:12px 14px!important;border-radius:10px!important}
.mode-tiktok .winner-overlay .winner-word small{font-size:clamp(12px,2vw,20px)!important}
.mode-tiktok .winner-overlay .winner-word b{font-size:clamp(28px,5vw,54px)!important}
.mode-tiktok .winner-overlay .winner-congrats{margin-top:14px!important;font-size:clamp(18px,3vw,30px)!important}

/* =======================================================================
   v23 — TikTok round info + word count + clean top area
   ======================================================================= */
.word-count-chip{
  color:var(--yellow);
  background:rgba(246,182,14,.11);
  border:1px solid rgba(246,182,14,.34);
  font-weight:900;
  white-space:nowrap;
}

/* Третій елемент у round-meta: категорія / слово-підказка / кількість слів. */
.board-stage.custom-layout .board-round-meta{
  grid-template-columns:minmax(0,25%) minmax(0,57%) minmax(0,18%)!important;
}
.board-stage.custom-layout .board-round-meta .word-count-chip{
  font-size:calc(var(--layout-font-px,26px) * .64)!important;
  letter-spacing:0!important;
}
.mode-twitch .word-count-chip{
  padding:5px 10px;
  font-size:.66rem;
}

/* TikTok: прибираємо стару постійну плашку переможця у верхньому лівому куті.
   Сам popup переможця після вгадування лишається окремо й працює як раніше. */
.mode-tiktok .tiktok-winner-bar,
.mode-tiktok .board-stage.custom-layout [data-layout-id="winner-ribbon"]{
  display:none!important;
}

/* TikTok отримує той самий інформаційний блок, що Twitch: категорія + слово + кількість слів. */
.mode-tiktok .board-stage.custom-layout [data-layout-id="round-meta"]{
  display:grid!important;
  grid-template-columns:minmax(0,25%) minmax(0,57%) minmax(0,18%)!important;
  align-items:stretch!important;
  gap:1.1cqw!important;
  padding:.7cqh .7cqw!important;
  z-index:24!important;
}
.mode-tiktok .board-stage.custom-layout [data-layout-id="round-meta"] .badge{
  border-radius:999px!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.mode-tiktok .board-stage.custom-layout #board-cat{
  font-size:calc(var(--layout-font-px,26px) * .68)!important;
  padding:0 1.7cqw!important;
}
.mode-tiktok .board-stage.custom-layout #board-hint{
  font-size:var(--layout-font-px,26px)!important;
  padding:0 1.6cqw!important;
  letter-spacing:max(1px,.12em)!important;
  text-overflow:clip!important;
}
.mode-tiktok .board-stage.custom-layout #board-word-count{
  font-size:calc(var(--layout-font-px,26px) * .62)!important;
  padding:0 1.4cqw!important;
}