body {
  font-family: Arial, sans-serif;
  margin: 24px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

input,
select,
button {
  padding: 8px;
  margin-top: 4px;
}

#rink {
  position: relative;
  width: 800px;
  height: 340px;
  border: 3px solid #333;
  border-radius: 80px;
  background:
  linear-gradient(to right, transparent 49.8%, red 49.8%, red 50.2%, transparent 50.2%),
  linear-gradient(to right, transparent 37.3%, blue 37.3%, blue 37.7%, transparent 37.7%),
  linear-gradient(to right, transparent 62.3%, blue 62.3%, blue 62.7%, transparent 62.7%),
  #f8f8f8;
  margin-bottom: 16px;
  cursor: crosshair;
  overflow: hidden;
}

#dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.faceoff-circle,
.center-circle {
  position: absolute;
  width: 120px;   /* 30 ft out of 200 ft rink = 15% of 800px */
  height: 120px;
  border: 3px solid red;
  border-radius: 50%;
  box-sizing: border-box;
}

.center-circle {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.left-zone.top {
  left: 15.5%;   /* x = -69 */
  top: 24.1%;    /* y = +22 */
  transform: translate(-50%, -50%);
}

.left-zone.bottom {
  left: 15.5%;
  top: 75.9%;    /* y = -22 */
  transform: translate(-50%, -50%);
}

.right-zone.top {
  left: 84.5%;   /* x = +69 */
  top: 24.1%;
  transform: translate(-50%, -50%);
}

.right-zone.bottom {
  left: 84.5%;
  top: 75.9%;
  transform: translate(-50%, -50%);
}

.crease {
  position: absolute;
  width: 24px;
  height: 48px;
  border: 3px solid blue;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.left-crease {
  left: 5.5%;
  transform: translateY(-50%);
  border-radius: 0 40px 40px 0;
  border-left: none;
}

.right-crease {
  left: auto;
  right: 5.5%;
  transform: translateY(-50%);
  border-radius: 40px 0 0 40px;
  border-right: none;
}

.goal-line {
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: red;
}

.left-goal-line {
  left: 5.5%;
}

.right-goal-line {
  left: 94.5%;
}

.faceoff-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.left-top-dot {
  left: 15.5%;
  top: 24.1%;
}

.left-bottom-dot {
  left: 15.5%;
  top: 75.9%;
}

.right-top-dot {
  left: 84.5%;
  top: 24.1%;
}

.right-bottom-dot {
  left: 84.5%;
  top: 75.9%;
}

.neutral-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.left-top-neutral {
  left: 40.5%;
  top: 24.1%;
}

.left-bottom-neutral {
  left: 40.5%;
  top: 75.9%;
}

.right-top-neutral {
  left: 59.5%;
  top: 24.1%;
}

.right-bottom-neutral {
  left: 59.5%;
  top: 75.9%;
}

.app-layout {
  display: grid;
  grid-template-columns: 780px 520px;
  gap: 24px;
  align-items: start;
}

.tracker-panel {
  min-width: 0;
}

.video-panel {
  position: sticky;
  top: 16px;
}

#youtubePlayer,
#gameVideo {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  margin: 12px 0;
}

.video-panel input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

table {
  font-size: 14px;
}

@media (max-width: 1200px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .video-panel {
    position: static;
  }
}

#rink {
  width: 100%;
  max-width: 760px;
  height: 323px;
}

.video-panel {
  min-width: 0;
  max-width: 520px;
}

#youtubePlayer,
#gameVideo {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
}

.events-section {
  margin-top: 24px;
  width: 100%;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}


#setupBar {
  border: 1px solid #ccc;
  background: #f8f8f8;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 6px;
}

#toggleSetupBarBtn {
  margin-bottom: 8px;
}

.setup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.setup-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.setup-tabs button {
  padding: 6px 14px;
}

.setup-tab-panel {
  border-top: 1px solid #ddd;
  padding-top: 12px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
}

.conditional-field {
  display: none;
}

.player-confirm {
  align-self: flex-end;
  color: #2c7a2c;
  font-weight: bold;
  padding-bottom: 10px;
}

#quickLogOverlay {
  position: sticky;
  top: 8px;
  z-index: 50;
  background: #2c3e50;
  color: white;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#quickLogHeader {
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#quickLogPrompt {
  margin-bottom: 8px;
}

#quickLogInput {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.1em;
  border: none;
  border-radius: 4px;
}

#quickLogSummary {
  margin-top: 10px;
  font-size: 0.9em;
  opacity: 0.85;
}

#quickLogHint {
  margin-top: 8px;
  font-size: 0.75em;
  opacity: 0.6;
}

/* ============================================================
   Design pass -- same tokens/fonts as the dashboard, applied here
   for visual consistency across both pages. Purely cosmetic: nothing
   in this section touches #rink or any of its child elements'
   positioning (goal lines, circles, dots, crease), since those are
   load-bearing for the click-to-coordinate math in app.js.
   ============================================================ */

:root {
  --ink: #0b1220;
  --ice: #f5f8fb;
  --rink-blue: #1b3a6b;
  --rink-blue-light: #2e5490;
  --goal-red: #c8102e;
  --win-green: #1e8a5f;
  --steel: #5b6472;
  --card-white: #ffffff;
  --hairline: #dce3ea;

  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--ice);
  color: var(--ink);
  margin: 24px 32px 48px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.01em;
  color: var(--rink-blue);
  margin-bottom: 4px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 0 12px;
  padding-bottom: 8px;
  background-image: linear-gradient(var(--goal-red), var(--goal-red)),
    linear-gradient(var(--rink-blue), var(--rink-blue));
  background-size: 44px 2px, 44px 2px;
  background-position: left bottom, left calc(100% - 5px);
  background-repeat: no-repeat;
}

label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--steel);
  font-weight: 600;
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--card-white);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rink-blue);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.15);
}

button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  background: var(--rink-blue);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover {
  background: var(--rink-blue-light);
}

button:active {
  transform: translateY(1px);
}

table {
  border-collapse: collapse;
  background: var(--card-white);
  border: 1px solid var(--hairline);
  font-size: 0.85rem;
}

thead {
  background: var(--rink-blue);
}

thead th {
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 9px 10px;
  text-align: left;
  border: none;
}

tbody td {
  padding: 7px 10px;
  border-top: 1px solid var(--hairline);
  border-left: none;
  border-right: none;
  color: var(--ink);
}

tbody tr:hover {
  background: var(--ice);
}

/* Card-style treatment for the main structural containers */
#setupBar {
  background: var(--card-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
}

.controls {
  background: var(--card-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
}

.video-panel {
  background: var(--card-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
}

.events-section {
  background: var(--card-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
}

.setup-tabs button {
  background: var(--ice);
  color: var(--steel);
  border: 1px solid var(--hairline);
}

.setup-tabs button:hover {
  background: var(--rink-blue);
  color: white;
}

.login-gate {
  max-width: 400px;
  margin: 60px auto;
  background: var(--card-white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 32px;
}

.logged-in-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--steel);
}

.player-confirm {
  color: var(--win-green);
}

#quickLogOverlay {
  background: var(--rink-blue);
}