/* ============================================================
   OFG — GAME ROOMS  (each game = one full-viewport "room")
   NO game cards. A game is a visual room. Themed by the fader.
   ============================================================ */

.room {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-inline: var(--gutter);
  overflow: clip;
  isolation: isolate;
  background: var(--c-bg, var(--ofg-cream));
}

/* vivid accent block on the right — stays saturated across all moods */
.room__accent {
  position: absolute; inset: 0 0 0 auto;
  width: 42%; z-index: 0;
  background: var(--room-accent);
}
.room--coral  { --room-accent: var(--ofg-coral);  }
.room--powder { --room-accent: var(--ofg-powder); }
.room--yellow { --room-accent: var(--ofg-yellow); }

/* the room's number, quietly, up top */
.room__num {
  position: absolute; top: var(--gutter); left: var(--gutter); z-index: 3;
  color: var(--c-ink-panel, var(--ofg-black));
}

.room__body { position: relative; z-index: 2; max-width: 62%; }

.room__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(3rem, 1rem + 12vw, 12rem); line-height: 0.9;
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
  color: var(--c-ink-panel, var(--ofg-black)); margin: 0;
  transform-origin: left center;
  transition: transform .35s var(--ease-back), letter-spacing .35s var(--ease-out);
}
.room__tagline {
  font-family: var(--font-display); font-weight: var(--weight-med);
  font-size: var(--step-lead); text-transform: uppercase;
  color: var(--room-accent); margin: 0.4em 0 0; letter-spacing: var(--tracking-tight);
  transition: transform .35s var(--ease-out);
}

/* ---- scroll reveal (only when JS opts in; default is visible) ---- */
.js-reveal .room__body,
.js-reveal .room__num {
  opacity: 0; transform: translateY(34px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js-reveal .room.is-in .room__body,
.js-reveal .room.is-in .room__num { opacity: 1; transform: none; }
.js-reveal .room.is-in .room__tagline { transition-delay: .08s; }

/* ---- particle burst on room entry ---- */
.fg-particle {
  position: absolute; z-index: 2; pointer-events: none;
  width: var(--pixel); height: var(--pixel);
  background: var(--room-accent, var(--ofg-coral));
  will-change: transform, opacity;
}

/* ---- per-room hover chaos ---- */
.room__accent { transition: width .45s var(--ease-hard); }
.room:hover .room__accent { width: 47%; }
.room:hover .room__title { transform: scale(1.04) skewX(-4deg); letter-spacing: 0.01em; }
.room:hover .room__tagline { transform: translateX(0.5em); }

.room__meta {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
}
.room__meta li { color: var(--c-ink-panel, var(--ofg-navy)); }
.room__meta .status { color: var(--room-accent); }

/* PLAY WITH IT → */
.play-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--step-lead); text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  padding: 0.4em 0.8em; color: var(--c-ink-panel, var(--ofg-black));
  border: var(--pixel) solid var(--room-accent); background: transparent;
  transition: background var(--dur-fast) var(--ease-hard),
              color var(--dur-fast) var(--ease-hard),
              transform var(--dur-fast) var(--ease-back);
}
.play-btn .arw { transition: transform var(--dur-fast) var(--ease-out); }
.play-btn:hover, .play-btn:focus-visible {
  background: var(--room-accent); color: var(--ofg-black); transform: translateY(-2px);
}
.play-btn:hover .arw { transform: translateX(0.3em); }

.room__actions { display: flex; align-items: center; gap: var(--space-4) var(--space-5); flex-wrap: wrap; }
.room__details {
  color: var(--c-ink-panel, var(--ofg-navy)); opacity: .7;
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.room__details:hover, .room__details:focus-visible { opacity: 1; color: var(--room-accent); }

/* the room's actor sits on the accent block */
.room__actor {
  position: absolute; z-index: 2; right: 12%; bottom: 16%;
  width: calc(var(--pixel) * 12); height: calc(var(--pixel) * 12);
  transition: transform var(--dur-mid) var(--ease-back);
}
.room__actor img { width: 100%; height: 100%; }
.room:hover .room__actor { transform: translateY(-8px) rotate(-4deg); }

/* section intro strip above the rooms */
.rooms-intro {
  padding: var(--space-7) var(--gutter) var(--space-4);
  background: var(--c-bg, var(--ofg-cream));
  color: var(--c-ink-panel, var(--ofg-black));
}
.rooms-intro .micro { color: var(--room-accent, var(--ofg-pink)); }

@media (max-width: 720px) {
  .room__accent { width: 100%; height: 38%; inset: auto 0 0 0; }
  .room__body { max-width: 100%; }
  .room__actor { right: 8%; bottom: 6%; width: calc(var(--pixel)*9); height: calc(var(--pixel)*9); }
}