/* Content-only refresh. The solid header, safe area and native overscroll
   backdrop remain owned by mobile-shell.css. */
.app-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; border-bottom: 0; }
.wordmark { justify-self: center; display: block; font-size: clamp(23px, 4vw, 31px); font-weight: 650; letter-spacing: .23em; text-indent: .23em; line-height: 1; }
.header-controller { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.header-controller .icon { width: 38px; height: 38px; }
.app-header .profile-chip { padding: 0; width: 44px; height: 44px; border: 0; background: transparent; margin: 0; }
.app-header .profile-chip > span { display: none; }
#home-view { position: relative; isolation: isolate; }
.welcome { height: 270px; }
.welcome-art { inset: 0 0 0 auto; width: min(100%, 730px); height: 100%; object-fit: cover; object-position: center; }
.welcome-copy h1 { font-weight: 750; letter-spacing: -.04em; }
.welcome-copy p { color: #a8c1e7; }
.game-card { border-color: #345793; background: #071322; box-shadow: inset 0 1px 0 #7487ff20; }
.game-card .game-image { mask-image: linear-gradient(#000 85%, #000e); }
.game-art { display: block; width: 100%; overflow: hidden; }
.game-card[data-game="chess"] .game-image { transform: scale(1.45); }
.game-card[data-game="dice-game"] .game-image { transform: scale(1.25); }
.game-copy { padding-top: 4px; }
.game-status { color: #9dbbe1; }
@media (max-width: 700px) {
  .welcome { height: 142px; margin-top: 8px; }
  .welcome-art { width: 100%; height: 180px; top: -8px; right: 0; object-fit: cover; object-position: center; mask-image: linear-gradient(transparent, #000 12%, #000 74%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 74%, transparent); }
  .welcome-copy { justify-content: flex-start; padding-top: 34px; }
  .welcome-copy h1 { font-size: clamp(1.3rem, 5.9vw, 1.8rem); max-width: 70%; }
  .welcome-copy p { font-size: clamp(.72rem, 3.15vw, .95rem); margin-top: 7px; max-width: 65%; white-space: nowrap; }
  .featured-section .section-heading { margin: 0 0 8px; }
  #home-view h2 { font-size: 1.08rem; font-weight: 650; }
  .featured-card { height: auto; aspect-ratio: 1.91; border-color: #3865b5; border-radius: 17px; }
  .featured-card > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 42%; opacity: 1; transform: scale(1.35); transform-origin: 50% 30%; }
  .featured-copy { padding: 18px 13px 10px; background: linear-gradient(transparent, #05102275 48%, #06101fbd); }
  .featured-name { font-size: 1.06rem; }
  .featured-description { font-size: .74rem; margin-top: 4px; color: #aac5ed; }
  .coming-badge { top: 10px; right: 10px; background: #091a31de; border: 1px solid #365788; border-radius: 9px; padding: 6px 9px; color: #bad8fb; }
  .library .section-heading { margin: 18px 0 7px; }
  .game-grid { gap: 7px; }
  .game-card { border-radius: 13px; }
  .game-image { aspect-ratio: 1.42; }
  .game-copy { padding: 3px 7px 9px; }
  .game-name { font-size: .78rem; }
  .game-status { font-size: .68rem; }
  .home-footer { display: none; }
}
@media (max-width: 360px) {
  .welcome { height: 135px; }
  .welcome-copy { padding-top: 32px; }
  .featured-description { font-size: .65rem; }
  .game-name { font-size: .69rem; }
  .game-status { font-size: .6rem; }
}
/* Ramp Riot is playable directly; its card remains inside the shared library. */
.game-card[data-game="ramp-riot"] .game-art { background: #9cc6dc url('/games/ramp-riot/assets/quarry.png') center 65% / cover; }
.game-card[data-game="ramp-riot"] .game-image { object-fit: contain; padding: 8px; }
.game-card[data-game="ramp-riot"] .game-status { color: #c3e88d; }

/* The game occupies the viewport while the authenticated Arcade room stays mounted. */
body.game-open { overflow: hidden; min-height: 100dvh; background: #071229; }
.app-shell.playing { display: block; }
.app-shell.playing > :not(#connect-four-view) { display: none; }
#connect-four-view { position: fixed; inset: 0 0 auto; height: 100dvh; z-index: 35; background: #071229; }
#connect-four-view iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-launch-status { display: grid; place-items: center; height: 100%; color: #bfd3ed; font-size: 14px; }