/* Charge Drop —— 自定义 WebGL 加载页。
   • 背景: 动态天空, 在游戏同款 4 套调色板间循环(白天→亮蓝→黄昏→夜晚)。
   • LOGO(上): Titan One + 立体挤出(CHARGE 白+蓝, DROP 金+橙), 与 TitleScreen 一致。
   • 加载动画(下): 5 颗行星皮肤球驼峰式起伏, 代替进度条。
   下面 :root 里的 --logo-* / --ball-* / --hop / --sky-cycle 是可调布局值(用调试预览调好后填这里)。 */

/* Titan One 本地字体(= 游戏内 GameFont.ttf), 避免运行时联网拉 Google Fonts。
   平台(CrazyGames/Poki)要求零外部请求, 故随包自带。 */
@font-face{
  font-family:"Titan One";
  src:url("TitanOne.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --sky0: linear-gradient(180deg, #75B0ED 0%, #EDEDE3 100%);  /* 白天 */
  --sky1: linear-gradient(180deg, #3087ED 0%, #A1D6FC 100%);  /* 亮蓝 */
  --sky2: linear-gradient(180deg, #574A8C 0%, #FC9E66 100%);  /* 黄昏 */
  --sky3: linear-gradient(180deg, #17214D 0%, #3B5085 100%);  /* 夜晚 */
  --blue:#1C73F2; --gold:#FFCC1F; --orange:#F56B0A;
  --font: "Titan One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ▼ 可调布局(调试预览里定稿后改这里) */
  --logo-size: 80px;
  --logo-top: 16%;
  --ball-size: 24px;
  --ball-gap: 10px;
  --balls-bottom: 16%;
  --hop: 40px;
  --sky-cycle: 28s;
}

*{ box-sizing:border-box; }
html,body{ margin:0; width:100%; height:100%; overflow:hidden; background:#75B0ED;
  font-family:var(--font); -webkit-tap-highlight-color:transparent; }

#unity-container{ position:fixed; inset:0; }
#unity-canvas{ width:100%; height:100%; display:block; background:transparent; }

/* ── 加载层 ── */
#loading{ position:fixed; inset:0; z-index:10; overflow:hidden; transition:opacity .55s ease; }
#loading.done{ opacity:0; pointer-events:none; }

/* 动态天空: 4 层堆叠, 依次淡入淡出循环 */
.sky{ position:absolute; inset:0; z-index:0; opacity:0; will-change:opacity;
  animation:skyfade var(--sky-cycle) linear infinite; }
.sky.s0{ background:var(--sky0); animation-delay:calc(var(--sky-cycle) * 0);    }
.sky.s1{ background:var(--sky1); animation-delay:calc(var(--sky-cycle) * -0.75);}
.sky.s2{ background:var(--sky2); animation-delay:calc(var(--sky-cycle) * -0.50);}
.sky.s3{ background:var(--sky3); animation-delay:calc(var(--sky-cycle) * -0.25);}
@keyframes skyfade{ 0%{opacity:0;} 6%{opacity:1;} 25%{opacity:1;} 31%{opacity:0;} 100%{opacity:0;} }

/* ── LOGO(上, Titan One + 8px 挤出侧面) ── */
#logo{ position:absolute; top:var(--logo-top); left:0; right:0; z-index:2; text-align:center;
  user-select:none; -webkit-user-select:none; line-height:1.02; filter:drop-shadow(0 3px 10px rgba(0,0,0,.28)); }
.line{ font-weight:400; letter-spacing:1px; font-size:var(--logo-size); }
.l1{ color:#fff;
  text-shadow:0 1px 0 var(--blue),0 2px 0 var(--blue),0 3px 0 var(--blue),0 4px 0 var(--blue),
              0 5px 0 var(--blue),0 6px 0 var(--blue),0 7px 0 var(--blue),0 8px 0 var(--blue),0 11px 14px rgba(0,0,0,.22); }
.l2{ color:var(--gold);
  text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 3px 0 var(--orange),0 4px 0 var(--orange),
              0 5px 0 var(--orange),0 6px 0 var(--orange),0 7px 0 var(--orange),0 8px 0 var(--orange),0 11px 14px rgba(0,0,0,.22); }

/* ── 行星加载动画(下, 驼峰起伏) ── */
#planets{ position:absolute; bottom:var(--balls-bottom); left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:var(--ball-gap); }
.p{ width:var(--ball-size); height:var(--ball-size); border-radius:50%;
  box-shadow:0 4px 8px rgba(0,0,0,.28), inset -2px -3px 5px rgba(0,0,0,.22), inset 2px 2px 4px rgba(255,255,255,.25);
  animation:hop 1.15s ease-in-out infinite; }
/* 波浪驼峰: 依次错开起跳, 一个"驼峰"从左往右滚过去(连续、重叠) */
.p-earth  { background:radial-gradient(circle at 70% 64%, #35B44B 0 20%, transparent 24%),
                       radial-gradient(circle at 32% 32%, #6BB8F7, #1E74D6 60%, #124a9c); animation-delay:0s;    }
.p-moon   { background:radial-gradient(circle at 62% 60%, #B7BCC5 0 11%, transparent 15%),
                       radial-gradient(circle at 34% 30%, #EEF0F3, #C7CBD2 62%, #A7ADB6); animation-delay:.11s;  }
.p-mars   { background:radial-gradient(circle at 34% 30%, #F4854A, #D65526 60%, #9c3a18); animation-delay:.22s;  }
.p-jupiter{ background:
    repeating-linear-gradient(0deg, #ead7af 0 12%, #c6a374 12% 20%, #916d47 20% 28%, #c6a374 28% 40%);
    animation-delay:.33s;  }
.p-venus  { background:radial-gradient(circle at 34% 30%, #FCEBA8, #E7B057 60%, #b9822f); animation-delay:.44s;  }
@keyframes hop{ 0%{transform:translateY(0);} 30%{transform:translateY(calc(var(--hop) * -1));} 60%,100%{transform:translateY(0);} }

/* ── 警告/错误条 ── */
#unity-warning{ position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:20; text-align:center; }

@media (prefers-reduced-motion: reduce){
  .sky{ animation:none; } .sky.s2{ opacity:1; }   /* 定格黄昏 */
  .p{ animation:none; }
}