/* Loading screen (index.html and gallery.html). Self-contained so the gallery
   can use it without the game's stylesheet. Same look as the menus
   (concept A, PR #209): the slow battle backdrop, the stamped logo, a riveted
   gunmetal panel (assets/menu/panel.png, 9-slice 56), parchment labels and
   glass dome lamps that light amber once a side has loaded. */

#loading {
  --font-label: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Barlow", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-type: "Special Elite", "Courier New", monospace;
  --amber: #ffb53a;
  --amber-glow: 0 0 0 2px #ffb53a, 0 0 14px 2px rgba(255,170,40,0.75), 0 0 34px rgba(255,140,20,0.35);
  --steel: url("assets/menu/panel.png") 56 fill / 26px stretch;
  --steel-sm: url("assets/menu/panel.png") 56 fill / 12px stretch;
  --steel-ring: url("assets/menu/panel.png") 56 / 12px stretch;
  --paper: url("assets/menu/paper.jpg") center / cover;
  --ink: #3a2614;
  --cream: #efe2c4;
  --muted: #c9b48a;
  position: fixed;
  inset: 0;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  background: #120e0b;
  isolation: isolate;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: normal;
  color: var(--cream);
  user-select: none;
}
#loading *, #loading *::before, #loading *::after { box-sizing: border-box; }
#loading.hidden, #loading .hidden { display: none !important; }

/* The battle behind, graded and drifting like the menu's. */
#loading .load-backdrop {
  position: fixed;
  inset: -4%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(10,7,5,0.35), rgba(10,7,5,0.8) 75%),
    url("assets/menu/backdrop.jpg") center / cover no-repeat;
  filter: sepia(0.35) saturate(0.9) brightness(0.8) contrast(1.05);
  animation: load-pan 70s ease-in-out infinite alternate;
}
@keyframes load-pan {
  from { transform: scale(1.04) translate(-1.5%, 0.5%); }
  to { transform: scale(1.1) translate(1.5%, -1%); }
}

#loading .load-stack { width: min(760px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#loading .load-logo { width: min(230px, 60%); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)); }

#loading .load-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 18px 14px;
  border: 26px solid transparent;
  border-image: var(--steel);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
}

#loading .load-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
#loading #load-title {
  margin: 0;
  font-family: var(--font-label);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8e2a6 0%, #d9a650 55%, #8f6327 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #1a120a) drop-shadow(0 0 1px #000);
}
#loading .load-map { font-family: var(--font-label); font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 2px #000; }

/* The two nations: flag cards in steel frames, VS stamped between. */
#loading .load-versus { display: flex; align-items: center; justify-content: center; gap: 18px; }
#loading .load-versus .side {
  width: 190px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 8px solid transparent;
  border-image: var(--steel-ring);
  border-image-width: 8px;
  background: #121417;
  background-clip: padding-box;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
#loading .load-versus .load-flag { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
#loading .load-versus .name { padding: 6px 8px 0; font-family: var(--font-label); font-size: 21px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: var(--amber); text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#loading .load-versus .who { padding: 0 8px; font-size: 12px; text-align: center; color: #b9b9b9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#loading .load-versus .side::after { content: ""; height: 6px; }
/* Three or four players: a column of smaller cards per team. */
#loading .load-versus .team { display: flex; flex-direction: column; gap: 8px; }
#loading .load-versus.many .side { width: 150px; }
#loading .load-versus.many .name { font-size: 16px; }
#loading .load-versus.many .vs { font-size: 26px; }
#loading .load-versus .vs {
  flex: none;
  font-family: var(--font-label);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #f8e2a6 0%, #d9a650 55%, #8f6327 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #1a120a);
}

/* Progress: a parchment tag, a dark steel trough filling amber, the
   percentage, and a dome lamp that lights when that side is ready. */
#loading .load-rows { display: flex; flex-direction: column; gap: 14px; }
#loading .load-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#loading .load-who {
  padding: 4px 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: rotate(-0.6deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
#loading .load-track { width: 100%; display: flex; align-items: center; gap: 12px; }
#loading .load-bar {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 3px;
  border-radius: 3px;
  background: #17130f;
  box-shadow: inset 0 2px 5px #000, 0 0 0 3px #4d4a47, 0 0 0 5px #2a2826;
}
#loading .load-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #ffe08a, #f0a12a 50%, #b8681a);
  box-shadow: 0 0 10px rgba(255,170,40,0.5);
  transition: width 0.25s ease-out;
}
#loading .load-pct { flex: none; width: 54px; text-align: right; font-family: var(--font-label); font-size: 22px; font-weight: 700; color: var(--amber); text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
#loading .load-lamp { flex: none; width: 38px; height: 38px; background: url("assets/menu/dome.png") center / contain no-repeat; }
#loading .load-row.ready .load-lamp { background-image: url("assets/menu/dome-on.png"); filter: drop-shadow(0 0 8px rgba(255,170,40,0.9)); }
#loading .load-row.ready .load-fill { background: repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 16px), linear-gradient(180deg, #fff0b8, #ffc04a 50%, #d98a18); box-shadow: 0 0 14px rgba(255,190,60,0.8); }
#loading .load-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); text-shadow: 0 1px 2px #000; }

/* Tips on a parchment telegram strip, Cancel as a parchment plate. */
#loading .load-foot { display: flex; align-items: stretch; gap: 14px; }
#loading .load-telegram {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--paper);
  font-family: var(--font-type);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #2b2116;
  box-shadow: inset 0 0 0 2px rgba(40,26,12,0.45), 0 3px 8px rgba(0,0,0,0.5);
}
#loading .load-btn {
  flex: none;
  min-height: 52px;
  padding: 0 24px;
  border: 10px solid transparent;
  border-image: var(--steel-ring);
  border-image-width: 10px;
  background: var(--paper);
  background-clip: padding-box;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
#loading .load-btn:hover { filter: brightness(1.08); color: #1e1208; }
#loading .load-btn:focus-visible { outline: none; box-shadow: var(--amber-glow); }

@media (prefers-reduced-motion: reduce) { #loading .load-backdrop { animation: none; } }
@media (max-width: 560px) {
  #loading #load-title { font-size: 28px; }
  #loading .load-card { padding: 6px 4px 8px; border-width: 18px; border-image-width: 18px; }
  #loading .load-versus { gap: 8px; }
  #loading .load-versus .vs { font-size: 24px; }
  #loading .load-versus .name { font-size: 16px; }
  #loading .load-foot { flex-direction: column; }
}