:root{
  --accent:#5ac8ff;
  --accent-soft: rgba(90,200,255,.35);
  --bg:#02070d;
  --panel-bg: rgba(8,14,22,.55);
  --panel-border: rgba(255,255,255,.08);
  --text:#eaf6ff;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

#water,#particles{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#water{ cursor:none; z-index:1; touch-action:none; }
#particles{ z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.55; }

/* -------- custom glowing cursor -------- */
#cursor-glow{
  position:fixed; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; pointer-events:none; z-index:50;
  background:radial-gradient(circle, var(--accent-soft), transparent 70%);
  mix-blend-mode:screen;
  transition:opacity .3s ease, transform .12s ease-out, background .6s ease;
  will-change:transform;
}
#cursor-glow.hidden{ opacity:0; }
#cursor-glow.active{ transform:scale(1.9); }

/* -------- loader -------- */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 20px var(--accent); animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(.6); opacity:.4; }
  50%{ transform:scale(1.2); opacity:1; }
}
.loader-text{ font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* -------- hero -------- */
.interface{
  position:fixed; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  pointer-events:none; opacity:0; transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.interface.visible{ opacity:1; transform:translateY(0); }
.interface h1{
  font-size:clamp(3rem,10vw,10rem); font-weight:800; letter-spacing:-.07em;
  color:rgba(255,255,255,.94);
  text-shadow:0 10px 40px rgba(0,0,0,.4), 0 0 80px var(--accent-soft);
  transition:text-shadow .8s ease;
}
.interface p{
  margin-top:16px; font-size:clamp(.65rem,1vw,.85rem);
  letter-spacing:.35em; text-transform:uppercase; color:rgba(220,240,255,.6);
}

.status{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.4); pointer-events:none; opacity:0;
  transition:opacity 1s ease .3s;
}
.status.visible{ opacity:1; }

/* -------- panel toggle -------- */
#panel-toggle{
  position:fixed; top:22px; right:22px; z-index:20; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--panel-border); background:var(--panel-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--text); font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .3s ease, border-color .3s ease; opacity:0;
}
#panel-toggle.visible{ opacity:1; }
#panel-toggle:hover{ transform:rotate(55deg); border-color:var(--accent); }

/* -------- control panel -------- */
#panel{
  position:fixed; top:78px; right:22px; z-index:19; width:264px; max-height:calc(100vh - 110px);
  overflow-y:auto; border-radius:20px; border:1px solid var(--panel-border);
  background:var(--panel-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:18px; transform:translateX(320px); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
#panel.open{ transform:translateX(0); opacity:1; }
#panel::-webkit-scrollbar{ width:4px; }
#panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:4px; }

.panel-section{ margin-bottom:18px; }
.panel-label{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45);
  margin-bottom:10px; display:flex; justify-content:space-between;
}
.panel-label span.val{ color:var(--accent); }

.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width:32px; height:32px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, border-color .2s ease;
}
.swatch:hover{ transform:scale(1.12); }
.swatch.active{ border-color:#fff; }

input[type=range]{
  -webkit-appearance:none; width:100%; height:3px; border-radius:3px;
  background:rgba(255,255,255,.15); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  border:none; box-shadow:0 0 10px var(--accent); cursor:pointer;
}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; padding:8px 0;
  font-size:12px; color:rgba(255,255,255,.8);
}
.switch{
  position:relative; width:38px; height:20px; border-radius:20px;
  background:rgba(255,255,255,.15); cursor:pointer; transition:background .3s ease; flex-shrink:0;
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .3s ease;
}
.switch.on{ background:var(--accent); }
.switch.on::after{ transform:translateX(18px); }

.btn-row{ display:flex; gap:8px; }
.icon-btn{
  flex:1; padding:10px; border-radius:12px; border:1px solid var(--panel-border);
  background:rgba(255,255,255,.04); color:var(--text); font-size:16px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,.09); border-color:var(--accent); }
.icon-btn:active{ transform:scale(.94); }

/* -------- toast -------- */
#toast{
  position:fixed; bottom:70px; left:50%; transform:translateX(-50%) translateY(20px); z-index:30;
  padding:10px 20px; border-radius:30px; background:var(--panel-bg);
  backdrop-filter:blur(16px); border:1px solid var(--panel-border);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; white-space:nowrap;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* -------- shortcuts modal -------- */
#shortcuts{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(2,7,13,.7); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#shortcuts.open{ opacity:1; pointer-events:auto; }
.shortcuts-card{
  width:min(420px,88vw); border-radius:20px; border:1px solid var(--panel-border);
  background:var(--panel-bg); backdrop-filter:blur(20px); padding:28px;
}
.shortcuts-card h2{
  font-size:14px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; color:var(--accent);
}
.shortcuts-card .row{
  display:flex; justify-content:space-between; padding:7px 0; font-size:13px;
  color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.06);
}
.shortcuts-card kbd{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  padding:2px 8px; border-radius:6px; font-size:11px;
}

.fps-badge{
  position:fixed; top:22px; left:22px; z-index:20; font-size:10px; letter-spacing:.15em;
  color:rgba(255,255,255,.5); background:var(--panel-bg); border:1px solid var(--panel-border);
  backdrop-filter:blur(12px); padding:8px 12px; border-radius:10px; opacity:0; transition:opacity .3s ease;
}
.fps-badge.show{ opacity:1; }

.ui-hidden .interface, .ui-hidden .status, .ui-hidden #panel-toggle,
.ui-hidden #panel, .ui-hidden #cursor-glow, .ui-hidden .fps-badge{
  opacity:0 !important; pointer-events:none !important;
}

@media (max-width:640px){
  #panel{ width:calc(100vw - 44px); right:22px; }
  #panel-toggle{ top:18px; right:18px; }
}

/* ============================================================
   REALISM ENHANCEMENTS
   Optional local image layer + cinematic depth
============================================================ */
#image-fallback{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .9s ease, filter 1.2s ease, transform 1.2s ease;
  background:#02070d;
}
#image-fallback img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.06);
  filter:saturate(.9) contrast(1.08) brightness(.62);
  opacity:.72;
  transition:transform 8s cubic-bezier(.2,.7,.2,1), filter 1.2s ease;
}
body.real-image #image-fallback{opacity:1}
body.real-image #image-fallback img{transform:scale(1.12)}
body.cinematic #image-fallback img{
  filter:saturate(1.08) contrast(1.14) brightness(.58);
}
body.reflections #water{
  filter:saturate(1.08) contrast(1.06);
}
body.cinematic::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 24%, rgba(0,0,0,.08) 60%, rgba(0,0,0,.42) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18), transparent 30%, transparent 70%, rgba(0,0,0,.22));
  mix-blend-mode:multiply;
}
#water,#particles{will-change:transform,filter}