@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0E1013; --bg-soft:#141820; --panel:#171C24; --panel-hi:#1E242E;
  --line:rgba(255,255,255,0.08); --line-hi:rgba(255,255,255,0.16);
  --crimson:#C81E38; --crimson-d:#8E1226;
  --gold:#D8C08A; --gold-dim:#8E7C55;
  --text:#E7E9EC; --muted:#8B939D; --muted-2:#646C76;
  --ok:#2E9E5B; --warn:#C9A227; --err:#E05260;
  --radius:10px; --shadow:0 10px 30px rgba(0,0,0,0.45);
  --display:'Archivo','Arial Narrow',Arial,sans-serif;
  --body:'Inter',Arial,sans-serif;
  --mono:'JetBrains Mono','Consolas',monospace;

  /* Akcenty graczy: P1 niebieski, P2 czerwony */
  --p1:#3B82C4; --p1-soft:rgba(59,130,196,.13); --p1-line:rgba(59,130,196,.45);
  --p2:#E0344C; --p2-soft:rgba(224,52,76,.13);  --p2-line:rgba(224,52,76,.45);

  /* Atramenty Disney Lorcana */
  --ink-amber:#E8A33D; --ink-amethyst:#9B5DE5; --ink-emerald:#2E9E5B;
  --ink-ruby:#C81E38;  --ink-sapphire:#3B82C4; --ink-steel:#93A1AF;
}

body{background:var(--bg);color:var(--text);font-family:var(--body);
     min-height:100vh;-webkit-font-smoothing:antialiased}
body.centered{display:flex;align-items:center;justify-content:center;padding:20px}
/* Po zalogowaniu panel i historia zmian stoją obok siebie */
body.centered.has-log{align-items:flex-start;gap:18px;padding:36px 20px;flex-wrap:wrap}

/* ============ Historia zmian ============ */
.changelog{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
           padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow);
           display:flex;flex-direction:column;max-height:min(560px,82vh)}
.cl-title{font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;
          letter-spacing:.14em;color:var(--muted-2);margin-bottom:16px;flex:0 0 auto}
