:root{
  --bg: #071912;
  --panel: #0f2a1e;
  --panel-edge: rgba(232,178,58,0.14);
  --gold: #E8B23A;
  --ink: #F5F1E6;
  --ink-dim: rgba(245,241,230,0.62);
  --ink-faint: rgba(245,241,230,0.38);
  --danger: #d9483a;
  --good: #4caf6e;
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background: radial-gradient(1200px 800px at 50% -10%, #123526 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.num{ font-family:'Bebas Neue', 'Inter', sans-serif; letter-spacing:0.02em; }
.ar{ font-family:'Noto Kufi Arabic','Inter',sans-serif; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--gold); color:#111; }
.hidden{ display:none !important; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid var(--panel-edge); font-size:12px; color:var(--ink-dim); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-faint); }
.dot.live{ background:var(--good); box-shadow:0 0 0 0 rgba(76,175,110,.6); animation:pulse 1.6s infinite; }
.dot.stale{ background:var(--danger); box-shadow:0 0 0 0 rgba(217,72,58,.6); animation:pulse 1.2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(76,175,110,.55);} 70%{box-shadow:0 0 0 8px rgba(76,175,110,0);} 100%{box-shadow:0 0 0 0 rgba(76,175,110,0);} }
.syncTag{ font-size:11px; color:var(--ink-faint); }
.syncTag.stale{ color:var(--danger); }

/* =============== DISPLAY =============== */
#displayView{ position:relative; min-height:100vh; overflow:hidden; }
#displayBg{ position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(22px) brightness(0.38) saturate(1.15); transform:scale(1.08); }
#displayBg.empty{ background:linear-gradient(160deg,#123526,#071912 70%); filter:none; transform:none; }
#displayScrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,25,18,.5) 0%, rgba(7,25,18,.2) 35%, rgba(7,25,18,.72) 100%); }
.displayInner{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; }
.topBrand{ display:flex; justify-content:space-between; align-items:center; padding:22px 26px 0; }
.topBrand .pill{ font-size:13px; padding:6px 16px; }
.clockWrap{ display:flex; flex-direction:column; align-items:center; padding:10px 0 4px; }
.phaseLabel{ font-size:clamp(18px,1.9vw,28px); letter-spacing:0.14em; color:var(--gold); font-weight:700; text-transform:uppercase; }
.clockRow{ display:flex; align-items:baseline; gap:22px; justify-content:center; }
.bigClock{ font-size:clamp(80px,10vw,150px); line-height:0.9; color:var(--ink); text-shadow:0 4px 30px rgba(0,0,0,.5); }
.addedInline{ font-family:'Bebas Neue'; font-size:clamp(40px,5vw,64px); color:var(--danger); text-shadow:0 2px 14px rgba(217,72,58,.35); }
.pensStrip{ text-align:center; margin-top:8px; }
.pensStrip .tag{ font-size:clamp(14px,1.3vw,18px); letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:2px; }
.pensStrip .nums{ font-family:'Bebas Neue'; font-size:clamp(38px,4.5vw,54px); color:var(--gold); }
.videoStage{ flex:1; display:flex; gap:16px; padding:0 2.5vw 2.5vh; min-height:0; }
.teamPanel{ flex:1; position:relative; overflow:hidden; min-height:0; }
.colorBar{ position:absolute; top:0; left:0; right:0; height:6px; z-index:3; opacity:0.85; }
.mediaMount{ position:absolute; inset:0; }
.mediaMount video, .mediaMount img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode: screen; }
.mediaMount .placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; font-size:clamp(28px,3.4vw,52px); mix-blend-mode:normal; }
.panelOverlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:5vh 4vw 4vh; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; background:linear-gradient(0deg, rgba(4,10,7,.92) 0%, rgba(4,10,7,.5) 45%, transparent 100%); }
.tName{ font-size:clamp(24px,2.6vw,36px); font-weight:700; }
.tScore{ font-family:'Bebas Neue'; font-size:clamp(90px,11vw,170px); line-height:0.78; }
@media (max-width:720px){ .videoStage{ flex-direction:column; } }

/* =============== CONTROLLER =============== */
#controlView{ max-width:520px; margin:0 auto; padding:16px 16px 60px; min-height:100vh; }
.ctrlHeader{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 4px; }
.ctrlHeader .miniClock{ font-family:'Bebas Neue'; font-size:26px; color:var(--gold); }
.ctrlHeader .phaseTag{ font-size:13px; color:var(--ink-dim); font-weight:600; }
.ctrlSubHeader{ padding:0 2px 14px; }
.card{ background:linear-gradient(160deg, var(--panel), #0a1f15); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.card h3{ margin:0 0 12px; font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); font-weight:700; }
.primaryBtn{ width:100%; border:none; border-radius:12px; padding:20px 16px; font-size:18px; font-weight:800; background:linear-gradient(160deg,var(--gold),#c9932a); color:#241a05; box-shadow:0 8px 20px rgba(232,178,58,.18); }
.primaryBtn:active{ transform:scale(0.98); }
.primaryBtn.muted{ background:rgba(255,255,255,.06); color:var(--ink); box-shadow:none; border:1px solid var(--panel-edge); }
.primaryBtn:disabled{ opacity:.5; }
.rowBtns{ display:flex; gap:10px; margin-top:10px; }
.rowBtns button{ flex:1; border:1px solid var(--panel-edge); background:rgba(255,255,255,.04); color:var(--ink); border-radius:10px; padding:12px 8px; font-size:13.5px; font-weight:600; }
.rowBtns button:active{ background:rgba(255,255,255,.1); }
.extraStepper{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; }
.extraStepper button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--panel-edge); background:rgba(255,255,255,.05); color:var(--ink); font-size:20px; font-weight:700; }
.extraStepper .val{ font-family:'Bebas Neue'; font-size:30px; color:var(--danger); min-width:60px; text-align:center; }
.scoreCard{ display:flex; gap:12px; }
.scoreTeam{ flex:1; border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; background:rgba(255,255,255,.03); border:1px solid var(--panel-edge); }
.scoreTeam .label{ font-size:13px; font-weight:700; text-align:center; }
.scoreTeam .stepRow{ display:flex; align-items:center; gap:12px; }
.scoreTeam .stepRow button{ width:38px; height:38px; border-radius:9px; border:none; background:rgba(255,255,255,.08); color:var(--ink); font-size:19px; font-weight:800; }
.scoreTeam .stepRow button.plus{ background:var(--gold); color:#241a05; }
.scoreTeam .stepRow .n{ font-family:'Bebas Neue'; font-size:34px; min-width:34px; text-align:center; }
details.setup{ background:transparent; border:1px solid var(--panel-edge); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; }
details.setup summary{ padding:14px 16px; font-size:13px; font-weight:700; color:var(--ink-dim); list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.setup summary::-webkit-details-marker{ display:none; }
details.setup summary:after{ content:'▾'; color:var(--ink-faint); transition:transform .15s; }
details.setup[open] summary:after{ transform:rotate(180deg); }
.setupBody{ padding:0 16px 16px; display:flex; flex-direction:column; gap:14px; }
.fieldGroup{ display:flex; flex-direction:column; gap:6px; }
.fieldGroup label{ font-size:12px; color:var(--ink-faint); font-weight:600; }
.fieldGroup input{ background:rgba(255,255,255,.05); border:1px solid var(--panel-edge); color:var(--ink); border-radius:9px; padding:11px 12px; font-size:14px; width:100%; }
.fieldGroup input[type=color]{ padding:4px; height:42px; }
.teamSetupBlock{ border-top:1px dashed var(--panel-edge); padding-top:12px; }
.teamSetupBlock h4{ margin:0 0 8px; font-size:12.5px; color:var(--gold); }
.resetBtn{ width:100%; background:transparent; border:1px solid rgba(217,72,58,.4); color:var(--danger); border-radius:10px; padding:12px; font-size:13.5px; font-weight:700; }
.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:#111; color:var(--ink); padding:10px 18px; border-radius:999px; font-size:13px; border:1px solid var(--panel-edge); transition:opacity .2s, transform .2s; z-index:50; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }