/* Shared UI layer for the three review pages.
   This file intentionally only adds low-risk visual overrides.
   It does not change copy, flow, or JS behavior. */

:root{
  --review-page-max:560px;
  --review-shell-pad:clamp(18px,4.9vw,26px);
  --review-shell-bottom:112px;
  --review-card-radius:22px;
  --review-card-radius-sm:18px;
  --review-card-border:rgba(214,177,96,.14);
  --review-card-border-soft:rgba(214,177,96,.09);
  --review-card-bg:linear-gradient(180deg,rgba(18,19,31,.94),rgba(9,10,18,.98));
  --review-card-bg-soft:linear-gradient(180deg,rgba(20,21,34,.82),rgba(10,11,19,.9));
  --review-card-shadow:0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  --review-image-radius:20px;
  --review-image-shadow:0 18px 38px rgba(0,0,0,.24);
  --review-text-soft:rgba(240,231,215,.78);
  --review-text-faint:rgba(214,204,186,.62);
}

html,body{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -18%,rgba(212,168,83,.12),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(44,74,120,.12),transparent 28%),
    linear-gradient(180deg,#05060d 0%,#070a13 42%,#090b14 100%);
}

body{
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 22%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 120px);
  opacity:.18;
}

.S{
  overflow-x:hidden;
}

.S-wrap{
  max-width:var(--review-page-max);
  padding:0 var(--review-shell-pad) var(--review-shell-bottom);
}

.t-body,
.insight-text,
.scene-text,
.scene-opt .otxt,
.scene-opt .odetail,
.state-solution-copy,
.state-solution-callout-body,
.state-solution-point-copy,
.state-solution-preview-caption,
.state-solution-close-copy,
.state-bridge-copy,
.state-hex-guide-copy,
.state-hex-guide-focus{
  color:var(--review-text-soft);
}

.nav{
  padding-left:max(22px,env(safe-area-inset-left,0px) + 18px);
  padding-right:max(22px,env(safe-area-inset-right,0px) + 18px);
  gap:14px;
}

.nav .btn-primary,
.nav .btn-ghost{
  min-height:54px;
}

.btn-primary,
.btn-ghost{
  width:100%;
  max-width:100%;
}

.btn-primary{
  border-radius:999px;
  padding:17px 22px;
  letter-spacing:3.2px;
  box-shadow:0 10px 28px rgba(212,168,83,.24),0 1px 0 rgba(240,215,140,.28) inset;
}

.btn-ghost{
  padding:15px 22px;
  border-color:rgba(222,210,191,.16);
  background:rgba(255,255,255,.018);
}

.glass,
.round-entry-panel,
.scene-card,
.state-solution-shot,
.state-solution-callout,
.state-solution-preview-card,
.paywall-v2-price-box,
.beast-quote-card,
.share-card-v2,
.book-focus-preview-sheet,
.paywall-v2-preview-card-sheet,
.paywall-v2-thumb-sheet,
.unlock-preview-sheet{
  border-radius:var(--review-card-radius) !important;
  border-color:var(--review-card-border);
  box-shadow:var(--review-card-shadow);
}

.glass,
.round-entry-panel,
.state-solution-callout,
.state-solution-preview-card,
.paywall-v2-price-box,
.beast-quote-card{
  background:var(--review-card-bg);
}

.scene-card,
.state-solution-shot,
.share-card-v2{
  background:var(--review-card-bg-soft);
}

.scene-header,
.scene-body,
.round-entry-panel,
.state-solution-preview-card,
.paywall-v2-price-box,
.beast-quote-card{
  padding-left:clamp(16px,4.4vw,24px);
  padding-right:clamp(16px,4.4vw,24px);
}

.scene-header{
  padding-top:15px;
  padding-bottom:15px;
}

.scene-body{
  padding-top:18px;
  padding-bottom:20px;
}

.insight,
.state-solution,
.state-solution-points,
.state-solution-preview-grid,
.state-hex-guide-values,
.offline-dice-guide{
  gap:18px;
}

.full-sep,
.state-solution-rule,
.state-bridge-line,
.paywall-v2-price-divider{
  background:linear-gradient(90deg,transparent,rgba(214,177,96,.34),transparent);
}

.beast-stage,
.state-solution-shot.medium,
.paywall-v2-hex-frame,
.book-focus-preview-sheet,
.unlock-preview-sheet{
  margin-left:auto;
  margin-right:auto;
}

.beast-stage.with-art{
  max-width:min(100%,326px);
}

.beast-card-premium,
.beast-frame,
.round-transition-screen,
.state-solution-shot,
.state-solution-preview-slot,
.paywall-v2-hex-frame img,
.screenshot-card img,
.lightbox img,
.book-focus-preview-sheet,
.book-focus-preview-sheet img,
.unlock-preview-sheet,
.unlock-preview-sheet img,
.paywall-v2-preview-card-sheet,
.paywall-v2-preview-card-sheet img,
.paywall-v2-thumb-sheet,
.paywall-v2-thumb-sheet img{
  border-radius:var(--review-image-radius);
}

