/* /assets/css/discovery-multi-lite.css */

:root {
  --gt-brand: #0C7489;
  --gt-brand-contrast: #ffffff;
  --gt-btn: #A4193D;
  --gt-btn-contrast: #ffffff;
  --gt-bg: #D7D9CE;
  --gt-card: #ffffff;
  --gt-text: #040404;
  --gt-muted: rgba(4, 4, 4, 0.66);
  --gt-border: rgba(19, 80, 91, 0.22);
  --gt-border-soft: rgba(19, 80, 91, 0.16);
  --gt-surface: rgba(17, 157, 164, 0.08);
  --gt-surface-2: rgba(12, 116, 137, 0.12);
  --gt-danger: #b42318;
  --gt-danger-contrast: #ffffff;
  --gt-success: #117a43;
  --gt-warning: #9a6700;
  --gt-shadow: 0 18px 50px rgba(16, 24, 32, 0.14);
  --gt-radius: 8px;
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --gt-brand: #FEE715;
  --gt-brand-contrast: #101820;
  --gt-btn: var(--gt-brand);
  --gt-btn-contrast: var(--gt-brand-contrast);
  --gt-bg: #101820;
  --gt-card: color-mix(in srgb, #121C26 92%, var(--gt-brand));
  --gt-text: #e9eef5;
  --gt-muted: rgba(233, 238, 245, 0.7);
  --gt-border: rgba(255, 255, 255, 0.14);
  --gt-border-soft: rgba(255, 255, 255, 0.1);
  --gt-surface: rgba(233, 238, 245, 0.07);
  --gt-surface-2: rgba(233, 238, 245, 0.11);
  --gt-danger: #f97066;
  --gt-danger-contrast: #101820;
  --gt-success: #32d583;
  --gt-warning: #fdb022;
  --gt-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--gt-bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  color: var(--gt-text);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--gt-brand) 18%, transparent), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--gt-bg) 92%, #ffffff), var(--gt-bg));
}

[hidden] {
  display: none !important;
}

a {
  color: color-mix(in srgb, var(--gt-brand) 76%, var(--gt-text));
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--gt-brand);
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select,
summary {
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gt-brand);
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

input,
select {
  width: 100%;
  min-height: 2.65rem;
  max-width: 100%;
  border: 1px solid var(--gt-border);
  border-radius: 6px;
  padding: 0.55rem 0.72rem;
  color: var(--gt-text);
  background: color-mix(in srgb, var(--gt-card) 94%, transparent);
}

input::placeholder {
  color: color-mix(in srgb, var(--gt-muted) 82%, transparent);
}

label {
  font-weight: 650;
}

.gt-skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-160%);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  color: var(--gt-btn-contrast);
  background: var(--gt-btn);
}

.gt-skip-link:focus {
  transform: translateY(0);
}

.gt-navbar {
  position: sticky;
  z-index: 900;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--gt-border-soft);
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--gt-bg) 88%, transparent);
  backdrop-filter: blur(16px);
}

.gt-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

#gt-navbar-logo {
  display: block;
  width: 188px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.22)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.24));
}

.gt-nav-links,
.gt-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.gt-nav-links {
  justify-content: center;
}

.gt-nav-links a,
.gt-nav-button,
.gt-admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border: 1px solid var(--gt-border);
  border-radius: 999px;
  padding: 0.36rem 0.7rem;
  color: var(--gt-text);
  background: var(--gt-surface);
  text-decoration: none;
  white-space: nowrap;
}

.gt-nav-button {
  min-width: 2.75rem;
}

.gt-nav-links a:hover,
.gt-nav-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gt-brand) 54%, var(--gt-border));
  background: color-mix(in srgb, var(--gt-brand) 14%, var(--gt-surface));
}

.gt-admin-badge {
  color: var(--gt-brand-contrast);
  background: var(--gt-brand);
  border-color: transparent;
  font-weight: 700;
}

.gt-header,
.gt-shell {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.gt-header {
  padding-block: clamp(1.25rem, 4vw, 3rem) 1rem;
}

.gt-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
  gap: 1rem;
  align-items: end;
}

.gt-eyebrow {
  margin-bottom: 0.55rem;
  color: var(--gt-brand);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gt-header h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 0.98;
}

.gt-header p {
  max-width: 68ch;
  margin: 0.85rem 0 0;
  color: var(--gt-muted);
  font-size: 1rem;
}

.gt-auth-status {
  border: 1px solid var(--gt-border-soft);
  border-radius: var(--gt-radius);
  padding: 0.85rem 1rem;
  background: var(--gt-surface);
}

.gt-shell {
  display: grid;
  gap: 1rem;
  padding-bottom: 2rem;
}

.gt-panel {
  min-width: 0;
  border: 1px solid var(--gt-border-soft);
  border-radius: var(--gt-radius);
  padding: clamp(0.9rem, 2vw, 1.15rem);
  background: color-mix(in srgb, var(--gt-card) 88%, transparent);
  box-shadow: var(--gt-shadow);
}

