/* Shared game settings primitives. Wordle and Chain Reaction both consume this file. */
:root {
  --game-control-top: 11px;
  --game-control-right: 12px;
  --game-control-size: 36px;
  --game-settings-width: 360px;
}

.game-settings-trigger,
.game-settings-close {
  width: var(--game-control-size);
  height: var(--game-control-size);
  padding: 0;
  border: 0;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--color-foreground, var(--site-fg, #121213));
  background: transparent;
}
.game-settings-trigger:hover,
.game-settings-close:hover { background: var(--color-muted, var(--site-soft, #f3f4f5)); }
.game-settings-trigger svg,
.game-settings-close svg { width: 20px; height: 20px; display: block; }

[data-popper-positioner]:has(> .game-settings-popover) {
  position: fixed !important;
  top: var(--game-control-top) !important;
  right: var(--game-control-right) !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 0 !important;
  transform: none !important;
}
.game-settings-popover {
  position: fixed;
  top: var(--game-control-top);
  right: var(--game-control-right);
  z-index: 40;
  width: min(var(--game-settings-width), calc(100vw - 24px));
  max-height: calc(100dvh - 22px);
  padding: 0 !important;
  overflow: auto !important;
  border: 1px solid var(--color-border, var(--site-line, #d3d6da));
  border-radius: 6px;
  color: var(--color-popover-foreground, var(--site-fg, #121213));
  background: var(--color-popover, var(--site-bg, #fff));
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
[data-popper-positioner] > .game-settings-popover {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
}
.game-settings-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.game-settings-close svg { stroke: var(--color-error-foreground, var(--site-error, #ef4444)); fill: none; stroke-width: 2; }
.game-settings-body { display: grid; gap: 18px; padding: 48px 16px 16px; }
.game-settings-section-title {
  margin: 2px 0 -2px;
  color: var(--color-muted-foreground, var(--site-muted, #787c7e));
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: left;
}
.game-settings-slider { display: grid; gap: 10px; }
.game-settings-slider-head { display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: baseline; }
.game-settings-slider-label { font-size: .9rem; font-weight: 500; }
.game-settings-slider-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kobalte slider primitives used by Wordle. */
.game-settings-slider [role=slider] { touch-action: none; }
.game-settings-slider [role=slider][data-orientation=horizontal] { top: 50%; margin-top: -.5rem; }
.game-settings-slider [data-kb-slider-track] { height: 16px; margin-inline: 0; width: 100%; border-radius: 999px; }

/* Native range equivalent used by lightweight games. The visible fill is separate from
   the input so its rounded endpoint can share the thumb's exact center. */
.game-range-shell { position: relative; display: block; width: 100%; height: 16px; }
.game-range-track { position: absolute; inset: 0; height: 16px; border-radius: 999px; overflow: hidden; background: var(--color-secondary, var(--site-soft, #f3f4f5)); pointer-events: none; }
.game-range-fill { display: block; width: var(--range-fill-width, 16px); height: 16px; border-radius: 999px; background: var(--color-primary, var(--site-fg, #121213)); }
.game-settings-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 16px; margin: 0; padding: 0; border: 0; appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--color-primary, var(--site-fg, #121213));
}
.game-settings-slider input[type="range"]::-webkit-slider-runnable-track { height: 16px; border-radius: 999px; background: transparent; }
.game-settings-slider input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: 0; border: 2px solid var(--color-primary, var(--site-fg, #121213)); border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--color-background, var(--site-bg, #fff)); box-shadow: none; }
.game-settings-slider input[type="range"]::-moz-range-track { height: 16px; border: 0; border-radius: 999px; background: transparent; }
.game-settings-slider input[type="range"]::-moz-range-progress { height: 16px; background: transparent; }
.game-settings-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--color-primary, var(--site-fg, #121213)); border-radius: 50%; background: var(--color-background, var(--site-bg, #fff)); box-shadow: none; }
.game-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-settings-action {
  min-width: 0;
  flex: 1 1 150px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--color-border, var(--site-line, #d3d6da));
  border-radius: 4px;
  font-weight: 600;
  background: var(--color-secondary, var(--site-soft, #f3f4f5));
  color: var(--color-foreground, var(--site-fg, #121213));
  transition: background-color 120ms ease, color 120ms ease;
}
.game-settings-action:hover {
  background: var(--color-muted, color-mix(in srgb, var(--site-soft, #f3f4f5) 78%, var(--site-fg, #121213)));
  color: var(--color-foreground, var(--site-fg, #121213));
}

@media (max-width: 640px) {
  :root { --game-control-top: 9px; --game-control-right: 8px; }
  .game-settings-popover { width: min(var(--game-settings-width), calc(100vw - 16px)); max-height: calc(100dvh - 18px); }
  .game-settings-body { padding: 46px 12px 12px; }
}

.game-settings-slider input[type="range"]::-webkit-slider-thumb{opacity:0;transition:opacity 90ms ease}
.game-settings-slider:hover input[type="range"]::-webkit-slider-thumb,.game-settings-slider input[type="range"]:focus-visible::-webkit-slider-thumb,.game-settings-slider input[type="range"]:active::-webkit-slider-thumb{opacity:1}
.game-settings-slider input[type="range"]::-moz-range-thumb{opacity:0;transition:opacity 90ms ease}
.game-settings-slider:hover input[type="range"]::-moz-range-thumb,.game-settings-slider input[type="range"]:focus-visible::-moz-range-thumb,.game-settings-slider input[type="range"]:active::-moz-range-thumb{opacity:1}

/* Keep settings controls contained on narrow viewports and with enlarged text. */
.game-settings-popover,
.game-settings-body,
.game-settings-body > *,
.game-settings-slider,
.game-settings-slider > *,
.game-settings-actions,
.game-settings-action { min-width: 0; }
.game-settings-popover { overflow-x: hidden !important; overflow-y: auto !important; }
.game-settings-body { max-width: 100%; }
.game-settings-slider > div { gap: 8px; flex-wrap: wrap; }
.game-settings-slider label,
.game-settings-slider [data-kb-slider-label],
.game-settings-slider [data-kb-slider-value-label] { min-width: 0; overflow-wrap: anywhere; }
.game-settings-action { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }