/* Reset & base */
@font-face {
  font-family: 'OverdozeSans';
  src: url('../assets/fonts/overdozesans.otf') format('opentype'),
       url('../assets/fonts/overdozesans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
:root { --ui-scale: 1.6667; }
button, input, select, textarea { font: inherit; }
body {
  --bg: #0e1f19;
  --fg: #e7f2eb;
  --accent: #66ff99;
  --accent-2: #2f7a54;
  --btn-bg: rgba(0,0,0,0.25);
  --btn-border: rgba(255,255,255,0.9);
  --btn-text: #e9efe9;
  --btn-slice: 36; /* px for border-image slicing; adjust to fit background_button.png */
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: 'OverdozeSans', 'Overdoze Sans', 'overdozesans', sans-serif;
  font-size: calc(1rem * var(--ui-scale));
  min-height: 100svh;
}

/* Fixed layered background (3 PNGs) */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Base vertical position for face/variant/glitch */
  --face-top: 70%;
}
.bg .bg-layer { position: absolute; }
.bg .base {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg .face,
.bg .face-variant,
.bg .glitch {
  left: 50%;
  top: var(--face-top);
  transform: translate(-50%, -50%) translate(var(--dx-face, 0px), var(--dy-face, 0px));
  will-change: transform;
}
.bg .text {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--dx-text, 0px), var(--dy-text, 0px));
  will-change: transform;
}
/* Slightly above center for the title (raised a bit more) */
.bg .text { top: 30%; }
/* Sensible default sizes (tweak as needed) */
.bg .face { width: clamp(220px, 26vw, 520px); height: auto; }
.bg .face-variant { width: clamp(220px, 26vw, 520px); height: auto; }
.bg .text { width: clamp(260px, 30vw, 680px); height: auto; }

/* Layering and fades for variants and glitch */
.bg .face { z-index: 1; }
.bg .face-variant { z-index: 2; opacity: 0; transition: opacity 250ms ease; }
.bg .glitch { z-index: 3; opacity: 0; transition: opacity 80ms linear; }
.bg .text { z-index: 5; }

/* Make glitch overlay size match face by default */
.bg .glitch { width: clamp(220px, 26vw, 520px); height: auto; }

/* Layout: two vertical stacks aligned left and right, vertically centered */
.menu {
  position: relative;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 clamp(16px, 6vw, 72px);
}
.menu-column {
  position: static;
  transform: none;
  display: grid;
  gap: clamp(12px, 2.2vh, 18px);
}
.menu-column.left { justify-self: start; }
.menu-column.right { justify-self: end; }

@media (max-width: 900px) {
  .menu {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: clamp(24px, 6vh, 56px);
  }
  .menu-column.left,
  .menu-column.right { justify-self: center; }
}

.menu-button {
  appearance: none;
  cursor: pointer;
  border: 3px solid rgba(255,255,255,0.96);
  background: transparent;
  color: var(--btn-text);
  padding: clamp(10px, 1.2vw, 16px) clamp(18px, 2.2vw, 28px);
  min-height: clamp(42px, 6vh, 64px);
  min-width: clamp(180px, 24vw, 320px);
  font-size: clamp(calc(16px * var(--ui-scale)), calc(1.4vw * var(--ui-scale)), calc(22px * var(--ui-scale)));
  letter-spacing: 0.2px;
  border-radius: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: transform 120ms ease, filter 180ms ease;
  isolation: isolate;
}
  /* Hover effects removed */

.menu-button:active { transform: translateY(1px) scale(0.99); }
.menu-button:focus-visible {
  outline: 2px solid var(--accent);
}
/* Language switcher */
.lang-switcher {
  position: fixed;
  top: clamp(10px, 2.5vh, 22px);
  right: clamp(10px, 3vw, 24px);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.lang-btn {
  background: rgba(0,0,0,0.35);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: calc(13px * var(--ui-scale));
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.lang-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(102,255,153,0.2);
}
.lang-btn.active {
  background: rgba(60, 120, 90, 0.35);
  border-color: var(--accent);
}

/* Room view (interactive backgrounds with image map) */
#room-view {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
}
#room-view[aria-hidden="false"] { display: block; }
#room-view .room-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
}
#room-view .room-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#room-view .room-fader {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 750ms ease; /* duration overridden inline per transition */
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .menu-button { transition: none; }
  .lang-btn { transition: none; }
}