/* Expedition title screen */
#game:not(.is-landing) #landing,
.is-landing :is(.command, .route-foot, .answer-meter, .instrument-bar, .side-instrument,
  .player-label, .map-coordinates, .travel-flash, .mode-label) {
  display: none !important;
}
.is-landing .hud-top { z-index: 3; align-items: center; }
.is-landing .identity {
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
  padding: 0;
  gap: 11px;
}
.is-landing .identity img { width: 33px; height: auto; }
.is-landing .identity h1 { font-size: 22px; text-shadow: 2px 2px #0d303d; }
.is-landing .identity span { display: none; }
.is-landing :is(#ground, #animation) { transform: translateX(20%); }
#landing {
  --landing-ink: #0b2d3b;
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #597b7c var(--landing-ink);
  color: var(--cream);
  background:
    linear-gradient(0deg, #10344482, transparent 19%),
    linear-gradient(90deg, #0c2937 0%, #0c2c39fc 17%, #103443ed 30%, #123b48d4 41%,
      #143b4890 49%, #12394636 58%, transparent 69%),
    linear-gradient(180deg, #0c2c3866, transparent 19%);
}
.landing-inner {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: max(100px, 11vh) 30px max(58px, 8vh) clamp(48px, 7.2vw, 142px);
}
.landing-content { width: min(550px, 64vw); }
#landing-title {
  font: clamp(76px, 7.9vw, 128px)/.93 var(--pixel);
  color: #fff3cf;
  letter-spacing: -.045em;
  text-shadow: 0 5px 0 #082835, 4px 5px 0 #082835;
}
.landing-title-line { display: block; white-space: nowrap; }
.landing-to { color: #ffb174; }
.landing-description {
  margin-top: clamp(20px, 3vh, 30px);
  max-width: 395px;
  color: #e3eee6;
  font: clamp(16px, 1.32vw, 19px)/1.55 var(--sans);
  text-wrap: pretty;
}
.landing-rules {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 25px 0 28px;
  padding: 0;
}
.landing-rules > div {
  display: grid;
  gap: 3px;
  padding-inline: clamp(14px, 2vw, 28px);
}
.landing-rules > div:first-child { padding-left: 0; }
.landing-rules > div:last-child { padding-right: 0; }
.landing-rules > div + div { border-left: 1px solid #7da6a34f; }
.landing-rules dt {
  grid-row: 2;
  white-space: nowrap;
  color: #c0d6ce;
  font: 650 10px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.landing-rules dd {
  color: #fff0c7;
  margin: 0;
  font: 27px/1 var(--pixel);
}
.landing-rules dd span { font-size: .68em; }
.landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.landing-modes {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 196px);
  gap: 8px 16px;
}
.landing-modes > .landing-start { grid-column: 1; }
.landing-unlimited {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#unlimited-description {
  color: #dbe6df;
  font: 14px/1.35 var(--sans);
  margin: 0;
  text-shadow: 0 1px 2px #143541;
}
.landing-start {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 52px;
  padding: 11px 20px;
  color: #26362d;
  background: #ffb378;
  border: 2px solid #f69c64;
  box-shadow: inset 0 2px #ffdeb0, inset 0 -2px #c58350, 4px 4px #071e2a;
  font: 21px/1.15 var(--pixel);
}
.landing-start:hover { background: #ffc38f; }
.landing-start.unlimited-start {
  min-width: 0;
  align-self: stretch;
  justify-content: center;
  padding-inline: 12px;
  border-color: #9dbfa5;
  background: #315d57;
  color: #f6f1cc;
  box-shadow: inset 0 2px #6f9482, inset 0 -2px #254943, 4px 4px #071e2a;
  font-size: 18px;
}
.landing-start.unlimited-start:hover { background: #3c7068; }
.is-unlimited .answer-meter { display: grid; align-content: center; }
.is-unlimited .pips { display: none; }
.landing-start:active { transform: translate(1px, 1px); }
.landing-start i { font-size: 20px; }
.landing-chase {
  min-height: 45px;
  background: #1d4651;
  border-color: #779c9b;
  color: #edf4df;
  box-shadow: inset 0 2px #547879, inset 0 -2px #17353f, 4px 4px #071e2a;
  font-size: 18px;
}
.landing-chase i { color: #a8d7cc; }
.landing-chase:hover { background: #295760; }
.is-third-person .player-label { display: none; }
@media (min-height: 601px) {
  body:not(.keyboard) .is-third-person .command { bottom: max(55px, 7%); }
}
.landing-secondary {
  color: #f6edce;
  background: #143542e8;
  border: 1px solid #688483;
  min-height: 39px;
  padding: 7px 11px;
  font: 13px/1.2 var(--sans);
}
.landing-secondary:hover { background: #264b54; }
#landing-result {
  max-width: 420px;
  margin: -9px 0 18px;
  border-left: 3px solid #ffb378;
  padding-left: 11px;
  font: 14px/1.5 var(--sans);
  color: #fff3cf;
}
.landing-cartography {
  position: absolute;
  left: 70%;
  top: 48%;
  transform: translateX(-50%);
  padding: 6px 11px 8px;
  background: #143743ed;
  border: 1px solid #a7c1b7;
  box-shadow: 3px 3px #16425174;
  color: #fff3cf;
  text-align: center;
  pointer-events: none;
}
.landing-cartography::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1px);
  height: 14px;
  width: 2px;
  background: #153b4b;
}
.landing-cartography span {
  display: block;
  color: #ffc193;
  font: 700 10px/1.35 var(--mono);
  letter-spacing: .12em;
}
.landing-cartography b { display: block; font: 16px/1.25 var(--pixel); }

/* Keep time adjacent to the prompt even when the mobile keyboard is open. */
.command-tools { display: flex; align-items: center; gap: 10px; }
#question-clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #59808a;
  background: #193e49;
  color: #e0eee0;
  padding: 3px 6px;
  white-space: nowrap;
  font: 600 11px/1.2 var(--mono);
}
#clock-seconds {
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.clock-glyph {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.clock-glyph::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  width: 2px;
  height: 3px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
#question-clock[data-phase="prepare"] {
  border-color: #a48861;
  background: #493e2e;
  color: #ffcf98;
}
#question-clock[data-urgent="true"] {
  border-color: #df8e6f;
  background: #533332;
  color: #ffe1c8;
}
@media (max-width: 760px) and (min-height: 581px) {
  .is-landing :is(#ground, #animation) { transform: translateY(-13%); }
  #landing {
    background:
      linear-gradient(180deg, #103747a3, transparent 12%, transparent 31%, #12364379 43%, #0e303df5 57%, #0b2936 100%);
  }
  .landing-inner {
    min-height: 100%;
    align-content: end;
    padding: 42vh max(23px, 5.5vw) max(35px, env(safe-area-inset-bottom));
  }
  .landing-content { width: min(100%, 500px); }
  #landing-title { font-size: clamp(48px, 10.2vw, 72px); line-height: 1.1; }
  .landing-title-line { display: inline; margin-left: .18em; }
  .landing-description { margin-top: 12px; font-size: 16px; max-width: 400px; }
  .landing-rules { margin: 18px 0 20px; }
  .landing-inner:has(#landing-result:not([hidden])) { padding-top: 28vh; }
  #landing:has(#landing-result:not([hidden])) .landing-cartography { display: none; }
  .landing-cartography { left: 50%; top: 35%; }
}
@media (max-height: 650px) and (min-width: 761px), (max-height: 580px) {
  .landing-inner { padding-block: 65px 20px; padding-left: clamp(20px, 6vw, 90px); }
  .landing-content { width: min(550px, 78vw); }
  #landing-title { font-size: clamp(45px, 12vh, 66px); line-height: 1.05; }
  .landing-title-line { display: inline; margin-left: .16em; }
  .landing-description { margin-top: 8px; font-size: 15px; }
  .landing-rules { margin: 14px 0 17px; }
  .landing-rules dd { font-size: 22px; }
  .landing-start { min-height: 42px; font-size: 18px; }
}
@media (max-width: 540px) and (max-height: 580px) {
  .landing-content { width: 100%; }
  .landing-cartography { display: none; }
  #landing { background: linear-gradient(90deg, #0c2d39ed, #0c2d39ba); }
}
@media (max-width: 430px) {
  .is-landing .identity h1 { font-size: 18px; }
  .is-landing .identity img { width: 27px; }
  .command-tools { gap: 5px; }
  #question-clock { font-size: 10px; padding: 2px 4px; gap: 3px; }
  .command-top { gap: 4px; }
  .command-top .leg-label { font-size: 9px; line-height: 1.25; }
}

@media (max-width: 600px) {
  .landing-modes { grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr); gap: 8px 10px; }
  .landing-modes .landing-start { font-size: 16px; padding-inline: 10px; gap: 6px; }
  .landing-modes .landing-start i { font-size: 14px; }
  #unlimited-description { font-size: 12px; }
}
@media (max-width: 360px) {
  .landing-modes .landing-start i { display: none; }
  .landing-modes .landing-start { font-size: 14px; }
  .landing-rules > div { padding-inline: 12px; }
  .landing-rules > div:first-child { padding-left: 0; }
}