/* Hypackel's design tokens and components. Scripts in /assets/js create some of this markup,
   so its ids and class names are part of their contract. */
:root {
  color-scheme: light dark;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 10px;
  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem;
  --control-height: 40px;
  --page-width: 1200px;
  --duration: 150ms;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #ffffff; --surface: #f4f4f6; --surface-hover: #e9e9ed; --border: #d9d9df;
  --fg: #17171c; --fg-muted: #5c5c68;
  --accent: #2055d5; --on-accent: #ffffff; --accent-hover: #1a47b5; --danger: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111114; --surface: #1c1c21; --surface-hover: #27272e; --border: #33333b;
    --fg: #f2f2f5; --fg-muted: #a4a4b0;
    --accent: #2f6bf0; --on-accent: #ffffff; --accent-hover: #4a7ff3; --danger: #ff8a80;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--text-md)/1.5 var(--font);
  touch-action: manipulation;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--text-xl); line-height: 1.2; font-weight: 600; }
h2 { font-size: var(--text-lg); line-height: 1.3; font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }
a { color: inherit; }
main a:not([class]) { color: var(--accent); }
@media (prefers-color-scheme: dark) { main a:not([class]) { color: var(--accent-hover); } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; z-index: 100; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--fg); }

/* Site header and footer */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }
.site-header-inner, .site-footer-inner { width: min(100% - var(--space-8), var(--page-width)); margin-inline: auto; }
.site-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; text-decoration: none; min-height: var(--control-height); }
.brand img { border-radius: var(--radius-sm); }
.site-header ul, .site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav-link { display: flex; align-items: center; min-height: var(--control-height); padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--fg-muted); text-decoration: none; transition: background-color var(--duration), color var(--duration); }
.nav-link:hover { background: var(--surface); color: var(--fg); }
.nav-link[aria-current="page"] { color: var(--fg); font-weight: 600; }

main { flex: 1; padding: var(--space-8) max(var(--space-4), (100% - var(--page-width)) / 2) var(--space-16); }
main > * + * { margin-top: var(--space-12); }

.site-footer { border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--text-sm); }
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); }
.site-footer .nav-link { min-height: 32px; padding-inline: var(--space-2); }

/* Shared components */
.page-title { display: grid; gap: var(--space-2); }
.muted { color: var(--fg-muted); }
.prose { max-width: 65ch; display: grid; gap: var(--space-3); }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height);
  padding-inline: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration);
}
.button:hover { background: var(--surface-hover); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.link-list a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--space-4); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; font-weight: 500; }
.link-list a:hover { background: var(--surface-hover); }

