.home-view {
  min-height: 650px;
  display: grid;
  place-items: center;
}

.hero {
  width: 100%;
  min-height: 590px;
  padding: clamp(28px, 6vw, 72px);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(130deg, rgba(255,253,249,.96), rgba(241,229,211,.94)),
    var(--surface);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(204,85,77,.22);
  border-radius: 50%;
}
.hero::before { width: 420px; height: 420px; top: -210px; inset-inline-end: -90px; }
.hero::after { width: 250px; height: 250px; bottom: -120px; inset-inline-start: -70px; }

.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 440px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
}

.hero-copy h1 {
  margin: 10px 0 16px;
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  line-height: 1;
}
.hero-copy h1 span { color: var(--accent); }
.hero-copy p { color: var(--muted); max-width: 620px; font-size: 1.05rem; }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.stage-preview {
  min-height: 390px;
  border-radius: 34px;
  background:
    linear-gradient(to bottom, #e8d5bc 0 40%, #c8ad8a 40% 42%, #d8c3a6 42%);
  border: 10px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.stage-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(38,63,99,.92) 0 12%, transparent 12% 88%, rgba(38,63,99,.92) 88%),
    linear-gradient(180deg, rgba(38,63,99,.35), transparent 25%);
}

.preview-arch {
  position: absolute;
  width: 52%;
  height: 60%;
  top: 20%;
  right: 24%;
  border: 10px solid rgba(255,253,249,.72);
  border-bottom: 0;
  border-radius: 100px 100px 0 0;
}

.character-pair {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: end;
  gap: 18px;
}

.character-token {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 42% 42%;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  font-weight: 900;
  user-select: none;
}
.character-token.hakim {
  width: 116px;
  height: 150px;
  background: #e9d2af;
  border: 6px solid #263f63;
  color: #263f63;
}
.character-token.fahima {
  width: 108px;
  height: 138px;
  background: #f0c7a9;
  border: 6px solid #ad3a61;
  color: #ad3a61;
}
.character-token span { font-size: 2.8rem; position: relative; z-index: 1; }
.character-token.has-photo.is-loaded span { opacity: 0; }

