/* Phones and other touch screens. Loaded last so it wins over the theme.
   - Text fields are 16px: iOS Safari zooms the whole page into any field smaller than that on focus.
   - Anything you tap gets at least ~40px of height (Apple and Google ask for 44/48; 40 keeps the retro layout).
   - Small labels stay readable (12px minimum outside the pixel font). */

@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea,
  .search input, .field input, .field textarea, .field select, .input, .select, .textarea { font-size: 16px; }
  /* the header search keeps its compact placeholder, only typed text is 16px */
  .search input::placeholder { font-size: 14px; }

  .btn-sm { height: auto; min-height: 40px; }
  .btn-icon.btn-sm { width: 40px; }
  .tbtn { height: 40px; min-width: 40px; }
  .section-head .more { min-height: 36px; display: inline-flex; align-items: center; }

  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }

  /* footer links: a finger-sized row instead of 20px text */
  .site-footer .in { row-gap: 0; column-gap: var(--s-5, 20px); }
  .site-footer a, .site-footer .foot-lang button { display: inline-flex; align-items: center; min-height: 44px; }

  /* no grey flash on every tap; double-tap-to-zoom delay off on controls */
  a, button, .btn, .tbtn, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

@media (max-width: 760px) {
  .tag { font-size: 12px; }
  .gg-ad-tag { font-size: 12px; }
  .eyebrow, .hero-body .kicker, .stage-cover .note { font-size: 11px; line-height: 1.5; }

  /* long URLs in legal pages and comments must not push the page sideways */
  .prose, .prose a, .comment, .msg { overflow-wrap: anywhere; }
  main img, main video { max-width: 100%; }
}

/* iPhone notch / home bar when the page runs full-width (viewport-fit=cover is set) */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 900px) {
    .topbar { padding-left: max(var(--gutter, 16px), env(safe-area-inset-left)); padding-right: max(var(--gutter, 16px), env(safe-area-inset-right)); }
    .site-footer { padding-bottom: calc(var(--s-8, 32px) + env(safe-area-inset-bottom)); }
  }
}

/* Touch: native disclosure rows (FAQ, "Forgot your password?") get a finger-sized row */
@media (pointer: coarse) {
  summary { padding-block: 10px; }
}

/* Narrow phones (iPhone SE and similar) */
@media (max-width: 760px) {
  /* grids that used `1fr` grew to their content's min width and pushed the /extension page sideways */
  .two-col, .guide-hero { grid-template-columns: minmax(0, 1fr); }
  .two-col > *, .guide-hero > * { min-width: 0; }
  .ext-status { min-width: 0; }
  .hotkey { flex-wrap: wrap; row-gap: 6px; }
  .hotkey .keys { min-width: 0; flex-wrap: wrap; }
}
@media (max-width: 400px) {
  /* the header search is only a few px wide here: while typing it spreads over the whole header */
  .search:focus-within { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
    left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px)); right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)); max-width: none; }
  .search-kbd { display: none; }
}

/* Phones: the browser toolbar makes 100vh taller than what you see; use the visible height instead. */
@supports (height: 100dvh) {
  main { min-height: calc(100dvh - var(--top)); }
  .reels-feed, .reel { height: calc(100dvh - var(--top)); }
  .messages-page { height: calc(100dvh - var(--top) - 90px); }
  .auth-page { min-height: calc(100dvh - var(--top) - 40px); }
  .modal { max-height: calc(100dvh - 32px); }
  .stage { width: min(100%, calc((100dvh - var(--top) - 120px) * 16 / 9)); }
  .stage.vertical { height: calc(100dvh - var(--top) - 120px); }
  @media (max-width: 900px) { .stage.vertical { height: calc(100dvh - var(--top) - 80px); } }
}

/* Phones: the game opens over the whole screen (game.js adds .immersive). iPhone Safari has no element
   fullscreen, so this fixed frame is the fullscreen there; elsewhere it sits inside real fullscreen. */
