/* Daily guessing games (sc-17281): hub cards + the three mode UIs.
   The theme force-uppercases everything inside .main-container (style.css) —
   games content opts out and uses mixed case (site pattern: .heroes-intro,
   .tier-list-meta). Small labels keep the house uppercase+letter-spacing
   style (.filter-popup-subtitle). Colors lean on the Astra globals and the
   rarity tokens from style.css. */

.rs-games-page {
  width: 100%;
}

/* Shared page-title look (copied from tier-list-template.css — that sheet
   doesn't load on the games pages). */
.rs-games-page .page-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  width: 100%;
  color: #fff;
  display: block;
}

/* Mixed case for everything game-related; headings re-opt-in below. */
.rs-games-page p,
.rs-games-page li,
.rs-games-page details,
.rs-game,
.rs-game button,
.rs-game input,
.rs-modal,
.rs-modal button,
.rs-games-hub-card-blurb,
.rs-games-hub-card-status {
  text-transform: none;
  font-weight: normal;
}

/* Hero/costume names stay ALL-CAPS (product decision) and link to their
   detail pages, inheriting the surrounding color. */
.rs-name {
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

a.rs-name:hover {
  color: inherit;
  text-decoration: underline;
}

.rs-games-backlink {
  width: 100%;
  margin: 0 auto 4px;
  text-align: center;
  font-size: 0.875rem;
}

.rs-games-backlink a {
  color: #c4c4cc;
  text-decoration: underline;
}


.rs-games-intro,
.rs-games-mode-blurb {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 8px;
  text-align: center;
  color: #c4c4cc;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Shared width convention (tier-list): .main-container is a column flexbox,
   so inner blocks must set width:100%. */
.rs-game,
.rs-games-hub-grid,
.rs-games-howto,
.rs-games-crosslinks {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.rs-games-howto,
.rs-games-crosslinks {
  max-width: 760px;
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */

.rs-btn {
  padding: 7px 16px;
  border: 1px solid var(--ast-global-color-6, #444);
  border-radius: 6px;
  background: var(--ast-global-color-8, #1b1e23);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: normal;
  text-transform: none;
  line-height: 1.2;
}

/* Anchors reuse the button classes (mode switch, hub Play links) — beat the
   theme's global link color/underline. */
a.rs-btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.rs-btn:hover {
  border-color: var(--ast-global-color-0, #fcd92d);
  color: #fff;
}

.rs-btn-primary,
a.rs-btn-primary,
.rs-btn-primary:hover {
  background: var(--ast-global-color-0, #fcd92d);
  border-color: transparent;
  color: #14181c;
  font-weight: 600;
}

.rs-btn-primary:hover {
  filter: brightness(1.08);
}

.rs-btn-small {
  padding: 5px 12px;
  font-size: 0.82rem;
}

/* Icon-only square buttons (How to play "?", Stats chart). */
.rs-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.rs-btn-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Muted danger variant (Unlimited "Give up"). */
.rs-btn-giveup {
  border-color: #8f3f3f;
  color: #e08e8e;
}

.rs-btn-giveup:hover {
  border-color: #c05252;
}

.rs-btn:disabled,
.rs-btn:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--ast-global-color-6, #444);
}

.rs-btn-giveup:disabled,
.rs-btn-giveup:disabled:hover {
  border-color: #8f3f3f;
}

/* ---------------------------------------------------------------------
   Hub cards
--------------------------------------------------------------------- */

/* One full-width card per row (desktop AND mobile, per product decision);
   card content flows horizontally: icon | name+blurb+status | Play buttons.
   The card itself is a plain container — only the buttons are links. */
.rs-games-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 760px;
}

.rs-games-hub-countdown {
  width: 100%;
  margin: 0 auto 4px;
  text-align: center;
  color: #c4c4cc;
  font-size: 0.95rem;
}

/* Small section eyebrow above each group of hub cards (Classic / Zoom). Two
   classes so it beats the .rs-games-page p normal-weight/case reset. */
.rs-games-page .rs-games-hub-group {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ast-global-color-0, #fcd92d);
}
.rs-games-page .rs-games-hub-group + .rs-games-hub-card {
  margin-top: 2px;
}
.rs-games-page .rs-games-hub-card + .rs-games-hub-group {
  margin-top: 12px;
}

.rs-games-hub-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--ast-global-color-6, #333);
  border-radius: 10px;
  background: var(--ast-global-color-8, #1b1e23);
  transition: border-color 0.15s ease;
}

.rs-games-hub-card:hover {
  border-color: var(--ast-global-color-0, #fcd92d);
}

.rs-games-mode-icon {
  grid-row: 1 / span 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Idle icon tint; currentColor lets the inline SVG pick up the hover accent. */
  color: #d7dade;
  transition: color 0.15s ease;
}

.rs-games-mode-icon img {
  height: 32px;
  width: auto;
}

.rs-games-mode-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

.rs-games-hub-card:hover .rs-games-mode-icon {
  color: var(--ast-global-color-0, #fcd92d);
}

.rs-games-hub-card-name,
.rs-games-hub-card-blurb,
.rs-games-hub-card-status {
  grid-column: 2;
}

.rs-games-hub-card-actions {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Text left, right-pointing arrow pinned to the right edge. */
.rs-games-hub-card-actions .rs-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.rs-games-hub-card-name {
  margin: 0;
  font-size: 1.15em;
}

.rs-games-hub-card-blurb {
  margin: 0;
  font-size: 0.9em;
  opacity: 0.8;
  line-height: 1.45;
}

.rs-games-hub-card-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  color: var(--ast-global-color-0, #fcd92d);
  min-height: 1.2em;
}

/* Neutral, muted state so it reads as a prompt, not a positive like "Solved". */
.rs-games-hub-card-unsolved {
  color: #9aa1ab;
}

.rs-games-hub-card-streak {
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(252, 217, 45, 0.12);
  color: #fff;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Shared game chrome
--------------------------------------------------------------------- */

.rs-game {
  margin: 16px auto 24px;
}

.rs-game-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.rs-game-topbar-info,
.rs-game-topbar-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Daily rollover countdown: its own row under the "All games" backlink. */
.rs-game-countdown {
  margin: 0 0 12px;
  text-align: center;
  font-size: 0.95em;
  opacity: 0.85;
}

.rs-game-number {
  font-weight: 700;
}

.rs-game-counter {
  opacity: 0.75;
  font-size: 0.9em;
}

.rs-game-footer {
  margin-top: 18px;
  font-size: 0.92em;
  opacity: 0.9;
  text-align: center;
}

.rs-game-yesterday {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
}

.rs-game-yesterday-thumb img,
.rs-game-yesterday-thumb {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 4px;
}

.rs-game-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.rs-game-rollover {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--ast-global-color-0, #fcd92d);
  border-radius: 8px;
  background: rgba(252, 217, 45, 0.08);
}

/* Win panel: answer image + details side by side. */
.rs-game-win {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin: 18px auto 0;
  padding: 16px;
  border: 1px solid #3f8f4b;
  border-radius: 10px;
  background: rgba(63, 143, 75, 0.1);
}

.rs-game-win-media img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 8px;
}

.rs-game-win-msg {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 4px;
}

.rs-game-win-body p {
  margin: 0 0 6px;
}

.rs-game-win-answer .rs-name {
  font-size: 1.05em;
  font-weight: 700;
}

.rs-game-win-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* Give-up variant of the win panel (Unlimited): red framing, same layout. */
.rs-game-win.is-lost {
  border-color: #8f3f3f;
  background: rgba(143, 63, 63, 0.1);
}

/* Wordle-style result popup (openWinModal) */
.rs-win-headline {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 10px;
}

.rs-win-answer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.rs-win-answer img,
.rs-win-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
}

.rs-win-answer .rs-name {
  font-weight: 700;
}

.rs-win-streak {
  margin: 0 0 12px;
}

.rs-win-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--ast-global-color-6, #333);
}

.rs-win-countdown {
  margin: 14px 0 0;
  text-align: center;
  opacity: 0.85;
}

/* Unlimited win popup: breathing room below Play again so the button never
   sits flush against the modal edge and it reads as scrollable to the end. */
.rs-win-countdown.rs-win-again {
  margin-top: 20px;
  padding-bottom: 28px;
}

/* ---------------------------------------------------------------------
   Autocomplete
--------------------------------------------------------------------- */

.rs-game-input {
  margin-bottom: 16px;
}

.rs-ac {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.rs-ac-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ast-global-color-6, #444);
  border-radius: 8px;
  background: var(--ast-global-color-8, #1b1e23);
  color: inherit;
  font-size: 1em;
  text-transform: none;
  font-weight: normal;
}

.rs-ac-input::placeholder {
  text-transform: none;
}

.rs-ac-input:focus {
  outline: none;
  border-color: var(--ast-global-color-0, #fcd92d);
}

.rs-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--ast-global-color-6, #444);
  border-radius: 8px;
  background: var(--ast-global-color-8, #1b1e23);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-height: 440px;
  overflow-y: auto;
}

.rs-ac-hint {
  position: sticky;
  bottom: -4px;
  margin: 4px -4px -4px;
  padding: 7px 10px;
  border-top: 1px solid var(--ast-global-color-6, #444);
  background: var(--ast-global-color-8, #1b1e23);
  color: var(--ast-global-color-5, #9aa0a6);
  font-size: 12px;
  text-align: center;
  cursor: default;
}

.rs-ac-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.rs-ac-option.is-highlighted {
  background: rgba(252, 217, 45, 0.12);
}

.rs-ac-thumb {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.rs-ac-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rs-ac-main {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rs-ac-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.rs-ac-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase; /* names stay caps (options aren't links: click = pick) */
}

.rs-ac-sub {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.8em;
  opacity: 0.6;
  text-transform: uppercase;
}

/* Quiz-value chips inside suggestions — lets users browse by attribute. */
.rs-ac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rs-ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72em;
  color: #c4c4cc;
  white-space: nowrap;
}

.rs-ac-chip-icon,
.rs-ac-chip img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   Attribute grid (classic-heroes / classic-costumes)
--------------------------------------------------------------------- */

.rs-game-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rs-game-grid {
  min-width: calc(120px + var(--rs-cols) * 96px);
}

.rs-game-entry {
  margin-bottom: 10px;
}

.rs-game-row {
  display: grid;
  grid-template-columns: 120px repeat(var(--rs-cols), 1fr);
  gap: 6px;
}

/* display:grid would otherwise beat the UA [hidden] rule (pre-first-guess header). */
.rs-game-row[hidden] {
  display: none;
}

.rs-game-row-header {
  margin-bottom: 6px;
}

.rs-game-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 0.82em;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-transform: none;
  font-weight: normal;
}

/* Small labels keep the house style: uppercase + letter-spacing. */
.rs-game-row-header .rs-game-cell {
  min-height: 0;
  padding: 2px 4px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.65;
}

.rs-game-cell-guess {
  background: var(--ast-global-color-8, #1b1e23);
  border: 1px solid var(--ast-global-color-6, #333);
}

.rs-game-row-header .rs-game-cell-guess {
  background: transparent;
  border: none;
}

.rs-game-cell-guess img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.rs-game-guess-name {
  font-size: 0.92em;
}

/* Guess cells and clue tiles can be anchors (detail / filter pages) — keep
   the tile look, beat the theme link color, reveal the link on hover. */
a.rs-game-cell-guess,
a.rs-game-cell-guess:hover {
  color: inherit;
  text-decoration: none;
}

a.rs-tile,
a.rs-tile:hover {
  color: #fff;
  text-decoration: none;
}

a.rs-tile:hover,
a.rs-game-cell-guess:hover {
  filter: brightness(1.12);
}

a.rs-tile:hover .rs-tile-value,
a.rs-game-cell-guess:hover .rs-game-guess-name {
  text-decoration: underline;
}

a.rs-tile:focus-visible,
a.rs-game-cell-guess:focus-visible {
  outline: 2px solid var(--ast-global-color-0, #fcd92d);
  outline-offset: 1px;
}

.rs-tile {
  position: relative;
  color: #fff;
}

.rs-tile.is-exact {
  background: #2e7d3a;
}

.rs-tile.is-partial {
  background: #a8860b;
}

.rs-tile.is-wrong {
  background: #5a2b30;
  color: rgba(255, 255, 255, 0.85);
}

.rs-tile-img img,
.rs-tile-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
}

.rs-tile-icons {
  display: flex;
  gap: 3px;
  margin-bottom: 2px;
}

.rs-tile-icons img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Fat directional arrow (higher/lower hints) — SVG mask so it inherits the
   surrounding text color; the thin ↑/↓ glyphs were too easy to miss. */
.rs-arrow {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 4px;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 21 13h-5.5v8.5h-7V13H3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 21 13h-5.5v8.5h-7V13H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rs-arrow.is-down {
  transform: rotate(180deg);
}

.rs-arrow.is-right {
  transform: rotate(90deg);
}

/* Staggered per-column flip-in on a fresh guess. */
.rs-tile-reveal {
  animation: rs-tile-flip 0.45s both;
  animation-delay: calc(var(--col) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .rs-tile-reveal {
    animation: none;
  }
}

@keyframes rs-tile-flip {
  from {
    transform: rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0);
    opacity: 1;
  }
}

/* Second tier: small hero-attribute chips under a costume-clues row. */
.rs-game-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  margin-left: 126px; /* aligns under the clue tiles, past the guess column */
  padding-left: 10px;
  border-left: 2px solid var(--ast-global-color-6, #333);
}

.rs-game-subrow-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.55;
  margin-right: 3px;
  /* Keep the label on one line even when the nowrap strip squeezes it. */
  white-space: nowrap;
  flex-shrink: 0;
}

.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.75em;
  color: #fff;
  white-space: nowrap;
}

.rs-chip.is-exact {
  background: rgba(46, 125, 58, 0.75);
}

.rs-chip.is-partial {
  background: rgba(168, 134, 11, 0.75);
}

.rs-chip.is-wrong {
  background: rgba(90, 43, 48, 0.75);
  color: rgba(255, 255, 255, 0.8);
}

/* Costume hero-clue chips are anchors when they link to a filter page (the
   translucent is-* backgrounds above still apply to the <a>). Mirrors a.rs-tile. */
a.rs-chip {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

a.rs-chip:hover {
  filter: brightness(1.12);
  text-decoration: underline;
}

a.rs-chip:hover .rs-chip-label {
  text-decoration: none;
}

a.rs-chip:focus-visible {
  outline: 2px solid var(--ast-global-color-0, #fcd92d);
  outline-offset: 1px;
}

.rs-chip-label {
  font-size: 0.85em;
  opacity: 0.65;
}

.rs-chip-icon,
.rs-chip img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

/* buildPicture() wraps icons in inline <picture> elements that sit on the
   text baseline, dragging them below adjacent text — center them instead.
   (Modals mount on <body>, outside .rs-games-page, hence the extra scope.) */
.rs-tile-icons picture,
.rs-games-mode-icon picture,
.rs-chip picture,
.rs-ac-chip picture,
.rs-game-yesterday-thumb,
.rs-stats-history-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rs-games-page img,
.rs-modal img {
  vertical-align: middle;
}

/* Legend swatches inside the "How to play" copy. */
.rs-legend-tile {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
}

.rs-legend-tile.is-exact { background: #2e7d3a; }
.rs-legend-tile.is-partial { background: #a8860b; }
.rs-legend-tile.is-wrong { background: #5a2b30; }

/* ---------------------------------------------------------------------
   Zoom mode
--------------------------------------------------------------------- */

.rs-zoom-stage {
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto 16px;
  border: 1px solid var(--ast-global-color-6, #333);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ast-global-color-8, #14161a);
}

.rs-zoom-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Zoom anchor sits below the face (torso area) so the close-up doesn't
     hand over the most recognizable part of the render. */
  transform-origin: 50% 48%;
  transition: transform 0.5s ease;
}

/* Silhouettes are flat fill: anchor the crop on the upper body instead so
   early zoom levels catch an outline edge rather than a featureless field. */
.rs-zoom-stage.is-sil img {
  transform-origin: 50% 30%;
}

/* Logo emblems and signature autographs are centered art (not portraits), so
   crop from the middle rather than the "below the face" portrait default. */
.rs-zoom-stage.is-logo img,
.rs-zoom-stage.is-sig img {
  transform-origin: 50% 50%;
}

/* Guess table: one clean row per guess (state | thumb | name+hero | info). */
.rs-zoom-guesses {
  max-width: 560px;
  margin: 0 auto 8px;
}

.rs-zoom-guess-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--ast-global-color-6, #333);
  border-radius: 8px;
  font-size: 0.9em;
  text-transform: none;
  font-weight: normal;
}

/* The whole row is an item-page link — keep the row look. */
a.rs-zoom-guess-row,
a.rs-zoom-guess-row:hover {
  color: inherit;
  text-decoration: none;
}

a.rs-zoom-guess-row:hover {
  filter: brightness(1.12);
}

a.rs-zoom-guess-row:hover .rs-name {
  text-decoration: underline;
}

a.rs-zoom-guess-row:focus-visible {
  outline: 2px solid var(--ast-global-color-0, #fcd92d);
  outline-offset: 1px;
}

.rs-zoom-guess-row.is-wrong {
  background: rgba(90, 43, 48, 0.35);
  border-color: rgba(143, 63, 63, 0.6);
}

.rs-zoom-guess-row.is-correct {
  background: rgba(46, 125, 58, 0.3);
  border-color: rgba(63, 143, 75, 0.7);
}

.rs-zoom-guess-state {
  flex-shrink: 0;
  font-weight: 700;
  width: 16px;
  text-align: center;
}

.rs-zoom-guess-row.is-wrong .rs-zoom-guess-state {
  color: #e08e8e;
}

.rs-zoom-guess-row.is-correct .rs-zoom-guess-state {
  color: #7ed48c;
}

/* Give-up reveal: the answer row (grid + zoom lists). Accent-highlighted so it
   reads as "here is the answer" rather than another guess, and pinned at the
   top of the list where addRow/addGuessRow insert it. */
.rs-answer-tag {
  align-self: flex-start;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ast-global-color-0, #fcd92d);
  color: #14161a;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
  white-space: nowrap;
}

.rs-game-entry.is-answer {
  padding: 6px;
  border: 1px solid var(--ast-global-color-0, #fcd92d);
  border-radius: 10px;
  background: rgba(252, 217, 45, 0.06);
}

.rs-game-entry.is-answer .rs-answer-tag {
  margin-bottom: 4px;
}

.rs-zoom-guess-row.is-answer {
  background: rgba(252, 217, 45, 0.1);
  border-color: var(--ast-global-color-0, #fcd92d);
}

.rs-zoom-guess-row.is-answer .rs-zoom-guess-state {
  color: var(--ast-global-color-0, #fcd92d);
}

.rs-zoom-guess-thumb,
.rs-zoom-guess-thumb img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.rs-zoom-guess-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-grow: 1;
}

.rs-zoom-guess-hero {
  font-size: 0.8em;
  opacity: 0.65;
  text-transform: uppercase;
}

.rs-zoom-guess-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  max-width: 45%;
}

/* ---------------------------------------------------------------------
   Modal (imitates the custom-lists popover; self-contained on purpose)
--------------------------------------------------------------------- */

.rs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 16px;
  box-sizing: border-box;
}

.rs-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
  background: var(--ast-global-color-8, #1b1e23);
  border: 1px solid var(--ast-global-color-6, #333);
  color: #fff;
  box-sizing: border-box;
}

.rs-modal-title {
  margin: 0 0 14px;
  font-size: 1.2em;
  text-transform: none;
}

.rs-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

.rs-modal-close:hover {
  color: #fff;
}

.rs-modal-body p {
  line-height: 1.5;
}

/* Stats modal */
.rs-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.rs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.rs-stat-value {
  font-size: 1.5em;
  font-weight: 700;
}

.rs-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-top: 2px;
}

.rs-stats h3 {
  margin: 16px 0 8px;
  font-size: 0.95em;
  text-transform: none;
}

.rs-stats-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.rs-stats-dist-bucket {
  width: 22px;
  flex: 0 0 22px;
  text-align: right;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Every bar's width % is measured against this track, so the whole chart
   shares one baseline and stays symmetrical (the max bar fills it exactly). */
.rs-stats-dist-track {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-stats-dist-bar {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ast-global-color-0, #fcd92d);
  color: #14181c;
  font-size: 0.8em;
  font-weight: 600;
  text-align: right;
  box-sizing: border-box;
}

/* Zero-count rows: neutral pill just showing the 0, no accent fill. */
.rs-stats-dist-bar.is-empty {
  background: var(--ast-global-color-6, #333);
  color: rgba(255, 255, 255, 0.6);
}

.rs-stats-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.88em;
  opacity: 0.9;
}

.rs-stats-history-thumb img,
.rs-stats-history-thumb {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   How-to / crosslinks
--------------------------------------------------------------------- */

.rs-games-howto {
  margin-top: 28px;
  font-size: 0.95em;
}

.rs-games-howto h2 {
  font-size: 1.15em;
}

.rs-games-howto p {
  line-height: 1.55;
  color: #c4c4cc;
}

.rs-games-howto-details {
  margin-bottom: 8px;
  border: 1px solid var(--ast-global-color-6, #333);
  border-radius: 8px;
  padding: 10px 14px;
}

.rs-games-howto-details summary {
  cursor: pointer;
  font-weight: 600;
}

.rs-games-crosslinks {
  margin-top: 20px;
  font-size: 0.9em;
  color: #c4c4cc;
  text-align: center;
}

.rs-games-crosslinks a {
  text-decoration: underline;
  color: inherit;
}

/* ---------------------------------------------------------------------
   Debug toolbar (?rs_debug=1)
--------------------------------------------------------------------- */

.rs-games-debug {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed #e2b714;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 12px;
  text-transform: none;
}

.rs-games-debug button {
  padding: 3px 8px;
  border: 1px solid #666;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  text-transform: none;
}

@media (max-width: 700px) {
  .rs-games-page .page-title {
    font-size: 1.4rem;
  }

  /* Reclaim horizontal space: Astra's ~20px .ast-container inset stacks with
     the page's inner padding and the card padding, leaving the content cramped
     on phones. Trim all three (games.css only loads on the games page, so
     touching .ast-container here is page-scoped). Mirrors the sibling pattern
     in item-list-template.css / heroes-template.css. */
  .ast-container {
    padding: 0 10px;
  }

  .rs-game,
  .rs-games-hub-grid,
  .rs-games-howto,
  .rs-games-crosslinks {
    padding-left: 0;
    padding-right: 0;
  }

  .rs-games-hub-card {
    padding: 14px 14px;
  }

  /* Fixed tracks: tiles keep a clean readable width and the row scrolls
     horizontally inside .rs-game-grid-wrap instead of squeezing. */
  .rs-game-row {
    grid-template-columns: 92px repeat(var(--rs-cols), 88px);
  }

  .rs-game-grid {
    min-width: calc(92px + var(--rs-cols) * 94px);
  }

  .rs-game-cell-guess img {
    width: 46px;
    height: 46px;
  }

  .rs-game-subrow {
    margin-left: 0;
    /* One row; the shared .rs-game-grid-wrap scroller handles the overflow, so
       the clue strip can run wider than the guess row above it. */
    flex-wrap: nowrap;
  }

  /* The give-up answer row scrolls horizontally (fixed-px tiles + the nowrap
     clue strip run wider than the viewport). A plain block would clip its
     highlight border at the container edge, so size the entry to its widest
     child and let it fill the container when the content is narrower. */
  .rs-game-entry.is-answer {
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }

  /* 16px stops iOS Safari from auto-zooming the page on input focus. */
  .rs-ac-input {
    font-size: 16px;
  }

  /* Stack the topbar: icon tools on their own row ABOVE the info row. */
  .rs-game-topbar {
    flex-direction: column;
    gap: 8px;
  }

  .rs-game-topbar-tools {
    order: -1;
  }

  /* Zoom guess rows: info chips drop to their own full-width row. */
  .rs-zoom-guess-row {
    flex-wrap: wrap;
  }

  .rs-zoom-guess-meta {
    flex-basis: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  /* Icon sits top-right beside the title only; the blurb and status then run
     the full width of the card underneath, rather than a narrow left column. */
  .rs-games-hub-card {
    grid-template-columns: 1fr auto;
  }

  .rs-games-mode-icon {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .rs-games-hub-card-name {
    grid-column: 1;
    grid-row: 1;
  }

  .rs-games-hub-card-blurb,
  .rs-games-hub-card-status {
    grid-column: 1 / -1;
  }

  .rs-games-hub-card-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    margin-top: 8px;
  }

  .rs-games-hub-card-actions .rs-btn {
    flex: 1;
    white-space: nowrap;
    padding: 7px 12px;
    gap: 8px;
  }

  .rs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Account sync: login promo, per-game reset, conflict modal, toast    */
/* ------------------------------------------------------------------ */

/* Logged-out "save your stats across devices" promo (stats + win modals). */
.rs-stats-login-cta {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--ast-global-color-0, #fcd92d);
  border-radius: 8px;
  background: rgba(252, 217, 45, 0.08);
  text-align: center;
}

.rs-stats-login-cta-text {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.rs-stats-login-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Logged-in Stats-modal footer: sync status + reset. */
.rs-stats-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ast-global-color-6, #444);
}

.rs-stats-account-status {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Login conflict modal (device vs account stats). */
.rs-sync-conflict p {
  margin: 0 0 16px;
  line-height: 1.45;
}

.rs-sync-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Transient status toast (sync feedback). No existing toast system to reuse. */
.rs-games-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100000;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 420px);
  padding: 11px 18px;
  border: 1px solid var(--ast-global-color-6, #444);
  border-radius: 8px;
  background: var(--ast-global-color-8, #1b1e23);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.rs-games-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .rs-games-toast {
    transition: opacity 0.25s ease;
    transform: translate(-50%, 0);
  }
}