/* GENERATED by Tower Defense > Export Boot Template Assets.
 * Do not edit: every number here comes from BootLayout.cs, which is also
 * what the Unity boot scene lays itself out from. Edit that instead. */

:root {
  --td-ground: #0f0d14;
  --td-gold: #fad46b;
  --u: min(100vw / 1080, 100vh / 1920);
}

#td-boot {
  position: fixed;
  inset: 0;
  background: var(--td-ground);
  z-index: 10;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
  user-select: none;
}

#td-stack { position: absolute; inset: 0; }

#td-mark {
  position: absolute;
  left: 50%;
  bottom: 60%;
  transform: translate(-50%, 50%);
  width: calc(420 * var(--u));
  height: calc(420 * var(--u));
}
#td-mark { image-rendering: auto; }

#td-word {
  position: absolute;
  left: 50%;
  bottom: 44%;
  transform: translate(-50%, 50%);
  width: calc(880 * var(--u));
  height: calc(157 * var(--u));
}
#td-word {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(52 * var(--u));
  letter-spacing: calc(6 * var(--u));
  font-weight: 600;
  color: var(--td-gold);
  opacity: 0.82;
}

#td-caption {
  position: absolute;
  left: 50%;
  bottom: 35.5%;
  transform: translate(-50%, 50%);
  width: calc(800 * var(--u));
  height: calc(56 * var(--u));
}
#td-caption {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(44 * var(--u)); opacity: 0.55;
}

#td-track {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, 50%);
  width: calc(760 * var(--u));
  height: calc(68 * var(--u));
}
#td-track {
  background: rgba(0, 0, 0, 0.45);
  border: calc(3 * var(--u)) solid rgba(255, 255, 255, 0.10);
  border-radius: calc(34 * var(--u));
  box-shadow: inset 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.6);
  overflow: hidden;
  box-sizing: border-box;
}
#td-fill {
  width: 0%; height: 100%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--td-gold) 70%, white), var(--td-gold) 55%, color-mix(in srgb, var(--td-gold) 75%, black));
  border-radius: calc(30 * var(--u));
  transition: width 120ms linear;
}

#td-fill.sweep {
  width: 35% !important;
  animation: td-sweep 1.4s ease-in-out infinite alternate;
}
@keyframes td-sweep { from { margin-left: 0%; } to { margin-left: 65%; } }

#td-percent {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, 50%);
  width: calc(200 * var(--u));
  height: calc(60 * var(--u));
}
#td-percent {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(40 * var(--u)); font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(0,0,0,0.9), 0 calc(-2 * var(--u)) 0 rgba(0,0,0,0.9), calc(2 * var(--u)) 0 0 rgba(0,0,0,0.9), calc(-2 * var(--u)) 0 0 rgba(0,0,0,0.9);
}

#td-hint {
  position: absolute;
  left: 50%;
  bottom: 24.5%;
  transform: translate(-50%, 50%);
  width: calc(900 * var(--u));
  height: calc(46 * var(--u));
}
#td-hint {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(34 * var(--u)); opacity: 0.45;
}

#td-actions {
  position: absolute;
  left: 50%;
  bottom: 15.5%;
  transform: translate(-50%, 50%);
  width: calc(900 * var(--u));
  height: calc(96 * var(--u));
}
#td-actions { display: none; align-items: center; justify-content: center; }
#td-reload {
  font: inherit; font-size: calc(26 * var(--u)); letter-spacing: calc(2 * var(--u));
  padding: calc(18 * var(--u)) calc(48 * var(--u));
  border: 0; border-radius: calc(14 * var(--u));
  background: var(--td-gold); color: #1a1408; cursor: pointer;
}

#td-version {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translate(-50%, 50%);
  width: calc(900 * var(--u));
  height: calc(38 * var(--u));
}
#td-version {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(28 * var(--u)); opacity: 0.30;
}