/* =============================================================
   SPMania – app-components.css
   ALL visual design: variables, colours, components, typography
   ============================================================= */

/* ── Theme variables (dark default) ─────────────────────────── */
:root {
  --bg:           #0d1117;
  --bg-alt:       #161b22;
  --panel-bg:     #1c2128;
  --panel-alt:    #21262d;
  --border:       #30363d;
  --border-light: #21262d;
  --accent:       #58a6ff;
  --accent-hov:   #79b8ff;
  --accent-muted: #1f3d5c;
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --text-subtle:  #6e7681;
  --green:        #3fb950;
  --green-muted:  #1a3a22;
  --red:          #f85149;
  --red-muted:    #3d1a1a;
  --yellow:       #d29922;
  --yellow-muted: #3d2e00;
  --orange:       #db6d28;
  --orange-muted: #3d2410;
  --radius:       6px;
  --radius-lg:    10px;
  --shadow:       0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  --transition:   140ms ease;
  --sidebar-w:    220px;
  --sidebar-col:  52px;
  --topbar-h:     48px;
}

[data-theme="light"] {
  --bg:           #f6f8fa;
  --bg-alt:       #ffffff;
  --panel-bg:     #ffffff;
  --panel-alt:    #f6f8fa;
  --border:       #d0d7de;
  --border-light: #e8edf2;
  --accent:       #0969da;
  --accent-hov:   #0550ae;
  --accent-muted: #ddf4ff;
  --text:         #1f2328;
  --text-muted:   #636c76;
  --text-subtle:  #848d97;
  --green:        #1a7f37;
  --green-muted:  #dafbe1;
  --red:          #cf222e;
  --red-muted:    #ffebe9;
  --yellow:       #9a6700;
  --yellow-muted: #fff8c5;
  --orange:       #bc4c00;
  --orange-muted: #ffe8d6;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; }

/* ── Topbar visual ───────────────────────────────────────────── */
#topbar {
  background:    var(--panel-bg);
  border-bottom: 1px solid var(--border);
}
.app-logo {
  font-size:       1.05rem;
  font-weight:     700;
  letter-spacing:  -.01em;
  color:           var(--text);
  text-decoration: none;
}
.app-logo .accent { color: var(--accent); }
.topbar-username  { font-size: .875rem; color: var(--text-muted); }

/* ── Sidebar visual ──────────────────────────────────────────── */
#sidebar {
  background:   var(--bg-alt);
  border-right: 1px solid var(--border);
}
.sidebar-nav li a {
  color:           var(--text-muted);
  border-radius:   var(--radius);
  transition:      background var(--transition), color var(--transition);
  text-decoration: none;
}
.sidebar-nav li a:hover         { background: var(--panel-bg);     color: var(--text);   }
.sidebar-nav li.active a        { background: var(--accent-muted); color: var(--accent); }
.nav-label                      { font-size: .875rem; font-weight: 500; }
.sidebar-section {
  font-size:      .68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text-subtle);
}

/* ── Typography ──────────────────────────────────────────────── */
.nc-page-title {
  font-size:      1.2rem;
  font-weight:    600;
  color:          var(--text);
  letter-spacing: -.01em;
}
.nc-section-title {
  font-size:      .75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--text-subtle);
  margin-bottom:  .6rem;
}
.nc-label {
  font-size:     .8rem;
  font-weight:   500;
  color:         var(--text-muted);
  display:       block;
  margin-bottom: .3rem;
}
.nc-text-muted  { color: var(--text-muted);  font-size: .875rem; }
.nc-text-subtle { color: var(--text-subtle); font-size: .8rem;   }

