/* SolBattlefield WebGL template (the repo and folders are still called Momentum) */

:root {
  /* Same colours as the house UI Style Sheet (Assets/UI/UI Style Sheet.asset). */
  --mm-download: #27c4ff;        /* selection blue: downloading the build */
  --mm-load: #1fb85a;            /* go green: loading the game (and every map load in-game) */
  --mm-stripe: rgba(255, 255, 255, 0.2);
  --mm-accent: #ff6a1a;          /* warning toasts */
  --mm-text: #f2f2f2;
  --mm-text-dim: rgba(242, 242, 242, 0.7);
  --mm-track: rgba(0, 0, 0, 0.85);
  --mm-error: #ff6369;
  --mm-bg: #000000;
  --mm-font: "Anton", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* One Unity reference unit (see .mm-bottom). */
  --u: calc(0.026042vw + 0.046296vh);
  --mm-bar: calc(var(--u) * 48);
  /* The ends lean like the game's slanted plates: SlantPlate.Slope (52 / 368) of the height. */
  --mm-lean: calc(var(--mm-bar) * 0.1413);
}

/* The game's heading face (the match HUD's Anton), so the page and the in-game loader match.
   Anton has one weight: the page text asks for 400, never a faux bold. */
@font-face {
  font-family: "Anton";
  src: url("Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("Jost-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-font);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Game canvas: always fills the window ------------------------------ */
#unity-container {
  position: fixed;
  inset: 0;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mm-bg);
  outline: none;
}

#diagnostics-icon {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  cursor: pointer;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 600 11px var(--mm-font);
}

/* ---- Loading screen ----------------------------------------------------- */
#mm-loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: var(--mm-bg);
  opacity: 1;
  transition: opacity 0.6s ease, visibility 0.6s;
}

#mm-loader.mm-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The background image. Swap TemplateData/loading-bg.png to change it. */
#mm-loader .mm-bg {
  position: absolute;
  inset: -4%;                    /* hide soft edges of the pre-blurred image */
  background: url("loading-bg.png") center / cover no-repeat;
  transform: scale(1.02);
  animation: mm-drift 24s ease-in-out infinite alternate;
}

@keyframes mm-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1%, -0.5%, 0); }
}

/* Darken + vignette so the text stays readable on any image. */
#mm-loader .mm-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.75) 100%);
}

.mm-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  transform: translateY(-50%);
  text-align: center;
  padding: 0 16px;
}

/* The logo, the same picture as the menu's (Assets/UI/Logo/Menu Logo.png, shown by
   Assets/Scripts/UI/MenuLogo.cs in a 1000 x 320 box at the 1920x1080 reference): white on
   transparent, 1000 units wide, never wider than the screen's gutters. It drifts and breathes
   gently, like MenuLogoMotion on the menu. */
.mm-logo {
  display: block;
  width: min(calc(var(--u) * 1000), calc(100vw - 32px));
  height: auto;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  animation: mm-logo-float 7s ease-in-out infinite alternate;
}

@keyframes mm-logo-float {
  from { transform: translate3d(0, 0, 0) scale(0.985) rotate(-0.6deg); }
  to   { transform: translate3d(0, calc(var(--u) * -10), 0) scale(1.015) rotate(0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-logo { animation: none; }
}

/* ---- Progress read-out ------------------------------------------------
   Mirrors Assets/Scripts/UI/LoadingScreen.cs, the in-game loader, so the two
   read as one screen. Sizes are in Unity reference units (--u): one unit is
   one pixel at 1920x1080 and scales like the game's CanvasScaler (match 0.5),
   so a value here is the same number as the field in LoadingScreen.cs. */
.mm-bottom {
  position: absolute;
  left: max(16px, calc(var(--u) * 96), env(safe-area-inset-left, 0px));
  right: max(16px, calc(var(--u) * 96), env(safe-area-inset-right, 0px));
  bottom: calc(var(--u) * 72 + env(safe-area-inset-bottom, 0px));
}

.mm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 24);
  margin-bottom: calc(var(--u) * 16);
}

.mm-status {
  min-width: 0;
  font-size: calc(var(--u) * 32);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* Three dots that count up: . .. ... and back. Each keeps its space when
   hidden, so the label never shifts. */
.mm-dots span { opacity: 0; animation: 1.2s steps(1, end) infinite; }
.mm-dots span:nth-child(1) { animation-name: mm-dot1; }
.mm-dots span:nth-child(2) { animation-name: mm-dot2; }
.mm-dots span:nth-child(3) { animation-name: mm-dot3; }
@keyframes mm-dot1 { 0% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes mm-dot2 { 0%, 25% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes mm-dot3 { 0%, 50% { opacity: 0; } 75%, 100% { opacity: 1; } }

.mm-right {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 24);
  white-space: nowrap;
}

.mm-detail {
  font-size: calc(var(--u) * 28);
  font-weight: 400;
  color: var(--mm-text-dim);
  font-variant-numeric: tabular-nums;
}

.mm-detail:empty { display: none; }

.mm-percent {
  font-size: calc(var(--u) * 64);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The bar: thick, dark track, both ends leaning right going up (SlantSkew in the game). */
.mm-track {
  position: relative;
  height: var(--mm-bar);
  background: var(--mm-track);
  overflow: hidden;
  clip-path: polygon(var(--mm-lean) 0, 100% 0, calc(100% - var(--mm-lean)) 100%, 0 100%);
}

/* The fill: blue while downloading, green while loading, with white
   diagonal stripes sliding right. The stripe tile is as tall as the bar. */
.mm-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  clip-path: polygon(var(--mm-lean) 0, 100% 0, calc(100% - var(--mm-lean)) 100%, 0 100%);
  background-color: var(--mm-download);
  background-image: linear-gradient(135deg,
    var(--mm-stripe) 25%, transparent 25%, transparent 50%,
    var(--mm-stripe) 50%, var(--mm-stripe) 75%, transparent 75%, transparent);
  background-size: var(--mm-bar) var(--mm-bar);
  animation: mm-stripes 1.2s linear infinite;
  transition: background-color 0.3s ease;
}

#mm-loader.mm-phase-load .mm-fill { background-color: var(--mm-load); }

@keyframes mm-stripes {
  from { background-position: 0 0; }
  to   { background-position: var(--mm-bar) 0; }
}

/* ---- Error state -------------------------------------------------------- */
.mm-error {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--mm-error);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: rgba(20, 0, 0, 0.6);
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 30vh;
  overflow: auto;
  -webkit-user-select: text;
  user-select: text;
}

#mm-loader.mm-failed .mm-error { display: block; }
#mm-loader.mm-failed .mm-fill { background-color: var(--mm-error); animation: none; }
#mm-loader.mm-failed .mm-status { color: var(--mm-error); }
#mm-loader.mm-failed .mm-dots,
#mm-loader.mm-failed .mm-right { display: none; }

/* ---- Warning toasts (Unity showBanner) ---------------------------------- */
#mm-toasts {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(560px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.mm-toast {
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(15, 18, 22, 0.88);
  border-left: 3px solid var(--mm-text-dim);
  font-size: 0.85rem;
  line-height: 1.4;
}

.mm-toast-warning { border-left-color: var(--mm-accent); }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 600px), (max-height: 420px) {
  .mm-center { top: 40%; }
}

/* Too narrow for label, MB and percentage on one line: the MB goes under the bar. */
@media (max-width: 600px) {
  .mm-detail {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mm-loader .mm-bg { animation: none; }
  .mm-fill { animation: none; }
}