/* Page CSS only. The grid, type, buttons, nav, hero and footer come from assets/ (system.css, layout.css). */

/* the library's filter: three plain words, one active */
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
/* the system's .section-head--split > div makes every direct div a grid, which squeezed this group
   into a narrow column with the three words stacked: keep it one row, as wide as its words */
.section-head--split > .filters { display: flex; flex: none; width: auto; max-width: none; gap: var(--s-5); flex-wrap: nowrap; white-space: nowrap; }
.filter {
  font: inherit;
  font-size: var(--t-small);
  color: var(--muted);
  background: none;
  border: 0;
  padding: var(--s-2) 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.filter:hover { color: var(--ink); }
.filter.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* the games library is a fixed one-screen section by default (system.css). Its cards run several rows in three
   columns and are taller than that screen, so the last row spilled into the footer. Let the section grow with
   its cards (never shorter than one screen) and keep the system's padding above and below */
#games { height: auto; min-height: 100svh; }

/* the cards of one row are one height; the action sits at the foot */
#gameGrid { align-items: stretch; }
#gameGrid .card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
}
#gameGrid .card .card-desc { flex: 1; }
#gameGrid .card .card-actions { margin-top: var(--s-3); }

.empty { color: var(--muted); padding-top: var(--s-6); }

/* the hero's picture: the title screen is 16:10. Stretched to the words' full column height it was cropped
   to a tall strip (the title and its side text cut off), so on a desktop it keeps its own ratio and sits on
   centred in the column beside the words. A phone keeps the frame's height (the picture fills what the screen leaves) */
@media (min-width: 1024px) {
  .hero-split > .hero-visual { height: auto; flex: none; align-self: center; aspect-ratio: 16 / 10; }
}

/* the card's picture: a 16:10 box at the card's width. The .frame's own spacer has no height, and its photo
   is absolutely placed, so the box needs its own ratio or the picture collapses to nothing */
#gameGrid .card-media { display: block; position: relative; aspect-ratio: 16 / 10; margin: 0 0 var(--s-2); padding: 0; }
#gameGrid .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the in-page player: one game in a full-window overlay, with a bar on top */
body.is-playing { overflow: hidden; }
.player {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--p-bg, #0c0c0d);
}
.player[hidden] { display: none; }
.player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--p-surface, #161618);
  background: var(--p-surface, #161618);
  color: var(--p-ink, #f1ede4);
  min-width: 0;
}
.player__title {
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.player__actions { display: flex; gap: var(--s-3); flex-shrink: 0; }
.player__btn {
  font: inherit;
  font-size: var(--t-small);
  color: var(--p-ink, #f1ede4);
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.player__btn:hover { border-color: var(--p-accent, #c9b488); color: var(--p-accent, #c9b488); }
.player__btn--close { background: var(--p-accent, #c9b488); border-color: var(--p-accent, #c9b488); color: var(--p-accent-ink, #14120e); }
.player__btn--close:hover { color: var(--p-accent-ink, #14120e); filter: brightness(1.08); }
.player__btn:focus-visible { outline: 2px solid var(--p-accent, #c9b488); outline-offset: 3px; }
.player__stage { flex: 1; min-height: 0; background: #000; }
.player__frame { display: block; width: 100%; height: 100%; border: 0; }
.player__stage:fullscreen { background: #000; }
.player__stage:fullscreen .player__frame { width: 100vw; height: 100vh; }

@media (max-width: 639px) {
  .player__bar { padding: var(--s-2) var(--s-3); }
  .player__btn { padding: var(--s-2) var(--s-3); }
  .player__btn[data-act="newtab"] { display: none; }
}

/* ---- auth / friends / rooms modals ---- */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal__panel { position: relative; width: min(100%, 440px); max-height: 90vh; overflow: auto; background: var(--p-surface, #161618); color: var(--p-ink, #f1ede4); border: 1px solid color-mix(in oklab, var(--p-ink, #f1ede4) 12%, transparent); border-radius: 12px; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); background: none; border: 0; color: var(--p-muted, #a6a094); font-size: 22px; cursor: pointer; line-height: 1; padding: var(--s-2); }
.modal__close:hover { color: var(--p-ink, #f1ede4); }
.modal__tabs { display: flex; gap: var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--p-ink, #f1ede4) 12%, transparent); }
.modal__tabs [role="tab"] { background: none; border: 0; color: var(--p-muted, #a6a094); padding: var(--s-2) 0; cursor: pointer; border-bottom: 2px solid transparent; font: inherit; }
.modal__tabs [role="tab"][aria-selected="true"] { color: var(--p-ink, #f1ede4); border-bottom-color: var(--p-accent, #c9b488); }
.modal__form { display: flex; flex-direction: column; gap: var(--s-3); }
.modal__form label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-small); color: var(--p-muted, #a6a094); }
.modal__form input, .modal__label select { background: var(--p-bg, #0c0c0d); color: var(--p-ink, #f1ede4); border: 1px solid color-mix(in oklab, var(--p-ink, #f1ede4) 18%, transparent); border-radius: 8px; padding: var(--s-2) var(--s-3); font: inherit; }
.modal__row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.modal__text { color: var(--p-muted, #a6a094); font-size: var(--t-small); margin: 0; }
.modal__check { display: flex; align-items: center; gap: var(--s-2); color: var(--p-ink, #f1ede4); font-size: var(--t-small); }
.modal__msg { min-height: 1.2em; font-size: var(--t-small); color: var(--p-accent, #c9b488); margin: 0; }
.modal__msg.is-error { color: #ff8a8a; }
.modal__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.modal__label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-small); color: var(--p-muted, #a6a094); margin-top: var(--s-3); }
.friend-list, .room-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: var(--s-2); max-height: 40vh; overflow: auto; }
.friend-list li, .room-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--p-bg, #0c0c0d); border-radius: 8px; font-size: var(--t-small); }
.friend-list button, .room-list button { font-size: var(--t-small); }
@media (max-width: 639px) {
  .modal__panel { width: 100%; padding: var(--s-4); }
  .modal__row { flex-direction: column; align-items: stretch; }
}

/* ---- guest acknowledgment banner ---- */
.guest-banner {
  position: sticky; top: 0; z-index: 900;
  margin: 0; padding: var(--s-3) var(--s-4);
  background: color-mix(in oklab, var(--p-accent, #c9b488) 12%, var(--p-surface, #161618));
  border-bottom: 1px solid color-mix(in oklab, var(--p-accent, #c9b488) 30%, transparent);
  color: var(--p-ink, #f1ede4);
  font-size: var(--t-small);
  text-align: center;
}
.guest-banner a { color: var(--p-accent, #c9b488); }

/* ---- friends panel polish ---- */
.friend-meta { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.friend-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; flex: 0 0 8px; }
.friend-dot.online { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.friend-status { font-size: 10px; color: var(--p-muted, #a6a094); text-transform: uppercase; letter-spacing: .08em; }
.friend-invite { margin-left: auto; }
.friend-list li { flex-wrap: wrap; }
@media (max-width: 639px) {
  .modal { padding: var(--s-2); align-items: flex-end; }
  .modal__panel { max-height: 85vh; border-radius: 12px 12px 0 0; padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .modal__row { flex-direction: column; align-items: stretch; }
  .friend-list li { gap: var(--s-2); }
}
@media (pointer: coarse) {
  .modal__close { min-width: 44px; min-height: 44px; }
  .modal__form input, .modal__label select { font-size: 16px; padding: var(--s-3); }
}