/* ChequeMate Glass: translucent surfaces over an animated aurora. Only active with :root[data-style="glass"]. */

.fx-bg { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; z-index: -1; pointer-events: none; display: block; }
.fx-bg[hidden] { display: none; }

:root[data-style="glass"] {
  --surface: rgba(255, 255, 255, .58);
  --surface-2: rgba(255, 255, 255, .42);
  --elev: rgba(255, 255, 255, .86);
  --side: rgba(255, 255, 255, .38);
  --bar: rgba(255, 255, 255, .42);
  --bubble: rgba(233, 233, 235, .72);
  --fill: rgba(118, 118, 128, .13);
  --glass-hi: rgba(255, 255, 255, .75);
  --glass-lo: rgba(255, 255, 255, .18);
  --glass-edge: rgba(255, 255, 255, .55);
  --glass-shadow: 0 10px 40px -14px rgba(30, 40, 90, .22), 0 1px 2px rgba(0, 0, 0, .04);
  --glass-blur: 26px;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="glass"]:not([data-theme="light"]) {
    --surface: rgba(28, 28, 34, .5); --surface-2: rgba(60, 60, 70, .32); --elev: rgba(36, 36, 42, .9);
    --side: rgba(18, 18, 24, .45); --bar: rgba(16, 16, 22, .5); --bubble: rgba(52, 52, 60, .7); --fill: rgba(140, 140, 160, .18);
    --glass-hi: rgba(255, 255, 255, .16); --glass-lo: rgba(255, 255, 255, .03); --glass-edge: rgba(255, 255, 255, .14);
    --glass-shadow: 0 14px 44px -16px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .4);
  }
}
:root[data-style="glass"][data-theme="dark"] {
  --surface: rgba(28, 28, 34, .5); --surface-2: rgba(60, 60, 70, .32); --elev: rgba(36, 36, 42, .9);
  --side: rgba(18, 18, 24, .45); --bar: rgba(16, 16, 22, .5); --bubble: rgba(52, 52, 60, .7); --fill: rgba(140, 140, 160, .18);
  --glass-hi: rgba(255, 255, 255, .16); --glass-lo: rgba(255, 255, 255, .03); --glass-edge: rgba(255, 255, 255, .14);
  --glass-shadow: 0 14px 44px -16px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .4);
}

:root[data-style="glass"] body { background: transparent; }
:root[data-style="glass"] .main::before { display: none; }

/* frosted cards */
:root[data-style="glass"] :is(.panel, .hero, .finding, .ledger > div, .micr, .twist, .acct-card, .list, .chat, .coach-hero, .arena-hero, .quiz, .rr-stats > div, .boss-bar, .side-player, .score-panel, .coin-panel, .rr-board, .drop) {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge);
}
:root[data-style="glass"] :is(.panel, .hero, .finding, .twist, .acct-card, .micr, .coach-hero, .arena-hero, .quiz) { position: relative; }
:root[data-style="glass"] :is(.panel, .finding, .twist, .acct-card, .micr) {
  background-image: linear-gradient(140deg, var(--glass-hi) -30%, transparent 32%, transparent 70%, var(--glass-lo));
}
/* inner fills stay lighter than the card */
:root[data-style="glass"] :is(.formula, .steps, .insights, .prompts, .missions, .ladder, .lb, .zb, .list-acc, .rr-log, .callout, .ledger.plain > div, .xp-rules div, .rank-stats div, .ro-stats div, .quiz-score div, .badge) { background-color: var(--surface-2); }

/* cursor spotlight: a glowing rim that follows the pointer */
:root[data-style="glass"] :is(.panel, .finding, .ledger > div, .rr-card, .acct-card, .rr-stats > div, .boss-bar, .micr)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.2px; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--purple) 60%, transparent) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
:root[data-style="glass"] :is(.panel, .finding, .ledger > div, .rr-card, .acct-card, .rr-stats > div, .boss-bar, .micr):hover::after { opacity: 1; }
:root[data-style="glass"] :is(.ledger > div, .rr-card, .rr-stats > div, .boss-bar) { position: relative; }
:root[data-style="glass"] .panel:hover { box-shadow: var(--glass-shadow), 0 0 0 .5px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 var(--glass-hi); }

