/* 3D 賞月 · night sky UI */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:#02040c;color:#e8ecff;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;overflow:hidden;min-height:100vh}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab}
#gl:active{cursor:grabbing}
#sky{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 8%, #0b1230 0%, #04060f 60%, #010208 100%)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(rgba(2,4,12,.72),transparent)}
.brand{display:flex;align-items:center;gap:8px;margin-right:auto}
.brand span{font-size:20px}
.brand h1{font-size:16px;letter-spacing:2px;font-weight:700}
.brand small{display:block;font-size:10px;color:#9aa7d8;letter-spacing:1px}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#e8ecff;border-radius:999px;
  padding:7px 14px;font-size:12.5px;cursor:pointer;transition:.2s;backdrop-filter:blur(6px)}
.pill:hover{background:rgba(255,255,255,.16);border-color:#ffd9a0}
.loading{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(60% 50% at 50% 40%, #0b1230, #02040c);color:#cdd6ff;font-size:14px}
.loader-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#ffd9a0;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.info-panel{position:fixed;right:16px;top:76px;z-index:9;background:rgba(6,10,26,.66);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 14px;backdrop-filter:blur(10px);min-width:150px;font-size:12.5px}
.info-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:#9aa7d8}
.info-row b{color:#ffe9c9;font-variant-numeric:tabular-nums}
.info-note{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);color:#7c8ac0;font-size:11px}
.tooltip{position:fixed;top:96px;left:16px;z-index:9;background:rgba(6,10,26,.85);border:1px solid #ffd9a0;
  border-radius:10px;padding:8px 12px;font-size:13px;color:#ffe9c9;pointer-events:none;backdrop-filter:blur(8px)}
.credit{position:fixed;bottom:10px;left:0;right:0;text-align:center;z-index:9;font-size:10px;color:#5b688f;letter-spacing:.5px}
@media (max-width:560px){
  .info-panel{left:16px;right:auto;top:auto;bottom:48px}
  .brand small{display:none}
}