html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1b0f06;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
}

#page-bg {
  position: fixed;
  inset: -40px;
  background: #1b0f06 url("bg_wide.jpg") center / cover no-repeat;
  filter: blur(14px) brightness(0.55) saturate(1.1);
  display: none;
}

body.framed #page-bg {
  display: block;
}

#game-frame {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #1b0f06;
  outline: none;
  touch-action: none;
}

@font-face {
  font-family: "Lilita One";
  src: url("LilitaOne-Regular.ttf") format("truetype");
  font-display: block;
}

#loader {
  font-family: "Lilita One", "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #1b0f06 url("bg_portrait.jpg") center / cover no-repeat;
  transition: opacity 0.4s ease;
  z-index: 3;
  container-type: size;
  --bar-h: 4.375cqh;
  --pad: 0.365cqh;
  --outline: rgba(81, 37, 37, 0.86);
  /* TMP outline width 0.18 on the loading font material, drawn centered on the glyph edge. */
  --stroke: 0.02em;
  --fill-min: calc(var(--bar-h) - var(--pad) * 2);
}

/* Mirrors LoadingLogoFit: 1041x655 box, 40 units below the top, at most canvas width - 80 and 32% of the height. */
#loader-logo {
  position: absolute;
  top: 2.083cqh;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  width: min(calc(100cqw - 4.167cqh), 50.86cqh);
  aspect-ratio: 1041 / 655;
  object-fit: contain;
  pointer-events: none;
}

#loader-retry {
  display: none;
  margin-top: 1.6cqh;
  padding: 1.1cqh 4.5cqh;
  border: 0.25cqh solid #ffd361;
  border-radius: 999px;
  color: #fff;
  font: bold 2.4cqh "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
  text-shadow: 0 0.2cqh 0.3cqh rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom, #ffb515 0%, #e98a00 100%);
  box-shadow: 0 0.5cqh 0.9cqh rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

body.failed #loader-retry {
  display: block;
}

body.failed #loader-bar {
  display: none;
}

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

#loader-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32.3cqh;
  padding-bottom: 3.85cqh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(to top,
    rgba(10, 5, 3, 0.82) 0%, rgba(10, 5, 3, 0.692) 25%, rgba(10, 5, 3, 0.41) 50%,
    rgba(10, 5, 3, 0.128) 75%, rgba(10, 5, 3, 0) 100%);
}

#loader-tip {
  width: min(calc(100% - 5.208cqh), 57.29cqh);
  /* Line height 1.083em sits 0.03em inside the font's 1.143em box, so lift it to put the descender where TMP does. */
  margin-bottom: calc(1.25cqh + 0.03em);
  color: #fff;
  font-weight: normal;
  font-size: 2.292cqh;
  line-height: 1.083;
  text-align: center;
  -webkit-text-stroke: var(--stroke) var(--outline);
}

#loader-bar {
  position: relative;
  width: min(calc(100% - 3.125cqh), 72.92cqh);
  height: var(--bar-h);
  box-sizing: border-box;
  padding: var(--pad);
  border-radius: 999px;
  background: #593312;
  box-shadow:
    inset 0 0 0 0.156cqh #593312,
    inset 0 0 0 var(--pad) #ffd461,
    0 0.3125cqh 0 0.208cqh rgba(0, 0, 0, 0.45);
}

#loader-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #211208;
  overflow: hidden;
}

#loader-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill-min);
  border-radius: 999px;
  background: #ffb014;
  overflow: hidden;
  transition: width 0.25s ease-out;
}

/* Mirrors the fill's RectMask2D: padding 24.5 x 4 units, 10 units of horizontal softness. */
#loader-clip {
  position: absolute;
  top: 0.208cqh;
  bottom: 0.208cqh;
  left: 1.276cqh;
  right: 1.276cqh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.52cqh, #000 calc(100% - 0.52cqh), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 0.52cqh, #000 calc(100% - 0.52cqh), transparent 100%);
}

#loader-gloss {
  position: absolute;
  left: -0.964cqh;
  right: -0.964cqh;
  top: 0.052cqh;
  bottom: 1.615cqh;
  border-radius: 999px;
  background: rgba(255, 242, 153, 0.55);
}

#loader-shine {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.396cqh;
  height: 7.29cqh;
  margin-top: -3.646cqh;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-200%) rotate(22deg);
}

#loader-percent {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding-bottom: 0.104cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: normal;
  font-size: 2.604cqh;
  -webkit-text-stroke: var(--stroke) var(--outline);
  pointer-events: none;
}

#loader-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.146cqh;
  color: #fff;
  opacity: 0.65;
  font-weight: normal;
  font-size: 1.25cqh;
  text-align: center;
  -webkit-text-stroke: var(--stroke) var(--outline);
  pointer-events: none;
}

#rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  background: rgba(15, 8, 3, 0.92);
}

#rotate-phone {
  width: 38px;
  height: 64px;
  border: 4px solid #ffc83a;
  border-radius: 9px;
  box-sizing: border-box;
  animation: rotate-phone 1.8s ease-in-out infinite;
}

@keyframes rotate-phone {
  0%, 20% { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}

#diagnostics-icon {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 6;
}