/* ============================================================
   accent.css — accent-palette switcher (◐ button + swatch popover)
   Stays fully within the dark cosmic identity; only re-tints the
   gradient/accent variables.
   ============================================================ */
.icns{position:relative;}
.accent-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--stroke-2);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-soft);
  background:rgba(255,255,255,.03);cursor:pointer;transition:all .25s var(--ease);
  font-family:var(--display);line-height:1;padding:0;
}
.accent-btn:hover{color:#fff;border-color:var(--c2);background:rgba(34,131,198,.18);transform:translateY(-1px);}
.accent-btn.open{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 0 16px rgba(34,131,198,.6);}
.accent-btn.pulse{animation:accentPulse .45s var(--ease);}
@keyframes accentPulse{0%{transform:scale(1);}40%{transform:scale(1.18);box-shadow:0 0 18px rgba(34,131,198,.7);}100%{transform:scale(1);}}
/* ✦ ambiance button lit when Cosmic is on */
#ambianceBtn.on{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 0 14px rgba(34,131,198,.5);}

/* ---- Focus mode: calm the atmosphere (motion + glow toned down) ---- */
body.focus-mode .bg-fx .nebula{opacity:.22;}
body.focus-mode #stars{opacity:.4;}
body.focus-mode .orb .sheen,
body.focus-mode .orb .rim,
body.focus-mode .orb .blob,
body.focus-mode .orb-ring,
body.focus-mode .gfloat,
body.focus-mode .halo{animation:none !important;}
body.focus-mode .orb{box-shadow:0 0 70px rgba(34,131,198,.25), inset 0 0 80px rgba(0,0,0,.6);}
body.focus-mode .gv-glow{animation:none !important;}

/* ---- ↗ quick-connect popover ---- */
.qc-wrap{position:relative;display:flex;}
.qc-pop{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%) translateY(8px) scale(.96);
  transform-origin:bottom center;z-index:40;
  display:flex;flex-direction:row;gap:10px;padding:10px;border-radius:16px;
  background:rgba(9,14,26,.99);border:1px solid var(--stroke-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 46px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.qc-pop.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);}
.qc-pop::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;
  background:rgba(9,14,26,.99);border-right:1px solid var(--stroke-2);border-bottom:1px solid var(--stroke-2);transform:rotate(45deg);}
.qc-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--grad-soft);text-decoration:none;box-shadow:0 0 14px rgba(34,131,198,.4);
  transition:transform .2s var(--ease), box-shadow .2s;}
.qc-icon:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 22px rgba(34,131,198,.55);}
.qc-icon.wa{background:linear-gradient(135deg,#1faf54,#25d366);box-shadow:0 0 14px rgba(37,211,102,.4);}
.qc-icon.wa:hover{box-shadow:0 8px 22px rgba(37,211,102,.55);}
/* phones: left-anchor the popover so it can't clip the viewport edge */
@media (max-width:560px){
  .qc-pop{left:0;transform:translateX(0) translateY(8px) scale(.96);transform-origin:bottom left;}
  .qc-pop.show{transform:translateX(0) translateY(0) scale(1);}
  .qc-pop::after{left:11px;margin-left:0;}
}

.accent-pop{
  position:absolute;left:-6px;bottom:42px;z-index:30;
  display:flex;gap:9px;padding:10px 12px;border-radius:30px;
  background:rgba(10,16,30,.92);border:1px solid var(--stroke-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px) scale(.94);transform-origin:bottom left;pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.accent-pop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.accent-pop::after{content:"";position:absolute;left:16px;bottom:-5px;width:10px;height:10px;
  background:rgba(10,16,30,.92);border-right:1px solid var(--stroke-2);border-bottom:1px solid var(--stroke-2);
  transform:rotate(45deg);}
.sw{
  width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  padding:0;position:relative;transition:transform .2s var(--ease);
}
.sw:hover{transform:scale(1.14);}
.sw.active{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.4);}
.sw.active::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;font-family:var(--display);text-shadow:0 1px 3px rgba(0,0,0,.6);}
.sw-reset{display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;line-height:1;
  font-family:var(--display);text-shadow:0 1px 3px rgba(0,0,0,.6);}
.sw-reset.active::after{content:"";}

/* ---- site-wide floating control (paired with sound toggle) ---- */
#accent-ctl{
  position:fixed;right:20px;bottom:84px;z-index:60;
  height:44px;width:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(10,16,30,.7);border:1px solid var(--stroke);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s, background .3s;
}
#accent-ctl:hover{border-color:var(--stroke-2);background:rgba(10,16,30,.86);}
.ac-toggle{
  width:32px;height:32px;flex:none;border:none;cursor:pointer;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  background:transparent;color:var(--ink);transition:color .25s, background .25s;
}
.ac-toggle:hover{background:rgba(255,255,255,.06);color:#fff;}
.ac-toggle.open{color:#fff;background:var(--grad);box-shadow:0 0 14px rgba(34,131,198,.55);}
/* the floating popover opens upward-LEFT from the bottom-right control */
.ac-pop{left:auto;right:0;bottom:56px;transform:translateY(8px) scale(.94);transform-origin:bottom right;}
.ac-pop.show{transform:translateY(0) scale(1);}
.ac-pop::after{left:auto;right:14px;margin-left:0;}

body.preloading #accent-ctl, body.gating #accent-ctl{opacity:0;pointer-events:none;}
@media (max-width:560px){
  #accent-ctl{right:14px;bottom:74px;}
}