/* Salvation should feel like the resolution of the AR encounter. Keep the
   character and dialogue as live, accessible elements over a single scene. */
#app #screen-salvation {
  background: linear-gradient(180deg,#081b27a6 0%,#0a20302b 35%,#06151e36 58%,#07151de0 100%),
    url('../assets/img/salvation/courtyard-dawn-v70.webp') center 46% / cover no-repeat,
    #0b1b25;
  isolation:isolate;
  overflow:hidden;
}
#app #screen-salvation .salv-light {
  inset:0;
  background:radial-gradient(ellipse 45% 35% at 50% 42%,#ffdf9c47,transparent 80%);
  animation:none;
}
#app #screen-salvation .salv-masthead {
  position:absolute;
  z-index:3;
  top:calc(15px + var(--safe-t));
  left:12px;
  right:12px;
  margin:0;
  color:#f7dfae;
  text-align:center;
  font:400 clamp(57px,16vw,72px)/.92 var(--brush);
  -webkit-text-stroke:.55px #f7dfae;
  letter-spacing:.035em;
  text-shadow:0 3px 14px #00121c,0 0 22px #e9b87355;
  pointer-events:none;
}
#app #screen-salvation .salv-masthead::before,
#app #screen-salvation .salv-masthead::after {
  content:'◇';
  position:absolute;
  top:14px;
  color:#d1ac6f;
  font:16px var(--serif);
}
#app #screen-salvation .salv-masthead::before {left:calc(50% - 96px)}
#app #screen-salvation .salv-masthead::after {right:calc(50% - 96px)}
#app #screen-salvation .salv-masthead-mark {display:block;margin-bottom:2px;font-size:14px;line-height:1}
#app #screen-salvation .salv-masthead small {
  display:block;
  margin-top:3px;
  color:#f7e5c6;
  font:700 clamp(11px,3vw,13px)/1.3 var(--serif);
  letter-spacing:.17em;
}
#app #screen-salvation.open .salv-masthead {animation:salv-arrive .65s ease-out both}
@keyframes salv-arrive {from {opacity:0;transform:translateY(-8px)}to {opacity:1;transform:translateY(0)}}

#app #screen-salvation .salv-stage {
  z-index:1;
  top:calc(14dvh + var(--safe-t));
  height:42dvh;
}
#app #screen-salvation .salv-stage::before {
  content:'';
  position:absolute;
  width:min(76vw,320px);
  height:78%;
  border-radius:50%;
  background:radial-gradient(ellipse,#f8d7a067 0%,#e5af5a24 42%,transparent 71%);
  filter:blur(15px);
  pointer-events:none;
}
#app #screen-salvation .salv-stage::after {display:none}
#app #screen-salvation .salv-img {width:min(82vw,360px)}
#app #screen-salvation #salv-saved {filter:drop-shadow(0 4px 22px #ffe5ae8c) brightness(1.04)}

