/* Trophy rooms (achievements.html). The page chrome uses css/style.css's
   hub tokens; each game's room, tab and overview row is themed by its
   `theme` from games.json -- the same key its home-page card uses -- through
   the --r-* tokens below. A new game's room is one token block here. */

.achievements-body {
  align-items: stretch;
  padding: 1rem 1.5rem 4rem;
}

.achievements-header {
  margin-bottom: 1.75rem;
}

.achievements-logo {
  max-width: min(70vw, 240px);
}

.achievements-panel {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--wood);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
}

.achievements-app {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.achievements-app[hidden],
.achievements-gate[hidden] {
  display: none;
}

/* ---------- theme tokens ---------- */

:is(.room, .game-tab, .overview-row) {
  --r-bg: var(--bg-panel);
  --r-line: var(--wood);
  --r-text: var(--parchment);
  --r-muted: var(--parchment-dim);
  --r-accent: var(--accent-gold);
  --r-accent-2: var(--accent-rust);
  --r-fill: linear-gradient(90deg, var(--accent-rust), var(--accent-gold));
  --r-track: rgba(0, 0, 0, 0.35);
  --r-tile: var(--bg-panel-light);
  --r-tile-line: var(--wood);
  --r-tile-text: var(--parchment);
  --r-tile-muted: var(--parchment-dim);
  --r-display: var(--font-display);
  --r-body: var(--font-body);
  --r-glow: none;
}

:is(.room, .game-tab, .overview-row)[data-theme="hustle"] {
  --r-bg: radial-gradient(ellipse at 50% -10%, #2c1f5c 0%, transparent 60%), #150f2e;
  --r-line: #39306e;
  --r-text: #efe9ff;
  --r-muted: #9186c4;
  --r-accent: #ff3fa4;
  --r-accent-2: #2fe6ff;
  --r-fill: linear-gradient(90deg, #ff3fa4, #2fe6ff);
  --r-track: #291f5e;
  --r-tile: #1e1745;
  --r-tile-line: #39306e;
  --r-tile-text: #efe9ff;
  --r-tile-muted: #9186c4;
  --r-display: 'Audiowide', system-ui, sans-serif;
  --r-body: 'Outfit', system-ui, sans-serif;
  --r-glow: 0 0 18px rgba(255, 63, 164, 0.35);
}

:is(.room, .game-tab, .overview-row)[data-theme="kings-charter"] {
  --r-bg: linear-gradient(160deg, #332316, #1b120c);
  --r-line: #e8a33d;
  --r-text: #e8d9bf;
  --r-muted: #b8a583;
  --r-accent: #e8a33d;
  --r-accent-2: #c9540c;
  --r-fill: linear-gradient(90deg, #c9540c, #e8a33d);
  --r-track: #1b120c;
  --r-tile: linear-gradient(180deg, #eadbbd, #dcc79f);
  --r-tile-line: #b08a52;
  --r-tile-text: #3b2a1a;
  --r-tile-muted: #6b5238;
  --r-display: 'IM Fell English', Georgia, serif;
  --r-body: 'Work Sans', system-ui, sans-serif;
  --r-glow: 0 0 22px rgba(232, 163, 61, 0.22);
}

:is(.room, .game-tab, .overview-row)[data-theme="daydreamers-library"] {
  --r-bg: linear-gradient(160deg, #d3a574, #c08e5e 45%, #95693f);
  --r-line: #c48f32;
  --r-text: #fdf7ea;
  --r-muted: #f5ebd6;
  --r-accent: #7b5c9e;
  --r-accent-2: #c48f32;
  --r-fill: linear-gradient(90deg, #7b5c9e, #c48f32);
  --r-track: rgba(74, 59, 44, 0.35);
  --r-tile: linear-gradient(180deg, #f5e6c2, #efdcae);
  --r-tile-line: #c6aa72;
  --r-tile-text: #4a3b2c;
  --r-tile-muted: #8b7660;
  --r-display: 'Berkshire Swash', Georgia, serif;
  --r-body: 'Karla', system-ui, sans-serif;
  --r-glow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* ---------- tabs ---------- */

/* Compact pills that wrap onto a second row, so every game is visible
   without a sideways scroll as the list grows. */
.game-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.25rem 0.1rem 0.9rem;
  margin-bottom: 0.4rem;
}

.game-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.8rem 0.25rem 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--wood);
  background: rgba(26, 14, 25, 0.88);
  color: var(--parchment);
  font: 600 0.88rem/1 var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.game-tab img,
.game-tab-all {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.game-tab-all {
  display: grid;
  place-items: center;
  background: #3a1f33;
  color: var(--accent-gold);
  font: 700 0.95rem/1 var(--font-display);
}

.game-tab-meta {
  color: var(--parchment-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.game-tab:hover {
  border-color: var(--r-accent);
}

.game-tab[aria-selected="true"] {
  border-color: var(--r-accent);
  box-shadow: 0 0 0 1px var(--r-accent), var(--r-glow);
}

.game-tab:focus-visible,
.room-chip:focus-visible,
.overview-row:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

/* ---------- All games overview ---------- */

.overview {
  display: grid;
  gap: 1rem;
}

.overview-total {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(26, 14, 25, 0.88);
  border: 1px solid var(--wood);
  border-radius: 12px;
}

.overview-total-label {
  font: 700 0.85rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.overview-total-value {
  font: 700 clamp(2.4rem, 6vw, 3.4rem)/1.05 var(--font-display);
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}

.overview-total-sub {
  color: var(--parchment-dim);
}

.overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.overview-row {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1rem;
  align-items: center;
  text-align: left;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--wood);
  background: rgba(26, 14, 25, 0.88);
  color: var(--parchment);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.overview-row:hover {
  border-color: var(--r-accent);
  transform: translateY(-2px);
}

.overview-row img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.overview-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.overview-name {
  font: 400 1.35rem/1.1 var(--r-display);
  color: var(--r-accent);
}

.overview-row[data-theme="hustle"] .overview-name { color: #2fe6ff; }
.overview-row[data-theme="daydreamers-library"] .overview-name { color: #e7d3a6; }

.overview-sub {
  font-size: 0.9rem;
  color: var(--parchment-dim);
}

.overview-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #2a1822;
  margin-top: 0.2rem;
}

.overview-bar i {
  display: block;
  height: 100%;
  background: var(--r-fill);
}

.overview-points {
  display: grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.overview-points b {
  font: 700 1.4rem/1 var(--font-display);
  color: var(--accent-gold);
}

.overview-points small {
  color: var(--parchment-dim);
}

/* ---------- a game's room ---------- */

.room {
  background: var(--r-bg);
  color: var(--r-text);
  font-family: var(--r-body);
  border: 1px solid var(--r-line);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 1.75rem);
  box-shadow: var(--r-glow);
}

.room[data-theme="kings-charter"] {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px #5f402a,
    inset 0 0 0 6px #2a1c12,
    inset 0 0 0 7px rgba(232, 163, 61, 0.5),
    var(--r-glow);
}

.room[data-theme="daydreamers-library"] {
  border-width: 2px;
}

.room-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
}

.room-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.room-title {
  margin: 0;
  font: 400 clamp(1.7rem, 3.4vw, 2.3rem)/1.1 var(--r-display);
  color: var(--r-accent);
  text-wrap: balance;
}

.room[data-theme="hustle"] .room-title {
  color: #2fe6ff;
  text-shadow: 0 0 14px rgba(47, 230, 255, 0.45);
}

.room[data-theme="daydreamers-library"] .room-title {
  color: #fdf7ea;
  text-shadow: 0 2px 0 rgba(74, 59, 44, 0.35);
}

.room-tagline {
  margin: 0.3rem 0 0;
  color: var(--r-muted);
  font-size: 0.95rem;
  max-width: 62ch;
}

.room-score {
  display: grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.room-score b {
  font: 400 clamp(1.6rem, 3vw, 2.1rem)/1 var(--r-display);
  color: var(--r-accent);
}

.room[data-theme="hustle"] .room-score b { color: #ffcf56; }
.room[data-theme="daydreamers-library"] .room-score b { color: #fdf7ea; }

.room-score span {
  font-size: 0.85rem;
  color: var(--r-muted);
}

.room-progress {
  display: grid;
  gap: 0.35rem;
  margin: 1.2rem 0 1rem;
}

.room-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--r-track);
}

.room-bar i {
  display: block;
  height: 100%;
  background: var(--r-fill);
}

.room[data-theme="hustle"] .room-bar i {
  box-shadow: 0 0 12px rgba(255, 63, 164, 0.6);
}

.room-progress-text {
  font-size: 0.85rem;
  color: var(--r-muted);
  font-variant-numeric: tabular-nums;
}

.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.room-chip {
  font: 600 0.85rem/1 var(--r-body);
  color: var(--r-muted);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--r-line);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.room-chip b {
  margin-left: 0.25rem;
  color: var(--r-text);
  font-variant-numeric: tabular-nums;
}

.room-chip[aria-pressed="true"] {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: #fff;
}

.room-chip[aria-pressed="true"] b {
  color: #fff;
}

.room[data-theme="hustle"] .room-chip[aria-pressed="true"] {
  background: #2fe6ff;
  border-color: #2fe6ff;
  color: #150f2e;
}

.room[data-theme="hustle"] .room-chip[aria-pressed="true"] b { color: #150f2e; }

.room[data-theme="kings-charter"] .room-chip[aria-pressed="true"] {
  color: #1b120c;
}

.room[data-theme="kings-charter"] .room-chip[aria-pressed="true"] b { color: #1b120c; }

.room[data-theme="daydreamers-library"] .room-chip {
  background: rgba(74, 59, 44, 0.28);
  color: #f5ebd6;
}

.room-empty {
  margin: 1.5rem 0 0.5rem;
  padding: 1.5rem;
  text-align: center;
  font-style: italic;
  color: var(--r-muted);
  border: 1px dashed var(--r-line);
  border-radius: 10px;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 0.85rem;
}

/* ---------- a trophy ---------- */

.trophy {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--r-tile-line);
  background: var(--r-tile);
  color: var(--r-tile-text);
}

.trophy-art {
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.18);
}

.trophy-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trophy-glyph {
  font-size: 2.4rem;
  color: var(--r-accent);
}

.trophy:not(.is-unlocked) .trophy-art img,
.trophy:not(.is-unlocked) .trophy-glyph {
  filter: grayscale(1) brightness(0.62) contrast(0.9);
  opacity: 0.85;
}

.trophy-name {
  margin: 0.15rem 0 0;
  font: 700 1rem/1.2 var(--r-body);
}

.trophy-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--r-tile-muted);
}

.trophy-meta {
  margin: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.trophy-cat {
  color: var(--r-tile-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}

.trophy-pts {
  font-weight: 700;
  color: var(--r-accent);
}

.trophy-when {
  margin: 0;
  font-size: 0.75rem;
  color: var(--r-tile-muted);
}

.trophy.is-unlocked .trophy-when {
  color: var(--r-tile-text);
  font-weight: 600;
}

.trophy:not(.is-unlocked) .trophy-name {
  color: var(--r-tile-muted);
}

/* Hustle: a neon trophy wall */
.room[data-theme="hustle"] .trophy.is-unlocked {
  border-color: #ff3fa4;
  box-shadow: 0 0 16px rgba(255, 63, 164, 0.28);
}

.room[data-theme="hustle"] .trophy-pts { color: #ffcf56; }

/* King's Charter: parchment leaves, sealed with red wax once earned */
.room[data-theme="kings-charter"] .trophy {
  border-radius: 4px;
  box-shadow: inset 0 0 22px rgba(120, 80, 30, 0.3);
}

.room[data-theme="kings-charter"] .trophy-name {
  font: 400 1.12rem/1.15 'IM Fell English', Georgia, serif;
}

.room[data-theme="kings-charter"] .trophy-pts { color: #8a3d0c; }

.room[data-theme="kings-charter"] .trophy.is-unlocked::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d2522c, #8c2a1f 70%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

.room[data-theme="kings-charter"] .trophy:not(.is-unlocked) {
  opacity: 0.82;
}

/* Daydreamers Library: manila index cards, stamped EARNED in purple ink */
.room[data-theme="daydreamers-library"] .trophy {
  border-radius: 3px;
  box-shadow: 0 2px 0 #c6aa72, 0 6px 14px rgba(74, 59, 44, 0.25);
}

.room[data-theme="daydreamers-library"] .trophy-name {
  font: 700 1rem/1.2 'Karla', system-ui, sans-serif;
}

.room[data-theme="daydreamers-library"] .trophy-pts { color: #7b5c9e; }

.room[data-theme="daydreamers-library"] .trophy.is-unlocked::after {
  content: "EARNED";
  position: absolute;
  top: 14px;
  right: 10px;
  transform: rotate(-9deg);
  padding: 2px 7px;
  border: 2px solid #7b5c9e;
  border-radius: 3px;
  color: #7b5c9e;
  font: 700 0.72rem/1.2 'Karla', system-ui, sans-serif;
  letter-spacing: 0.14em;
  background: rgba(253, 247, 234, 0.75);
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  .achievements-body {
    padding-inline: 1rem;
  }

  .room-head {
    grid-template-columns: auto 1fr;
  }

  .room-score {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .room-icon {
    width: 56px;
    height: 56px;
  }

  .overview-row {
    grid-template-columns: 44px 1fr;
  }

  .overview-row img {
    width: 44px;
    height: 44px;
  }

  .overview-points {
    grid-column: 2;
    justify-items: start;
  }

  /* Two smaller trophies per row on a phone: one full-width square per
     trophy made a 99-achievement room tens of thousands of pixels tall. */
  .room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .trophy {
    padding: 0.55rem;
    gap: 0.25rem;
  }

  .trophy-name {
    font-size: 0.9rem;
  }

  .trophy-desc {
    font-size: 0.78rem;
  }

  .trophy-meta {
    flex-direction: column;
    gap: 0.1rem;
  }

  .room-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }

  .room-chip {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-tab,
  .overview-row {
    transition: none;
  }

  .overview-row:hover {
    transform: none;
  }
}

/* Salt the Rift: obsidian room, rift-teal accent, sulfur score */
:is(.room, .game-tab, .overview-row)[data-theme="rock-festival-tycoon"] {
  --r-bg: radial-gradient(80% 60% at 50% -10%, rgba(214, 40, 40, 0.24), transparent 65%), linear-gradient(180deg, #19171b, #070708);
  --r-line: #2c2c31;
  --r-text: #ece6da;
  --r-muted: #9a948a;
  --r-accent: #d62828;
  --r-accent-2: #f4c542;
  --r-fill: linear-gradient(90deg, #d62828, #f4c542);
  --r-track: rgba(236, 230, 218, 0.12);
  --r-tile: #0e0e10;
  --r-tile-line: #2c2c31;
  --r-tile-text: #ece6da;
  --r-tile-muted: #6d6860;
  --r-display: 'Metal Mania', Impact, serif;
  --r-body: 'Oswald', 'Arial Narrow', sans-serif;
  --r-glow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.overview-row[data-theme="rock-festival-tycoon"] .overview-name { color: #d62828; }
.room[data-theme="rock-festival-tycoon"] .room-title { color: #ece6da; }
.room[data-theme="rock-festival-tycoon"] .room-score b { color: #f4c542; }

:is(.room, .game-tab, .overview-row)[data-theme="salt-the-rift"] {
  --r-bg: radial-gradient(80% 60% at 90% 110%, rgba(255, 90, 36, 0.22), transparent 60%), linear-gradient(180deg, #211a1c, #0c0a0b);
  --r-line: #3e3134;
  --r-text: #f1e8e3;
  --r-muted: #b7a7a1;
  --r-accent: #35d4c2;
  --r-accent-2: #c6df57;
  --r-fill: linear-gradient(90deg, #35d4c2, #c6df57);
  --r-track: rgba(241, 232, 227, 0.12);
  --r-tile: #171214;
  --r-tile-line: #3e3134;
  --r-tile-text: #f1e8e3;
  --r-tile-muted: #77686a;
  --r-display: 'Black Ops One', Impact, sans-serif;
  --r-body: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --r-glow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.overview-row[data-theme="salt-the-rift"] .overview-name { color: #35d4c2; }
.room[data-theme="salt-the-rift"] .room-title { color: #f1e8e3; }
.room[data-theme="salt-the-rift"] .room-score b { color: #c6df57; }