/* A Hiro game page: the game in a frame with full screen and theater mode, its store and leaderboard, more games. */
body.gamepage { padding-bottom: 100px; }
.pl-top { display: flex; align-items: center; gap: 16px; max-width: 1480px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-left, 0px)) 10px; }
.pl-home { display: inline-flex; align-items: center; gap: 8px; font: italic 900 20px/1 var(--display); text-transform: uppercase; }
.pl-home img { width: 28px; height: 28px; }
.pl-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--mist); font-size: 15px; }
.pl-crumbs a:hover { color: var(--fur); }
.pl-crumbs b { color: var(--fur); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pl-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; max-width: 1480px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)); }
.pl-stage { min-width: 0; }

.pl-frame { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 190px); width: 100%; margin: 0 auto; overflow: hidden; border-radius: 18px; background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.pl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pl-frame:fullscreen { max-height: none; border-radius: 0; border: 0; }
.pl-frame:-webkit-full-screen { max-height: none; border-radius: 0; border: 0; }

.pl-splash { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.pl-splash-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(0.45) saturate(1.3); }
.pl-splash-in { position: relative; display: grid; justify-items: center; gap: 10px; padding: 20px; text-align: center; }
.pl-splash-art { width: min(340px, 52vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); }
.pl-splash h1 { margin: 6px 0 0; font: italic 900 clamp(30px, 4.4vw, 54px)/1 var(--display); text-transform: uppercase; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.12em; }
.pl-splash p { margin: 0; color: #d6d9de; max-width: 520px; }
.pl-play { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 15px 34px 15px 28px; border: 0; border-radius: 999px; background: var(--chrome); color: #07080b;
  font: italic 900 22px/1 var(--display); text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18); transition: transform 0.12s, box-shadow 0.2s; }
.pl-play svg { width: 26px; height: 26px; }
.pl-play:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 40px rgba(255, 255, 255, 0.3); }
.pl-free { color: var(--mist); font-size: 13px; }

.pl-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: rgba(59, 209, 127, 0.12); border: 1px solid rgba(59, 209, 127, 0.4); }
.pl-ready[hidden] { display: none; }

.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.pl-icon { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.pl-name { display: grid; min-width: 0; flex: 1; }
.pl-name b { font: italic 800 22px/1.1 var(--display); }
.pl-name small { color: var(--mist); font-size: 14px; }
.pl-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--fur); font: 600 15px var(--body); cursor: pointer; transition: background 0.15s; }
.pl-btn:hover { background: rgba(255, 255, 255, 0.14); }
.pl-btn img, .pl-btn svg { width: 20px; height: 20px; }
.pl-btn.icon { padding: 10px; }
.pl-btn kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); font: 600 11px var(--body); color: var(--mist); }

.pl-about { margin-top: 18px; padding: 4px 4px 0; max-width: 860px; }
.pl-about h2 { margin: 0 0 8px; font: italic 800 28px/1.1 var(--display); }
.pl-about p { margin: 0 0 10px; color: #cfd2d8; font-size: 17px; line-height: 1.6; }
.pl-about a { color: var(--eye); font-weight: 600; }
.pl-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.pl-facts li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #cfd2d8; font-size: 14px; }

.pl-rail h2 { margin: 0 0 10px; font: italic 800 22px/1.1 var(--display); }
.pl-more { display: grid; gap: 10px; }
.pl-more a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: 14px; transition: background 0.15s; }
.pl-more a:hover { background: rgba(255, 255, 255, 0.06); }
.pl-more img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.pl-more b { display: block; font-weight: 600; }
.pl-more small { color: var(--mist); font-size: 13px; }

body.gamepage.theater .pl-main { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.gamepage.theater .pl-frame { max-height: calc(100vh - 150px); border-radius: 12px; }
body.gamepage.theater .pl-rail .pl-more { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 1000px) {
  .pl-main { grid-template-columns: minmax(0, 1fr); }
  .pl-more { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .pl-top { gap: 10px; }
  .pl-home span, .pl-crumbs a, .pl-crumbs span { display: none; }
  .pl-frame { aspect-ratio: 4 / 5; max-height: 70vh; }
  .pl-splash-art { width: 70vw; }
  .pl-btn { padding: 9px 11px; font-size: 14px; }
  .pl-btn kbd, #theater { display: none; }
  .pl-icon { width: 44px; height: 44px; }
}

/* The game's store: a list inside the frame (so it shows in full screen too); each item opens Hiro's purchase popup. */
.pl-store-dlg { width: min(460px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; background: #0f1117; color: var(--fur); }
.pl-store-dlg::backdrop { background: rgba(3, 4, 8, 0.6); backdrop-filter: blur(4px); }
.pl-store-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pl-store-head b { font: italic 900 22px/1 var(--display); text-transform: uppercase; }
.pl-store-list { display: grid; gap: 8px; }
.pl-store-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.04); color: var(--fur); font: inherit; text-align: left; cursor: pointer; }
.pl-store-item:hover { border-color: rgba(255, 255, 255, 0.4); }
.pl-store-item b { display: block; font-weight: 600; }
.pl-store-item small { display: block; color: var(--mist); font-size: 13px; }
.pl-store-price { display: inline-flex; align-items: center; gap: 6px; flex: none; font: italic 800 18px/1 var(--display); }
.pl-store-price img { width: 20px; height: 20px; }
.pl-store-note { margin: 12px 0 0; color: var(--mist); font-size: 13px; }
.pl-store-note a { color: var(--eye); }

#fav[aria-pressed='true'] { color: #ff5f8a; border-color: rgba(255, 95, 138, 0.5); background: rgba(255, 95, 138, 0.12); }
#fav[aria-pressed='true'] path { fill: currentColor; }