/* ══════════════════════════════════════════════════
   PALETTE
══════════════════════════════════════════════════ */
:root {
  --pink:      #FF2D78;
  --pink-s:    rgba(255,45,120,.22);
  --blue:      #2D8FFF;
  --blue-s:    rgba(45,143,255,.22);
  --purple:    #9B2DFF;
  --purple-s:  rgba(155,45,255,.22);
  --orange:    #FF7A2D;
  --orange-s:  rgba(255,122,45,.22);
  --mint:      #00E8AA;
  --mint-s:    rgba(0,232,170,.22);
  --yellow:    #FFD02D;
  --yellow-s:  rgba(255,208,45,.22);
  --cyan:      #00CCFF;
  --cyan-s:    rgba(0,204,255,.22);

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
  --r: 16px; --r-sm: 10px;
  --nav-h: calc(62px + env(safe-area-inset-bottom,0px));
  --serif: 'Syne', sans-serif;
  --body:  'Plus Jakarta Sans', sans-serif;
  --mono:  'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  --bg: #060A14;
  --bg1: rgba(255,255,255,.055);
  --bg2: rgba(255,255,255,.09);
  --gls: rgba(12,20,44,.78);
  --gls-bdr: rgba(255,255,255,.11);
  --gls-bdr2: rgba(255,255,255,.2);
  --gls-shadow: rgba(0,0,0,.4);
  --txt: #F0F4FF;
  --txt2: rgba(240,244,255,.7);
  --mut: rgba(240,244,255,.42);
  --mut2: rgba(240,244,255,.2);
  --blob-o: .26;
  --bar-bg: rgba(6,10,20,.86);
  --scan-color: rgba(0,204,255,.16);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #ECF0F8;
  --bg1: rgba(255,255,255,.65);
  --bg2: rgba(255,255,255,.82);
  --gls: rgba(240,244,255,.68);
  --gls-bdr: rgba(180,195,225,.6);
  --gls-bdr2: rgba(180,195,225,.9);
  --gls-shadow: rgba(0,0,0,.09);
  --txt: #0A0E1E;
  --txt2: rgba(10,14,30,.72);
  --mut: rgba(10,14,30,.48);
  --mut2: rgba(10,14,30,.26);
  --blob-o: .13;
  --bar-bg: rgba(236,240,248,.9);
  --scan-color: rgba(45,143,255,.14);
  color-scheme: light;
}

/* ══ BASE ══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--txt);
  font-family:var(--body); font-weight:400; font-size:16px; line-height:1.65;
  min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
}

/* ══ BLOBS ══ */
.blob {
  position:fixed; border-radius:50%; filter:blur(100px);
  opacity:var(--blob-o); pointer-events:none; z-index:0; will-change:transform;
}
.b1{width:500px;height:500px;background:var(--pink);  top:-160px; left:-140px; animation:fl1 22s ease-in-out infinite;}
.b2{width:440px;height:440px;background:var(--purple);top:10%;    right:-150px;animation:fl2 27s ease-in-out infinite;}
.b3{width:380px;height:380px;background:var(--blue);  bottom:18%; left:-100px; animation:fl3 19s ease-in-out infinite;}
.b4{width:460px;height:460px;background:var(--mint);  bottom:-130px;right:-110px;animation:fl4 24s ease-in-out infinite;}

@keyframes fl1{0%,100%{transform:translate(0,0) scale(1)}  33%{transform:translate(70px,50px) scale(1.08)}  66%{transform:translate(-35px,90px) scale(.94)}}
@keyframes fl2{0%,100%{transform:translate(0,0) scale(1)}  33%{transform:translate(-80px,35px) scale(.92)} 66%{transform:translate(25px,-70px) scale(1.1)}}
@keyframes fl3{0%,100%{transform:translate(0,0) scale(1)}  33%{transform:translate(55px,-45px) scale(1.06)} 66%{transform:translate(-25px,65px) scale(.96)}}
@keyframes fl4{0%,100%{transform:translate(0,0) scale(1)}  33%{transform:translate(-50px,-55px) scale(1.1)}  66%{transform:translate(65px,35px) scale(.91)}}
.b5{width:340px;height:340px;background:var(--yellow);top:38%;left:22%;filter:blur(100px);opacity:calc(var(--blob-o)*0.55);pointer-events:none;position:fixed;border-radius:50%;z-index:0;will-change:transform;animation:fl4 29s ease-in-out infinite;}