#app #screen-salvation #salv-dialog,
#app #screen-salvation #salv-rewards {
  z-index:4;
  left:16px;
  right:16px;
  box-sizing:border-box;
  border:1px solid #d8b77b;
  border-radius:17px;
  background:linear-gradient(145deg,#102d35f5,#0c222af5);
  color:#f7ebd9;
  box-shadow:inset 0 0 0 3px #102730,inset 0 0 0 4px #c8a8696b,0 12px 32px #000b;
}
#app #screen-salvation #salv-dialog {
  top:calc(55dvh + var(--safe-t));
  max-height:calc(45dvh - var(--safe-t) - var(--safe-b) - 16px);
  overflow:auto;
  padding:23px 20px 16px;
}
#app #screen-salvation #salv-dialog::after {
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid #d8b77b73;
  border-radius:11px;
  pointer-events:none;
}
#app #screen-salvation #salv-dialog::before {
  content:'✦';
  position:absolute;
  top:-12px;
  left:calc(50% - 14px);
  width:28px;
  height:23px;
  border:1px solid #d8b77b;
  border-radius:50%;
  background:#123038;
  color:#f4d391;
  font:17px/21px var(--serif);
  text-align:center;
}
#app #screen-salvation .salv-speaker {color:#f7c9ab;font:800 clamp(12px,3.5vw,14px)/1.4 var(--serif);margin-bottom:9px}
#app #screen-salvation .salv-text {color:#f8f0e2;font:700 clamp(15px,4.2vw,18px)/1.62 var(--serif);min-height:3.25em;margin-bottom:14px;overflow-wrap:anywhere}
#app #screen-salvation #btn-salv-next {
  min-width:108px;
  min-height:48px;
  border:1px solid #ffe4a3;
  border-radius:11px;
  background:linear-gradient(160deg,#f8d793,#c9984f);
  color:#281c15;
  font:800 16px var(--serif);
  box-shadow:inset 0 1px #fff4c7,0 4px 14px #e6b45e55;
  outline:1px solid #8c632f;
  outline-offset:-5px;
}
#app #screen-salvation #btn-salv-next:focus-visible,
#app #screen-salvation #btn-salv-done:focus-visible {outline:3px solid #fff3cf;outline-offset:3px}
#app #screen-salvation #salv-rewards {color:#f7ebd9}
#app #screen-salvation #salv-rewards h3 {color:#f7db9c}
#app #screen-salvation #salv-rewards li {background:#19353bcc;border-color:#bca87866;color:#f7ebd9}
#app #screen-salvation #salv-rewards li b {color:#f3d697}
#app #screen-salvation #salv-rewards .salv-note {color:#c5d6d0}
#app #screen-salvation:has(#salv-rewards:not([hidden])) .salv-masthead {display:none}
#app #screen-salvation:has(#salv-rewards:not([hidden])) .salv-stage {top:calc(7dvh + var(--safe-t));height:30dvh}
#app #screen-salvation:has(#salv-rewards .loot-presentation) .salv-stage {top:calc(2dvh + var(--safe-t));height:24dvh}
#app #screen-salvation #salv-rewards:not(:has(.loot-presentation)) {top:calc(39dvh + var(--safe-t))}

@media(max-width:360px) and (orientation:portrait) {
  #app #screen-salvation .salv-stage {top:calc(18dvh + var(--safe-t));height:38dvh}
  #app #screen-salvation #salv-dialog {top:calc(54dvh + var(--safe-t));max-height:calc(46dvh - var(--safe-t) - var(--safe-b) - 12px);padding:18px 15px 12px}
}
@media(orientation:landscape) and (max-height:500px) {
  #app #screen-salvation .salv-masthead {top:calc(8px + var(--safe-t));left:46%;right:12px;font-size:39px}
  #app #screen-salvation .salv-masthead::before {left:calc(50% - 77px)}
  #app #screen-salvation .salv-masthead::after {right:calc(50% - 77px)}
  #app #screen-salvation .salv-masthead small {margin-top:2px;font-size:10px}
  #app #screen-salvation .salv-stage,
  #app #screen-salvation:has(#salv-rewards:not([hidden])) .salv-stage {top:calc(5dvh + var(--safe-t));left:0;right:auto;width:43%;height:90dvh}
  #app #screen-salvation .salv-img {width:min(39vw,300px)}
  #app #screen-salvation #salv-dialog,
  #app #screen-salvation #salv-rewards,
  #app #salv-rewards:has(.loot-presentation) {left:46%;right:12px;top:calc(82px + var(--safe-t));bottom:calc(10px + var(--safe-b));max-height:none;overflow:auto;padding:17px}
  #app #screen-salvation #salv-dialog {bottom:auto;max-height:calc(100dvh - 94px - var(--safe-t) - var(--safe-b))}
  #app #screen-salvation #salv-rewards:not(:has(.loot-presentation)) {top:calc(82px + var(--safe-t));bottom:auto;max-height:calc(100dvh - 94px - var(--safe-t) - var(--safe-b))}
  #app #screen-salvation .salv-text {min-height:0;font-size:14px;line-height:1.45}
}
@media(prefers-reduced-motion:reduce) {
  #app #screen-salvation.open .salv-masthead {animation:none}
  #app #screen-salvation .salv-img {transition:none}
}
body.reduced-motion #app #screen-salvation.open .salv-masthead {animation:none}
body.reduced-motion #app #screen-salvation .salv-img {transition:none}