/* -----------------------------------------------------------------------
 * style-polish.css
 *
 * Subtle additive polish that brings the off-board UI (sidebars, buttons,
 * chat, player roster) into the same visual family as the new race-track
 * board renderer. Loaded AFTER the inline <style> block in index.html so
 * its rules win on identical specificity.
 *
 * Design rules:
 *   - PURELY ADDITIVE / OVERRIDE: never changes layout, sizing, fonts or
 *     functional colour cues. The page should still look familiar.
 *   - All highlights anchored to the existing gold accent (#ffd166 family)
 *     plus per-team neon hexes already used on the board.
 *   - No new transitions or animations that fight existing ones.
 *
 * Sections:
 *   1. Sidebar shells (left + right)
 *   2. Sidebar headers + section dividers
 *   3. Button polish (raised "dashboard" feel)
 *   4. Player roster boxes (team-coloured stripe + PIT badge + active glow)
 *   5. Chat panel (tab underline + send button)
 *   6. Misc (scrollbar tint, notifications)
 * -------------------------------------------------------------------- */

/* ---------- 1. Sidebar shells -------------------------------------- */

.left-sidebar,
.right-sidebar {
  /* Faint inner highlight across the top edge so the panel feels
   * "lit from above" the same way the board frame does. */
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.04) 0%, rgba(255, 209, 102, 0) 80px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.18)),
    rgba(20, 20, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  position: relative;
}

/* Thin gold race-stripe across the very top edge of each sidebar - sits
 * above the rounded corners so it reads as a single brand thread. */
.left-sidebar::before,
.right-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0) 0%,
    rgba(255, 209, 102, 0.85) 50%,
    rgba(255, 209, 102, 0) 100%);
  border-radius: 2px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.45));
}

/* ---------- 2. Sidebar header + dividers --------------------------- */

.sidebar-header,
.chat-header,
.panel-tabs {
  /* Replace plain bottom border with a tinted gradient line so the
   * section breaks feel intentional rather than utilitarian. */
  border-bottom-color: transparent !important;
  position: relative;
}

.sidebar-header::after,
.chat-header::after,
.panel-tabs::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0) 0%,
    rgba(255, 209, 102, 0.55) 50%,
    rgba(255, 209, 102, 0) 100%);
  pointer-events: none;
}

/* ---------- 3. Button polish --------------------------------------- */

/* Generic raised feel for the primary buttons in the control panel and
 * the chat send button. Keep their existing gradient backgrounds intact;
 * just add highlight + inner shadow + slightly snappier transitions. */
.control-buttons #createBtn,
.control-buttons #joinBtn,
.control-buttons #leaveBtn,
.control-buttons #infoBtn,
.control-buttons #startBtn,
.control-buttons #addLocalPlayerBtn,
.control-buttons #rollBtn,
#chatSend {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}

.control-buttons #createBtn:hover:not(:disabled),
.control-buttons #joinBtn:hover:not(:disabled),
.control-buttons #leaveBtn:hover:not(:disabled),
.control-buttons #infoBtn:hover:not(:disabled),
.control-buttons #startBtn:hover:not(:disabled),
.control-buttons #addLocalPlayerBtn:hover:not(:disabled),
.control-buttons #rollBtn:hover:not(:disabled),
#chatSend:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Slightly tighten the room-code input so it visually pairs with the
 * polished buttons (matched border + inner shadow). */
.control-buttons #joinCode {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- 4. Player roster boxes --------------------------------- */

.player-box {
  position: relative;
  overflow: hidden;
  /* Slight inner gradient so the cards feel like driveway tiles. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.20)),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Per-team coloured left stripe. Echoes the driveway colour bands we
 * paint on the board, so a player box reads as that team's "lane". */
.player-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-stripe, rgba(255, 255, 255, 0.2));
  box-shadow: 0 0 10px var(--team-stripe-glow, rgba(255, 255, 255, 0.0));
}

/* Hook up the per-slot stripe colour by inspecting the icon class. The
 * :has() selector is supported by Chrome 105+, Safari 15.4+, FF 121+ -
 * we degrade gracefully to the neutral default stripe on older browsers. */