/* ══ LAYOUT ══ */
#app{position:relative;z-index:1;padding-bottom:var(--nav-h);}
@media(min-width:680px){#app{padding-bottom:0;}}

/* ══ TOP BAR ══ */
.bar{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;height:56px;padding:0 16px;gap:8px;
  background:var(--bar-bg);
  backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);
  transition:background .4s;
}
.bar::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 25%,var(--blue) 50%,var(--purple) 75%,transparent 100%);
  opacity:0.45;
}
.bar-back{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg1);border:1px solid var(--gls-bdr);
  border-radius:50%;width:38px;height:38px;flex-shrink:0;
  cursor:pointer;color:var(--txt2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.65) translateX(-8px);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s,background .2s,color .2s;
  -webkit-tap-highlight-color:transparent;
}
.bar-back.on{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1) translateX(0);}
.bar-back:active{transform:scale(.9)!important;}
@media(hover:hover){.bar-back:hover{background:var(--bg2);color:var(--txt);}}
.bar-logo{
  font-family:var(--serif);font-size:1.05rem;font-weight:800;
  cursor:pointer;flex-shrink:0;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.bar-crumb{
  font-family:var(--mono);font-size:.6rem;color:var(--mut);
  letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.theme-btn{
  background:var(--bg1);border:1px solid var(--gls-bdr);border-radius:50%;
  width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:background .2s,transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn:active{transform:scale(.88) rotate(20deg);}

/* ══ BAR SCROLL STATE ══ */
.bar{transition:background .4s,box-shadow .4s;}
.bar.scrolled{box-shadow:0 2px 22px rgba(0,0,0,.24);}
[data-theme="dark"] .bar.scrolled{background:rgba(6,10,20,.97);}
[data-theme="light"] .bar.scrolled{background:rgba(236,240,248,.99);}

/* MOBILE BAR */
@media(max-width:679px){
  .bar { justify-content: center; position: sticky; }
  .bar-back { position: absolute; left: 16px; margin: 0; }
  .theme-btn { position: absolute; right: 16px; }
  .logo-text, .bar-crumb { display: none; }
  .bar-logo { font-size: 1.4rem; line-height: 1; }
}

/* ══ BOTTOM NAV ══ */
.bnav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--bar-bg);
  backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .4s;
  overflow:visible;
}
.bnav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gls-bdr2) 50%,transparent 100%);
}
@media(max-width:679px){.bnav{display:block;}}
.bnav-inner{display:flex;align-items:center;height:64px;position:relative;}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;padding:6px 2px;border:none;background:none;
  color:var(--mut);transition:color .22s var(--ease-out),transform .18s var(--ease-out);
  -webkit-tap-highlight-color:transparent;min-height:52px;
  position:relative;
}
.bnav-item::before{
  content:'';position:absolute;top:8px;left:50%;
  transform:translateX(-50%) scaleX(0);
  width:46px;height:34px;border-radius:17px;
  background:currentColor;opacity:0;z-index:0;
  transition:transform .28s var(--ease-out),opacity .28s;
  pointer-events:none;
}
.bnav-item.active::before{transform:translateX(-50%) scaleX(1);opacity:.15;}
.bnav-item .ni{
  font-size:1.28rem;line-height:1;display:block;
  position:relative;z-index:1;
  transition:transform .22s var(--ease-out);
}
.bnav-item span:not(.ni){
  font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;
  position:relative;z-index:1;
  transition:color .22s;
}
.bnav-item.active .ni{transform:scale(1.12);}
.bnav-item.active span:not(.ni){font-weight:600;}
#bn-home.active  {color:var(--cyan);}
#bn-music.active {color:var(--pink);}
#bn-games.active {color:var(--purple);}
#bn-map.active   {color:var(--mint);}
#bn-altro.active {color:var(--blue);}
.bnav-item:active{transform:scale(.88);}
@media(hover:hover){.bnav-item:hover{color:var(--txt);}}

