/* EP01 English readability candidate v1.6 — director rework.
   Review-branch only until director approval.

   Goals:
   - keep dialogue readable while player NORMAL / LARGE scale typography only
   - use one choice-card vertical silhouette across 2/3/4/5+ tiers
   - preserve horizontal copy room for sparse tiers so longer English labels stay safe
   - use the already-approved 5+ choice height as the visual density reference
   - smooth the title-card -> game -> Ending Archive typography transition
   - do not override authored frame-device geometry from the typography/readability layer
   - keep transient stat feedback clear of the enlarged speaker tag
*/

/* Dialogue baseline; player TEXT mode overrides the actual desktop size. */
#dialogue-text{
  font-size:33px;
  line-height:1.45;
}

/* Keep the enlarged name tag from v1.5. */
#speaker{
  min-width:154px;
  min-height:48px;
  padding:10px 26px;
  font-size:22px;
  line-height:1.2;
}

/* Keep the enlarged name tag from colliding with transient stat feedback. */
.stat-change{
  left:15.2%;
  bottom:27.5%;
}

/* IMPORTANT: astrolabe/frame-device geometry is intentionally NOT overridden here.
   styles.css owns the authored safe-canvas alignment for the lower-left frame ring. */

/* Choice density rule:
   The director approved the 5+ tier's vertical mass. All 2/3/4/5+ cards now use that same
   outer height. Sparse tiers KEEP their wider horizontal copy room and use slightly thinner
   vertical frame/padding internally so 32px LARGE two-line English still fits safely. */

/* 3 choices default — same height as 5+, full sparse-tier width. */
#choice-layer{
  width:min(68%,1100px);
  gap:.65vh;
}
.choice-button{
  height:clamp(120px,11.95vh,132px);
  border-width:16px 70px;
  line-height:1.26;
  padding:4px 3.8% 8px 3.8%;
}
.choice-button > span:last-child,
.choice-text{
  font-family:var(--font-record);
  font-size:33px;
  line-height:1.26;
  padding-left:3.2%;
  padding-right:1.5%;
}
.choice-key{
  font-family:var(--font-record);
  font-weight:600;
  font-size:24px;
  letter-spacing:.01em;
}

/* Exactly 2 choices — same height and width as the 3-choice tier. */
#choice-layer[data-choice-count="2"]{
  width:min(68%,1100px);
  gap:.65vh;
}
#choice-layer[data-choice-count="2"] .choice-button{
  height:clamp(120px,11.95vh,132px);
  border-width:16px 70px;
  line-height:1.26;
  padding:4px 3.8% 8px 3.8%;
}

/* 4 choices — same outer height, while retaining its established text-size tier. */
#choice-layer.choice-compact-4{
  width:min(69%,1100px);
  gap:.65vh;
}
#choice-layer.choice-compact-4 .choice-button{
  height:clamp(120px,11.95vh,132px);
  border-width:16px 70px;
  line-height:1.26;
  padding:4px 3.4% 8px 3.4%;
}
#choice-layer.choice-compact-4 .choice-text,
#choice-layer.choice-compact-4 .choice-button > span:last-child{
  font-size:30px;
  line-height:1.26;
}
#choice-layer.choice-compact-4 .choice-key{
  font-size:22px;
}

/* 5+ choices: director-approved density lock — visually unchanged. */
#choice-layer.choice-compact-5-plus{
  width:min(72%,1160px);
  gap:.65vh;
}
#choice-layer.choice-compact-5-plus .choice-button{
  height:clamp(120px,11.95vh,132px);
  border-width:20px 70px;
  line-height:1.29;
  padding:5px 3.4% 13px 3.4%;
}
#choice-layer.choice-compact-5-plus .choice-text,
#choice-layer.choice-compact-5-plus .choice-button > span:last-child{
  font-size:28px;
  line-height:1.29;
  padding-left:2.8%;
  padding-right:1.2%;
}
#choice-layer.choice-compact-5-plus .choice-key{
  font-size:20px;
}