.gt-panel--wide {
  grid-column: 1 / -1;
}

.gt-panel h2,
.gt-panel h3,
dialog h2,
dialog h3 {
  margin: 0;
  line-height: 1.12;
}

.gt-panel h2 {
  font-size: 1.05rem;
}

.gt-panel h3,
dialog h3 {
  font-size: 1rem;
}

.gt-section-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.gt-section-heading p,
.gt-status-text,
.gt-message {
  margin: 0.28rem 0 0;
  color: var(--gt-muted);
}

.gt-section-heading--inline {
  align-items: center;
}

.gt-session-panel {
  display: grid;
  gap: 0.8rem;
}

.gt-session-topline,
.gt-status-line,
.gt-copy-row,
.gt-actions,
.gt-inline-form,
.gt-city-form,
.gt-reactions,
.gt-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.gt-session-topline {
  justify-content: space-between;
}

.gt-code-pill,
.gt-connection {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  border: 1px solid var(--gt-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  background: var(--gt-surface);
}

.gt-code-pill strong {
  margin-left: 0.35rem;
  color: var(--gt-brand);
  letter-spacing: 0.08em;
}

.gt-connection {
  color: var(--gt-muted);
  font-weight: 700;
}

.gt-connection::before {
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.gt-connection[data-state="live"] {
  border-color: color-mix(in srgb, var(--gt-success) 72%, var(--gt-border));
  color: var(--gt-success);
  background: color-mix(in srgb, var(--gt-success) 12%, transparent);
}

.gt-connection[data-state="polling"],
.gt-connection[data-state="connecting"] {
  border-color: color-mix(in srgb, var(--gt-warning) 72%, var(--gt-border));
  color: var(--gt-warning);
  background: color-mix(in srgb, var(--gt-warning) 13%, transparent);
}

.gt-connection[data-state="offline"],
.gt-connection[data-state="error"] {
  border-color: color-mix(in srgb, var(--gt-danger) 68%, var(--gt-border));
  color: var(--gt-danger);
  background: color-mix(in srgb, var(--gt-danger) 10%, transparent);
}

.gt-copy-row label,
.gt-inline-form label,
.gt-city-form label {
  flex: 0 0 auto;
}

.gt-copy-row input {
  flex: 1 1 18rem;
}

.gt-inline-form input,
.gt-inline-form select {
  flex: 1 1 11rem;
}

.gt-city-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.gt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border: 1px solid var(--gt-border);
  border-radius: 6px;
  padding: 0.52rem 0.82rem;
  color: var(--gt-text);
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  text-decoration: none;
  white-space: nowrap;
}

.gt-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gt-brand) 60%, var(--gt-border));
  background: color-mix(in srgb, var(--gt-brand) 12%, var(--gt-card));
}

.gt-button--primary {
  border-color: var(--gt-btn);
  color: var(--gt-btn-contrast);
  background: var(--gt-btn);
}

.gt-button--primary:hover:not(:disabled) {
  filter: brightness(0.96);
}

.gt-button--ghost {
  background: var(--gt-surface);
}

.gt-button--danger {
  border-color: var(--gt-danger);
  color: var(--gt-danger-contrast);
  background: var(--gt-danger);
}

.gt-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
  gap: 1rem;
  align-items: start;
}

.gt-main-column,
.gt-side-column {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.gt-side-column {
  align-self: start;
}

.gt-city-panel {
  border-color: color-mix(in srgb, var(--gt-brand) 32%, var(--gt-border-soft));
}

.gt-map-panel {
  padding: 0;
  overflow: hidden;
}

.gt-map-panel .gt-section-heading {
  margin: 0;
  padding: 1rem 1rem 0.85rem;
}

#map {
  width: 100%;
  height: min(66vh, 680px);
  min-height: 420px;
  border-top: 1px solid var(--gt-border-soft);
  background: color-mix(in srgb, var(--gt-bg) 80%, #000000);
}

.leaflet-container {
  font: inherit;
}

.gt-live-list,
.gt-rules-list,
.gt-end-stats {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.2rem;
}

.gt-live-list:empty {
  min-height: 0.25rem;
}

.gt-public-list {
  padding-left: 0;
  list-style: none;
}

.gt-public-sidebar {
  border-color: color-mix(in srgb, var(--gt-brand) 34%, var(--gt-border-soft));
}

.gt-public-sidebar summary {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.gt-public-sidebar summary::-webkit-details-marker {
  display: none;
}

.gt-public-sidebar summary span span {
  display: block;
  margin-top: 0.28rem;
  color: var(--gt-muted);
}

.gt-public-sidebar summary::after {
  display: none;
  content: none;
}

.gt-sidebar-handle {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--gt-brand) 58%, var(--gt-border));
  border-radius: 999px;
  padding: 0;
  color: var(--gt-brand);
  background: color-mix(in srgb, var(--gt-brand) 10%, transparent);
}

