@font-face {
  font-family: "MouseComic";
  src: url("font.otf") format("opentype");
  font-display: swap;
}

:root {
  --blue: #0016FE;
  color-scheme: light;

  /* Shared bar sizing — see the .topbar/.tabbar comment below for why these
     are split out instead of just being padding+content inline. Tuned so 4
     tabs' total width (tab count grew from 2 to 4) stays comfortably under
     the viewport down to ~570px — see .tabbar's overflow-x comment for what
     happens below that. */
  --bar-pad-top: clamp(10px, 2vw, 28px);
  --bar-content: clamp(52px, 6vw, 96px);
  --bar-pad-bottom: clamp(22px, 4vw, 46px);
  --bar-height: calc(var(--bar-pad-top) + var(--bar-content) + var(--bar-pad-bottom));
  /* TopBar.png and TopBarUnderneath.png are both fully transparent below their
     wavy line (checked pixel-by-pixel, per-column since the line wobbles) —
     that's the artist's own border, drawn so the NEXT bar's fill shows
     through it rather than each bar being a fully opaque box. The transparent
     strip's worst-case depth (where the wavy line sits highest) measured at
     ~14.6% / ~15.4% of each image's height respectively — 16% clears both
     with a small margin rather than cutting it exactly, so a partial-pixel
     rounding difference can't reopen a hairline gap. */
  --bar-overlap: calc(var(--bar-height) * 0.16);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--blue);
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
}

/* Only on <html>, not also on <body> — setting overflow-x on BOTH turns each
   into its own scroll container (per the CSS rule that an axis left
   'visible' next to a non-visible one computes to 'auto'), giving the page
   two nested scrollers instead of one. That's what broke .site-header's
   position:sticky: it ends up stuck relative to whichever of the two isn't
   the one actually scrolling. One overflow-x:hidden, on <html> alone, still
   contains .tabbar/.page-content's own horizontal overflow from bubbling
   into a page-wide sideways scroll, without creating that second scroller. */
html {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* ── Site header (topbar + tabbar together) ───────────────────────────── */
/* Sticks the whole header group to the top of the viewport on scroll, like
   a normal site header/nav. Wrapping both bars in one sticky element (rather
   than making each sticky separately) means they keep scrolling together as
   the single glued unit they're drawn as — .tabbar's negative margin-top
   overlap trick (see below) still works unmodified inside it. z-index here
   just needs to clear .page-content's normal (auto) stacking so the header
   stays on top of the page as it scrolls underneath. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ── Top bar (white, logo) ─────────────────────────────────────────────── */
/* Same total height as .tabbar below on purpose (both use --bar-height) so
   their background art gets stretched by the same factor, not two different
   ones — that's what keeps the hand-drawn linework a consistent weight. */
.topbar {
  position: relative;
  z-index: 2; /* above .tabbar — TopBar.png's wavy bottom edge must overlap DOWN ONTO
                 the gray bar, not sit behind it (its own transparent area below the
                 line is what reveals .tabbar's fill) */
  height: var(--bar-height);
  background-image: url("TopBar.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  padding: 0 clamp(16px, 4vw, 48px);
}

.topbar .mouse-icon {
  width: clamp(48px, 7vw, 110px);
  flex-shrink: 0;
}

.topbar .logo-text {
  width: clamp(134px, 15.48vw, 248px); /* height works out to --bar-content at this image's aspect ratio (2.58065x) */
  flex-shrink: 0;
}

/* ── Tab bar (gray) ────────────────────────────────────────────────────── */
/* overflow-x:auto is the mobile/desktop split in one rule, not a media
   query: --bar-content above is tuned so the 4 tabs' combined width stays
   under the viewport down to ~570px, so on desktop/tablet there's nothing to
   scroll and this is a no-op; below ~570px (phones) the tabs hit their floor
   size and stop shrinking, so they overflow their row and become a
   left/right swipeable strip instead of forcing the whole page to scroll
   sideways (which is what happened before — the overflow bubbled up to the
   body because nothing between .tabbar and the viewport was containing it).
   background-size:100% 100% still paints against .tabbar's own visible box
   (default background-attachment doesn't scroll with the content), so the
   gray fill stays put behind the tabs at any scroll position. */
.tabbar {
  position: relative;
  z-index: 1;
  height: var(--bar-height);
  margin-top: calc(-1 * var(--bar-overlap)); /* tucks under .topbar's transparent lower edge — see --bar-overlap comment */
  background-image: url("TopBarUnderneath.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  padding: 0 clamp(12px, 3vw, 36px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

.tabbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari — a swipeable strip reads better with no visible scrollbar */
}

.tab {
  appearance: none;
  -webkit-appearance: none; /* iOS Safari draws its own button chrome (a visible box/bevel) without this */
  -moz-appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent; /* without this, the UA's default button-face
    color shows through wherever Tab.png/TabSelected.png's hand-drawn shape
    doesn't fully fill the button's rectangular box — reads as a visible
    box/card around the artwork */
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("Tab.png");
  height: var(--bar-content); /* matches .topbar .logo-text's height exactly — see --bar-height */
  width: auto;
  aspect-ratio: 673 / 264;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: inherit;
  font-size: clamp(0.75rem, 1.05vw, 0.95rem); /* scaled down with --bar-content so labels like "How to Play" still sit comfortably inside the smaller tab art */
  color: #000;
  transition: transform 0.08s ease;
}

.tab:hover {
  transform: translateY(-2px);
}

.tab.active {
  background-image: url("TabSelected.png");
}

/* ── Page content ──────────────────────────────────────────────────────── */
.page-content {
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px) 80px;
  display: flex;
  justify-content: center;
  overflow-x: auto; /* .game-frame-wrap below is a fixed size and may exceed a narrow viewport */
}

.tab-panel {
  display: none;
  width: 100%;
}

.tab-panel.active {
  display: flex;
  justify-content: center;
}

/* ── Home tab: game frame reused as a picture frame for a static image ──── */
/* Same art and same 1280x720 inner slot proportions as the Play tab's
   .game-frame-wrap/.webgl-slot below, but sized with %/aspect-ratio instead
   of fixed pixels — Play's frame is pinned to a literal 1280x720 because a
   real WebGL canvas lives inside it (see the comment on .game-frame-wrap),
   but this one only ever holds a still image, so it can scale down freely
   and actually fit on a phone screen. */
.home-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* label sits above-left of the frame, not centered */
  gap: clamp(10px, 2vw, 24px);
  width: 100%;
  max-width: 1548px; /* caps at the frame art's native size — no upscaling past that on desktop */
}

.home-label {
  color: #fff;
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
  font-size: clamp(1.1rem, 3vw, 2rem);
}

.home-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1548 / 989;
}

