:root{
  --void:#020103;
  --blood:#ff1748;
  --blood2:#7a001b;
  --violet:#a020ff;
  --violet2:#441063;
  --bone:#f4dfba;
  --pink:#ff4fa3;
  --metal:#171015;
  --metal2:#30252b;
  --ash:#aaa0a5;
  --gold:#ffc35a;
  --green:#76ffbe;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:#020103;
  color:var(--bone);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}

body{
  background:
    radial-gradient(circle at 18% 20%,rgba(160,32,255,.22),transparent 23rem),
    radial-gradient(circle at 82% 22%,rgba(255,23,72,.22),transparent 23rem),
    radial-gradient(circle at 50% 76%,rgba(255,95,20,.12),transparent 18rem),
    #020103;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 6px),
    radial-gradient(circle at 50% 45%,transparent 0 40%,rgba(0,0,0,.78) 80%);
  opacity:.34;
  mix-blend-mode:screen;
  z-index:5;
}

.machine{
  min-height:100vh;
  width:min(1820px,98vw);
  margin:0 auto;
  padding:14px 10px 18px;
  display:grid;
  grid-template-rows:118px minmax(470px,1fr) 92px;
  gap:10px;
}

.top-frame,
.bottom-frame,
.left-rail,
.right-rail,
.screen-wrap{
  position:relative;
  border:1px solid rgba(255,255,255,.20);
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.70) 38%,rgba(255,255,255,.05)),
    radial-gradient(circle at 18% 30%,rgba(160,32,255,.22),transparent 22rem),
    radial-gradient(circle at 82% 30%,rgba(255,23,72,.22),transparent 22rem);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.08),
    inset 0 0 64px rgba(0,0,0,.82),
    0 0 36px rgba(0,0,0,.9);
}

.top-frame{
  border-radius:28px 28px 16px 16px;
  display:grid;
  grid-template-columns:1fr minmax(270px,430px) 1fr;
  align-items:center;
  gap:14px;
  padding:10px 28px;
  overflow:hidden;
}

.brand-sigil{
  position:relative;
  z-index:2;
  min-height:92px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,23,72,.34),transparent 45%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.88),rgba(0,0,0,.35) 64%,transparent 70%);
  filter:drop-shadow(0 0 18px rgba(255,23,72,.45));
}

.brand-sigil h1{
  margin:0;
  font-size:clamp(2.2rem,4vw,4.4rem);
  line-height:.78;
  letter-spacing:-.07em;
  text-transform:uppercase;
  color:#ff2d55;
  text-shadow:
    0 0 5px rgba(255,255,255,.34),
    0 0 18px rgba(255,23,72,.78),
    2px 2px 0 #250009;
}

.brand-sigil span{
  display:block;
  margin-top:6px;
  color:rgba(244,223,186,.75);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.top-crack{
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(90deg,rgba(160,32,255,.38),rgba(0,0,0,.70),rgba(255,23,72,.38)),
    repeating-linear-gradient(110deg,transparent 0 22px,rgba(255,255,255,.10) 23px 24px);
  box-shadow:
    inset 0 0 25px rgba(0,0,0,.92),
    0 0 26px var(--rail-glow,rgba(255,23,72,.28));
  display:grid;
  place-items:center;
  color:var(--pink);
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.top-crack.left{--rail-glow:rgba(160,32,255,.38)}
.top-crack.right{--rail-glow:rgba(255,23,72,.38)}

.mid{
  min-height:0;
  display:grid;
  grid-template-columns:260px minmax(500px,1fr) 260px;
  gap:10px;
}

.left-rail,
.right-rail{
  border-radius:18px;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  overflow:hidden;
}

.left-rail{
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.85),
    0 0 30px rgba(160,32,255,.24);
}

.right-rail{
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.85),
    0 0 30px rgba(255,23,72,.24);
}

.rail-button{
  position:relative;
  min-height:76px;
  display:grid;
  place-items:center;
  padding:10px;
  color:var(--bone);
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.86rem;
  font-weight:bold;
  border:1px solid rgba(255,255,255,.24);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.75)),
    radial-gradient(circle at 50% 20%,var(--btn-glow),transparent 75%);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.05),
    inset 0 0 34px rgba(0,0,0,.75),
    0 0 16px rgba(0,0,0,.7),
    0 0 18px var(--btn-glow);
  transition:transform .16s ease,border-color .16s ease,filter .16s ease;
}

.left-rail .rail-button{--btn-glow:rgba(160,32,255,.24)}
.right-rail .rail-button{--btn-glow:rgba(255,23,72,.22)}

.rail-button::before,
.portal-button::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 16px rgba(0,0,0,.8);
  pointer-events:none;
}

.rail-button:hover,
.rail-button:focus{
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(255,255,255,.58);
  filter:brightness(1.2);
  outline:none;
}

.screen-wrap{
  border-radius:18px;
  padding:22px;
  overflow:hidden;
}

.screen{
  position:relative;
  height:100%;
  min-height:470px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:#000;
  box-shadow:
    inset 0 0 75px rgba(0,0,0,.92),
    0 0 35px rgba(255,255,255,.07);
}

.art-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1200ms ease,transform 6000ms ease;
  background-size:cover;
  background-position:center;
}

.art-slide.active{
  opacity:1;
  transform:scale(1);
}

.art-slide.one{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.10),transparent 15rem),
    radial-gradient(circle at 32% 30%,rgba(160,32,255,.28),transparent 18rem),
    radial-gradient(circle at 70% 55%,rgba(255,23,72,.28),transparent 20rem),
    linear-gradient(145deg,#020103,#12030b 55%,#000);
}

.art-slide.two{
  background:
    radial-gradient(circle at 50% 28%,rgba(255,195,90,.18),transparent 16rem),
    radial-gradient(circle at 28% 56%,rgba(95,0,120,.42),transparent 18rem),
    radial-gradient(circle at 74% 48%,rgba(120,0,28,.48),transparent 20rem),
    linear-gradient(180deg,#050005,#000 50%,#16030a);
}

.art-slide.three{
  background:
    radial-gradient(circle at 50% 55%,rgba(118,255,190,.13),transparent 12rem),
    radial-gradient(circle at 42% 36%,rgba(255,79,163,.20),transparent 16rem),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 9px),
    linear-gradient(135deg,#020505,#0d0611 55%,#040103);
}

.screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 52%,rgba(0,0,0,.60) 80%),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 8px);
  mix-blend-mode:screen;
  opacity:.38;
}

.screen::after{
  content:"";
  position:absolute;
  inset:18px;
  z-index:5;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.85);
  pointer-events:none;
}

.screen-copy{
  position:absolute;
  left:28px;
  bottom:24px;
  z-index:6;
  max-width:620px;
}

.screen-copy .kicker{
  color:var(--gold);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  margin-bottom:9px;
}

.screen-copy h2{
  margin:0;
  font-size:clamp(2rem,4vw,4.7rem);
  line-height:.88;
  text-transform:uppercase;
  letter-spacing:-.06em;
  text-shadow:0 0 24px rgba(255,23,72,.65);
}

.screen-copy p{
  max-width:560px;
  color:rgba(244,223,186,.80);
  font-size:1rem;
  line-height:1.45;
  margin:12px 0 0;
}

.bottom-frame{
  border-radius:16px 16px 28px 28px;
  display:grid;
  grid-template-columns:repeat(6,minmax(105px,1fr));
  gap:10px;
  align-items:center;
  padding:13px 18px;
}

.portal-button{
  position:relative;
  min-height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  text-decoration:none;
  color:var(--bone);
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.78)),
    radial-gradient(circle at 50% 50%,rgba(255,79,163,.18),transparent 70%);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:bold;
  box-shadow:
    inset 0 0 19px rgba(255,255,255,.04),
    0 0 17px rgba(255,23,72,.16);
  transition:transform .16s ease,border-color .16s ease,filter .16s ease;
}

.portal-button:hover,
.portal-button:focus{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.58);
  filter:brightness(1.22);
  outline:none;
}

.portal-button.future{
  opacity:.55;
  border-style:dashed;
}

.mobile-title{
  display:none;
}

@media(max-width:1050px){
  .machine{
    grid-template-rows:auto auto auto;
  }

  .top-frame{
    grid-template-columns:1fr;
  }

  .top-crack{
    min-height:44px;
  }

  .mid{
    grid-template-columns:1fr;
  }

  .left-rail,
  .right-rail{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .screen{
    min-height:420px;
  }

  .bottom-frame{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-radius:20px;
  }
}

@media(max-width:560px){
  .machine{
    width:96vw;
    padding:10px 0 18px;
  }

  .brand-sigil h1{
    font-size:3rem;
  }

  .brand-sigil span{
    font-size:.58rem;
  }

  .left-rail,
  .right-rail{
    grid-template-columns:1fr;
  }

  .rail-button{
    min-height:62px;
    font-size:.76rem;
  }

  .screen-wrap{
    padding:12px;
  }

  .screen{
    min-height:360px;
  }

  .screen-copy{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .screen-copy h2{
    font-size:2.3rem;
  }

  .screen-copy p{
    font-size:.9rem;
  }

  .bottom-frame{
    grid-template-columns:1fr;
  }
}

/* === SWEET ROTT SCREEN POLISH + BOTTOM BUTTONS START === */

/* Small center-screen adjustment only: keep the art portal from feeling too pushed/cropped. */
.screen-wrap {
  transform: translateY(-4px) scale(0.992);
  transform-origin: center center;
}

.screen-wrap img,
.screen-wrap picture,
.screen-wrap .portal-art,
.screen-wrap .screen-art,
.screen-wrap .art-screen,
.screen-wrap .screen-image {
  object-position: center 46% !important;
}

/* Slightly tighten the center copy without redesigning the page. */
.screen-wrap h1,
.screen-wrap h2,
.screen-wrap .screen-title,
.screen-wrap .portal-title {
  line-height: 0.92 !important;
}

/* Make bottom connected buttons feel clickable. */
.bottom-bar a[href]:not([href="#"]),
.bottom-buttons a[href]:not([href="#"]),
.cross-world a[href]:not([href="#"]) {
  cursor: pointer;
}

/* History X can stay visually present but unlaunched if it has no real route yet. */
a[href="#"] {
  opacity: 0.72;
}

/* === SWEET ROTT SCREEN POLISH + BOTTOM BUTTONS END === */