/* =========================================================
   FOOTBALL SCOREBOARD — BROADCAST GRAPHICS STYLESHEET
   ========================================================= */

:root{
  --navy-950:#040914;
  --navy-900:#071122;
  --navy-850:#0a1830;
  --navy-800:#0d1f3c;
  --navy-700:#132a4d;
  --navy-600:#1a3760;
  --panel-glass: rgba(10, 22, 45, 0.72);
  --panel-glass-light: rgba(18, 36, 66, 0.55);
  --cyan:#3fe6ff;
  --cyan-soft:#8ff3ff;
  --blue:#2f7dff;
  --blue-deep:#1450c9;
  --red:#ff3b45;
  --red-deep:#b8142a;
  --red-soft:#ff6b73;
  --gold:#ffcc33;
  --white:#f4f9ff;
  --grey:#8ea3c4;
  --grey-dim:#5c7196;
  --font-head:'Teko', 'Arial Narrow', sans-serif;
  --font-body:'Rajdhani', 'Segoe UI', sans-serif;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:7px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  background:var(--navy-950);
  color:var(--white);
  font-family:var(--font-body);
  width:100%;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:var(--navy-950);}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}
.hidden{display:none !important;}

/* ============================================================
   VIEW NAV
   ============================================================ */
.view-nav{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-bottom:1px solid rgba(63,230,255,0.25);
  box-shadow:0 4px 18px rgba(0,0,0,0.55);
}
.brand-mini{display:flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-size:19px;letter-spacing:1.5px;color:var(--cyan-soft);font-weight:600;}
.view-nav-btns{display:flex;gap:10px;}
.nav-btn{
  padding:9px 18px;border-radius:8px;border:1px solid rgba(63,230,255,0.35);
  background:var(--panel-glass-light);color:var(--grey);
  font-family:var(--font-head);font-size:16px;letter-spacing:1.5px;font-weight:600;
  transition:all .15s ease;
}
.nav-btn:hover{color:var(--white);border-color:var(--cyan);}
.nav-btn.active{
  color:var(--navy-950);background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,230,255,0.55);
}
.nav-btn-accent{
  background:linear-gradient(180deg,#ff5a63,var(--red-deep));
  border-color:var(--red);color:var(--white);
  box-shadow:0 0 14px rgba(255,59,69,0.4);
}
.nav-btn-accent:hover{filter:brightness(1.15);}

/* ============================================================
   CONTROL VIEW LAYOUT
   ============================================================ */
.control-view{
  padding:18px 22px 40px;
  max-width:1900px;margin:0 auto;
}
.control-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;margin-bottom:14px;
  background:var(--panel-glass);
  border:1px solid rgba(63,230,255,0.25);
  border-radius:var(--radius-md);
}
.control-title{
  font-family:var(--font-head);font-size:26px;letter-spacing:1px;font-weight:600;
  color:var(--white);display:flex;align-items:center;gap:10px;
}
.gear{color:var(--cyan);}
.control-date{color:var(--grey);font-size:14px;letter-spacing:1px;}

.control-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.ctab{
  padding:10px 20px;border-radius:8px 8px 0 0;border:1px solid rgba(63,230,255,0.2);
  border-bottom:none;background:var(--navy-850);color:var(--grey);
  font-family:var(--font-head);font-size:16px;letter-spacing:1px;font-weight:600;
}
.ctab.active{background:var(--panel-glass);color:var(--cyan-soft);
  box-shadow:0 -2px 12px rgba(63,230,255,0.15) inset;border-color:var(--cyan);}

.control-grid{
  display:grid;grid-template-columns: minmax(340px,1fr) minmax(420px,1.15fr);
  gap:16px;align-items:start;
}
.bottom-grid{grid-template-columns: 1fr; margin-top:16px;}

.panel{
  background:var(--panel-glass);
  border:1px solid rgba(63,230,255,0.18);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
}
.preview-panel{padding:12px;}
.preview-label{
  font-family:var(--font-head);font-size:14px;letter-spacing:2px;color:var(--cyan);
  margin-bottom:8px;padding-left:4px;
}

/* preview scoreboard scaled down */
.sb-preview{
  transform-origin:top left;
  aspect-ratio: 16/10.2;
  width:100%;
}

/* ============================================================
   TOOL BLOCKS
   ============================================================ */
