/* Responsive gameplay layout: readable controls, top navigation and no page scroll. */
@media (max-width:759px){
  .app[data-stage="scene"],
  .app[data-stage="sybille"],
  .app[data-stage="score"]{
    width:100%;
    height:100dvh;
    min-height:0;
    margin:0;
    padding:max(5px,env(safe-area-inset-top)) 10px max(4px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-rows:38px minmax(0,1fr) 3px;
    overflow:hidden;
  }

  .app[data-stage="scene"] .topbar,
  .app[data-stage="sybille"] .topbar,
  .app[data-stage="score"] .topbar{
    grid-row:1;
    height:38px;
    padding:0 4px;
    gap:7px;
  }

  .app[data-stage="scene"] .shell,
  .app[data-stage="sybille"] .shell,
  .app[data-stage="score"] .shell{
    grid-row:2;
    min-height:0;
    display:grid;
    border-radius:24px;
  }

  .app[data-stage="scene"] .progress,
  .app[data-stage="sybille"] .progress,
  .app[data-stage="score"] .progress{
    grid-row:3;
  }

  .app[data-stage="scene"] main,
  .app[data-stage="sybille"] main,
  .app[data-stage="score"] main{
    min-height:0;
    overflow:hidden;
  }

  .app[data-stage="scene"] .screen-enter,
  .app[data-stage="sybille"] .screen-enter,
  .app[data-stage="score"] .screen-enter{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  /* Decision scenes */
  .app[data-stage="scene"] .shell{
    grid-template-rows:clamp(145px,22dvh,210px) minmax(0,1fr);
  }

  .app[data-stage="scene"] .hero{
    height:auto;
  }

  .app[data-stage="scene"] main{
    padding:11px 14px 12px;
  }

  .app[data-stage="scene"] .scene-dots{
    margin:0 auto 8px;
  }

  .app[data-stage="scene"] .eyebrow{
    display:none;
  }

  .app[data-stage="scene"] .scene-title{
    margin-bottom:7px;
    font-size:clamp(26px,7.2vw,31px);
    line-height:.98;
  }

  .app[data-stage="scene"] .scene-terminal{
    min-height:108px;
    margin-top:2px;
    padding:10px 12px 9px;
  }

  .app[data-stage="scene"] .terminal-label{
    margin-bottom:6px;
  }

  .app[data-stage="scene"] .terminal-text{
    min-height:0;
    font-size:clamp(11.2px,3.1vw,13px);
    line-height:1.36;
    letter-spacing:.018em;
  }

  .app[data-stage="scene"] #sceneChoices{
    margin-top:auto;
  }

  .app[data-stage="scene"] .question{
    margin:9px 0 6px;
    font-size:9px;
  }

  .app[data-stage="scene"] .choices{
    gap:7px;
  }

  .app[data-stage="scene"] .choice{
    min-height:54px;
    padding:9px 12px;
    grid-template-columns:30px 1fr 16px;
    gap:10px;
  }

  .app[data-stage="scene"] .choice b{
    font-size:clamp(15.5px,4.25vw,17px);
    line-height:1.12;
  }

  .app[data-stage="scene"] .arrow{
    font-size:23px;
  }

  /* Sybille takeover */
  .app[data-stage="sybille"] .shell{
    grid-template-rows:clamp(88px,13dvh,120px) minmax(0,1fr);
  }

  .app[data-stage="sybille"] .hero{
    height:auto;
  }

  .app[data-stage="sybille"] main{
    padding:8px 13px 9px;
  }

  .app[data-stage="sybille"] .sybille-seal{
    width:46px;
    height:46px;
    margin:0 auto 8px;
  }

  .app[data-stage="sybille"] .sybille-seal span{
    font-size:22px;
  }

  .app[data-stage="sybille"] .eyebrow{
    margin-bottom:4px;
  }

  .app[data-stage="sybille"] .sybille-terminal{
    min-height:124px;
    margin-top:2px;
    padding:9px 11px;
  }

  .app[data-stage="sybille"] .terminal-text{
    min-height:0;
    font-size:clamp(10.5px,2.95vw,12px);
    line-height:1.32;
  }

  .app[data-stage="sybille"] .sybille-command{
    min-height:39px;
    margin-top:6px;
    padding-top:6px;
  }

  .app[data-stage="sybille"] .decision-options{
    gap:5px;
    margin-top:7px;
  }

  .app[data-stage="sybille"] .decision-option{
    min-height:36px;
    padding:7px 10px;
    font-size:10px;
  }

  .app[data-stage="sybille"] .sybille-result{
    margin-top:7px;
  }

  .app[data-stage="sybille"] .sybille-result strong{
    font-size:17px;
    line-height:1.08;
  }

  .app[data-stage="sybille"] .sybille-result span{
    margin-top:4px;
    font-size:13px;
  }

  .app[data-stage="sybille"] .nav{
    margin-top:7px;
  }

  .app[data-stage="sybille"] .primary{
    min-height:42px;
    padding:9px 12px;
  }

  /* Final score */
  .app[data-stage="score"] .shell{
    grid-template-rows:clamp(66px,9dvh,94px) minmax(0,1fr);
  }

  .app[data-stage="score"] .hero{
    height:auto;
  }

  .app[data-stage="score"] main{
    padding:8px 14px 9px;
  }

  .app[data-stage="score"] .judgment-label{
    margin:0 0 5px;
    font-size:9px;
  }

  .app[data-stage="score"] .score-number{
    font-size:66px;
  }

  .app[data-stage="score"] .score-max{
    margin-top:2px;
  }

  .app[data-stage="score"] .outcome-card{
    margin-top:7px;
  }

  .app[data-stage="score"] .simulation{
    margin:7px 0;
    line-height:1.35;
  }

  .app[data-stage="score"] .share-preview{
    margin-top:5px;
    padding:9px 11px;
  }

  .app[data-stage="score"] .share-preview strong{
    font-size:20px;
  }

  .app[data-stage="score"] .share-preview span{
    line-height:1.35;
  }

  .app[data-stage="score"] .mission-time{
    margin-top:5px;
  }

  .app[data-stage="score"] .nav{
    margin-top:auto;
    gap:6px;
  }

  .app[data-stage="score"] .nav button{
    min-height:40px;
    padding:8px 11px;
  }
}

/* Very short mobile viewports: reduce imagery and spacing, not readable type. */
@media (max-width:759px) and (max-height:650px){
  .app[data-stage="scene"],
  .app[data-stage="sybille"],
  .app[data-stage="score"]{
    grid-template-rows:35px minmax(0,1fr) 3px;
    padding:3px 7px;
  }

  .app[data-stage="scene"] .topbar,
  .app[data-stage="sybille"] .topbar,
  .app[data-stage="score"] .topbar{
    height:35px;
  }

  .app[data-stage="scene"] .shell{
    grid-template-rows:112px minmax(0,1fr);
  }

  .app[data-stage="scene"] main{
    padding:6px 9px 7px;
  }

  .app[data-stage="scene"] .scene-dots{
    margin-bottom:4px;
  }

  .app[data-stage="scene"] .scene-title{
    margin-bottom:4px;
    font-size:23px;
  }

  .app[data-stage="scene"] .scene-terminal{
    min-height:88px;
    padding:6px 8px;
  }

  .app[data-stage="scene"] .terminal-label{
    margin-bottom:3px;
  }

  .app[data-stage="scene"] .terminal-text{
    font-size:10.5px;
    line-height:1.24;
  }

  .app[data-stage="scene"] .question{
    margin:5px 0 4px;
  }

  .app[data-stage="scene"] .choices{
    gap:5px;
  }

  .app[data-stage="scene"] .choice{
    min-height:46px;
    padding:6px 9px;
  }

  .app[data-stage="scene"] .choice b{
    font-size:14px;
  }

  .app[data-stage="sybille"] .shell{
    grid-template-rows:68px minmax(0,1fr);
  }

  .app[data-stage="sybille"] main{
    padding:5px 9px 6px;
  }

  .app[data-stage="sybille"] .sybille-seal{
    display:none;
  }

  .app[data-stage="sybille"] .sybille-terminal{
    min-height:104px;
  }

  .app[data-stage="sybille"] .terminal-text{
    font-size:10px;
    line-height:1.23;
  }

  .app[data-stage="sybille"] .decision-option{
    min-height:32px;
    padding:6px 9px;
  }

  .app[data-stage="score"] .shell{
    grid-template-rows:54px minmax(0,1fr);
  }

  .app[data-stage="score"] main{
    padding:5px 9px 6px;
  }

  .app[data-stage="score"] .score-number{
    font-size:52px;
  }

  .app[data-stage="score"] .outcome-card{
    padding:7px 9px 6px;
  }

  .app[data-stage="score"] .outcome-row{
    min-height:27px;
  }

  .app[data-stage="score"] .share-preview{
    padding:6px 8px;
  }

  .app[data-stage="score"] .nav button{
    min-height:35px;
    padding:6px 9px;
  }
}