:root{
  --gold:#b87908;
  --gold-dark:#805100;
  --ink:#20170f;
  --paper:#f7e7bd;
  --paper-2:#edd39c;
  --blue:#07549a;
  --blue-dark:#003c76;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow:hidden;
  background:#b99055;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
}
body{
  min-height:100svh;
}
.viewport{
  position:relative;
  width:100vw;
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}
.viewport::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image:var(--bg);
  background-position:center;
  background-size:cover;
  filter:blur(22px) brightness(.72) saturate(.9);
  transform:scale(1.08);
  z-index:-2;
}
.viewport::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(20,13,7,.14);
  z-index:-1;
}
.stage{
  position:relative;
  width:min(100vw,75svh);
  height:min(100svh,133.333vw);
  aspect-ratio:3/4;
  overflow:hidden;
  box-shadow:0 0 28px rgba(0,0,0,.28);
  background:#d9b36f;
}
.art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}
.ui-card{
  position:absolute;
  left:22.5%;
  top:22.5%;
  width:55%;
  padding:2.2% 3.2% 3.0%;
  border:2px solid rgba(122,82,15,.72);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(253,241,211,.985),rgba(242,218,169,.985));
  box-shadow:0 6px 18px rgba(73,44,5,.28), inset 0 1px 0 rgba(255,255,255,.75);
  text-align:center;
}
.ui-card h1{
  margin:0 0 .22em;
  font-size:clamp(24px,4.2svh,48px);
  line-height:1;
}
.ui-card label{
  display:block;
  margin-bottom:.55em;
  font-size:clamp(15px,2.2svh,23px);
  font-weight:700;
}
select,button{
  font-family:Georgia,"Times New Roman",serif;
}
.lang-select{
  width:100%;
  min-height:clamp(44px,6svh,62px);
  padding:0 16px;
  border:2px solid rgba(103,68,15,.65);
  border-radius:13px;
  background:#fff5da;
  color:var(--ink);
  font-size:clamp(17px,2.5svh,27px);
  font-weight:700;
}
.continue-btn{
  width:100%;
  min-height:clamp(48px,6.5svh,68px);
  margin-top:12px;
  border:2px solid #d89b27;
  border-radius:14px;
  background:linear-gradient(180deg,var(--blue),var(--blue-dark));
  color:white;
  font-size:clamp(20px,3svh,32px);
  font-weight:700;
  box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.28);
  cursor:pointer;
}
.continue-btn:focus-visible,.lang-select:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
.chief-lang{
  position:absolute;
  top:2.8%;
  right:3%;
  z-index:3;
  width:min(30%,210px);
  min-height:clamp(38px,5svh,52px);
  padding:0 12px;
  border:2px solid rgba(103,68,15,.62);
  border-radius:12px;
  background:rgba(255,245,218,.97);
  color:var(--ink);
  font-size:clamp(14px,2svh,20px);
  font-weight:700;
}
.dialogue{
  position:absolute;
  left:3.2%;
  right:3.2%;
  bottom:3.1%;
  min-height:34%;
  max-height:40%;
  padding:4.8% 7.4% 3.2%;
  border:2px solid rgba(132,88,18,.68);
  border-radius:18px;
  background:linear-gradient(#f8e7be,#f2d8a4);
  box-shadow:0 7px 22px rgba(59,33,6,.28);
  display:flex;
  flex-direction:column;
}
.dialogue::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(151,104,37,.22);
  border-radius:12px;
  pointer-events:none;
}
.role{
  position:relative;
  z-index:1;
  margin:0 0 .5em;
  font-size:clamp(12px,1.8svh,18px);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.message{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  font-size:clamp(14px,2.15svh,22px);
  line-height:1.38;
  white-space:pre-wrap;
}
.hint{
  position:relative;
  z-index:1;
  margin-top:.45em;
  font-size:clamp(10px,1.35svh,14px);
  opacity:.64;
}
.dialogue .continue-btn{
  position:relative;
  z-index:1;
  width:58%;
  align-self:center;
  min-height:clamp(42px,5.6svh,58px);
  margin-top:10px;
  font-size:clamp(17px,2.5svh,27px);
}
@media (max-width:520px){
  .ui-card{
    left:13%;
    width:74%;
    top:23%;
    padding:4% 5% 5%;
  }
  .chief-lang{
    width:38%;
  }
  .dialogue{
    left:2.2%;
    right:2.2%;
    bottom:1.8%;
    min-height:41%;
    max-height:46%;
    padding:5.2% 6.2% 3.2%;
  }
  .message{
    font-size:clamp(13px,1.92svh,18px);
    line-height:1.31;
  }
  .dialogue .continue-btn{
    width:72%;
  }
}

/* Page 3 — Transport & Logistics */
.logistics-dialogue{
  min-height:43%;
  max-height:47%;
  padding:4.2% 5.8% 3.0%;
}
.logistics-message{
  flex:0 0 auto;
  min-height:2.8em;
  font-size:clamp(13px,1.85svh,19px);
  line-height:1.32;
}
.decision{
  position:relative;
  z-index:1;
  margin-top:.55em;
}
.decision[hidden]{display:none}
.decision-question{
  font-size:clamp(14px,2.0svh,21px);
  line-height:1.25;
  font-weight:700;
  margin-bottom:.55em;
}
.decision-options{
  display:grid;
  gap:clamp(6px,.9svh,10px);
}
.decision-btn{
  width:100%;
  border:1.5px solid rgba(116,73,9,.72);
  border-radius:11px;
  background:linear-gradient(180deg,#fff8e6,#efd49b);
  color:var(--ink);
  text-align:left;
  padding:clamp(8px,1.1svh,12px) clamp(10px,1.6svh,16px);
  box-shadow:0 2px 6px rgba(62,35,6,.16);
  cursor:pointer;
}
.decision-btn strong{
  display:block;
  font-size:clamp(13px,1.75svh,18px);
  line-height:1.05;
  margin-bottom:.18em;
}
.decision-btn span{
  display:block;
  font-size:clamp(11px,1.42svh,15px);
  line-height:1.22;
}
.decision-btn:active{transform:translateY(1px)}
.decision-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:520px){
  .logistics-dialogue{
    min-height:49%;
    max-height:52%;
    padding:4.6% 5.3% 2.8%;
  }
  .logistics-message{font-size:clamp(12px,1.7svh,16px)}
  .decision-question{font-size:clamp(13px,1.78svh,17px)}
  .decision-btn strong{font-size:clamp(12px,1.55svh,15px)}
  .decision-btn span{font-size:clamp(10px,1.3svh,13px)}
}

/* v1.3 Page 3 legibility repair */
.logistics-dialogue .role,
.logistics-dialogue .message,
.logistics-dialogue .hint,
.logistics-dialogue .decision-question,
.logistics-dialogue .decision-btn{
  color:#20170f;
  opacity:1;
  visibility:visible;
}
.logistics-message{
  display:block;
  color:#20170f !important;
  opacity:1 !important;
  font-weight:600;
  text-shadow:none;
}


/* Great Pyramid Exploration — Chief of Staff desktop layout (Oct 17, 2026).
   - Chief of Staff only: no change to Page 3 or the opening page.
   - Mouse/trackpad landscape widths: broader stage, Kha left, dialogue right.
   - Touch-primary devices (including iPad) keep the existing portrait layout.
   - Layout stays entirely in game.css; chief.html has no duplicate CSS. */
@media screen and (min-width:840px) and (min-aspect-ratio:5/4) and (not (pointer:coarse)) {
  .viewport > .stage[aria-label="Chief of Staff introduction"] {
    width:min(1240px, calc(100vw - 32px));
    height:min(760px, calc(100svh - 24px));
    aspect-ratio:auto;
    border:1px solid rgba(231,191,122,.48);
    border-radius:16px;
    background:linear-gradient(115deg,#8b663f,#142a37 70%);
  }

  /* Enlarge the portrait art, showing its upper portion while cropping out
     its preprinted lower dialogue area. Preserve the image's aspect ratio. */
  .stage[aria-label="Chief of Staff introduction"] > .art {
    inset:0 auto auto 0;
    height:185%;
    width:auto;
    max-width:none;
    object-fit:contain;
    object-position:left top;
  }
  .stage[aria-label="Chief of Staff introduction"]::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
      transparent 24%,
      rgba(15,31,44,.15) 40%,
      rgba(15,31,44,.93) 59%,
      #142a37 78%);
  }
  .stage[aria-label="Chief of Staff introduction"] > .chief-lang {
    z-index:4;
    top:3.5%;
    right:3%;
    width:175px;
    min-height:43px;
  }
  .stage[aria-label="Chief of Staff introduction"] > .dialogue {
    z-index:3;
    left:53.5%;
    right:3%;
    top:12%;
    bottom:4%;
    height:auto;
    min-height:0;
    max-height:none;
    padding:clamp(18px,2.2vw,30px);
    border-radius:18px;
    overflow:hidden;
  }
  .stage[aria-label="Chief of Staff introduction"] .dialogue > .role {
    font-size:clamp(15px,1.25vw,19px);
    line-height:1.3;
    letter-spacing:.08em;
  }
  .stage[aria-label="Chief of Staff introduction"] .dialogue > .message {
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    font-size:clamp(16px,1.45vw,22px);
    line-height:1.45;
    padding-right:4px;
    overscroll-behavior:contain;
  }
  .stage[aria-label="Chief of Staff introduction"] .dialogue > .hint {
    font-size:13px;
  }
  .stage[aria-label="Chief of Staff introduction"] .dialogue > .continue-btn {
    width:min(84%,285px);
    min-height:46px;
    flex:0 0 auto;
    margin-top:10px;
    font-size:clamp(17px,1.7vw,23px);
  }
}

/* Chief of Staff tablet-portrait dialogue breathing room (Oct 17, 2026).
   Scoped only to Kha: give the final sentence comfortable clearance above
   Continue on iPad without changing the desktop or phone composition. */
@media screen and (min-width:521px) and (max-aspect-ratio:1/1) and (pointer:coarse){
  .viewport > .stage[aria-label="Chief of Staff introduction"] > .dialogue{
    min-height:36%;
    max-height:44%;
  }
  .stage[aria-label="Chief of Staff introduction"] .dialogue > .continue-btn{
    margin-top:20px;
  }
}