/* The viewport is the game board. Only the flight manual can scroll. */
html { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body {
  position:fixed; top:var(--viewport-top,0px); left:0; right:0;
  width:100%; height:var(--app-height,100dvh); min-height:0;
  overflow:hidden; overscroll-behavior:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
button, summary, input { touch-action:manipulation; }
button:focus-visible, summary:focus-visible { outline:2px solid var(--bone); outline-offset:-5px; }
header { flex:none; padding:8px 14px; min-width:0; gap:8px; }
.brand, .brand .txt, .topright { min-width:0; }
.brand h1 { font-size:clamp(12px,3.4vw,20px); white-space:nowrap; }
.icon-btn { width:44px; height:44px; }
.fuel { min-width:0; }
.fuel .val { white-space:nowrap; font-size:clamp(13px,3.8vw,18px); }
.shell {
  flex:1 1 0; min-height:0; width:100%; max-width:660px;
  grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"right" "center"; gap:8px; padding:0 14px 10px;
  border:0; margin:0; background:none; clip-path:none;
}
.rail-left { display:none; }
.rail-right { min-height:0; min-width:0; padding:0; }
.environment-caption, .rail-head, .footnote { display:none; }
.missions { flex-direction:row; gap:6px; }
.mission { min-width:0; min-height:48px; padding:6px; gap:6px; }
.mission img { width:24px; height:24px; }
.mission .m1 { font-size:11px; letter-spacing:0; }
.mission .m2 { font-size:9px; letter-spacing:0; line-height:1.25; }
.col-center { min-height:0; padding:0; justify-content:flex-start; gap:8px; }
.track, .track-lbl, .history, .stats { display:none; }
.readouts { flex:none; width:100%; max-width:none; margin:0; gap:8px; }
.readout { min-width:0; padding:7px 6px; overflow:hidden; }
.readout .lbl { font-size:9px; letter-spacing:1px; }
.readout .big { font-size:clamp(24px,5.4vw,34px); line-height:1.15; white-space:nowrap; }
.stage {
  flex:1 1 0; min-height:0; min-width:0; margin:0;
  align-items:center; overflow:hidden; isolation:isolate;
}
.card {
  flex:none; width:var(--card-width,160px); height:var(--card-height,240px);
  max-width:100%; max-height:100%; border-width:3px;
}
#portalRing { width:var(--portal-size,280px); height:var(--portal-size,280px); }
.card-label { padding:24px 7px 9px; }
.cl-name { font-size:clamp(9px,calc(var(--card-height,240px) * .05),13px); letter-spacing:.4px; overflow-wrap:anywhere; }
.cl-val { font-size:clamp(16px,calc(var(--card-height,240px) * .1),26px); }
.card-idle-txt .t1 { font-size:clamp(11px,calc(var(--card-height,240px) * .07),20px); }
.card-idle-txt .t2 { font-size:9px; letter-spacing:.8px; }
.controls { flex:none; min-width:0; }
.bet-row { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin:0 0 6px; }
.betA { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:6px; }
.betA .adj { width:44px; height:44px; }
.betA .binp { width:100%; min-width:0; height:44px; font-size:19px; }
.qchips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.qchip { min-width:0; min-height:44px; padding:6px; font-size:14px; }
.btn { font-size:clamp(12px,3.5vw,17px); min-width:0; min-height:50px; padding:8px 6px; }
.hint { margin-top:6px; font-size:11px; line-height:1.3; min-height:29px; overflow-wrap:anywhere; }
canvas#confetti { width:100%; height:100%; }
body.shake { animation:none; }
body.shake .stage { animation:shake .45s cubic-bezier(.36,.07,.19,.97); }

/* Dialog stays inside the safe area; its close control never scrolls away. */
.modal-overlay {
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.modal-box { display:flex; flex-direction:column; min-height:0; max-height:100%; padding:0; overflow:hidden; max-width:500px; }
.modal-heading { position:relative; flex:none; padding:16px 62px 12px 16px; }
.modal-heading h2 { margin:0; font-size:17px; }
.modal-close { top:4px; right:6px; width:44px; height:44px; font-size:16px; }
.modal-content { min-height:0; padding:0 16px 16px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.info-tier { flex-wrap:wrap; gap:3px 8px; }
.info-tier .t-range { white-space:normal; }
.sound-panel { width:100%; min-width:0; margin:0; padding:12px; }
.sound-heading { min-height:44px; letter-spacing:1px; }
.sound-track { margin:6px 0 10px; }
.sound-row input { height:44px; }
#mobileSound { margin-bottom:16px; }
#mobileSound:empty { display:none; }

/* Keep a clear destination choice on even the narrowest phones. */
@media (max-width:599px) {
  header { padding:4px 10px; }
  .brand img, .tagline, .fuel img, .mission img, .mission .m2 { display:none; }
  .brand { gap:0; }
  .topright { gap:4px; }
  .fuel { padding:4px 6px; }
  .shell { padding:0 10px 6px; gap:6px; }
  .mission { justify-content:center; padding:5px 2px; text-align:center; }
  .mission .m1 { font-size:clamp(9px,2.7vw,12px); white-space:nowrap; }
  .col-center { gap:6px; }
}
@media (min-width:420px) {
  .bet-row { grid-template-columns:minmax(0,1fr) minmax(190px,1fr); }
}
@media (max-width:359px) {
  header { padding-left:6px; padding-right:6px; gap:4px; }
  .brand h1 { font-size:11px; letter-spacing:0; }
  .topright { gap:2px; }
  .fuel { padding:3px 4px; }
  .fuel .val { font-size:12px; }
}

/* A cockpit with side rails is reserved for screens that have room for it. */
@media (min-width:1100px) and (min-height:700px) {
  .shell {
    max-width:1280px; grid-template-columns:minmax(220px,1fr) minmax(0,440px) minmax(240px,1fr);
    grid-template-rows:minmax(0,1fr); grid-template-areas:"left center right";
    gap:20px; padding:12px 20px; margin:0 14px 12px; width:calc(100% - 28px);
    border:var(--sw) solid var(--line-2); background:rgba(13,6,28,.34);
  }
  header { max-width:1280px; }
  .rail-left, .rail-right { display:flex; flex-direction:column; justify-content:center; gap:14px; }
  #comm { position:static; }
  .comm-frame { width:clamp(150px,19vh,230px); height:clamp(150px,19vh,230px); }
  .environment-caption, .rail-head { display:flex; margin:0 0 6px; }
  .missions { flex-direction:column; gap:8px; }
  .mission { flex:none; min-height:62px; padding:8px; gap:8px; }
  .mission img { width:32px; height:32px; }
  .mission .m1 { font-size:13px; }
  .mission .m2 { font-size:10px; }
  .track { display:flex; flex:none; }
  .track .cap { width:28px; height:28px; }
  .track .marker { width:26px; height:26px; }
  .track-lbl { display:flex; flex:none; margin:-5px 0 0; }
  .history { display:flex; flex:none; flex-wrap:nowrap; justify-content:flex-end; overflow:hidden; min-height:26px; height:26px; padding:0; margin:0; border:0; }
  .pip { flex:none; }
  .stats { display:flex; flex:none; flex-wrap:nowrap; margin:0; gap:14px; }
  .stats b { font-size:12px; }
  .bet-row { grid-template-columns:minmax(180px,1fr) minmax(190px,1fr); }
  .readout .big { font-size:34px; }
}

/* Landscape phones: card on the left, all touch controls on the right. */
@media (min-width:480px) and (max-height:600px) {
  header { padding:3px 12px; max-width:1000px; }
  .tagline, .brand img, .fuel img { display:none; }
  .shell {
    max-width:1000px; grid-template-columns:minmax(0,1fr) minmax(280px,1fr);
    grid-template-rows:auto minmax(0,1fr); grid-template-areas:"readouts right" "stage controls";
    gap:6px 16px; padding:0 12px 6px;
  }
  .col-center { display:contents; }
  .readouts { grid-area:readouts; align-self:start; }
  .readout { padding:4px; }
  .readout .big { font-size:24px; }
  .stage { grid-area:stage; height:100%; }
  .controls { grid-area:controls; align-self:center; }
  .mission { min-height:48px; justify-content:center; text-align:center; padding:4px 2px; }
  .mission img, .mission .m2 { display:none; }
  .mission .m1 { font-size:10px; white-space:nowrap; }
  .bet-row { grid-template-columns:minmax(0,1fr); }
  .hint { margin-top:4px; min-height:29px; }
  .cl-name { font-size:10px; }
  .cl-val { font-size:19px; }
  .card-idle-txt { padding-bottom:8px; }
  .card-idle-txt .t1 { font-size:14px; }
  .card-idle-txt .t2 { font-size:8px; }
}
@media (max-width:479px) and (max-height:600px) {
  .qchips { display:none; }
}
/* Phone keyboards and very short windows retain the betting controls. */
@media (max-width:599px) and (max-height:500px) {
  .readout { padding:4px; }
  .readout .big { font-size:23px; }
  .hint { min-height:26px; font-size:10px; }
}
@media (max-width:599px) {
  body.keyboard-open .stage, body.keyboard-open .readouts { display:none; }
  body.keyboard-open .col-center { justify-content:center; }
}
@media (max-height:359px) {
  .hint { display:none; }
  .col-center { gap:4px; }
  .bet-row { gap:4px; margin-bottom:4px; }
}