/* Globe — the playfield, the guess list and the two heat ramps.
   Everything here is scoped under .game-globe. */

.game-globe {
  /* The two data-visualisation ramps. These are the one place in the app that
     does not read an M3 role, and deliberately so: a cold→hot scale has to stay
     perceptually monotonic in lightness in every theme and mode, which no theme
     role set can guarantee. Stops are sampled to be even in Oklab lightness;
     globe.js interpolates between them in Oklab and paints the result on canvas.
     `heat` is the default; `cvd` is viridis, safe for all three common types of
     colour vision deficiency. */
  --gg-heat-0: #35408c;
  --gg-heat-1: #6b3d94;
  --gg-heat-2: #9b3585;
  --gg-heat-3: #c3376b;
  --gg-heat-4: #e0544b;
  --gg-heat-5: #ef7d2b;
  --gg-heat-6: #f9b414;

  --gg-cvd-0: #46327e;
  --gg-cvd-1: #3b528b;
  --gg-cvd-2: #2c728e;
  --gg-cvd-3: #21918c;
  --gg-cvd-4: #35b779;
  --gg-cvd-5: #8fd744;
  --gg-cvd-6: #fde725;

  --gg-scrim: color-mix(in srgb, var(--md-surface) 76%, transparent);
  --gg-state: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

/* ------------------------------------------------------------------ board -- */

.game-globe .gg-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: min(100%, 32rem, 62vh);
  max-width: min(100%, 32rem, 62svh);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--md-outline-variant);
  background:
    radial-gradient(120% 120% at 20% 0%,
      color-mix(in srgb, var(--md-primary) 6%, transparent), transparent 60%),
    var(--md-surface-container-low);
  overflow: hidden;
}

.game-globe .gg-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.game-globe .gg-canvas.is-dragging { cursor: grabbing; }

.game-globe .gg-canvas:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -4px;
  border-radius: var(--r-lg);
}

.game-globe .gg-probe {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-globe .gg-loading {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.game-globe .gg-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

/* --------------------------------------------------------------- overlays -- */

.game-globe .gg-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--gg-scrim);
  backdrop-filter: blur(10px);
  border: 1px solid var(--md-outline-variant);
}

.game-globe .gg-legend-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
}

.game-globe .gg-legend-bar {
  width: 5.25rem;
  height: 8px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg,
    var(--gg-heat-0), var(--gg-heat-1), var(--gg-heat-2), var(--gg-heat-3),
    var(--gg-heat-4), var(--gg-heat-5), var(--gg-heat-6));
  background: linear-gradient(90deg in oklab,
    var(--gg-heat-0), var(--gg-heat-1), var(--gg-heat-2), var(--gg-heat-3),
    var(--gg-heat-4), var(--gg-heat-5), var(--gg-heat-6));
}

.game-globe[data-ramp='cvd'] .gg-legend-bar {
  background: linear-gradient(90deg,
    var(--gg-cvd-0), var(--gg-cvd-1), var(--gg-cvd-2), var(--gg-cvd-3),
    var(--gg-cvd-4), var(--gg-cvd-5), var(--gg-cvd-6));
  background: linear-gradient(90deg in oklab,
    var(--gg-cvd-0), var(--gg-cvd-1), var(--gg-cvd-2), var(--gg-cvd-3),
    var(--gg-cvd-4), var(--gg-cvd-5), var(--gg-cvd-6));
}

.game-globe .gg-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-globe .gg-ctrl {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline-variant);
  background: var(--gg-scrim);
  backdrop-filter: blur(10px);
  color: var(--md-on-surface);
}

.game-globe .gg-ctrl:hover { background: var(--md-surface-container-high); }
.game-globe .gg-ctrl:active { background: var(--md-surface-container-highest); }

.game-globe .gg-glyph {
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 500;
}

/* ----------------------------------------------------------------- pills --- */

.game-globe .gg-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.game-globe .gg-pill.is-compact {
  padding: 5px;
  border-radius: var(--r-full);
}

.game-globe .gg-pill .icon { font-size: 0.875rem; }
.game-globe .gg-pill.is-compact .icon { font-size: 1rem; }

.game-globe .gg-pill.is-hint {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 600;
  padding: 6px 12px;
}