/* ══ SHEET ══ */
.sheet-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out);
}
.sheet-overlay.on{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:401;
  background:var(--bar-bg);
  backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);
  border-top:1px solid var(--gls-bdr2);border-radius:22px 22px 0 0;
  padding:0 0 env(safe-area-inset-bottom,16px);
  transform:translateY(100%);transition:transform .38s var(--ease-out),background .4s;
}
.sheet.on{transform:translateY(0);}
.sheet-handle{width:40px;height:4px;background:var(--mut2);border-radius:2px;margin:14px auto 8px;}
.sheet-title{
  font-family:var(--mono);font-size:.58rem;color:var(--mut2);
  letter-spacing:.18em;text-transform:uppercase;padding:4px 20px 12px;
}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px 14px;}
.sheet-item{
  background:var(--bg1);border:1px solid var(--gls-bdr);border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:18px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .15s;
}
.sheet-item:active{transform:scale(.93);background:var(--bg2);}
.sheet-item .si-icon{font-size:1.45rem;}
.sheet-item .si-label{font-family:var(--body);font-size:.72rem;font-weight:500;color:var(--mut);text-align:center;}
@keyframes sheetIn{from{opacity:0;transform:scale(.82) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.sheet-item.si-in{animation:sheetIn .28s var(--ease-out) both;}

/* ══ PAGES ══ */
.page{display:none;}
.page.active{display:block;animation:pgIn .18s ease both;}
.page.exiting{
  display:block!important;animation:pgOut .18s ease forwards;
  pointer-events:none;position:absolute;top:0;left:0;right:0;z-index:0;
}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
@keyframes pgOut{from{opacity:1}to{opacity:0}}

/* ══ HOME HERO ══ */
.hero{padding:26px 22px 10px;text-align:center;position:relative;}
@media(min-width:480px){.hero{padding:42px 22px 14px;}}
.eyebrow{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mut);margin-bottom:10px;
}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(2.5rem,10vw,4.8rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 45%,var(--purple) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% 200%;
  margin-bottom:4px;
}
.hero-sub{
  font-family:var(--mono);font-size:.63rem;color:var(--mut);
  letter-spacing:.12em;text-transform:uppercase;margin-top:8px;
}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px;}

/* ══ HERO ENTRANCE ══ */
@keyframes heroIn{
  from{opacity:0;transform:translateY(18px);filter:blur(4px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
@keyframes heroGrad{
  0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}
}
.hero .eyebrow   {animation:heroIn .5s var(--ease-out) .06s both;}
.hero .hero-title{animation:heroIn .6s var(--ease-out) .14s both,heroGrad 6s ease .9s infinite;}
.hero .hero-sub  {animation:heroIn .5s var(--ease-out) .28s both;}
.hero .hero-chips{animation:heroIn .5s var(--ease-out) .38s both;}

.chip{
  background:var(--bg1);border:1px solid var(--gls-bdr);
  border-radius:99px;padding:4px 12px;
  font-family:var(--body);font-size:.72rem;font-weight:500;color:var(--mut);
  display:inline-flex;align-items:center;gap:4px;
}

/* ══════════════════════════════════════════════════
   HONEYCOMB / HIVE
══════════════════════════════════════════════════ */
.hive-section{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 16px 30px;
}

#hive-section{
  position:relative;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
#hive-section.is-dragging,
#hive-section.is-dragging *{ cursor:grabbing !important; }

#hive-container{
  position:relative;
  margin:0 auto;
  transform-origin:center center;
}

/* ══ STANDALONE / PWA FULLSCREEN ══ */
@media(display-mode: standalone){
  body { padding-top: env(safe-area-inset-top, 0px); }
  .bar { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)); }
  .bnav { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* SVG connections */
#hive-svg{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}
#hive-svg line{
  stroke:var(--gls-bdr);stroke-width:1;
  stroke-dasharray:400;stroke-dashoffset:400;
}
#hive-svg line.drawn{
  animation:drawLine .55s var(--ease) forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}

/* Hex wrapper — positioned absolutely by JS */
.hex-wrap{
  position:absolute;z-index:2;
  opacity:0;transform:scale(.6);filter:blur(5px);
  will-change:transform,opacity,filter;
}
.hex-wrap.revealed{
  transition:opacity .42s var(--ease-out),transform .46s var(--ease-out),filter .42s;
  opacity:1;transform:scale(1);filter:blur(0);
}
.hex-wrap.dimmed{
  transition:opacity .22s,transform .22s,filter .22s;
  opacity:.28;transform:scale(.97) !important;filter:blur(1px);
}

