/* V0.24: optimized resource loading screen and isolated tutorial practice stage. */
.boot-loading{
  position:fixed;
  z-index:30000;
  inset:0;
  display:grid;
  place-items:center;
  padding:max(22px,var(--pwa-safe-top)) max(28px,var(--pwa-safe-right)) max(22px,var(--pwa-safe-bottom)) max(28px,var(--pwa-safe-left));
  background:
    radial-gradient(circle at 50% 44%,#a9512444 0,transparent 38%),
    linear-gradient(160deg,#1e0d09,#090403 72%);
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease,visibility .42s ease
}
html[data-boot="ready"] .boot-loading{opacity:0;visibility:hidden;pointer-events:none}
.boot-card{
  width:min(680px,82vw);
  padding:30px 44px 34px;
  border:4px solid #7b351d;
  border-radius:28px;
  background:linear-gradient(165deg,#5f2919f2,#2b120df5 72%);
  box-shadow:inset 0 0 0 3px #e4a65b,inset 0 0 34px #160806,0 24px 55px #000c;
  text-align:center;
  color:#ffefce
}
.boot-sign{
  display:block;
  width:126px;
  height:126px;
  margin:-86px auto 14px;
  background:url("assets/pwa/icon-512.png") center/contain no-repeat;
  filter:drop-shadow(0 10px 14px #000a)
}
.boot-card small{font-size:18px;font-weight:900;color:#f4bd73;letter-spacing:.04em}
.boot-card h1{margin:7px 0 12px;font-size:30px;letter-spacing:-.04em}
.boot-card p{min-height:26px;margin:0 0 15px;font-size:18px;font-weight:800;color:#ffe2ad}
.boot-progress{height:16px;border:3px solid #32130c;border-radius:99px;background:#170805;overflow:hidden;box-shadow:inset 0 2px 6px #000}
.boot-progress i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#dc5936,#ffbd5e 64%,#fff0a1);box-shadow:0 0 14px #ffbd5e;transition:width .24s ease}
.boot-card>b{display:block;margin-top:8px;font-size:16px;color:#ffd58f}

.tutorial-stage-badge{
  position:absolute;
  z-index:92;
  left:calc(50% - 910px);
  top:300px;
  width:220px;
  padding:12px 14px;
  border:4px solid #71301b;
  border-radius:18px;
  background:linear-gradient(155deg,#fff0c9,#d99b54);
  box-shadow:inset 0 0 0 2px #fff8df,0 9px 20px #0009;
  color:#552316;
  text-align:center
}
.tutorial-stage-badge[hidden]{display:none!important}
.tutorial-stage-badge small,.tutorial-stage-badge span{display:block;font-weight:800}
.tutorial-stage-badge small{font-size:13px;color:#9b4e28}
.tutorial-stage-badge strong{display:block;margin:1px 0;font-size:24px}
.tutorial-stage-badge span{font-size:13px}
#stage[data-tutorial="true"] .hud{box-shadow:0 0 0 5px #f7c76977,0 8px 25px #000a}
#stage[data-tutorial="true"] .takeout-board,#stage[data-tutorial="true"] .completion-pass{display:none!important}
#stage[data-tutorial="true"] #pauseButton{opacity:.4;pointer-events:none}
#stage[data-tutorial="true"] .clock i{display:none}
#stage[data-tutorial="true"] .hud .clock b{color:#ffe18a}

@media(max-height:500px){
  .boot-card{width:min(620px,78vw);padding:20px 34px 23px}
  .boot-sign{width:92px;height:92px;margin:-58px auto 7px}
  .boot-card h1{font-size:24px;margin:4px 0 7px}
  .boot-card p{font-size:15px;margin-bottom:9px}
}