html { -ms-touch-action: none; }
body, canvas, div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
}
body {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #06130f;
  color: #dcebe3;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
}
#GameDiv, #Cocos3dGameContainer, #GameCanvas { width: 100%; height: 100%; }
canvas { background-color: transparent; }
#ShanhaiLoader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #dfe9df url("loading-bg.png") center center / cover no-repeat;
  transition: opacity 260ms ease;
}
#ShanhaiLoader.loader-exit { opacity: 0; pointer-events: none; }
.loader-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(225, 235, 225, .06) 0%, rgba(11, 39, 31, .08) 46%, rgba(4, 24, 18, .52) 100%);
}
.loader-stage {
  position: relative;
  width: min(100%, 520px);
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(18vh, 190px, 25vh);
  box-sizing: border-box;
}
.loader-emblem { position: absolute; top: clamp(12vh, 112px, 17vh); width: min(68vw, 270px); height: 132px; object-fit: contain; opacity: .5; animation: emblem-breathe 2.8s ease-in-out infinite; }
.loader-hero { position: relative; width: 162px; height: 205px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .36)); animation: hero-float 2.8s ease-in-out infinite; }
.loader-title { margin-top: -8px; color: #f5e5aa; font-size: clamp(32px, 10vw, 42px); font-weight: 700; letter-spacing: 10px; text-indent: 10px; text-shadow: 0 3px 0 #17392f, 0 7px 18px rgba(0,0,0,.7); }
.loader-subtitle { margin-top: 8px; color: #e2eee7; font-size: 14px; letter-spacing: 5px; text-indent: 5px; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.loader-footer { position: absolute; left: max(30px, var(--safe-left)); right: max(30px, var(--safe-right)); bottom: max(42px, calc(var(--safe-bottom) + 26px)); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
.loader-track { grid-column: 1 / -1; position: relative; width: 100%; height: 5px; margin-top: 10px; overflow: hidden; border: 1px solid rgba(224, 204, 139, .76); background: rgba(10, 40, 31, .58); box-shadow: 0 2px 12px rgba(0,0,0,.34); }
.loader-progress { width: 0%; height: 100%; background: linear-gradient(90deg, #8ab7a0, #ead078); box-shadow: 0 0 12px rgba(238, 211, 122, .72); transition: width 220ms ease-out; }
.loader-copy { color: #edf4ee; font-size: 14px; letter-spacing: 2px; text-align: left; text-shadow: 0 2px 7px rgba(0,0,0,.9); }
.loader-percent { color: #f0d98e; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 7px rgba(0,0,0,.9); }
#ShanhaiLoader.loader-error .loader-progress { width: 100%; background: #a95d50; }
#ShanhaiLoader.loader-error .loader-copy { color: #ffe0d7; }
@keyframes hero-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@keyframes emblem-breathe { 0%, 100% { transform: scale(.96); opacity: .52; } 50% { transform: scale(1.04); opacity: .84; } }
@media (max-height: 620px) {
  .loader-stage { min-height: 100%; padding-top: 72px; }
  .loader-emblem { top: 38px; width: 210px; }
  .loader-hero { width: 116px; height: 146px; }
  .loader-title { font-size: 31px; }
  .loader-footer { bottom: max(24px, calc(var(--safe-bottom) + 16px)); }
}
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}