@font-face {
  font-family: "Super Warming";
  src: url("/assets/fonts/Super%20Warming.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --theme-bg: #121318;
  --theme-bg-deep: #0e0f13;
  --theme-surface: #191a20;
  --theme-surface-raised: #22242b;
  --theme-surface-soft: #2b2d35;
  --theme-primary: #2b2d31;
  --theme-primary-bright: #393b43;
  --theme-accent: #76558a;
  --theme-accent-soft: #b99acb;
  --theme-accent-rgb: 118, 85, 138;
  --theme-text: #f2f3f5;
  --theme-muted: #b5bac1;
  --theme-dim: #777e89;
  --theme-border: #3a3c47;
  --theme-danger: #a84768;
  --theme-success: #4f936f;
  --page-content-width: 106rem;
  --sticky-content-top: calc(4.25rem + 1rem);
  color-scheme: dark;
  font-family: "Trebuchet MS", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

html { background: var(--theme-bg-deep); }
body {
  color: var(--theme-text);
  background-color: #0f1014;
  background-image: repeating-linear-gradient(
    135deg,
    #0f1014 0,
    #0f1014 48px,
    #121318 48px,
    #121318 96px
  );
  background-attachment: fixed;
}

body,
button,
input,
textarea,
select { font-family: inherit; }

h1,
h2,
h3,
.topbar-brand,
.panel-title,
.game-name,
.history-title,
.profile-result-title,
.highlight-name,
.winner-name,
.action-button,
.mini-result-button,
.mini-result-title {
  font-family: "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}

h1,
.page-title,
.events-heading,
.profile-name,
.detail-title,
.winner-name {
  font-family: "Super Warming", "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-weight: 400;
}

::selection { background: var(--theme-accent); color: var(--theme-bg-deep); }

* { scrollbar-color: #4f3961 rgba(12, 13, 16, 0.72); }

.page-title,
.events-heading,
.profile-name,
.detail-title,
.winner-name {
  color: var(--theme-text);
  letter-spacing: -0.025em;
  text-shadow: 0 0.15rem 1.2rem rgba(196, 147, 230, 0.13);
}

.app-topbar {
  position: sticky;
  top: 0;
  border-bottom-color: rgba(196, 147, 230, 0.22);
  background: rgba(16, 17, 22, 0.96);
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.22);
}

.topbar-brand {
  color: var(--theme-accent-soft);
  text-shadow: 0 0 1.25rem rgba(196, 147, 230, 0.32);
}

.topbar-link,
.topbar-menu-label {
  color: var(--theme-muted);
  font-family: "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.topbar-link:hover,
.topbar-menu-label:hover {
  background: var(--theme-primary);
  color: #fff;
}

.topbar-link.active,
.topbar-menu.active .topbar-menu-label {
  background: rgba(var(--theme-accent-rgb), 0.58);
  color: #fff;
}

.topbar-submenu {
  border-color: var(--theme-border);
  background: rgba(25, 26, 32, 0.98);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.48);
}

.topbar-submenu .topbar-link.active {
  background: rgba(var(--theme-accent-rgb), 0.58);
}

.topbar-avatar { background: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-border); }
.topbar-name { color: var(--theme-text); }
.topbar-logout { color: var(--theme-muted); }
.topbar-logout:hover { background: var(--theme-primary); color: #fff; }

.panel,
.calendar-panel,
.event-details,
.center-card,
.mini-result-panel,
.winner-card,
.menu-card {
  border-color: var(--theme-border);
  background: rgba(25, 26, 32, 0.95);
  box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.2);
}

.panel,
.calendar-panel,
.event-details,
.center-card,
.mini-result-panel,
.winner-card,
.menu-card,
.stat-card { border-radius: 1.3rem; }

.page-shell,
.report-shell,
.dashboard {
  width: min(100%, var(--page-content-width)) !important;
  margin-inline: auto !important;
}

.names-page,
.wheel-page,
.tournaments-page,
.report-page,
.games-page,
.page {
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.wheel-page { padding-top: 2.5rem; }
.wheel-page .page-header { margin-bottom: 1.5rem; }
.wheel-page .page-title { font-size: clamp(2rem, 6vw, 3.4rem); }

.toolbar {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.name-sidebar,
.detail-panel,
.event-details,
.filter-panel { top: var(--sticky-content-top); }

.game-card,
.player-card,
.name-row,
.team-card,
.match-card,
.bracket-entrant,
.game-filter,
.history-edit-input,
.history-edit-search,
.history-edit-player { border-radius: 0.9rem; }

.panel-note,
.page-loading,
.page-error,
.empty-state,
.access-note,
.status-message,
.events-state,
.event-details-placeholder,
.history-date,
.participant-count,
.profile-real-name,
.profile-result-date,
.highlight-stats,
.mini-result-status { color: var(--theme-muted); }

.text-input,
.text-area,
.server-select,
.mini-result-search,
.mini-result-description,
.team-name-edit,
.number-input {
  border-color: var(--theme-border);
  background: rgba(13, 14, 18, 0.82);
  color: var(--theme-text);
}

.text-input::placeholder,
.text-area::placeholder,
.mini-result-search::placeholder { color: var(--theme-dim); }
.mini-result-description::placeholder { color: var(--theme-dim); }

.text-input:focus-visible,
.text-area:focus-visible,
.server-select:focus-visible,
.mini-result-search:focus-visible,
.mini-result-description:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-color: var(--theme-accent);
}

.action-button,
.mini-result-button,
.mini-result-icon-button,
.mini-result-field-button,
.calendar-nav-button {
  border-color: var(--theme-border);
  background: var(--theme-primary);
  color: var(--theme-text);
}

.action-button:hover,
.mini-result-button:hover,
.mini-result-icon-button:hover,
.mini-result-field-button:hover,
.calendar-nav-button:hover:not(:disabled) { background: var(--theme-primary-bright); }

.action-button.primary,
.mini-result-button.primary,
.discord-button,
.mini-result-fab {
  border-color: var(--theme-accent);
  background: linear-gradient(135deg, #6c4c80, #4f3961);
  color: #fff;
  box-shadow: 0 0.65rem 1.5rem rgba(55, 30, 72, 0.34);
}

.action-button.primary:hover,
.mini-result-button.primary:hover,
.discord-button:hover,
.mini-result-fab:hover {
  background: linear-gradient(135deg, #7d5a92, #5c426e);
  transform: translateY(-1px);
}

.action-button.danger,
.mini-result-button.danger {
  border-color: #c25a7c;
  background: #713047;
  color: #ffeaf1;
}

.action-button.subtle { background: transparent; color: var(--theme-muted); }

.player-grid-header { color: var(--theme-muted); }
.sidebar-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.name-row-select {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.65rem;
  min-width: 0;
  cursor: pointer;
}
.name-pin-button {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--theme-dim);
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.52;
}
.name-pin-button:hover {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.18);
  color: var(--theme-text);
  filter: none;
  opacity: 1;
}
.name-pin-button.pinned {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.42);
  color: #fff;
  filter: none;
  opacity: 1;
}
.player-card,
.game-card,
.name-row,
.selected-chip,
.team-card,
.match-card,
.bracket-entrant,
.game-filter,
.stat-card,
.name-chip,
.selected-icon,
.icon-choice,
.preview-card,
.meta-box {
  border-color: var(--theme-border);
  background: rgba(24, 25, 31, 0.88);
}

.player-card:hover,
.game-card:hover,
.name-row:hover,
.team-card:hover,
.bracket-entrant:hover,
.game-filter:hover,
.icon-choice:hover,
.selected-chip:hover,
.team-copy-button:hover {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.2);
}

.game-card.active,
.name-row.selected,
.team-card.active,
.game-filter.active,
.icon-choice.selected,
.mini-result-option.priority {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.42);
}

.player-id,
.player-count,
.player-nickname.empty,
.name-row-real,
.selected-real-name,
.team-capacity,
.match-label,
.meta-label,
.history-label,
.stat-label,
.player-actual,
.mini-result-label,
.mini-result-option-meta { color: var(--theme-dim); }

.calendar-panel,
.event-details { background: rgba(25, 26, 32, 0.95); }
.calendar-range, .calendar-month-title { color: var(--theme-accent-soft); }
.calendar-weekday { color: var(--theme-muted); }
.calendar-day {
  border-color: rgba(58, 60, 71, 0.72);
  background: rgba(18, 19, 24, 0.7);
}
.calendar-day:nth-child(7n),
.calendar-day:nth-last-child(-n + 7) { border-color: rgba(58, 60, 71, 0.72); }
.calendar-day.empty { background: rgba(10, 11, 14, 0.5); }
.calendar-day.today { background: rgba(196, 147, 230, 0.12); }
.calendar-day.today .calendar-day-number { color: var(--theme-accent-soft); }
.calendar-event:not(.plan) { border-left-color: var(--theme-accent); background: #4f3961; }
.calendar-event:not(.plan):hover { background: #624777; }
.calendar-event.interested { box-shadow: inset 0 0 0 1px var(--theme-accent-soft); }
.calendar-event.selected { outline-color: var(--theme-accent-soft); }
.event-card { border-color: var(--theme-border); background: rgba(24, 25, 31, 0.88); }

.mode-toggle label {
  border-color: var(--theme-border);
  background: rgba(24, 25, 31, 0.88);
}
.mode-toggle label:has(input:checked) {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.48);
}
.mode-toggle input,
.mini-result-host input,
.name-row input { accent-color: var(--theme-accent); }

.match-connector { border-color: var(--theme-border); }
.bracket-entrant.winner { border-color: #73c79a; background: rgba(52, 111, 79, 0.62); }
.entrant-score { color: #f2c9ff; }

.history-card:hover,
.history-card.expanded { border-color: var(--theme-accent); }
.history-details { border-top-color: var(--theme-border); }
.history-value { color: var(--theme-text); }
.history-subtitle,
.profile-result-subtitle { color: var(--theme-muted); }
.history-edit-trigger,
.history-edit-close,
.history-edit-button {
  border-color: var(--theme-border);
  background: var(--theme-primary);
  color: var(--theme-text);
}
.history-edit-trigger:hover,
.history-edit-close:hover,
.history-edit-button:hover { border-color: var(--theme-accent); background: var(--theme-primary-bright); }
.history-delete-trigger { border-color: #7d3b50; background: #582936; color: #ffe7ed; }
.history-delete-trigger:hover { border-color: #a84f6a; background: #713546; }
.history-edit-selection-tooltip { border-color: var(--theme-border); background: var(--theme-surface-raised); color: var(--theme-text); }
.history-edit-button.primary { border-color: var(--theme-accent); background: linear-gradient(135deg, #6c4c80, #4f3961); }
.history-edit-backdrop { background: rgba(5, 6, 8, 0.82); }
.history-edit-dialog { border-color: var(--theme-border); background: var(--theme-surface); }
.history-edit-header { border-bottom-color: var(--theme-border); background: rgba(34, 36, 43, 0.96); }
.history-edit-label { color: var(--theme-text); }
.history-edit-count { color: var(--theme-muted); }
.history-edit-input,
.history-edit-search,
.history-edit-picker { border-color: var(--theme-border); background: rgba(13, 14, 18, 0.82); color: var(--theme-text); }
.history-edit-player { background: rgba(28, 29, 35, 0.9); }
.history-edit-player:hover,
.history-edit-player.selected { border-color: var(--theme-accent); background: var(--theme-primary); }
.history-edit-player input { accent-color: var(--theme-accent); }
.leaderboard-table th,
.leaderboard-table td { border-bottom-color: rgba(58, 60, 71, 0.72); }
.sort-button { color: var(--theme-muted); }
.sort-button:hover,
.sort-button.active,
.player-link { color: var(--theme-text); }
.player-link:hover,
.profile-back { color: var(--theme-accent-soft); }

.mini-result-header { border-bottom-color: var(--theme-border); background: rgba(34, 36, 43, 0.96); }
.mini-result-body,
.mini-result-picker { background: var(--theme-surface); }
.mini-result-field-button,
.mini-result-host,
.mini-result-option { border-color: var(--theme-border); background: rgba(18, 19, 24, 0.86); }
.mini-result-host:has(input:checked),
.mini-result-option:hover,
.mini-result-option.priority {
  border-color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.24);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes page-content-enter {
    from { opacity: 0; transform: translateY(0.25rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  #names-content:not([hidden]),
  #games-content:not([hidden]),
  #wheel-content:not([hidden]),
  #tournament-content:not([hidden]),
  #history-list:not([hidden]),
  #leaderboard-content:not([hidden]),
  #profile-content:not([hidden]),
  #dashboard:not([hidden]) {
    animation: page-content-enter 150ms ease-out both;
  }

  .panel,
  .game-card,
  .player-card,
  .history-card,
  .action-button,
  .mini-result-button,
  .mini-result-fab { transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
}