html.gg-immersive, html.gg-immersive body { overflow: hidden; overscroll-behavior: none; }
.stage.immersive {
  position: fixed; inset: 0; z-index: 1000; margin: 0;
  width: 100vw; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto;
  transition: none; background: #000;
}
.stage.immersive iframe {
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.stage-exit {
  position: absolute; z-index: 2;
  top: max(8px, env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px));
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; border: 2px solid rgba(255, 255, 255, .35); opacity: .75;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.stage-exit svg { width: 16px; height: 16px; fill: currentColor; }
.stage-rotate {
  position: absolute; z-index: 2; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 8px 14px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 14px; white-space: nowrap; pointer-events: none;
  display: none;
}
@media (orientation: portrait) { .stage-rotate { display: block; } }

/* Phone browsers can't run the recorder extension, so its Rec button only shows once it is really there. */
@media (pointer: coarse) and (hover: none) {
  .rec-btn:not(.ready):not(.recording) { display: none; }
}

/* ================= review fixes (game dev / game design / UX, 2026-11-06) ================= */

/* search.js positions its results under the box; giving it a position here keeps that out of inline styles */
.search { position: relative; }
#app:focus { outline: none; }

/* loader and error pages from the router (app.js) */
.page-loading { display: grid; place-items: center; min-height: 40vh; }
.empty-page { display: grid; justify-items: center; gap: var(--s-4, 16px); padding: var(--s-10, 40px) var(--s-5, 20px); }
.empty-page img { image-rendering: pixelated; }
.empty-page h2 { font-size: 18px; text-transform: none; }
.empty-page .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* text links: #7C5CFF was 3.8:1 on the dark panels */
.auth-forgot summary, .switch a, .auth-forgot a, .empty a:not(.btn), .device-note a { color: #A08AFF; }
html .gg-ad-stub a { color: #A08AFF; } /* billing.css is added by ads.js after this file */

/* off-theme rounded bits (feature sheets load after the theme, hence html) */
html .bill-badge, html .bill-save, html .dz-ic, html .tips div { border-radius: 0; }
html .co-chip { border-radius: 0; border: 2px solid var(--px-edge); box-shadow: 3px 3px 0 #000; position: relative; }
html .co-chip.co-due::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; background: var(--px-green); box-shadow: 2px 2px 0 #000; }
@media (prefers-reduced-motion: no-preference) { html .co-chip.co-due::after { animation: soon-blink 1.2s steps(1) 6; } }

/* game cards: "Best on PC" on touch screens */
.game-card .pc-badge { position: absolute; left: 8px; top: 8px; font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 7px; background: #000; color: var(--px-text-2); border: 2px solid var(--px-edge); }
.device-note { margin: 16px 0 0; padding: 12px 14px; border: 2px dashed var(--px-edge); color: var(--px-text-2); font-size: 14px; }
.more-games .grid { margin-top: 4px; }

/* ---------- game stage ---------- */
/* vertical 9:16 frame: sized from the height but never wider than the column (it used to overflow by 40px) */
.stage.vertical { height: auto; max-height: none; width: min(100%, calc((100vh - var(--top) - 120px) * 9 / 16), 506px); }
@supports (height: 100dvh) { .stage.vertical { width: min(100%, calc((100dvh - var(--top) - 120px) * 9 / 16), 506px); } }
@media (max-width: 760px) {
  .stage.vertical { width: min(100%, calc((100vh - var(--top) - 80px) * 9 / 16)); }
  @supports (height: 100dvh) { .stage.vertical { width: min(100%, calc((100dvh - var(--top) - 80px) * 9 / 16)); } }
}
/* real fullscreen of the vertical frame, and the phone full-screen frame (.immersive above) stay full size */
.stage:fullscreen, .stage.vertical:fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.stage.immersive.vertical { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; }
@supports (height: 100dvh) { .stage.immersive.vertical { height: 100dvh; } }
/* phone turned sideways: the header scrolls away and the game takes the height (was 23% of the screen) */
@media (orientation: landscape) and (max-height: 500px) {
  body:has(#stage) .topbar { position: static; }
  body:has(#stage) main { padding-top: 0; }
  .stage { width: min(100%, calc((100vh - 76px) * 16 / 9)); }
  @supports (height: 100dvh) { .stage { width: min(100%, calc((100dvh - 76px) * 16 / 9)); } }
}
@media (max-width: 340px) { .toolbar .t-title b { display: none; } }

/* ---------- Plays feed ---------- */
.reels-feed { overscroll-behavior-y: contain; }
body.is-feed .site-footer { display: none; }
.reel-end { display: grid; place-items: center; text-align: center; }
.reel-end-in { display: grid; justify-items: center; gap: 12px; padding: 24px; }
.reel-end-in p { color: var(--px-text-2); margin: 0; }
.sound-pill { position: fixed; z-index: 40; left: 50%; top: calc(var(--top) + 16px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; background: #000; color: var(--px-text); border: 2px solid var(--px-edge); box-shadow: 3px 3px 0 #000;
  font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; }
.sound-pill svg { width: 16px; height: 16px; fill: currentColor; }
.sound-pill[hidden] { display: none; }

/* ---------- phone drawer ---------- */
html.rail-lock, html.rail-lock body { overflow: hidden; }
@media (max-width: 900px) { .rail-item { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .rail, body.rail-open .rail { transition: none; } }

@media (max-width: 760px) {
  /* header search: a 40px button that opens across the header when tapped (it was 10–70px wide) */
  .search { flex: 0 0 40px; width: 40px; margin-left: auto; padding: 0; justify-content: center; }
  .search input { position: absolute; inset: 0; width: 100%; opacity: 0; }
  .search:focus-within { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); width: auto; max-width: none; padding: 0 10px; justify-content: flex-start; }
  .search:focus-within input { position: static; opacity: 1; flex: 1; }
  html .gg-sr { border-radius: 0; border: 3px solid var(--px-edge); background: #0E0F19; box-shadow: 6px 6px 0 #000; }
  html .gg-sr a { min-height: 48px; border-radius: 0; }

  /* home and genre grids: two games per row instead of one huge card each */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .game-card .info { padding: 8px 10px 10px; }
  .game-card h3 { font-size: 13px; line-height: 1.3; }
  .game-card .tags { display: none; }

  /* rows with a spacer: wrapped items no longer jump to the far side */
  .site-footer .sp { flex-basis: 100%; height: 0; }
  .page-head .sp { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  summary, .auth-forgot summary, .switch a, .empty a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .genre-chip { min-height: 44px; }
  .me-btn { width: 40px; height: 40px; place-items: center; }
  .me-lang button { min-height: 40px; min-width: 40px; }
  html .co-chip { height: 40px; }
}
@media (max-width: 760px) {
  .guide-hero { padding: 20px; }
  .guide-hero h1 { overflow-wrap: anywhere; }
}