/* ==========================================================================
   newver.css — full-window Noobular landing page
   Non-scrollable, everything contained within the viewport.
   ========================================================================== */

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

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;           /* no scrolling — everything fits the window */
  background: #000;
  font-family: 'Arial Black', 'Impact', sans-serif;
}

/* Off-screen but crawlable/accessible content (SEO + screen readers). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layers — stacked full-screen, ordered by z-index
   #bg (0)  →  #regions (10)  →  #center (20)
   -------------------------------------------------------------------------- */

#bg,
#regions,
#center {
  position: fixed;
  inset: 0;
}

/* --- Background image mosaic ----------------------------------------------- */
#bg {
  z-index: 0;
  overflow: hidden;          /* absolutely-positioned tiles set by JS */
}

#bg .bg-tile {
  position: absolute;
  object-fit: cover;         /* keeps aspect ratio as close as possible, crops overflow */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Retro banner strip (above background, below buttons) ----------------- */
#banners {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;                /* over #bg (0), under #regions (10) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  pointer-events: none;      /* purely decorative */
  background: rgba(0, 0, 0, 0.3);
}

#banners img {
  height: 38px;
  width: auto;
  display: block;
}

/* --- Regions layer (scattered buttons / custom divs) ---------------------- */
#regions {
  z-index: 10;
  pointer-events: none;      /* only the regions themselves are interactive */
}

.region {
  position: absolute;
  pointer-events: auto;
  transform-origin: center center;
  /* left/top/width/height and --region-scale are set by JS */
  transform: translate(-50%, -50%) scale(var(--region-scale, 1));
}

/* Default look for example button regions — glossy gradient + embossed bevel. */
.region .region-btn {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(0, 0, 0, 0.55);
  border-radius: 14px;
  font-family: Arial, Helvetica, sans-serif;     /* same as index.html buttons */
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1.1;
  /* Keep long labels inside odd shapes instead of overflowing. */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: center;
  /* Center the label both ways so wrapped text doesn't spill downward. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
  /* Low-res "shader" — pixelates the whole button (gloss, text, bevel). */
  filter: url(#pixelate);
  /* Emboss: bright inner top-left highlight + dark inner bottom-right shadow + drop shadow. */
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
    inset -4px -4px 9px rgba(0, 0, 0, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.5);
}

/* Glossy gradient sheen layered over each button's own color (sits under the text). */
.region .region-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(0, 0, 0, 0.12) 58%,
    rgba(0, 0, 0, 0.40) 100%
  );
}

.region .region-btn:hover {
  filter: url(#pixelate) brightness(1.1);
}

/* Buttons opted out of the low-res pixelation filter. */
.region .region-btn.no-pixel,
.region .region-btn.no-pixel:hover {
  filter: none;
}

/* Opt individual text back into the pixelation (e.g. on a no-pixel button). */
.pixel-text {
  display: inline-block;
  filter: url(#pixelate);
}

.region .region-btn:active {
  /* Pressed-in emboss inversion. */
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.4),
    inset 4px 4px 9px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Custom uploaded button image — set via region def { img: 'path' }. */
.region .region-btn--img {
  background-size: 100% 100%;   /* fill the region; distort/pixelate freely */
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  image-rendering: pixelated;
  color: transparent;
  padding: 0;
  font-size: 0;
}

/* --- Center content (NOOBULAR header) ------------------------------------- */
#center {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;      /* header shouldn't block regions unless it has content that needs it */
  /* Shift the header up when the cookie banner reserves space at the bottom. */
  padding-bottom: var(--bottom-reserve, 0px);
  transition: padding-bottom 0.2s ease;
}

#center-content {
  pointer-events: auto;
  text-align: center;
  padding: 20px 40px;
}

.noob-logo {
  display: block;
  width: min(60vw, 640px);
  max-width: 90vw;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}

.rainbow {
  margin: 0;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: clamp(24px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  background-image: linear-gradient(
    90deg,
    #ff0000, #ff8000, #ffff00, #00ff00,
    #00ffff, #0080ff, #8000ff, #ff00ff, #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rainbow-slide 6s linear infinite;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@keyframes rainbow-slide {
  to {
    background-position: 200% center;
  }
}