/* loading.css — the loading screen (js/loading.js): key art, logo, a firelit progress bar, tips, rising embers */
#loading.ld-mark { display: none; } /* (game.js removes #loading when the game starts: the cue to fade out) */
#preload {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; user-select: none; color: #fff3dc;
  background: radial-gradient(ellipse at 50% 72%, #3a2a2e 0%, #1c2238 45%, #0f1424 100%);
  font-family: 'Mitr', system-ui, sans-serif; transition: opacity 0.7s ease, transform 0.9s ease;
}
#preload.out { opacity: 0; transform: scale(1.03); pointer-events: none; }
.pl-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  opacity: 0; transition: opacity 0.9s ease; animation: pl-drift 26s ease-in-out infinite alternate;
}
.pl-art.on { opacity: 1; }
@keyframes pl-drift { from { transform: scale(1.01); } to { transform: scale(1.06) translate(0, 0.6%); } }
/* darker at the top (the logo) and the bottom (the bar), a vignette round the edges */
.pl-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(10, 12, 26, 0.55) 0%, rgba(10, 12, 26, 0) 32%, rgba(10, 12, 26, 0) 62%, rgba(10, 10, 20, 0.82) 100%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 55%, rgba(5, 6, 14, 0.55) 100%);
}
.pl-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-logo {
  position: absolute; left: 50%; top: 2.5vh; width: min(40vw, 50vh, 680px); transform: translateX(-50%);
  filter: drop-shadow(0 0.8vmin 1.2vmin rgba(0, 0, 0, 0.45)); animation: pl-bob 3.2s ease-in-out infinite;
}
@keyframes pl-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -0.9vmin); } }
/* the title as text (until the logo picture loads, or without it) */
.pl-title {
  position: absolute; left: 0; right: 0; top: 7vh; text-align: center; font: 800 clamp(40px, 9vmin, 120px) / 1 'Baloo 2', sans-serif;
  color: #ffe9b8; -webkit-text-stroke: clamp(6px, 1.3vmin, 16px) #2a2435; paint-order: stroke fill; letter-spacing: 0.02em;
  text-shadow: 0 0.6vmin 0 rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.4s;
}
#preload.nologo .pl-title { opacity: 1; }
.pl-logo { opacity: 0; transition: opacity 0.6s ease; }
#preload.logo .pl-logo { opacity: 1; }

.pl-bottom {
  position: absolute; left: 50%; bottom: 5.5vh; width: min(660px, 86vw); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: clamp(6px, 1.1vmin, 12px);
}
.pl-status { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pl-status span, .pl-status b, .pl-tip {
  -webkit-text-stroke: clamp(3px, 0.55vmin, 5px) #2a2435; paint-order: stroke fill;
}
.pl-status span { font: 500 clamp(15px, 2.3vmin, 24px) 'Mitr', sans-serif; color: #fff3dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-status b { font: 800 clamp(18px, 2.8vmin, 30px) 'Baloo 2', sans-serif; color: #ffd873; }
.pl-bar {
  position: relative; height: clamp(16px, 2.4vmin, 24px); border-radius: 999px; background: #231d2c;
  border: clamp(3px, 0.45vmin, 4px) solid #2a2435; box-shadow: inset 0 0 0 2px #a88a55, 0 0.5vmin 0 rgba(0, 0, 0, 0.35);
}
.pl-bar i {
  position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; border-radius: 999px; transition: width 0.25s ease-out;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 10px, rgba(255, 255, 255, 0) 10px 22px),
    linear-gradient(90deg, #e2472b, #ff8a2e 55%, #ffd873);
  background-size: 44px 100%, 100% 100%; animation: pl-stripes 1.1s linear infinite;
  box-shadow: 0 0 1.4vmin rgba(255, 150, 60, 0.65);
}
@keyframes pl-stripes { to { background-position: 44px 0, 0 0; } }
/* a little flame riding the end of the fill */
.pl-bar em {
  position: absolute; top: 50%; left: 0; width: clamp(22px, 3.4vmin, 34px); height: clamp(30px, 4.6vmin, 46px);
  transform: translate(-50%, -62%); transition: left 0.25s ease-out; pointer-events: none;
}
.pl-bar em::before, .pl-bar em::after {
  content: ''; position: absolute; left: 50%; bottom: 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%; animation: pl-flick 0.42s ease-in-out infinite alternate;
}
.pl-bar em::before {
  width: 100%; height: 100%; margin-left: -50%; background: radial-gradient(ellipse at 50% 75%, #ffe07a 0%, #ff8a2e 55%, #e2472b 100%);
  border: 2px solid #2a2435; box-shadow: 0 0 1.6vmin rgba(255, 150, 60, 0.9);
}
.pl-bar em::after { width: 46%; height: 50%; margin-left: -23%; bottom: 8%; background: #fff3c2; animation-delay: 0.12s; }
@keyframes pl-flick { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(0.92, 1.08) rotate(3deg); } }
.pl-tip {
  font: 400 clamp(13px, 1.9vmin, 19px) / 1.45 'Mitr', sans-serif; color: #e8dcc8; text-align: center; min-height: 2.9em;
  transition: opacity 0.45s ease;
}
.pl-tip b { color: #ffd873; font-weight: 600; }
.pl-tip.fade { opacity: 0; }
/* the copyright line under the bar */
.pl-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(4px, 1.1vh, 12px); text-align: center; pointer-events: none;
  font: 400 clamp(10px, 1.4vmin, 13px) 'Mitr', sans-serif; color: rgba(232, 220, 200, 0.7);
  -webkit-text-stroke: 3px #2a2435; paint-order: stroke fill;
}