/*
 * Lobby (play.phoneremo.com), spec §10.2: a 10-foot DOM UI for TVs.
 * Sizes are in rem, which /ds/tv.css scales with the viewport (about 20 px at
 * 1080p); the page keeps a 5% overscan-safe margin. At 16:9 the join panel
 * takes the start third and the four game cards a 2×2 grid in the rest.
 */

.lobby-page {
  min-block-size: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(60vw 60vh at 85% -10%, color-mix(in oklab, var(--violet-600) 26%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 0% 110%, color-mix(in oklab, var(--mint-600) 12%, transparent), transparent 70%),
    var(--bg);
}
[dir="rtl"] .lobby-page {
  background:
    radial-gradient(60vw 60vh at 15% -10%, color-mix(in oklab, var(--violet-600) 26%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 100% 110%, color-mix(in oklab, var(--mint-600) 12%, transparent), transparent 70%),
    var(--bg);
}

/* TV-app mode (§10.2): no fullscreen or "get the app" UI, an Exit action instead. */
.only-tv { display: none !important; }
html[data-app="tv"] .only-tv { display: inline-flex !important; }
html[data-app="tv"] .only-web { display: none !important; }

.lobby {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2.6vh;
  block-size: 100vh;
  padding-block: 4vh;
  padding-inline: 4.5vw;
}

/* ---- top bar ------------------------------------------------------------ */
.lobby-bar { display: flex; align-items: center; gap: 1.5rem; min-block-size: 3rem; }
.lobby-bar .brand__mark { inline-size: 2.2rem; block-size: 2.2rem; }
.lobby-bar .brand__word { font-size: 1.5rem; }
.lobby-bar__tools { display: flex; align-items: center; gap: .9rem; margin-inline-start: auto; }
.lobby-bar .pr-lang a { min-inline-size: 2.6rem; min-block-size: 2.2rem; font-size: .9rem; }
.lobby-bar .pr-iconbtn { inline-size: 2.75rem; block-size: 2.75rem; }
.lobby-bar .pr-iconbtn svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lobby-bar .pr-btn { min-block-size: 2.75rem; padding-inline: 1.1rem; font-size: .95rem; }
.lobby-quality { align-items: center; }
.lobby-quality__label { padding-inline: .75rem .4rem; color: var(--text-muted); font-size: .8rem; font-weight: var(--fw-medium); white-space: nowrap; }
.lobby-quality button { min-block-size: 2.2rem; padding-inline: .8rem; font-size: .85rem; }
#sound .icon-off, #sound[aria-pressed="false"] .icon-on { display: none; }
#sound[aria-pressed="false"] .icon-off { display: block; }
#sound[aria-pressed="false"] { color: var(--text-muted); }

/* ---- main grid ------------------------------------------------------------- */
.lobby-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr);
  gap: 2.4vw;
  min-block-size: 0;
}

