/* ---- Global reset: lock the app to the screen, no page scrolling/zooming ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;             /* the <main> feed does the moving, not the page */
  overscroll-behavior: none;    /* stop the browser's pull-to-refresh getting in the way */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- The feed: a vertical column of full-screen game cards ----
   NAVIGATION MODEL (like Playabl): each game is letterboxed onto a black
   card, so it looks full-screen but leaves black gutters. A touch ON the
   game goes to the game (its iframe captures it). A swipe that STARTS in
   the black gutter is seen here and navigates the feed, TikTok-style.
   We move the feed from JS (pointer capture), so the feed never scrolls
   on its own — hence touch-action: none. */
#feed {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;             /* we move #track by transform, not native scroll */
  touch-action: none;
}
/* The stack of cards we slide up/down with a transform. */
#track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---- One game card = exactly one screen ----
   Laid out as a column: the game area on top, the social bar BELOW it.
   The bar never overlaps the game, so nothing is covered and the whole
   play area stays tappable. */
.card {
  position: relative;
  height: var(--vh, 100vh);     /* exactly one screen tall (set from JS) */
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
}

/* The area that holds the game. Fills all space above the bar; the black
   around the letterboxed stage is a swipe zone. */
.card .stagewrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- The letterboxed stage that actually holds the game ---- */
.card .stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100%;            /* never taller than the game area */
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}

/* The game itself lives in an iframe so each game is fully sandboxed. */
.card .stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0a0a0a;
}
/* Network (aggregated) games are the play surface themselves: keep the browser
   from hijacking touches over them for pan/zoom so drags reach the game.
   Safe because feed-swiping happens in the gutters/social bar, not the game. */
.card[data-external="1"] .stage iframe { touch-action: none; }

/* A lightweight placeholder shown before a game's iframe is loaded. */
.card .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(circle at 50% 40%, #1c1c28, #050507);
  transition: opacity .35s ease;
}
.card .placeholder.hidden { opacity: 0; pointer-events: none; }
.card .placeholder .spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Boot overlay: shown while the first games load from the sources ---- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at 50% 40%, #1c1c28, #050507);
  color: #fff;
  transition: opacity .4s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot .spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
#boot .boot-msg { font-size: 14px; opacity: .8; text-align: center; line-height: 1.5; }

/* ---- Bottom social rail (Playabl/TikTok mobile style) ----
   Lives in the bottom black gutter. Buttons are tappable; swiping the
   empty space around them navigates the feed. */
.card .social {
  flex-shrink: 0;              /* a real bar below the game, not an overlay */
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: #000;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Row 1: stats — views on the left, action buttons on the right. */
.card .social .stats {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
}
.card .social .stats .views {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; opacity: .8;
  margin-right: auto;                 /* pushes the actions to the right edge */
}
.card .social .act {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: #fff;
  line-height: 1;
}
.card .social .act .count { font-size: 14px; opacity: .9; font-weight: 600; }
.card .social .act.liked { color: #ff3b6b; }
.card .social .act.bookmark.on { color: #ffd84d; }

/* Material icon sizing */
.card .social .ic { display: block; }
.card .social .stats .ic { width: 26px; height: 26px; }
.card .social .stats .views .ic { width: 22px; height: 22px; }
.card .social .creator .round .ic { width: 22px; height: 22px; }

/* Row 2: creator — avatar + name on the left, round buttons on the right. */
.card .social .creator { display: flex; align-items: center; gap: 10px; }
.card .social .creator .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #0a0a0a;
  background: linear-gradient(135deg, #25f4ee, #ff3b6b);
}
.card .social .creator .info { min-width: 0; margin-right: auto; }
.card .social .creator .info h2 {
  font-size: 17px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .social .creator .info p { font-size: 12.5px; opacity: .7; margin-top: 2px; }
.card .social .creator .rounds { display: flex; gap: 10px; flex-shrink: 0; }
.card .social .creator .round {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: none; color: #fff;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.card .social .creator .round:active { background: rgba(255,255,255,.28); }

/* ---- Start hint that fades after the first swipe ---- */
#swipe-hint {
  position: fixed;
  left: 0; right: 0;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  opacity: .9;
  pointer-events: none;
  transition: opacity .5s ease;
}
#swipe-hint.gone { opacity: 0; }
#swipe-hint .chev {
  font-size: 24px;
  line-height: 1;
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}