.tool-block{
  background:var(--panel-glass-light);
  border:1px solid rgba(63,230,255,0.12);
  border-radius:var(--radius-md);
  padding:14px 16px;margin-bottom:14px;
}
.tool-block-title{
  font-family:var(--font-head);font-size:15px;letter-spacing:2px;color:var(--grey);
  margin-bottom:10px;font-weight:600;
}
.tool-block-title.center{text-align:center;}

.matchtime-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.matchtime-big{
  font-family:var(--font-head);font-size:56px;font-weight:600;letter-spacing:2px;
  color:var(--white);
  text-shadow:0 0 18px rgba(63,230,255,0.5);
  background:var(--navy-950);
  border:1px solid rgba(63,230,255,0.35);
  border-radius:10px;padding:2px 22px;flex:1;text-align:center;
  font-variant-numeric:tabular-nums;
}
.matchtime-btns{display:flex;gap:10px;}
.icon-btn{
  width:56px;height:56px;border-radius:50%;border:none;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.icon-btn.play{background:radial-gradient(circle at 35% 30%, #4ade80, #16a34a);color:#04240f;}
.icon-btn.play.is-running{background:radial-gradient(circle at 35% 30%, #ffd166, #d97706);}
.icon-btn.reset{background:radial-gradient(circle at 35% 30%, #7f97c4, #2c3f66);color:#0a1730;}
.icon-btn.small{width:38px;height:38px;font-size:14px;background:var(--navy-700);color:var(--cyan-soft);}

.subrow-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.stepper-label{font-size:12px;letter-spacing:1.5px;color:var(--grey-dim);margin-bottom:6px;text-align:center;}
.stepper{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--navy-950);border:1px solid rgba(63,230,255,0.2);border-radius:8px;padding:8px;}
.step-btn{width:32px;height:32px;border-radius:6px;border:1px solid rgba(63,230,255,0.3);
  background:var(--navy-800);color:var(--cyan-soft);font-size:18px;line-height:1;}
.step-btn:hover{background:var(--navy-700);}
.step-value{font-family:var(--font-head);font-size:22px;min-width:78px;text-align:center;color:var(--white);}
.step-value-input{
  font-family:var(--font-head);font-size:22px;width:88px;text-align:center;color:var(--white);
  background:transparent;border:1px solid rgba(63,230,255,0.3);border-radius:6px;padding:4px 2px;
}
.step-value-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(63,230,255,0.25);}
.extra-add-btn{margin-top:12px;}
.extra-total{margin-top:8px;font-size:11px;letter-spacing:.5px;color:var(--grey-dim);text-align:center;}

.wide-btn{
  width:100%;padding:12px;border-radius:8px;border:1px solid rgba(63,230,255,0.35);
  background:var(--navy-800);color:var(--cyan-soft);font-family:var(--font-head);
  font-size:15px;letter-spacing:1.5px;font-weight:600;
}
.wide-btn:hover{background:var(--navy-700);}
.wide-btn.accent{background:linear-gradient(180deg,#4be0ff,#1a9fd0);color:#04202b;border-color:transparent;}
.wide-btn.ghost{background:transparent;color:var(--grey);}
.wide-btn.danger{background:linear-gradient(180deg,#ff5a63,var(--red-deep));color:#fff;border-color:transparent;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.team-tool-head{font-family:var(--font-head);font-size:14px;letter-spacing:2px;font-weight:600;
  padding:6px 10px;border-radius:6px;margin-bottom:8px;text-align:center;}
.home-glow{color:#ff8b90;background:rgba(255,59,69,0.12);box-shadow:inset 0 0 0 1px rgba(255,59,69,0.4);}
.away-glow{color:#8fd0ff;background:rgba(47,125,255,0.12);box-shadow:inset 0 0 0 1px rgba(47,125,255,0.4);}
.team-select{
  width:100%;padding:8px;border-radius:6px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:var(--white);margin-bottom:10px;
}
.team-tool-kit{display:flex;gap:10px;align-items:center;}
.kit-preview{width:58px;height:98px;flex:0 0 auto;}
.kit-colors{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--grey);}
.kit-colors label{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kit-colors input[type=color]{width:34px;height:24px;border:none;border-radius:4px;background:none;padding:0;}

.score-row{display:flex;align-items:center;justify-content:center;gap:26px;}
.score-side{display:flex;flex-direction:column;align-items:center;gap:8px;}
.score-num{font-family:var(--font-head);font-size:52px;font-weight:700;min-width:70px;text-align:center;}
.score-sep{font-family:var(--font-head);font-size:40px;color:var(--grey-dim);}
.score-btn{
  width:44px;height:38px;border-radius:8px;border:none;font-size:20px;font-weight:700;color:#fff;
}
.score-btn.plus{background:linear-gradient(180deg,#4ade80,#0f9d4d);}
.score-btn.minus{background:linear-gradient(180deg,#ff6b6b,#c81e35);}

.half-row{display:flex;align-items:center;justify-content:center;gap:20px;}
.half-value{font-family:var(--font-head);font-size:40px;font-weight:700;min-width:50px;text-align:center;}
.half-label-sub{text-align:center;margin-top:6px;letter-spacing:2px;color:var(--cyan-soft);font-size:13px;font-weight:600;}

.penalty-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.penalty-row.four{grid-template-columns:repeat(4,1fr);}
.penalty-tool{background:var(--navy-950);border-radius:10px;padding:12px;text-align:center;
  border:1px solid rgba(63,230,255,0.15);}
.penalty-tool-label{font-size:12px;letter-spacing:1.5px;font-weight:600;padding:4px;border-radius:5px;margin-bottom:8px;}
.penalty-tool-time{font-family:var(--font-head);font-size:30px;color:var(--red-soft);font-weight:700;
  text-shadow:0 0 12px rgba(255,59,69,0.6);margin-bottom:10px;font-variant-numeric:tabular-nums;}
.penalty-time-input{
  display:block;width:100%;font-family:var(--font-head);font-size:24px;font-weight:700;text-align:center;
  color:var(--white);background:var(--navy-900);border:1px solid rgba(63,230,255,0.3);border-radius:6px;
  padding:6px 2px;margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.penalty-time-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(63,230,255,0.25);}
.penalty-tool-status{
  font-size:10.5px;letter-spacing:1px;font-weight:600;color:#ffd166;
  margin:-4px 0 10px;animation:penWaitPulse 1.4s ease-in-out infinite;
}
@keyframes penWaitPulse{0%,100%{opacity:0.55;}50%{opacity:1;}}
.penalty-tool-btns{display:flex;gap:8px;justify-content:center;}
.mini-btn:disabled{opacity:0.4;cursor:not-allowed;}
.mini-btn{padding:7px 14px;border-radius:6px;border:none;font-family:var(--font-head);
  font-size:13px;letter-spacing:1px;font-weight:700;background:linear-gradient(180deg,#4be0ff,#1a9fd0);color:#04202b;}
.mini-btn.ghost{background:var(--navy-800);color:var(--grey);border:1px solid rgba(255,255,255,0.15);}

.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.action-btn{
  padding:16px 10px;border-radius:10px;border:none;color:#fff;font-family:var(--font-head);
  font-size:16px;letter-spacing:1px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);transition:transform .1s ease;
}
.action-btn:active{transform:scale(0.96);}
.action-btn .ico{font-size:22px;}
.action-btn.yellow{background:linear-gradient(180deg,#ffe066,#e0a300);color:#3a2900;}
.action-btn.red{background:linear-gradient(180deg,#ff5a63,var(--red-deep));}
.action-btn.goal{background:linear-gradient(180deg,#4be0ff,#1a6fd0);}
.action-btn.foul{background:linear-gradient(180deg,#a78bfa,#6d28d9);}
.action-btn.stats{background:linear-gradient(180deg,#6ee7b7,#059669);}
.action-btn.newmatch{background:linear-gradient(180deg,#94a3b8,#334155);}
.action-btn.print{background:linear-gradient(180deg,#5eead4,#0f766e);grid-column:1 / -1;}

.stats-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px;}
.stats-edit-title{font-family:var(--font-head);font-size:14px;letter-spacing:2px;margin-bottom:8px;}
.stats-edit-col label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--grey);}
.stats-edit-col input{width:80px;padding:6px;border-radius:6px;border:1px solid rgba(63,230,255,0.25);background:var(--navy-950);color:#fff;}

/* ============================================================
   TEAMS MANAGEMENT + EVENTS PANELS
   ============================================================ */
.panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.panel-head-title{font-family:var(--font-head);font-size:18px;letter-spacing:1.5px;color:var(--white);}
.panel-head-actions{display:flex;gap:10px;align-items:center;}
.small-btn{padding:8px 14px;border-radius:7px;border:1px solid rgba(63,230,255,0.3);
  background:var(--navy-800);color:var(--cyan-soft);font-size:13px;font-weight:600;letter-spacing:.5px;}
.small-btn.accent{background:linear-gradient(180deg,#4be0ff,#1a9fd0);color:#04202b;border-color:transparent;}
.small-btn.danger{background:linear-gradient(180deg,#ff5a63,var(--red-deep));color:#fff;border-color:transparent;}
.search-input{padding:8px 12px;border-radius:7px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:#fff;font-size:13px;min-width:170px;}

.teams-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;}
.team-card{
  flex:0 0 168px;background:var(--navy-950);border:1px solid rgba(63,230,255,0.18);
  border-radius:12px;padding:10px;text-align:center;position:relative;
}
.team-card.is-home{box-shadow:0 0 0 2px var(--red);}
.team-card.is-away{box-shadow:0 0 0 2px var(--blue);}
.team-card-kits{display:flex;gap:10px;justify-content:center;margin-bottom:6px;}
.team-card-kit-slot{display:flex;flex-direction:column;align-items:center;gap:3px;}
.team-card-kit{width:50px;height:86px;}
.team-card-kit-label{font-size:9px;letter-spacing:1px;color:var(--grey-dim);font-weight:700;}
.team-card-name{font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:8px;min-height:30px;}
.team-card-btns{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.tc-btn{padding:4px 7px;font-size:10px;border-radius:5px;border:none;font-weight:700;letter-spacing:.5px;}
.tc-btn.home{background:rgba(255,59,69,0.2);color:#ff9298;}
.tc-btn.away{background:rgba(47,125,255,0.2);color:#8fc4ff;}
.tc-btn.edit{background:var(--navy-700);color:var(--grey);}
.tc-btn.del{background:rgba(255,59,69,0.15);color:#ff8189;}

.events-table-wrap{max-height:420px;overflow-y:auto;}
.events-table{width:100%;border-collapse:collapse;font-size:13px;}
.events-table th{
  text-align:left;padding:8px 10px;color:var(--grey-dim);font-size:11px;letter-spacing:1.5px;
  border-bottom:1px solid rgba(63,230,255,0.15);position:sticky;top:0;background:var(--panel-glass);
}
.events-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,0.04);}
.ev-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;}
.ev-del{background:none;border:none;color:var(--grey-dim);font-size:15px;}
.ev-del:hover{color:var(--red);}

/* ============================================================
   MATCH HISTORY
   ============================================================ */
.history-panel{margin-top:16px;}
.history-table-wrap{max-height:360px;}
.history-table td{vertical-align:middle;}
.hist-match-cell{font-weight:700;}
.hist-score-cell{font-family:var(--font-head);font-size:16px;letter-spacing:1px;}
.hist-btns{display:flex;gap:6px;flex-wrap:wrap;}
.hist-btn{padding:5px 10px;font-size:11px;border-radius:6px;border:none;font-weight:700;letter-spacing:.5px;}
.hist-btn.view{background:var(--navy-700);color:var(--cyan-soft);}
.hist-btn.edit{background:rgba(255,204,51,0.18);color:#ffdd7a;}
.hist-btn.del{background:rgba(255,59,69,0.15);color:#ff8189;}
.history-empty{padding:24px 10px;text-align:center;color:var(--grey-dim);font-size:13px;}

/* history modal */
.modal.history-modal{width:min(720px,94vw);}
.history-modal-body{max-height:70vh;overflow-y:auto;}
.hm-row{display:flex;gap:14px;margin-bottom:4px;}
.hm-row label{flex:1;}
.hm-row.two{align-items:flex-start;}
.hm-team-col{flex:1;background:var(--navy-950);border:1px solid rgba(63,230,255,0.15);
  border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.hm-team-title{font-family:var(--font-head);font-size:13px;letter-spacing:2px;font-weight:700;
  padding:4px 8px;border-radius:5px;margin-bottom:2px;}
.hm-team-col label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:1px;color:var(--grey);}
.hm-team-col input{padding:7px 8px;border-radius:6px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-900);color:#fff;font-size:13px;}
.hm-events{margin-top:14px;}
.hm-events-title{font-family:var(--font-head);font-size:13px;letter-spacing:2px;color:var(--grey);margin-bottom:8px;}
.hm-events-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;}
.hm-event-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;
  background:var(--navy-950);border:1px solid rgba(255,255,255,0.06);font-size:12px;}
.hm-event-row .hm-ev-time{font-family:var(--font-head);color:var(--white);min-width:34px;}
.hm-event-row .hm-ev-meta{flex:1;color:var(--grey);}
.hm-event-row .hm-ev-del{background:none;border:none;color:var(--grey-dim);font-size:16px;}
.hm-event-row .hm-ev-del:hover{color:var(--red);}
.hm-events-empty{color:var(--grey-dim);font-size:12px;padding:8px;}
.modal-foot.wrap{flex-wrap:wrap;}
.wide-btn.save{background:linear-gradient(180deg,#4ade80,#0f9d4d);color:#04240f;border-color:transparent;}

/* ---------- LIVE SYNC (Settings tab) ---------- */
.sync-help{font-size:12.5px;line-height:1.5;color:var(--grey-dim);margin-bottom:12px;}
.sync-help strong{color:var(--cyan-soft);}
.sync-field-label{display:block;font-size:11px;letter-spacing:1.5px;color:var(--grey-dim);margin-bottom:6px;}
.sync-config-textarea{
  width:100%;resize:vertical;border-radius:8px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:var(--white);font-family:'Consolas','Courier New',monospace;
  font-size:12px;line-height:1.5;padding:10px;margin-bottom:12px;box-sizing:border-box;
}
.sync-config-textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(63,230,255,0.25);}
.sync-room-input{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:var(--white);font-family:var(--font-head);letter-spacing:1.5px;
  font-size:15px;margin-bottom:14px;box-sizing:border-box;
}
.sync-room-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(63,230,255,0.25);}
.sync-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sync-status{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--grey-dim);
  padding:10px 12px;border-radius:8px;background:var(--navy-950);border:1px solid rgba(63,230,255,0.12);}
.sync-status.sync-ok{color:#4ade80;border-color:rgba(74,222,128,0.35);}
.sync-status.sync-error{color:#ff8b90;border-color:rgba(255,59,69,0.35);}
.sync-status.sync-pending{color:#ffd166;border-color:rgba(255,209,102,0.35);}

/* ============================================================
   PUBLIC SCOREBOARD
   ============================================================ */
.scoreboard-view{
  padding:0;margin:0;width:100vw;height:calc(100vh - 46px);
}
.scoreboard-view .scoreboard{width:100%;height:100%;}

.scoreboard{
  position:relative;
  container-type: size;
  container-name: sb;
  background:
    radial-gradient(ellipse 90% 70% at 15% 15%, rgba(255,59,69,0.16), transparent 55%),
    radial-gradient(ellipse 90% 70% at 85% 15%, rgba(47,125,255,0.18), transparent 55%),
    radial-gradient(ellipse 140% 90% at 50% 100%, rgba(140,200,255,0.22), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, #061024 55%, #030711 100%);
  border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding: clamp(10px,1.4cqw,22px) clamp(14px,2.4cqw,40px);
  font-family:var(--font-body);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
}
.sb-full{border-radius:0;}

/* hockey rink lines background decoration */
.scoreboard::before{
  content:"";position:absolute;inset:4% 3%;pointer-events:none;opacity:0.16;
  border:2px solid rgba(180,220,255,0.55);
  border-radius:18% / 30%;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 8%, rgba(255,80,80,0.6) 8% 8.4%, transparent 8.4%),
    radial-gradient(circle at 50% 50%, transparent 0 1.2%, rgba(255,80,80,0.6) 1.2% 1.8%, transparent 1.8%),
    radial-gradient(circle at 15% 50%, transparent 0 8%, rgba(90,160,255,0.55) 8% 8.4%, transparent 8.4%),
    radial-gradient(circle at 85% 50%, transparent 0 8%, rgba(90,160,255,0.55) 8% 8.4%, transparent 8.4%),
    linear-gradient(90deg, transparent 49.6%, rgba(255,80,80,0.6) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(90deg, transparent 24.6%, rgba(90,160,255,0.55) 24.6% 25.4%, transparent 25.4%),
    linear-gradient(90deg, transparent 74.6%, rgba(90,160,255,0.55) 74.6% 75.4%, transparent 75.4%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.scoreboard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(63,230,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 8%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 4px);
}

.sb-topbar{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:2;}
.sb-logo{display:flex;align-items:center;gap:10px;}
.sb-logo svg{filter:drop-shadow(0 0 6px rgba(63,230,255,0.6));flex:0 0 auto;}
.sb-logo-text{font-family:var(--font-head);font-weight:600;line-height:1;
  font-size:clamp(13px,1.35cqw,19px);letter-spacing:1.5px;color:var(--white);}
.sb-tagline{font-family:var(--font-head);font-weight:600;line-height:1.25;text-align:right;
  font-size:clamp(11px,1.05cqw,15px);letter-spacing:2px;color:var(--grey);}

.sb-timer-wrap{text-align:center;margin: clamp(2px,0.5cqh,6px) auto clamp(3px,0.7cqh,8px);position:relative;z-index:2;}
.sb-timer-label{font-family:var(--font-head);letter-spacing:6px;color:var(--grey);
  font-size:clamp(12px,1.1cqw,16px);margin-bottom:2px;}
.sb-timer{
  font-family:var(--font-head);font-weight:700;color:var(--white);
  font-size:clamp(64px,20cqh,216px);line-height:1;letter-spacing:5px;
  display:inline-block;padding:0 clamp(40px,6cqw,90px);
  background:linear-gradient(180deg, rgba(10,22,45,0.55), rgba(4,9,20,0.75));
  border:1px solid rgba(63,230,255,0.35);
  border-radius:16px;
  clip-path:polygon(3% 0,97% 0,100% 22%,100% 78%,97% 100%,3% 100%,0 78%,0 22%);
  text-shadow:0 0 18px rgba(255,255,255,0.55), 0 0 46px rgba(63,230,255,0.45);
  box-shadow:0 0 0 1px rgba(255,59,69,0.15), 0 10px 40px rgba(0,0,0,0.5);
  font-variant-numeric:tabular-nums;
}
.sb-timer.flash{animation:timerFlash 0.5s ease 3;}
@keyframes timerFlash{
  0%,100%{box-shadow:0 0 0 1px rgba(255,59,69,0.15),0 10px 40px rgba(0,0,0,0.5);}
  50%{box-shadow:0 0 0 4px rgba(255,59,69,0.9),0 10px 60px rgba(255,59,69,0.5);}
}
.sb-status-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;}
.sb-live-badge{
  background:var(--red);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:clamp(12px,1.1cqw,16px);letter-spacing:3px;padding:4px 14px;border-radius:5px;
  box-shadow:0 0 14px rgba(255,59,69,0.7);animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
.sb-half-label{font-family:var(--font-head);font-weight:600;color:var(--cyan-soft);
  font-size:clamp(13px,1.2cqw,18px);letter-spacing:3px;}
.sb-extra-badge{font-family:var(--font-head);font-weight:600;color:var(--gold);
  font-size:clamp(12px,1.1cqw,16px);letter-spacing:2px;background:rgba(255,204,51,0.12);
  padding:3px 10px;border-radius:5px;border:1px solid rgba(255,204,51,0.4);}

.sb-teams-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,2cqw,30px);
  padding: clamp(4px,0.9cqh,11px) 0;position:relative;z-index:2;
  border-top:1px solid rgba(63,230,255,0.15);border-bottom:1px solid rgba(63,230,255,0.15);
  margin-bottom:clamp(4px,0.8cqh,9px);
}
.sb-team{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(8px,1.2cqw,16px);border-radius:14px;position:relative;}
.sb-team-home{
  background:linear-gradient(135deg, rgba(255,59,69,0.14), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,59,69,0.35), 0 0 30px rgba(255,59,69,0.12);
}
.sb-team-away{
  background:linear-gradient(225deg, rgba(47,125,255,0.16), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(47,125,255,0.4), 0 0 30px rgba(47,125,255,0.14);
}
.sb-team-tag{font-family:var(--font-head);font-weight:700;letter-spacing:3px;
  font-size:clamp(11px,1cqw,14px);padding:3px 14px;border-radius:4px;margin-bottom:6px;}
.sb-team-home .sb-team-tag{background:var(--red);color:#fff;}
.sb-team-away .sb-team-tag{background:var(--blue);color:#fff;}
.sb-kit{width:clamp(48px,5.2cqw,82px);height:clamp(81px,8.75cqw,138px);margin-bottom:6px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5));}
.sb-team-name{font-family:var(--font-head);font-weight:700;letter-spacing:1px;
  font-size:clamp(16px,2cqw,30px);color:var(--white);margin-bottom:6px;white-space:nowrap;}
.sb-kit-swatches{display:flex;gap:12px;font-size:clamp(9px,.8cqw,11px);color:var(--grey);letter-spacing:1px;}
.sb-kit-swatches span{display:flex;align-items:center;gap:5px;}
.sb-kit-swatches i{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid rgba(255,255,255,0.3);}

.sb-score-center{display:flex;align-items:center;gap:clamp(8px,1.4cqw,22px);}
.sb-score{
  font-family:var(--font-head);font-weight:700;line-height:1;
  font-size:clamp(56px,8cqw,120px);color:var(--white);
  text-shadow:0 0 22px rgba(255,255,255,0.4);
  min-width:1ch;text-align:center;
}
.sb-score.pulse{animation:scorePulse .6s ease;}
@keyframes scorePulse{0%{transform:scale(1);}35%{transform:scale(1.28);text-shadow:0 0 40px rgba(63,230,255,0.9);}100%{transform:scale(1);}}
.sb-score-sep{width:2px;align-self:stretch;background:linear-gradient(180deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 12px var(--cyan);}

.sb-stats-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1cqw,14px);
  padding:clamp(4px,0.7cqh,9px) 0;position:relative;z-index:2;
}
.sb-stat{background:var(--panel-glass-light);border:1px solid rgba(63,230,255,0.15);
  border-radius:10px;padding:clamp(4px,0.7cqh,8px) 10px;text-align:center;}
.sb-stat-label{font-family:var(--font-head);letter-spacing:3px;color:var(--grey);
  font-size:clamp(10px,.9cqw,13px);margin-bottom:4px;}
.sb-stat-vals{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2.4cqw,34px);
  display:flex;align-items:center;justify-content:center;gap:10px;}
.sb-stat-vals .home{color:var(--cyan-soft);}
.sb-stat-vals .away{color:var(--red-soft);}
.sb-stat-vals .sep{color:var(--grey-dim);font-size:0.7em;}
.sb-poss-bar{height:6px;border-radius:3px;overflow:hidden;display:flex;margin-top:6px;background:var(--navy-950);}
.sb-poss-bar .home-fill{background:var(--cyan);height:100%;}
.sb-poss-bar .away-fill{background:var(--red);height:100%;}

.sb-mid-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,1.4cqw,20px);
  padding:clamp(4px,0.7cqh,9px) 0;position:relative;z-index:2;
}
.sb-penalty-group{display:flex;gap:clamp(6px,1cqw,12px);}
.sb-penalty-group.home{justify-content:flex-end;}
.sb-penalty-group.away{justify-content:flex-start;}
.sb-penalty{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:clamp(4px,0.7cqh,8px) clamp(6px,1cqw,14px);border-radius:10px;
  background:var(--panel-glass-light);border:1px solid rgba(255,59,69,0.25);opacity:0.35;transition:opacity .2s ease;
}
.sb-penalty.active{opacity:1;box-shadow:0 0 20px rgba(255,59,69,0.35);}
.sb-penalty.flash{animation:penFlash .4s ease 4;}
@keyframes penFlash{0%,100%{background:var(--panel-glass-light);}50%{background:rgba(255,59,69,0.55);}}
.sb-penalty-ico{font-size:clamp(14px,1.3cqw,20px);color:var(--red-soft);flex:0 0 auto;}
.sb-penalty-label{font-family:var(--font-head);letter-spacing:1.5px;color:var(--grey);
  font-size:clamp(9px,.8cqw,12px);}
.sb-penalty-time{font-family:var(--font-head);font-weight:700;color:var(--red);
  font-size:clamp(17px,2cqw,28px);font-variant-numeric:tabular-nums;}
.sb-period-box{text-align:center;}
.sb-period-label{font-family:var(--font-head);letter-spacing:2px;color:var(--grey);
  font-size:clamp(10px,.9cqw,13px);}
.sb-period-value{font-family:var(--font-head);font-weight:700;color:var(--white);
  font-size:clamp(24px,3cqw,40px);}

.sb-cards-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4cqw,20px);
  flex:1;min-height:0;overflow:hidden;position:relative;z-index:2;
}
.sb-cards-col{display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.sb-card-item{
  display:flex;align-items:center;gap:10px;padding:clamp(5px,.9cqh,9px) clamp(8px,1.2cqw,14px);
  border-radius:8px;background:var(--panel-glass-light);
  border-left:5px solid var(--gold);
  animation:cardSlide .35s ease;
}
.sb-card-item.red{border-left-color:var(--red);}
.sb-cards-col.away .sb-card-item{flex-direction:row-reverse;text-align:right;border-left:none;border-right:5px solid var(--gold);}
.sb-cards-col.away .sb-card-item.red{border-right-color:var(--red);}
@keyframes cardSlide{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.sb-card-chip{width:clamp(16px,1.4cqw,22px);height:clamp(20px,1.8cqw,28px);border-radius:3px;flex:0 0 auto;
  background:var(--gold);box-shadow:0 0 8px rgba(255,204,51,0.6);}
.sb-card-item.red .sb-card-chip{background:var(--red);box-shadow:0 0 8px rgba(255,59,69,0.7);}
.sb-card-text{line-height:1.2;}
.sb-card-time{font-family:var(--font-head);font-weight:700;font-size:clamp(12px,1.1cqw,16px);color:var(--white);}
.sb-card-player{font-size:clamp(10px,.95cqw,13px);color:var(--grey);}
.sb-card-team{font-size:clamp(9px,.8cqw,11px);color:var(--grey-dim);}

.sb-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:clamp(2px,.4cqh,6px);position:relative;z-index:2;
}
.sb-footer-left,.sb-footer-right{font-family:var(--font-head);letter-spacing:3px;color:var(--grey-dim);
  font-size:clamp(9px,.85cqw,12px);}
.sb-footer-ball{font-size:clamp(16px,1.6cqw,24px);filter:drop-shadow(0 0 8px rgba(255,255,255,0.3));}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(2,6,14,0.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.modal{
  width:min(420px,92vw);background:var(--navy-900);border:1px solid rgba(63,230,255,0.35);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.6);overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--navy-850);border-bottom:1px solid rgba(63,230,255,0.2);
  font-family:var(--font-head);letter-spacing:1.5px;font-size:17px;
}
.modal-close{background:none;border:none;color:var(--grey);font-size:22px;line-height:1;}
.modal-close:hover{color:var(--red);}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.modal-body label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:1px;color:var(--grey);}
.modal-body input,.modal-body select{
  padding:10px;border-radius:7px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:#fff;font-size:14px;
}
.modal-body input[type=color]{padding:2px;height:38px;}
.modal-body p{color:var(--grey);font-size:14px;line-height:1.5;margin:0;}
.modal-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid rgba(63,230,255,0.12);}

/* HOME/AWAY kit editor inside the Add/Edit Team modal */
.kit-edit-label{font-size:11px;letter-spacing:1.5px;color:var(--grey-dim);margin-top:4px;}
.kit-edit-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.kit-edit-tab{
  padding:9px;border-radius:7px;border:1px solid rgba(63,230,255,0.25);
  background:var(--navy-950);color:var(--grey);font-family:var(--font-head);
  font-size:13px;letter-spacing:1.5px;font-weight:600;
}
.kit-edit-tab.active{background:linear-gradient(180deg,#4be0ff,#1a9fd0);color:#04202b;border-color:transparent;}
.kit-edit-preview{width:96px;height:160px;margin:2px auto 4px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .control-grid, .bottom-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .penalty-row.four{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .action-grid{grid-template-columns:1fr;}
  .subrow-grid{grid-template-columns:1fr;}
  .penalty-row.four{grid-template-columns:1fr;}
  .sb-teams-row{grid-template-columns:1fr;}
  .sb-cards-row{grid-template-columns:1fr;}
}

/* fullscreen mode: hide nav automatically via JS toggling body class */
body.is-fullscreen .view-nav{display:none;}
body.is-fullscreen .scoreboard-view{height:100vh;}

/* ============================================================
   PRINT — full match report
   ============================================================ */
#printArea{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{
    display:block !important; position:absolute; left:0; top:0; width:100%;
    background:#ffffff; color:#111318; padding:28px; font-family:Arial, Helvetica, sans-serif;
  }
  #printArea .pr-header{display:flex;align-items:center;justify-content:space-between;
    border-bottom:3px solid #111318;padding-bottom:10px;margin-bottom:16px;}
  #printArea .pr-title{font-size:24px;font-weight:800;letter-spacing:1px;margin:0;}
  #printArea .pr-date{font-size:13px;color:#555;}
  #printArea .pr-score{display:flex;align-items:center;justify-content:center;gap:24px;
    font-size:20px;font-weight:700;margin:18px 0;}
  #printArea .pr-score .pr-team{flex:1;text-align:center;}
  #printArea .pr-score .pr-num{font-size:40px;}
  #printArea .pr-meta{text-align:center;color:#444;font-size:13px;margin-bottom:18px;}
  #printArea h2{font-size:15px;letter-spacing:1px;border-bottom:1px solid #ccc;padding-bottom:4px;margin:20px 0 8px;}
  #printArea table{width:100%;border-collapse:collapse;margin-bottom:10px;}
  #printArea th,#printArea td{border:1px solid #ccc;padding:6px 9px;text-align:left;font-size:12px;}
  #printArea th{background:#f0f0f0;}
  #printArea .pr-footer{margin-top:24px;font-size:11px;color:#888;text-align:center;}
}