.gt-sidebar-handle:hover {
  background: color-mix(in srgb, var(--gt-brand) 18%, transparent);
}

.gt-sidebar-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.58rem;
  height: 0.58rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-58%, -66%) rotate(45deg);
}

.gt-public-sidebar:not([open]) .gt-sidebar-handle span {
  transform: translate(-42%, -50%) rotate(-45deg);
}

.gt-public-sidebar-content {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.gt-side-column .gt-public-session {
  grid-template-columns: 1fr;
}

.gt-side-column .gt-public-session-actions {
  justify-content: flex-start;
}

.gt-side-column .gt-public-session-actions button,
.gt-side-column .gt-public-session-actions a {
  flex: 1 1 auto;
}

.gt-public-session,
.gt-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--gt-border-soft);
  border-radius: 6px;
  padding: 0.72rem;
  background: var(--gt-surface);
}

.gt-public-session-main {
  display: grid;
  gap: 0.18rem;
}

.gt-public-session-meta,
.gt-player-tags,
.gt-chat-meta,
.gt-activity-time {
  color: var(--gt-muted);
}

.gt-public-session-actions,
.gt-player-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.gt-public-session-actions button,
.gt-public-session-actions a,
.gt-player-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  border: 1px solid var(--gt-border);
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  color: var(--gt-text);
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  text-decoration: none;
}

.gt-public-session-actions a:hover,
.gt-player-actions button:hover:not(:disabled),
.gt-public-session-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gt-brand) 60%, var(--gt-border));
  background: color-mix(in srgb, var(--gt-brand) 12%, var(--gt-card));
}

.gt-player-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.gt-player-dot {
  flex: 0 0 auto;
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid color-mix(in srgb, var(--gt-text) 28%, transparent);
  border-radius: 999px;
  background: var(--player-color, #60a5fa);
}

.gt-reactions {
  margin: 0.7rem 0 0;
}

.gt-reactions .gt-button {
  min-height: 2.1rem;
  padding: 0.28rem 0.58rem;
}

#session-message,
#city-message,
#goal-message,
#chat-message,
#spectator-message {
  min-height: 1.45rem;
  color: color-mix(in srgb, var(--gt-brand) 70%, var(--gt-text));
  font-weight: 650;
}

#debug-panel summary {
  cursor: pointer;
  font-weight: 750;
}

pre {
  max-height: 28rem;
  overflow: auto;
  white-space: pre-wrap;
}

dialog {
  width: min(92vw, 36rem);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius);
  padding: 1rem;
  color: var(--gt-text);
  background: var(--gt-card);
  box-shadow: var(--gt-shadow);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
}

.gt-dialog-header {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.gt-dialog-header p {
  margin: 0;
  color: var(--gt-muted);
}

.gt-end-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 0;
  list-style: none;
}

.gt-end-stats li {
  border: 1px solid var(--gt-border-soft);
  border-radius: 6px;
  padding: 0.65rem;
  background: var(--gt-surface);
}

.gt-dialog-actions {
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .gt-panel,
  .gt-auth-status {
    animation: gtFadeUp 0.32s ease both;
  }

  .gt-button,
  .gt-nav-button,
  .gt-nav-links a {
    transition: border-color 0.16s ease, background-color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
  }

  .gt-button:hover:not(:disabled),
  .gt-nav-button:hover:not(:disabled),
  .gt-nav-links a:hover {
    transform: translateY(-1px);
  }

  @keyframes gtFadeUp {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 1080px) {
  .gt-navbar {
    grid-template-columns: 1fr;
  }

  .gt-nav-links,
  .gt-nav-actions {
    justify-content: flex-start;
  }

  .gt-header-grid,
  .gt-play-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .gt-navbar {
    position: static;
  }

  #gt-navbar-logo {
    width: 154px;
  }

  .gt-header h1 {
    font-size: 2.35rem;
  }

  .gt-section-heading,
  .gt-session-topline,
  .gt-public-session,
  .gt-player-row {
    grid-template-columns: 1fr;
  }

  .gt-section-heading {
    display: grid;
  }

  .gt-city-form {
    grid-template-columns: 1fr;
  }

  .gt-copy-row,
  .gt-actions,
  .gt-inline-form,
  .gt-dialog-actions {
    align-items: stretch;
  }

  .gt-button,
  .gt-nav-button,
  .gt-nav-links a,
  .gt-copy-row label,
  .gt-inline-form label,
  .gt-copy-row input,
  .gt-inline-form input,
  .gt-inline-form select,
  .gt-public-session-actions,
  .gt-player-actions {
    width: 100%;
  }

  .gt-public-session-actions,
  .gt-player-actions {
    justify-content: stretch;
  }

  #map {
    height: 58vh;
    min-height: 330px;
  }

  .gt-end-stats {
    grid-template-columns: 1fr;
  }
}