.cl-body{overflow-y:auto;min-height:0;padding-right:4px}
.cl-body::-webkit-scrollbar{width:3px}
.cl-body::-webkit-scrollbar-thumb{background:var(--line-hi);border-radius:2px}
.cl-ver{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.cl-ver:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cl-head{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.cl-num{font-family:var(--display);font-size:15px;font-weight:800;color:var(--gold)}
.cl-date{font-family:var(--mono);font-size:10px;color:var(--muted-2);letter-spacing:.06em}
.cl-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.cl-list li{font-size:12.5px;line-height:1.5;color:var(--muted);
            display:flex;align-items:baseline;gap:8px}
.cl-tag{flex:0 0 auto;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
        text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid;
        min-width:62px;text-align:center}
.cl-tag.add{color:var(--ok);border-color:rgba(46,158,91,.4);background:rgba(46,158,91,.09)}
.cl-tag.mod{color:var(--gold);border-color:rgba(216,192,138,.4);background:rgba(216,192,138,.09)}
.cl-tag.fix{color:var(--err);border-color:rgba(224,82,96,.4);background:rgba(224,82,96,.09)}

/* Widok meczu zajmuje dokładnie wysokość okna. Strona się nie przewija —
   przewija się wyłącznie historia, bo to ona rośnie w nieskończoność. */
body.app{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
         --glow-left:var(--p1); --glow-right:var(--p2)}

/* Delikatna poświata przy lewej i prawej krawędzi okna, w barwach graczy
   stojących po danej stronie. Przyklejona do viewportu i pod całą treścią,
   więc nie podświetla samych kadrów. */
body.app::before,body.app::after{content:'';position:fixed;top:0;bottom:0;
      width:170px;pointer-events:none;z-index:0;opacity:.16}
body.app::before{left:0;background:linear-gradient(90deg,
      var(--glow-left) 0%, transparent 100%)}
body.app::after{right:0;background:linear-gradient(270deg,
      var(--glow-right) 0%, transparent 100%)}
/* Tylko elementy układu wychodzą nad poświatę. Selektor musi być wyliczony
   wprost, bo `body.app>*` nadpisywał modalom position:fixed (wyższa
   specyficzność niż .modal-bg) i modal wpadał w przepływ dokumentu. */
body.app>.bar,
body.app>.brandline,
body.app>.notice,
body.app>.room{position:relative;z-index:1}
body.app .bar,body.app .brandline{flex:0 0 auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff}
.link-muted{color:var(--muted);font-size:12px}
.link-muted:hover{color:var(--text)}
button{font-family:inherit;cursor:pointer}

/* ============ Ekran startowy ============ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
       padding:30px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.brand-hero{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:8px}
.brand-hero img{width:76px;height:76px;filter:drop-shadow(0 4px 16px rgba(200,30,56,.35))}
.brand-hero .brand-text{align-items:center;text-align:center}
.brand-hero .brand-name{font-size:20px}
.brand-hero .brand-sub{font-size:11px}
.panel h1{font-family:var(--display);font-size:23px;font-weight:800;
          letter-spacing:.01em;text-align:center}
.panel h1 .accent{color:var(--crimson)}
.sub{color:var(--muted);font-size:13px;margin:6px 0 24px;text-align:center}

/* Nazwa aplikacji z oznaczeniem etapu rozwoju */
.appname{display:flex;align-items:center;justify-content:center;gap:9px;
         font-family:var(--display);font-size:17px;font-weight:700;
         letter-spacing:.02em;margin:10px 0 26px}
.badge-alpha{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;
             text-transform:uppercase;color:var(--gold);padding:3px 8px;border-radius:4px;
             background:rgba(216,192,138,.1);border:1px solid rgba(216,192,138,.35)}
.legal{font-size:10px;color:var(--muted-2);text-align:center;line-height:1.55;
       margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.hint{font-size:11px;color:var(--muted-2);margin-top:12px;line-height:1.6}
.error{background:rgba(224,82,96,.1);border:1px solid rgba(224,82,96,.35);color:#f3a3ab;
       padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:16px}

.me{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg-soft);
    border:1px solid var(--line);border-radius:8px;margin-bottom:20px;font-size:13px}
.me img{border-radius:50%;border:1px solid var(--line-hi)}
.me span{flex:1;font-weight:600}

.stack{display:flex;flex-direction:column;gap:9px}
.stack label{font-family:var(--display);font-size:11px;color:var(--muted);
             text-transform:uppercase;letter-spacing:.12em;font-weight:600}

input{width:100%;background:var(--bg-soft);border:1px solid var(--line-hi);color:var(--text);
      border-radius:8px;padding:11px;font-size:14px;font-family:inherit}
input:focus{outline:none;border-color:var(--crimson)}

.btn-primary,.btn-secondary,.btn-discord{
  display:block;width:100%;text-align:center;border:none;border-radius:8px;
  padding:12px;font-size:13px;font-weight:600;font-family:var(--display);
  letter-spacing:.04em;transition:background .15s,transform .15s,border-color .15s}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:#e02744;transform:translateY(-1px)}
.btn-secondary{background:var(--bg-soft);color:var(--text);border:1px solid var(--line-hi)}
.btn-secondary:hover{border-color:var(--crimson)}
.btn-discord{background:#5865F2;color:#fff;padding:13px;
             display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn-discord:hover{background:#4954d6;transform:translateY(-1px)}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted-2);font-size:11px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

/* ============ Górny pasek ze score ============ */
/* Pasek dzieli się dokładnie tak samo jak treść (scena + panel 290px),
   dzięki czemu wynik wypada idealnie nad linią podziału obrazów graczy. */
.bar{position:relative;display:grid;grid-template-columns:1fr 290px;gap:11px;
     align-items:center;padding:9px 11px;background:var(--panel);
     border-bottom:1px solid var(--line);min-height:58px}
.brand{position:absolute;left:16px;top:50%;transform:translateY(-50%);
       display:flex;align-items:center;gap:12px;z-index:2;pointer-events:none}
.brand img{width:38px;height:38px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--display);font-weight:800;font-size:15px;
            text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
           text-transform:uppercase;color:var(--gold-dim);white-space:nowrap}
.brandline{height:3px;background:linear-gradient(90deg,var(--crimson-d),
           var(--crimson) 35%,var(--gold) 75%,var(--crimson-d))}

.scoreboard{grid-column:1;display:flex;align-items:center;gap:14px;min-width:0;
            padding:0 214px}
/* Wynik zostaje w przepływie, a obie strony mają identyczny flex-basis 0,
   więc box jest wyśrodkowany z konstrukcji układu, a odstępy przy nickach
   są symetryczne same z siebie — bez dobierania wartości na oko.
   Symetryczny padding kontenera robi miejsce na logo i przyciski,
   nie ruszając środka. */
.sb-side{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 0}
.sb-side:first-child{justify-content:flex-end}
.sb-side.right{flex-direction:row-reverse;justify-content:flex-end}
.sb-nick{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:.01em;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.sb-nick.empty{color:var(--muted-2);font-weight:500;font-style:italic}
.sb-side.p1 .sb-nick{color:var(--p1)}
.sb-side.p2 .sb-nick{color:var(--p2)}
.sb-side.p1 .sb-nick.empty,.sb-side.p2 .sb-nick.empty{color:var(--muted-2)}
.sb-nick.you::after{content:'TY';font-size:8px;font-family:var(--mono);letter-spacing:.1em;
                    color:var(--muted-2);border:1px solid var(--line-hi);border-radius:3px;
                    padding:1px 3px;margin-left:6px;vertical-align:middle}
.sb-num.p1{color:var(--p1)} .sb-num.p2{color:var(--p2)}

.inks{display:flex;gap:4px;flex-shrink:0}
.ink-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.ink-amber{background:var(--ink-amber)} .ink-amethyst{background:var(--ink-amethyst)}
.ink-emerald{background:var(--ink-emerald)} .ink-ruby{background:var(--ink-ruby)}
.ink-sapphire{background:var(--ink-sapphire)} .ink-steel{background:var(--ink-steel)}

.sb-score{display:flex;align-items:center;gap:5px;flex-shrink:0;
          background:var(--bg-soft);border:1px solid var(--line-hi);
          border-radius:9px;padding:3px 6px}
.sb-num{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;
        min-width:26px;text-align:center;font-variant-numeric:tabular-nums;
        color:var(--gold);cursor:pointer;user-select:none;border-radius:5px;padding:2px 1px}
.sb-num:hover{background:var(--panel-hi)}
.sb-num.ro{cursor:default}
.sb-num.ro:hover{background:transparent}
.sb-colon{font-family:var(--display);font-size:20px;font-weight:700;color:var(--muted-2)}

.bar-actions{grid-column:2;display:flex;align-items:center;justify-content:flex-end;
             gap:8px;flex-shrink:0}

/* Bez panelu bocznego linia podziału kamer leży na środku okna,
   więc pasek też musi liczyć środek z pełnej szerokości. */
body.split-mode .bar{grid-template-columns:1fr}
body.split-mode .scoreboard{grid-column:1}
body.split-mode .bar-actions{position:absolute;right:14px;top:50%;
             transform:translateY(-50%);grid-column:auto}
body.split-mode .scoreboard{padding:0 214px}
.btn-bar{padding:8px 14px;border-radius:8px;border:1px solid var(--line-hi);
         background:transparent;font-size:12px;font-weight:600;font-family:var(--display);
         letter-spacing:.04em;color:var(--muted);transition:.15s}
.btn-bar:hover{color:#fff;border-color:var(--crimson)}
.btn-bar.done{color:var(--ok);border-color:var(--ok)}
.btn-icon{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-hi);
          background:transparent;color:var(--muted);display:flex;align-items:center;
          justify-content:center;transition:.15s;flex-shrink:0}
.btn-icon:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--panel-hi)}
/* Obraca się sama zębatka, nie ramka przycisku */
/* Przycisk pełnego ekranu: dwie ikony, widoczna zależnie od stanu */
#btn-fullscreen .fs-off,
#btn-fullscreen.is-full .fs-on{display:none}
#btn-fullscreen.is-full .fs-off{display:flex}
#btn-fullscreen span{display:flex;align-items:center;justify-content:center}
#btn-fullscreen:hover svg{transform:scale(1.12)}
#btn-fullscreen.is-full{color:var(--gold);border-color:var(--gold-dim)}

.btn-icon svg{width:16px;height:16px;transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* Obrót dotyczy wyłącznie zębatki; pozostałe ikony tylko lekko rosną */
#btn-settings:hover svg{transform:rotate(60deg)}
#btn-settings:active svg{transform:rotate(60deg) scale(.9)}
#btn-info:hover svg{transform:scale(1.12)}
.btn-icon:active svg{transform:scale(.9)}
/* Licznik widzów na belce */
.viewers{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
         color:var(--muted);cursor:help;flex-shrink:0}
.viewers[hidden]{display:none}
.viewers svg{width:14px;height:14px}
.viewers b{color:var(--text);font-weight:500}

/* Znacznik roli */
.role-tag{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
          padding:2px 6px;border-radius:4px;border:1px solid;flex-shrink:0}
.role-tag.admin{color:var(--crimson);border-color:rgba(200,30,56,.45);background:rgba(200,30,56,.1)}
.role-tag.judge{color:var(--gold);border-color:rgba(216,192,138,.45);background:rgba(216,192,138,.1)}
.role-tag.streamer{color:var(--p1);border-color:rgba(59,130,196,.45);background:rgba(59,130,196,.1)}

/* Ustawienia widowni */
.obs-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer}
.obs-row input{width:auto;accent-color:var(--crimson)}
.pin-row{display:flex;align-items:stretch;gap:8px;margin-top:11px}
.pin-box{flex:1;background:var(--bg-soft);border:1px solid var(--line-hi);border-radius:8px;
         padding:7px 11px;display:flex;flex-direction:column;gap:1px;min-width:0}
.pin-label{font-family:var(--display);font-size:8px;text-transform:uppercase;
           letter-spacing:.13em;color:var(--muted-2);font-weight:700}
.pin-value{font-family:var(--mono);font-size:15px;letter-spacing:.24em;color:var(--muted-2)}
.share-url{font-family:var(--mono);font-size:11px;color:var(--gold);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-value.hidden-pin{color:var(--gold);cursor:pointer}
.pin-value.copied{color:var(--ok)}
.btn-mini{padding:0 12px;border-radius:8px;border:1px solid var(--line-hi);
          background:var(--bg-soft);color:var(--muted);font-family:var(--display);
          font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
          white-space:nowrap;transition:.15s}
.btn-mini:hover{border-color:var(--gold-dim);color:var(--text)}

/* ============ Panel administracyjny ============ */
.adm-h2{font-family:var(--display);font-size:14px;font-weight:700;
        text-transform:uppercase;letter-spacing:.1em;color:var(--text);margin-bottom:8px}
.adm-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
         padding:20px;margin-bottom:26px}
.adm-form{display:flex;gap:9px;margin:14px 0 16px;flex-wrap:wrap}
.adm-form input{flex:1;min-width:200px;max-width:340px;padding:8px 11px;font-size:13px}
.adm-new{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
         background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.4);
         border-radius:8px;padding:11px 14px;margin-bottom:6px}
.adm-new-lbl{font-family:var(--display);font-size:9px;text-transform:uppercase;
             letter-spacing:.13em;color:var(--ok);font-weight:700}
.adm-new code{font-family:var(--mono);font-size:14px;color:var(--gold);letter-spacing:.1em}
.adm-tokens td{vertical-align:middle}
.adm-note code{font-family:var(--mono);font-size:11px;color:var(--gold-dim)}
.btn-mini.danger{color:var(--err);border-color:rgba(224,82,96,.4)}
.btn-mini.danger:hover{background:rgba(224,82,96,.12);border-color:var(--err)}
.adm-picker{position:fixed;right:18px;bottom:18px;background:var(--panel);
            border:1px solid var(--line-hi);border-radius:9px;padding:10px 14px;
            box-shadow:var(--shadow);z-index:20}
.adm-picker label{font-family:var(--display);font-size:9px;text-transform:uppercase;
                  letter-spacing:.12em;color:var(--muted-2);display:flex;
                  flex-direction:column;gap:5px;font-weight:700}
.adm-picker select{background:var(--bg-soft);border:1px solid var(--line-hi);
                   color:var(--text);border-radius:6px;padding:6px 9px;font-size:12px;
                   font-family:var(--body)}
body.admin{min-height:100vh}
.adm-stats{display:flex;gap:16px;flex:1;justify-content:center;flex-wrap:wrap}
.adm-stat{font-size:11px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em}
.adm-stat b{font-family:var(--display);font-size:16px;color:var(--gold);margin-right:4px}
.adm-role{font-family:var(--mono);font-size:10px;color:var(--muted-2)}
.adm-main{max-width:1200px;margin:0 auto;padding:22px 18px 40px}
.adm-note{font-size:11px;color:var(--muted-2);line-height:1.6;margin-bottom:18px}
.adm-empty{color:var(--muted);font-size:13px;text-align:center;padding:40px 0}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{font-family:var(--display);font-size:9px;text-transform:uppercase;
              letter-spacing:.13em;color:var(--muted-2);text-align:left;
              padding:0 10px 9px;border-bottom:1px solid var(--line-hi);font-weight:700}
.adm-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table tbody tr:hover{background:var(--panel)}
.adm-badge{font-family:var(--display);font-size:9px;font-weight:700;text-transform:uppercase;
           letter-spacing:.1em;padding:3px 8px;border-radius:4px;border:1px solid;white-space:nowrap}
.adm-badge.live{color:var(--ok);border-color:rgba(46,158,91,.45);background:rgba(46,158,91,.12)}
.adm-badge.waiting{color:var(--warn);border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.12)}
.adm-badge.idle{color:var(--muted-2);border-color:var(--line-hi)}
.adm-code{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em}
.adm-vs{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.adm-p{display:flex;align-items:center;gap:5px;color:var(--muted-2);font-weight:500}
.adm-p.on{color:var(--text)}
.adm-p.on::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.adm-p.p1.on{color:var(--p1)} .adm-p.p2.on{color:var(--p2)}
.adm-sep{font-size:10px;color:var(--muted-2)}
.adm-score{font-family:var(--display);font-size:17px;font-weight:800;color:var(--gold);
           font-variant-numeric:tabular-nums}
.adm-spec{font-family:var(--mono);font-size:11px;color:var(--muted)}
.adm-priv{color:var(--p1);margin-left:4px}
.adm-off{color:var(--err);font-size:9px;margin-left:6px;text-transform:uppercase;letter-spacing:.08em}
.adm-pin{color:var(--gold-dim);font-size:9px;margin-left:6px;letter-spacing:.08em}
.adm-num{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.adm-links{display:flex;gap:10px;font-size:11px}

@media(max-width:760px){
  .adm-stats{gap:10px}
  .adm-table th:nth-child(6),.adm-table td:nth-child(6){display:none}
}

/* Kropka statusu — pulsuje na zielono, gdy dane płyną */
.sync{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--err);
      box-shadow:0 0 0 3px rgba(224,82,96,.16);cursor:help;transition:.25s}
.sync.on{background:var(--ok);box-shadow:0 0 0 3px rgba(46,158,91,.16);
         animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(46,158,91,.16)}
                 50%{box-shadow:0 0 0 6px rgba(46,158,91,.05)}}