/* ---- join panel ---------------------------------------------------------- */
.join {
  --qr: clamp(180px, min(35vh, 22vw), 560px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3vh;
  min-block-size: 0;
  padding: 2.8vh 1.6vw;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 60% at 50% 0%, color-mix(in oklab, var(--violet-500) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 92%, transparent), var(--surface));
  box-shadow: var(--shadow-2);
  text-align: center;
}
.join > * { flex-shrink: 0; }
.join > .join__roster { flex-shrink: 1; min-block-size: 0; overflow: hidden; }
/* With phones joined the roster takes the title's and hint's place (8 chips fit at 720p). */
.join[data-players] .join__title { display: none; }
.join[data-players="many"] .join__hint { display: none; }
.join__title { font-size: 1.45rem; font-weight: var(--fw-black); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.join__tile { position: relative; inline-size: var(--qr); padding: calc(var(--qr) * .04); border-radius: var(--r-lg); }
.join__skeleton {
  position: absolute;
  inset: calc(var(--qr) * .04);
  overflow: hidden;
  border-radius: 6px;
  background: repeating-conic-gradient(var(--ink-200) 0 25%, #FFFFFF 0 50%) 0 0 / 28px 28px;
  opacity: .45;
}
/* The sweep moves by transform only: it runs on the compositor and costs the
   main thread no repaints while the QR is on its way (time-to-QR gate). */
.join__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lobby-shimmer 1.4s linear infinite;
}
.join[data-state="ready"] .join__skeleton { display: none; }
@keyframes lobby-shimmer { to { transform: translateX(100%); } }
.join__scan { font-size: 1.05rem; font-weight: var(--fw-bold); }
.join__line { display: grid; justify-items: center; gap: .2rem; color: var(--text-muted); font-size: 1rem; }
.join__host:empty { display: none; }
.join__code-part { display: inline-flex; align-items: baseline; gap: .6rem; }
.join__host { font-weight: var(--fw-medium); unicode-bidi: isolate; }
.join__code {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  unicode-bidi: isolate;
}
.join__conn { font-size: .9rem; }
.join__roster { display: grid; justify-items: center; gap: .6rem; inline-size: 100%; min-block-size: 2.4rem; }
.join__players { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.join__players .pr-chip { min-block-size: 2.1rem; padding-inline-end: .8rem; font-size: .9rem; animation: chip-in var(--dur-3) var(--ease-spring); }
.join__players .pr-chip__label { max-inline-size: 9ch; }
/* The relay is the normal path: only a P2P link gets a badge in the compact lobby roster. */
.join__players .pr-chip__link:not(.pr-chip__link--p2p) { display: none; }
.join__players .pr-chip__glyph { inline-size: 1.5rem; block-size: 1.5rem; }
.join__players .pr-chip__glyph svg { inline-size: .9rem; block-size: .9rem; }
.join__empty { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-muted); font-size: .95rem; }
.join__players:not(:empty) + .join__empty { display: none; }
.join__hint { margin-block-start: auto; color: var(--text-muted); font-size: .85rem; }
.join__legal { color: var(--text-muted); font-size: .75rem; }
.join__legal a { color: var(--text-muted); }
@keyframes chip-in { from { opacity: 0; transform: scale(.6); } }

/* ---- games ---------------------------------------------------------------- */
.games { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.8vh; min-block-size: 0; }
.games:focus { outline: none; }
.games__title { font-size: 2.1rem; font-weight: var(--fw-black); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.games__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2.2vh 1.6vw;
  min-block-size: 0;
  padding: .9rem 0 0;
  margin: 0;
  list-style: none;
}
.games__grid > li { display: flex; min-block-size: 0; }

.lobby-card { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-block-size: 0; border-radius: var(--r-xl); }
.lobby-card[data-game="tilt-racers"] { --_c: var(--orange-500); }
.lobby-card[data-game="star-sentinel"] { --_c: var(--sky-500); }
.lobby-card[data-game="bullseye"] { --_c: var(--amber-500); }
.lobby-card[data-game="sumo-spheres"] { --_c: var(--magenta-500); }
.lobby-card__poster { display: block; aspect-ratio: auto; min-block-size: 0; }
.lobby-card__poster img, .lobby-card__poster picture { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lobby-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(7 8 13 / .85), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.lobby-card__hint {
  position: absolute;
  inset-inline: 1.1rem;
  inset-block-end: .9rem;
  z-index: 1;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  text-shadow: 0 1px 8px rgb(0 0 0 / .6);
}
.lobby-card:is(:hover, :focus-visible, .is-focused, [data-cursor-hover]) .lobby-card__poster::after,
.lobby-card:is(:hover, :focus-visible, .is-focused, [data-cursor-hover]) .lobby-card__hint { opacity: 1; transform: none; }
.lobby-card[data-cursor-hover] { transform: translateY(-4px) scale(1.02); border-color: color-mix(in oklab, var(--_c) 70%, transparent); }
.lobby-card__warn {
  position: absolute;
  inset-block-start: .9rem;
  inset-inline-start: .9rem;
  z-index: 1;
  padding-block: .25rem;
  padding-inline: .8rem;
  border-color: color-mix(in oklab, var(--amber-500) 55%, transparent);
  background: rgb(7 8 13 / .78);
  color: var(--amber-500);
  font-size: .85rem;
  font-weight: var(--fw-bold);
  backdrop-filter: blur(4px);
}
.lobby-card__body { gap: .35rem; padding: 1rem 1.25rem 1.15rem; }
.lobby-card__title { display: block; font-size: 1.55rem; }
.lobby-card__tagline { display: block; overflow: hidden; color: var(--text-muted); font-size: .95rem; line-height: var(--lh-snug); white-space: nowrap; text-overflow: ellipsis; }
.lobby-card .pr-gamecard__meta { margin-block-start: .35rem; }
.lobby-card .pr-badge { min-block-size: 1.8rem; padding-inline: .75rem; font-size: .85rem; }
.lobby-card__control { gap: .4rem; color: var(--text); border-color: color-mix(in oklab, var(--_c) 55%, transparent); background: color-mix(in oklab, var(--_c) 18%, transparent); }
.lobby-card__control svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lobby-card.is-launching { animation: launch var(--dur-4) var(--ease-in-out) forwards; }
@keyframes launch { 40% { transform: scale(1.04); } 100% { transform: scale(.98); opacity: .6; } }

/* ---- unsupported dialog ------------------------------------------------------- */
.unsupported { display: grid; justify-items: center; gap: 1rem; text-align: center; inline-size: min(36rem, 100%); padding: 2.4rem; }
.unsupported__icon { inline-size: 4rem; block-size: 4rem; fill: none; stroke: var(--amber-500); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.unsupported__title { font-size: 1.6rem; font-weight: var(--fw-black); line-height: var(--lh-snug); }
.unsupported__body { color: var(--text-muted); font-size: 1.05rem; }
.unsupported .pr-btn { margin-block-start: .6rem; }

/* ---- narrow (non-TV) windows: stack and scroll ---------------------------------- */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .lobby { block-size: auto; min-block-size: 100vh; }
  .lobby-main { grid-template-columns: minmax(0, 1fr); }
  .join { --qr: clamp(180px, 46vw, 320px); }
  .games__grid { grid-template-rows: none; }
  .lobby-card__poster { aspect-ratio: 16 / 9; }
  .lobby-quality__label { display: none; }
}
@media (max-width: 640px) { .games__grid { grid-template-columns: minmax(0, 1fr); } .lobby-bar .brand__word { display: none; } }

/* ---- phone visitors (§10.2): no lobby, a pointer to the big screen ---------------- */
.lobby-mobile { display: none; }
@media (pointer: coarse) and (max-width: 820px) {
  .lobby, .skip-link { display: none; }
  /*
   * Flex, not grid + place-items: a fit-content grid item grows to its longest
   * word ("play.phoneremo.com" in the title), which widened the layout viewport
   * on 320–390 px phones. The card gets a definite width instead, and the title
   * scales so the host name fits one line from 320 px up (break-word is only the
   * safety net for longer translations).
   */
  .lobby-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    padding: var(--s-5) max(var(--s-4), env(safe-area-inset-left)) var(--s-5) max(var(--s-4), env(safe-area-inset-right));
  }
  .lobby-mobile__card {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    inline-size: min(100%, 30rem);
    padding: var(--s-7) clamp(var(--s-4), 5vw, var(--s-5));
    text-align: center;
  }
  .lobby-mobile__card > * { max-inline-size: 100%; }
  .lobby-mobile__title {
    font-size: clamp(1.375rem, 7.2vw, var(--fs-2xl));
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .lobby-mobile__body { color: var(--text-muted); }
}

@media (prefers-reduced-motion: reduce) {
  .join__skeleton::after, .lobby-card.is-launching, .join__players .pr-chip { animation: none; }
}