img{
  max-width:100%;
  height:auto;
}

.screenshot-card img,
.state-solution-shot img,
.paywall-v2-hex-frame img,
.book-focus-preview-sheet img,
.unlock-preview-sheet img,
.paywall-v2-preview-card-sheet img,
.paywall-v2-thumb-sheet img,
.lightbox img{
  width:100%;
  display:block;
  object-fit:cover;
  box-shadow:var(--review-image-shadow);
}

.share-card-v2 .img-zone,
.beast-img-zone,
#s-result .beast-img-zone,
#s-result .share-card-v2 .img-zone{
  border-radius:calc(var(--review-image-radius) + 2px);
}

.beast-img-zone,
.share-card-v2 .img-zone{
  overflow:hidden;
}

.beast-img-zone .beast-img,
.share-card-v2 .img-art{
  background-size:cover;
  background-repeat:no-repeat;
}

.paywall-v2-price-box,
.state-solution-preview-card.featured,
.state-solution-shot.featured{
  border-color:rgba(224,184,112,.22);
}

.paywall-v2-price-copy,
.paywall-v2-image-line,
.state-solution-subtitle,
.state-solution-note,
.state-bridge-mark,
.paywall-v2-price-valid,
.round-entry-helper,
.round-entry-note,
.helper-note{
  color:var(--review-text-faint);
}

.paywall-v2-price-final,
.paywall-v2-price-num.now,
.intro-report-price,
.state-bridge-main,
.state-bridge-focus,
.state-hex-message .paywall-v2-message-text,
.state-solution-block-title,
.state-solution-close-focus{
  text-shadow:0 0 20px rgba(212,168,83,.12);
}

.state-solution-preview-slot{
  min-height:164px;
  padding:16px;
}

.state-solution-preview-card.featured .state-solution-preview-slot{
  min-height:228px;
}

.state-solution-point{
  grid-template-columns:minmax(18px,auto) 1fr;
}

.review-beast-line,
.offline-dice-status,
.round-entry-locked,
.paywall-v2-price-anchor-row{
  row-gap:10px;
}

.scene-opt,
.round-entry-example,
.round-entry-input,
.bazi-compare-item .v,
.paywall-v2-price-valid{
  border-radius:var(--review-card-radius-sm);
}

.scene-opt .copy,
.state-solution-copy,
.state-solution-callout-body,
.state-solution-point-copy,
.state-hex-guide-copy,
.state-hex-guide-focus{
  min-width:0;
  overflow-wrap:anywhere;
}

.full-width-section{
  width:100%;
  max-width:none;
}

#s-result .full-width-section .reveal{
  padding-left:clamp(14px,4.2vw,20px) !important;
  padding-right:clamp(14px,4.2vw,20px) !important;
}

@media (max-width:414px){
  :root{
    --review-shell-bottom:104px;
    --review-image-radius:18px;
  }

  .S-wrap{
    padding-left:18px;
    padding-right:18px;
  }

  .t-display{
    letter-spacing:6px;
  }

  .round-entry-title,
  .round-transition-phrase,
  .round-end-title{
    letter-spacing:5px;
  }

  .beast-name-big,
  .beast-name{
    letter-spacing:10px;
  }

  .state-solution-preview-slot{
    min-height:152px;
  }
}

@media (max-width:390px){
  :root{
    --review-shell-bottom:100px;
    --review-card-radius:20px;
    --review-card-radius-sm:16px;
  }

  .S-wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .nav{
    padding-left:16px;
    padding-right:16px;
    gap:10px;
  }

  .btn-primary,
  .btn-ghost{
    font-size:14px;
    letter-spacing:2.4px;
  }

  .paywall-v2-price-anchor-row{
    gap:12px;
  }

  .beast-img-zone,
  .share-card-v2 .img-zone{
    height:min(74vw,304px);
  }

  #s-result .beast-img-zone{
    height:min(70vw,270px);
  }
}

@media (max-width:375px){
  .S-wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .nav{
    padding-left:14px;
    padding-right:14px;
  }

  .round-entry-panel,
  .scene-body,
  .state-solution-preview-card,
  .paywall-v2-price-box,
  .beast-quote-card{
    padding-left:14px;
    padding-right:14px;
  }

  .t-sub,
  .round-transition-note,
  .state-hex-guide-copy,
  .state-solution-copy,
  .state-solution-callout-body{
    letter-spacing:.4px;
  }

  .beast-plate-tag,
  #s-result .beast-plate-tag{
    letter-spacing:5px;
    text-indent:5px;
  }

  .state-solution-preview-card.featured .state-solution-preview-slot{
    min-height:208px;
  }
}