/* Pasek ostrzegawczy nad sceną (np. gracz podglądający transmisję) */
.notice{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
        background:rgba(201,162,39,.1);border-bottom:1px solid rgba(201,162,39,.35);
        color:#e5d3a0;font-size:12.5px;padding:9px 16px;flex:0 0 auto}
.notice strong{color:var(--warn);font-weight:600}
.notice a{margin-left:auto;font-family:var(--display);font-size:11px;font-weight:600;
          text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line-hi);
          padding:5px 12px;border-radius:7px;white-space:nowrap}
.notice a:hover{border-color:var(--gold-dim)}

/* ============ Pokój ============ */
.room{position:relative;display:grid;grid-template-columns:1fr 290px;gap:11px;padding:11px;
      flex:1 1 auto;min-height:0}
.room>*{position:relative;z-index:1}

/* Układ „dwa równe": kamery zajmują całą szerokość, karty lądują pod nimi.
   Panel boczny znika, bo przy podzielonym obrazie zabierał zbyt dużo miejsca. */
.room.split-mode{grid-template-columns:1fr;grid-template-rows:1fr auto}
.room.split-mode .side{display:none}
.bottombar{display:none}
/* Dwie równe połowy — identyczna siatka co kamery, więc karty stykają się
   dokładnie na osi podziału obrazu, tak samo jak wynik w nagłówku. */
