/* ===========================================================================
   assets/css/games.css — Games module (listing tiles + the play stage).
   Loaded only by games/*.php and admin/games.php via $extra_head.
   Inherits the site's glass surfaces, theme vars and .sec-games accent.
   =========================================================================== */

/* ---- listing header strip ------------------------------------------------ */
.game-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-radius);
  box-shadow: var(--card-shadow);
}
.game-hero-copy { min-width: 240px; flex: 1 1 320px; }
.game-hero-copy p { color: var(--ink-soft); margin: .35rem 0 0; max-width: 62ch; }
.game-stat-row { display: flex; gap: 1.75rem; }
.game-stat b {
  display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.7rem; line-height: 1.05; color: var(--page-accent, var(--md-accent));
}
.game-stat span { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- tiles --------------------------------------------------------------- */
.game-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.game-tile {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--bs-emphasis-color);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.game-tile:hover, .game-tile:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--g-col, var(--md-accent)) 55%, transparent);
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--g-col, #000) 60%, transparent), var(--card-shadow);
  outline: none;
}
.game-art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 120% at 25% 15%, color-mix(in srgb, var(--g-col, #888) 42%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--g-col, #888) 20%, transparent), transparent 70%);
}
.game-art img { width: 100%; height: 100%; object-fit: cover; }
.game-art-emoji { font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.game-play-badge {
  position: absolute; inset-inline-end: .55rem; inset-block-end: .55rem;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.05rem;
  color: #0a1119; background: var(--g-col, var(--md-accent));
  opacity: 0; transform: scale(.72);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.game-tile:hover .game-play-badge, .game-tile:focus-visible .game-play-badge { opacity: 1; transform: scale(1); }
.game-flag {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem .15rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  background: rgba(8,12,20,.62); color: #ffd76b; backdrop-filter: blur(4px);
}
.game-body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .3rem; }
.game-name { font-weight: 600; line-height: 1.25; }
.game-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .76rem; color: var(--ink-soft); }
.game-meta i { margin-inline-end: .25rem; }
.game-cat { color: color-mix(in srgb, var(--g-col, var(--md-accent)) 78%, var(--bs-body-color)); }
.game-tile-sm .game-art { aspect-ratio: 16 / 10; }
.game-tile-sm .game-art-emoji { font-size: 2.1rem; }
.game-tile-sm .game-body { padding: .55rem .65rem .7rem; }
.game-tile-sm .game-name { font-size: .9rem; }

/* ---- the play stage ------------------------------------------------------ */
.game-stage {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--md-radius);
  background: #0a0f18;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.game-frame {
  display: block; width: 100%; border: 0;
  height: clamp(430px, calc(100vh - 250px), 780px);
  background: #0a0f18;
}
.game-stage.is-full { border-radius: 0; }
.game-stage.is-full .game-frame { height: 100vh; }

.game-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  border-block-end: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
}
.game-bar .game-bar-title { font-weight: 600; font-size: .95rem; margin-inline-end: auto; }
.game-bar .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .84rem; }

/* Loading veil while the game boots */
.game-veil {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; gap: .6rem;
  background: #0a0f18; color: #8b9bb4;
  transition: opacity .45s ease;
}
.game-veil.hide { opacity: 0; pointer-events: none; }
.game-veil-inner { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.game-veil-emoji { font-size: 2.6rem; animation: gameBob 1.4s ease-in-out infinite alternate; }
@keyframes gameBob { to { transform: translateY(-9px); } }

/* Rotate nudge for landscape-first games on narrow screens */
.game-rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  .game-stage[data-orient="landscape"] .game-rotate {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; font-size: .85rem;
    color: #ffd76b; background: rgba(255,178,45,.12);
    border-block-end: 1px solid var(--glass-border);
  }
}

/* Chips under the title on the play page */
.game-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.game-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem .25rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--glass-border); background: var(--glass-hi); color: var(--bs-body-color);
}
.game-chip.accent {
  border-color: color-mix(in srgb, var(--g-col, var(--md-accent)) 55%, transparent);
  color: color-mix(in srgb, var(--g-col, var(--md-accent)) 82%, var(--bs-body-color));
}
.game-howto { color: var(--ink-soft); white-space: pre-line; margin: 0; }

/* ---- admin bits ---------------------------------------------------------- */
.game-admin-thumb {
  width: 54px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.4rem; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--g-col, #888) 34%, transparent), transparent);
  border: 1px solid var(--glass-border);
}
.game-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }