/* ===============================
   Global background image
   =============================== */
.logoImg {
  height: 100px;
  width: auto;
  background: rgba(255,255,255,0.08);
}
/* Background image layer */
body::after {
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("assets/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Visual treatment */
  filter: blur(6px) brightness(0.45);
  transform: scale(1.05); /* prevents blur edge clipping */

  z-index: -2;
}

/* Dark overlay for readability */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

/* ===============================
   Bingo teams scroll container
   =============================== */

.teamsCard {
  display: flex;
  flex-direction: column;
}

.teamsList {
  margin-top: 12px;
  max-height: 550px;
  overflow-y: auto;
  padding-right: 6px;  /* prevents scrollbar overlap */
}

/* nicer scrollbar (optional) */
.teamsList::-webkit-scrollbar {
  width: 8px;
}

.teamsList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
}

//* ===============================
   Bingo board / teams equal height
   =============================== */

.gameLayout {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: nowrap;
}

.boardCard,
.teamsCard {
  align-self: stretch;
}

.teamsCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.teamsPane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.teamsSection {
  display: flex;
  flex-direction: column;
  flex: 1 1 85%;
  min-height: 0;
}

.progressSection {
  display: flex;
  flex-direction: column;
  flex: 1 1 15%;
  min-height: 0;
}

.teamsList {
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.progressBox {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* optional scrollbar styling */
.teamsList::-webkit-scrollbar,
.progressBox::-webkit-scrollbar {
  width: 8px;
}

.teamsList::-webkit-scrollbar-thumb,
.progressBox::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
}

/* ===============================
   Footer 3-column layout
   =============================== */

.footer {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  background: rgba(10, 14, 20, 0.5);
}

.footerGrid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  padding: 20px 0 28px;
  align-items: start;
}

/* Shared column styling */
.footerCol {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Column 1 */
.footerColLeft {
  text-align: left;
}
.footerTitle {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.footerLink {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Column 2 */
.footerColCenter {
  text-align: center;
}
.footerDisclaimer {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* Column 3 */
.footerColRight {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.footerCreditTop {
  font-size: 0.75rem;
  color: var(--muted);
}

.footerLogo {
  max-width: 140px;
  height: auto;
  opacity: 0.85;
}

.footerCreditBottom {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ===============================
   Error Card
   =============================== */

.error-card {
    max-width: 600px;
    margin: 80px auto;
    padding: 32px;
    background: #1e1e1e;
    border-radius: 12px;
    text-align: center;
}

.error-card h1 {
    margin-bottom: 12px;
}

.error-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: centre;
}

.error-video {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

:root{color-scheme:dark;--bg:#0b0f14;--panel:#0f1620;--panel2:#0c121a;--border:#243041;--border2:#2f3d52;--text:#e6edf3;--muted:#9fb0c2;--input:#0b111a;--inputBorder:#2b3a51;--btn:#e6edf3;--btnText:#0b0f14;--btn2:#162131;--btn2Text:#e6edf3;--hover:#122033;--code:#0b111a;--good:#3fb950;--warn:#d29922;--bad:#f85149;--link:#9cc2ff}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:20px;background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{display:flex;gap:10px;align-items:center} .brand b{font-size:18px}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.02)}
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.card{border:1px solid var(--border);border-radius:12px;padding:14px;min-width:320px;background:var(--panel)}
.card h2{margin:0 0 10px 0;font-size:16px}
input,textarea{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--inputBorder);border-radius:10px;background:var(--input);color:var(--text);outline:none}
input:focus,textarea:focus{border-color:#4c86ff;box-shadow:0 0 0 3px rgba(76,134,255,.15)}
button{padding:10px 14px;border:0;border-radius:10px;cursor:pointer}
button.primary{background:var(--btn);color:var(--btnText)} button.primary:hover{filter:brightness(.92)}
button.secondary{background:var(--btn2);color:var(--btn2Text);border:1px solid var(--border)} button.secondary:hover{background:var(--hover)}
button.danger{background:rgba(248,81,73,.15);color:var(--bad);border:1px solid rgba(248,81,73,.35)} button.danger:hover{background:rgba(248,81,73,.22)}
.muted{color:var(--muted);font-size:13px} .small{font-size:12px}
.notice{padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.results{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:8px;background:rgba(255,255,255,.02)}
.result{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--panel);cursor:pointer;margin-bottom:8px}
.result:hover{background:var(--hover)}
.icon{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{border:1px solid var(--border2);border-radius:10px;padding:8px;background-color:#46555c
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-weight:600;text-align:left;font-size:12px}
.status{font-weight:700}
.status.scheduled{color:var(--warn)} .status.active{color:var(--good)} .status.ended{color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px 0}
.tab{padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.02);color:var(--text)}
.tab.active{background:var(--hover);border-color:#3a4a63}
pre{background:var(--code);padding:10px;border-radius:12px;overflow:auto;border:1px solid var(--border);color:var(--text)}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.pill-logout{border-color:var(--border2);}