/* chrome: deeper blur, specular top edge */
:root[data-style="glass"] .toolbar { box-shadow: inset 0 -.5px 0 var(--glass-edge), inset 0 1px 0 var(--glass-hi); border-bottom-color: transparent; }
:root[data-style="glass"] .sidebar { border-right-color: var(--glass-edge); box-shadow: inset -1px 0 0 var(--glass-lo); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); }
:root[data-style="glass"] .nav a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge), 0 4px 14px -8px rgba(0, 0, 0, .25); }
:root[data-style="glass"] .seg { background: var(--fill); box-shadow: inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .seg button[aria-pressed="true"] { background: var(--elev); }
:root[data-style="glass"] .btn:not(.primary):not(.ghost) { background: var(--fill); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 6px 16px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .4); }
:root[data-style="glass"] .search-field input, :root[data-style="glass"] .input { background: var(--fill); box-shadow: inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .mate-bubble, :root[data-style="glass"] .acct-err { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .mate-dock { background: radial-gradient(circle at 50% 25%, var(--glass-hi), var(--surface)); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .achv-in { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 16px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 .5px rgba(255, 255, 255, .14); }
:root[data-style="glass"] .tabbar { box-shadow: inset 0 .5px 0 var(--glass-edge); }
:root[data-style="glass"] .msg.bot { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px var(--glass-edge); }
:root[data-style="glass"] .chips button { -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
:root[data-style="glass"] .sheet { background: var(--elev); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
:root[data-style="glass"] .hero { background: var(--surface); }
:root[data-style="glass"] .hero::before { opacity: .5; }
:root[data-style="glass"] .wcard { box-shadow: 0 30px 50px -26px var(--glow, rgba(0, 0, 0, .4)), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .22); }

/* liquid glass refraction (Chromium): the --lg filter is generated per element by fx.js */
:root.lg-ok[data-style="glass"] .cm-lg { -webkit-backdrop-filter: blur(3px) var(--lg) saturate(180%) brightness(1.04); backdrop-filter: blur(3px) var(--lg) saturate(180%) brightness(1.04); }
:root.lg-ok[data-style="glass"] .toolbar.cm-lg { -webkit-backdrop-filter: blur(6px) var(--lg) saturate(180%); backdrop-filter: blur(6px) var(--lg) saturate(180%); }
:root.lg-ok[data-style="glass"] .tb-xp.cm-lg, :root.lg-ok[data-style="glass"] .chips button.cm-lg { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge), 0 4px 14px -6px rgba(0, 0, 0, .2); }

/* style switch in the sidebar */
.style-switch button { min-width: 64px; }
@media (prefers-reduced-transparency: reduce) {
  :root[data-style="glass"] { --surface: rgba(255, 255, 255, .92); --surface-2: rgba(242, 242, 247, .95); }
}

/* ---------- money-flow Sankey ---------- */
.sankey { position: relative; min-height: 200px; }
.sankey svg { display: block; width: 100%; height: auto; overflow: visible; }
.sk-link { opacity: .4; transition: opacity .25s; cursor: pointer; }
.sk-link.save { opacity: .55; }
.sankey.focus .sk-link:not(.on) { opacity: .1; }
.sk-link.on { opacity: .9; }
.sk-links.anim .sk-link { animation: skIn 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
@keyframes skIn { from { opacity: 0; } }
.sk-node { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)); }
.sk-node.mid { fill: var(--ink); }
.sk-lab { font-size: 13px; fill: var(--ink); font-family: var(--font); }
.sk-k { font-weight: 600; }
.sk-v { fill: var(--ink-2); font-family: var(--font-r); font-size: 12.5px; font-weight: 600; }
.sk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.sk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.sk-legend b { color: var(--ink); font-family: var(--font-r); }
.sk-tip, .terr-tip { position: absolute; z-index: 3; pointer-events: none; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--elev); color: var(--ink); box-shadow: var(--shadow-m), inset 0 0 0 .5px var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.terr-tip { display: grid; gap: 1px; } .terr-tip b { font-family: var(--font-r); font-size: 16px; } .terr-tip span { font-weight: 500; color: var(--ink-2); font-size: 12px; }
.sk-tip[hidden], .terr-tip[hidden] { display: none; }

/* ---------- 3D terrain ---------- */
.terrain { position: relative; height: 400px; border-radius: 16px; background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.terrain[hidden] { display: none; }
#heatGrid[hidden] { display: none; }

/* ---------- Mate's wardrobe ---------- */
.skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skin { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border: 0; border-radius: 18px; cursor: pointer; text-align: center; color: var(--ink);
  background: var(--surface-2); transition: transform .2s, box-shadow .2s; }
.skin:hover:not(:disabled) { transform: translateY(-2px); }
.skin img, .skin .pc { width: 88px; height: 88px; }
.skin strong { font-size: 14px; }
.skin span { font-size: 12px; color: var(--ink-2); }
.skin.on { box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-m); }
.skin:disabled { cursor: default; }
.skin:disabled img, .skin:disabled .pc { filter: grayscale(1) opacity(.4); }
.skin .lock { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .skins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .terrain { height: 300px; } }