/* Hex outer (border layer) */
.hex-outer{
  width:100%;height:100%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--acc,var(--gls-bdr));
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:filter .28s,transform .28s;
  position:relative;
}
.hex-outer:active{transform:scale(.93);filter:drop-shadow(0 0 18px var(--acc,var(--cyan)));}

/* Hex inner (fill) */
.hex-inner{
  width:calc(100% - 3px);
  height:calc(100% - 3px);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--gls);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;gap:4px;
  transition:background .28s;
}
.hex-inner::before{
  content:'';
  position:absolute;
  inset:-100%;
  background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  transform:translateX(-100%) translateY(-100%);
  transition:transform 0s;
  pointer-events:none;
  z-index:3;
}

/* Glow radial inside */
.hex-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,var(--acc-s,transparent),transparent 68%);
  opacity:0;transition:opacity .28s;pointer-events:none;
}

.hex-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:0 10px;text-align:center;
}
.hex-icon{
  font-size:1.45rem;line-height:1;display:block;
  transition:transform .28s;
}
.hex-title{
  font-family:var(--body);font-size:.76rem;font-weight:700;
  color:var(--txt);letter-spacing:.01em;line-height:1.15;
}
.hex-sub{
  font-family:var(--mono);font-size:.46rem;color:var(--mut);
  letter-spacing:.04em;line-height:1.2;
}
.hex-badge{
  position:absolute;top:26%;right:14%;
  background:var(--acc,var(--cyan));color:#fff;
  font-family:var(--mono);font-size:.42rem;font-weight:600;
  padding:2px 6px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;z-index:3;
}

/* hover effects */
@media(hover:hover){
  .hex-wrap:not(.dimmed) .hex-outer:hover{
    filter:drop-shadow(0 0 18px var(--acc,var(--cyan))) drop-shadow(0 0 6px var(--acc,var(--cyan)));
    transform:scale(1.08);
  }
  .hex-wrap:not(.dimmed) .hex-outer:hover .hex-glow{opacity:1;}
  .hex-wrap:not(.dimmed) .hex-outer:hover .hex-icon{transform:scale(1.14);}
  .hex-wrap:not(.dimmed) .hex-outer:hover .hex-inner::before{
    transform:translateX(100%) translateY(100%);
    transition:transform .6s ease;
  }
}

/* idle pulse per hex — delay e durata scelti in JS via CSS custom props */
@keyframes hexPulse{
  0%,100%{opacity:0;}50%{opacity:.4;}
}
.hex-pulse-overlay{
  position:absolute;inset:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse at 50% 40%,var(--acc,var(--cyan)),transparent 65%);
  animation:hexPulse var(--pulse-dur,5s) var(--pulse-delay,0s) ease-in-out infinite;
  pointer-events:none;z-index:1;opacity:0;
}

/* ══ INNER PAGES ══ */
.inner{max-width:640px;margin:0 auto;padding:28px 16px 32px;}
@media(min-width:680px){.inner{padding:36px 28px 48px;}}
.ph{margin-bottom:24px;}
.ph .eyebrow{margin-bottom:4px;}
.ph h1{
  font-family:var(--serif);font-size:clamp(1.8rem,6vw,2.8rem);
  font-weight:800;line-height:1.05;color:var(--txt);
}
.ph p{margin-top:8px;font-size:.9rem;color:var(--mut);line-height:1.7;}

/* ══ INNER PAGE CONTENT STAGGER ══ */
@keyframes itemIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.inner > *{animation:itemIn .38s var(--ease-out) both;}
.inner > *:nth-child(1){animation-delay:.05s;}
.inner > *:nth-child(2){animation-delay:.11s;}
.inner > *:nth-child(3){animation-delay:.17s;}
.inner > *:nth-child(4){animation-delay:.23s;}
.inner > *:nth-child(5){animation-delay:.29s;}
.inner > *:nth-child(6){animation-delay:.34s;}
.inner > *:nth-child(7){animation-delay:.39s;}
.inner > *:nth-child(8){animation-delay:.43s;}
.inner > *:nth-child(n+9){animation-delay:.47s;}

