/* ===========================
   SCORINGBOARD — BASE THEME (ROYAL)
   Modern • Classy • Event-Ready
   =========================== */

/* ==== COLOR TOKENS (Royal) ==== */
:root{
  --bg1:#f5f7fb;      --bg2:#e9edf5;
  --panel:#ffffff;    --text:#0f172a; --muted:#6b7280; --border:#e6e9f0;

  --accent:#3b82f6;   /* Royal blue accent */
  --ring: rgba(59,130,246,.40);

  /* Team colors */
  --aka:#b53a3a;      /* red tweaked */
  --ao:#264fb4;       /* royal blue */

  /* Effects */
  --glass: rgba(255,255,255,.68);
  --glass-stroke: rgba(255,255,255,.45);
  --shadow-1: 0 6px 18px rgba(15, 23, 42, .06);
  --shadow-2: 0 12px 34px rgba(15, 23, 42, .10);

  /* Radii & Spacing */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px;

  /* Motion */
  --dur-1: 120ms; --dur-2: 240ms; --easing: cubic-bezier(.2,.8,.2,1);
}

/* ==== DARK MODE ==== */
:root[data-theme="dark"]{
  --bg1:#0d1117; --bg2:#0b0e13; --panel:#0f141c; --text:#e5e7eb; --muted:#a1a8b3; --border:#212833;
  --glass: rgba(17,22,30,.72); --glass-stroke: rgba(255,255,255,.07);
  --shadow-1: 0 8px 22px rgba(0,0,0,.35); --shadow-2: 0 18px 44px rgba(0,0,0,.55);
}

/* motion pref */
@media (prefers-reduced-motion: reduce){ :root{ --dur-1:0ms; --dur-2:0ms } }

/* ==== GLOBAL RESET ==== */
*{ box-sizing:border-box }
html,body{ height:100%; overflow:hidden }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 650px at 50% -10%, var(--bg1) 0%, var(--bg2) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  display:flex; flex-direction:column;
}

/* transitions */
button, input, a, .sb-card, .timer-box, .kb-input{ transition: all var(--dur-1) var(--easing) }
.ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ==== HEADER ==== */
.sb-header-title{ flex:0 0 auto; padding: var(--space-3) 0 var(--space-2); text-align:center; }
.title-stack{ display:flex; flex-direction:column; align-items:center; gap:4px; }

#title-main{
  font-size: clamp(1.6rem, 2.8vw, 2.6rem); font-weight: 900; letter-spacing:.4px; text-transform:uppercase; line-height:1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
:root[data-theme="dark"] #title-main{ text-shadow:none; }

#title-sub{ font-size: clamp(1.05rem, 2.1vw, 1.5rem); font-weight:800; color: color-mix(in srgb, var(--text) 86%, #000 14%); line-height:1.15; }
:root[data-theme="dark"] #title-sub{ color: color-mix(in srgb, var(--text) 92%, #fff 8%) }

#title-loc{ font-size: clamp(.95rem, 1.7vw, 1.15rem); font-weight:700; font-style:italic; opacity:.9; line-height:1.05; }

/* ==== GRID ==== */
.sb-3col{ flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap: var(--space-3); padding: var(--space-3); }

/* ==== CARD (Glass) ==== */
.sb-card{
  position:relative; border-radius: var(--r-xl); background: var(--glass); border:1px solid var(--glass-stroke);
  box-shadow: var(--shadow-1), var(--shadow-2); backdrop-filter: saturate(120%) blur(10px); -webkit-backdrop-filter: saturate(120%) blur(10px);
  overflow:hidden;
}
.panel-pad{ padding: clamp(14px, 2.2vw, 22px); display:flex; flex-direction:column; gap: var(--space-3); }

/* ==== THEME SWITCH ==== */
.theme-switch{
  position:fixed; top:12px; right:12px; z-index:50; border:1px solid var(--glass-stroke);
  background: var(--glass); color: var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:900;
  backdrop-filter: saturate(120%) blur(6px);
}
.theme-switch:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }