/* Twin Paths: scene artwork stays separate from accessible, live controls. */
#loading.title-screen {
  --title-gold:#e0c989;
  --title-ink:#081217;
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:8px 5vw 20px;
  background:var(--title-ink);
  color:#ece1c6;
  overflow:auto;
  isolation:isolate;
  text-align:center;
  transition:none;
}
#loading[hidden],#loading [hidden] {
  display:none!important;
}
.title-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
  opacity:.16;
}
.title-screen:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  box-shadow:inset 0 -100px 90px #081217,inset 0 50px 100px #08121780;
}
.title-brand {
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  position:relative;
}
.menu-wordmark {
  width:clamp(250px,29vw,430px);
  height:auto;
  aspect-ratio:4.4;
  display:block;
  object-fit:cover;
  mix-blend-mode:screen;
}
.title-brand>span {
  font:400 11px/1.5 var(--sans);
  letter-spacing:5px;
  color:#cbbf9e;
}
.title-content {
  width:min(1280px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  min-height:0;
}
#loading #loading-title {
  font:400 clamp(28px,3.4vw,49px)/1.25 var(--serif);
  letter-spacing:2px;
  max-width:none;
  margin:12px 0 6px;
  color:#eee2c5;
}
#loading #loading-message {
  font:400 15px/1.6 var(--sans);
  color:#b7c1bd;
  font-style:normal;
  margin:0;
  max-width:620px;
  text-wrap:balance;
}
.title-primary {
  border:1px solid #cbb778;
  background:#565039;
  box-shadow:inset 0 0 0 3px #081217,inset 0 0 0 4px #bca56d80;
  color:#f1dfb0;
  font:400 17px/1.4 var(--serif);
  letter-spacing:1.5px;
  min-width:320px;
  min-height:56px;
  padding:14px 28px;
  cursor:pointer;
  transition:background-color .15s;
}
.title-primary:hover {
  background:#71613e;
}
.title-primary>span {
  font-size:24px;
  line-height:1;
  margin-left:22px;
  vertical-align:-1px;
}
.title-secondary {
  background:#0c1920cc;
  border:1px solid #a38b5870;
  color:#e7dabb;
  font:400 16px/1.4 var(--serif);
  padding:16px 24px;
  min-height:54px;
  cursor:pointer;
}
.title-secondary:hover {
  border-color:#d8c185;
  background:#202e32;
}
.title-secondary:disabled {
  color:#9ba6a4;
  cursor:default;
  background:#0c1920a6;
  border-color:#64716d50;
}
#loading button:focus-visible {
  outline:2px solid #f0dba3;
  outline-offset:5px;
}
#main-menu-actions {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(380px,100%);
  margin:32px 0 0;
}
#main-menu-actions button {
  min-width:0;
  width:100%;
}
#menu-character-note {
  font:400 13px/1.7 var(--sans);
  color:#bac5c0;
  margin:5px 0 0;
  text-wrap:balance;
}
#loading[data-screen=main] {
  justify-content:center;
}
#loading[data-screen=main] .title-content {
  flex:none;
}
#loading[data-screen=main] .title-backdrop {
  opacity:.38;
}
#loading[data-screen=loading] {
  align-items:flex-start;
  text-align:left;
  padding:6vh 6vw;
}
#loading[data-screen=loading] .title-backdrop {
  opacity:1;
  object-position:50% 50%;
}
#loading[data-screen=loading]:after {
  box-shadow:inset 0 -190px 135px #081217e6,inset 0 55px 100px #08121760;
}
#loading[data-screen=loading] .title-brand {
  align-items:flex-start;
}
#loading[data-screen=loading] .title-content {
  flex:none;
  margin-top:auto;
  align-items:flex-start;
  max-width:1250px;
  padding-top:220px;
}
#loading[data-screen=loading] #loading-title {
  font-size:clamp(27px,3vw,42px);
  margin:0 0 10px;
}
#loading[data-screen=loading] #loading-message {
  font-size:14px;
}
#loading-status {
  width:100%;
  margin-top:22px;
}
.loading-progress {
  display:flex;
  align-items:center;
  gap:24px;
  width:100%;
}
#loading #load-track {
  margin:0;
  flex:1;
  max-width:1100px;
  width:auto;
  height:5px;
  background:#93a4a330;
  border:1px solid #a5aaa140;
}
#loading #load-fill {
  background:#dec78e;
  width:5%;
  height:100%;
  transition:width .15s;
}
#load-percent {
  font:400 18px/1 var(--sans);
  color:#e8d39c;
  font-variant-numeric:tabular-nums;
  min-width:44px;
}
.loading-tip {
  font:400 14px/1.65 var(--sans);
  color:#c0c9c3;
  margin:20px 0 0;
}
#loading-retry {
  margin-top:24px;
}
.modal.pause-modal {
  background:#0e1b21;
  border:1px solid #a38b5880;
  box-shadow:0 24px 100px #000a;
  padding:34px;
  width:480px;
}
.pause-modal .menu-wordmark {
  width:min(300px,100%);
  margin:0 auto 22px;
}
.pause-modal>#modal-eyebrow {
  display:none;
}
.pause-modal .pause-menu-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:24px 0;
}
.pause-modal .pause-menu-actions button {
  margin:0;
  padding:12px;
  border:1px solid #a38b5860;
  color:#ded1b0;
  min-height:46px;
  font:400 15px var(--serif);
  background:#14232b;
}
.pause-modal .soundtrack-settings p {
  font-size:12px;
}
@media(min-height:900px) and (min-width:761px) {
  .title-brand .menu-wordmark {
    width:460px;
  }
}
@media(max-width:760px) {
  #loading.title-screen {
    padding:22px 24px 24px;
  }
  .menu-wordmark {
    width:280px;
  }
  .title-brand>span {
    font-size:10px;
    letter-spacing:4px;
  }
  #loading #loading-title {
    font-size:29px;
    margin:22px 0 10px;
  }
  #loading #loading-message {
    font-size:14px;
  }
  .title-primary {
    min-width:260px;
    font-size:15px;
    min-height:54px;
  }
  #loading[data-screen=loading] {
    padding:32px 26px;
  }
  #loading[data-screen=loading] .title-content {
    padding-top:260px;
  }
  .loading-tip {
    font-size:13px;
  }
}
@media(max-width:480px) {
  #loading.title-screen {
    padding:24px 20px;
    min-height:100dvh;
  }
  #loading .title-content {
    flex:1;
  }
  .title-brand .menu-wordmark {
    width:270px;
  }
  #loading #loading-title {
    font-size:26px;
    letter-spacing:1px;
  }
  #loading #loading-message {
    font-size:13px;
  }
  #loading[data-screen=loading] .title-content {
    flex:none;
  }
  #loading[data-screen=main] .title-content {
    flex:none;
  }
  .modal.pause-modal {
    padding:26px;
  }
  .pause-modal .menu-wordmark {
    width:240px;
  }
}
@media(max-height:580px) and (min-width:600px) {
  #loading.title-screen {
    padding:18px 6vw;
  }
  .title-brand .menu-wordmark {
    width:235px;
  }
  .title-brand>span {
    font-size:9px;
    letter-spacing:3px;
  }
  #loading #loading-title {
    font-size:26px;
    margin:10px 0 5px;
  }
  #loading #loading-message {
    font-size:12px;
  }
  .title-primary {
    min-height:44px;
  }
  #loading[data-screen=loading] .title-content {
    padding-top:90px;
  }
  .loading-tip {
    margin-top:12px;
  }
  .title-secondary {
    min-height:44px;
    padding:12px;
  }
  #main-menu-actions {
    margin-top:20px;
    gap:10px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .title-screen * {
    transition:none!important;
  }
}