:root{
  --panel-bg: rgba(16,20,30,0.62);
  --panel-border: rgba(255,255,255,0.18);
  --text: #f4f8ff;
  --accent: #f4c724;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#8ec5e8;
  font-family:'Bricolage Grotesque', system-ui, sans-serif; color:var(--text);
  -webkit-user-select:none; user-select:none; touch-action:none; }
#scene-container{ position:fixed; inset:0; }
canvas{ display:block; }

.panel{
  position:fixed; z-index:10;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,0.28);
  padding:12px 14px;
}
.panel-title{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:2px; font-weight:800;
  opacity:0.65; margin:2px 0 6px;
}

/* Toolbar top-left */
#toolbar{ top:14px; left:14px; width:216px; }
.palette{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.swatch{
  width:26px; height:26px; border-radius:8px; border:2px solid rgba(255,255,255,0.25);
  cursor:pointer; transition:transform .12s; padding:0;
}
.swatch:hover{ transform:translateY(-2px); }
.swatch.active{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.35); animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,255,255,0.35);} 50%{ box-shadow:0 0 0 6px rgba(255,255,255,0.12);} }

.toggle-row{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  cursor:pointer; margin:2px 0 6px; }
.toggle-row input{ width:16px; height:16px; accent-color:var(--accent); }

.type-row{ display:flex; gap:6px; }
.type-btn{
  flex:1; font-family:inherit; font-weight:700; font-size:11px;
  padding:8px 4px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.08); color:var(--text);
  border:1px solid rgba(255,255,255,0.14); transition:.15s;
}
.type-btn:hover{ background:rgba(255,255,255,0.16); }
.type-btn.active{ background:var(--accent); color:#1a1a1a; border-color:#fff; }

/* HUD top-right */
#hud{ top:14px; right:14px; width:172px; text-align:right; }
.height-readout{
  font-family:'JetBrains Mono', monospace; font-weight:800; font-size:15px;
  margin-bottom:10px; color:var(--accent); text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.hud-btns{ display:flex; flex-direction:column; gap:6px; }
.mini-btn{
  font-family:inherit; font-weight:700; font-size:12px;
  padding:8px 10px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.1); color:var(--text);
  border:1px solid rgba(255,255,255,0.16); transition:.15s; text-decoration:none;
  display:inline-block;
}
.mini-btn:hover{ background:rgba(255,255,255,0.22); transform:translateY(-1px); }
.mini-btn.danger:hover{ background:#e8412c; border-color:#fff; }
.mini-btn.link{ background:transparent; opacity:.85; }

/* Bottom bar */
#bottombar{ bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px; max-width:94vw; }
.ticker{ font-size:12px; opacity:.85; font-weight:400; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.bottom-btns{ display:flex; gap:6px; }

/* Sky panel */
#skypanel{ bottom:14px; right:14px; display:flex; align-items:center; gap:10px; padding:10px 14px; }
.sky-label{ font-size:12px; font-weight:700; }
#skySlider{ width:110px; accent-color:var(--accent); }

/* Toast */
.toast{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  z-index:50; background:rgba(16,20,30,0.9); border:1px solid var(--panel-border);
  padding:14px 22px; border-radius:14px; font-weight:800; font-size:16px;
  opacity:0; pointer-events:none; transition:.28s; backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.4); text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Modal */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(6,10,18,0.66);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.modal.hidden{ display:none; }
.modal-box{ background:rgba(16,20,30,0.94); border:1px solid var(--panel-border);
  border-radius:20px; width:min(500px,92vw); max-height:80vh; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-head{ display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid rgba(255,255,255,0.1); }
.modal-head h2{ font-size:20px; font-weight:800; }
.gallery-list{ overflow-y:auto; padding:8px; }
.empty{ padding:30px; text-align:center; opacity:.7; }
.grow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; cursor:pointer; transition:.15s; }
.grow:hover{ background:rgba(255,255,255,0.08); }
.rank{ font-size:18px; font-weight:800; width:34px; }
.gname{ font-weight:700; font-size:14px; }
.gby{ font-size:11px; opacity:.6; grid-column:2; }
.gstat{ font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:800;
  color:var(--accent); grid-column:3; grid-row:1 / span 2; align-self:center; }

/* Mobile */
@media (max-width:640px){
  #toolbar{ width:calc(100vw - 28px); top:10px; left:14px; }
  .palette{ justify-content:space-between; }
  .swatch{ width:30px; height:30px; }
  #hud{ top:auto; bottom:70px; right:14px; width:auto; }
  .hud-btns{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
  .mini-btn{ font-size:11px; padding:7px 9px; }
  #bottombar{ bottom:10px; left:14px; right:14px; transform:none;
    flex-direction:column; align-items:stretch; gap:8px; }
  .ticker{ white-space:normal; font-size:11px; text-align:center; }
  .bottom-btns{ justify-content:center; }
  #skypanel{ display:none; }
}
</parameter>
</invoke>