/* Adjustable ambient — shared by every public page and both Studios.
   Defaults reproduce the ORIGINAL glow exactly (corners, 100% / 100% / 100%).
   ambient-settings.js writes --amb-int / --amb-size / --amb-soft / --amb-a / --amb-b on <html>
   and toggles html.amb-edges. Loaded last so it wins the cascade. */

/* Default Auto colours = sampled from the current background (black-hole frame). ambient-settings.js re-samples live and overrides these. */
:root{--ambient-one:40,40,200;--ambient-two:91,91,200}

/* ---------- per-page-type base values (the original numbers) ---------- */
.site-ambient-lights{--amb-base-blur:26px;--amb-base-op:.48;--amb-inset:-12%}
.studio-ambient-lights{--amb-base-blur:24px;--amb-base-op:.55;--amb-inset:-18%}
/* Phones: smaller blur radius + tighter overscan = much cheaper to composite. */
@media(max-width:900px){.studio-ambient-lights{--amb-base-blur:18px;--amb-base-op:.42;--amb-inset:-10%}}
@media(max-width:760px){.site-ambient-lights{--amb-base-blur:18px;--amb-inset:-10%}}

.site-ambient-lights,.studio-ambient-lights{
  --amb-blur-eff:calc(var(--amb-base-blur) * var(--amb-soft,1));
  --amb-ca:var(--amb-a,var(--ambient-one,40,40,200));
  --amb-cb:var(--amb-b,var(--ambient-two,91,91,200));
}

/* ---------- intensity + softness apply to both styles ---------- */
html body.site-page.ambient-mode .site-ambient-lights,
html body.ambient-mode .studio-ambient-lights{
  inset:var(--amb-inset);
  filter:blur(var(--amb-blur-eff));
  opacity:min(1,calc(var(--amb-base-op) * var(--amb-int,1)));
  animation:none;
}

/* ---------- style: CORNERS (default = original) ---------- */
html:not(.amb-edges) body.site-page.ambient-mode .site-ambient-lights{
  background:
    radial-gradient(ellipse calc(38% * var(--amb-size,1)) calc(42% * var(--amb-size,1)) at 78% 28%,rgba(var(--amb-ca),.40),transparent 70%),
    radial-gradient(ellipse calc(32% * var(--amb-size,1)) calc(38% * var(--amb-size,1)) at 20% 75%,rgba(var(--amb-cb),.20),transparent 72%);
}
html:not(.amb-edges) body.ambient-mode .studio-ambient-lights{
  background:
    radial-gradient(ellipse calc(37% * var(--amb-size,1)) calc(43% * var(--amb-size,1)) at 77% 30%,rgba(var(--amb-ca),.55),transparent 70%),
    radial-gradient(ellipse calc(32% * var(--amb-size,1)) calc(41% * var(--amb-size,1)) at 24% 72%,rgba(var(--amb-cb),.30),transparent 72%),
    radial-gradient(ellipse calc(31% * var(--amb-size,1)) calc(36% * var(--amb-size,1)) at 58% 92%,rgba(var(--amb-ca),.26),transparent 74%);
}

/* ---------- style: EDGES ----------
   A glow band on all four sides. Thickness uses vmin so it stays proportional on phones.
   The layer overscans the viewport by the blur radius so the blur never dims the very edge. */
html.amb-edges body.site-page.ambient-mode .site-ambient-lights,
html.amb-edges body.ambient-mode .studio-ambient-lights{
  --amb-base-blur:8px;
  --amb-base-op:.8;
  --amb-th:calc(var(--amb-size,1) * 16vmin);
  --amb-bl:var(--amb-blur-eff);
  inset:calc(var(--amb-blur-eff) * -1);
  background:
    linear-gradient(to bottom,rgba(var(--amb-ca),.42) var(--amb-bl),rgba(var(--amb-ca),.14) calc(var(--amb-bl) + var(--amb-th) * .45),transparent calc(var(--amb-bl) + var(--amb-th))),
    linear-gradient(to top,rgba(var(--amb-cb),.34) var(--amb-bl),rgba(var(--amb-cb),.11) calc(var(--amb-bl) + var(--amb-th) * .45),transparent calc(var(--amb-bl) + var(--amb-th))),
    linear-gradient(to right,rgba(var(--amb-cb),.30) var(--amb-bl),rgba(var(--amb-cb),.10) calc(var(--amb-bl) + var(--amb-th) * .45),transparent calc(var(--amb-bl) + var(--amb-th))),
    linear-gradient(to left,rgba(var(--amb-ca),.38) var(--amb-bl),rgba(var(--amb-ca),.12) calc(var(--amb-bl) + var(--amb-th) * .45),transparent calc(var(--amb-bl) + var(--amb-th))),
    radial-gradient(ellipse calc(34% * var(--amb-size,1)) calc(38% * var(--amb-size,1)) at 100% 0%,rgba(var(--amb-ca),.42),transparent 70%),
    radial-gradient(ellipse calc(34% * var(--amb-size,1)) calc(38% * var(--amb-size,1)) at 0% 100%,rgba(var(--amb-cb),.30),transparent 72%);
}

/* ---------- dropdown trigger (sits right after the Ambient button) ---------- */
.amb-caret{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:8px 11px;min-width:34px;
  border:1px solid var(--site-line,var(--neon-line,rgba(255,255,255,.14)));border-radius:999px;background:transparent;color:inherit;
  font:700 12px/1 inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.studio-ambient-toggle+.amb-caret{padding:10px 13px;background:rgba(255,255,255,.04);color:#dffcff}
.amb-caret:hover,.amb-caret[aria-expanded="true"]{border-color:var(--site-accent,var(--neon,#19e6f0))}
.amb-caret[aria-expanded="true"]{background:var(--site-accent-soft,rgba(25,230,240,.14))}
.amb-caret svg{width:10px;height:10px;transition:transform .15s ease}
.amb-caret[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- dropdown panel ---------- */
.amb-panel{position:fixed;z-index:2147483000;box-sizing:border-box;width:min(330px,calc(100vw - 20px));overflow:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 14px 12px;border-radius:16px;
  background:#090d13;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.55);
  color:#eaf4f7;font:600 13px/1.35 inherit;--amb-acc:var(--site-accent,var(--neon,#19e6f0))}
.amb-panel[hidden]{display:none}
.amb-panel *{box-sizing:border-box}
.amb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:14px}
.amb-x{width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:inherit;font-size:14px;cursor:pointer}
.amb-off{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(255,210,31,.10);color:#ffe27a;font-weight:600}
.amb-off[hidden]{display:none}
.amb-off button{margin-left:6px;padding:2px 10px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.amb-row{display:block;margin:0 0 12px}
.amb-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#b7c4d1;font-size:12px;letter-spacing:.02em}
.amb-label output{color:#fff;font-variant-numeric:tabular-nums}
.amb-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.06)}
.amb-seg button{min-height:38px;border:0;border-radius:9px;background:transparent;color:#c8d4df;font:700 13px/1 inherit;cursor:pointer}
.amb-seg button[aria-pressed="true"]{background:var(--amb-acc);color:#04141a}
.amb-panel input[type=range]{display:block;width:100%;height:30px;margin:0;accent-color:var(--amb-acc);background:transparent;cursor:pointer}
.amb-colors{display:flex;flex-wrap:wrap;gap:10px}
.amb-colors button{position:relative;width:34px;height:34px;padding:0;border:2px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer;color:#fff;font:800 11px/1 inherit}
.amb-colors button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--amb-acc)}
.amb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.amb-foot span{color:#8795a4;font-size:11px;font-weight:600}
.amb-reset{min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:inherit;font:700 12px/1 inherit;cursor:pointer;white-space:nowrap}
.amb-reset:hover,.amb-x:hover{border-color:var(--amb-acc)}
@media(max-width:520px){.amb-panel{left:10px!important;right:10px;width:auto!important;padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px))}.amb-colors{justify-content:space-between}.amb-colors button{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.amb-caret svg{transition:none}}

/* ---------- phones: the nav is already full, so the public Ambient button collapses to ✨ + ▾ ---------- */
@media(max-width:760px){
  .site-ambient-toggle{font-size:0!important;padding:0!important;width:38px;height:36px;justify-content:center;gap:0}
  .site-ambient-toggle::before{content:'✨';font-size:15px;line-height:1}
  .site-ambient-toggle[aria-pressed="false"]{opacity:.6}
  .site-nav-right .amb-caret,.nav-right .amb-caret{padding:0;min-width:32px;height:36px}
}

/* ---------- Ambient ON: the green action buttons take the ambient tint (glass) instead of solid green ----------
   Trading buttons that mean "buy/sell/cash out" keep their green/red on purpose. */
body.ambient-mode .btn-rise,body.ambient-mode .cmd-tab.active{
  background:linear-gradient(180deg,rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.30),rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.12))!important;
  border-color:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.62)!important;color:#fff!important;
  box-shadow:0 0 22px rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.22),inset 0 0 18px rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.10)}
body.ambient-mode .btn-rise:hover{background:linear-gradient(180deg,rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.42),rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.2))!important;
  box-shadow:0 6px 28px rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.38)}
body.ambient-mode .game-tab.active{background:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.14);border-color:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.6)}

/* ---------- Ambient ON: the Ambient button itself takes the tint too ---------- */
body.ambient-mode .site-ambient-toggle[aria-pressed="true"]{border-color:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.7);background:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.18)}
body.ambient-mode .amb-caret:hover,body.ambient-mode .amb-caret[aria-expanded="true"]{border-color:rgba(var(--amb-tint,var(--amb-a,var(--ambient-one,40,40,200))),.7)}
/* Exchange nav on phones: keep the Ambient ▾ button beside the ✨ button instead of dropping under it */
@media(max-width:760px){.exchange-nav .site-ambient-toggle,.exchange-nav .amb-caret{flex:0 0 auto}.exchange-nav .exchange-main-links{flex-wrap:wrap;row-gap:8px}}