/* ── Panel ───────────────────────────────────────────────────── */
.nc-panel {
  background:    var(--panel-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem 1.5rem;
}
.nc-panel-sm    { padding: .875rem 1rem; }
.nc-panel-title {
  font-size:     .95rem;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: .875rem;
  padding-bottom:.75rem;
  border-bottom: 1px solid var(--border);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.nc-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .45rem .9rem;
  font-size:       .875rem;
  font-family:     inherit;
  font-weight:     500;
  border-radius:   var(--radius);
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1.4;
  transition:      background var(--transition), border-color var(--transition),
                   color var(--transition);
}
.nc-btn:disabled { opacity: .5; cursor: not-allowed; }

.nc-btn-primary            { background: var(--accent);    color: #fff;           border-color: var(--accent); }
.nc-btn-primary:hover      { background: var(--accent-hov); border-color: var(--accent-hov); }
.nc-btn-secondary          { background: var(--panel-alt); color: var(--text);    border-color: var(--border); }
.nc-btn-secondary:hover    { background: var(--panel-bg);  border-color: var(--accent); color: var(--accent); }
.nc-btn-ghost              { background: transparent;      color: var(--text-muted); }
.nc-btn-ghost:hover        { background: var(--panel-alt); color: var(--text); }
.nc-btn-danger             { background: var(--red-muted); color: var(--red);     border-color: var(--red); }
.nc-btn-danger:hover       { background: var(--red);       color: #fff; }

.nc-btn-sm   { padding: .3rem .65rem; font-size: .8rem; }
.nc-btn-lg   { padding: .65rem 1.2rem; font-size: 1rem; }
.nc-btn-icon { padding: .4rem; }
.nc-btn-full { width: 100%; justify-content: center; }
.nc-toggle-btn        { background: transparent; color: var(--text-muted); border-color: var(--border); }
.nc-toggle-btn:hover  { color: var(--text); border-color: var(--accent); }
.nc-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Squad toggles (games detail) ── */
.squad-toggle-squad.active   { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }
.squad-toggle-starter.active { background: var(--green-muted);  color: var(--green);  border-color: var(--green); }
.nc-grid-slider { width: 80px; vertical-align: middle; }

/* ── iOS-style switch ── */
.nc-switch        { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.nc-switch input  { position: absolute; opacity: 0; width: 0; height: 0; }
.nc-switch-track  {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 22px;
  background: var(--panel-alt); border: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.nc-switch-thumb  {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--transition), background var(--transition);
}
.nc-switch input:checked + .nc-switch-track { background: var(--green-muted); border-color: var(--green); }
.nc-switch input:checked + .nc-switch-track .nc-switch-thumb { transform: translateX(16px); background: var(--green); }
.nc-switch-label  { font-size: .85rem; color: var(--text-muted); }
.nc-switch input:checked ~ .nc-switch-label { color: var(--text); }

/* ── Role assign button ── */
.roles-assign-btn.assigned { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }
.roles-assign-btn.dup { background: var(--orange-muted); color: var(--orange); border-color: var(--orange); }
.roles-pick-menu .sp-search-item.active     { background: var(--accent-muted); color: var(--accent); font-weight: 600; }
.roles-pick-menu .sp-search-item.dup        { color: var(--orange); }
.roles-pick-menu .sp-search-item.dup.active { background: var(--orange-muted); color: var(--orange); }
.roles-starter-badge.complete { background: var(--green-muted); color: var(--green); }
.sp-pick-toggle.active { background: var(--green-muted); color: var(--green); border-color: var(--green); }
.admin-tab.active { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }

/* ── Badges ──────────────────────────────────────────────────── */
.nc-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        .2rem .55rem;
  border-radius:  20px;
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nc-badge-blue   { background: var(--accent-muted); color: var(--accent);     }
.nc-badge-green  { background: var(--green-muted);  color: var(--green);      }
.nc-badge-red    { background: var(--red-muted);    color: var(--red);        }
.nc-badge-yellow { background: var(--yellow-muted); color: var(--yellow);     }
.nc-badge-gray   { background: var(--panel-alt);    color: var(--text-muted); }

/* ── Inputs ──────────────────────────────────────────────────── */
.nc-input,
.nc-select,
.nc-textarea {
  width:         100%;
  padding:       .5rem .75rem;
  font-size:     .875rem;
  font-family:   inherit;
  color:         var(--text);
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.nc-input:focus,
.nc-select:focus,
.nc-textarea:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(88,166,255,.12);
}
.nc-textarea { resize: vertical; min-height: 80px; }
.nc-select   { appearance: none; cursor: pointer; }

/* ── Form ────────────────────────────────────────────────────── */
.nc-form-group              { margin-bottom: 1rem; }
.nc-form-row                { display: flex; gap: 1rem; }
.nc-form-row .nc-form-group { flex: 1; }

/* ── Table ───────────────────────────────────────────────────── */
.nc-table-wrap { overflow-x: auto; }
.nc-table      { width: 100%; border-collapse: collapse; font-size: .875rem; }
.nc-table th {
  text-align:     left;
  padding:        .55rem 1rem;
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--text-subtle);
  border-bottom:  1px solid var(--border);
  background:     var(--bg);
}
.nc-table td {
  padding:        .7rem 1rem;
  color:          var(--text);
  border-bottom:  1px solid var(--border-light);
  vertical-align: middle;
}
.nc-table tr:last-child td       { border-bottom: none; }
.nc-table tbody tr:hover td      { background: var(--panel-alt); }

/* ── Stat card ───────────────────────────────────────────────── */
.nc-stat       { display: flex; flex-direction: column; gap: .2rem; }
.nc-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1; }
.nc-stat-label {
  font-size:      .75rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
}

/* ── Flash messages ──────────────────────────────────────────── */
.nc-flash {
  padding:       .75rem 1rem;
  border-radius: var(--radius);
  font-size:     .875rem;
  margin-bottom: .875rem;
  border:        1px solid;
}
.nc-flash-error   { background: var(--red-muted);    color: var(--red);    border-color: var(--red);    }
.nc-flash-success { background: var(--green-muted);  color: var(--green);  border-color: var(--green);  }
.nc-flash-warning { background: var(--yellow-muted); color: var(--yellow); border-color: var(--yellow); }
.nc-flash-info    { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }

/* ── Divider / Empty ─────────────────────────────────────────── */
.nc-divider    { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.nc-empty      { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .875rem; }
.nc-empty-icon { font-size: 2.5rem; opacity: .3; margin-bottom: .75rem; }

/* ── Card header ─────────────────────────────────────────────── */
.nc-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
  gap:             1rem;
}

/* ── Nav card (dashboard shortcuts) ─────────────────────────── */
.nc-nav-card {
  background:      var(--panel-bg);
  border:          1px solid var(--border);
  border-radius:   var(--radius-lg);
  padding:         1rem 1.25rem;
  color:           var(--text);
  text-decoration: none;
  transition:      border-color var(--transition), transform var(--transition),
                   box-shadow var(--transition);
}
.nc-nav-card:hover {
  border-color: var(--accent);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow);
}
.nc-nav-card-icon  { background: var(--accent-muted); color: var(--accent); border-radius: var(--radius); }
.nc-nav-card-title { font-size: .9rem;  font-weight: 600; color: var(--text);       }
.nc-nav-card-desc  { font-size: .78rem; color: var(--text-muted);                   }

/* ── Misc ────────────────────────────────────────────────────── */
.nc-dot        { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.nc-glow-blue  { box-shadow: 0 0 14px rgba(88,166,255,.3);  }
.nc-glow-green { box-shadow: 0 0 14px rgba(63,185,80,.3);   }
.nc-glow-red   { box-shadow: 0 0 14px rgba(248,81,73,.3);   }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nc-form-row { flex-direction: column; }
}

/* ── Generic modal ───────────────────────────────────────────── */
.nc-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.6);
  z-index:         500;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
}
.nc-modal-overlay.active { display: flex; }

