/* KesefSmart v2.1 GL layer (W1 hero coin skyline, W8 footer coin, W10 coin tower).
   Canvases sit in CSS-sized boxes (zero layout shift) and stay invisible until their first frame. */

.ks-gl-canvas { display: block; pointer-events: none; opacity: 0; transition: opacity .7s cubic-bezier(.215, .61, .355, 1); }

/* ---------- W1: hero coin skyline over #g-chart ---------- */
/* bleed must match BLEED in js/v2/gl/hero-skyline.js */
.h-chart__gl { position: absolute; top: 0; left: -12px; right: -22px; bottom: -14px; width: calc(100% + 34px); height: calc(100% + 14px); }
.h-chart.is-gl .h-chart__gl { opacity: 1; }
.h-chart .h-chart__line, .h-chart .h-chart__area, .h-chart .h-chart__paid { transition: opacity .6s cubic-bezier(.215, .61, .355, 1); }
.h-chart.is-gl .h-chart__line,
.h-chart.is-gl .h-chart__area,
.h-chart.is-gl .h-chart__paid,
.h-chart.is-gl .h-chart__cursor,
.h-chart.is-gl .h-chart__dot { opacity: 0 !important; }
.h-chart.is-gl .h-chart__grid line { stroke: rgba(236, 230, 216, .07); }
.h-chart.is-gl .h-chart__tip { z-index: 2; }
.h-chart.is-gl .h-chart__axis { z-index: 1; }
/* legend swatches become the two metals */
.h-chart.is-gl .h-chart__legend { z-index: 1; }
.h-chart.is-gl .h-chart__legend .k::before { width: 10px; height: 10px; border: 0; border-radius: 50%; margin-right: 7px; background: #E9B949; box-shadow: inset 0 0 0 1.5px rgba(255, 244, 214, .5); }
.h-chart.is-gl .h-chart__legend .k--paid::before { background: #7A7368; box-shadow: inset 0 0 0 1.5px rgba(236, 230, 216, .35); }

/* ---------- W8: footer coin in [data-coin-slot] ---------- */
.ks-coin { position: relative; display: block; width: 100%; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; container-type: inline-size; }
.ks-coin:focus-visible { outline: 2px solid var(--kesef, #FFD602); outline-offset: 6px; }
.ks-coin__gl { position: absolute; inset: -14%; width: 128%; height: 128%; }
.ks-coin.is-gl .ks-coin__gl { opacity: 1; }
/* flat fallback: a two-sided CSS coin that still flips (no WebGL, reduced motion, before the first frame) */
.ks-coin__flat { position: absolute; inset: 12%; display: block; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.215, .61, .355, 1), opacity .5s cubic-bezier(.215, .61, .355, 1); }
.ks-coin.is-flipped .ks-coin__flat { transform: rotateY(180deg); }
.ks-coin.is-gl .ks-coin__flat { opacity: 0; }
.ks-coin__side { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #C99A2E; color: #8A6514; box-shadow: inset 0 0 0 4px #DDB24A, inset 0 0 0 9px #B98A22, inset 0 0 0 10px rgba(255, 236, 180, .35), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ks-coin__side span { font: 500 clamp(64px, 11vw, 150px)/1 var(--font-display, Georgia, serif); font-size: 46cqw; color: #E8C15A; text-shadow: 0 -1px 0 rgba(255, 240, 200, .45), 0 2px 2px rgba(90, 60, 10, .5); }
.ks-coin__side--back { transform: rotateY(180deg); }
.ks-coin__side--back span { font-size: clamp(40px, 6.4vw, 92px); font-size: 26cqw; letter-spacing: -0.02em; }
.ks-coin__side small { margin-top: 6px; font: 400 clamp(11px, 1.2vw, 16px)/1 var(--font-display, Georgia, serif); font-size: max(11px, 5cqw); color: #E8C15A; }
@media (prefers-reduced-motion: reduce) { .ks-coin__flat { transition: none; } }

/* ---------- W10: wealth timeline coin tower beside #total-value ---------- */
.wt-total.has-tower { position: relative; min-height: 150px; padding-right: 150px; }
.wt-tower { position: absolute; right: 0; top: -36px; width: 150px; height: 200px; pointer-events: none; }
.wt-tower__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.wt-tower.is-gl .wt-tower__gl { opacity: 1; }
@media (max-width: 559px) { .wt-total.has-tower { padding-right: 0; } .wt-tower { display: none; } }