#page-music    .ph h1{background:linear-gradient(135deg,var(--pink),#FF8A2D);        -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-board    .ph h1{background:linear-gradient(135deg,var(--blue),var(--cyan));    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-games    .ph h1{background:linear-gradient(135deg,var(--purple),var(--pink));  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-food     .ph h1{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-map      .ph h1{background:linear-gradient(135deg,var(--mint),var(--blue));    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-photos   .ph h1{background:linear-gradient(135deg,var(--yellow),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-guestbook .ph h1{background:linear-gradient(135deg,var(--cyan),var(--blue));   -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#page-contacts  .ph h1{background:linear-gradient(135deg,var(--orange),var(--pink)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ══ BLOCKS ══ */
.blk{
  background:var(--bg1);border:1px solid var(--gls-bdr);
  box-shadow:0 3px 18px var(--gls-shadow);border-radius:var(--r);
  padding:16px 18px;margin-bottom:10px;transition:background .4s;
}
.blk label{
  display:block;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-bottom:6px;
}
.blk .val{font-size:1rem;color:var(--txt);font-weight:500;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* ══ BUTTONS ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--body);font-size:.84rem;font-weight:600;
  border-radius:99px;cursor:pointer;border:none;text-decoration:none;
  transition:all .22s var(--ease);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;min-height:44px;padding:0 20px;
}
.btn-p{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;box-shadow:0 4px 18px rgba(0,204,255,.3);}
.btn-p:active{transform:scale(.93);box-shadow:none;}
@media(hover:hover){.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,204,255,.4);}}
.btn-s{background:var(--bg1);border:1px solid var(--gls-bdr);color:var(--txt2);}
.btn-s:active{background:var(--bg2);}
.btn-g{background:var(--bg1);border:1px solid var(--gls-bdr);color:var(--mut);min-height:38px;padding:0 14px;font-size:.78rem;transition:all .2s;}
.btn-g:active{background:var(--bg2);}
@media(hover:hover){.btn-g:hover{border-color:var(--gls-bdr2);color:var(--txt);}}
.brow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* ══ LINK CARDS ══ */
.lc{
  display:flex;align-items:center;gap:13px;background:var(--bg1);
  border:1px solid var(--gls-bdr);box-shadow:0 2px 14px var(--gls-shadow);
  border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--txt);
  margin-bottom:9px;min-height:62px;-webkit-tap-highlight-color:transparent;
  transition:border-color .22s,background .22s,transform .22s;
  position:relative;overflow:hidden;
}
.lc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lc-acc,var(--cyan));opacity:0;transition:opacity .22s;border-radius:3px 0 0 3px;
}
.lc:active{transform:scale(.98);background:var(--bg2);}
.lc:active::before{opacity:1;}
@media(hover:hover){
  .lc:hover{transform:translateX(4px);border-color:var(--gls-bdr2);background:var(--bg2);}
  .lc:hover::before{opacity:1;}
}
#page-music     .lc{--lc-acc:var(--pink);}
#page-board     .lc{--lc-acc:var(--blue);}
#page-games     .lc{--lc-acc:var(--purple);}
#page-food      .lc{--lc-acc:var(--orange);}
#page-map       .lc{--lc-acc:var(--mint);}
#page-photos    .lc{--lc-acc:var(--yellow);}
#page-guestbook .lc{--lc-acc:var(--cyan);}
#page-contacts  .lc{--lc-acc:var(--orange);}

.li{font-size:1.3rem;flex-shrink:0;width:38px;text-align:center;}
.lb{flex:1;min-width:0;}
.lt{font-family:var(--body);font-size:.95rem;font-weight:600;color:var(--txt);}
.ld{font-family:var(--mono);font-size:.6rem;color:var(--mut);margin-top:1px;line-height:1.3;}
.la{color:var(--mut2);flex-shrink:0;font-size:.8rem;}

/* ══ SEP ══ */
.sep{
  display:flex;align-items:center;gap:10px;margin:16px 0;
  color:var(--mut2);font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--gls-bdr);}

/* ══ MAP ══ */
.map-wrap{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--gls-bdr);
  height:240px;margin:14px 0 20px;box-shadow:0 4px 20px var(--gls-shadow);
}
.map-wrap iframe{width:100%;height:100%;border:none;display:block;filter:invert(1) hue-rotate(180deg) brightness(.82) saturate(.55);}
[data-theme="light"] .map-wrap iframe{filter:none;}

