/* Custom overrides — Tailwind (CDN) handles the rest. */

:root {
  --sidebar-width: 4rem;
  --felt-color: #0b6e3f;
  --felt-dark: #084d2c;
  --gold: #d4a017;
  --silver: #9ca3af;
  --bronze: #cd7f32;
}

/* Tailwind display utilities (.grid, .flex) otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

.flash-message { animation: slideIn 0.2s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Felt header strip (used sparingly: next-night card) */
.felt-strip {
  background: radial-gradient(ellipse at top, #11874f 0%, var(--felt-color) 55%, var(--felt-dark) 100%);
}

/* Seat badge (initials) */
.seat-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  font-size: 0.65rem; font-weight: 700;
}

/* 1st / 2nd / 3rd */
.medal--gold   { background: #fdf6dc; border-left: 4px solid var(--gold); }
.medal--silver { background: #f3f4f6; border-left: 4px solid var(--silver); }
.medal--bronze { background: #fbf0e6; border-left: 4px solid var(--bronze); }

/* Term tooltips: <span class="term">Rake<button class="term__btn">?</button><span class="term__pop"> */
.term { position: relative; display: inline; }
.term__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; margin-left: 0.25rem; vertical-align: text-top;
  border-radius: 9999px; border: 1px solid #a8a29e; background: #fff;
  color: #57534e; font-size: 0.65rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.term__btn:hover, .term__btn[aria-expanded="true"] { background: #dc2626; border-color: #dc2626; color: #fff; }
.term__btn:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.term__pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 0.35rem);
  width: min(18rem, 80vw); padding: 0.6rem 0.75rem;
  background: #292524; color: #fafaf9; border-radius: 0.5rem;
  font-size: 0.8rem; font-weight: 400; line-height: 1.4; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); white-space: normal;
}
.term__pop a { color: #fca5a5; text-decoration: underline; }

/* Levels editor */
.level-row.is-break td { background: #fffbeb; }
.level-row input:disabled { background: #f5f5f4; color: #a8a29e; }

/* Help page anchors clear the mobile top bar */
.help-section { scroll-margin-top: 4.5rem; }

/* Live console action sheets: bottom sheet on phones, centered on desktop */
dialog.action-sheet { margin: auto auto 0; }
@media (min-width: 640px) { dialog.action-sheet { margin: auto; } }
dialog.action-sheet summary::-webkit-details-marker { display: none; }

/* Pulsing "live" dot */
.live-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem;
  border-radius: 9999px; background: #dc2626; vertical-align: middle;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- Blind timer ---------------------------------------------------------- */
.timer-bar.timer--warning .timer-bar__clock { color: #fbbf24; }
.timer-bar.timer--paused .timer-bar__clock { opacity: 0.55; }
.timer-bar.timer--break { background: #78350f; }
.timer--offline [data-t="clock"]::after { content: " ⚠"; font-size: 0.5em; }

/* Big-screen display: the one dark, full-bleed page */
body.display {
  background: radial-gradient(ellipse at top, #11874f 0%, var(--felt-color) 45%, var(--felt-dark) 100%) fixed;
}
body.display.timer--break { background: radial-gradient(ellipse at top, #92400e 0%, #78350f 60%, #451a03 100%) fixed; }
.display__clock { font-size: clamp(5rem, 22vw, 20rem); }
body.display.timer--warning .display__clock { color: #fbbf24; }
body.display.timer--paused .display__clock { opacity: 0.5; }