:root{
    --bg:#090909;
    --panel:#111;
    --text:#e9e4d8;
    --muted:#9e9788;
    --line:#2a241d;
    --accent:#d6b36a;
    --danger:#a13a2a;
    --good:#88b07a;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:radial-gradient(circle at top,#16120f,#070707 65%);color:var(--text);font-family:Georgia, "Times New Roman", serif;min-height:100%}
  body{display:flex;align-items:center;justify-content:center;padding:20px}
  .game{
    width:min(760px,100%);
    background:rgba(10,10,10,.92);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    overflow:hidden;
  }
.game[data-scene="death"] .scene-title,
.game[data-scene="ending-corrupted"] .scene-title,
.game[data-scene="ending-toolate"] .scene-title,
.game[data-scene="ending-almost"] .scene-title{
  color:#f0dfcf;
}
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(to bottom,rgba(255,255,255,.03),transparent);
  }
  .title{
    font-size:18px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .small{
    font-size:12px;
    color:var(--muted);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .screen{
    padding:24px 20px 20px;
    min-height:420px;
    position:relative;
  }
  .chapter{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    margin-bottom:12px;
  }
  .scene-title{
    font-size:30px;
    line-height:1.1;
    margin:0 0 14px;
    color:#f4ecdc;
  }
  .scene-text{
    font-size:18px;
    line-height:1.65;
    color:#ddd4c2;
    min-height:135px;
    white-space:pre-line;
  }
  .omens{
    margin-top:16px;
    padding:12px 14px;
    border:1px dashed #3a2f27;
    border-radius:12px;
    color:#c8b8a0;
    background:rgba(255,255,255,.02);
    font-size:15px;
    min-height:52px;
  }
  .choices{
    display:grid;
    gap:10px;
    margin-top:22px;
  }
  button{
    width:100%;
    border:1px solid #3a3026;
    background:linear-gradient(to bottom,#1a1713,#100f0d);
    color:#f0e7d6;
    border-radius:12px;
    padding:14px 14px;
    text-align:left;
    font-size:16px;
    cursor:pointer;
    transition:transform .06s ease, background .18s ease, border-color .18s ease;
  }
  button:hover{
    transform:translateY(-1px);
    border-color:#5c4a37;
    background:linear-gradient(to bottom,#211d18,#141210);
  }
  .footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 18px 18px;
    color:var(--muted);
    font-size:13px;
  }
  .pill{
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.03);
  }
  .flash{
    animation:flash .22s linear 1;
  }
  @keyframes flash{
    0%{background:#2a0f0f}
    100%{background:transparent}
  }
  .end{
    color:#f4dec8;
  }
  .good{color:var(--good)}
  .danger{color:#d98773}


/* =========================================================
   RAPTURE TIME — ENTRY OVERLAY + ENDING CINEMATIC
   ========================================================= */

.rt-overlay,
.rt-endingCine{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,120,20,.10), transparent 20%),
    radial-gradient(circle at 50% 120%, rgba(70,120,255,.10), transparent 30%),
    linear-gradient(to bottom, rgba(10,8,8,.92), rgba(4,4,4,.98));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
}

.rt-overlay--show,
.rt-endingCine--show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.rt-overlay__inner{
  width:min(760px,100%);
  min-height:min(88vh,720px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  text-align:center;
  border:1px solid rgba(214,179,106,.16);
  border-radius:22px;
  padding:34px 26px 22px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.03), transparent 18%),
    rgba(8,7,7,.78);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 80px rgba(255,120,30,.04);
}

.rt-overlay__top{margin-top:24px}
.rt-overlay__mid{display:flex;align-items:center;justify-content:center;flex:1}
.rt-overlay__bottom{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  color:#9e9788;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rt-overlay__links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.rt-overlay__links a{
  color:#cdbb9d;
  text-decoration:none;
}
.rt-overlay__links a:hover{color:#f0dfbf}

/* Burning title */
.rt-burnTitle{
  position:relative;
  display:inline-block;
  font-family:Georgia,"Times New Roman",serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#eadfca;
  line-height:1;
  overflow:hidden;
}

.rt-burnTitle--main{
  font-size:clamp(34px,7vw,72px);
  margin-bottom:12px;
}

.rt-burnTitle--sub{
  font-size:clamp(16px,2.3vw,26px);
  color:#d2c4ab;
  letter-spacing:.28em;
}

.rt-burnTitle::before{
  content:"";
  position:absolute;
  inset:auto 0 -6% 0;
  height:45%;
  background:
    radial-gradient(circle at 10% 100%, rgba(255,160,60,.95), transparent 36%),
    radial-gradient(circle at 28% 100%, rgba(255,90,20,.92), transparent 32%),
    radial-gradient(circle at 46% 100%, rgba(255,190,80,.86), transparent 30%),
    radial-gradient(circle at 66% 100%, rgba(255,110,25,.92), transparent 30%),
    radial-gradient(circle at 85% 100%, rgba(255,170,60,.88), transparent 34%);
  mix-blend-mode:screen;
  filter:blur(4px);
  opacity:.28;
  animation:rtFirePulse 2.8s ease-in-out infinite;
  pointer-events:none;
}

.rt-burnTitle::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,
      rgba(255,110,20,.80) 0%,
      rgba(255,180,70,.42) 12%,
      rgba(255,255,255,0) 32%);
  mix-blend-mode:screen;
  opacity:.18;
  animation:rtFireLick 4.4s linear infinite;
  pointer-events:none;
}

