/* The loading / waiting screen (src/ui/loading-screen.js). Linked first in
   index.html so it paints before anything else. A dusk camp: sky, ridges, a
   fire whose flames and embers the page animates. Astra's paintings slot in
   through the two custom properties below (assets/ui/loading/, see
   docs/art/UI_ASTRA_PROMPT.md); until then the CSS scene stands in. */
.loading-screen {
  --loading-art: none;   /* url(assets/ui/loading/background.png): the painted camp, no flames */
  --loading-logo: none;  /* url(assets/ui/loading/logo.png): the CARDSLAYER wordmark */
  position: fixed; inset: 0; z-index: 20000; overflow: hidden;
  display: grid; place-items: center;
  color: #f3e6c8; font-family: Georgia, "Times New Roman", serif;
  background: #120f1a;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.loading-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* the reconnect wait: the game stays visible under a veil */
.loading-screen.is-waiting { background: rgba(10, 8, 14, .72); }
.loading-screen.is-waiting .loading-scene { opacity: .0; }

.loading-scene { position: absolute; inset: 0; transition: opacity .5s ease; }
.loading-sky { position: absolute; inset: 0; background: var(--loading-art), linear-gradient(#1c1633 0%, #3b2447 38%, #9a4b45 64%, #e0894f 76%, #2a1d22 76.2%, #1a1318 100%); background-size: cover; background-position: center bottom; }
.loading-stars { position: absolute; inset: 0 0 45% 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 30% 12%, #fff9 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 26%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 76% 9%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 88% 30%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 6%, #fff9 50%, transparent 51%); animation: loading-twinkle 4s ease-in-out infinite alternate; }
.loading-ridges { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; width: 100%; }
.has-loading-art .loading-stars, .has-loading-art .loading-star, .has-loading-art .loading-moon, .has-loading-art .loading-ridges { display: none; } /* the painting has its own sky, moon and mountains */

/* the fire: flames and embers are always the page's, drawn over the art */
.loading-fire { position: absolute; left: 50%; bottom: 17%; width: 90px; height: 120px; transform: translateX(-50%); }
.loading-glow { position: absolute; left: 50%; bottom: -30px; width: 340px; height: 200px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 70%, rgba(255, 160, 70, .45), transparent 65%); animation: loading-glow 2.2s ease-in-out infinite; }
.loading-flame { position: absolute; left: 50%; bottom: 8px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; transform-origin: 50% 100%; }
.loading-flame.f1 { width: 46px; height: 78px; margin-left: -23px; background: #e2552b; animation: loading-flicker 1.1s ease-in-out infinite; }
.loading-flame.f2 { width: 32px; height: 58px; margin-left: -16px; background: #f59a2c; animation: loading-flicker .9s ease-in-out infinite reverse; }
.loading-flame.f3 { width: 18px; height: 34px; margin-left: -9px; background: #ffe08a; animation: loading-flicker .7s ease-in-out infinite; }
.loading-logs { position: absolute; left: 50%; bottom: 0; width: 86px; height: 16px; margin-left: -43px; }
.loading-logs::before, .loading-logs::after { content: ""; position: absolute; top: 3px; width: 70px; height: 11px; border-radius: 6px; background: #4a2c1f; border: 2px solid #2a1810; }
.loading-logs::before { left: 0; transform: rotate(12deg); } .loading-logs::after { right: 0; transform: rotate(-12deg); }
.has-loading-art .loading-logs { display: none; } /* the painting has its own logs */
.loading-ember { position: absolute; bottom: 60px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #ffc26b; box-shadow: 0 0 6px #ff8a3c; opacity: 0; animation: loading-ember 3s linear infinite; }

/* the card in the middle */
.loading-card { position: relative; z-index: 1; width: min(420px, calc(100% - 32px)); margin-bottom: 18vh; text-align: center; }
.loading-title { margin: 0 0 18px; font-size: clamp(38px, 8vw, 64px); font-weight: 700; letter-spacing: .12em; color: #f6dfa8; text-shadow: 0 3px 0 #3a2211, 0 0 24px rgba(255, 170, 80, .35); }
.has-loading-logo .loading-title { height: clamp(60px, 14vw, 110px); background: var(--loading-logo) center / contain no-repeat; color: transparent; text-shadow: none; }
.loading-bar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(246, 223, 168, .35); overflow: hidden; }
.loading-bar-fill { height: 100%; width: 4%; background: linear-gradient(90deg, #c77a2e, #f3c66b); box-shadow: 0 0 12px rgba(255, 190, 90, .6); transition: width .5s ease; }
.is-waiting .loading-bar-fill { width: 40% !important; animation: loading-sweep 1.4s ease-in-out infinite; }
.loading-step { margin: 10px 0 0; font: 600 14px/1.3 system-ui, sans-serif; letter-spacing: .04em; color: #eadcbc; }
.loading-tip { margin: 22px auto 0; max-width: 34ch; font: 400 14px/1.45 system-ui, sans-serif; color: #b9ab8f; min-height: 2.9em; transition: opacity .5s ease; }
.loading-tip.is-changing { opacity: 0; }

@keyframes loading-flicker { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(1.06, .92) rotate(3deg); } 60% { transform: scale(.94, 1.08) rotate(-3deg); } }
@keyframes loading-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes loading-ember { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift, 20px), -260px); } }
@keyframes loading-twinkle { from { opacity: .6; } to { opacity: 1; } }
@keyframes loading-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
/* --- more life (2026-10-01): moon, stars one by one, pines, stones, smoke, flicker --- */
.loading-moon { position: absolute; top: 11%; right: 16%; width: 46px; height: 46px; border-radius: 50%; background: #f1e3c0; border: 3px solid #1a121e;
  box-shadow: inset -9px -5px 0 #d7c49b, 0 0 40px 14px rgba(241, 227, 192, .16); }
.loading-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff6dd; opacity: .2; animation: loading-star 3s ease-in-out infinite; }
.loading-star.is-big { width: 3px; height: 3px; box-shadow: 0 0 4px #fff6dd; }
.loading-shooting { position: absolute; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff6dd); opacity: 0; transform: rotate(-18deg); animation: loading-shoot 1.1s ease-out forwards; }
.loading-ground-light { position: absolute; left: 50%; bottom: 4%; width: min(720px, 120vw); height: 22%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 150, 70, .22), transparent 70%); animation: loading-groundflicker 1.7s steps(6, end) infinite; }
.loading-stones { position: absolute; left: 50%; bottom: -6px; width: 112px; height: 18px; margin-left: -56px;
  background: radial-gradient(ellipse 9px 6px at 8% 60%, #4b4550 95%, transparent), radial-gradient(ellipse 10px 7px at 24% 75%, #3d3842 95%, transparent), radial-gradient(ellipse 9px 6px at 76% 75%, #3d3842 95%, transparent), radial-gradient(ellipse 9px 6px at 92% 60%, #4b4550 95%, transparent); }
.loading-flame.f4 { width: 22px; height: 44px; margin-left: 6px; background: #ef7a2a; animation: loading-tongue 1.3s ease-in-out infinite; }
.loading-flame.f1 { animation: loading-flicker 1.1s ease-in-out infinite, loading-shape 2.3s ease-in-out infinite; }
.loading-smoke { position: absolute; left: 50%; bottom: 70px; width: 0; height: 0; }
.loading-puff { position: absolute; left: -12px; bottom: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(120, 110, 120, .22); filter: blur(4px); opacity: 0; animation: loading-puff 4.5s ease-out infinite; }
.loading-bar-fill { background-size: 200% 100%; background-image: linear-gradient(90deg, #c77a2e, #f3c66b, #c77a2e); animation: loading-shimmer 2.4s linear infinite; }
@keyframes loading-star { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes loading-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(-260px, 90px) rotate(-18deg); } }
@keyframes loading-groundflicker { 0% { opacity: .8; } 20% { opacity: 1; } 40% { opacity: .7; } 60% { opacity: .95; } 80% { opacity: .75; } 100% { opacity: .9; } }
@keyframes loading-tongue { 0%, 100% { transform: scale(.8, .7) rotate(14deg); opacity: .7; } 50% { transform: scale(1, 1.15) rotate(4deg); opacity: 1; } }
@keyframes loading-shape { 0%, 100% { border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; } 50% { border-radius: 42% 58% 45% 45% / 70% 55% 40% 40%; } }
@keyframes loading-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift, 18px), -170px) scale(2.4); } }
@keyframes loading-shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .loading-flame, .loading-glow, .loading-ember, .loading-stars, .loading-star, .loading-ground-light, .loading-puff, .loading-bar-fill, .is-waiting .loading-bar-fill { animation: none; }
  .loading-ember, .loading-puff, .loading-shooting { display: none; }
}

/* --- Astra's painted bonfire (assets/ui/loading/bonfire.png, see assets/loading-drafts/loading-camp/prompt.txt) ---
   A strip of 6 frames, 256 x 384 each, stones and logs included; the frames play in a loop.
   --u is one pixel of the 2560 x 1440 painting at the size the screen shows it (background-size: cover).
   The painting's fire spot is (1280, 1210): the stones' base sits 12 painted px above the frame's bottom edge. */
.loading-screen { --loading-fire: none; --u: max(calc(100vw / 2560), calc(100vh / 1440)); }
.has-loading-fire .loading-flame, .has-loading-fire .loading-logs, .has-loading-fire .loading-stones { display: none; }
.has-loading-fire .loading-fire { width: calc(var(--u) * 256); height: calc(var(--u) * 384); bottom: calc(var(--u) * 218); background: var(--loading-fire) 0 0 / 600% 100% no-repeat; animation: loading-bonfire .8s steps(6, jump-none) infinite; }
@keyframes loading-bonfire { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@media (prefers-reduced-motion: reduce) { .has-loading-fire .loading-fire { animation: none; } }