/* light.css: the kit's LIGHT layer (6 Nov 2026). Two parts.
   1. The light canvas: one overlay per composition, made by kit/light.js (never in markup). Additive (screen) by night, a soft
      multiply-free normal blend on the cream close (data-era="light"). It never takes a pointer and never covers type: the engine
      erases its own light where a label stands, and this layer sits under .lv-box labels only by stacking order (z-index 1 here,
      labels are z-index 2+ in lvchart.css).
   2. MATERIALS for DOM surfaces (CSS only, no canvas): metal rims, frosted glass, marble. The block between the MATERIALS markers
      is owned by the materials library (assets/levels/kit/materials.js has the canvas twins). */
.kit-light{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:1}
[data-era="light"] .kit-light{mix-blend-mode:normal;opacity:.9}
@media (prefers-reduced-motion:reduce){.kit-light{transition:none}}

/* ==== MATERIALS (begin) ==== */
/* MATERIALS for DOM surfaces: the CSS twins of kit/materials.js. The rig may set --mat-light-x/-y (percent of the box) and -a (angle)   on any ancestor; defaults sit on :root. A slow drift runs only without reduced motion. No red; no inline style needed. */:root{--mat-light-x:30%;--mat-light-y:16%;--mat-light-a:105deg;--mat-drift:0%;--mat-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--mat-veing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .016' numOctaves='4' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .54 0 0 0 0 .26 0 0 0 30 -14.5'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .9 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E")}
@property --mat-drift{syntax:"<percentage>";inherits:true;initial-value:0%}
.mat-gold,.mat-gold-plate,.mat-brushed,.mat-glass,.mat-lacquer-green,.mat-lacquer-navy,[class*=mat-marble-],.mat-pearl{--mat-sx:calc(var(--mat-light-x) + var(--mat-drift));position:relative;box-sizing:border-box;border-radius:var(--mat-r,14px)}
.mat-gold{--mf:var(--mat-fill,rgba(9,14,26,.88));border:var(--mat-bw,1.5px) solid transparent;color:#f3d9a0;background:linear-gradient(var(--mf),var(--mf)) padding-box,radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),rgba(255,250,235,.9),transparent 22%) border-box,linear-gradient(var(--mat-light-a),transparent calc(var(--mat-sx) - 9%),rgba(255,250,235,.95) var(--mat-sx),transparent calc(var(--mat-sx) + 9%)) border-box,var(--mat-gold-rim,linear-gradient(160deg,#fff3d6,#f3d9a0 22%,#d9b46a 44%,#8f6d31 66%,#f0d594 84%,#b08a45)) border-box;box-shadow:0 14px 34px -18px rgba(0,0,0,.7)}
[data-era="light"] .mat-gold{--mf:var(--mat-fill,rgba(250,244,230,.94));color:#6e5326}
.mat-gold-plate{color:var(--mat-gold-ink,#2a1d08);background:radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),rgba(255,250,235,.6),transparent 26%),linear-gradient(var(--mat-light-a),transparent calc(var(--mat-sx) - 6%),rgba(255,250,235,.9) var(--mat-sx),transparent calc(var(--mat-sx) + 6%)),linear-gradient(172deg,#8f6d31,#d9b46a 14%,#f3d9a0 30%,#b08a45 44%,#241a0a 50%,#6e5326 56%,#b08a45 78%,#d9b46a 92%,#6e5326);box-shadow:inset 0 1px 0 rgba(255,250,235,.8),inset 0 -1px 0 rgba(110,83,38,.5),0 10px 26px -12px rgba(0,0,0,.6)}
.mat-brushed{color:#17120a;background:linear-gradient(calc(var(--mat-light-a) - 15deg),transparent calc(var(--mat-sx) - 24%),rgba(255,250,235,.5) var(--mat-sx),transparent calc(var(--mat-sx) + 24%)),repeating-linear-gradient(0deg,rgba(255,250,235,.07) 0 1px,rgba(20,15,5,.08) 1px 2px,transparent 2px 3px,rgba(20,15,5,.05) 3px 5px),linear-gradient(95deg,#9a8c6c,#dccfae 55%,#8d7e60);box-shadow:inset 0 1px 0 rgba(255,250,235,.55),inset 0 -1px 0 rgba(0,0,0,.3),0 10px 26px -12px rgba(0,0,0,.6)}
.mat-glass{background:linear-gradient(115deg,transparent 16%,rgba(255,250,235,.09) 30%,rgba(255,250,235,.02) 44%,transparent 45%),linear-gradient(180deg,rgba(216,240,255,.1),rgba(216,240,255,.03));box-shadow:inset 0 1px 0 var(--mat-glass-edge,rgba(255,248,225,.5)),inset 0 -14px 26px -18px rgba(255,243,214,.12),0 16px 40px -20px rgba(0,0,0,.65)}
.mat-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),rgba(255,250,235,.95),rgba(255,250,235,.16) 38%,rgba(255,250,235,.08));-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 exclude,linear-gradient(#000 0 0)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mat-glass{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.mat-glass--frosted{-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mat-glass{background-color:rgba(9,14,26,.84)}
[data-era="light"] .mat-glass{background-color:rgba(250,244,230,.9)}}
.mat-glass--frosted{background:var(--mat-grain) 0 0/140px,linear-gradient(115deg,transparent 16%,rgba(255,250,235,.1) 30%,transparent 44%),linear-gradient(180deg,rgba(230,240,248,.2),rgba(230,240,248,.1))}
[data-era="light"] .mat-glass{background-color:rgba(255,252,242,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(176,138,69,.28),0 14px 34px -18px rgba(22,16,30,.35)}
.mat-lacquer-green,.mat-lacquer-navy{--mt-hi:208,240,224;--mt-a:#17402f;--mt-b:#0a1f19;background:linear-gradient(var(--mat-light-a),transparent calc(var(--mat-sx) - 18%),rgba(var(--mt-hi),.12) var(--mat-sx),transparent calc(var(--mat-sx) + 18%)),linear-gradient(var(--mat-light-a),transparent calc(var(--mat-sx) + 5%),rgba(var(--mt-hi),.26) calc(var(--mat-sx) + 8%),transparent calc(var(--mat-sx) + 10%)),linear-gradient(180deg,rgba(var(--mt-hi),.1),transparent 55%),linear-gradient(180deg,var(--mt-a),var(--mt-b));box-shadow:inset 0 1px 0 rgba(255,250,235,.38),inset 0 -1px 0 rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.7)}
.mat-lacquer-navy{--mt-hi:196,222,255;--mt-a:#1b2850;--mt-b:#080c1c}
[class*=mat-marble-]{--mt-w:radial-gradient(circle at 15% 80%,rgba(150,178,142,.3),transparent 55%),radial-gradient(circle at 85% 20%,rgba(92,150,120,.18),transparent 50%);--mt-b:#f5efe3;overflow:hidden;isolation:isolate;background:radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),rgba(255,252,244,.3),transparent 46%),var(--mat-veing) 0 0/360px 240px,var(--mt-w),var(--mt-b);box-shadow:inset 0 1px 0 rgba(255,252,244,.7),inset 0 0 0 1px rgba(176,138,69,.28),0 12px 28px -14px rgba(0,0,0,.55)}
[class*=mat-marble-]>*{position:relative;z-index:1}
[class*=mat-marble-]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--mat-veing) 0 0/360px 240px;filter:brightness(2.2) saturate(.8);-webkit-mask-image:radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),#000,transparent 34%);mask-image:radial-gradient(circle at var(--mat-light-x) var(--mat-light-y),#000,transparent 34%)}
.mat-marble-pearl{--mt-b:#ece4d4}
.mat-marble-sage{--mt-b:#b9c7ae;--mt-w:radial-gradient(circle at 20% 20%,rgba(232,238,220,.45),transparent 50%),radial-gradient(circle at 80% 85%,rgba(63,143,110,.35),transparent 55%)}
.mat-marble-emerald{--mt-b:#14382c;--mt-w:radial-gradient(circle at 30% 30%,rgba(47,107,82,.55),transparent 60%),radial-gradient(circle at 80% 85%,rgba(10,31,25,.6),transparent 55%);box-shadow:inset 0 1px 0 rgba(243,217,160,.5),inset 0 0 0 1px rgba(176,138,69,.4),0 12px 28px -14px rgba(0,0,0,.65)}
.mat-marble-onyx{--mt-b:#121214;--mt-w:radial-gradient(circle at 30% 70%,rgba(44,46,50,.7),transparent 55%),radial-gradient(circle at 80% 20%,rgba(30,42,40,.5),transparent 50%);box-shadow:inset 0 1px 0 rgba(243,217,160,.45),inset 0 0 0 1px rgba(176,138,69,.4),0 12px 28px -14px rgba(0,0,0,.65)}
.mat-pearl{background:var(--mat-grain) 0 0/140px,linear-gradient(var(--mat-light-a),transparent calc(var(--mat-sx) - 20%),rgba(255,252,244,.5) var(--mat-sx),transparent calc(var(--mat-sx) + 20%)),linear-gradient(115deg,rgba(255,252,244,.5),rgba(216,240,255,.5) calc(var(--mat-sx) * .6),rgba(255,243,214,.5) calc(var(--mat-sx) * .6 + 35%),rgba(255,252,244,.5)),linear-gradient(150deg,#f4ecda,#ddd3bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(120,100,60,.25),0 8px 20px -10px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:no-preference){.mat-gold,.mat-gold-plate,.mat-glass,.mat-lacquer-green,.mat-lacquer-navy,.mat-pearl{animation:mat-drift 9s ease-in-out infinite}
.mat-brushed,[class*=mat-marble-]{animation:mat-drift 11s ease-in-out infinite}}
@keyframes mat-drift{0%,100%{--mat-drift:-6%}50%{--mat-drift:9%}}
/* ==== MATERIALS (end) ==== */