*{box-sizing:border-box}
:root{--bg:#0b0b0b;--panel:#181818;--line:#303030;--text:#f4f4f4;--muted:#929292;--red:#d71920;--red-dark:#4b1519;--green:#16ad58;--green-bg:#0c3b21;--orange:#f0b62d;--blue:#4da5ff}
body{margin:0;background:radial-gradient(circle at 55% -20%,#1b1b1b 0,#0b0b0b 48%);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}
button,input{font:inherit}button{cursor:pointer}
.app{display:flex;min-height:100vh}.sidebar{width:246px;flex:0 0 246px;background:#111;border-right:1px solid #292929;min-height:100vh;padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{padding:0 0 22px;border-bottom:1px solid #2b2b2b}
.brand-lockup{display:flex;flex-direction:column;align-items:flex-start}
.brand-image-window{overflow:hidden;position:relative}
.brand-image{display:block;width:100%;height:auto}
/* The source asset also contains an old subtitle. We crop it here and render the application name as real HTML text. */
.brand-lockup.brand-sidebar .brand-image-window{width:150px;height:55px}
.brand-lockup.brand-sidebar .brand-image{width:150px;transform:translateY(0)}
.brand-lockup.brand-sidebar .brand-subtitle{margin-top:5px;font-size:12px;line-height:1;font-weight:900;letter-spacing:.9px;color:#f2f2f2;white-space:nowrap}
.brand-lockup.brand-preview{align-items:center;margin:0 auto 10px}
.brand-lockup.brand-preview .brand-image-window{width:150px;height:55px}
.brand-lockup.brand-preview .brand-image{width:150px}
.brand-lockup.brand-preview .brand-subtitle{margin-top:5px;font-size:12px;line-height:1;font-weight:900;letter-spacing:1px;color:#f2f2f2}
.brand-lockup.brand-arena{align-items:flex-start}
.brand-lockup.brand-arena .brand-image-window{width:170px;height:62px}
.brand-lockup.brand-arena .brand-image{width:170px}
.brand-lockup.brand-arena .brand-subtitle{margin-top:6px;font-size:13px;line-height:1;font-weight:900;letter-spacing:1.1px;color:#f2f2f2}
.side-label{font-size:12px;color:#777;text-transform:uppercase;margin:22px 5px 9px}.event-name{font-size:20px;font-weight:900;padding:0 5px}.status{padding:7px 5px;color:#28cf70}.status:before{content:"";display:inline-block;width:8px;height:8px;background:#28cf70;border-radius:50%;margin-right:7px}
.nav{margin-top:17px}.nav-item{height:48px;display:flex;align-items:center;gap:11px;padding:0 6px;border-radius:6px;color:#ddd;font-weight:600;margin:3px 0}.nav-item.active{background:linear-gradient(90deg,#681a20,#431518);color:#fff}.nav-num{width:34px;height:34px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;color:#aaa}.active .nav-num{border-color:#777;color:#fff}
.back{margin-top:25px;width:100%;padding:11px;background:#353535;color:#eee;border:0;border-radius:6px;font-weight:800}
.content{flex:1;padding:31px 42px 50px;min-width:0}.inner{max-width:1400px;margin:auto}.eyebrow{color:var(--red);font-weight:900;font-size:13px;text-transform:uppercase}.title{font-size:32px;font-weight:950;margin-top:10px;letter-spacing:-.5px}.topbar{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.actions{display:flex;gap:8px}.btn{border:0;border-radius:5px;background:#353535;color:#fff;padding:10px 15px;font-weight:800}.btn.red{background:var(--red)}.btn.green{background:var(--green)}.btn:disabled{opacity:.45;cursor:not-allowed}
.banner{margin:20px 0;border:1px solid #28794b;background:linear-gradient(90deg,#0c3b21,#123c25);border-radius:7px;padding:17px 20px}.banner-title{font-weight:900;color:#51e88d;font-size:16px}.banner-text{margin-top:6px;color:#b9e9cb;font-size:15px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric{background:#181818;border:1px solid #2d2d2d;border-radius:7px;text-align:center;padding:17px}.metric-label{text-transform:uppercase;color:#aaa;font-size:11px;font-weight:800}.metric-value{font-size:25px;font-weight:950;margin-top:8px}.green-text{color:#31db7c}.orange-text{color:#ffbe34}
.columns{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr);gap:15px}.panel{background:#181818;border:1px solid #303030;border-radius:7px;padding:19px}.panel h2{font-size:22px;margin:0 0 17px}.panel h3{font-size:17px;margin:20px 0 10px}.muted{color:var(--muted)}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 9px;border-bottom:1px solid #303030;text-align:left}.table th{font-size:11px;color:#999;text-transform:uppercase}.table tr.qualified td{background:#0d3b22}.rank{font-weight:900}.rank.green{color:#36db7c}.rank.red{color:#e94950}
.rule-list{line-height:1.9;padding-left:22px}.rule-list ul{margin-top:3px}.tip{margin-top:18px;background:#271d31;border:1px solid #59396f;border-radius:7px;padding:13px}.tip strong{color:#c696ff}.tip p{color:#ddd;line-height:1.5;margin:7px 0 0}
.setup{max-width:760px;margin:8vh auto}.setup .panel{padding:28px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field.full{grid-column:1/-1}.field label{display:block;color:#999;font-size:11px;font-weight:800;margin-bottom:6px}.field input{width:100%;padding:11px;background:#0e0e0e;border:1px solid #444;color:#fff;border-radius:5px}
.notice{padding:13px;border-radius:6px;background:#2b230e;border:1px solid #6d541c;color:#ffd77b;margin:14px 0}.success{background:#0c3b21;border-color:#257445;color:#9df0bb}.danger{background:#3c1317;border-color:#702329;color:#ffb0b5}
.group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.group-card{background:#181818;border:1px solid #303030;border-radius:7px;padding:16px}.group-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.group-title h2{margin:0;font-size:20px}.chip{display:inline-block;padding:6px 9px;background:#252525;border-radius:4px;margin:3px;font-size:12px}
.match{padding:11px 0;border-top:1px solid #303030}.match-meta{display:flex;justify-content:space-between;color:#777;font-size:11px;margin-bottom:7px}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.fight{border:1px solid #444;background:#292929;color:#fff;border-radius:4px;padding:10px;text-align:left}.fight.selected{background:#104b29;border-color:#32a960}
.br-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.br-card{background:#181818;border:1px solid #303030;border-radius:7px;padding:17px}.br-card h2{margin:0 0 6px}.br-header{display:flex;justify-content:space-between;align-items:center}.br-badge{font-size:11px;background:#4d3310;color:#ffce56;border:1px solid #775116;border-radius:4px;padding:5px 7px}.br-list{margin-top:14px}.br-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid #303030}.br-row input{accent-color:var(--red);width:17px;height:17px}.br-row .name{font-weight:800}.br-row .team{color:#999;margin-left:5px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px}.count{color:#aaa;font-weight:700}
.de-box{display:grid;grid-template-columns:1fr 1fr;gap:15px}.de-box .panel{min-height:250px}.empty{display:grid;place-items:center;height:180px;color:#777;text-align:center}
@media(max-width:1050px){.sidebar{display:none}.content{padding:22px}.columns{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.content{padding:15px}.metrics,.grid,.group-grid,.br-grid,.de-box{grid-template-columns:1fr}.topbar{flex-direction:column}.actions{width:100%}.actions .btn{flex:1}}

.fight:disabled{cursor:default;opacity:.75}.fight:disabled:not(.selected){background:#252525;color:#aaa}
.match-result{margin-top:7px;font-size:11px;color:#777}.match-result b{color:#35d879}.match-actions{display:flex;justify-content:flex-end;margin-top:8px}.btn.correction{padding:6px 9px;font-size:11px;background:#3a2f19;color:#ffd477;border:1px solid #6d561e}.btn.correction:hover{background:#4b3b1f}.match-done{padding-bottom:10px}

/* Double Elimination graphical bracket */
.de-tabs{display:flex;gap:6px;margin:0 0 14px;padding:5px;background:#151515;border:1px solid #303030;border-radius:7px;width:max-content;max-width:100%}
.de-tab{border:0;background:transparent;color:#aaa;padding:10px 15px;border-radius:5px;font-weight:800}.de-tab:hover{background:#242424;color:#fff}.de-tab.active{background:#3a171a;color:#fff;box-shadow:inset 0 0 0 1px #6d2025}
.de-visual-wrap{background:#141414;border:1px solid #303030;border-radius:7px;padding:20px;overflow:hidden}
.bracket-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:12px}.bracket-heading h2{margin:0 0 4px;font-size:22px}.bracket-heading span{color:#888;font-size:12px}.losers-heading{margin-top:30px}
.legend{display:flex;gap:15px;align-items:center;color:#999;font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.green{background:#32d97d}.dot.gray{background:#666}
.bracket-scroll{overflow-x:auto;padding:8px 4px 16px}.bracket{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:34px;min-width:860px;position:relative}.bracket-col{display:flex;flex-direction:column;gap:12px;position:relative}.bracket-col-title{text-transform:uppercase;font-size:10px;letter-spacing:.7px;color:#777;font-weight:900;margin-bottom:4px;text-align:center}
.bracket-col.qf .v-match:nth-of-type(3){margin-top:38px}.bracket-col.sf .v-match:nth-of-type(2){margin-top:130px}.bracket-col.wf .v-match{margin-top:250px}.bracket-col.gf .v-match{margin-top:250px}
.v-match{background:#1b1b1b;border:1px solid #383838;border-radius:6px;overflow:hidden;min-height:88px;box-shadow:0 4px 14px #0003;position:relative}.v-match.done{border-color:#3b6049}.v-match-title{padding:7px 9px;border-bottom:1px solid #303030;color:#777;font-size:10px;font-weight:800}.v-player{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:9px 10px;font-size:12px;border-top:1px solid #2a2a2a;color:#ddd}.v-player:first-of-type{border-top:0}.v-player.winner{background:#0d4325;color:#5bea94;font-weight:900}.v-player.loser{color:#777}.v-player.waiting{color:#666;font-style:italic}.v-player b{font-size:12px}.visual-note{margin-top:15px;padding:11px 13px;background:#202020;border:1px solid #333;border-radius:5px;color:#999;font-size:12px}
/* subtle connector hints between bracket columns */
.winners-visual .bracket-col:not(:last-child)::after,.losers-visual .bracket-col:not(:last-child)::after{content:"→";position:absolute;right:-28px;top:50%;transform:translateY(-50%);color:#555;font-size:24px;font-weight:700;z-index:2}
@media(max-width:900px){.bracket-heading{align-items:flex-start;flex-direction:column}.de-tabs{width:100%}.de-tab{flex:1}.bracket{grid-template-columns:repeat(4,190px)}}

/* v0.9 Event Control */
.subtitle{color:#888;margin-top:6px;font-size:13px}.phase-value{font-size:15px;margin-top:13px}
.orange-btn{background:#4a3815!important;color:#ffd76b!important}
.progress-panel{background:#181818;border:1px solid #303030;border-radius:7px;padding:17px 19px;margin-bottom:15px}.progress-head{display:flex;justify-content:space-between;color:#bbb;font-size:12px}.progress-track{height:10px;background:#292929;border-radius:20px;overflow:hidden;margin-top:10px}.progress-fill{height:100%;background:var(--green);border-radius:20px;transition:width .3s}.progress-sub{color:#777;font-size:11px;margin-top:7px}
.next-card{background:linear-gradient(135deg,#171717,#1d1d1d);border:1px solid #444;border-radius:8px;padding:24px;margin-bottom:15px;text-align:center;box-shadow:0 8px 25px #0004}.next-card.empty-next{padding:28px}.next-eyebrow{color:var(--red);font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.next-title{font-size:30px;font-weight:950;margin:12px 0 4px;letter-spacing:-.5px}.next-title span{font-size:15px;color:#777;margin:0 12px}.next-teams{display:flex;justify-content:center;gap:150px;color:#777;font-size:12px;min-height:17px}.next-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.result-btn{border:1px solid #555;background:#303030;color:#fff;padding:13px 20px;border-radius:5px;font-weight:900;min-width:190px}.result-btn:hover{background:#3b3b3b;border-color:#777}.result-btn:disabled{opacity:.45}
.control-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:15px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-head h2{margin-bottom:0}.link-btn{border:0;background:transparent;color:#aaa;font-weight:800;padding:5px}.link-btn:hover{color:#fff}.activity-list{margin-top:15px}.activity{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #2b2b2b;color:#ddd}.activity-time{color:#666;font-size:11px;width:62px}.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}.empty-line{padding:25px 0;color:#777}
.quick-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #2d2d2d;color:#aaa}.quick-row b{color:#fff}.history-table td:first-child{width:100px;color:#777;font-size:12px}.history-type{font-size:10px;text-transform:uppercase;font-weight:900;padding:4px 6px;border-radius:3px;background:#252525;color:#aaa}.history-type.undo{background:#352a13;color:#ffd477}.history-type.action{background:#103c24;color:#57df8b}
.modal-backdrop{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:1000;backdrop-filter:blur(3px)}.result-modal{width:min(500px,calc(100vw - 30px));background:#1a1a1a;border:1px solid #484848;border-radius:9px;padding:27px;box-shadow:0 25px 70px #000}.modal-eyebrow{color:var(--red);font-weight:900;font-size:11px;text-transform:uppercase}.result-modal h2{font-size:28px;margin:10px 0}.result-modal p{color:#999;line-height:1.7}.result-modal p span{color:#eee}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.arena-preview{background:#101010;border:1px solid #383838;border-radius:10px;padding:40px;text-align:center;margin-bottom:15px}.arena-brand{font-size:70px;font-weight:1000;font-style:italic;color:var(--red);letter-spacing:-7px}.arena-event{font-size:20px;font-weight:900;margin-top:4px}.arena-label{color:var(--red);font-size:13px;font-weight:900;letter-spacing:2px;margin-top:42px}.arena-vs{font-size:38px;font-weight:950;margin:15px 0}.arena-vs span{font-size:16px;color:#777;margin:0 18px}.arena-stage{color:#888}.arena-full{min-height:100vh;background:radial-gradient(circle at 50% 20%,#242424 0,#0a0a0a 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:30px;text-align:center}.arena-top{position:absolute;top:28px;left:35px;right:35px;display:flex;justify-content:space-between;align-items:center}.arena-live{color:#40e381;font-weight:900;font-size:14px}.arena-full .arena-event{font-size:26px}.arena-full .arena-label{font-size:16px;margin-top:60px}.arena-match{display:grid;grid-template-columns:minmax(220px,350px) 100px minmax(220px,350px);align-items:center;gap:20px;margin-top:28px}.arena-robot{background:#181818;border:1px solid #444;border-radius:10px;padding:25px 18px;display:flex;flex-direction:column;gap:8px}.arena-robot strong{font-size:30px}.arena-robot span{color:#888}.arena-vs-big{font-size:25px;font-weight:950;color:#777}.arena-stage{font-size:17px;margin-top:25px}.arena-footer{position:absolute;bottom:25px;color:#666;font-size:11px}.arena-winner{font-size:60px;margin-top:30px}.arena-champion{font-size:56px;font-weight:1000;margin-top:8px}.arena-team{color:#999;font-size:18px;margin-top:7px}
@media(max-width:900px){.control-grid{grid-template-columns:1fr}.next-teams{gap:40px}.arena-match{grid-template-columns:1fr;max-width:420px}.arena-vs-big{margin:-8px 0}.arena-top{left:18px;right:18px}}
@media(max-width:700px){.next-title{font-size:23px}.next-actions{flex-direction:column}.result-btn{width:100%}.arena-champion{font-size:38px}}


/* =========================================================
   v11 — RESPONSIVE DESKTOP LAYOUT
   Keeps sidebar + main content aligned from 1280px upward
   without clipping the right side of the Control Room.
   ========================================================= */

html, body { width:100%; max-width:100%; overflow-x:hidden; }
.app { width:100%; max-width:100vw; }

/* Sidebar scales with the monitor instead of reserving a fixed 246 px. */
.sidebar{
  width:clamp(205px,15vw,246px);
  flex:0 0 clamp(205px,15vw,246px);
  padding:clamp(14px,1.2vw,20px) clamp(10px,1vw,14px);
  overflow-y:auto;
  overflow-x:hidden;
}

/* Branding must always remain inside the sidebar. */
.brand-lockup.brand-sidebar .brand-image-window{
  width:min(150px,100%);
  height:auto;
  max-height:55px;
}
.brand-lockup.brand-sidebar .brand-image{
  width:min(150px,100%);
  max-width:100%;
}
.brand-lockup.brand-sidebar .brand-subtitle{
  font-size:clamp(9px,.72vw,12px);
  letter-spacing:clamp(.35px,.06vw,.9px);
  white-space:normal;
  line-height:1.05;
}

/* Main area consumes exactly the remaining viewport width. */
.content{
  width:calc(100vw - clamp(205px,15vw,246px));
  max-width:calc(100vw - clamp(205px,15vw,246px));
  padding:clamp(18px,2vw,31px) clamp(18px,2.6vw,42px) 50px;
  overflow-x:hidden;
}
.inner{
  width:100%;
  max-width:none;
  margin:0;
}

/* Header buttons wrap before they can push the page outside the viewport. */
.topbar{
  width:100%;
  min-width:0;
  flex-wrap:wrap;
}
.topbar > div:first-child{min-width:0}
.actions{
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:100%;
}
.title{
  font-size:clamp(26px,2.1vw,32px);
  overflow-wrap:anywhere;
}

/* Dashboard cards adapt to the available central panel width. */
.metrics{
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
}
.metric{min-width:0;padding:clamp(12px,1.15vw,17px)}
.metric-value{font-size:clamp(21px,1.65vw,25px)}
.columns,
.control-grid,
.group-grid,
.br-grid,
.de-box{min-width:0}
.panel,
.progress-panel,
.next-card{min-width:0;max-width:100%}

/* Keep long tables inside the content area instead of growing the page. */
.panel{overflow:hidden}
.panel > .table,
.table{max-width:100%}
.table th,.table td{overflow-wrap:anywhere}
.table-wrap{width:100%;overflow-x:auto}

/* Next match: scale the spacing and prevent oversized buttons. */
.next-card{padding:clamp(18px,1.7vw,24px)}
.next-title{font-size:clamp(24px,2vw,30px)}
.next-teams{gap:clamp(30px,7vw,150px)}
.next-actions{flex-wrap:wrap}
.result-btn{
  min-width:min(190px,42%);
  max-width:100%;
}

/* Large two-column areas should shrink before collapsing. */
.control-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}
.columns{grid-template-columns:minmax(0,2.15fr) minmax(270px,.85fr)}

/* Bracket is intentionally horizontally scrollable inside its own box only. */
.de-visual-wrap{max-width:100%}
.bracket-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

/* Sidebar typography scales slightly on smaller desktop monitors. */
.event-name{font-size:clamp(17px,1.25vw,20px);overflow-wrap:anywhere}
.nav-item{height:auto;min-height:44px;padding-top:5px;padding-bottom:5px}
.nav-num{width:32px;height:32px;flex:0 0 32px}

/* 1366–1499 px: compact desktop mode — sidebar stays visible. */
@media (max-width:1499px) and (min-width:1101px){
  .sidebar{
    width:210px;
    flex-basis:210px;
    padding:14px 10px;
  }
  .content{
    width:calc(100vw - 210px);
    max-width:calc(100vw - 210px);
    padding:20px 22px 40px;
  }
  .brand-lockup.brand-sidebar .brand-image-window,
  .brand-lockup.brand-sidebar .brand-image{width:135px}
  .brand-lockup.brand-sidebar .brand-subtitle{font-size:9.5px;letter-spacing:.45px}
  .side-label{margin-top:16px}
  .nav{margin-top:10px}
  .nav-item{font-size:13px;gap:8px}
  .nav-num{width:29px;height:29px;flex-basis:29px}
  .metrics{gap:10px}
  .control-grid{grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr)}
  .columns{grid-template-columns:minmax(0,1.7fr) minmax(255px,.8fr)}
  .btn{padding:9px 11px}
}

/* 1100px is still a usable landscape/tablet breakpoint.
   Only below this do we remove the persistent sidebar. */
@media(max-width:1100px){
  .sidebar{display:none}
  .content{
    width:100vw;
    max-width:100vw;
    padding:18px;
  }
  .inner{width:100%}
  .columns,.control-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Small screens. */
@media(max-width:700px){
  .content{padding:12px}
  .metrics,.grid,.group-grid,.br-grid,.de-box{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:stretch}
  .actions{width:100%;justify-content:stretch}
  .actions .btn{flex:1 1 auto}
  .result-btn{width:100%;min-width:0}
  .next-teams{gap:20px}
}

/* Arena display: fit both 16:9 TV and smaller monitor windows. */
.arena-full{
  width:100vw;
  min-height:100vh;
  overflow:hidden;
  padding:clamp(18px,2vw,30px);
}
.arena-top{
  top:clamp(16px,2vw,28px);
  left:clamp(18px,2.5vw,35px);
  right:clamp(18px,2.5vw,35px);
}
.brand-lockup.brand-arena .brand-image-window{
  width:clamp(120px,10vw,170px);
  height:auto;
  max-height:62px;
}
.brand-lockup.brand-arena .brand-image{
  width:clamp(120px,10vw,170px);
  max-width:100%;
}
.brand-lockup.brand-arena .brand-subtitle{
  font-size:clamp(9px,.75vw,13px);
  line-height:1;
  white-space:normal;
}
.arena-match{
  width:min(1000px,92vw);
  grid-template-columns:minmax(180px,1fr) clamp(55px,6vw,100px) minmax(180px,1fr);
  gap:clamp(12px,2vw,20px);
}
.arena-robot strong{font-size:clamp(22px,2.2vw,30px)}
.arena-full .arena-event{font-size:clamp(20px,2vw,26px)}


/* =========================================================
   v12 — FIXED DASHBOARD
   No independent sidebar scrolling / no sliding panel.
   The page scrolls as one dashboard.
   ========================================================= */

html, body {
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.app{
  display:grid;
  grid-template-columns:clamp(205px,15vw,246px) minmax(0,1fr);
  width:100%;
  min-height:100vh;
  align-items:stretch;
}

/* Sidebar is a normal fixed dashboard column.
   It never gets its own scrollbar. */
.sidebar{
  position:relative !important;
  top:auto !important;
  height:auto !important;
  min-height:100vh;
  width:auto !important;
  flex:none !important;
  overflow:visible !important;
  align-self:stretch;
}

/* Main content simply occupies the second grid column. */
.content{
  width:auto !important;
  max-width:none !important;
  min-width:0;
  overflow:visible !important;
}

/* Avoid accidental inner scrollbars in dashboard panels. */
.inner,
.panel,
.progress-panel,
.next-card,
.control-grid,
.columns{
  overflow:visible;
}

/* Bracket is the only element allowed to scroll horizontally. */
.bracket-scroll{
  overflow-x:auto !important;
  overflow-y:visible !important;
}

/* Compact desktop keeps the same two-column dashboard structure. */
@media (max-width:1499px) and (min-width:1101px){
  .app{
    grid-template-columns:210px minmax(0,1fr);
  }
  .sidebar{
    width:auto !important;
    flex:none !important;
  }
  .content{
    width:auto !important;
    max-width:none !important;
  }
}

/* Below 1100px we intentionally switch to a single-column layout. */
@media(max-width:1100px){
  .app{
    display:block;
  }
  .sidebar{
    display:none;
  }
  .content{
    width:100% !important;
    max-width:100% !important;
  }
}


/* =========================================================
   v13 — SIDEBAR BRAND ALIGNMENT FIX
   The logo asset contains a tall canvas. Never let its source
   height define the sidebar header height: crop it explicitly.
   ========================================================= */

.brand{
  padding:0 0 18px;
  margin:0;
}

/* Fixed crop for the sidebar logo: prevents the invisible black
   canvas inside the PNG from pushing the menu hundreds of pixels down. */
.brand-lockup.brand-sidebar .brand-image-window{
  width:min(150px,100%) !important;
  height:55px !important;
  max-height:55px !important;
  overflow:hidden !important;
  flex:0 0 55px;
}
.brand-lockup.brand-sidebar .brand-image{
  display:block;
  width:150px !important;
  max-width:100% !important;
  height:auto !important;
}
.brand-lockup.brand-sidebar .brand-subtitle{
  margin-top:5px;
}

/* Keep the first sidebar section immediately below the brand divider. */
.sidebar > .brand + .side-label{
  margin-top:18px !important;
}

/* The Arena uses the same cropped logo, with its own display size. */
.brand-lockup.brand-arena .brand-image-window{
  width:170px !important;
  height:62px !important;
  max-height:62px !important;
  overflow:hidden !important;
  flex:0 0 62px;
}
.brand-lockup.brand-arena .brand-image{
  width:170px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Preview follows the same rule. */
.brand-lockup.brand-preview .brand-image-window{
  width:150px !important;
  height:55px !important;
  max-height:55px !important;
  overflow:hidden !important;
}
.brand-lockup.brand-preview .brand-image{
  width:150px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Compact desktop still crops instead of changing the crop height. */
@media (max-width:1499px) and (min-width:1101px){
  .brand-lockup.brand-sidebar .brand-image-window{
    width:135px !important;
    height:50px !important;
    max-height:50px !important;
    flex-basis:50px;
  }
  .brand-lockup.brand-sidebar .brand-image{
    width:135px !important;
  }
}


/* =========================================================
   v14 — ACTUAL SIDEBAR GAP FIX
   The old branding modifier used class="sidebar", which made
   the logo block inherit min-height:100vh from the real sidebar.
   Modifier classes are now brand-sidebar / brand-preview / brand-arena.
   ========================================================= */

.brand-lockup{
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  overflow:visible;
}

.brand-lockup.brand-sidebar{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:0 !important;
  height:auto !important;
}

.brand-lockup.brand-sidebar .brand-image-window{
  flex:none !important;
}

.brand{
  min-height:0 !important;
  height:auto !important;
  padding-bottom:14px !important;
}

.sidebar > .brand + .side-label{
  margin-top:14px !important;
}


/* =========================================================
   v19 — REC VISUAL SYSTEM
   Offline typography + cleaner competition/broadcast styling.
   No external fonts or web dependencies.
   ========================================================= */

:root{
  --font-ui: "Bahnschrift","Segoe UI",Arial,sans-serif;
  --font-display: "Bahnschrift Condensed","Arial Narrow","Aptos Narrow","Impact",sans-serif;
  --rec-red:#e31b23;
  --rec-red-dark:#6d1015;
  --rec-red-glow:rgba(227,27,35,.30);
  --rec-white:#f7f7f5;
  --rec-steel:#9ca0a4;
}

body{
  font-family:var(--font-ui);
  font-variation-settings:"wght" 430;
  background:
    radial-gradient(circle at 55% -20%,#202020 0,#0c0c0c 44%,#080808 100%);
}

/* Display typography */
.title,
.panel h2,
.panel h3,
.group-title h2,
.next-title,
.metric-value,
.event-name,
.result-modal h2,
.arena-event,
.arena-vs,
.arena-vs-big,
.arena-robot strong,
.arena-champion,
.bracket-heading h2,
.bracket-col-title{
  font-family:var(--font-display);
  font-stretch:condensed;
  letter-spacing:.015em;
}

.title{
  font-weight:900;
  letter-spacing:.005em;
}

.eyebrow,
.next-eyebrow,
.metric-label,
.side-label,
.table th,
.br-badge,
.arena-label,
.brand-subtitle,
.modal-eyebrow{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:.12em;
}

.brand-lockup .brand-subtitle{
  font-family:var(--font-display);
  letter-spacing:.13em !important;
  font-weight:800 !important;
}

/* Dashboard surfaces */
.panel,
.metric,
.progress-panel,
.next-card,
.group-card,
.br-card,
.de-visual-wrap{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    #171717;
  border-color:#323232;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}

.panel h2,
.group-title h2{
  font-weight:800;
}

.btn{
  font-family:var(--font-display);
  letter-spacing:.025em;
  border:1px solid #474747;
  background:linear-gradient(180deg,#3a3a3a,#2e2e2e);
  transition:transform .12s ease,filter .12s ease,border-color .12s ease;
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#666;
}
.btn.red{
  background:linear-gradient(180deg,#e2252d,#b9141c);
  border-color:#ef3038;
  box-shadow:0 0 18px rgba(227,27,35,.14);
}
.btn.green{
  background:linear-gradient(180deg,#1dbd67,#10994f);
  border-color:#23c66d;
}

/* Strong REC accent line without cluttering the control interface */
.topbar{
  position:relative;
  padding-bottom:10px;
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:3px;
  background:linear-gradient(90deg,var(--rec-red),transparent);
}

.nav-item.active{
  background:linear-gradient(90deg,#73191f 0,#4a1518 70%,#381214 100%);
  box-shadow:inset 3px 0 0 var(--rec-red);
}
.nav-item.active .nav-num{
  border-color:#d74b51;
  box-shadow:0 0 10px rgba(227,27,35,.12);
}

.next-card{
  position:relative;
  overflow:hidden;
}
.next-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--rec-red),transparent);
  opacity:.9;
}
.next-eyebrow{
  color:#ff3038;
}
.next-title{
  font-weight:900;
  letter-spacing:.015em;
}
.result-btn{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.025em;
}

/* Match & bracket typography */
.fight,
.v-player,
.match-result{
  font-family:var(--font-ui);
}
.v-player{
  font-weight:700;
}
.bracket-col-title{
  font-size:12px;
  letter-spacing:.12em;
}
.v-match{
  border-radius:4px;
}
.v-match.done{
  box-shadow:inset 3px 0 0 rgba(47,190,101,.65);
}

/* ===================== ARENA BROADCAST ===================== */

.arena-full{
  isolation:isolate;
  position:relative;
  background:
    radial-gradient(circle at 50% 42%,rgba(175,20,27,.10) 0,transparent 30%),
    radial-gradient(circle at 50% 18%,#272727 0,#111 38%,#070707 74%);
}

/* Industrial texture, generated entirely in CSS */
.arena-full:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 22px),
    linear-gradient(90deg,
      transparent 0 7%,
      rgba(227,27,35,.045) 7% 7.15%,
      transparent 7.15% 92.85%,
      rgba(227,27,35,.045) 92.85% 93%,
      transparent 93%);
  mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 82%,transparent 100%);
}

.arena-full:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  z-index:-1;
  background:
    repeating-linear-gradient(135deg,
      #761017 0 26px,
      #130b0c 26px 52px);
  opacity:.55;
}

/* Brand header */
.arena-top{
  z-index:3;
}
.arena-live{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(64,227,129,.24);
}
.arena-live:before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:8px;
  background:#40e381;
  box-shadow:0 0 10px rgba(64,227,129,.7);
}

/* Event name gets a proper broadcast headline */
.arena-full .arena-event{
  font-size:clamp(30px,3.2vw,54px);
  line-height:.95;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:
    0 3px 0 rgba(0,0,0,.9),
    0 0 28px rgba(255,255,255,.035);
}

.arena-full .arena-label{
  margin-top:clamp(48px,6vh,76px);
  color:#ff2b34;
  font-size:clamp(15px,1.3vw,21px);
  letter-spacing:.22em;
  position:relative;
}
.arena-full .arena-label:before,
.arena-full .arena-label:after{
  content:"///";
  display:inline-block;
  color:#a21319;
  letter-spacing:-.08em;
  margin:0 18px;
  transform:skewX(-14deg);
}

/* Fight plates */
.arena-match{
  width:min(1160px,90vw);
  grid-template-columns:minmax(250px,1fr) clamp(70px,8vw,120px) minmax(250px,1fr);
  gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(26px,4vh,45px);
}

.arena-robot{
  position:relative;
  overflow:hidden;
  min-height:120px;
  justify-content:center;
  padding:26px 34px;
  border-radius:3px;
  border:1px solid #484848;
  background:
    linear-gradient(110deg,#151515 0,#1e1e1e 62%,#181818 100%);
  box-shadow:
    0 22px 46px rgba(0,0,0,.38),
    inset 0 -2px 0 rgba(227,27,35,.7);
}

.arena-robot:first-child{
  clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);
  padding-right:58px;
}
.arena-robot:last-child{
  clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%);
  padding-left:58px;
}

.arena-robot:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(227,27,35,.11),transparent 28%,transparent 72%,rgba(227,27,35,.07));
}

.arena-robot strong{
  position:relative;
  z-index:1;
  font-size:clamp(30px,3vw,50px);
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 2px 2px #000;
}
.arena-robot span{
  position:relative;
  z-index:1;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.arena-vs-big{
  font-size:clamp(34px,4.2vw,66px);
  line-height:1;
  color:#efefec;
  font-style:italic;
  text-shadow:
    0 0 4px #000,
    0 0 25px var(--rec-red-glow);
  position:relative;
}
.arena-vs-big:before{
  content:"";
  position:absolute;
  width:82px;height:82px;
  border-radius:50%;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
  background:radial-gradient(circle,rgba(227,27,35,.35),rgba(227,27,35,0) 68%);
}

.arena-stage{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(15px,1.35vw,21px);
  color:#aaa;
  margin-top:clamp(25px,4vh,42px);
}
.arena-stage:before,
.arena-stage:after{
  content:"";
  display:inline-block;
  width:46px;height:1px;
  vertical-align:middle;
  margin:0 14px;
  background:linear-gradient(90deg,transparent,var(--rec-red));
}
.arena-stage:after{
  background:linear-gradient(90deg,var(--rec-red),transparent);
}

.arena-footer{
  font-family:var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Champion treatment */
.arena-winner{
  color:#d21c24;
  filter:drop-shadow(0 0 18px rgba(227,27,35,.2));
}
.arena-champion{
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,92px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:var(--rec-white);
  text-shadow:0 5px 0 #000;
}

/* Arena preview adopts the same language, but stays lightweight */
.arena-preview{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(150,20,25,.11),transparent 35%),
    #101010;
}
.arena-preview:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(135deg,#721017 0 18px,#181011 18px 36px);
  opacity:.6;
}
.arena-preview .arena-vs{
  font-size:46px;
  letter-spacing:.01em;
}

/* Responsive broadcast layout */
@media(max-width:900px){
  .arena-robot:first-child,
  .arena-robot:last-child{
    clip-path:none;
    padding:22px;
  }
  .arena-match{
    grid-template-columns:1fr;
  }
  .arena-vs-big{margin:2px 0}
}


/* =========================================================
   v20 — EVENT OPERATIONS
   ========================================================= */
.match-status-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0 2px}
.up-next-strip{margin-top:22px;padding-top:16px;border-top:1px solid #333;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.up-next-strip>div{background:#111;border:1px solid #2d2d2d;border-radius:4px;padding:11px 13px;text-align:left}
.up-next-strip span{display:block;color:#e31b23;font-family:var(--font-display);font-weight:900;letter-spacing:.12em;font-size:10px}
.up-next-strip b{display:block;margin-top:4px;font-family:var(--font-display);font-size:16px}
.up-next-strip small{color:#777}
.arena-ondeck{margin-top:30px;padding:10px 18px;border-top:1px solid #333;color:#999;font-family:var(--font-display);letter-spacing:.08em}
.arena-ondeck span{color:#e31b23;font-weight:900;margin-right:14px}
.arena-ondeck b{color:#ddd}
.link-btn{background:none;border:0;color:#ddd;padding:0;cursor:pointer;font:inherit;font-weight:700}
.link-btn:hover{color:#fff;text-decoration:underline}


/* =========================================================
   v21 — MATCH SCHEDULER / REPAIR-TIME QUEUE
   ========================================================= */
.queue-manager{margin:14px 0 20px;background:#151515;border:1px solid #303030;border-radius:6px;overflow:hidden}
.queue-manager summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;list-style:none;font-family:var(--font-display);font-weight:800;letter-spacing:.035em}
.queue-manager summary::-webkit-details-marker{display:none}
.queue-manager summary small{font-family:var(--font-ui);font-weight:400;color:#888;letter-spacing:0}
.queue-manager[open] summary{border-bottom:1px solid #303030;background:#191919}
.queue-list{padding:7px 12px 12px}
.queue-row{display:grid;grid-template-columns:34px 82px minmax(220px,1fr) 54px auto;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid #282828}
.queue-row:last-child{border-bottom:0}
.queue-row.current{background:linear-gradient(90deg,rgba(227,27,35,.12),transparent);box-shadow:inset 3px 0 0 var(--rec-red)}
.queue-pos{font-family:var(--font-display);font-weight:900;color:#777}
.queue-group{font-family:var(--font-display);font-weight:800;color:#e31b23;letter-spacing:.04em}
.queue-row b{font-family:var(--font-display);font-size:15px}
.queue-row b em{font-style:normal;color:#777;font-size:12px;margin:0 5px}
.queue-match{color:#777;text-align:right}
.queue-actions{display:flex;gap:5px;justify-content:flex-end}
.queue-actions button{border:1px solid #414141;background:#292929;color:#ddd;border-radius:4px;padding:6px 8px;font-family:var(--font-display);font-weight:700;cursor:pointer}
.queue-actions button:hover:not(:disabled){background:#3a3a3a;border-color:#666}
.queue-actions button:disabled{opacity:.3;cursor:not-allowed}
@media(max-width:900px){.queue-row{grid-template-columns:30px 70px minmax(140px,1fr)}.queue-match{display:none}.queue-actions{grid-column:1/-1;justify-content:flex-start;padding-left:100px}}


/* =========================================================
   v21.1 — PUBLIC ARENA REC LOGO
   Uses assets/rec-logo.png directly. No generated/text logo.
   ========================================================= */
.arena-top{
  top:24px !important;
  left:0 !important;
  right:0 !important;
  width:100%;
  justify-content:center !important;
  align-items:flex-start !important;
  pointer-events:none;
}

.arena-logo-wrap{
  width:clamp(280px,24vw,430px);
  display:flex;
  justify-content:center;
  align-items:center;
}

.arena-logo-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.arena-top .arena-live{
  position:absolute;
  top:8px;
  right:clamp(22px,2.5vw,42px);
}

/* Give the centered REC logo its own visual zone above the event title. */
.arena-full .arena-event{
  margin-top:clamp(95px,12vh,135px);
}

/* Tournament Manager is an internal-tool label, never part of public Arena. */
.arena-full .brand-subtitle,
.arena-full .brand-lockup{
  display:none !important;
}

@media(max-width:900px){
  .arena-logo-wrap{width:clamp(240px,38vw,340px)}
  .arena-full .arena-event{margin-top:105px}
}


/* =========================================================
   v24 — SERVER SYNC STATUS
   ========================================================= */
#rec-sync-badge{
  position:fixed;
  right:16px;
  bottom:14px;
  z-index:99999;
  min-width:116px;
  height:32px;
  padding:0 11px;
  border-radius:4px;
  border:1px solid #3d3d3d;
  background:rgba(14,14,14,.92);
  color:#999;
  font-family:var(--font-display,Arial,sans-serif);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  backdrop-filter:blur(6px);
}
#rec-sync-badge[data-status="online"]{color:#42db82;border-color:#246840}
#rec-sync-badge[data-status="connecting"]{color:#f0bd48;border-color:#72591d}
#rec-sync-badge[data-status="locked"],
#rec-sync-badge[data-status="error"]{color:#ff555d;border-color:#7a272c}
#rec-sync-badge[data-status="offline"]{color:#888}
.arena-full ~ #rec-sync-badge,
body:has(.arena-full) #rec-sync-badge{
  bottom:12px;
  right:12px;
  opacity:.45;
}


/* =========================================================
   v25 — REC POINTS / RESULT METHODS
   ========================================================= */
.result-methods{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.method-btn{
  border:1px solid #444;
  border-radius:5px;
  background:linear-gradient(180deg,#292929,#1d1d1d);
  color:#eee;
  min-height:78px;
  padding:14px;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-display,Arial,sans-serif);
}
.method-btn:hover{border-color:#777;transform:translateY(-1px)}
.method-btn b{display:block;font-size:18px;letter-spacing:.02em}
.method-btn span{display:block;margin-top:6px;color:#9d9d9d;font-family:var(--font-ui,Arial,sans-serif);font-size:12px}
.method-btn.ko{
  border-color:#8c1d23;
  background:linear-gradient(180deg,#42171a,#231315);
  box-shadow:inset 3px 0 0 #e31b23;
}
.method-btn.ko b{color:#ff4149}
.compact-table{margin:10px 0 18px}
.compact-table th,.compact-table td{padding:7px 8px;font-size:12px}
@media(max-width:700px){.result-methods{grid-template-columns:1fr}}