/* Shared collection chrome and reversible Game Room skin.
   The original Whale Wash presentation remains in styles.css and is left
   untouched for Classic + Light. */

.collection-toolbar {
  position: relative;
  z-index: 8;
}

.collection-home,
.collection-all-games {
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.collection-home {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

.collection-home span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-all-games {
  padding: 0.55rem 0.35rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.collection-home:hover,
.collection-home:focus-visible,
.collection-all-games:hover,
.collection-all-games:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
}

.collection-home:focus-visible,
.collection-all-games:focus-visible {
  border-radius: 0.25rem;
  outline: 3px solid var(--baba-focus);
  outline-offset: 3px;
}

[data-baba-skin="game-room"] body {
  background:
    linear-gradient(rgba(16, 48, 37, 0.64), rgba(8, 32, 27, 0.86)),
    var(--baba-room-backdrop) center / cover fixed,
    #10372a;
}

[data-baba-skin="game-room"][data-baba-mode="light"] body {
  color: #fffaf0;
  background:
    linear-gradient(rgba(30, 91, 64, 0.5), rgba(12, 55, 39, 0.78)),
    var(--baba-room-backdrop) center / cover fixed,
    #18563b;
}

[data-baba-skin="game-room"] h1 {
  color: #fff8e9;
  text-shadow:
    0 0.055em 0 #87512b,
    0 0.1em 0 #3b2115,
    0 0.16em 0 rgba(2, 14, 20, 0.72);
}

[data-baba-skin="game-room"] .eyebrow,
[data-baba-skin="game-room"] .panel-number,
[data-baba-skin="game-room"] .start-kicker {
  color: #f4cf78;
}

[data-baba-skin="game-room"] .lede {
  color: #e6ddd0;
}

[data-baba-skin="game-room"] .game-shell {
  border-color: var(--baba-walnut);
  box-shadow:
    0 0 0 0.14rem var(--baba-gold),
    0 0 0 0.28rem var(--baba-walnut-dark),
    0 2rem 5rem rgba(0, 8, 15, 0.48);
}

[data-baba-skin="game-room"] .start-card {
  background:
    linear-gradient(rgba(15, 31, 24, 0.08), rgba(10, 28, 22, 0.78)),
    image-set(
      url("/shared/game-room/v1/assets/illustrations/whale-wash-480.webp") 1x,
      url("/shared/game-room/v1/assets/illustrations/whale-wash-768.webp") 2x
    ) center / cover;
}

[data-baba-skin="game-room"] .start-card::before {
  background: radial-gradient(circle at center, transparent 8%, rgba(14, 24, 18, 0.58) 82%);
}

[data-baba-skin="game-room"] .start-card h2 {
  color: #fff8e9;
  text-shadow: 0 0.08em 0 #4c2816, 0 0.16em 0 rgba(22, 10, 5, 0.74);
}

[data-baba-skin="game-room"] .start-card > p:not(.start-kicker):not(.start-controls),
[data-baba-skin="game-room"] .start-controls {
  color: #fff7e7;
  text-shadow: 0 1px 3px #1f1008;
}

[data-baba-skin="game-room"] .start-card button {
  border-color: #fff5d7;
  color: #322116;
  background: linear-gradient(180deg, #fff8e9, #e7d7b8);
}

[data-baba-skin="game-room"] .panel {
  border-color: rgba(211, 170, 83, 0.72);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(33, 113, 75, 0.97), rgba(16, 67, 47, 0.98));
  background-size: 8px 8px, auto;
}

[data-baba-skin="game-room"][data-baba-mode="light"] .panel {
  border-color: rgba(133, 77, 38, 0.68);
  color: #29241f;
  background:
    radial-gradient(circle at 18% 16%, rgba(116, 64, 31, 0.08) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(235, 220, 192, 0.98));
  background-size: 8px 8px, auto;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.7),
    0 0.35rem 0 var(--baba-walnut-dark),
    0 0.8rem 1.2rem rgba(34, 18, 8, 0.22);
}

[data-baba-skin="game-room"][data-baba-mode="light"] .panel-number {
  color: #7a4b23;
}

[data-baba-skin="game-room"][data-baba-mode="light"] dt,
[data-baba-skin="game-room"][data-baba-mode="light"] .brief-panel p:not(.panel-number) {
  color: #5f5c54;
}

[data-baba-skin="game-room"][data-baba-mode="light"] dd {
  color: #29241f;
}

[data-baba-skin="game-room"][data-baba-mode="light"] dl > div {
  border-bottom-color: rgba(93, 70, 46, 0.2);
}

[data-baba-skin="game-room"][data-baba-mode="light"] kbd {
  border-color: rgba(91, 58, 28, 0.4);
  color: #fffaf0;
  background: #5b3a20;
}

[data-baba-skin="game-room"] .preservation-note,
[data-baba-skin="game-room"] .preservation-note a {
  color: #eee2cf;
}

@media (max-width: 620px) {
  .collection-toolbar {
    align-items: stretch;
    gap: 0.45rem;
  }

  .collection-home span:last-child {
    max-width: 8rem;
  }

  .collection-all-games {
    display: none;
  }

  .start-card {
    place-content: center;
    padding: 0.55rem 0.8rem;
  }

  .start-kicker {
    margin-bottom: 0.18rem;
    font-size: 0.56rem;
  }

  .start-card h2 {
    font-size: clamp(1.4rem, 7vw, 2rem);
    line-height: 0.92;
  }

  .start-card > p:not(.start-kicker):not(.start-controls) {
    margin: 0.4rem auto 0.52rem;
    font-size: 0.68rem;
    line-height: 1.28;
  }

  .start-card button {
    min-height: 2.35rem;
    padding: 0.38rem 0.85rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 390px) {
  .collection-toolbar {
    padding-left: 0.55rem;
  }

  .collection-home span:last-child {
    max-width: 5.25rem;
    font-size: 0.8rem;
  }

  .collection-home > span:first-child,
  .baba-theme-button__icon {
    display: none;
  }

  .baba-theme-button {
    min-width: 0;
    padding-inline: 0.42rem;
  }
}