/* ccs-sanctuary-glass:v1 — Magical Sanctuary frosted glass (feel15 #hp-side-pick)
   Tokens: hive-pong-portrait-v15.html ~36–105. Luxury only — never arcade. */

:root, html {
  --sg-cream: #fff8ee;
  --sg-lilac: #f0d0ff;
  --sg-ink-soft: rgba(255, 248, 238, 0.86);
  --sg-border: rgba(220, 200, 255, 0.38);
  --sg-border-soft: rgba(200, 180, 255, 0.28);
  --sg-blur: 16px;
  --sg-blur-calm: 8px;
  --sg-sat: 1.25;
  --sg-glow-violet: rgba(140, 100, 220, 0.38);
  --sg-glow-pink: rgba(255, 160, 200, 0.16);
  --sg-glow-blue: rgba(120, 150, 255, 0.22);
  --sg-glow-rose: rgba(255, 120, 180, 0.42);
  --sg-glow-honey: rgba(232, 184, 74, 0.36);
  --sg-drop: rgba(0, 0, 0, 0.28);
  --sg-inset-hi: rgba(255, 255, 255, 0.28);
  --sg-inset-lilac: rgba(200, 160, 255, 0.08);
  --sg-glass-bg: linear-gradient(165deg, rgba(255,248,255,.14), rgba(170,150,255,.09) 42%, rgba(255,200,170,.07));
  --sg-glass-soft-bg: linear-gradient(168deg, rgba(255,255,255,.1), rgba(30,18,55,.35) 55%, rgba(18,12,40,.28));
  --sg-radius: 18px;
  --sg-radius-chip: 999px;
  --sg-shadow: 0 0 28px var(--sg-glow-violet), 0 0 56px var(--sg-glow-pink),
    0 10px 28px var(--sg-drop), inset 0 1px 0 var(--sg-inset-hi), inset 0 0 24px var(--sg-inset-lilac);
  --sg-shadow-soft: 0 0 18px var(--sg-glow-violet), 0 6px 18px var(--sg-drop),
    inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 16px var(--sg-inset-lilac);
  --sg-shadow-calm: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.25);
}

/* ── Utility atoms ─────────────────────────────────────────── */
.sg-glass {
  border: 1.5px solid var(--sg-border);
  background: var(--sg-glass-bg);
  backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  box-shadow: var(--sg-shadow);
  border-radius: var(--sg-radius);
  color: var(--sg-cream);
  box-sizing: border-box;
}
.sg-glass--soft {
  border-color: var(--sg-border-soft);
  background: var(--sg-glass-soft-bg);
  box-shadow: var(--sg-shadow-soft);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}
.sg-glass--chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: var(--sg-radius-chip);
  border: 1.5px solid var(--sg-border-soft);
  background: var(--sg-glass-bg);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 0 14px var(--sg-glow-violet), inset 0 1px 0 var(--sg-inset-hi);
  color: var(--sg-cream); font-size: .86rem; font-weight: 700;
}
.sg-glass--door {
  border: 1.5px solid var(--sg-border);
  background: var(--sg-glass-bg);
  backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  box-shadow: var(--sg-shadow);
  border-radius: var(--sg-radius); overflow: hidden;
  color: inherit; text-decoration: none;
}
.sg-glow { box-shadow: 0 0 22px var(--sg-glow-blue), 0 0 40px var(--sg-glow-violet), inset 0 1px 0 var(--sg-inset-hi); }
.sg-glow--honey { box-shadow: 0 0 22px var(--sg-glow-honey), 0 0 36px rgba(255,200,100,.18), inset 0 1px 0 var(--sg-inset-hi); }
.sg-glow--rose { box-shadow: 0 0 22px var(--sg-glow-rose), 0 0 40px var(--sg-glow-pink), inset 0 1px 0 var(--sg-inset-hi); }
.sg-glow--violet { box-shadow: 0 0 22px var(--sg-glow-violet), 0 0 40px rgba(180,120,255,.22), inset 0 1px 0 var(--sg-inset-hi); }
.sg-title {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
  color: var(--sg-cream); text-shadow: 0 0 14px rgba(180,140,255,.35); letter-spacing: .01em;
}
.sg-lede { color: var(--sg-ink-soft); font-weight: 600; line-height: 1.55; }