/* Wspólna wysokość dolnego paska. Historia i karty biorą ją z tej samej
   zmiennej, więc są równe z definicji — nic tu nie zmienia rozmiaru
   niezależnie od liczby zdarzeń w historii. */
.room.split-mode{--bb-h:172px}
.room.split-mode .bottombar{display:grid;grid-template-columns:1fr 1fr;gap:9px;
       align-items:stretch;height:var(--bb-h);flex:0 0 auto}
.bb-half{display:flex;gap:14px;min-width:0;height:var(--bb-h)}
.bb-half.left{justify-content:flex-end}
.bb-half.right{justify-content:flex-start}
.bb-half.left #log-wrap{flex:1 1 auto;min-width:0;max-width:340px;margin-right:auto}
.bb-half>.bb-card{flex:0 0 auto}
/* Historia jako pierwszy element dolnego paska, obok kart z licznikami */
.room.split-mode #log-wrap{background:var(--panel);border:1px solid var(--line);
       border-radius:9px;padding:11px 14px;overflow:hidden;display:flex;
       flex-direction:column;height:var(--bb-h);min-height:var(--bb-h);
       max-height:var(--bb-h);flex:1 1 auto}
.room.split-mode #log-wrap .log{max-height:none;font-size:10px;flex:1 1 auto;
       min-height:0;overflow-y:auto;overflow-x:auto}