.preview-bubble {
  position: absolute;
  top: 28px;
  inset-inline-start: 28px;
  max-width: 210px;
  background: rgba(255,255,255,.92);
  padding: 12px 15px;
  border-radius: 16px 16px 5px 16px;
  font-size: .84rem;
  box-shadow: var(--shadow-sm);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.story-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: .22s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.story-cover {
  min-height: 210px;
  padding: 22px;
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
}
.story-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32,50,79,.48), transparent 55%);
}
.story-cover.market {
  background:
    linear-gradient(to top, rgba(32,50,79,.42), rgba(32,50,79,.12)),
    url('../assets/scenes/market.webp') center/cover no-repeat,
    linear-gradient(145deg, #d3b790, #927454);
}
.story-cover.majlis {
  background:
    linear-gradient(to top, rgba(32,50,79,.42), rgba(32,50,79,.12)),
    url('../assets/scenes/majlis.webp') center/cover no-repeat,
    linear-gradient(145deg, #dfcdb7, #9f785d);
}
.story-cover.heritage {
  background:
    linear-gradient(to top, rgba(32,50,79,.42), rgba(32,50,79,.12)),
    url('../assets/scenes/heritage.webp') center/cover no-repeat,
    linear-gradient(145deg, #c9b697, #806c55);
}

.cover-symbol {
  position: absolute;
  inset-inline-end: 22px;
  top: 18px;
  font-size: 4.8rem;
  opacity: .26;
}
.story-theme {
  position: relative;
  z-index: 2;
  color: #fff;
  background: rgba(38,63,99,.76);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.story-body { padding: 20px; }
.story-body h3 { margin: 0 0 8px; font-size: 1.25rem; }
.story-body p { margin: 0 0 16px; color: var(--muted); min-height: 52px; }
.story-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .78rem; margin-bottom: 14px; }

.theatre-wrap {
  display: grid;
  gap: 14px;
}

.theatre-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.story-progress {
  flex: 1;
  height: 7px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.story-progress > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  width: 0;
  border-radius: inherit;
  transition: width .4s ease;
}

.theatre-stage {
  min-height: 600px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 8px solid rgba(255,255,255,.62);
  position: relative;
  isolation: isolate;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.scene-bg.market {
  background:
    linear-gradient(to top, rgba(74,58,42,.28), transparent 38%),
    url('../assets/scenes/market.webp') center/cover no-repeat,
    linear-gradient(145deg, #d5bd9e 0 36%, #be9e77 36% 55%, #9d7a59 55%);
}
.scene-bg.majlis {
  background:
    linear-gradient(to top, rgba(32,50,79,.08), rgba(32,50,79,.18)),
    url('../assets/scenes/majlis.webp') center/cover no-repeat,
    linear-gradient(135deg, #ead9c5 0 45%, #d4b698 45% 72%, #a47b60 72%);
}
.scene-bg.heritage {
  background:
    linear-gradient(to top, rgba(32,50,79,.08), rgba(32,50,79,.20)),
    url('../assets/scenes/heritage.webp') center/cover no-repeat,
    linear-gradient(125deg, #d3bf9e 0 48%, #ad9270 48% 67%, #806c55 67%);
}
.scene-bg.neutral {
  background: linear-gradient(140deg, #efe6d8, #d5c4ad);
}

.scene-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 48px 48px;
}

.scene-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.scene-decor .arch {
  position: absolute;
  width: 28%;
  height: 44%;
  top: 16%;
  border: 8px solid rgba(255,250,242,.58);
  border-bottom: 0;
  border-radius: 100px 100px 0 0;
}
.scene-decor .arch.one { right: 12%; }
.scene-decor .arch.two { left: 12%; }
.scene-decor .rug {
  position: absolute;
  width: 56%;
  height: 12%;
  bottom: 8%;
  left: 22%;
  border-radius: 50%;
  background: rgba(126,80,106,.32);
}

.stage-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(32,50,79,.04), rgba(32,50,79,.22));
  z-index: 0;
  pointer-events: none;
}

.stage-content {
  position: relative;
  z-index: 2;
  min-height: 600px;
  padding: 26px;
  display: grid;
  grid-template-rows: 1fr auto;
}

.stage-cast {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 34px 0;
}

.actor {
  width: 170px;
  min-height: 220px;
  display: grid;
  place-items: end center;
  position: relative;
}
.actor.is-hidden { visibility: hidden; }
.actor-avatar {
  width: 125px;
  height: 176px;
  border-radius: 55% 55% 38% 38%;
  display: grid;
  place-items: center;
  border: 7px solid rgba(255,255,255,.62);
  box-shadow: 0 15px 36px rgba(34,43,40,.18);
  font-weight: 900;
  font-size: 3rem;
}
.actor.hakim .actor-avatar { background: #e3c49a; color: var(--primary); }
.actor.fahima .actor-avatar { background: #efc0a1; color: #ad3a61; }
.actor.other .actor-avatar { background: #d7d1c5; color: #665f56; }
.actor-name {
  position: absolute;
  bottom: -8px;
  background: rgba(255,255,255,.94);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
}

.dialogue-dock {
  width: min(100%, 860px);
  justify-self: center;
  background: rgba(255,253,249,.96);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 112px;
}
.speaker-chip {
  background: var(--primary);
  color: #fff;
  min-width: 78px;
  text-align: center;
  padding: 7px 11px;
  border-radius: 11px;
  font-size: .76rem;
  font-weight: 900;
}
.dialogue-text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 700;
}
.next-btn { min-width: 92px; }

.choice-panel,
.minigame-panel,
.ending-panel {
  width: min(100%, 900px);
  align-self: end;
  justify-self: center;
  background: rgba(255,253,249,.97);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 25px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.choice-panel h2,
.minigame-panel h2,
.ending-panel h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 3vw, 2rem); }
.choice-panel p,
.minigame-panel p { color: var(--muted); margin: 0 0 16px; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.choice-card {
  min-height: 118px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 15px;
  cursor: pointer;
  text-align: right;
  transition: .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.choice-card:hover { border-color: rgba(204,85,77,.7); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.choice-index {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--primary);
  font-weight: 900;
}
.choice-copy { font-weight: 800; }

.consequence {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f4ede2;
  border-right: 4px solid var(--accent);
  font-size: .9rem;
}

.minigame-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.game-option {
  min-height: 90px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  padding: 13px;
  cursor: pointer;
  font-weight: 800;
}
.game-option:hover { border-color: var(--accent); }
.game-option.is-good { border-color: var(--success); background: rgba(166,111,18,.09); }
.game-option.is-off { border-color: var(--danger); background: rgba(164,74,63,.07); }

.feedback-box {
  margin-top: 13px;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--surface-2);
  display: none;
}
.feedback-box.is-visible { display: block; }

.visual-search-area {
  min-height: 210px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(38,63,99,.13), rgba(204,85,77,.15));
  border: 1px dashed rgba(38,63,99,.25);
  position: relative;
  overflow: hidden;
}
.hotspot {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.88);
  background: rgba(38,63,99,.88);
  color: #fff;
  box-shadow: 0 8px 20px rgba(38,63,99,.2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.hotspot:hover { transform: scale(1.06); }
.hotspot.one { top: 22%; right: 18%; }
.hotspot.two { top: 56%; right: 48%; }
.hotspot.three { top: 28%; left: 16%; }

.drag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.drag-item,
.drop-target {
  min-height: 120px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}
.drag-item {
  background: #fff;
  border: 2px solid var(--accent-soft);
  cursor: grab;
  font-weight: 900;
}
.drop-target {
  border: 2px dashed rgba(38,63,99,.35);
  background: rgba(38,63,99,.06);
}
.drop-target.is-over { background: rgba(166,111,18,.13); border-color: var(--success); }

.ending-panel { text-align: center; padding: 28px; }
.ending-badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: #6b4c2e;
  font-size: 2rem;
  border: 8px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm);
}
.ending-panel .ending-title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.ending-summary { max-width: 680px; margin: 0 auto 18px; color: var(--muted); }
.ending-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.reflection {
  max-width: 700px;
  margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.reflection-options { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.reflection-options button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
}

.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.progress-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.progress-cover {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #e9e1d5;
}
.progress-cover .story-theme {
  position: absolute;
  right: 14px;
  bottom: 12px;
}
.progress-card-body { padding: 20px; }
.progress-card h3 { margin: 0 0 8px; }
.progress-card p { color: var(--muted); margin: 0 0 12px; }
.ending-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ending-tag {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .72rem;
}
.ending-tag.unlocked { background: rgba(166,111,18,.1); color: var(--success); }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}


.actor-avatar.has-photo {
  overflow: hidden;
  position: relative;
}
.actor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.actor-avatar.has-photo.is-loaded .actor-fallback {
  opacity: 0;
}
.actor-fallback {
  position: relative;
  z-index: 1;
}
.character-token.has-photo {
  overflow: hidden;
}
.character-token .token-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
\n\n/* =========================================================\n   PRODUCTION ASSETS — Hakim & Fahima\n========================================================= */\n.story-cover.has-real-cover{\n  background-position:center !important;\n  background-size:cover !important;\n  background-repeat:no-repeat !important;\n}\n\n.scene-bg.has-real-image{\n  background-position:center !important;\n  background-size:cover !important;\n  background-repeat:no-repeat !important;\n}\n\n.scene-bg.has-real-image::before{\n  opacity:.08;\n}\n\n.scene-bg.has-real-image + .scene-decor{\n  display:none;\n}\n\n.stage-shade{\n  background:linear-gradient(to bottom, rgba(32,50,79,.02), rgba(32,50,79,.18));\n}\n\n.actor{\n  width:190px;\n  min-height:270px;\n}\n\n.actor-avatar,\n.actor.hakim .actor-avatar,\n.actor.fahima .actor-avatar{\n  width:175px;\n  height:255px;\n  border:0;\n  border-radius:0;\n  background:transparent;\n  box-shadow:none;\n}\n\n.actor-photo{\n  object-fit:contain;\n  object-position:center bottom;\n  filter:drop-shadow(0 14px 18px rgba(32,50,79,.18));\n}\n\n.actor-name{\n  bottom:0;\n  box-shadow:0 5px 14px rgba(32,50,79,.10);\n}\n\n.character-token.hakim,\n.character-token.fahima{\n  width:135px;\n  height:205px;\n  border:0;\n  border-radius:0;\n  background:transparent;\n  box-shadow:none;\n}\n\n.character-token .token-photo{\n  object-fit:contain;\n  object-position:center bottom;\n  filter:drop-shadow(0 12px 16px rgba(32,50,79,.14));\n}\n\n.challenge-scene{\n  width:100%;\n  height:clamp(180px,28vw,300px);\n  margin:16px 0;\n  overflow:hidden;\n  border-radius:18px;\n  border:1px solid rgba(255,255,255,.9);\n  background:#e9e1d5;\n  box-shadow:0 8px 24px rgba(38,63,99,.08);\n}\n\n.challenge-scene img{\n  display:block;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n}\n\n.ending-panel{\n  background:rgba(255,253,249,.94);\n  backdrop-filter:blur(8px);\n}\n\n@media(max-width:640px){\n  .actor{\n    width:126px;\n    min-height:190px;\n  }\n  .actor-avatar,\n  .actor.hakim .actor-avatar,\n  .actor.fahima .actor-avatar{\n    width:118px;\n    height:185px;\n  }\n  .challenge-scene{\n    height:190px;\n  }\n}\n\n.visual-search-area.has-scene-image{\n  min-height:clamp(240px,34vw,360px);\n  background-position:center !important;\n  background-size:cover !important;\n  background-repeat:no-repeat !important;\n  border:1px solid rgba(255,255,255,.85);\n  box-shadow:0 8px 24px rgba(38,63,99,.08);\n}\n\n.stage-preview{\n  background:\n    linear-gradient(to top, rgba(38,63,99,.16), rgba(38,63,99,.03)),\n    url('../../../images/games/masrahna/backgrounds/majlis.png') center/cover no-repeat,\n    #d8c3a6;\n}\n
/* =========================================================
   V3 — Challenge / stage layout stabilization
========================================================= */

/* Keep the theatre as one controlled viewport instead of letting
   challenge cards stretch the whole page vertically. */
.theatre-stage{
  height:clamp(560px, calc(100vh - 185px), 720px);
  min-height:560px;
}

.stage-content{
  height:100%;
  min-height:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

/* Cast floats above the interactive card and no longer consumes a full grid row. */
.stage-cast{
  position:absolute;
  inset:18px 24px auto 24px;
  z-index:3;
  height:235px;
  padding:0;
  align-items:flex-start;
  pointer-events:none;
}

.actor{
  width:150px;
  min-height:220px;
}

.actor-avatar,
.actor.hakim .actor-avatar,
.actor.fahima .actor-avatar{
  width:145px;
  height:215px;
}

.actor-name{
  bottom:2px;
}

/* Interactive cards are deliberately compact and always stay inside the stage. */
.dialogue-dock,
.choice-panel,
.minigame-panel,
.ending-panel{
  position:relative;
  z-index:5;
  width:min(100%, 840px);
  max-width:840px;
  margin-inline:auto;
}

.choice-panel,
.minigame-panel{
  max-height:calc(100% - 150px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.choice-panel h2,
.minigame-panel h2{
  font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  line-height:1.35;
}

.challenge-scene{
  height:clamp(150px, 22vh, 220px);
  margin:12px 0 14px;
}

.visual-search-area{
  min-height:260px;
  height:min(38vh, 330px);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.drag-grid{
  gap:10px;
}

.drag-item,
.drop-target{
  min-height:86px;
}

/* Cleaner decision cards on wide screens. */
.choice-card{
  min-height:96px;
}

/* Keep story library cards balanced. */
.story-cover{
  min-height:200px;
}

@media (max-width: 920px){
  .theatre-stage{
    height:auto;
    min-height:620px;
  }
  .stage-content{
    min-height:620px;
    height:auto;
    overflow:visible;
  }
  .stage-cast{
    height:205px;
  }
  .actor{
    width:128px;
    min-height:195px;
  }
  .actor-avatar,
  .actor.hakim .actor-avatar,
  .actor.fahima .actor-avatar{
    width:120px;
    height:180px;
  }
  .choice-panel,
  .minigame-panel{
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 640px){
  .theatre-stage{
    min-height:680px;
    height:auto;
  }
  .stage-content{
    min-height:680px;
    padding:14px;
    overflow:visible;
  }
  .stage-cast{
    inset:12px 10px auto 10px;
    height:165px;
  }
  .actor{
    width:96px;
    min-height:155px;
  }
  .actor-avatar,
  .actor.hakim .actor-avatar,
  .actor.fahima .actor-avatar{
    width:92px;
    height:142px;
  }
  .dialogue-dock,
  .choice-panel,
  .minigame-panel,
  .ending-panel{
    width:100%;
    max-width:100%;
  }
  .challenge-scene{
    height:180px;
  }
  .visual-search-area{
    min-height:220px;
    height:260px;
  }
  .drag-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4 — Clean covers + cleaner challenge interaction
========================================================= */
.story-cover{
  position:relative;
  min-height:0;
  aspect-ratio:4 / 3;
  padding:0;
  overflow:hidden;
  background:#e9e1d5;
}
.story-cover::before{
  display:none !important;
}
.story-cover-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.story-card:hover .story-cover-img{
  transform:scale(1.025);
}
.story-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(32,50,79,.42), transparent 58%);
  pointer-events:none;
}
.story-theme{
  position:absolute;
  z-index:2;
  inset-inline-end:16px;
  bottom:14px;
  color:#fff;
  background:rgba(38,63,99,.84);
  padding:6px 12px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
}
.cover-symbol{display:none !important;}

/* Avoid nested scrollbars inside the theatre card. */
.theatre-stage{
  height:auto !important;
  min-height:620px;
}
.stage-content{
  height:auto !important;
  min-height:620px;
  overflow:visible !important;
}
.choice-panel,
.minigame-panel{
  max-height:none !important;
  overflow:visible !important;
}
.minigame-panel{
  width:min(100%, 880px);
  padding:20px;
}
.challenge-scene{
  height:clamp(150px, 21vw, 210px);
  margin:10px 0 12px;
  border-radius:16px;
}

/* Cleaner replacement for drag-and-drop. */
.turn-game{
  display:grid;
  gap:12px;
}
.turn-badge{
  min-height:68px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--accent-soft);
  color:var(--primary);
  font-weight:900;
  font-size:1.02rem;
}
.turn-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.turn-option{
  min-height:82px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  padding:12px;
  text-align:center;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.turn-option:hover{
  transform:translateY(-2px);
  border-color:rgba(204,85,77,.7);
  box-shadow:var(--shadow-sm);
}
.turn-option.is-good{
  border-color:var(--success);
  background:rgba(166,111,18,.09);
}
.turn-option.is-off{
  border-color:var(--danger);
  background:rgba(164,74,63,.07);
}

@media(max-width:640px){
  .story-cover{aspect-ratio:5 / 4;}
  .turn-options{grid-template-columns:1fr;}
  .turn-option{min-height:68px;}
  .minigame-panel{padding:15px;}
  .challenge-scene{height:170px;}
}

/* Landing screen inside the existing theatre package. */
body.theatre-home-active {
  --landing-pink:#ad3a61;
  --landing-pink-dark:#9c315d;
  --landing-ink:#17223c;
  --landing-muted:#7d7680;
  --landing-line:#eadfd1;
  background:linear-gradient(180deg,#fffaf4,#fffdf8);
}
body.theatre-home-active .app-header,
body.theatre-home-active .app-footer{display:none;}
body.theatre-home-active .app-main{width:100%;max-width:none;min-height:0;margin:0;}
body.theatre-home-active .home-view{display:block;min-height:0;padding:1.1rem clamp(1rem,3vw,2.4rem) 5rem;color:var(--landing-ink);}

.landing-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  width:min(1450px,100%);
  min-height:640px;
  margin:0 auto;
  padding:clamp(3rem,6vw,6rem);
  overflow:hidden;
  border-radius:0 0 2.25rem 2.25rem;
  background:radial-gradient(circle at 98% 2%,rgba(223,192,244,.62) 0 11rem,transparent 11.1rem),linear-gradient(135deg,#fffdf8 0%,#fff6f8 62%,#fbf0ff 100%);
  box-shadow:0 22px 55px rgba(76,48,29,.07);
}
.landing-copy{position:relative;z-index:2;}
.landing-eyebrow{display:inline-flex;padding:.42rem 1rem;border-radius:999px;color:var(--landing-pink-dark);background:#fde7ef;font-weight:800;font-size:.98rem;}
.landing-copy h1{max-width:690px;margin:1.25rem 0 1rem;font-size:clamp(3.2rem,5.5vw,6.25rem);line-height:1.08;letter-spacing:-.035em;font-weight:500;}
.landing-copy h1 span{display:block;color:var(--landing-pink);}
.landing-copy>p{max-width:700px;margin:0;color:var(--landing-muted);font-size:clamp(1rem,1.5vw,1.35rem);line-height:2;}
.landing-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem;}
.landing-actions .btn{min-width:150px;border-radius:.8rem;}
.landing-actions .btn-primary{background:linear-gradient(135deg,#b53270,#9f255b);box-shadow:0 10px 25px rgba(173,45,104,.2);}
.landing-actions .btn-secondary{color:var(--landing-pink-dark);background:rgba(255,255,255,.86);border:1px solid #dccfc5;}
.landing-safe{display:block;margin-top:1.2rem;color:#8c858a;font-size:.92rem;}
.landing-art{position:relative;}
.landing-art figure{width:min(100%,620px);margin:0 auto;padding:.75rem;border-radius:2.2rem;background:rgba(255,255,255,.92);box-shadow:0 15px 32px rgba(57,32,29,.14);transform:rotate(-.25deg);}
.landing-art img{display:block;width:100%;aspect-ratio:1.55/1;object-fit:cover;border-radius:1.7rem;}
.landing-spark{position:absolute;color:#efc568;font-size:2rem;}
.landing-spark.one{inset:-2.4rem 12% auto auto;}
.landing-spark.two{inset:auto auto -2.5rem 4%;font-size:1.25rem;}

.landing-how{width:min(1380px,100%);margin:0 auto;padding:clamp(4.5rem,7vw,7rem) 1rem 1rem;}
.landing-how-head{text-align:center;}
.landing-how-head>span{color:var(--landing-pink);font-weight:800;}
.landing-how-head h2{margin:.75rem 0 .45rem;font-size:clamp(2.4rem,4vw,4rem);line-height:1.2;font-weight:500;}
.landing-how-head p{margin:0;color:var(--landing-muted);font-size:1.1rem;}
.landing-steps-title{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:3.2rem 0 1.8rem;color:#979096;}
.landing-steps-title strong{color:var(--landing-pink);font-size:1.05rem;}
.landing-steps-title::after{content:"";height:1px;flex:1;order:2;background:var(--landing-line);}
.landing-steps-title span{order:3;}
.landing-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
.landing-steps article{min-height:285px;padding:1.7rem 1.6rem;border:1px solid #e5d9ce;border-radius:1.45rem;background:rgba(255,255,255,.88);box-shadow:0 14px 28px rgba(62,43,31,.05);}
.landing-steps article>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.4rem;}
.landing-steps b{color:#dfd2b5;font-size:2.25rem;}
.landing-steps i{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:.85rem;background:#fce7ef;}
.landing-steps i::before{content:"";width:0;height:0;border-top:.48rem solid transparent;border-bottom:.48rem solid transparent;border-right:.72rem solid var(--landing-pink);transform:rotate(180deg);}
.landing-steps article:nth-child(even) i{background:#fff4cf;}
.landing-steps article:nth-child(even) i::before{border-right-color:#b98917;}
.landing-steps h3{margin:0 0 .7rem;font-size:1.4rem;font-weight:500;}
.landing-steps p{margin:0;color:var(--landing-muted);line-height:1.9;}
.landing-bottom-actions{justify-content:center;margin-top:2.4rem;}

@media(max-width:920px){
  .landing-hero{grid-template-columns:1fr;min-height:auto;padding:4rem 2rem;text-align:center;}
  .landing-copy h1,.landing-copy>p{margin-left:auto;margin-right:auto;}
  .landing-actions{justify-content:center;}
  .landing-art figure{width:min(100%,600px);}
  .landing-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  body.theatre-home-active .home-view{padding:.5rem .75rem 3rem;}
  .landing-hero{padding:3rem 1.1rem;border-radius:0 0 1.5rem 1.5rem;gap:2.5rem;}
  .landing-copy h1{font-size:clamp(2.75rem,14vw,4rem);}
  .landing-copy>p{line-height:1.8;}
  .landing-actions{display:grid;grid-template-columns:1fr;}
  .landing-actions .btn{width:100%;}
  .landing-how{padding:4rem .2rem 0;}
  .landing-steps-title{align-items:flex-start;flex-direction:column;}
  .landing-steps-title::after{width:100%;flex:none;}
  .landing-steps{grid-template-columns:1fr;}
  .landing-steps article{min-height:235px;}
}