/* V23 — cinematic surface artwork and real, sea-worn floating navigation. */
:root{
  --surface-art:url('../assets/ui/surface-panorama.v23.webp');
  --nav-float-art:url('../assets/ui/nav-float.v23.webp');
}

.site-header,.site-header.scrolled{
  height:104px!important;
  padding-bottom:15px!important;
  background-image:
    linear-gradient(180deg,rgba(3,18,28,.03) 0%,rgba(3,24,37,.08) 42%,rgba(1,22,36,.48) 100%),
    var(--surface-art)!important;
  background-size:100% 210%,cover!important;
  background-position:center 42%,center 37%!important;
  box-shadow:0 13px 30px rgba(0,15,25,.34)!important;
}
.site-header::before{
  background:
    linear-gradient(104deg,transparent 10%,rgba(255,244,211,.12) 11%,transparent 14%),
    radial-gradient(ellipse at 50% 100%,rgba(113,219,215,.14),transparent 58%)!important;
  mix-blend-mode:screen;
  opacity:.72;
}
.site-header::after{
  bottom:-23px!important;height:50px!important;
  background:
    linear-gradient(180deg,rgba(7,64,82,.42),rgba(3,33,51,.96)),
    var(--surface-art)!important;
  background-size:100% 430%,cover!important;
  background-position:center 63%,center 61%!important;
  clip-path:polygon(0 31%,4% 20%,9% 30%,15% 13%,22% 27%,29% 17%,36% 34%,44% 14%,51% 26%,59% 11%,67% 31%,75% 17%,82% 29%,90% 12%,96% 25%,100% 18%,100% 100%,0 100%)!important;
}

.nav-waterline{
  bottom:-39px!important;height:78px!important;
  overflow:hidden!important;
  filter:drop-shadow(0 8px 9px rgba(0,17,29,.38))!important;
}
.nav-waterline::before,.nav-waterline::after{
  left:-3%!important;width:106%!important;height:78px!important;top:0!important;
  background-image:var(--surface-art)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  will-change:transform,background-position!important;
}
.nav-waterline::before{
  opacity:.46!important;
  background-position:center 58%!important;
  filter:saturate(1.08) brightness(.72) blur(1px);
  animation:surface-swell-back 13s cubic-bezier(.45,.05,.55,.95) infinite!important;
}
.nav-waterline::after{
  opacity:.94!important;
  background-position:center 67%!important;
  filter:saturate(1.12) contrast(1.06);
  mix-blend-mode:screen;
  animation:surface-swell-front 8.5s cubic-bezier(.45,.05,.55,.95) infinite!important;
  clip-path:polygon(0 31%,4% 20%,9% 32%,15% 15%,22% 29%,29% 18%,36% 35%,44% 15%,51% 28%,59% 12%,67% 32%,75% 18%,82% 31%,90% 14%,96% 27%,100% 20%,100% 100%,0 100%);
}
@keyframes surface-swell-back{
  0%,100%{transform:translate3d(-1.2%,7px,0) scale(1.035)}
  48%{transform:translate3d(1.1%,2px,0) scale(1.045)}
}
@keyframes surface-swell-front{
  0%,100%{transform:translate3d(0,0,0) scale(1.025)}
  42%{transform:translate3d(-1.15%,-4px,0) scale(1.04)}
  74%{transform:translate3d(.7%,1px,0) scale(1.03)}
}

/* The labels sit on one real illustrated floating object, not a CSS imitation. */
.site-header .nav{gap:8px!important}
.site-header .nav a,.site-header .header-buy,.site-header .nav-toggle{
  min-height:52px!important;
  padding:12px 24px 14px!important;
  color:#fff0ce!important;
  border:0!important;
  border-radius:22px!important;
  background-color:transparent!important;
  background-image:var(--nav-float-art)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  box-shadow:none!important;
  filter:drop-shadow(0 7px 5px rgba(0,13,21,.48)) saturate(.96);
  text-shadow:0 1px 0 #2b170d,0 2px 3px rgba(0,0,0,.72)!important;
}
.site-header .nav a::before,.site-header .header-buy::before,.site-header .nav-toggle::before{display:none!important}
.site-header :is(.nav a,.header-buy,.nav-toggle):hover{
  filter:drop-shadow(0 9px 6px rgba(0,13,21,.52)) saturate(1.08) brightness(1.08)!important;
}
.site-header .nav a.active{
  color:#fff7d9!important;
  outline:2px solid rgba(226,196,116,.7)!important;
  outline-offset:-7px!important;
  filter:drop-shadow(0 7px 6px rgba(0,13,21,.5)) saturate(1.12) brightness(1.1)!important;
}
.brass-glint{
  inset:8px 15%!important;
  background:linear-gradient(105deg,transparent 28%,rgba(255,244,204,.22) 47%,transparent 64%)!important;
  animation:float-highlight 5.8s ease-in-out infinite;
}
@keyframes float-highlight{0%,68%,100%{opacity:.12;transform:translateX(-12%)}82%{opacity:.7;transform:translateX(12%)}}

.header-brand{margin-bottom:-7px!important}
.sound-toggle{margin-bottom:4px!important;backdrop-filter:blur(8px)}

/* The upgraded chest keeps the same split geometry, but gains wet wood and aged bronze. */
.treasure-body,.treasure-lid{
  filter:drop-shadow(0 18px 18px rgba(0,8,13,.5)) saturate(1.05) contrast(1.035)!important;
}
.treasure-halo{filter:saturate(.9) blur(.3px)}
.treasure-scene:not(.is-open) .treasure-lid{transform:translateY(0)!important;animation:chest-breath 5.4s ease-in-out infinite}
@keyframes chest-breath{0%,100%{filter:drop-shadow(0 16px 16px rgba(0,8,13,.48)) saturate(1.04)}50%{filter:drop-shadow(0 19px 20px rgba(0,8,13,.56)) saturate(1.09) brightness(1.025)}}

@media(max-width:1300px){
  .site-header .nav{top:88px!important;background:linear-gradient(160deg,rgba(5,39,54,.97),rgba(3,23,36,.985))!important}
  .site-header .nav a{width:min(100%,330px);min-height:58px!important;margin-inline:auto;justify-content:center!important;background-size:100% 100%!important}
}
@media(max-width:700px){
  .site-header,.site-header.scrolled{
    height:76px!important;padding-bottom:9px!important;
    background-size:auto 190%,auto 190%!important;
    background-position:center 40%,center 36%!important;
  }
  .site-header::after{bottom:-16px!important;height:38px!important;background-size:auto 390%,auto 390%!important}
  .nav-waterline{bottom:-29px!important;height:58px!important}
  .nav-waterline::before,.nav-waterline::after{height:58px!important;background-size:auto 430px!important}
  .site-header .header-buy,.site-header .nav-toggle{min-height:46px!important;padding:10px 14px 12px!important}
  .site-header .nav{top:70px!important}
}
@media(max-width:420px){
  .site-header .header-buy{padding-inline:12px!important}
  .site-header .nav-toggle{padding-inline:13px!important}
}
@media(prefers-reduced-motion:reduce){
  .nav-waterline::before,.nav-waterline::after,.brass-glint,.treasure-scene:not(.is-open) .treasure-lid{animation:none!important}
}