/* Karty nie rozciągają się na całą kolumnę — kompaktowe bloki
   dosunięte do środka, żeby obie patrzyły na siebie przez oś podziału. */
.room.split-mode .bb-card{display:flex;align-items:stretch;height:var(--bb-h);flex:0 0 auto}
/* Karta wypełnia całą wysokość paska, treść wyśrodkowana w pionie */
.room.split-mode .bb-card>.pcard{width:auto;height:100%;justify-content:center}


/* ============ Scena z kamerami ============ */
.stage{position:relative;background:#000;border:1px solid var(--line);
       border-radius:var(--radius);overflow:hidden;min-height:0}
.stage.p1{border-color:var(--p1-line)} .stage.p2{border-color:var(--p2-line)}
.stage.p1 .tile-tag{color:var(--p1)}  .stage.p2 .tile-tag{color:var(--p2)}
.stage iframe{width:100%;height:100%;border:0;display:block}
.cam-main{width:100%;height:100%}
/* Scena w układzie „duży + mały" wyśrodkowuje obraz o proporcji 16:9 */
.stage:not(.split){display:flex;align-items:center;justify-content:center}

/* Układ „dwa równe obrazy".
   Kafelki trzymają proporcję 16:9 i są wyśrodkowane w swojej połowie — obraz
   z kamery wchodzi w nie bez przycinania i bez czarnych pasów. Wysokość
   wynika z szerokości, a max-height chroni przed wyjściem poza scenę
   na niskich oknach. */
