/* Guest showcase (showcase.html, Alex 21.10.): the same parts as "Entdecken" (discover.css) on the sky of the invitation page
   (account.css): the grid on the left – key art with 6 px corners, name and players as type under it, no card body, no shadow –
   and on the right the focused game's picture running out into the room without a frame (STYLEGUIDE §4, exception "Entdecken").
   Focus = sunlight (§5): the tile grows 8 %, a thin --sun ring with a halo, breathing every 2.4 s. The gate and the request form are
   the invitation page's glass panel over the dimmed showcase. No accent strokes (tests/no-accent-bars.test.js). */

.showcase-page #showcase { position: relative; min-height: 100vh; padding: 5vh 5vw 4vh; }
.sc-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 32); flex-wrap: wrap; }
.sc-top .join-brand { margin-bottom: 0; }
#sc-header { margin-top: 0; justify-content: flex-end; }
.sc-intro { max-width: calc(var(--u) * 1040); margin: 4vh 0 calc(var(--u) * 28); }
.sc-intro .title { margin-bottom: calc(var(--u) * 16); }
.sc-intro .consent-text { color: var(--milk-2); }

.sc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); gap: calc(var(--u) * 56); align-items: start; transition: opacity 360ms var(--ease), filter 360ms var(--ease); }
#sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 270), 1fr)); gap: calc(var(--u) * 34) calc(var(--u) * 26); padding: calc(var(--u) * 12); }
.sc-tile { position: relative; min-width: 0; cursor: pointer; transform-origin: 50% 40%; transition: transform 260ms var(--spring); animation: sc-tile-in 460ms var(--spring) both; animation-delay: calc(var(--k, 0) * 25ms); outline: none; }
@keyframes sc-tile-in { from { opacity: 0; transform: translateY(calc(var(--u) * 18)); } to { opacity: 1; transform: none; } }
.sc-pic {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--u) * 6);
  background: var(--space-raised);
  filter: brightness(.72) saturate(.85);
  transition: filter 200ms var(--ease), box-shadow 240ms var(--ease);
}
.sc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-name { display: block; margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 22); font-weight: 500; color: var(--milk-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-meta { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 20); color: var(--milk-3); }
.sc-tile.is-focus { transform: scale(1.08); z-index: 3; }
.sc-tile.is-focus .sc-pic { filter: none; box-shadow: 0 0 0 calc(var(--u) * 2) var(--sun), 0 0 calc(var(--u) * 48) calc(var(--u) * 8) var(--sun-glow); animation: sc-breathe 2.4s ease-in-out infinite; }
@keyframes sc-breathe { 50% { box-shadow: 0 0 0 calc(var(--u) * 3) var(--sun), 0 0 calc(var(--u) * 64) calc(var(--u) * 14) var(--sun-glow); } }
.sc-tile.is-focus .sc-name { color: var(--milk); font-weight: 600; }
.sc-tile.is-focus .sc-meta { color: var(--milk-2); }
@media (hover: hover) { .sc-tile:not(.is-focus):hover .sc-pic { filter: brightness(.9); } }

/* the focused game: its picture without a box, fading into the room; name, pitch, facts, "Spielen" */
#sc-focus { position: sticky; top: 4vh; min-width: 0; }
#sc-focus[hidden] { display: none; }
.sc-big { width: 86%; aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 6); overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, #000 60%, transparent 100%); }
.sc-big img { display: block; width: 100%; height: 100%; object-fit: cover; animation: sc-fade 420ms var(--ease) both; }
@keyframes sc-fade { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
#sc-name { margin-top: calc(var(--u) * 18); font: 600 calc(var(--u) * 40)/1.12 var(--font-display); letter-spacing: -.03em; color: var(--milk); text-wrap: balance; }
#sc-about { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 26); line-height: 1.35; color: var(--milk-2); }
#sc-facts { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 21); color: var(--milk-3); }
#sc-focus .lightpoints { margin-top: calc(var(--u) * 22); }
#sc-empty { margin-top: calc(var(--u) * 20); }
#sc-empty[hidden] { display: none; }

/* the gate and the request: the glass panel over the dimmed showcase */
body:not([data-step="browse"]) .sc-body, body:not([data-step="browse"]) .sc-intro, body:not([data-step="browse"]) .sc-top { opacity: .22; filter: blur(2px); pointer-events: none; }
#sc-panel { position: fixed; left: 5vw; top: 14vh; z-index: 10; width: min(calc(var(--u) * 1040), 90vw); max-height: 80vh; overflow-y: auto; animation: sc-fade 360ms var(--ease) both; }
#sc-panel[hidden] { display: none; }
#sc-panel .title { font-size: calc(var(--u) * 48); margin-bottom: calc(var(--u) * 20); }
#sc-panel-lines { margin-bottom: calc(var(--u) * 10); }
.sc-field { margin: calc(var(--u) * 12) 0 calc(var(--u) * 4); }
.sc-field[hidden] { display: none; }
#sc-now { min-height: 1.3em; margin: calc(var(--u) * 10) 0 0; font-size: calc(var(--u) * 24); color: var(--nebula); }
#sc-now.is-failed { color: var(--ember); }
#sc-choices { margin-top: calc(var(--u) * 22); row-gap: calc(var(--u) * 20); }
#sc-choices > [data-index]:focus-visible, #sc-header > [data-index]:focus-visible { outline: none; }

body.reduced .sc-tile, body.reduced .sc-big img, body.reduced #sc-panel { animation: none; }
body.reduced .sc-tile.is-focus .sc-pic { animation: none; }
@media (prefers-reduced-motion: reduce) { .sc-tile, .sc-big img, #sc-panel, .sc-tile.is-focus .sc-pic { animation: none; } }

/* phones: two columns of tiles, no side picture (a tap opens the gate at once), the panel fills the width */
@media (pointer: coarse) and (max-width: 600px), (max-width: 760px) {
  .showcase-page #showcase { padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 24px) max(env(safe-area-inset-left), 16px); }
  .sc-top { align-items: center; }
  #sc-header { justify-content: flex-start; gap: 10px; }
  .sc-intro { margin: 22px 0 18px; }
  .sc-intro .title { font-size: max(26px, calc(var(--u) * 44)); }
  .sc-intro .consent-text { font-size: max(16px, calc(var(--u) * 26)); }
  .sc-body { grid-template-columns: 1fr; }
  #sc-focus { display: none; }
  .sc-big { width: 100%; }
  #sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding: 4px; }
  .sc-pic, .sc-big { border-radius: 4px; }
  .sc-name { font-size: max(15px, calc(var(--u) * 22)); }
  .sc-meta { font-size: max(13px, calc(var(--u) * 20)); }
  .sc-tile.is-focus { transform: scale(1.04); }
  #sc-panel { left: 12px; right: 12px; top: max(env(safe-area-inset-top), 12px); width: auto; max-height: calc(100vh - 24px); padding: 22px 18px 20px; }
  #sc-panel .title { font-size: max(24px, calc(var(--u) * 44)); }
  #sc-panel .consent-text { font-size: max(16px, calc(var(--u) * 26)); }
  #sc-now { font-size: max(15px, calc(var(--u) * 24)); }
  .showcase-page .lp { min-height: 44px; font-size: max(15px, calc(var(--u) * 28)); }
  #sc-header .lp { min-height: 40px; height: 40px; padding: 0 14px; font-size: 14px; }
  #sc-header { row-gap: 8px; }
}