dialog.match-loading { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; color:#fff0de; background:linear-gradient(120deg,#10151b99,transparent 60%),linear-gradient(0deg,#10151b99,transparent 25%),url('assets/citadel-loading.png') center/cover no-repeat; font-family:'Barlow Condensed',sans-serif; box-sizing:border-box; }
.match-loading::backdrop { background:#10151b; }
.loading-heading { position:absolute; top:7%; left:6%; text-align:left; text-shadow:0 2px 8px #0009; }
.loading-heading p { margin:0 0 8px; color:#f7d179; font-size:clamp(18px,2vw,28px); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.loading-heading h1 { margin:0; font-size:clamp(36px,5vw,76px); font-weight:700; text-transform:uppercase; line-height:1; }
.loading-status { position:absolute; bottom:6%; right:6%; display:flex; align-items:center; gap:12px; font-size:clamp(18px,2vw,26px); text-transform:uppercase; }
.match-loading>button { position:absolute; right:6%; bottom:15%; background:#aa0d13; border:2px solid #ff343b; border-radius:5px; color:#fff0de; padding:10px 25px; font:700 20px 'Barlow Condensed',sans-serif; }

/* Fade both layers so the prepared board is visible underneath. */
dialog.match-loading,.match-loading::backdrop { transition:opacity .55s ease; }
dialog.match-loading.is-fading,.match-loading.is-fading::backdrop { opacity:0; }
@media(prefers-reduced-motion:reduce) { dialog.match-loading,.match-loading::backdrop { transition:none; } }
.reduce-motion dialog.match-loading,.reduce-motion .match-loading::backdrop { transition:none; }

/* Progress leaves first; the scenery fade starts once it has disappeared. */
.match-loading .loading-status { transition:opacity .18s ease-out; }
.match-loading.is-hiding-progress .loading-status { opacity:0; }
@media(prefers-reduced-motion:reduce) { .match-loading .loading-status { transition:none; } }
.reduce-motion .match-loading .loading-status { transition:none; }