/* The platform home (index.html). Tokens and the shared pieces (brand logo, eyebrow, language toggle,
   app frame, desk note) come from styles.css, so the home and the games stay one visual system. */

.portal-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(260px, 360px);
  place-content: center;
  align-items: center;
  gap: clamp(44px, 8vw, 120px);
  padding: 34px;
  overflow: hidden;
  position: relative;
}

.portal-shell::before {
  content: "";
  position: fixed;
  width: 42vw;
  height: 42vw;
  min-width: 520px;
  min-height: 520px;
  left: -20vw;
  bottom: -30vw;
  border: 1px solid rgba(17, 21, 28, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(17, 21, 28, 0.025), 0 0 0 144px rgba(17, 21, 28, 0.018);
  pointer-events: none;
}

.portal-screen { height: 100%; overflow-y: auto; padding: 64px 20px 26px; scrollbar-width: none; }
.portal-screen::-webkit-scrollbar { display: none; }
.portal-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.portal-topbar .language-toggle { min-width: 88px; }
.portal-intro { display: none; }

.game-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.game-card {
  position: relative;
  min-height: 88px;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}
.game-card--live { box-shadow: 0 4px 18px rgba(17, 21, 28, 0.06); transition: transform 150ms ease, box-shadow 150ms ease; }
/* The same easy-to-hard accent as the game's daily card. */
.game-card--live::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--green), var(--amber) 55%, var(--red)); }
.game-card--live:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(17, 21, 28, 0.09); }
.game-card--live:active { transform: translateY(1px); }
.game-card--live:focus-visible { outline: 3px solid rgba(5, 150, 105, 0.25); outline-offset: 2px; }
.game-card--soon { background: rgba(255, 255, 255, 0.55); cursor: default; }
.game-card__icon { flex: none; display: block; width: 56px; height: 56px; }
.game-card__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.game-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.game-card__title strong { font-size: 1.08rem; line-height: 1.25; }
.game-card--soon .game-card__title strong { color: rgba(17, 21, 28, 0.78); }
.game-card__copy { color: var(--muted); font-size: 0.86rem; line-height: 1.45; text-wrap: pretty; }
.soon-badge { padding: 4px 8px; border-radius: 999px; background: rgba(17, 21, 28, 0.07); color: var(--muted); font: 500 0.6rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.game-card__go { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 7px 16px rgba(17, 21, 28, 0.16); transition: background 150ms ease; }
.game-card__go svg { width: 16px; height: 16px; display: block; }
.game-card--live:hover .game-card__go { background: #232a35; }

/* Opening a game: the exit the game plays when it moves to its next screen (keyframes in styles.css). */
.portal-shell.is-leaving .portal-screen,
.portal-shell.is-leaving .portal-note { pointer-events: none; animation: screen-out-left 180ms ease-in forwards; }
/* Coming back from a game through its logo: the entrance of returning to a home screen. */
.is-returning .portal-screen,
.is-returning .portal-note { animation: screen-in-left 340ms cubic-bezier(.2, .8, .2, 1) both; }

/* The heading here is two short lines, so it can run larger than the game's three-line tagline. */
.portal-note h2 { font-size: min(4rem, 100cqi / 5.6); }
:root:lang(en) .portal-note h2 { font-size: min(4rem, 100cqi / 6.4); }

@media (max-width: 820px) {
  .portal-shell { display: block; min-height: 100dvh; padding: 0; }
  .portal-shell::before { display: none; }
  .portal-shell .app-frame { height: auto; min-height: 100dvh; background: var(--canvas); }
  .portal-screen { height: auto; overflow: visible; padding: max(24px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom)); }
  .portal-topbar { justify-content: flex-end; }
  .portal-topbar .brand-logo { display: none; }
  .portal-intro { display: block; margin-top: 50px; container-type: inline-size; }
  .brand-logo--intro { width: min(250px, 76vw); margin-bottom: 28px; transform: translateY(-12px); }
  .portal-title { margin: 14px 0 0; font-size: min(3.5rem, 100cqi / 5.6); line-height: 0.94; letter-spacing: -0.06em; white-space: nowrap; }
  :root:lang(en) .portal-title { font-size: min(3.5rem, 100cqi / 6.4); }
  .game-list { margin-top: 30px; }
}

@media (max-width: 380px) {
  .portal-screen { padding-left: 16px; padding-right: 16px; }
}