.stage.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px;
             align-items:center;justify-items:center;
             background:transparent;border:0;
             /* visible, żeby poświata kafelków nie była obcięta */
             overflow:visible}
.stage.split .tile{position:relative;width:100%;aspect-ratio:16/9;height:auto;
                   max-height:100%;background:#000;border:1px solid var(--line);
                   border-radius:var(--radius);overflow:hidden;min-width:0}
.stage.split .tile iframe{position:absolute;inset:0;width:100%;height:100%}
.tile.p1{border-color:var(--p1-line)} .tile.p2{border-color:var(--p2-line)}
.tile.p1 .tile-tag{color:var(--p1)}   .tile.p2 .tile-tag{color:var(--p2)}
.tile-tag{position:absolute;bottom:8px;left:9px;font-family:var(--display);font-size:11px;
          font-weight:600;letter-spacing:.05em;background:rgba(0,0,0,.65);
          padding:3px 9px;border-radius:5px;max-width:70%;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap;z-index:2}

/* ============ Panel boczny ============ */
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
      padding:15px;overflow:hidden;display:flex;flex-direction:column;gap:16px;min-height:0}
.side>.pcard,.side>#card-opp,.side>#card-my,.side>.waiting,.side>.selfcam{flex:0 0 auto}
/* Historia zjada pozostałą wysokość panelu i to ona ma pasek przewijania */
#log-wrap{flex:1 1 auto;min-height:60px;display:flex;flex-direction:column;overflow:hidden}
.grp-title{font-family:var(--display);font-size:10px;text-transform:uppercase;
           letter-spacing:.14em;color:var(--muted-2);font-weight:700;margin-bottom:9px}

/* ============ Karta gracza ============ */
/* Układ pionowy: nick z kolorami, pod nim duże Lore, niżej Ink.
   Sterowanie to chevrony po obu stronach wartości — bez ramek. */
.pcard{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--line-hi);
       border-radius:9px;padding:13px 14px;display:flex;flex-direction:column;gap:12px}
.pcard.p1{border-left-color:var(--p1);background:linear-gradient(180deg,var(--p1-soft),transparent 55%),var(--bg-soft)}
.pcard.p2{border-left-color:var(--p2);background:linear-gradient(180deg,var(--p2-soft),transparent 55%),var(--bg-soft)}
.pcard-head{display:flex;align-items:center;justify-content:center;
            padding-bottom:10px;border-bottom:1px solid var(--line)}
.pcard-nick{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.02em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
            background:rgba(0,0,0,.42);border:1px solid var(--line);
            padding:4px 13px;border-radius:999px;max-width:100%}
.pcard.p1 .pcard-nick{color:var(--p1)}
.pcard.p2 .pcard-nick{color:var(--p2)}

.pcard-body{display:flex;flex-direction:column;align-items:center;gap:10px}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.stat-k{display:flex;align-items:center;gap:5px;font-family:var(--display);font-weight:700;
        text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:var(--muted-2)}
.stat-k svg{width:11px;height:11px}
.stat.lore .stat-k{color:var(--gold-dim)}
.stat.ink  .stat-k{color:#5E7C96}

/* Wartość ujęta chevronami; szerokość stała, żeby cyfra nie skakała */
.stat-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.stat-v{font-family:var(--display);font-weight:800;line-height:.9;
        font-variant-numeric:tabular-nums;text-align:center}
.stat.lore .stat-v{font-size:64px;color:var(--gold);min-width:88px}
.stat.ink  .stat-v{font-size:32px;color:var(--ink-sapphire);min-width:52px}
.stat-v.editable{cursor:pointer;border-radius:8px;padding:0 4px}
.stat-v.editable:hover{background:var(--panel-hi)}

/* Chevrony — bez tła i obramowania */
.chev{background:none;border:0;padding:0;display:flex;align-items:center;justify-content:center;
      color:var(--muted-2);transition:color .13s,transform .13s;flex:0 0 auto}
.chev:hover{color:var(--text);transform:scale(1.18)}
.chev:active{transform:scale(.9)}
.stat.lore .chev svg{width:26px;height:26px}
.stat.ink  .chev svg{width:17px;height:17px}
.stat.lore .chev:hover{color:var(--gold)}
.stat.ink  .chev:hover{color:var(--ink-sapphire)}
.waiting{font-size:11px;color:var(--muted-2);font-style:italic;margin-top:-8px}

/* ============ Log zdarzeń ============ */
.log{list-style:none;font-family:var(--mono);font-size:10.5px;color:var(--muted);
     line-height:1.75;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.log::-webkit-scrollbar{width:3px}
.log::-webkit-scrollbar-thumb{background:var(--line-hi)}
.log li{padding:1px 0;border-bottom:1px solid rgba(255,255,255,.03);
        white-space:normal;overflow-wrap:anywhere}
.log .t{color:var(--muted-2);margin-right:7px}
.log .up{color:var(--ok)} .log .down{color:var(--err)}
.log .who.p1{color:var(--p1)} .log .who.p2{color:var(--p2)}
.log .sys{color:var(--gold-dim);font-style:italic}
.log-empty{font-family:var(--body);font-size:11px;color:var(--muted-2);font-style:italic}

/* ---- Karta gracza w dolnym pasku (układ podzielony) ---- */
.pcard.compact{padding:11px 18px;gap:9px;min-width:220px}
.pcard.compact .pcard-head{padding-bottom:8px;justify-content:center}
.pcard.compact .pcard-nick{font-size:14px}
.pcard.compact .pcard-body{gap:7px}
.pcard.compact .stat.lore .stat-v{font-size:48px;min-width:70px}
.pcard.compact .stat.ink  .stat-v{font-size:24px;min-width:42px}
.pcard.compact .stat.lore .chev svg{width:22px;height:22px}
.pcard.compact .stat.ink  .chev svg{width:15px;height:15px}
.pcard.compact .stat-k{font-size:8px}

/* Karta w prawej połowie ma akcent przy prawej krawędzi, więc obie karty
   są odbite względem osi podziału — zgodnie z poświatą, która też bije
   od zewnętrznych krawędzi ekranu. */
.bb-half.right .pcard{border-left:1px solid var(--line);
                      border-right:3px solid var(--line-hi)}
.bb-half.right .pcard.p1{border-right-color:var(--p1)}
.bb-half.right .pcard.p2{border-right-color:var(--p2)}

/* ============ Podgląd własnej kamery ============
   Po najechaniu przechodzi na position:fixed — inaczej overflow panelu
   bocznego przycinałby powiększony podgląd niezależnie od z-index. */
.selfcam{margin-top:0;position:relative;flex:0 0 auto}
.selfcam-box{position:relative;width:100%;aspect-ratio:16/9;background:#000;
             border:1px solid var(--line-hi);border-radius:9px;overflow:hidden}
.selfcam.p1 .selfcam-box{border-color:var(--p1-line)}
.selfcam.p2 .selfcam-box{border-color:var(--p2-line)}
.selfcam-box iframe{width:100%;height:100%;border:0;display:block}
.selfcam:hover .selfcam-box{position:fixed;right:18px;bottom:18px;
             width:min(28vw,460px);height:auto;aspect-ratio:16/9;
             z-index:9999;box-shadow:0 20px 50px rgba(0,0,0,.75);border-width:2px}
.selfcam-tag{position:absolute;top:6px;left:7px;font-family:var(--display);font-size:9px;
             font-weight:700;letter-spacing:.1em;text-transform:uppercase;
             background:rgba(0,0,0,.7);padding:2px 8px;border-radius:4px;z-index:2;
             max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selfcam.p1 .selfcam-tag{color:var(--p1)}
.selfcam.p2 .selfcam-tag{color:var(--p2)}

/* ============ Modal ustawień ============ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
          display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--line-hi);border-radius:12px;
       padding:24px;width:100%;max-width:440px;box-shadow:var(--shadow);
       max-height:90vh;overflow-y:auto}
.modal h2{font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:3px}
.modal .sub{text-align:left;margin:0 0 20px}
.mod-sec{margin-bottom:20px}
.mod-sec h3{font-family:var(--display);font-size:10px;text-transform:uppercase;
            letter-spacing:.13em;color:var(--muted-2);font-weight:700;margin-bottom:9px}
.mod-player{font-size:12px;color:var(--muted);margin-bottom:6px}

.ink-pick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ink-opt{width:34px;height:34px;border-radius:50%;border:2px solid transparent;
         cursor:pointer;transition:.15s;opacity:.4}
.ink-opt:hover{opacity:.75;transform:scale(1.08)}
.ink-opt.on{opacity:1;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.14)}

/* Odbicia obrazu w ustawieniach */
.flip-grid{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.flip-lbl{font-size:12px;color:var(--muted)}
.flip-btn{padding:7px 13px;border-radius:7px;border:1px solid var(--line-hi);
          background:var(--bg-soft);color:var(--muted);font-family:var(--display);
          font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
          transition:.15s;white-space:nowrap}
.flip-btn:hover{border-color:var(--gold-dim);color:var(--text)}
.flip-btn.on{border-color:var(--crimson);background:var(--panel-hi);color:var(--text)}

.layout-pick{display:flex;gap:9px}
.layout-opt{flex:1;padding:11px;border-radius:9px;border:1px solid var(--line-hi);
            background:var(--bg-soft);cursor:pointer;text-align:center;transition:.15s}
.layout-opt:hover{border-color:var(--gold-dim)}
.layout-opt.on{border-color:var(--crimson);background:var(--panel-hi)}
.layout-opt svg{width:100%;height:34px;margin-bottom:7px}
.layout-opt span{font-family:var(--display);font-size:10px;font-weight:600;
                 text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.layout-opt.on span{color:var(--text)}

/* Tabela skrótów w modalu ze sterowaniem */
.keys{width:100%;border-collapse:collapse;font-size:12.5px}
.keys td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.keys td:first-child{width:150px;color:var(--text)}
.keys td.mono{font-family:var(--mono);font-size:11px;color:var(--gold-dim)}
kbd{display:inline-block;min-width:24px;text-align:center;font-family:var(--mono);
    font-size:11px;padding:3px 6px;border-radius:5px;background:var(--bg-soft);
    border:1px solid var(--line-hi);border-bottom-width:2px;color:var(--text)}

.modal-actions{display:flex;gap:9px;margin-top:22px}
.btn-danger{flex:1;padding:11px;border-radius:8px;border:1px solid rgba(224,82,96,.4);
            background:transparent;color:var(--err);font-family:var(--display);
            font-size:12px;font-weight:600;letter-spacing:.04em;transition:.15s}
.btn-danger:hover{background:rgba(224,82,96,.12);border-color:var(--err)}
.btn-close{flex:1;padding:11px;border-radius:8px;border:1px solid var(--line-hi);
           background:var(--bg-soft);color:var(--text);font-family:var(--display);
           font-size:12px;font-weight:600;letter-spacing:.04em}
.btn-close:hover{border-color:var(--gold-dim)}

/* Potwierdzenie po zmianie wyniku */
.confirm{background:var(--panel);border:1px solid var(--gold-dim);border-radius:11px;
         padding:20px 22px;max-width:360px;text-align:center;box-shadow:var(--shadow)}
.confirm p{font-size:14px;margin-bottom:16px;line-height:1.5}
.confirm .row{display:flex;gap:9px}
.confirm button{flex:1;padding:10px;border-radius:8px;font-family:var(--display);
                font-size:12px;font-weight:600;letter-spacing:.04em;border:1px solid var(--line-hi)}
.confirm .yes{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.confirm .no{background:transparent;color:var(--muted)}

@media(max-width:900px){
  body.centered.has-log{flex-direction:column;align-items:center}
  .changelog{max-width:420px;max-height:none}
}

@media(max-width:820px){
  body.app{height:auto;overflow:auto;display:block}
  .room{grid-template-columns:1fr;grid-template-rows:minmax(190px,40vh) auto;height:auto}
  body.app::before,body.app::after{width:90px;opacity:.12}
  .side{overflow:visible}
  #log-wrap{min-height:0}
  .log{max-height:200px}
  .stage.split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .sb-nick{max-width:90px;font-size:13px}
  .bar{grid-template-columns:1fr auto;gap:9px;padding:8px 10px}
  .brand-text{display:none}
  .scoreboard,body.split-mode .scoreboard{padding:0 50px}
  .room.split-mode{grid-template-rows:1fr auto}
  /* Na wąskim ekranie historia jest ukryta, więc sztywna wysokość zbędna */
  .room.split-mode{--bb-h:auto}
  .room.split-mode .bottombar{grid-template-columns:1fr;height:auto;min-height:0}
  .room.split-mode #log-wrap{display:none}
  .bb-half{justify-content:center;height:auto}
  .room.split-mode .bb-card{height:auto}
  .pcard.compact{gap:10px;padding:9px 11px}
  .pcard.compact .stat{min-width:62px;padding:5px 7px}
  body.split-mode .sb-side.right{padding-right:0}
  .btn-bar{padding:7px 10px;font-size:11px}
  .selfcam:hover .selfcam-box{width:min(60vw,320px)}
}