/* SKINS (skins.js): background swap + a full-screen overlay per skin, and the skin locker */
html[data-skin] body,html[data-skin] body.rd{background:var(--skin-bg)!important}
html[data-skin] body.rd{--void:var(--skin-bg);--glass-solid:var(--skin-bg)}
#skinFx{position:fixed;inset:0;z-index:380;pointer-events:none}
#skinFx::before,#skinFx::after{content:"";position:absolute;inset:0;pointer-events:none}
/* POCKET: everything washed into handheld green, plus a faint dot-matrix grid */
#skinFx.sk-pocket{background:#8bac0f;mix-blend-mode:color;opacity:.9}
#skinFx.sk-pocket::after{mix-blend-mode:normal;background:
  repeating-linear-gradient(0deg,rgba(15,56,15,.22) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(15,56,15,.22) 0 1px,transparent 1px 3px)}
/* SYNTHWAVE: a sunset glow at the bottom, a cyan haze at the top, soft scanlines */
#skinFx.sk-synth{background:linear-gradient(to top,rgba(255,43,214,.16),transparent 38%),linear-gradient(to bottom,rgba(0,229,255,.08),transparent 30%)}
#skinFx.sk-synth::after{background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(20,6,42,.18) 2px 3px)}
/* BLUEPRINT: a blue wash and a drafting grid */
#skinFx.sk-blueprint{background:#3a78ff;mix-blend-mode:color;opacity:.8}
#skinFx.sk-blueprint::after{mix-blend-mode:normal;background:
  linear-gradient(rgba(232,241,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(232,241,255,.07) 1px,transparent 1px) 0 0/24px 24px}
/* BLOOD MOON: a red wash */
#skinFx.sk-blood{background:#ff2020;mix-blend-mode:color;opacity:.6}
/* TOXIC: hazard tape top and bottom, a faint green cast */
#skinFx.sk-toxic{background:rgba(160,255,0,.035)}
#skinFx.sk-toxic::before,#skinFx.sk-toxic::after{height:6px;background:repeating-linear-gradient(45deg,#d4ff00 0 10px,#0b0f00 10px 20px);opacity:.85}
#skinFx.sk-toxic::before{top:0;bottom:auto}
#skinFx.sk-toxic::after{bottom:0;top:auto}
/* NOIR: every colour drained out, fine scanlines */
#skinFx.sk-noir{background:#808080;mix-blend-mode:saturation}
#skinFx.sk-noir::after{mix-blend-mode:normal;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.12) 2px 3px)}
/* GOLD CHROME: a gold wash and a slow sheen sweeping across */
#skinFx.sk-gold{background:#ffbf2f;mix-blend-mode:color;opacity:.72}
#skinFx.sk-gold::after{mix-blend-mode:normal;background:linear-gradient(105deg,transparent 40%,rgba(255,248,220,.10) 50%,transparent 60%) 0 0/300% 100%;animation:sk-sheen 7s linear infinite}
@keyframes sk-sheen{from{background-position:100% 0}to{background-position:-200% 0}}
html.lowend #skinFx::after{animation:none}
html.lowend #skinFx.sk-pocket::after,html.lowend #skinFx.sk-blueprint::after{display:none}
#skinFlash{position:fixed;inset:0;z-index:9990;background:#fff;animation:sk-flash .26s ease-out both;pointer-events:none}
@keyframes sk-flash{from{opacity:0}to{opacity:1}}

/* the locker */
#skinLocker{position:fixed;inset:0;z-index:430;display:grid;place-items:center;padding:16px;background:rgba(8,8,8,.86);opacity:0;transition:opacity .2s}
#skinLocker.show{opacity:1}
#skinLocker .sk-box{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#12110f;border:1.5px solid rgba(235,226,207,.25);box-shadow:6px 6px 0 #000;padding:16px}
#skinLocker .sk-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;color:#ebe2cf}
#skinLocker .sk-head b{font:900 26px/1 "Archivo","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em}
#skinLocker .sk-head span{font:700 10px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;color:rgba(235,226,207,.6)}
#skinLocker .sk-x{margin-left:auto;background:none;border:1px solid rgba(235,226,207,.3);color:#ebe2cf;width:34px;height:34px;cursor:pointer;font-size:14px}
#skinLocker .sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){#skinLocker .sk-grid{grid-template-columns:repeat(2,1fr)}}
#skinLocker .sk-card{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:8px;background:#1a1916;border:1.5px solid rgba(235,226,207,.18);color:#ebe2cf;cursor:pointer;transition:transform .15s,border-color .15s}
#skinLocker .sk-card:hover{transform:translateY(-2px);border-color:rgba(235,226,207,.5)}
#skinLocker .sk-card.on{border-color:#ffc31a;box-shadow:0 0 0 1.5px #ffc31a}
#skinLocker .sk-pv{position:relative;display:block;width:100%;aspect-ratio:1}
#skinLocker .sk-pv svg{width:100%;height:100%;display:block}
#skinLocker .sk-card b{font:900 14px/1.1 "Archivo","Helvetica Neue",Arial,sans-serif;letter-spacing:.02em}
#skinLocker .sk-card small{font:400 10px/1.35 "IBM Plex Mono",ui-monospace,monospace;color:rgba(235,226,207,.6);min-height:2.7em}
#skinLocker .sk-card em{font:800 10px/1 "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.14em;color:#ffc31a}
#skinLocker .sk-card.locked{cursor:not-allowed}
#skinLocker .sk-card.locked .sk-pv svg{filter:grayscale(1) brightness(.35)}
#skinLocker .sk-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-style:normal}
#skinLocker .sk-bar{display:block;width:100%;height:4px;background:rgba(235,226,207,.12)}
#skinLocker .sk-bar i{display:block;height:100%;background:#ffc31a}
#skinLocker .sk-card.nope{animation:shake .38s}
#skinLocker .sk-foot{margin-top:12px;font:400 10px/1.4 "IBM Plex Mono",monospace;color:rgba(235,226,207,.5)}