* {
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  margin: 0;
  background: linear-gradient(135deg, #f8f9fd 0%, #e8eef7 100%);
  color: #1e3a5f;
  height: 100vh;
  overflow: hidden;
}

/* HEADER */
.top-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  height: 70px;
}

.top-bar h2 {
  margin: 0;
  font-size: 22px;
}

.top-bar p {
  font-size: 12px;
  margin: 2px 0 0;
  opacity: .7;
}

/* FULLSCREEN BUTTON SMALL */
.fs-btn {
  padding: 6px 10px !important;
  width: auto !important;
}

/* CARDS */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin: 0;
  border: 1px solid rgba(218,165,32,.3);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.blue-accent { border-color: rgba(30,144,255,.3); }
.gold-accent { border-color: rgba(218,165,32,.3); }

/* LAYOUT */
.live {
  display: grid;
  grid-template-columns: 60% 40%;
  height: calc(100vh - 70px);
  gap: 10px;
  padding: 10px;
}

iframe {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: none;
}

/* RIGHT SIDE STACK */
.side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* BUTTONS */
button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

.primary {
  background: #1e90ff;
  color: white;
}

button:hover { opacity: .9; }

/* FLASH WHEN BUZZED */
.active {
  animation: flash 1s infinite;
}

@keyframes flash {
  0% { box-shadow: 0 0 10px red; }
  50% { box-shadow: 0 0 25px gold; }
  100% { box-shadow: 0 0 10px red; }
}

#scores div {
  font-size: 14px;
  margin-bottom: 4px;
}

/* NO SCROLL ON FULLSCREEN */
html, body { overflow: hidden; }