*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;background:#090603;color:#f1dfb2}
body{overflow-x:hidden}
button{font-family:inherit}
.app-shell{min-height:100vh;background:
  radial-gradient(circle at 50% 5%,rgba(212,142,48,.12),transparent 36rem),
  linear-gradient(#0d0804,#171009 62%,#090603)}

/* =========================================================
   HERO
   The generated tomb asset is 1672 x 941.
   The container now uses the SAME aspect ratio instead of
   filling the viewport with object-fit:cover.
   Result: the full tomb image stays visible in portrait AND
   landscape instead of being cropped.
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  max-width:1672px;
  aspect-ratio:1672/941;
  margin:0 auto;
  overflow:hidden;
  background:#090603;
  border-bottom:1px solid #7f5426;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:saturate(.92) contrast(1.05) brightness(.83);
}
.hero-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(0,0,0,.01) 0 18%,rgba(0,0,0,.10) 44%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02) 55%,rgba(0,0,0,.22));
}
.hero-copy{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-46%);
  width:min(650px,78%);
  text-align:center;
}
.eyebrow{
  letter-spacing:.36em;
  font-size:clamp(8px,.9vw,12px);
  color:#e5bd69;
  text-shadow:0 2px 5px #000;
}
.hero-copy h1{
  margin:.12em 0 .08em;
  font-size:clamp(29px,5.2vw,88px);
  letter-spacing:.08em;
  line-height:.94;
  color:#f1d38a;
  text-shadow:0 3px 0 #5b3514,0 7px 22px #000;
}
.hero-copy p{
  margin:.45em 0 1.05em;
  color:#ead9b2;
  font-size:clamp(10px,1.35vw,18px);
  text-shadow:0 2px 5px #000;
}
.enter-btn{
  width:min(450px,85%);
  padding:clamp(10px,1.2vw,18px) clamp(18px,2vw,30px);
  border:2px solid #f3cf7c;
  border-radius:4px;
  background:linear-gradient(#d8ad59,#9f641e);
  color:#211307;
  font-weight:700;
  letter-spacing:.13em;
  font-size:clamp(11px,1.2vw,16px);
  box-shadow:0 6px 0 #563313,0 14px 32px #0009;
  cursor:pointer;
}
.enter-btn:hover{filter:brightness(1.08)}
.enter-btn:active{transform:translateY(2px);box-shadow:0 4px 0 #563313,0 9px 24px #0008}
.enter-btn:disabled{opacity:.7;cursor:wait}
.hero-status{display:none}


/* =========================================================
   RESULT AREA
   v1.9: the scroll is now a BUTTON SURFACE only.
   All explanatory text lives above it so nothing can collide
   with the decorative rolls or parchment edges.
   ========================================================= */
.fate-section{
  padding:34px 16px 70px;
  max-width:1120px;
  margin:0 auto;
}
.hidden{display:none}
.divider{
  display:block;
  max-width:min(820px,90vw);
  width:100%;
  margin:0 auto 6px;
  filter:drop-shadow(0 7px 10px #0008);
}

.fate-heading{
  text-align:center;
  margin:0 auto 14px;
  max-width:720px;
  padding:0 18px;
}
.fate-heading h2{
  margin:0 0 6px;
  color:#ebd5a4;
  font-size:clamp(26px,4vw,42px);
  line-height:1.05;
  text-shadow:0 2px 4px #0008;
}
.fate-heading p{
  margin:0;
  color:#cbb78d;
  font-size:clamp(12px,1.5vw,16px);
}

/* Asset ratio: 2172 x 724 */
.scroll-wrap{
  position:relative;
  width:min(100%,980px);
  aspect-ratio:2172/724;
  margin:0 auto;
}
.scroll-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  filter:drop-shadow(0 16px 25px #0008);
}
.scroll-content{
  position:absolute;
  z-index:2;
  /* generous interior safe area; only the button lives here */
  left:18%;
  right:18%;
  top:28%;
  bottom:28%;
  display:grid;
  place-items:center;
}
.accept-btn{
  position:relative;
  width:min(440px,82%);
  padding:clamp(10px,1.2vw,16px) clamp(22px,2.2vw,34px);
  border:2px solid #805321;
  border-radius:4px;
  color:#281708;
  background:linear-gradient(#efd9a2,#c79648);
  box-shadow:inset 0 0 12px #6f461f33,0 5px 0 #70441a,0 10px 20px #0005;
  font-weight:700;
  letter-spacing:.12em;
  font-size:clamp(11px,1.15vw,15px);
  cursor:pointer;
}
.accept-btn:before,.accept-btn:after{
  content:"";
  position:absolute;
  top:-6px;bottom:-6px;
  width:22px;
  border:2px solid #70451d;
  background:radial-gradient(circle,#f4dfa8 0 17%,#d1a35b 18% 58%,#966329 59% 100%);
}
.accept-btn:before{left:-14px;border-radius:50% 28% 28% 50%}
.accept-btn:after{right:-14px;border-radius:28% 50% 50% 28%}
.accept-btn:hover{filter:brightness(1.06)}
.accept-btn:active{transform:translateY(2px)}
.copy-status{
  min-height:1.2em;
  margin:10px auto 0;
  text-align:center;
  font-weight:700;
  color:#c89d5d;
  font-size:clamp(10px,1vw,13px);
}

@media(max-width:600px){
  .hero-copy{width:72%;transform:translate(-50%,-43%)}
  .hero-copy h1{font-size:clamp(28px,8vw,43px)}
  .eyebrow{letter-spacing:.26em}
  .enter-btn{width:86%;padding:10px 12px;font-size:11px}
  .inscription-left,.inscription-right{opacity:.46}
  .fate-section{padding-top:24px}
  .divider{margin-bottom:2px}
  .fate-heading{margin-bottom:8px}
  .fate-heading h2{font-size:26px}
  .fate-heading p{font-size:12px}
  .scroll-wrap{width:100%}
  .scroll-content{left:20%;right:20%;top:30%;bottom:30%}
  .accept-btn{width:90%;padding:9px 12px;font-size:10px}
  .accept-btn:before,.accept-btn:after{width:18px;top:-5px;bottom:-5px}
  .accept-btn:before{left:-12px}.accept-btn:after{right:-12px}
}

/* Landscape phones:
   Give the title/button a little more breathing room while still
   showing the ENTIRE tomb artwork. */
@media(max-height:520px) and (orientation:landscape){
  .hero-copy{width:58%;transform:translate(-50%,-44%)}
  .hero-copy h1{font-size:clamp(31px,7vw,64px)}
  .hero-copy p{font-size:clamp(10px,1.6vw,14px);margin:.2em 0 .65em}
  .enter-btn{padding:9px 20px}
}