/* Hideout skins: set dressing drawn by site/src/ui/hideoutDress.js (spec 26). Looks only.
   Skin colours: --cyan / --cyan-hi / --cyan-dim / --line-faint / --bg-deep from the palette,
   --sk-a / --sk-b from palette.accent / accent2. Motion stops under reduced motion and in Shop thumbnails. */

/* stations stay readable on any wall: a dark plate under each usable station, lit on hover / focus / touch */
.bunker[data-skin]:not([data-skin="standard"]) .station:not(.is-soon) .station__hit {
  fill: color-mix(in srgb, var(--bg-deep) 80%, transparent); stroke: color-mix(in srgb, var(--cyan) 40%, transparent); stroke-dasharray: none; rx: 10px;
}
.bunker[data-skin]:not([data-skin="standard"]) .station:not(.is-soon):is(:hover, :focus-visible, .is-lit) .station__hit {
  fill: color-mix(in srgb, var(--cyan) 18%, var(--bg-deep)); stroke: var(--cyan-hi); stroke-width: 2.5;
}
.bunker[data-skin]:not([data-skin="standard"]) .station:not(.is-soon) .station__label rect { fill: color-mix(in srgb, var(--bg-deep) 70%, var(--panel)); }

/* ---- line work */
.dz-pivot { fill: none; stroke: none; }
.dz-wall { fill: none; stroke: var(--line-faint); stroke-width: 1.2; }
.dz-wall2 { fill: none; stroke: var(--cyan-dim); stroke-opacity: 0.35; stroke-width: 1.2; }
.dz-dot { fill: var(--cyan-dim); opacity: 0.45; }
.dz-vein { fill: none; stroke: var(--cyan-dim); stroke-opacity: 0.4; stroke-width: 1; }
.dz-letter { fill: var(--cyan-dim); opacity: 0.4; }
.dz-tile { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 14%, transparent); stroke: var(--line-faint); stroke-width: 1; }
.dz-prop { fill: none; stroke: var(--cyan-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-acc { fill: none; stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 1.8; stroke-linecap: round; }
.dz-chain { fill: none; stroke: var(--cyan-dim); stroke-width: 1.2; }
.dz-hot { fill: var(--cyan-hi); }
.dz-star { fill: var(--cyan-hi); }
.dz-print { fill: var(--cyan-dim); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.dz-paper { fill: color-mix(in srgb, var(--cyan-hi) 7%, transparent); stroke: var(--cyan-dim); stroke-width: 1.4; }
.dz-band { fill: var(--sk-a, var(--cyan-dim)); opacity: 0.3; }
.dz-sack { fill: color-mix(in srgb, var(--cyan-dim) 22%, transparent); stroke: var(--cyan-dim); stroke-width: 1.6; }

/* ---- light */
.dz-halo { fill: var(--sk-a, var(--cyan-hi)); opacity: 0.14; filter: blur(8px); }
.dz-halo2 { fill: var(--sk-b, #ff4d4d); opacity: 0.3; filter: blur(6px); }
.dz-halo3 { fill: var(--sk-a, var(--cyan-hi)); opacity: 0.18; filter: blur(6px); }
.dz-beam { fill: var(--cyan-hi); opacity: 0.05; }
.dz-beam2 { fill: var(--cyan-hi); opacity: 0.06; }
.dz-tube { fill: var(--cyan-hi); opacity: 0.9; filter: drop-shadow(0 0 6px var(--cyan)); }
.dz-globe { fill: var(--sk-a, var(--cyan-hi)); filter: drop-shadow(0 0 6px var(--sk-a, var(--cyan))); }
.dz-globe2 { fill: var(--sk-a, var(--cyan-hi)); }
.dz-shade { fill: var(--cyan-dim); stroke: var(--cyan); stroke-width: 1.4; }
.dz-flame2 { fill: #ffcf7a; }
.dz-crystal { fill: var(--cyan-hi); }
.dz-lamp { fill: var(--sk-a, var(--cyan-hi)); }
.dz-beacon { fill: var(--sk-b, #ff4d4d); }

/* ---- props */
.dz-face { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 8%, var(--bg-deep)); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 2; }
.dz-hand { stroke: var(--cyan-hi); stroke-width: 2; stroke-linecap: round; }
.dz-hand2 { stroke: var(--sk-a, var(--cyan)); stroke-width: 3; stroke-linecap: round; }
.dz-cable { fill: none; stroke: var(--sk-a, var(--cyan-dim)); stroke-opacity: 0.45; stroke-width: 2; }
.dz-cable--b { stroke: var(--cyan-dim); stroke-opacity: 0.6; }
.dz-tube2 { fill: none; stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 3; }
.dz-joint { fill: var(--bg-deep); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 1.6; }
.dz-capsule { fill: var(--cyan-hi); rx: 5px; }
.dz-steam { fill: var(--cyan-hi); opacity: 0.15; }
.dz-window { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 9%, var(--bg-deep)); stroke: var(--cyan-dim); stroke-width: 1.4; }
.dz-pillar { fill: color-mix(in srgb, var(--cyan) 6%, transparent); stroke: var(--cyan-dim); stroke-width: 1.4; }
.dz-seal { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 38%, var(--bg-deep)); stroke: var(--sk-a, var(--cyan)); stroke-width: 2; }
.dz-sealring { fill: none; stroke: var(--cyan-hi); stroke-width: 1.4; stroke-dasharray: 3 3; }
.dz-sealtext { fill: var(--cyan-hi); font-size: 24px; font-weight: 800; }
.dz-coffer { stroke: var(--cyan-dim); stroke-opacity: 0.6; stroke-width: 1.4; }
.dz-banner { fill: var(--sk-b, var(--sk-a, var(--cyan-dim))); fill-opacity: 0.7; stroke: var(--sk-b, var(--sk-a, var(--cyan-dim))); stroke-width: 1.4; }
.dz-stamp { fill: none; stroke: var(--cyan-hi); stroke-width: 1.4; stroke-dasharray: 2 2; }
.dz-bannertext { fill: var(--cyan-hi); font-size: 14px; font-weight: 800; }
.dz-mote { fill: var(--cyan-hi); opacity: 0.6; }
.dz-water { fill: var(--sk-a, var(--cyan)); opacity: 0.14; }
.dz-water--pool { opacity: 0.3; }
.dz-thin { stroke-width: 1.2; stroke-opacity: 0.7; }
.dz-surface { fill: none; stroke: var(--cyan-hi); stroke-opacity: 0.55; stroke-width: 1.6; }
.dz-drip { fill: var(--cyan-hi); opacity: 0.7; }
.dz-ripple { fill: none; stroke: var(--cyan-hi); stroke-width: 1.2; opacity: 0.4; }
.dz-parcel { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 28%, var(--bg-deep)); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 1.4; }
.dz-gear { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 12%, transparent); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 1.6; }
.dz-bob2 { fill: var(--sk-a, var(--cyan)); }
.dz-vine { fill: none; stroke: var(--cyan-dim); stroke-width: 2; }
.dz-leaf { fill: color-mix(in srgb, var(--cyan) 28%, transparent); stroke: var(--cyan-dim); stroke-width: 1.2; }
.dz-leaf2 { fill: none; stroke: var(--cyan-dim); stroke-width: 3; stroke-linecap: round; }
.dz-glare { fill: none; stroke: var(--cyan-hi); stroke-opacity: 0.07; stroke-width: 12; }
.dz-awn-a { fill: var(--sk-a, var(--cyan)); opacity: 0.35; }
.dz-awn-b { fill: var(--sk-b, var(--cyan-dim)); opacity: 0.22; }
.dz-lantern { opacity: 0.85; }
.dz-lantern--a { fill: var(--sk-a, #ff7ad9); filter: drop-shadow(0 0 6px var(--sk-a, #ff7ad9)); }
.dz-lantern--b { fill: var(--sk-b, #ffd166); filter: drop-shadow(0 0 6px var(--sk-b, #ffd166)); }
.dz-lantern--c { fill: #ff6a55; filter: drop-shadow(0 0 6px #ff6a55); }
.dz-neonbox { fill: none; stroke: var(--sk-a, var(--cyan-hi)); stroke-width: 3; rx: 8px; filter: drop-shadow(0 0 5px var(--sk-a, var(--cyan))); }
.dz-neonbox--b { stroke: var(--sk-b, var(--cyan-hi)); filter: drop-shadow(0 0 5px var(--sk-b, var(--cyan))); }
.dz-neonword { fill: var(--sk-a, var(--cyan-hi)); font-size: 26px; font-weight: 800; letter-spacing: 0.08em; filter: drop-shadow(0 0 6px var(--sk-a, var(--cyan))); }
.dz-neonword--b { fill: var(--sk-b, var(--cyan-hi)); filter: drop-shadow(0 0 6px var(--sk-b, var(--cyan))); }
.dz-neonline { fill: none; stroke: var(--cyan-hi); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--cyan)); }
.dz-rain { stroke: var(--cyan-hi); stroke-opacity: 0.28; stroke-width: 1.2; }
.dz-snowline { fill: none; stroke: #f4fbff; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.dz-flake { fill: #f4fbff; opacity: 0.8; }
.dz-strap { fill: none; stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 3; }
.dz-arc { fill: none; stroke: var(--cyan-hi); stroke-width: 2; opacity: 0.3; }
.dz-vault { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 6%, transparent); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 4; }
.dz-gold { fill: color-mix(in srgb, var(--sk-a, #ffd166) 45%, transparent); stroke: var(--sk-a, #ffd166); stroke-width: 1.4; }
.dz-velvet { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 32%, var(--bg-deep)); stroke: var(--sk-a, var(--cyan-dim)); stroke-width: 1.4; }
.dz-screen { fill: color-mix(in srgb, var(--cyan-hi) 6%, var(--bg-deep)); stroke: var(--cyan-dim); stroke-width: 2; }
.dz-screenlight { fill: var(--cyan-hi); opacity: 0.12; }
.dz-mote2 { fill: var(--cyan-hi); opacity: 0.5; }
.dz-seat { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 24%, var(--bg-deep)); stroke: var(--sk-a, var(--cyan-dim)); stroke-opacity: 0.6; stroke-width: 1.2; }
.dz-cloud { fill: var(--cyan-hi); opacity: 0.14; filter: blur(14px); }
.dz-slit { fill: color-mix(in srgb, var(--sk-b, var(--cyan)) 22%, var(--bg-deep)); stroke: var(--cyan-dim); stroke-width: 1.4; }
.dz-constel { fill: none; stroke: var(--cyan-hi); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 3; }
.dz-neb { opacity: 0.22; filter: blur(16px); }
.dz-neb--a { fill: var(--sk-a, var(--cyan)); } .dz-neb--b { fill: var(--sk-b, var(--cyan-hi)); }
.dz-streak { stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.dz-shoot { opacity: 0; }
.dz-flag { stroke: none; opacity: 0.8; }
.dz-flag--a { fill: #ff6a6a; } .dz-flag--b { fill: #ffd166; } .dz-flag--c { fill: #7fe7a0; } .dz-flag--d { fill: #8ec5ff; }
.dz-paperstar { fill: color-mix(in srgb, var(--sk-a, var(--cyan)) 30%, transparent); stroke: var(--sk-a, var(--cyan)); stroke-width: 1.4; }
.dz-rug { fill: color-mix(in srgb, var(--sk-b, var(--sk-a, var(--cyan))) 16%, transparent); }
.dz-rugline { fill: none; stroke: var(--sk-a, var(--cyan-dim)); stroke-opacity: 0.6; stroke-width: 1.6; }

/* ---- motion */
:is(.dz-sway, .dz-swaybase, .dz-swing, .dz-spin-24, .dz-spin-60, .dz-spin-120, .dz-spin-240, .dz-wobble, .dz-sweep, .dz-waveout, .dz-ripple, .dz-steam) { transform-box: fill-box; }
.dz-sway { transform-origin: 50% 0; animation: dz-sway 5s ease-in-out infinite alternate; }
.dz-swaybase { transform-origin: 50% 100%; animation: dz-sway 4s ease-in-out infinite alternate; }
.dz-swing { transform-origin: 50% 0; animation: dz-swing 2s ease-in-out infinite alternate; }
.dz-spin-24 { transform-origin: 50% 50%; animation: dz-spin 24s linear infinite; }
.dz-spin-60 { transform-origin: 50% 50%; animation: dz-spin 60s linear infinite; }
.dz-spin-120 { transform-origin: 50% 50%; animation: dz-spin 120s linear infinite; }
.dz-spin-240 { transform-origin: 50% 50%; animation: dz-spin 240s linear infinite; }
.dz-rev { animation-direction: reverse; }
.dz-wobble { transform-origin: 50% 50%; animation: dz-wobble 2.4s ease-in-out infinite alternate; }
.dz-sweep { transform-origin: 50% 50%; animation: dz-sweep 9s ease-in-out infinite alternate; }
.dz-sweep--r { animation-direction: alternate-reverse; }
.dz-pulse { animation: dz-pulse 4s ease-in-out infinite alternate; }
.dz-breathe { animation: dz-breathe 7s ease-in-out infinite alternate; }
.dz-twinkle { animation: dz-twinkle 3s ease-in-out infinite; }
.dz-flicker { animation: dz-flick 3.2s steps(1, end) infinite; }
.dz-flicker2 { animation: dz-flick2 0.24s linear infinite alternate; }
.dz-hum { animation: dz-hum 5s steps(1, end) infinite; }
.dz-lamp, .dz-globe2, .dz-halo3 { animation: dz-chase 1.8s steps(1, end) infinite; }
.dz-beacon { animation: dz-beacon 1.6s steps(1, end) infinite; }
.dz-run { animation: dz-run 7s linear infinite; }
.dz-belt { animation: dz-belt 16s linear infinite; }
.dz-steam { transform-origin: 50% 50%; animation: dz-steam 4s ease-out infinite; }
.dz-mote { animation: dz-rise 10s linear infinite; }
.dz-mote2 { animation: dz-drift 6s ease-in-out infinite alternate; }
.dz-wave { animation: dz-wave 4s ease-in-out infinite alternate; }
.dz-drip { animation: dz-drip 2.6s ease-in infinite; }
.dz-ripple { transform-origin: 50% 50%; animation: dz-ripple 2.6s ease-out infinite; }
.dz-bob { animation: dz-bob 3s ease-in-out infinite alternate; }
.dz-rain { animation: dz-rain 1.4s linear infinite; }
.dz-flake { animation: dz-flake 3.6s linear infinite; }
.dz-waveout { transform-origin: 50% 50%; animation: dz-waveout 3s ease-out infinite; }
.dz-cloud { animation: dz-cloud 14s ease-in-out infinite alternate; }
.dz-neb { animation: dz-neb 20s ease-in-out infinite alternate; }
.dz-shoot { animation: dz-shoot 8s ease-out infinite; }
/* desync the repeats */
.bunker__dress .dz-d1 { animation-delay: -0.7s; } .bunker__dress .dz-d2 { animation-delay: -1.4s; } .bunker__dress .dz-d3 { animation-delay: -2.1s; }
.bunker__dress .dz-d4 { animation-delay: -2.8s; } .bunker__dress .dz-d5 { animation-delay: -3.5s; } .bunker__dress .dz-d6 { animation-delay: -4.2s; } .bunker__dress .dz-d7 { animation-delay: -4.9s; }
.bunker__dress .dz-c1 { animation-delay: -0.3s; } .bunker__dress .dz-c2 { animation-delay: -0.6s; } .bunker__dress .dz-c3 { animation-delay: -0.9s; }
.bunker__dress .dz-c4 { animation-delay: -1.2s; } .bunker__dress .dz-c5 { animation-delay: -1.5s; }
.bunker__dress .dz-mote.dz-d1 { animation-delay: -1.3s; } .bunker__dress .dz-mote.dz-d2 { animation-delay: -2.6s; } .bunker__dress .dz-mote.dz-d3 { animation-delay: -3.9s; }
.bunker__dress .dz-mote.dz-d4 { animation-delay: -5.2s; } .bunker__dress .dz-mote.dz-d5 { animation-delay: -6.5s; } .bunker__dress .dz-mote.dz-d6 { animation-delay: -7.8s; } .bunker__dress .dz-mote.dz-d7 { animation-delay: -9.1s; }
.bunker__dress .dz-belt.dz-d2 { animation-delay: -4s; } .bunker__dress .dz-belt.dz-d4 { animation-delay: -8s; } .bunker__dress .dz-belt.dz-d6 { animation-delay: -12s; }
.bunker__dress .dz-run.dz-d4 { animation-delay: -3.5s; }

@keyframes dz-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes dz-swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@keyframes dz-wobble { from { transform: rotate(-25deg); } to { transform: rotate(20deg); } }
@keyframes dz-sweep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes dz-pulse { from { opacity: 0.09; } to { opacity: 0.22; } }
@keyframes dz-breathe { from { opacity: 0.025; } to { opacity: 0.09; } }
@keyframes dz-flick { 0%, 100% { opacity: 0.9; } 41% { opacity: 0.35; } 43% { opacity: 0.9; } 45% { opacity: 0.5; } 47% { opacity: 0.9; } }
@keyframes dz-flick2 { from { opacity: 0.85; } to { opacity: 0.6; } }
@keyframes dz-chase { 0% { opacity: 1; } 17%, 100% { opacity: 0.25; } }
@keyframes dz-beacon { 0% { opacity: 1; } 12%, 100% { opacity: 0.15; } }
@keyframes dz-run { from { transform: translateX(0); } to { transform: translateX(846px); } }
@keyframes dz-belt { from { transform: translateX(0); } to { transform: translateX(1340px); } }
@keyframes dz-steam { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 30% { opacity: 0.25; } 100% { opacity: 0; transform: translateY(-50px) scale(2.2); } }
@keyframes dz-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.8; } 85% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-300px); } }
@keyframes dz-drift { from { transform: translate(0, 0); } to { transform: translate(28px, -16px); } }
@keyframes dz-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes dz-drip { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 0.8; } 88% { opacity: 0.8; transform: translateY(300px); } 100% { opacity: 0; transform: translateY(306px); } }
@keyframes dz-ripple { 0%, 86% { opacity: 0; transform: scale(0.2); } 90% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes dz-bob { from { transform: translateY(0); } to { transform: translateY(4px); } }
@keyframes dz-rain { from { transform: translateY(0); } to { transform: translateY(560px); } }
@keyframes dz-flake { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(36px); } }
@keyframes dz-waveout { 0% { opacity: 0.8; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes dz-cloud { from { transform: translate(-30px, 10px); opacity: 0.08; } to { transform: translate(40px, -20px); opacity: 0.2; } }
@keyframes dz-neb { from { transform: translateX(-20px); } to { transform: translateX(30px); } }
@keyframes dz-shoot { 0% { opacity: 0; transform: translate(0, 0); } 3% { opacity: 1; } 14% { opacity: 0; transform: translate(320px, 80px); } 100% { opacity: 0; transform: translate(320px, 80px); } }

/* reduced motion: everything holds still (the base styles above are the still picture) */
@media (prefers-reduced-motion: reduce) { .bunker__dress, .bunker__dress * { animation: none !important; } }
html[data-motion="reduced"] .bunker__dress, html[data-motion="reduced"] .bunker__dress * { animation: none !important; }
/* Shop thumbnails hold still too; the product panel shows the motion */
.pcard__room .bunker__dress * { animation: none !important; }

/* Skins picker: a locked card says how to get it */
.themecard__how { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.35; }
.themecard__groupname { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
/* Prestige screen: the next prestige's bunker */
.prestige__skin .bunker { display: block; width: 100%; height: auto; max-height: 220px; }
.prestige__skin .bunker--tall { display: none; }
/* phone shelves pick up the skin's accent */
.bunker--tall[data-skin]:not([data-skin="standard"]) > .bunker__room .ln-dim { stroke: var(--sk-a, var(--cyan-dim)); stroke-opacity: 0.6; }