:root {
  --bg:#070706;
  --wall:#11100d;
  --text:#eee7d2;
  --muted:#b8ad91;
  --gold:#d9b35f;
}

* { box-sizing:border-box; }

html {
  color-scheme:dark;
}

body {
  margin:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(217,179,95,.16), transparent 34rem),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.012) 1px, transparent 1px),
    var(--bg);
  background-size:auto,64px 64px,64px 64px,auto;
  color:var(--text);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.wrap {
  width:min(1460px, calc(100% - 28px));
  margin:0 auto;
}

header {
  padding:46px 0 28px;
  border-bottom:1px solid rgba(217,179,95,.25);
}

.kicker {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
}

h1 {
  margin:.2em 0;
  font-size:clamp(2.4rem,7vw,6.4rem);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:-.07em;
}

.lead {
  max-width:900px;
  line-height:1.55;
}

.stats {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.stat {
  min-width:150px;
  padding:12px 14px;
  background:#14110c;
  border:1px solid rgba(217,179,95,.25);
}

.stat b {
  display:block;
  font-size:1.7rem;
}

.rooms {
  display:grid;
  gap:42px;
  padding:34px 0 80px;
}

.room {
  border:1px solid rgba(217,179,95,.30);
  background:#0b0a08;
  padding:16px;
  box-shadow:0 28px 100px rgba(0,0,0,.55);
}

.room-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:14px;
}

.chamber {
  position:relative;
  min-height:580px;
  perspective:1000px;
  background:linear-gradient(180deg,#0a0907,#050504);
  overflow:hidden;
  border:1px solid rgba(217,179,95,.18);
}

.ceiling {
  position:absolute;
  top:0;
  left:16%;
  right:16%;
  height:78px;
  background:linear-gradient(180deg,#2a2519,#11100c);
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  border-bottom:1px solid rgba(217,179,95,.25);
}

.floor {
  position:absolute;
  bottom:0;
  left:8%;
  right:8%;
  height:190px;
  background:
    linear-gradient(90deg, rgba(217,179,95,.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(217,179,95,.06) 1px, transparent 1px),
    linear-gradient(180deg,#19150d,#050504);
  background-size:64px 64px,64px 64px,auto;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
}

.side {
  position:absolute;
  top:94px;
  bottom:125px;
  width:30%;
  background:#090807;
  border:5px solid #2b261a;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55), 0 18px 70px rgba(0,0,0,.45);
  z-index:3;
}

.side.left {
  left:3%;
  transform-origin:right center;
  transform:rotateY(42deg);
}

.side.right {
  right:3%;
  transform-origin:left center;
  transform:rotateY(-42deg);
}

.side img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:14px;
  background:#050505;
  border:3px solid var(--gold);
}

.back-wall {
  position:absolute;
  left:28%;
  right:28%;
  top:86px;
  bottom:138px;
  background:#000;
  border:5px solid #2b261a;
  box-shadow:0 0 0 2px rgba(217,179,95,.3), 0 20px 80px rgba(0,0,0,.65);
  z-index:4;
}

.back-wall video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}

.caption {
  margin-top:12px;
  color:var(--muted);
  line-height:1.45;
}

@media (max-width:900px) {
  .chamber {
    min-height:auto;
    padding:12px;
    display:grid;
    gap:12px;
  }

  .ceiling,
  .floor {
    display:none;
  }

  .side,
  .back-wall {
    position:static;
    width:auto;
    transform:none !important;
    min-height:0;
  }

  .back-wall video,
  .side img {
    height:auto;
  }
}

/* SUBAKA FORCE ROOM VIEW
   Geen mobiele stapelweergave. Altijd kamer, altijd zijwanden, altijd plafond.
*/

.wrap {
  overflow-x: auto !important;
}

.chamber {
  position: relative !important;
  min-height: 620px !important;
  min-width: 1180px !important;
  perspective: 1000px !important;
  display: block !important;
  background: linear-gradient(180deg,#0a0907,#050504) !important;
  overflow: hidden !important;
}

.ceiling {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 92px !important;
  background:
    linear-gradient(90deg, rgba(217,179,95,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(217,179,95,.08) 1px, transparent 1px),
    linear-gradient(180deg, #30291b, #11100c) !important;
  background-size: 64px 64px, 64px 64px, auto !important;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%) !important;
  border-bottom: 2px solid rgba(217,179,95,.35) !important;
  z-index: 2 !important;
}

.floor {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 7% !important;
  right: 7% !important;
  height: 210px !important;
  background:
    linear-gradient(90deg, rgba(217,179,95,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(217,179,95,.07) 1px, transparent 1px),
    linear-gradient(180deg,#1b160d,#050504) !important;
  background-size: 64px 64px, 64px 64px, auto !important;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%) !important;
  z-index: 1 !important;
}

.side {
  display: block !important;
  position: absolute !important;
  top: 105px !important;
  bottom: 150px !important;
  width: 31% !important;
  min-height: 0 !important;
  background: #090807 !important;
  border: 6px solid #d9b35f !important;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.65),
    0 18px 70px rgba(0,0,0,.55) !important;
  z-index: 4 !important;
}

.side.left {
  left: 3% !important;
  right: auto !important;
  transform-origin: right center !important;
  transform: rotateY(44deg) !important;
}

.side.right {
  right: 3% !important;
  left: auto !important;
  transform-origin: left center !important;
  transform: rotateY(-44deg) !important;
}

.side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 14px !important;
  background: #050505 !important;
  border: 3px solid #d9b35f !important;
}

.back-wall {
  display: block !important;
  position: absolute !important;
  left: 30% !important;
  right: 30% !important;
  top: 112px !important;
  bottom: 165px !important;
  background: #000 !important;
  border: 6px solid #2b261a !important;
  box-shadow:
    0 0 0 2px rgba(217,179,95,.35),
    0 20px 80px rgba(0,0,0,.70) !important;
  z-index: 5 !important;
}

.back-wall video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: #000 !important;
}