.home-frame-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.home-webgl-slot {
  position: absolute;
  z-index: 2;
  left: 9.2377%;
  top: 14.1557%;
  width: 82.6873%;
  height: 72.7987%;
  background: #000;
  overflow: hidden;
}

.home-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── How to Play tab: PLACEHOLDER box ─────────────────────────────────── */
.placeholder-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1395 / 1318;
  background-image: url("ImageFrame.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.placeholder-text {
  position: absolute;
  top: 9%;
  left: 9%;
  right: 9%;
  bottom: 9%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
  /* Sized to comfortably fit the actual home-tab copy (a handful of short
     paragraphs) inside this fixed-aspect-ratio frame at any viewport width,
     down to a narrow phone — see .placeholder-frame above for why the frame
     itself doesn't grow past 720px but does shrink with the viewport. */
  font-size: clamp(0.6rem, 2.1vw, 1.1rem);
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

/* ── Play Game tab: GameFrame + WebGL slot ────────────────────────────── */
/* Stacks the frame and the controls strip underneath it, both centered — see
   .controls-image below. */
.play-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

/* Fixed pixel size on purpose, not responsive like the rest of the page — the
   game canvas itself must render at a CONSTANT 1280x720 (see webgl/index.html:
   matchWebGLToCanvasSize is off, and the canvas has fixed width/height
   attributes) and stretching this wrapper with the viewport would still
   stretch the frame art and the iframe around it even though the canvas
   inside stayed fixed. Narrower viewports get a horizontal scrollbar via
   .page-content's overflow-x instead of shrinking this. */
.game-frame-wrap {
  position: relative;
  width: 1548px;
  height: 989px;
  flex-shrink: 0;
}

.game-frame-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.webgl-slot {
  position: absolute;
  z-index: 2;
  left: 9.2377%;
  top: 14.1557%;
  width: 82.6873%;
  height: 72.7987%;
  background: #000;
  overflow: hidden;
}

.webgl-slot iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Sits over the iframe until clicked — see script.js. The iframe has no src
   until then, so the ~1GB build doesn't start fetching on page load. */
.play-button {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 22%, 260px);
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.play-button img {
  width: 100%;
  pointer-events: none; /* clicks land on the button, not the image */
}

.play-button.hidden {
  display: none;
}

/* Shown instead of .play-button on phones/tablets — see script.js's UA check,
   which also skips ever wiring the click that would load the ~1GB build, not
   just the visuals. Plain [hidden] (native display:none) toggles it, same as
   the button's own default state before script.js decides which one to show. */
.mobile-message {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  color: #fff;
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
  font-size: clamp(1rem, 4.5vw, 1.8rem);
  line-height: 1.3;
  text-align: center;
}

/* Sits below the frame, not over the canvas — the build can take a good few
   minutes before Unity's own in-page loading screen has enough to show, and
   this covers that gap. It's a normal flow element (not an absolute overlay
   like .mobile-message) specifically so that once Unity's own UI does start
   rendering inside the iframe, this text was never sitting on top of it in
   the first place — no timing-sensitive z-index race either way. */
.loading-message {
  color: #fff;
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  text-align: center;
}

/* Same fixed width as .game-frame-wrap so the two line up edge-to-edge —
   both are non-responsive by the same reasoning (see .game-frame-wrap). */
.controls-image {
  width: 1548px;
  flex-shrink: 0;
}

/* ── Download tab: plain platform list, no frame art ──────────────────── */
.download-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vw, 12px);
  padding-top: clamp(20px, 6vh, 80px);
  width: 100%;
  max-width: 480px;
}

.download-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(16px, 4vw, 48px);
  width: 100%;
  color: #fff;
  font-family: "MouseComic", "Comic Sans MS", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
}

.download-platform,
.download-status,
.download-link {
  white-space: nowrap;
}

.download-status {
  color: #fff;
  opacity: 0.7;
}

.download-link {
  color: #fff;
  text-decoration: underline;
}

.download-link:hover {
  opacity: 0.8;
}

/* Separates the real platforms from the joke ones below without a label. */
.download-gap {
  height: clamp(16px, 4vh, 40px);
}

@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; }
}