/* ══ GAMES ══ */
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:420px){.games-grid{grid-template-columns:repeat(3,1fr);}}
.gc{
  background:var(--bg1);border:1px solid var(--gls-bdr);border-radius:var(--r);
  padding:16px 13px 14px;text-decoration:none;color:var(--txt);display:block;
  min-height:96px;-webkit-tap-highlight-color:transparent;
  transition:transform .22s,border-color .22s,background .22s;
}
.gc:active{transform:scale(.94);}
@media(hover:hover){.gc:hover{transform:translateY(-4px);border-color:var(--purple);}}
.gc-icon{font-size:1.5rem;margin-bottom:9px;display:block;}
.gc-name{font-family:var(--body);font-size:.9rem;font-weight:700;margin-bottom:3px;}
.gc-sub{font-family:var(--mono);font-size:.58rem;color:var(--mut);line-height:1.35;}

/* ══ FOOD ══ */
.food-note{
  background:rgba(255,122,45,.1);border:1px solid rgba(255,122,45,.25);
  border-radius:var(--r-sm);padding:11px 15px;
  font-family:var(--body);font-size:.84rem;font-weight:500;color:var(--orange);
  line-height:1.5;margin-bottom:14px;
}

/* ══ CONTACTS ══ */
.crow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--gls-bdr);}
.crow:last-child{border-bottom:none;}
.cname{font-family:var(--body);font-size:.95rem;font-weight:600;}
.cdetail{font-family:var(--mono);font-size:.62rem;color:var(--mut);margin-top:1px;}

/* ══ GUESTBOOK ══ */
.gb-inp{background:none;border:none;outline:none;width:100%;color:var(--txt);font-family:var(--body);font-size:.95rem;resize:none;line-height:1.65;}
.gb-inp::placeholder{color:var(--mut2);}
.stars span{font-size:1.4rem;cursor:pointer;transition:transform .15s,color .15s;display:inline-block;margin-right:3px;}
.stars span.lit{color:var(--yellow);}
.gb-item{padding:12px 0;border-bottom:1px solid var(--gls-bdr);animation:pgIn .3s both;}
.gb-item:last-child{border-bottom:none;}
.gb-name{font-family:var(--body);font-size:.95rem;font-weight:700;color:var(--cyan);}
.gb-star{font-size:.75rem;margin:0 4px;opacity:.8;}
.gb-text{font-size:.86rem;color:var(--mut);margin-top:4px;line-height:1.6;}
.gb-date{font-family:var(--mono);font-size:.56rem;color:var(--mut2);margin-top:3px;}

/* ══ QR ══ */
.qr-wrap{text-align:center;margin:14px 0;}
.qr-inner{background:#fff;border-radius:var(--r-sm);padding:12px;display:inline-flex;box-shadow:0 4px 20px var(--gls-shadow);}
.qr-label{font-family:var(--mono);font-size:.6rem;color:var(--mut);letter-spacing:.08em;margin-top:8px;}

/* ══ TOAST ══ */
#toast{
  position:fixed;bottom:calc(var(--nav-h) + 10px);left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--gls);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--gls-bdr2);color:var(--txt);
  font-family:var(--mono);font-size:.68rem;padding:10px 20px;
  border-radius:99px;z-index:9999;opacity:0;
  transition:opacity .22s,transform .22s;
  pointer-events:none;white-space:nowrap;letter-spacing:.05em;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
@media(min-width:680px){#toast{bottom:20px;}}

/* ══ FOOTER ══ */
.footer{
  text-align:center;padding:20px 18px 26px;
  font-family:var(--mono);font-size:.54rem;color:var(--mut2);
  letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--gls-bdr);
}

/* ══ MISC ══ */
input,textarea{font-family:var(--body);font-size:.95rem;color:var(--txt);}
input::placeholder,textarea::placeholder{color:var(--mut2);}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:var(--gls-bdr2);border-radius:2px;}

/* ══ ICONS SIZING ══ */
.bnav-item .ni svg { width: 22px; height: 22px; stroke-width: 2.2px; display: block; margin: 0 auto; }
.hex-icon svg { width: 26px; height: 26px; stroke-width: 2px; }
.gc-icon svg { width: 24px; height: 24px; stroke-width: 2px; }
.si-icon svg { width: 26px; height: 26px; stroke-width: 2px; }
.li svg, .li img { width: 24px; height: 24px; stroke-width: 2px; display: block; margin: 0 auto; }
.eb-icon { display: inline-block; vertical-align: -3px; width: 14px; height: 14px; margin-right: 4px; stroke-width: 2px; }
.la svg { width: 18px; height: 18px; stroke-width: 2.5px; }