:root{
  --amber:#ffb45a;
  --swamp:#1a2418;
  --glass:rgba(14,22,16,0.55);
  --glass-brd:rgba(150,200,120,0.22);
  --ink:#dfe8cf;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:#05080a;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);}
#scene-container{position:fixed;inset:0;}
canvas{display:block;touch-action:none;}

/* ---------- Loading ---------- */
#loading{
  position:fixed;inset:0;z-index:50;
  background:radial-gradient(circle at 50% 40%, #1a2b1e 0%, #060a08 75%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .8s ease, visibility .8s;
}
#loading.hide{opacity:0;visibility:hidden;}
.firefly-spinner{position:relative;width:90px;height:90px;}
.firefly-spinner span{
  position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;
  background:#bfff70;box-shadow:0 0 12px 4px rgba(150,255,90,.8);
  animation:orbit 2.4s linear infinite;
}
.firefly-spinner span:nth-child(2){animation-delay:-.48s;background:#eaff9a;}
.firefly-spinner span:nth-child(3){animation-delay:-.96s;}
.firefly-spinner span:nth-child(4){animation-delay:-1.44s;background:#d6ff88;}
.firefly-spinner span:nth-child(5){animation-delay:-1.92s;}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(38px) scale(.6);opacity:.3;}
  50%{opacity:1;transform:rotate(180deg) translateX(38px) scale(1.1);}
  to{transform:rotate(360deg) translateX(38px) scale(.6);opacity:.3;}
}
.load-title{font-weight:800;letter-spacing:.28em;font-size:clamp(20px,5vw,34px);color:#eaffcf;text-shadow:0 0 18px rgba(150,255,90,.4);}
.load-sub{font-weight:200;letter-spacing:.15em;font-size:13px;color:#9bb388;font-style:italic;}

/* ---------- Title card ---------- */
#title-card{
  position:fixed;top:16%;left:0;right:0;text-align:center;z-index:30;pointer-events:none;
  opacity:0;transform:translateY(-12px);transition:opacity 1.2s ease, transform 1.2s ease;
}
#title-card.show{opacity:1;transform:translateY(0);}
#title-card.gone{opacity:0;transition:opacity 1.6s ease;}
.tc-main{font-weight:800;font-size:clamp(34px,9vw,74px);letter-spacing:.02em;color:#f4ffe0;
  text-shadow:0 2px 30px rgba(0,0,0,.7), 0 0 40px rgba(200,140,60,.35);}
.tc-sub{font-weight:200;font-style:italic;font-size:clamp(13px,2.5vw,18px);letter-spacing:.2em;color:#d3c2a0;margin-top:6px;}

/* ---------- HUD hint ---------- */
#hud-hint{
  position:fixed;left:14px;bottom:14px;z-index:20;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd);border-radius:12px;padding:9px 13px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#cfe0b8;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.hk{display:inline-block;background:rgba(180,230,140,.15);border:1px solid var(--glass-brd);
  border-radius:5px;padding:1px 6px;color:#eaffcf;font-weight:700;}

/* ---------- Location tag ---------- */
#location-tag{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:20;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:#a9c48a;text-shadow:0 1px 8px rgba(0,0,0,.7);opacity:.8;
}

/* ---------- Controls ---------- */
#controls{position:fixed;right:14px;bottom:14px;z-index:20;display:flex;flex-direction:column;gap:9px;align-items:flex-end;}
.ctl-btn{
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd);border-radius:12px;color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  padding:10px 14px;cursor:pointer;transition:all .2s ease;
  box-shadow:0 6px 22px rgba(0,0,0,.4);min-width:112px;text-align:left;
}
.ctl-btn:hover{background:rgba(60,90,50,.7);border-color:rgba(180,255,120,.5);
  box-shadow:0 0 18px rgba(150,255,90,.25);transform:translateY(-1px);}
.ctl-btn:active{transform:translateY(1px);}

/* ---------- Firefly slider ---------- */
#fly-slider-wrap{
  position:fixed;right:14px;top:14px;z-index:20;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd);border-radius:12px;padding:9px 13px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 22px rgba(0,0,0,.4);
}
#fly-slider-wrap label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#a9c48a;}
#fly-slider{width:130px;accent-color:#bfff70;cursor:pointer;}

/* ---------- Footer ---------- */
#footer{position:fixed;left:50%;bottom:2px;transform:translateX(-50%);z-index:20;font-size:11px;opacity:.55;}
#footer a{color:#9bb388;text-decoration:none;font-family:'JetBrains Mono',monospace;letter-spacing:.05em;}
#footer a:hover{color:#eaffcf;text-decoration:underline;}

/* ---------- Mobile controls ---------- */
.mobile-only,.mobile-only-hidden{display:none;}
body.is-touch #hud-hint{display:none;}
body.is-touch .mobile-only{display:block;}

#mobile-look{position:fixed;right:0;top:0;width:55%;height:100%;z-index:5;}
#joystick{
  position:fixed;left:22px;bottom:90px;width:110px;height:110px;z-index:15;
  border-radius:50%;background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.4);
}
#joystick-knob{width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #cfff90, #6fae3a);
  box-shadow:0 0 16px rgba(150,255,90,.5);transition:transform .05s;}

body.is-touch #controls{bottom:14px;}
body.is-touch .ctl-btn{min-width:0;padding:9px 11px;font-size:12px;}

/* ---------- Photo mode ---------- */
body.photo-mode #controls,
body.photo-mode #fly-slider-wrap,
body.photo-mode #hud-hint,
body.photo-mode #location-tag,
body.photo-mode #footer,
body.photo-mode #joystick,
body.photo-mode #mobile-look{opacity:0;pointer-events:none;transition:opacity .4s;}
#photo-exit{
  display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px 18px;cursor:pointer;
  backdrop-filter:blur(10px);
}
body.photo-mode #photo-exit{display:block;opacity:1;}
</parameter>