/* Progression UI overlays the existing tutorial's working joystick and HUD. */
.campaign .chapter.level-select{padding:9px 11px;background:#152b35d4;border:1px solid #bde5dc70;border-radius:10px;font-size:11px;color:#e9dab4;cursor:pointer}
.campaign .top{gap:6px}.campaign .top-actions{gap:5px}
.campaign .top-actions button{width:37px;height:37px;flex:0 0 37px}
.campaign #mission{top:69px}
.campaign .level-motif{text-align:center;margin-top:6px;color:#aecbc8;font:10px/1.3 Georgia,serif;letter-spacing:.07em}
.campaign .systems-hud{top:173px}
.campaign .fragments{gap:9px}.campaign .fragments span{width:25px;height:25px;font-size:16px}
.campaign #introTitle,.campaign #victoryTitle{font-size:clamp(33px,7vw,59px);line-height:1.15}
.campaign #introDescription{font-size:17px}.campaign #victoryStory{font-size:16px}
.campaign .modal-inner{max-height:calc(100dvh - 38px);overflow-y:auto;padding:6px}
.campaign .map-overlay{position:absolute;z-index:20;inset:0;overflow:auto;
 background:radial-gradient(ellipse at 50% 15%,#234046,#091321 67%,#050913);
 padding:24px max(16px,env(safe-area-inset-left)) max(50px,env(safe-area-inset-bottom));
 display:flex;flex-direction:column;gap:13px}
.campaign .map-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.campaign .map-header span{font:10px system-ui;letter-spacing:.18em;color:#aadcd0}
.campaign .map-header h2{font:clamp(22px,5vw,35px) Georgia,serif;letter-spacing:.09em;margin:5px 0;color:#f5dda6}
.campaign .map-header button{display:grid;place-items:center;width:46px;height:46px;background:#132939;border:1px solid #c3e5c86d;border-radius:12px;font-size:24px}
.campaign .map-overlay p{font-size:12px;color:#bcd5cf;margin:0 0 6px}
.campaign .map-overlay p b{color:#a4eab6}
.campaign .level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;max-width:1100px;width:100%;align-self:center}
.campaign .level-tile{min-width:0;min-height:103px;padding:12px 11px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
 border:1px solid #bcd2b64d;background:linear-gradient(145deg,#18323eb0,#0b1422a8);border-radius:14px}
.campaign .level-tile:hover,.campaign .level-tile:focus-visible{border-color:#c2fbe2;background:#2b4f57b9}
.campaign .level-tile.complete{border-color:#81dcb08c}
.campaign .level-tile.current{box-shadow:0 0 0 2px #e9cb9277 inset}
.campaign .tile-num{font:11px system-ui;color:#9fc8bc}.campaign .tile-num strong{color:#b6ecc9}
.campaign .tile-title{font:15px Georgia,serif;color:#ffe9be;max-width:100%;white-space:normal}
.campaign .tile-kind{font:9px system-ui;letter-spacing:.09em;color:#93acae}
.campaign .tile-symbol{font-size:21px;color:#d8e4a9;align-self:end}
.campaign .map-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:auto;align-self:center;width:min(1100px,100%);padding:14px 0}
.campaign .map-foot>*{background:#193341;border:1px solid #b7dabb70;border-radius:12px;padding:13px;color:#e2e6c3;font-size:12px;letter-spacing:.08em}
.campaign .record-line{margin-top:5px}
@media(max-width:640px){
 .campaign .wordmark span{display:none}.campaign .wordmark{font-size:25px}
 .campaign .chapter.level-select{font-size:9px;padding:7px;letter-spacing:.06em}
 .campaign #mission{top:58px}.campaign .systems-hud{top:165px}
 .campaign .level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .campaign .level-tile{min-height:95px;padding:9px}
 .campaign .tile-title{font-size:13px}
 .campaign .modal-inner{gap:9px}
 .campaign .modal h1{font-size:37px}
}
@media(max-height:690px){.campaign .systems-hud{top:137px}.campaign .modal-inner{gap:6px}
 .campaign .modal p{font-size:13px}.campaign .hero-rune{font-size:51px}}
@media(max-width:350px){.campaign .top-actions button{width:32px;flex-basis:32px;height:32px}
 .campaign .chapter.level-select{font-size:8px}}

/*
 * DESKTOP / LAPTOP: a game, not a document.
 * The scroll bars in the victory screenshot came from two nested overflow:auto
 * containers. Reflow the content instead of hiding a clipped panel.
 */
@media (min-width: 768px) {
  html, body, #experience.campaign {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .campaign .modal {
    overflow: hidden;
    padding: clamp(8px, 1.8vh, 24px) 20px;
  }
  /* The rotating light must not enlarge the modal's scrollable rectangle. */
  .campaign .modal-light {
    inset: 0;
    transform-origin: center;
    pointer-events: none;
  }
  .campaign .modal-inner {
    overflow: visible;
    max-height: none;
    margin: auto;
    gap: clamp(5px, 1.4vh, 15px);
  }
  .campaign #victory {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(220px, .88fr);
    gap: clamp(16px, 3vw, 45px);
    align-items: center;
    width: min(820px, calc(100vw - 60px));
    text-align: center;
  }
  .campaign .victory-summary,
  .campaign .victory-actions {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vh, 14px);
    width: 100%;
  }
  .campaign .victory-summary .hero-rune {
    font-size: clamp(33px, 6.5vh, 67px);
    line-height: 1;
  }
  .campaign #victoryTitle {
    font-size: clamp(28px, 5.2vh, 51px);
    line-height: 1.04;
  }
  .campaign #victoryStory {
    font-size: clamp(12px, 1.9vh, 17px);
    line-height: 1.45;
  }
  .campaign #recordMessage {
    padding: 6px 10px;
    font-size: clamp(9px, 1.35vh, 11px);
    margin: 0;
  }
  .campaign #victory .result {
    margin: 0;
    gap: clamp(7px, 1.5vw, 18px);
  }
  .campaign #victory .result > span {
    min-width: 70px;
  }
  .campaign #victory .result b {
    font-size: clamp(20px, 3.5vh, 27px);
  }
  .campaign .victory-actions .primary {
    min-height: clamp(42px, 8vh, 64px);
  }
  .campaign .victory-actions .plain {
    padding: clamp(6px, 1.5vh, 12px);
  }
  .campaign .victory-actions .secondary {
    width: min(360px, 100%);
    padding: clamp(10px, 2.6vh, 17px) 12px;
  }
  /* All 33 map tiles fit on one desktop screen, without another scrollbar. */
  .campaign .map-overlay {
    overflow: hidden;
    padding: clamp(8px, 2vh, 23px) clamp(14px, 2.5vw, 32px);
    gap: clamp(5px, 1vh, 12px);
  }
  .campaign .level-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: min(1240px, 100%);
    max-width: 1240px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: clamp(3px, .75vh, 9px);
    overflow: hidden;
  }
  .campaign .level-tile {
    min-height: 0;
    padding: clamp(4px, .8vh, 11px);
    gap: 2px;
    justify-content: space-between;
    overflow: hidden;
  }
  .campaign .tile-title {
    font-size: clamp(10px, 1.8vh, 15px);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .campaign .tile-num {font-size: clamp(8px, 1.4vh, 11px)}
  .campaign .tile-kind {font-size: clamp(7px, 1.2vh, 9px)}
  .campaign .tile-symbol {font-size: clamp(12px, 2.2vh, 21px)}
  .campaign .map-header h2 {font-size: clamp(21px, 4vh, 35px)}
  .campaign .map-header button {width: 39px; height: 39px}
  .campaign .map-overlay p {font-size: 11px}
  .campaign .map-foot {margin-top: 0; padding: 2px 0}
  .campaign .map-foot > * {padding: 8px 12px}
}
@media (min-width: 768px) and (max-height: 560px) {
  .campaign #victory .victory-summary,
  .campaign #victory .victory-actions {gap: 4px}
  .campaign #victoryTitle {font-size: 28px}
  .campaign #victory .victory-summary .hero-rune {font-size: 32px}
  .campaign #victoryStory {font-size: 12px}
  .campaign .level-tile .tile-symbol {display: none}
  .campaign .level-tile {gap: 0}
}
/* Phones need one *deliberate* vertical scroll on very small screens,
   not two nested scroll regions. */
@media (max-width: 767px) {
  .campaign .modal {overflow-y: auto; overflow-x: hidden}
  .campaign .modal-light {inset: 0}
  .campaign .modal-inner {overflow: visible; max-height: none}
  .campaign .victory-summary,
  .campaign .victory-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
}