@keyframes rtFirePulse{
  0%,100%{opacity:.10; transform:translateY(0)}
  15%{opacity:.30; transform:translateY(-1px)}
  32%{opacity:.18; transform:translateY(0)}
  57%{opacity:.36; transform:translateY(-2px)}
  82%{opacity:.14; transform:translateY(0)}
}

@keyframes rtFireLick{
  0%{transform:translateY(8px); opacity:.08}
  15%{transform:translateY(2px); opacity:.18}
  28%{transform:translateY(0px); opacity:.10}
  44%{transform:translateY(6px); opacity:.20}
  68%{transform:translateY(1px); opacity:.12}
  100%{transform:translateY(8px); opacity:.08}
}

/* Button */
.rt-awakenBtn{
  min-width:220px;
  padding:15px 20px;
  border-radius:999px;
  border:1px solid rgba(214,179,106,.34);
  background:
    linear-gradient(to bottom, rgba(49,29,18,.96), rgba(23,18,15,.96));
  color:#f0e6d3;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    0 10px 24px rgba(0,0,0,.36),
    inset 0 0 16px rgba(255,130,40,.05);
  transition:transform .08s ease, border-color .16s ease, box-shadow .16s ease;
}
.rt-awakenBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,170,70,.55);
  box-shadow:
    0 12px 28px rgba(0,0,0,.44),
    inset 0 0 22px rgba(255,120,30,.10);
}

/* Ending cinematic */
.rt-endingCine{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 78%, rgba(60,110,255,.10), transparent 18%),
    radial-gradient(circle at 50% 115%, rgba(50,95,255,.18), transparent 30%),
    linear-gradient(to bottom, #040507 0%, #08090d 55%, #050505 100%);
}

.rt-endingCine__stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 40%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 32%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 14%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 28%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 16%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 40%, rgba(255,255,255,.62) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 60%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 66%, rgba(255,255,255,.7) 0 1px, transparent 2px);
  opacity:.85;
  animation:rtStarsDrift 18s linear infinite;
}

@keyframes rtStarsDrift{
  from{transform:translateY(0)}
  to{transform:translateY(14px)}
}

.rt-endingCine__earthWrap{
  position:absolute;
  left:50%;
  bottom:-12vw;
  transform:translateX(-50%);
  width:min(72vw,780px);
  height:min(72vw,780px);
}

.rt-endingCine__earthGlow{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(100,170,255,.20) 0%, rgba(85,140,255,.10) 36%, transparent 62%);
  filter:blur(20px);
  transform:scale(1);
  animation:rtEarthGlow 8s ease-in-out infinite;
}

@keyframes rtEarthGlow{
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:.95; transform:scale(1.05)}
}

.rt-endingCine__earth{
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(105,160,255,.55), transparent 24%),
    radial-gradient(circle at 58% 46%, rgba(70,120,255,.48), transparent 30%),
    radial-gradient(circle at 50% 54%, rgba(255,90,30,.14), transparent 26%),
    linear-gradient(to bottom, #16244b 0%, #16305e 40%, #0d1730 100%);
  box-shadow:
    inset 0 0 60px rgba(255,255,255,.06),
    inset 0 -70px 120px rgba(0,0,0,.38);
  overflow:hidden;
}

.rt-endingCine__earth::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 55%, rgba(255,110,35,.30), transparent 10%),
    radial-gradient(circle at 48% 64%, rgba(255,125,40,.18), transparent 8%),
    radial-gradient(circle at 62% 46%, rgba(255,110,20,.22), transparent 8%);
  mix-blend-mode:screen;
  animation:rtEarthBurn 5s ease-in-out infinite;
}

@keyframes rtEarthBurn{
  0%,100%{opacity:.32}
  50%{opacity:.65}
}

.rt-endingCine__ships{
  position:absolute;
  inset:0;
}

.rt-ship{
  position:absolute;
  width:16px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right, #d5e5ff, #8fb8ff);
  box-shadow:0 0 14px rgba(140,185,255,.55);
  opacity:0;
  transform:translateY(10px) scale(.8);
  transition:opacity .8s ease, transform .8s ease;
}
.rt-ship::after{
  content:"";
  position:absolute;
  right:-4px;
  top:2px;
  width:6px;
  height:4px;
  border-radius:999px;
  background:rgba(255,180,90,.9);
  filter:blur(1px);
}
.rt-ship--show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.rt-ship--1{left:42%; top:28%}
.rt-ship--2{left:55%; top:24%}
.rt-ship--3{left:62%; top:34%}
.rt-ship--4{left:34%; top:22%}
.rt-ship--5{left:70%; top:30%}
.rt-ship--6{left:26%; top:34%}

.rt-endingCine__caption{
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,90%);
  text-align:center;
  color:#e6dfd1;
  font-size:clamp(18px,2vw,28px);
  letter-spacing:.06em;
  opacity:0;
  transition:opacity .8s ease;
}

.rt-endingCine__final{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:linear-gradient(to bottom, rgba(8,10,16,.10), rgba(5,6,10,.82));
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
}

.rt-endingCine__final--show{
  opacity:1;
  pointer-events:auto;
}

.rt-endingCine__title{
  font-size:clamp(30px,6vw,68px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e8dfcf;
}

.rt-endingCine__subtitle{
  font-size:clamp(14px,2vw,24px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#bfc9e0;
}