.nc-modal {
  background:    var(--panel-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  width:         100%;
  max-width:     480px;
  max-height:    88vh;
  overflow-y:    auto;
}
.nc-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.5rem;
  border-bottom:   1px solid var(--border);
}
.nc-modal-title  { font-size: 1rem; font-weight: 600; color: var(--text); }
.nc-modal-body   { padding: 1.5rem; }
.nc-modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             .75rem;
  padding:         1rem 1.5rem;
  border-top:      1px solid var(--border);
}
.nc-modal-error {
  margin-bottom:  1rem;
}

/* ── Edit-mode toggle ────────────────────────────────────────── */
.edit-actions                    { display: none; }
[data-edit="1"] .edit-actions    { display: inline-flex; gap: .25rem; }
.nc-btn-edit-toggle              { transition: color var(--transition); }
.nc-btn-edit-toggle.active       { color: var(--accent); background: var(--accent-muted); }

/* ── 32-colour palette picker ────────────────────────────────── */
.nc-color-popup {
  position:              fixed;
  z-index:               2000;
  display:               none;
  grid-template-columns: repeat(8, 22px);
  gap:                   3px;
  padding:               7px;
  background:            var(--panel-bg);
  border:                1px solid var(--border);
  border-radius:         var(--radius-lg);
  box-shadow:            var(--shadow);
}
.nc-color-swatch {
  width:         22px;
  height:        22px;
  border-radius: 4px;
  border:        2px solid transparent;
  cursor:        pointer;
  transition:    transform var(--transition);
}
.nc-color-swatch:hover   { transform: scale(1.18); border-color: rgba(255,255,255,0.5); }
.nc-color-swatch.current { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

/* Inline colour button used in roles list / controls */
.nc-color-btn {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  border:        2px solid rgba(255,255,255,0.25);
  cursor:        pointer;
  flex-shrink:   0;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  transition:    border-color var(--transition);
}
.nc-color-btn:hover { border-color: rgba(255,255,255,0.6); }
.nc-color-btn-lg    { width: 32px; height: 32px; border-radius: var(--radius); }

/* ── Delete badge button ─────────────────────────────────────── */
.nc-btn-delete {
  display:       inline-flex;
  align-items:   center;
  padding:       .22rem .6rem;
  border-radius: 20px;
  font-size:     .75rem;
  font-weight:   600;
  background:    var(--red-muted);
  color:         var(--red);
  border:        1px solid var(--red);
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
  white-space:   nowrap;
}
.nc-btn-delete:hover { background: var(--red); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   SP / TACTICS – Shared visual components
══════════════════════════════════════════════════════════ */
.sp-section-title {
  font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-subtle); margin-bottom:.3rem;
}
.sp-color-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Tool buttons */
.sp-tool-btn {
  display:flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.35rem .4rem; border-radius:var(--radius);
  font-size:.73rem; font-weight:600;
  background:var(--panel-alt); border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer;
  transition:all var(--transition); user-select:none; white-space:nowrap;
}
.sp-tool-btn:hover  { border-color:var(--accent); color:var(--text); }
.sp-tool-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.sp-tool-btn.delete { border-color:var(--red); color:var(--red); }
.sp-tool-btn.delete:hover { background:var(--red); color:#fff; }
.sp-tool-btn svg    { width:13px; height:13px; flex-shrink:0; }

/* Tool option rows */
.sp-tool-opts     { display:flex; flex-direction:column; gap:.35rem; padding:.4rem 0; }
.sp-tool-opts-row { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--text-muted); }

/* Color swatch button */
.sp-color-btn       { width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); cursor:pointer; flex-shrink:0; }
.sp-color-btn:hover { border-color:rgba(255,255,255,0.6); }