.player-box:has(.pit1-icon) { --team-stripe: #ff5252; --team-stripe-glow: rgba(255, 82, 82, 0.45); }
.player-box:has(.pit2-icon) { --team-stripe: #4caf50; --team-stripe-glow: rgba(76, 175, 80, 0.45); }
.player-box:has(.pit3-icon) { --team-stripe: #ffeb3b; --team-stripe-glow: rgba(255, 235, 59, 0.45); }
.player-box:has(.pit4-icon) { --team-stripe: #2196f3; --team-stripe-glow: rgba(33, 150, 243, 0.45); }

/* Tiny "PIT N" badge in the upper-right corner so the sidebar mirrors
 * the board's pit signage. Numbers follow the canonical clockwise turn
 * order and must match TEAM_LABEL in PitBoard.js
 * (pit1=1, pit2=2, pit3=3, pit4=4). */
.player-box::after {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.30);
  font-family: Inter, "Arial Black", Arial, sans-serif;
  pointer-events: none;
}
.player-box:has(.pit1-icon)::after { content: 'PIT 1'; }
.player-box:has(.pit2-icon)::after { content: 'PIT 2'; }
.player-box:has(.pit3-icon)::after { content: 'PIT 3'; }
.player-box:has(.pit4-icon)::after { content: 'PIT 4'; }

/* When a player box is the active turn, switch the white-ish glow for
 * a team-coloured one so it matches the board's turn marker. */
.player-box.active {
  border-color: var(--team-stripe, rgba(255, 255, 255, 0.5)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.10)),
    rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 14px var(--team-stripe-glow, rgba(255, 255, 255, 0.4)),
    0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
.player-box.active::after {
  color: var(--team-stripe, rgba(255, 255, 255, 0.5));
  text-shadow: 0 0 6px var(--team-stripe-glow, rgba(255, 255, 255, 0.4));
}

/* Notification strip below the roster - subtle inner bevel + top hairline
 * to pair with the new tile look. */
.player-notifications {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

/* ---------- 5. Chat panel ------------------------------------------ */

/* Active chat / stats tab gets a thicker glow underline so it reads as
 * a lit indicator rather than just a coloured underline. */
.tab-button.active {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.14), rgba(255, 209, 102, 0.04)) !important;
}
.tab-button.active::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0),
    rgba(255, 209, 102, 0.95),
    rgba(255, 209, 102, 0));
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
}

/* Send button: keep its bright green but match the new bevel + a subtle
 * gold rim on focus so it pairs with the tab indicator. */
#chatSend {
  background: linear-gradient(135deg, #4CAF50, #388E3C) !important;
}
#chatSend:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 0 2px rgba(255, 209, 102, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ---------- 6. Misc -------------------------------------------------- */

/* Sidebar scrollbars: make them tonally match the board (warm dim track,
 * gold thumb on hover) without changing width or behaviour. */
.chat-messages::-webkit-scrollbar-thumb,
.stats-content::-webkit-scrollbar-thumb,
#statsTab .stats-content::-webkit-scrollbar-thumb {
  background: rgba(255, 209, 102, 0.25);
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.stats-content::-webkit-scrollbar-thumb:hover,
#statsTab .stats-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 209, 102, 0.55);
}

/* ---------- 7. Title + crown shimmer -------------------------------- */

/* Very gentle continuous gold breath on the crown so the title bar
 * doesn't sit completely still. Hover-scale rule from the inline
 * stylesheet still wins thanks to its higher specificity / later state. */
.sidebar-header .crown-icon {
  animation: crown-breath 4.5s ease-in-out infinite;
}
@keyframes crown-breath {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.45)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.85)); }
}

/* Subtle ambient under-glow beneath the title so the gold gradient text
 * reads as "lit" rather than just coloured. Sits behind everything via
 * a -1 z-index so it never intercepts clicks. */
.sidebar-header .game-title {
  position: relative;
}
.sidebar-header .game-title::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 209, 102, 0.40) 0%,
    rgba(255, 209, 102, 0) 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

/* ---------- 8. Room-code label + input ------------------------------ */

/* Treat "Room Code:" as a small dashboard label rather than plain text. */
.control-buttons .control-group label {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.65rem !important;
  color: #c9a85a;
  font-weight: 700;
}

/* When the room-code field has focus, give it the same gold ring the
 * focus halo on the chat send button uses, so focus state feels unified. */
.control-buttons #joinCode:focus {
  border-color: rgba(255, 209, 102, 0.6) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 209, 102, 0.3) !important;
}

/* ---------- 9. Chat input bevel ------------------------------------- */

#chatInput {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
#chatInput:focus {
  border-color: rgba(255, 209, 102, 0.55) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 209, 102, 0.3) !important;
}

/* ---------- 10. Notification "Ready to play!" status pill ----------- */

/* Tiny status indicator dot before the notification text to make the
 * strip read like a live readout. Uses the same gold accent that
 * already lights up the title and tabs. */
.player-notifications .notification-content::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.85);
  animation: status-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1.00; transform: scale(1.15); }
}

/* When the notification flips into a typed state (info/warning/etc.),
 * recolour the dot to match the strip's accent so it stays consistent. */
.player-notifications.info    .notification-content::before { background: #64b5f6; box-shadow: 0 0 8px rgba(100, 181, 246, 0.85); }
.player-notifications.warning .notification-content::before { background: #ba68c8; box-shadow: 0 0 8px rgba(186, 104, 200, 0.85); }
.player-notifications.error   .notification-content::before { background: #e57373; box-shadow: 0 0 8px rgba(229, 115, 115, 0.85); }
.player-notifications.success .notification-content::before { background: #81c784; box-shadow: 0 0 8px rgba(129, 199, 132, 0.85); }

/* ---------- 11. Chat message accents -------------------------------- */

/* Add a tiny chevron in front of system + notification chat messages to
 * make them feel like console / race-radio entries. Per-team player
 * messages are deliberately left alone so the team colour cue stays
 * the most prominent visual element. */
.chat-message.system,
.chat-message.notification {
  position: relative;
  padding-left: 22px;
}
.chat-message.system::before,
.chat-message.notification::before {
  content: '›';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: rgba(255, 209, 102, 0.55);
  font-size: 1rem;
  line-height: 1;
}

/* Nudge the system message background tone toward the same warm-grey
 * the rest of the polish uses, so it sits in the family. */
.chat-message.system {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.18));
  border-left-color: rgba(255, 209, 102, 0.55);
}

/* ---------- 12. Direction indicator pill ---------------------------- */

/* The "↻ Clockwise" / "↺ Anti-clockwise" pill in the turn-order strip
 * gets a soft gold rim so it pairs with the new tab indicator. */
#direction-indicator {
  border: 1px solid rgba(255, 209, 102, 0.30);
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 13. Sidebar bottom accent stripe ------------------------ */

/* Mirror of the top race-stripe at the bottom edge of each sidebar so
 * the panel reads as a contained "module" with a clear top + bottom. */
.left-sidebar::after,
.right-sidebar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0) 0%,
    rgba(255, 209, 102, 0.45) 50%,
    rgba(255, 209, 102, 0) 100%);
  pointer-events: none;
}

/* ---------- 14. Loading screen polish ------------------------------- */

/* Match the radial backdrop the body itself uses, so the moment the
 * loading screen hides there is no jarring colour pop. Add a soft
 * track-stripe at the bottom and modernise the loading text a touch. */
.loading-screen {
  background:
    radial-gradient(ellipse at 50% 45%, #1a2030 0%, #0a0d14 60%, #04060a 100%) !important;
  position: relative;
  overflow: hidden;
}
.loading-screen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0) 0%,
    rgba(255, 209, 102, 0.7) 50%,
    rgba(255, 209, 102, 0) 100%);
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.55));
  animation: loading-stripe 2.6s ease-in-out infinite;
}
@keyframes loading-stripe {
  0%, 100% { opacity: 0.35; transform: scaleX(0.85); }
  50%      { opacity: 1.00; transform: scaleX(1.05); }
}
.loading-text {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: #c9a85a !important;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
}