/* Title-card typography bridge. */
.title-card-overlay .episode-start-subtitle{
  font-size:clamp(11px,.72vw,13px);
}
.title-card-overlay .archive-card button{
  font-size:clamp(13px,.78vw,15px);
}

/* Ending Archive typography bridge. */
.ending-archive-topline,
.ending-archive-classification{
  font-size:11px;
}
.ending-archive-card p{
  font-size:clamp(18px,1.55vw,22px);
}
.ending-archive-source,
.ending-archive-record-action button,
.ending-archive-controls button{
  font-size:11px;
}

/* Short desktop / compact window.
   All choice tiers use the same 112px outer height. Sparse tiers keep wider copy room and
   reduce only vertical border/padding enough for two-line 32px LARGE copy. */
@media (min-width:761px) and (max-height:800px){
  .stat-change{
    left:15.2%;
    bottom:28.5%;
  }

  #choice-layer{
    width:min(88%,1080px);
    gap:.55vh;
  }
  .choice-button{
    height:112px;
    border-width:12px 58px;
    line-height:1.23;
    padding:3px 3.0% 5px 3.0%;
  }
  .choice-button > span:last-child,
  .choice-text{
    line-height:1.23;
  }

  #choice-layer[data-choice-count="2"]{
    width:min(88%,1080px);
    gap:.55vh;
  }
  #choice-layer[data-choice-count="2"] .choice-button{
    height:112px;
    border-width:12px 58px;
    line-height:1.23;
    padding:3px 3.0% 5px 3.0%;
  }

  #choice-layer.choice-compact-4{
    width:min(88%,1040px);
    gap:.55vh;
  }
  #choice-layer.choice-compact-4 .choice-button{
    height:112px;
    border-width:12px 58px;
    line-height:1.23;
    padding:3px 3.0% 5px 3.0%;
  }
  #choice-layer.choice-compact-4 .choice-text,
  #choice-layer.choice-compact-4 .choice-button > span:last-child{
    line-height:1.23;
  }

  #choice-layer.choice-compact-5-plus{
    width:min(78%,1040px);
    gap:.55vh;
  }
  #choice-layer.choice-compact-5-plus .choice-button{
    height:112px;
    border-width:16px 58px;
    padding:4px 3.2% 10px 3.2%;
  }
  #choice-layer.choice-compact-5-plus .choice-text,
  #choice-layer.choice-compact-5-plus .choice-button > span:last-child{
    font-size:28px;
    line-height:1.28;
  }
}

/* Small-screen responsive typography: match all choice tiers to the existing 5+ height. */
@media (max-width:760px){
  .stat-change{
    left:16%;
    bottom:31%;
  }

  #choice-layer,
  #choice-layer.choice-compact-4,
  #choice-layer.choice-compact-5-plus{
    width:92%;
    gap:.55vh;
  }

  .choice-button,
  #choice-layer[data-choice-count="2"] .choice-button,
  #choice-layer.choice-compact-4 .choice-button{
    height:clamp(91px,12.8vh,103px);
    border-width:14px 48px;
    padding:3px 3.2% 5px 3.2%;
  }
  .choice-button > span:last-child,
  .choice-text{
    font-size:clamp(15px,3.15vw,18px);
  }

  #choice-layer[data-choice-count="2"]{
    width:92%;
  }

  #choice-layer.choice-compact-4 .choice-text,
  #choice-layer.choice-compact-4 .choice-button > span:last-child{
    font-size:clamp(14px,2.9vw,17px);
  }

  #choice-layer.choice-compact-5-plus .choice-button{
    height:clamp(91px,12.8vh,103px);
    border-width:20px 48px;
    padding:4px 3.2% 7px 3.2%;
  }
  #choice-layer.choice-compact-5-plus .choice-text,
  #choice-layer.choice-compact-5-plus .choice-button > span:last-child{
    font-size:clamp(13px,2.65vw,16px);
  }
  #choice-layer.choice-compact-5-plus .choice-key{
    font-size:clamp(12px,2.45vw,15px);
  }
}