/* Tela inicial exclusiva para celulares em orientação vertical. */
@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  html,body,#root{width:100%;height:100%;min-height:0;overflow:hidden}
  .campaign{width:100%;height:100dvh;min-height:0;overflow:hidden}
  .campaignHeader{height:54px;padding:0 10px}
  .campaignHeader strong{font-size:15px}
  .campaignHeader small{font-size:7px}
  .campaignHud{height:48px;grid-template-columns:58px 1fr 54px 50px}
  .campaignHud small{font-size:5px}
  .campaignHud b{font-size:11px}
  .liveStatus{font-size:6px}
  .campaignSea{height:calc(100dvh - 128px)!important;min-height:0!important}
  .campaignFooter{height:26px;padding:0 8px;font-size:6px}

  .campaignStart{padding:6px}
  .startShell{
    width:100%;
    height:100%;
    min-height:0;
    grid-template-columns:38% 62%;
    border-radius:21px;
  }
  .startArtwork{height:100%;min-height:0}
  .startLighthouse{left:-2%;bottom:7%;width:92%;height:65%}
  .startPort{display:none}
  .startBoat{right:6%;bottom:12%;width:43px;height:27px}
  .startSpark{right:14%;top:15%;font-size:22px}

  .startContent{min-height:0;padding:12px 13px 11px;overflow:hidden}
  .startEyebrow{margin:0 0 5px;font-size:7px;line-height:1.15;letter-spacing:.14em}
  .startContent h1{font-size:clamp(23px,7vw,29px);line-height:.93}
  .startLead{margin:7px 0 8px;font-size:10px;line-height:1.35}
  .startProgress{gap:8px;padding:6px 8px;border-radius:13px}
  .startProgressRing{width:39px;height:39px}
  .startProgressRing:before{width:31px;height:31px}
  .startProgressRing b{font-size:9px}
  .startProgress small{font-size:6px}
  .startProgress strong{margin-top:2px;font-size:10px;line-height:1.15}

  .reachedChapters{display:none}
  .mobileChapterPicker{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 30px;
    align-items:center;
    gap:5px;
    margin:7px 0 8px;
    padding:4px;
    border:1px solid #c8e5f5;
    border-radius:13px;
    background:#e9f6ff;
  }
  .mobileChapterPicker>div{min-width:0;text-align:center}
  .mobileChapterPicker small{display:block;color:#6e8cab;font-size:5px;font-weight:900;letter-spacing:.1em}
  .mobileChapterPicker strong{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:2px;color:#174d83;font-size:8px;white-space:nowrap}
  .mobileChapterPicker strong b{width:17px;height:17px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#1679df;color:#fff;font-size:8px}
  .mobileChapterPicker strong span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .mobileChapterPicker>button{
    box-sizing:border-box;
    width:27px;
    height:27px;
    padding:0;
    display:grid;
    place-items:center;
    appearance:none;
    border:1px solid #ffffff5c;
    border-radius:9px;
    background:linear-gradient(145deg,#2493ef,#086dd2);
    box-shadow:0 3px 7px #0c66b837,inset 0 1px 0 #ffffff57;
    line-height:0;
  }
  .mobileChapterPicker>button i{
    box-sizing:border-box;
    display:block;
    width:9px;
    height:9px;
    margin:0;
    border:0;
    border-top:3px solid #fff;
    border-right:3px solid #fff;
    border-radius:1px;
    pointer-events:none;
  }
  .mobileChapterPicker .chapterPrevious i{transform:rotate(-135deg)}
  .mobileChapterPicker .chapterNext i{transform:rotate(45deg)}
  .mobileChapterPicker>button:disabled{opacity:.32;background:#6caee8;box-shadow:inset 0 1px 0 #ffffff4f}

  .startAction{display:block;margin-top:0}
  .startButton{width:100%;min-width:0;padding:10px 8px;border-radius:12px;font-size:9px;box-shadow:0 5px 0 #d97d0b,0 9px 15px #e9952430}
}

@media (orientation:portrait) and (hover:none) and (pointer:coarse) and (max-height:520px){
  .startContent{padding:8px 11px 7px}
  .startEyebrow{margin-bottom:3px;font-size:6px}
  .startContent h1{font-size:22px}
  .startLead{margin:4px 0 5px;font-size:8px;line-height:1.25}
  .startProgress{padding:4px 7px}
  .startProgressRing{width:34px;height:34px}
  .startProgressRing:before{width:27px;height:27px}
  .mobileChapterPicker{margin:5px 0 6px;padding:3px}
  .startButton{padding:8px 7px}
}