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;
  background: #1b0f06;
}

body.framed.wide #game-frame {
  box-shadow: 0 0 0 2px rgba(255, 205, 90, 0.35), 0 20px 80px rgba(0, 0, 0, 0.75);
}

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

#loader {
  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.4cqh;
  --pad: 0.38cqh;
  --fill-min: calc(var(--bar-h) - var(--pad) * 2);
}

body.wide #loader {
  background-image: url("bg_wide.jpg");
  --bar-h: 4.6cqh;
}

body.wide #loader-logo {
  top: 2.4cqh;
  width: auto;
  height: 21cqh;
  max-height: none;
}

body.wide #loader-bottom {
  height: 26cqh;
  padding-bottom: 4.6cqh;
}

body.wide #loader-tip {
  width: 70cqh;
  font-size: 2.5cqh;
}

body.wide #loader-bar {
  width: min(calc(100cqw - 8cqh), 82cqh);
}

body.wide #loader-percent {
  font-size: 2.7cqh;
}

#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-logo {
  position: absolute;
  left: 50%;
  top: 2.1cqh;
  transform: translateX(-50%);
  width: min(calc(100cqw - 4.2cqh), 54.2cqh);
  height: auto;
  max-height: 32cqh;
  object-fit: contain;
  filter: drop-shadow(0 0.6cqh 1cqh rgba(0, 0, 0, 0.45));
  animation: logo-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both, logo-breathe 2.8s ease-in-out 0.55s infinite;
}

@keyframes logo-in {
  from { transform: translateX(-50%) scale(0.82); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes logo-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.025); }
}

#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.55) 45%, rgba(10, 5, 3, 0) 100%);
}

#loader-tip {
  width: min(calc(100% - 5.6cqw - 2.1cqh), 57cqh);
  margin-bottom: 1.25cqh;
  color: #fff;
  font-weight: bold;
  font-size: 2.3cqh;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 0 0.25cqh #000, 0 0.2cqh 0.4cqh rgba(0, 0, 0, 0.9);
}

#loader-bar {
  position: relative;
  width: min(calc(100% - 2 * 1.56cqh), 73cqh);
  height: var(--bar-h);
  box-sizing: border-box;
  padding: var(--pad);
  border-radius: 999px;
  background: #5a3312;
  box-shadow:
    inset 0 0 0 0.16cqh #ffd361,
    0 0.5cqh 0.9cqh rgba(0, 0, 0, 0.5);
}

#loader-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #211207;
  box-shadow: inset 0 0.25cqh 0.5cqh rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

#loader-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill-min);
  border-radius: 999px;
  background: linear-gradient(to bottom, #ffe27a 0%, #ffb515 55%, #e98a00 100%);
  box-shadow: inset 0 -0.25cqh 0 rgba(150, 70, 0, 0.45);
  overflow: hidden;
  transition: width 0.25s ease-out;
}

#loader-gloss {
  position: absolute;
  left: 0.6cqh;
  right: 0.6cqh;
  top: 0.3cqh;
  height: 42%;
  border-radius: 999px;
  background: rgba(255, 250, 210, 0.55);
}

#loader-shine {
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 2.4cqh;
  left: -10%;
  background: rgba(255, 255, 255, 0.35);
  transform: skewX(-22deg);
  animation: shine 1.6s linear infinite;
}

@keyframes shine {
  from { left: -15%; }
  to { left: 115%; }
}

#loader-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 2.6cqh;
  text-shadow: 0 0 0.25cqh #000, 0 0 0.25cqh #000, 0 0.15cqh 0.3cqh rgba(0, 0, 0, 0.8);
  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;
}