/* Red Pepe Rocket V2 platform adapter styles. Only the adapter's own elements; the game's canvas/CSS are untouched. */
.pg-bar { position: fixed; left: max(6px, env(safe-area-inset-left, 0px)); top: max(6px, env(safe-area-inset-top, 0px)); z-index: 5; display: flex; align-items: center; gap: 6px; font-family: "Press Start 2P", ui-monospace, monospace; pointer-events: none; user-select: none; -webkit-user-select: none; }
.pg-badge { padding: 3px 5px; font-size: 7px; line-height: 1; color: #0b1020; background: #ffc83d; }
.pg-btn { pointer-events: auto; font: inherit; font-size: 7px; line-height: 1; padding: 4px 6px; color: #0b1020; background: #cfe3ff; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; touch-action: manipulation; opacity: 0.85; }
.pg-btn:focus-visible { outline: 2px solid #ffc83d; outline-offset: 1px; }
.pg-hide { display: none !important; }
.pg-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); transform: translateX(-50%); z-index: 6; max-width: min(94vw, 520px); box-sizing: border-box; padding: 5px 8px; background: rgba(15, 39, 72, 0.92); border: 1px solid #3b5bdb; color: #e8f0ff; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 7px; line-height: 1.5; text-align: center; pointer-events: none; }
@media (min-width: 1024px) and (min-height: 600px) { .pg-btn { font-size: 11px; padding: 6px 9px; } .pg-badge { font-size: 10px; padding: 4px 7px; } .pg-toast { font-size: 11px; padding: 8px 12px; } }
/* narrow screens: the game HUD (pause/sound/timer) starts right under the notch; keep the adapter bar in the thin strip above it */
@media (max-width: 700px) { .pg-bar { top: max(1px, env(safe-area-inset-top, 0px)); gap: 3px; } .pg-badge { font-size: 6px; padding: 2px 3px; } .pg-btn { font-size: 6px; padding: 2px 4px; } }
/* guest notice: shown on the menu BEFORE a run starts (signed-out visitors only) */
.pg-guest { position: fixed; left: max(6px, env(safe-area-inset-left, 0px)); top: calc(max(6px, env(safe-area-inset-top, 0px)) + 24px); z-index: 5; width: max-content; max-width: max(160px, min(340px, calc((100vw - 360px) / 2 - 12px))); box-sizing: border-box; padding: 5px 8px; background: rgba(15, 39, 72, 0.92); border: 1px solid #ffc83d; color: #e8f0ff; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 7px; line-height: 1.6; text-align: left; pointer-events: none; }
/* the notice lives in the top-left strip (never over the menu footer or the bottom toast); it is hidden while a run is on screen or a toast is up */
.pg-guest b { color: #ffc83d; font-weight: 400; }
@media (min-width: 1024px) and (min-height: 600px) { .pg-guest { font-size: 11px; padding: 8px 12px; top: calc(max(6px, env(safe-area-inset-top, 0px)) + 34px); } }
@media (max-width: 700px) { .pg-guest { font-size: 6px; padding: 3px 5px; top: calc(max(1px, env(safe-area-inset-top, 0px)) + 16px); max-width: min(94vw, 330px); } }
/* toast fallback: when the bottom-centre spot would cover the menu footer, it moves to the same top-left strip as the guest notice */
.pg-toast.pg-top { left: max(6px, env(safe-area-inset-left, 0px)); bottom: auto; top: calc(max(6px, env(safe-area-inset-top, 0px)) + 24px); transform: none; width: max-content; max-width: max(160px, min(340px, calc((100vw - 360px) / 2 - 12px))); text-align: left; }
@media (min-width: 1024px) and (min-height: 600px) { .pg-toast.pg-top { top: calc(max(6px, env(safe-area-inset-top, 0px)) + 34px); } }
@media (max-width: 700px) { .pg-toast.pg-top { top: calc(max(1px, env(safe-area-inset-top, 0px)) + 16px); max-width: min(94vw, 330px); } }
/* leaderboard panel */
.pg-panel { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(15, 39, 72, 0.72); font-family: "Press Start 2P", ui-monospace, monospace; color: #e8f0ff; }
.pg-card { box-sizing: border-box; width: min(94vw, 460px); max-height: 88dvh; overflow: auto; background: #0e1530; border: 2px solid #3b5bdb; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 8px; line-height: 1.5; }
.pg-h { font-size: 10px; color: #ffc83d; }
.pg-sub { opacity: 0.7; font-size: 6px; }
.pg-pb { padding: 6px; background: #17224a; color: #9fe8b4; }
.pg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; background: #121b3b; }
.pg-list li.pg-you { outline: 1px solid #ffc83d; }
.pg-list .pg-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-list i { font-style: normal; opacity: 0.8; }
.pg-list li.pg-empty { display: block; opacity: 0.8; }
.pg-close { align-self: flex-end; font-size: 8px; padding: 6px 10px; }
/* Shared game header (public/game-nav): identity pill + Ranks live there (the bundle's own "LOGGED IN AS" box is replaced by it). Inside the Telegram frame the
   wrapper owns the header, so only our action buttons stay in the old top-left bar. */
html[data-pgh] .slot-user, html[data-pgh] .pg-btn[data-pg-ranks], html[data-pgh] [data-pg-signin] { display: none !important; }
/* header fixed over the top of the page (web): the game's #app starts below it; notices that sat in the old top strip follow */
html[data-pgh="web"] #app { top: var(--pgh-h, 0px) !important; }
html[data-pgh="web"] .pg-guest, html[data-pgh="web"] .pg-toast.pg-top { top: calc(var(--pgh-h, 0px) + 6px) !important; }
html[data-pgh="web"] .pgh__actions .pg-bar { position: static; display: contents; }
/* the ONE shared footer (.pgf, built by public/game-nav/game-nav.js) replaces the bundle's own "BROUGHT TO YOU BY" slot: it sits in reserved space below the game (#app ends above it) */
html[data-pgf] #ui .slot-brand { display: none !important; }
html[data-pgf] #app { bottom: var(--pgf-reserve, 36px) !important; padding-bottom: 0 !important; }
html[data-pgf] .pg-toast { bottom: calc(var(--pgf-reserve, 36px) + 6px); }

/* shared header: the action row keeps "PRACTICE" (the guest notice below says runs are not ranked), so the header stays at two rows on phones */
.pgh__actions .pg-un { display: none; }

/* PORTRAIT-ONLY overlay (touch devices held in landscape; see "PORTRAIT ONLY" in platform.js). Light + blue like the rest of the site: values of
 * components/pepinho-ui/tokens.css (--pg-bg-base / --pg-yellow navy / --pg-gold), with the same literals as fallback because the game page does not load that file. */
html.rocket2-rotated .pgh, html.rocket2-rotated .pgn-root, html.rocket2-rotated .pgf, html.rocket2-rotated .pg-bar, html.rocket2-rotated .pg-toast, html.rocket2-rotated .pg-guest { visibility: hidden !important; }
.rocket2-rot { position: fixed; inset: 0; z-index: 2147483647; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: max(16px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); background: var(--pg-bg-base, #f5f7fc); color: var(--pg-yellow, #183b73); text-align: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: auto; }
.rocket2-rot__icon { display: grid; place-items: center; width: 72px; height: 72px; color: var(--pg-yellow, #183b73); }
.rocket2-rot__title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; color: var(--pg-yellow, #183b73); }
.rocket2-rot__text { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.4; color: var(--pg-text-muted, rgba(32, 43, 64, .72)); }
.rocket2-rot__cta { display: inline-block; margin-top: 4px; padding: 11px 24px; border-radius: 999px; background: var(--pg-gold, #ffc83d); color: var(--pg-yellow, #183b73); font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 2px 0 rgba(24, 59, 115, .25); }