ins.adsbygoogle { display: block; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* Landing page */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-12); }
.hero-copy { display: grid; gap: var(--space-4); justify-items: start; }
.hero h1 { font-size: var(--text-2xl); line-height: 1.15; text-wrap: balance; }
.lead { font-size: var(--text-lg); line-height: 1.4; color: var(--fg-muted); max-width: 40ch; }
.button.large { min-height: 48px; padding-inline: var(--space-6); }
.game-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.game-tile { display: block; text-decoration: none; }
.game-tile img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: var(--surface); transition: opacity var(--duration); }
.game-tile:hover img { opacity: 0.85; }
.game-tile span { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.request-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
main .request-list a { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); font-weight: 500; text-decoration: none; }
.request-list a:hover { background: var(--surface-hover); }
.request-list img { border-radius: var(--radius-sm); object-fit: cover; }
.notice { display: grid; gap: var(--space-1); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.notice h2 { font-size: var(--text-md); }
@media (max-width: 800px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero h1 { font-size: var(--text-xl); }
  .lead { font-size: var(--text-md); }
  .game-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Games library: #app-list cards come from gms.js */
.library-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.game-count { font-size: var(--text-sm); font-weight: 400; color: var(--fg-muted); margin-left: var(--space-2); }
.search {
  width: min(100%, 360px); min-height: var(--control-height); padding-inline: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit;
}
main > #app-list, .library-games { margin-top: var(--space-6); }
#app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-6) var(--space-4); }
.app-card { display: block; color: inherit; text-decoration: none; }
.app-image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: var(--surface); transition: opacity var(--duration); }
.app-card:hover .app-image { opacity: 0.85; }
.gms-title { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; }

/* Jump back in: #recentPlaysContainer items come from gms.js */
.recent-row { position: relative; margin-top: var(--space-3); }
#recentPlaysContainer { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; }
#recentPlaysContainer::-webkit-scrollbar { display: none; }
.game-item { display: block; color: #fff; position: relative; flex: 0 0 200px; height: 125px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--surface); }
.game-item img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.game-item .overlay { position: absolute; inset: auto 0 0; padding: var(--space-2); background: rgb(0 0 0 / 0.7); color: #fff; font-size: var(--text-sm); font-weight: 500; }
.prev-button, .next-button { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: var(--control-height); height: var(--control-height); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); cursor: pointer; }
.prev-button { left: var(--space-2); }
.next-button { right: var(--space-2); }
@media (pointer: coarse), (max-width: 800px) { .prev-button, .next-button { display: none; } }

/* Player: the iframes and #bottom-bar come from play/main.js */
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-8); }
.game-iframe-container { position: relative; overflow: hidden; border-radius: var(--radius-md); background: #000; }
.game-iframe-container:fullscreen { border-radius: 0; }
#game-placeholder { position: relative; aspect-ratio: 16 / 9; min-height: 320px; }
.game-iframe-container:fullscreen #game-placeholder { aspect-ratio: auto; height: 100%; }
.game-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.play-now { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.game-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.calc-height { height: calc(100% - 48px); }
.loading-iframe { z-index: 3; }
.overlay-iframe { z-index: 4; }
#bottom-bar { position: absolute; inset: auto 0 0; z-index: 2; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-inline: var(--space-2); background: #1c1c21; color: #fff; font-size: var(--text-sm); }
.bottom-bar-left { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.game-bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#bottom-bar button { min-height: 32px; padding-inline: var(--space-2); border: 1px solid #55555f; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }

.game-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.fullscreen-btn-disabled { opacity: 0.5; pointer-events: none; }
#FullscreenGlitchText { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); }
#random-games { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.randcard { display: block; color: inherit; text-decoration: none; }
.randcard img { width: 100%; border-radius: var(--radius-sm); }
.randcard .card-title { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 500; }
@media (max-width: 800px) {
  .player-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Settings */
.settings { display: grid; gap: var(--space-12); max-width: 900px; }
.setting { display: grid; gap: var(--space-2); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-height); cursor: pointer; }
.switch-row input { width: 40px; height: 24px; accent-color: var(--accent); cursor: pointer; }
#tabCloakButtons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.tabCloakiconButtons { display: flex; align-items: center; min-height: var(--control-height); padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-sm); text-align: start; cursor: pointer; }
.tabCloakiconButtons:hover { background: var(--surface-hover); }
.tabCloakiconButtons.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }

/* Export */
#importFile, #downloadLink { display: none; }
.warning { color: var(--danger); }

/* Termly's policies set their own dark text, so they sit on a fixed light sheet. */
.policy { background: #fff; color: #000; padding: var(--space-6); border-radius: var(--radius-md); color-scheme: light; overflow-wrap: anywhere; }

/* Loading: shown in the player's iframe, without the site's header and footer */
body:has(.loader) > header, body:has(.loader) > footer { display: none; }
body:has(.loader) { background: #111114; color: #f2f2f5; }
body:has(.loader) main { display: flex; align-items: center; justify-content: center; padding: 0; }
.loader { width: min(100% - var(--space-8), 320px); display: grid; gap: var(--space-3); margin: 0; }
.progress { height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
.progress > div { width: 30%; height: 100%; background: #fff; animation: slide 1.5s linear infinite; }
@keyframes slide { from { translate: -100%; } to { translate: 340%; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .progress > div { animation: none; width: 100%; opacity: 0.6; }
}

/* play/main.js gives this button only a Font Awesome icon, which the site no longer loads. */
#exit-fullscreen-btn { display: none; }
#exit-fullscreen-btn::after { content: "Exit fullscreen"; }
.game-iframe-container:fullscreen #exit-fullscreen-btn { display: block; }