/* Small production polish overrides kept separate from the main versioned stylesheet. */

.top-actions > * { align-self: center !important; }
.language-picker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.language-button { margin: 0 !important; transform: none !important; }

/* Compact Wikipedia-inspired language mark. Same artwork in every state. */
.language-button .language-symbol {
  position: relative !important;
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: none !important;
  line-height: 1 !important;
  color: #f3a8df !important;
}
.language-button .language-symbol::before,
.language-button .language-symbol::after { display: none !important; }
.language-button .language-symbol span {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  transform: none !important;
}
.language-button .language-symbol span:first-child {
  display: block !important;
  left: 0 !important;
  top: 1px !important;
  font-size: 14px !important;
}
.language-button .language-symbol span:last-child {
  display: block !important;
  right: 0 !important;
  bottom: 0 !important;
  font-size: 8px !important;
}

.hero-reset-label {
  color: rgba(255,255,255,.46);
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-countdown {
  color: #f7f7fa;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

/* Keep the Records scrollbar visually inside the modal's rounded shell. */
dialog.records-modal {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.42) transparent;
}
dialog.records-modal::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
dialog.records-modal::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 14px;
}
dialog.records-modal::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
dialog.records-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.48);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  /* Give the brand enough visual weight to balance the desktop action controls. */
  .topbar .brand {
    gap: 12px;
    font-size: 17px;
  }
  .topbar .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .topbar .brand-mark svg {
    width: 24px;
    height: 24px;
  }

  .top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Collapsed state: preserve the current 42x42 controls. */
  #resetChip,
  #statsButton,
  .language-picker,
  .language-button,
  .help-action,
  #accountButton {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #resetChip,
  #statsButton,
  .language-picker,
  .help-action,
  #accountButton {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: flex-basis .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1), min-width .22s cubic-bezier(.4,0,.2,1), max-width .22s cubic-bezier(.4,0,.2,1), background .18s ease, border-color .18s ease !important;
  }

  #resetChip,
  #statsButton,
  .language-button,
  .help-action,
  #accountButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
  }

  .language-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #resetChip .header-action-copy,
  #statsButton .header-action-copy,
  .language-button .header-action-copy,
  .help-action .header-action-copy,
  #accountButton .header-action-copy {
    display: none !important;
  }

  .top-actions .header-action-copy,
  .top-actions .header-action-copy *,
  #globalCountdown,
  #accountButton .header-action-copy {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  /* Only the outer width changes per label. */
  #resetChip:hover,
  #resetChip:focus-visible {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }
  #statsButton:hover,
  #statsButton:focus-visible {
    flex-basis: 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }
  .language-picker:hover,
  .language-picker:focus-within {
    flex-basis: 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }
  .language-picker:hover .language-button,
  .language-picker:focus-within .language-button {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }
  .help-action:hover,
  .help-action:focus-visible {
    flex-basis: 126px !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
  }
  #accountButton:hover,
  #accountButton:focus-visible {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  /* Expanded state: every control uses the same measured icon box and gap. */
  #resetChip:hover,
  #resetChip:focus-visible,
  #statsButton:hover,
  #statsButton:focus-visible,
  .language-picker:hover .language-button,
  .language-picker:focus-within .language-button,
  .help-action:hover,
  .help-action:focus-visible,
  #accountButton:hover,
  #accountButton:focus-visible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
  }

  #resetChip:hover .header-action-icon,
  #resetChip:focus-visible .header-action-icon,
  #statsButton:hover .header-action-icon,
  #statsButton:focus-visible .header-action-icon,
  #accountButton:hover .header-action-icon,
  #accountButton:focus-visible .header-action-icon {
    position: static !important;
    inset: auto !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    transform: none !important;
  }
  #resetChip:hover .header-action-icon svg,
  #resetChip:focus-visible .header-action-icon svg,
  #statsButton:hover .header-action-icon svg,
  #statsButton:focus-visible .header-action-icon svg,
  #accountButton:hover .header-action-icon svg,
  #accountButton:focus-visible .header-action-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .help-action:hover .header-action-question,
  .help-action:focus-visible .header-action-question {
    position: static !important;
    inset: auto !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    transform: none !important;
    line-height: 1 !important;
  }

  .language-picker:hover .language-symbol,
  .language-picker:focus-within .language-symbol {
    position: relative !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #resetChip:hover .header-action-copy,
  #resetChip:focus-visible .header-action-copy,
  #statsButton:hover .header-action-copy,
  #statsButton:focus-visible .header-action-copy,
  .language-picker:hover .header-action-copy,
  .language-picker:focus-within .header-action-copy,
  .help-action:hover .header-action-copy,
  .help-action:focus-visible .header-action-copy,
  #accountButton:hover .header-action-copy,
  #accountButton:focus-visible .header-action-copy {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #resetChip:hover .header-action-copy,
  #resetChip:focus-visible .header-action-copy { gap: 8px !important; }

  /* Language is a wrapper + button + flyout. The wrapper must never clip the
     flyout. Focus alone must not leave the pill expanded after the menu closes. */
  .language-picker {
    position: relative !important;
    overflow: visible !important;
    z-index: 160 !important;
  }
  .language-picker:focus-within:not(:hover):not(:has(.language-menu:not(.hidden))) {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
  .language-picker:focus-within:not(:hover):not(:has(.language-menu:not(.hidden))) .language-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .language-picker:focus-within:not(:hover):not(:has(.language-menu:not(.hidden))) .header-action-copy {
    display: none !important;
  }
  .language-picker:has(.language-menu:not(.hidden)) {
    flex-basis: 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }
  .language-picker:has(.language-menu:not(.hidden)) .language-button {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
  }
  .language-picker:has(.language-menu:not(.hidden)) .header-action-copy {
    display: inline-flex !important;
  }
  .language-menu {
    z-index: 500 !important;
  }

  /* Keep the collapsed question mark optically dead-centre. Expanded state
     falls back to the shared inline-flex rules above. */
  .help-action {
    position: relative !important;
  }
  .help-action:not(:hover):not(:focus-visible) .header-action-question {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

.hero h1 {
  overflow: visible !important;
  max-width: 960px;
  padding-right: .14em;
}
.hero h1 span {
  display: inline-block;
  overflow: visible;
  padding-right: .11em;
  margin-right: -.11em;
  /* The gradient text paint box needs a little room below the baseline for
     the descenders in “K-pop?”. Cancel it with a negative margin so layout
     and spacing below the hero remain unchanged. */
  padding-bottom: .10em;
  margin-bottom: -.10em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .language-picker {
    height: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .language-button {
    position: relative !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }
  .language-button .language-symbol {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: translate(calc(-50% - .5px), calc(-50% - .5px)) !important;
  }
  .language-button .language-symbol span:first-child {
    left: 0 !important;
    top: 1px !important;
    font-size: 12px !important;
  }
  .language-button .language-symbol span:last-child {
    right: 0 !important;
    bottom: 0 !important;
    font-size: 7px !important;
  }
  .language-menu {
    position: fixed !important;
    left: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: min(166px, calc(100vw - 16px)) !important;
    max-width: 166px !important;
  }
  .language-menu button {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-reset-label {
    font-size: 9px;
    letter-spacing: .07em;
  }
}