/* MATERIAL SYSTEM — reusable surface classes. One element + two pseudo-elements per surface; no <img> grunge.
   Every surface is correct with textures disabled (.sv-no-tex on any ancestor strips them). */
.sv-mat{position:relative;isolation:isolate}
.sv-mat::before,.sv-mat::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;border-radius:inherit}

/* S0 — world: transparent. Use no class. */

/* S1 — HUD panel: semi-opaque charcoal, grain only */
.sv-s1{background:rgba(17,16,14,.74);border:var(--border-soft);border-radius:var(--radius-panel);box-shadow:var(--highlight-top)}
.sv-s1::before{background:var(--texture-noise) 0 0/640px auto;mix-blend-mode:screen;opacity:var(--tex-noise-opacity)}

/* S2 — primary inventory panel: painted steel, macro mottle calmer in the centre, worn edge ring */
.sv-s2{background:rgba(24,23,20,.94);border:var(--border-panel);border-radius:var(--radius-panel);box-shadow:var(--highlight-top),inset 0 -1px 0 rgba(0,0,0,.5)}
.sv-s2::before{background:var(--texture-noise) 0 0/640px auto,var(--texture-macro) center/cover;background-blend-mode:screen;mix-blend-mode:screen;opacity:var(--tex-macro-opacity);-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,rgba(0,0,0,.35) 0,#000 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,rgba(0,0,0,.35) 0,#000 100%)}
.sv-s2::after{inset:-1px;border:var(--tex-edge-width) solid transparent;border-image:var(--texture-edge) 90 / var(--tex-edge-width) round;mix-blend-mode:screen;opacity:var(--tex-edge-opacity)}
.sv-s2.sv-dirty::after{background:var(--texture-dirt) center bottom/cover;background-clip:padding-box}

/* S3 — interactive tile: recessed well */
.sv-s3{background:rgba(0,0,0,.30);border:var(--border-grid);border-radius:var(--radius-slot);box-shadow:var(--shadow-recess)}

/* S4 — active / selected: rust-orange painted metal with chipped paint */
.sv-s4{background:var(--accent);border:1px solid var(--color-rust-700);border-radius:var(--radius-control);box-shadow:inset 0 1px 0 rgba(255,214,184,.22),inset 0 -1px 0 rgba(0,0,0,.35);color:var(--text-on-accent)}
.sv-s4::before{background:var(--texture-chips) center/800px auto;filter:invert(1);mix-blend-mode:multiply;opacity:var(--tex-chips-opacity)}
.sv-s4::after{background:var(--texture-brushed) center/cover;mix-blend-mode:screen;opacity:var(--tex-brushed-opacity)}

/* S5 — overlay: tooltip / context menu / modal. Most opaque, calmest texture. */
.sv-s5{background:rgba(15,14,12,.97);border:var(--border-strong);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay),var(--highlight-top)}
.sv-s5::before{background:var(--texture-noise) 0 0/640px auto;mix-blend-mode:screen;opacity:.05}

/* Header band — rust paint worn off toward the right, brushed scratches over the lot */
.sv-band{position:relative;isolation:isolate;background:var(--color-surface-750);box-shadow:inset 0 1px 0 rgba(243,237,225,.06),inset 0 -1px 0 rgba(0,0,0,.6)}
.sv-band::before,.sv-band::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1}
.sv-band::after{background:var(--texture-brushed) center/cover;mix-blend-mode:screen;opacity:var(--tex-brushed-opacity)}
.sv-band--rust{background:linear-gradient(90deg,var(--color-rust-600) 0,var(--color-rust-700) 34%,rgba(68,32,15,.55) 58%,rgba(32,30,26,0) 80%),var(--color-surface-750)}
.sv-band--rust::before{background:var(--texture-rust) left center/140% auto;filter:invert(1);mix-blend-mode:multiply;opacity:var(--tex-rust-opacity)}

/* Utility: local distress (one per screen, on a hero panel) */
.sv-distress{position:relative}
.sv-distress>.sv-distress-layer{position:absolute;inset:0;pointer-events:none;background:var(--texture-scratches) center/cover;mix-blend-mode:screen;opacity:var(--tex-scratches-opacity);z-index:0}

/* Kill switch — base UI must survive without textures */
.sv-no-tex .sv-mat::before,.sv-no-tex .sv-mat::after,.sv-no-tex .sv-band::before,.sv-no-tex .sv-band::after{display:none}