.game-globe .gg-pill.is-warmer {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.game-globe .gg-pill.is-colder {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.game-globe .gg-pill.is-rank-top,
.game-globe .gg-pill.is-answer,
.game-globe .gg-pill.is-best {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

/* ------------------------------------------------------------------ side --- */

.game-globe .gg-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.game-globe .gg-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-globe .gg-pinned {
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: var(--r-md);
}

.game-globe .gg-pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-inline: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.game-globe .gg-pinned .gg-guess {
  animation: gg-pop var(--dur-med) var(--ease-spring);
}

@keyframes gg-pop {
  from { transform: scale(0.96); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.game-globe .gg-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 2px;
}

.game-globe .gg-list-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.game-globe .gg-sort {
  display: inline-flex;
  border: 1px solid var(--md-outline);
  border-radius: var(--r-full);
  overflow: hidden;
}

.game-globe .gg-sort-btn {
  position: relative;
  appearance: none;
  border: 0;
  min-height: 36px;
  padding: 6px 14px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-emph);
}

/* Keeps the visual chip compact while giving it a 48px touch target. */
.game-globe .gg-sort-btn::before {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.game-globe .gg-sort-btn:hover { background: var(--gg-state); }

.game-globe .gg-sort-btn.is-selected {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

.game-globe .gg-sort-btn:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

/* ------------------------------------------------------------ guess list --- */

.game-globe .gg-list {
  gap: 4px;
  padding: 0 2px;
  max-height: min(44vh, 26rem);
  max-height: min(44svh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline-variant) transparent;
}

/* The side column is narrow and its width does not track the viewport, so the
   row sheds its least important parts based on its own measured width. Flag,
   name, distance, bearing and swatch always survive. */
.game-globe .gg-list,
.game-globe .gg-pinned .guess-list { container-type: inline-size; }

@container (max-width: 22rem) {
  .game-globe .gg-ord { display: none; }
}

@container (max-width: 18rem) {
  .game-globe .gg-pill.is-compact { display: none; }
}

/* Restates the shared row's flex layout because Globe changes every metric of
   it: a swatch and an ordinal go in front, a pill goes on the end, and the
   middle columns come and go per difficulty, so the gaps and padding have to be
   tighter than the shared 12px/56px to still fit a narrow side column. */
.game-globe .gg-guess {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 4px 4px 4px 10px;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-emph);
  animation: none;
}

.game-globe .gg-guess.is-new { animation: guess-in var(--dur-med) var(--ease-emph) both; }

.game-globe .gg-guess:hover { background: var(--md-surface-container); }
.game-globe .gg-guess.is-correct:hover {
  background: color-mix(in srgb, var(--md-on-primary-container) 8%, var(--md-primary-container));
}

.game-globe .gg-guess .g-name { flex: 1 1 auto; min-width: 3.25rem; }
.game-globe .gg-guess .g-dist { flex: 0 0 auto; }
.game-globe .gg-guess .g-dir,
.game-globe .gg-guess .g-mark { flex: 0 0 auto; }

.game-globe .gg-swatch {
  flex: 0 0 auto;
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-shadow) 28%, transparent);
}

.game-globe .gg-ord {
  flex: 0 0 1.5em;
  text-align: end;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.game-globe .gg-guess.is-correct .gg-ord { color: inherit; }

/* Keeps the shared 48px icon-button target while letting the row stay compact. */
.game-globe .gg-focus {
  align-self: center;
  margin-block: -6px;
}

.game-globe .gg-guess.is-correct .gg-focus { color: inherit; }

.game-globe .gg-empty {
  margin: 0;
  padding: 1rem 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- footer --- */

.game-globe .gg-footer {
  display: grid;
  gap: 6px;
}

.game-globe .gg-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-globe .gg-footer-row > :first-child:not(.btn) {
  flex: 1 1 16rem;
  min-width: 0;
}

.game-globe .gg-footer-row > .btn { flex: 0 0 auto; }

.game-globe .gg-msg {
  margin: 0;
  padding-inline: 4px;
  color: var(--md-error);
  font-size: 0.8125rem;
  font-weight: 500;
}

.game-globe .gg-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 30rem;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  text-align: center;
}

.game-globe .gg-fail .icon {
  font-size: 2.5rem;
  color: var(--md-on-surface-variant);
}

.game-globe .gg-fail h1 {
  margin: 0;
  font-size: 1.375rem;
  font-family: var(--font-display, inherit);
}

.game-globe .gg-help ul {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 4px;
}

/* ------------------------------------------------------- reduced motion --- */

.game-globe.gg-no-motion .gg-pinned .gg-guess,
.game-globe.gg-no-motion .gg-guess.is-new { animation: none; }

.game-globe.gg-no-motion .gg-guess,
.game-globe.gg-no-motion .gg-sort-btn { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .game-globe .gg-pinned .gg-guess,
  .game-globe .gg-guess.is-new { animation: none; }

  .game-globe .gg-guess,
  .game-globe .gg-sort-btn { transition: none; }
}

/* --------------------------------------------------------------- compact --- */

@media (max-width: 599px) {
  .game-globe .gg-board {
    max-width: min(100%, 52svh);
    border-radius: var(--r-md);
  }

  .game-globe .gg-legend { padding: 4px 8px; }
  .game-globe .gg-legend-bar { width: 4rem; }
  .game-globe .gg-list { max-height: none; }
  .game-globe .gg-pill { padding: 3px 8px; font-size: 0.6875rem; }
  .game-globe .gg-guess { padding-inline: 8px; gap: 8px; }
}