/* ── Calm / reduced-motion ─────────────────────────────────── */
html.calm-mode, body.calm, html.calm-mode body {
  --sg-blur: var(--sg-blur-calm); --sg-sat: 1;
  --sg-shadow: var(--sg-shadow-calm); --sg-shadow-soft: var(--sg-shadow-calm);
  --sg-glow-violet: transparent; --sg-glow-pink: transparent;
  --sg-glow-blue: transparent; --sg-glow-rose: transparent; --sg-glow-honey: transparent;
}
html.calm-mode .sg-glass,
html.calm-mode .sg-glass--soft,
html.calm-mode .sg-glass--chip,
html.calm-mode .sg-glass--door,
body.calm .sg-glass,
body.calm .sg-glass--soft,
body.calm .sg-glass--chip,
body.calm .sg-glass--door,
html.calm-mode .sg-glow,
html.calm-mode .sg-glow--honey,
html.calm-mode .sg-glow--rose,
html.calm-mode .sg-glow--violet,
body.calm .sg-glow,
body.calm .sg-glow--honey,
body.calm .sg-glow--rose,
body.calm .sg-glow--violet {
  backdrop-filter: blur(var(--sg-blur-calm));
  -webkit-backdrop-filter: blur(var(--sg-blur-calm));
  box-shadow: var(--sg-shadow-calm);
}
@media (prefers-reduced-motion: reduce) {
  .sg-glass, .sg-glass--soft, .sg-glass--chip, .sg-glass--door,
  .sg-glow, .sg-glow--honey, .sg-glow--rose, .sg-glow--violet {
    transition: none !important; transform: none !important;
  }
}

/* ── Light theme ───────────────────────────────────────────── */
html[data-theme="light"] {
  --sg-border: rgba(160,130,200,.32);
  --sg-border-soft: rgba(140,120,180,.24);
  --sg-glass-bg: linear-gradient(165deg, rgba(255,252,248,.72), rgba(230,220,255,.42) 45%, rgba(255,236,220,.38));
  --sg-glass-soft-bg: linear-gradient(168deg, rgba(255,255,255,.65), rgba(240,232,255,.4));
  --sg-glow-violet: rgba(140,100,220,.18); --sg-glow-pink: rgba(255,160,200,.1);
  --sg-drop: rgba(40,30,60,.12);
  --sg-cream: #2a2118; --sg-lilac: #6b4a8a; --sg-ink-soft: rgba(42,33,24,.85);
  --sg-shadow: 0 0 18px var(--sg-glow-violet), 0 8px 22px var(--sg-drop), inset 0 1px 0 rgba(255,255,255,.55);
  --sg-shadow-soft: 0 4px 14px var(--sg-drop), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ── LIVE foyer APPLY (page 62 / home chrome) — surface only ── */
#six-doors .door,
a.door,
.ccs-home-shelves .door,
#ms-lobby .door,
#ms-rooms .door {
  border-color: var(--sg-border) !important;
  background: var(--sg-glass-bg) !important;
  backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  box-shadow: var(--sg-shadow) !important;
}
.door-chip,
.recent-chip,
#ms-lobby .chip {
  border-color: var(--sg-border-soft) !important;
  background: var(--sg-glass-bg) !important;
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 0 14px var(--sg-glow-violet), inset 0 1px 0 var(--sg-inset-hi) !important;
  color: var(--sg-cream);
}
#ask-panel, .ask-panel, #ask-fab, .ask-fab, .ms-alive-panel {
  border: 1.5px solid var(--sg-border) !important;
  background: var(--sg-glass-bg) !important;
  backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(var(--sg-sat));
  box-shadow: var(--sg-shadow) !important;
  color: var(--sg-cream);
}
#home-featured-grid > *,
#home-featured-grid .card,
.app-shelf-grid > *,
.app-shelf-grid .card,
.app-shelf-grid .app,
.ccs-home-shelves .ccs-shelves-panel,
#ms-lobby .card {
  border-color: var(--sg-border-soft) !important;
  background: var(--sg-glass-soft-bg) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--sg-shadow-soft) !important;
}

/* Calm: kill outer bloom on live foyer targets */
html.calm-mode #six-doors .door,
html.calm-mode a.door,
html.calm-mode .ccs-home-shelves .door,
html.calm-mode #ms-lobby .door,
html.calm-mode #ms-rooms .door,
html.calm-mode .door-chip,
html.calm-mode .recent-chip,
html.calm-mode #ask-panel,
html.calm-mode .ask-panel,
html.calm-mode #ask-fab,
html.calm-mode .ask-fab,
html.calm-mode .ms-alive-panel,
html.calm-mode #home-featured-grid > *,
html.calm-mode .app-shelf-grid > *,
html.calm-mode .ccs-home-shelves .ccs-shelves-panel,
html.calm-mode #ms-lobby .card,
body.calm #six-doors .door,
body.calm a.door,
body.calm .ccs-home-shelves .door,
body.calm #ms-lobby .door,
body.calm #ms-rooms .door,
body.calm .door-chip,
body.calm .recent-chip,
body.calm #ask-panel,
body.calm .ask-panel,
body.calm #ask-fab,
body.calm .ask-fab,
body.calm .ms-alive-panel,
body.calm #home-featured-grid > *,
body.calm .app-shelf-grid > *,
body.calm .ccs-home-shelves .ccs-shelves-panel,
body.calm #ms-lobby .card {
  backdrop-filter: blur(var(--sg-blur-calm)) !important;
  -webkit-backdrop-filter: blur(var(--sg-blur-calm)) !important;
  box-shadow: var(--sg-shadow-calm) !important;
}
@media (prefers-reduced-motion: reduce) {
  #six-doors .door, a.door, .ccs-home-shelves .door, #ms-lobby .door,
  #ask-fab, .ask-fab, .door-chip { transition: none !important; }
}