/* The mobile catalog's details page. The room is parked while this is open. */
.game-details {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  /* Focus must not scroll the translated panel's full-size dialog container. */
  margin: 0; padding: 0; border: 0; outline: none; overflow: clip; background: transparent; color: #4a3a55;
  font-family: "Baloo 2", system-ui, sans-serif; overscroll-behavior: none;
}
.game-details:not([open]) { display: none; }
.game-details::backdrop { background: rgba(9, 10, 14, var(--details-shade, 0)); }
.game-details-panel {
  position: absolute; bottom: 0; left: 50%; width: min(100%, 680px); height: var(--details-max);
  transform: translate3d(-50%, var(--details-offset), 0); border-radius: 28px 28px 0 0;
  background: #fff; box-shadow: 0 -8px 36px rgba(12, 9, 16, .25); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.game-details.is-moving .game-details-panel { will-change: transform; }
.game-details-grip {
  position: absolute; z-index: 2; top: 0; left: calc(50% - 40px);
  display: grid; place-items: center; width: 80px; height: 36px; padding: 0; border: 0;
  background: none; cursor: grab; color: inherit;
}
.game-details-grip span { width: 42px; height: 5px; background: #fff; border-radius: 8px; box-shadow: 0 1px 5px #0009, 0 0 0 1px #0003; }
.game-details.is-dragging .game-details-grip { cursor: grabbing; }
.game-details-scroll {
  height: calc(100% - var(--details-offset));
  min-height: 0; overflow: clip; overscroll-behavior: contain; scrollbar-width: thin;
  /* A single pointer gesture expands the sheet, then scrolls its contents. */
  touch-action: none;
}
.game-details.can-scroll .game-details-scroll { overflow-x: hidden; overflow-y: auto; }
.game-details-content { display: flow-root; }
/* Opened halfway (--details-half, game-details.js), the sheet shows the artwork and all of Play under it:
   on a short screen (a phone with the browser's toolbar showing) the artwork gives up the height.
   96px = the copy's top padding (16) + Play (64) + a gap under it (16). */
.game-details-hero {
  position: relative; width: 100%; height: 270px; background: linear-gradient(135deg, #ae97c9, #74618e); overflow: clip;
  height: clamp(160px, calc(var(--details-half, 50vh) - 96px - env(safe-area-inset-bottom, 0px)), 270px);
}
.game-details-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent, #00000026 45%, #000000a8); }
.game-details-hero img, .game-details-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-touch-callout: none; -webkit-user-drag: none; }
.game-details-hero video { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.game-details-hero video.is-ready { opacity: 1; }
.game-details [hidden] { display: none !important; }
.game-details-heading { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 18px; color: #fff; text-shadow: 0 1px 4px #0005; }
.game-details h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 28px; line-height: 31px; font-weight: 800; overflow-wrap: anywhere; }
.game-details-copy { display: grid; gap: 16px; padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.game-details-daily { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; grid-template-columns: 18px auto; align-items: center; gap: 2px 6px; padding: 7px 11px; border-radius: 18px; background: #ffe69a; color: #654612; box-shadow: 0 2px 10px #0002; }
.game-details-daily[data-status="complete"] { grid-template-columns: auto; background: #e5e7eb; color: #535963; }
.game-details-daily-timer { grid-column: 1 / -1; text-align: center; font: 700 13px/18px system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-details-daily strong { font-size: 13px; line-height: 18px; font-weight: 800; }
.game-details-daily-icon { display: grid; place-items: center; flex: none; width: 18px; height: 18px; font: 800 18px/1 system-ui, sans-serif; }
.game-details-daily-icon::before { content: '✦'; }
.game-details-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.game-details-facts span { padding: 7px 12px; border-radius: 999px; background: #1015210f; color: #7a6a86; font-size: 12px; line-height: 1.4; font-weight: 700; }
.game-details-facts [data-tag="daily"] { background: #e6f5ec; color: #286748; }
.game-details h3 { margin: 0 0 8px; color: #4a3a55; font-size: 18px; line-height: 21px; letter-spacing: 0; text-transform: none; }
.game-details-about { margin: 0; color: #7a6a86; font: 500 13px/19px system-ui, sans-serif; white-space: pre-line; overflow-wrap: anywhere; }
.game-details-stats-section, .game-details-leaderboard { border-top: 1px solid #eee9f1; padding-top: 18px; }
.game-details-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.game-details-stats > div { display: flex; flex-direction: column-reverse; padding: 12px 16px; background: #f7f5f9; border-radius: 14px; }
.game-details-stats dt { color: #7a6a86; font: 500 12px/18px system-ui, sans-serif; }
.game-details-stats dd { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-details-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.game-details-board-heading h3 { margin: 0; }
.game-details-scope { display: flex; padding: 4px; gap: 4px; margin-bottom: 12px; border-radius: 14px; background: #f3eff8; }
.game-details-scope button { flex: 1; min-height: 44px; padding: 7px 12px; border: 0; border-radius: 10px; background: transparent; color: #7a6a86; font: 700 16px "Baloo 2", system-ui, sans-serif; cursor: pointer; }
.game-details-scope button[aria-pressed="true"] { color: #624181; background: #fff; box-shadow: 0 2px 6px #49315f14; }
.game-details-period { padding: 3px 9px; border-radius: 20px; background: #f3eff8; color: #7a6a86; font-size: 12px; font-weight: 700; }
.game-details-board-select { max-width: 100%; padding: 9px 12px; margin-bottom: 12px; border: 1px solid #e3dce9; border-radius: 10px; background: #fff; color: inherit; font: inherit; text-transform: capitalize; }
.game-details-board-status { margin: 14px 0; color: #7a6a86; font: 500 13px/20px system-ui, sans-serif; }
.game-details-scores { list-style: none; margin: 0; padding: 0; }
.game-details-score-row { display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; min-height: 58px; }
.game-details-score-row + .game-details-score-row { margin-top: 4px; }
.game-details-score-row.is-first { background: #fff8e7; }
.game-details-score-row.is-self { box-shadow: inset 0 0 0 1px #b5dfc8; }
.game-details-rank { text-align: center; font: 700 13px/20px system-ui, sans-serif; color: #9a8ca5; }
.game-details-score-row.is-first .game-details-rank { color: #a57316; }
.game-details-player-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eee6f6; color: #75549b; font-size: 17px; font-weight: 800; }
.game-details-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; }
.game-details-score { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.game-details-score strong { color: #28835a; font-size: 18px; line-height: 23px; }
.game-details-score small { color: #7a6a86; font: 500 11px/15px system-ui, sans-serif; }
.game-details-retry { border: 1px solid #ded5e7; border-radius: 9px; padding: 9px 15px; min-height: 44px; background: #f7f5f9; color: #654e78; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.game-details-play {
  display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 64px;
  border: 0; border-radius: 18px; background: linear-gradient(90deg, #1fce73, #63e6a8); color: #fff;
  font: 800 20px "Baloo 2", system-ui, sans-serif; box-shadow: 0 6px 12px #21c86b3a; cursor: pointer;
}
.game-details-play:active { transform: translateY(1px); box-shadow: 0 2px 6px #21c86b3a; }
.game-details-play:disabled { opacity: .55; cursor: default; }
.game-details-play-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffffff3d; }
.game-details-play svg { width: 25px; height: 25px; fill: currentColor; }
.game-details button:focus-visible, .game-details-scroll:focus-visible { outline: 3px solid #8560b5; outline-offset: -3px; }
@media (max-width: 480px) {
  /* Keep the wider countdown clear of the sheet's centered drag handle. */
  .game-details-daily[data-status="complete"] { top: 40px; }
}
@media (max-height: 500px) {
  .game-details-heading { padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) { .game-details-hero video { transition: none; } }