/* Line style buttons */
.sp-line-btn {
  padding:.18rem .45rem; border-radius:var(--radius); font-size:.65rem; font-weight:600;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.sp-line-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Type filter tabs */
.sp-type-tab {
  padding:.18rem .42rem; border-radius:20px; font-size:.65rem; font-weight:600;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.sp-type-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Phase buttons */
.sp-phase-btn {
  flex:1; padding:.22rem .3rem; border-radius:var(--radius);
  font-size:.7rem; font-weight:700; text-align:center;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.sp-phase-btn[data-phase="OFF"].active { background:#1f4e6e; border-color:var(--accent); color:var(--accent); }
.sp-phase-btn[data-phase="DEF"].active { background:#4e1f1f; border-color:var(--red); color:var(--red); }

/* View button (set-piece topbar) */
.sp-view-btn {
  padding:.22rem .55rem; border-radius:var(--radius); font-size:.78rem; font-weight:600;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.sp-view-btn:hover  { border-color:var(--accent); color:var(--text); }
.sp-view-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.tactics-view-btns .nc-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Role list items */
.sp-role-item {
  display:flex; align-items:center; gap:.35rem; padding:.25rem .45rem;
  border-radius:var(--radius); cursor:pointer; border:1px solid transparent;
  transition:all var(--transition);
}
.sp-role-item:hover  { background:var(--panel-alt); }
.sp-role-item.active { background:var(--panel-alt); border-color:var(--accent); }
.sp-role-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sp-role-abbr { font-size:.65rem; font-weight:700; font-family:monospace; color:var(--text); min-width:22px; }
.sp-role-name { font-size:.74rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-empty-roles { font-size:.72rem; color:var(--text-subtle); padding:.4rem .2rem; }

/* SP list items */
.sp-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.3rem .55rem; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--border); background:var(--panel-alt);
  transition:all var(--transition);
}
.sp-item:hover       { border-color:var(--accent-muted); }
.sp-item.active      { border-color:var(--accent); background:rgba(88,166,255,0.08); }
.sp-item-name        { font-size:.78rem; font-weight:500; color:var(--text); }

/* Field wrap visual */
.sp-field-wrap {
  border-radius:8px; overflow:hidden; background:#111;
  box-shadow: 0 0 0 1px rgba(88,166,255,0.12),
              0 4px 24px rgba(0,0,0,0.5),
              0 0 60px rgba(30,160,80,0.08);
}

/* Search dropdown */
.sp-search-dropdown {
  display:none; position:absolute; top:100%; left:0; z-index:200;
  background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius);
  min-width:280px; max-height:320px; overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.sp-search-wrap.open .sp-search-dropdown { display:block; }
.sp-search-item {
  display:flex; align-items:center; gap:.4rem; padding:.35rem .65rem;
  font-size:.8rem; color:var(--text); cursor:pointer; transition:background var(--transition);
}
.sp-search-item:hover  { background:var(--panel-alt); }
.sp-search-item.active { background:rgba(88,166,255,0.1); }

/* Zoom row */
.sp-zoom-row { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--text-muted); }
.sp-zoom-row input { flex:1; accent-color:var(--accent); }

/* Mobile nav */
.sp-mobile-nav {
  display:none; align-items:center; justify-content:space-between;
  padding:.5rem .75rem; background:var(--panel-bg); border-top:1px solid var(--border);
  flex-shrink:0; gap:.5rem;
}
.sp-mobile-nav-title {
  flex:1; font-size:.85rem; font-weight:600; color:var(--text);
  text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sp-mobile-nav-btn {
  background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:.35rem .7rem; color:var(--text); font-size:.85rem; cursor:pointer; flex-shrink:0;
}
.sp-mobile-nav-btn:disabled { opacity:.3; cursor:default; }
.sp-rotate-hint {
  display:none; position:fixed; inset:0; z-index:999; background:var(--bg-alt);
  flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; color:var(--text);
}
.sp-rotate-hint svg { width:60px; height:60px; opacity:.6; }

/* Tactics phase tab */
.tc-phase-tab {
  padding:.22rem .4rem; border-radius:var(--radius); font-size:.72rem; font-weight:700;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.tc-phase-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Start Game – selected set piece */
.play-sp-btn.active, .sub-pick.active { background: var(--accent-muted); color: var(--accent); }

/* stream modal video */
.stream-modal-body video { display: block; width: 100%; height: auto; background: #000; }

/* stream modal (global floating PiP) */
.stream-modal {
  display:        none;
  position:       fixed;
  flex-direction: column;
  background:     var(--panel-bg);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow);
  overflow:       hidden;
  z-index:        1500;
}
.stream-modal.active { display: flex; }
.stream-modal-header {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  flex:          0 0 auto;
  padding:       .5rem .75rem;
  background:    var(--bg-alt);
  border-bottom: 1px solid var(--border);
  cursor:        move;
  user-select:   none;
}
.stream-modal-title {
  flex:          1;
  min-width:     0;
  font-size:     .9rem;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.stream-modal-actions { display: flex; gap: .25rem; flex: 0 0 auto; }
.stream-indicator {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--text-subtle);
  flex:          0 0 auto;
}
.stream-indicator.live { background: var(--green); box-shadow: 0 0 6px var(--green); }
.stream-modal-body {
  position:        relative;
  flex:            1 1 auto;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #000;
  overflow:        hidden;
}
.stream-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  text-align:      center;
  background:      rgba(0,0,0,.6);
}
.stream-overlay.hidden { display: none; }

/* play clock card (visual) */
.play-clock-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .3rem .55rem; }