@font-face {
      font-family: "Interstate";
      src: url("/fonts/Interstate.woff2") format("woff2"),
           url("/fonts/Interstate.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Interstate";
      src: url("/fonts/Interstate-Black.woff2") format("woff2"),
           url("/fonts/Interstate-Black.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Interstate Condensed";
      src: url("/fonts/Interstate-Condensed.woff2") format("woff2"),
           url("/fonts/Interstate-Condensed.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Interstate Light";
      src: url("/fonts/Interstate-Light.woff2") format("woff2"),
           url("/fonts/Interstate-Light.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Interstate Italic";
      src: url("/fonts/Interstate-Italic.woff2") format("woff2"),
           url("/fonts/Interstate-Italic.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    :root{
      --green:#62bc46;
      --bg:#000;
      --text:#e8f5e8;
      --grey:#495057;
      
    }

    html, body {
      height: 100%;
      background: var(--crt-bg);  /* instead of --bg:#000 so there’s no visible line */
      color: var(--green);
      font-family: "Interstate Regular Comp", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      letter-spacing: .2px;
    }

    .board {
      height: 100vh;               /* <<< exact height to fill viewport */
      padding: 20px 40px;
      display: flex;               /* you already add d-flex in HTML, this is a safety net */
      flex-direction: column;
      box-sizing: border-box;      /* <<< include padding in height calculation */
    }

    .logo {
      height: 32px;
      width: auto;
    }

    .title {
      color: var(--text);
      font-weight: 700;
      letter-spacing: 2px;
      font-size: clamp(18px, 2.4vw, 42px);
    }

    .clock {
      color: var(--text);
      font-weight: 700;
      font-size: clamp(20px, 3vw, 48px);
    }

    .section-head {
      display: flex;
      align-items: baseline;
      gap: 12px;
      font-weight: 500;
      font-size: clamp(14px, 1.5vw, 24px);
      margin: 12px 0 2px;
      color: var(--green);
    }
    .section-head i { font-size: 0.8em; }

    .hr-green {
      height: 2px;
      background: var(--green);
      opacity: 1;
      margin: 4px 0 6px 0;
    }

    /* Jobs table */
    .jobs-table {
      width: 100%;
      border-collapse: collapse;
      color: var(--green);
      table-layout: fixed;
      font-size: clamp(16px, 1.4vw, 28px);
    }
    .jobs-table th,
    .jobs-table td {
      padding: 11px 14px;
      vertical-align: middle;
    }
    .jobs-table thead th {
      color: var(--green);
      font-weight: 500;
      font-size: clamp(14px, 1.5vw, 24px);
    }
    .jobs-table thead th i {
      font-size: 0.8em;
    }
    .jobs-table tbody tr {
      border-bottom: 2px solid var(--green);
    }
    .jobs-table tbody tr:last-child {
      border-bottom: none;
    }

    /* Active job row styling */
    .jobs-table tbody tr.active-job {
      background: var(--green);
      color: #000;
      font-weight: 600;
    }
    .jobs-table tbody tr.active-job a,
    .jobs-table tbody tr.active-job span {
      color:#000 !important;
      font-weight: 600;
    }

    /* Square ACTIVE label */
    .status-pill {
      font-weight: 400;
      border-radius: 0;
      padding: 0px 10px;
      border: 2px solid currentColor;
      font-size: .9em;
    }

    /* Bottom three columns */
    .mini-list {
      list-style: none;
      margin: 0;
      padding: 0;
      color: var(--green);
      font-size: clamp(16px, 1.3vw, 26px);
    }
    .mini-list li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 2px solid var(--grey);
    }
    .mini-list li:last-child { border-bottom: none; }
    .mini-key { color: var(--green); }
    .mini-val { color: var(--green); font-weight: 400; }

    /* Two-column layout for Resources list */
    .mini-list-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(5, auto); /* Up to 5 rows per column */
      grid-auto-flow: column; /* Fill top-to-bottom, then next column */
      gap: 0 48px; /* 3x larger gap for clear separation */
    }
    
    /* Remove bottom border only from the very last item in each column */
    .mini-list-2col li:nth-child(5) {
      border-bottom: none; /* Remove border from 5th item (last in left column) */
    }
    
    .mini-list-2col li:nth-child(10) {
      border-bottom: none; /* Remove border from 10th item (last in right column) */
    }

    /* Table header border */
    .jobs-table thead tr {
      border-bottom: 2px solid var(--green) !important;
    }

    /* Table data cell borders */
    .jobs-table tbody td {
      border-bottom: 2px solid var(--grey);
    }

    /* Spacing for first job row 
    .jobs-table tbody tr.active-job {
      border-top: 8px solid transparent;
    }*/

    /* Subtle helper */
    .muted { color: var(--text); opacity: .85; }

    /* Make it scale reasonably on smaller landscape screens */
    @media (max-width: 1024px) {
      .board { padding: 20px; }
    }

    .png-icon {
      height: 20px;
      width: auto;
      vertical-align: baseline;
    }
    .data-border {
      border-left: 2px solid var(--grey);
      border-right: 2px solid var(--grey);

    }
    .job-table {
      padding-left: 15px;
    }
    .team-icon-btn {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
    .job-title-link {
      cursor: pointer;
      text-decoration: none;
    }

    /* Admin roster editor: 3 columns x 2 rows (more room per team than 6-across) */
    .roster-edit-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .roster-edit-col {
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 10px;
      background: #fff;
    }
    .roster-edit-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #dee2e6;
    }
    .roster-edit-icon {
      height: 48px;
      width: auto;
    }
    .roster-edit-player {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .roster-edit-add {
      width: 100%;
      text-align: center;
    }
    .role-toggle-group {
      display: flex;
      gap: 2px;
      flex: 0 0 auto;
    }
    .role-toggle-btn {
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: #fff;
      color: #adb5bd;
      cursor: pointer;
    }
    .role-toggle-btn.active {
      background: #adb5bd;
      color: #fff;
    }
    .role-toggle-btn .role-icon {
      width: 25px;
      height: 25px;
    }
    .roster-edit-player input[data-field="handle"] {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* View containers (avoid Bootstrap's !important d-flex/d-none so JS can toggle display inline) */
    .view-flex {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    /* Roster / leaderboard view */
    .roster-cols {
      display: flex;
      gap: 24px;
      height: 100%;
    }
    .roster-col {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .roster-col-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      border-bottom: 2px solid var(--green);
      padding-bottom: 8px;
      margin-bottom: 8px;
    }
    .roster-team-icon {
      height: clamp(48px, 10vw, 150px);
      width: auto;
    }
    .roster-team-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .roster-team-name {
      font-weight: 700;
      letter-spacing: 1px;
      font-size: clamp(14px, 1.6vw, 26px);
      color: var(--text);
    }
    .roster-count {
      color: var(--green);
      font-weight: 700;
      font-size: clamp(14px, 1.6vw, 26px);
    }
    .roster-players {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: clamp(13px, 1.2vw, 22px);
      color: var(--green);
    }
    .roster-players li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      border-bottom: 2px solid var(--grey);
    }
    .roster-players li:last-child { border-bottom: none; }
    .roster-players i {
      width: 1.2em;
      text-align: center;
    }
    .role-icon {
      width: 2.0em;
      height: 2.0em;
      object-fit: contain;
      flex: 0 0 auto;
      vertical-align: -0.25em;
    }

/******************************************************************************/
/* CRT DISPLAY – self-contained, tunable, Bootstrap-friendly                  */
/******************************************************************************/

/* --- GLOBAL TOKENS you’ll tweak most often -------------------------------- */
:root{
  /* Base background (not pure black so scanlines/vignette show everywhere) */
  --crt-bg: #061a06;

  /* Text “phosphor” + glow */
  --crt-phosphor: #b9ff9a;
  --crt-text-glow: 0 0 0.6px #b9ff9a, 0 0 6px rgba(140,255,140,.25);

  /* Scanlines tile is 8×4px (2px dark, 2px gap). Height scales spacing. */
  --crt-scan-opacity: .78;      /* raise for stronger lines */
  --crt-scan-height: 4px;       /* 3–8px typical */

  /* Very subtle RGB vertical stripe texture (aperture-grille feel) */
  --crt-rgb-opacity: .03;       /* 0.02–0.05 good range */

  /* Corner darkening */
  --crt-vignette-opacity: .42;

  /* Film grain */
  --crt-noise-opacity: .08;     /* set 0 to disable */
  --crt-noise-scale: 380px;     /* larger = coarser */

  /* Curved glass overlay (topmost) */
  --crt-glass-opacity: .70;

  /* Flicker dial (gentle). Set both to 1 to hard-disable. */
  --crt-flicker-min: .985;      /* .98–.995 */
  --crt-flicker-max: 1;
}

/* Match page bg so you don’t see a seam while loading */
html,body{height:100%;background:var(--crt-bg);}

/* --- BASE WRAPPER ---------------------------------------------------------- */
.crt{
  position:relative;
  min-height:100vh;             /* fills the screen */
  color:var(--crt-phosphor);
  background:var(--crt-bg);
  overflow:hidden;
  border-radius:18px;

  /* keep glyph edges crisp (helps the scanline look) */
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-shadow:var(--crt-text-glow);
}

/* Your inner layout container (works with Bootstrap flex utilities) */
.board{
  min-height:100vh;             /* pushes bottom rows to the page edge */
  display:flex;
  flex-direction:column;
  padding:32px 40px;
}

/* --- OVERLAY LAYERS (order matters) --------------------------------------- */
.crt__scan,.crt__rgb,.crt__vignette,.crt__noise,.crt__glass{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
}

/* 1) Scanlines – affects both text and background */
.crt__scan{
  z-index:10;
  background-image:url("/images/scanlines.png");
  background-repeat:repeat;
  background-size:auto var(--crt-scan-height); /* controls spacing */
  opacity:var(--crt-scan-opacity);
  animation:crt-drift 120s linear infinite;    /* slow vertical drift */
}

/* 2) RGB mask – ultra-subtle vertical stripes */
.crt__rgb{
  z-index:11;
  background-image:url("/images/rgb_mask.png");
  background-repeat:repeat;
  background-size:3px 3px;
  opacity:var(--crt-rgb-opacity);
  mix-blend-mode:overlay;
}

/* 3) Vignette – dark corners, visible even over black */
.crt__vignette{
  z-index:12;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,.25) 78%,
      rgba(0,0,0,.55) 100%);
  opacity:var(--crt-vignette-opacity);
}

/* 4) Grain – subtle motion adds “life” */
.crt__noise{
  z-index:13;
  background-image:url("/images/noise.png");
  background-repeat:repeat;
  background-size:var(--crt-noise-scale) var(--crt-noise-scale);
  opacity:var(--crt-noise-opacity);
  animation:crt-noise 3s steps(60) infinite;
}

/* 5) Curved glass PNG – highlights + edge shading */
.crt__glass{
  z-index:20;
  width:100%; height:100%; object-fit:cover;
  opacity:var(--crt-glass-opacity);
  filter:saturate(.95) contrast(1.02);
}

/* --- FLICKER (gentle by default) ------------------------------------------ */
/* Add class .is-flicker on .crt to enable.                                  */
/* Brightness wobble on CONTENT ONLY so the glass overlay doesn’t flicker.   */
.crt.is-flicker .board{
  animation:crt-bright 7s steps(80) infinite alternate;
}
.crt.is-flicker .crt__scan{
  /* keep drift AND add a micro “breath” to the lines */
  animation:
    crt-drift 120s linear infinite,
    crt-scan-breathe .9s steps(2) infinite;
}
.crt.is-flicker .crt__noise{
  animation:crt-noise 2s steps(50) infinite; /* a touch more active */
}

/* Whole-screen flicker alternative: use .is-flicker-strong instead */
.crt.is-flicker-strong{
  animation:crt-bright-all 6s steps(70) infinite alternate;
}

/* --- PRESET: punchier readability (optional) ------------------------------- */
/* Add .crt--punch to brighten text and ease overlays.                        */
.crt.crt--punch{
  --crt-phosphor:#f0ffe6;
  --crt-text-glow:0 0 1px #f0ffe6, 0 0 12px rgba(180,255,180,.35);
  --crt-scan-opacity:.58;
  --crt-rgb-opacity:.02;
  --crt-vignette-opacity:.26;
  --crt-glass-opacity:.50;
  --crt-noise-opacity:.06;
}

/* --- Utility: render specific elements above overlays (crispest) ---------- */
/* Apply .crt__escape to logo/title/clock if you want them extra punchy.     */
.crt__escape{
  position:relative; z-index:30;
  filter:brightness(1.08) contrast(1.05);
  text-shadow:0 0 1px #eefbe9, 0 0 12px rgba(190,255,190,.25);
}

/* --- Optional: tiny RGB fringe on large headings -------------------------- */
.crt .crt-rgb-bleed{
  text-shadow:
    var(--crt-text-glow),
    1px 0 0 rgba(255,0,0,.06),
    -1px 0 0 rgba(0,128,255,.06);
}

/* --- Animations ------------------------------------------------------------ */
@keyframes crt-drift{from{background-position:0 0} to{background-position:0 64px}}
@keyframes crt-noise{0%{background-position:0 0} 50%{background-position:30px 20px} 100%{background-position:0 0}}
@keyframes crt-scan-breathe{0%{opacity:calc(var(--crt-scan-opacity) - .05)} 100%{opacity:calc(var(--crt-scan-opacity) + .03)}}
@keyframes crt-bright{from{filter:brightness(1)} to{filter:brightness(.985)}}
@keyframes crt-bright-all{from{filter:brightness(1)} to{filter:brightness(.975)}}

/******************************************************************************/
/* END CRT DISPLAY                                                            */
/******************************************************************************/

/* Fixed Footer */
.footer-copyright {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--green);
  font-size: 0.75rem;
  z-index: 1000;
  text-shadow: 0 0 3px rgba(98, 188, 70, 0.5);
}


#rosterView {
  margin-top: 50px;
}