#desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--void);
}

/* ═══════════════════════════════════════════════════ background layers */
#bg { position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none; }

.bg-sigil {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(78vh, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('../assets/sigil-mark.svg') center / contain no-repeat;
  opacity: .05;
  filter: blur(.4px);
  animation: bg-breathe 24s ease-in-out infinite;
}
.bg-sigil { will-change: transform; }
@keyframes bg-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(calc(1 + .05 * var(--chaos))) rotate(calc(2deg * var(--chaos))); }
}

.bg-scan {
  position: absolute;
  inset: -2px;
  background: repeating-linear-gradient(180deg,
    rgba(190,205,230,.030) 0 1px, transparent 1px 3px);
  animation: scan-roll 9s linear infinite;
}
@keyframes scan-roll { to { transform: translateY(3px); } }

.bg-noise {
  position: absolute;
  inset: 0;
  background: url('../assets/tex/noise.png') repeat;
  opacity: .5;
  mix-blend-mode: screen;
  animation: noise-jitter .6s steps(3, end) infinite;
}
@keyframes noise-jitter {
  0% { background-position: 0 0; }
  33% { background-position: -14px 9px; }
  66% { background-position: 11px -12px; }
  100% { background-position: 0 0; }
}

.bg-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 42%,
    transparent 38%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.9) 100%);
}

/* ═══════════════════════════════════════════════════ collage */
#collage {
  position: absolute;
  inset: 0 0 var(--tb-h) 0;
  z-index: var(--z-collage);
}

#collage > * {
  position: absolute;
  transform: translate(var(--par-x, 0), var(--par-y, 0));
}

/* ---------------------------------------------------- the wordmark */
.mark {
  left: 50%;
  top: 7%;
  width: min(74vw, 660px);
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.wordmark {
  display: grid;
  gap: 0;
  line-height: .82;
  font-family: var(--f-display);
  font-weight: 400;
}

.wm-line {
  position: relative;
  display: block;
  font-size: clamp(2.6rem, 9.4vw, 6rem);
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 #05060a) drop-shadow(0 0 22px rgba(150,170,205,.22));
}
.wm-line-b { font-size: clamp(2.1rem, 7.4vw, 4.7rem); letter-spacing: .01em; }

/* hard dark outline sitting behind the chrome fill so the letters keep
   their edges against the photographs */
.wm-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #04050a;
  -webkit-text-stroke: 7px #04050a;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

body.max-chaos .wm-line { animation: wm-jitter .18s steps(2, end) infinite; }
@keyframes wm-jitter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1px, 1px); }
}

.status {
  margin-top: 12px;
  font: 400 11px/1.4 var(--f-pixel);
  letter-spacing: .2em;
  color: var(--bruise-lt);
  text-shadow: 0 0 12px rgba(160,111,224,.5), 0 1px 0 #05060a;
  transition: opacity .16s linear, filter .16s linear;
}
.status.is-swapping { opacity: .15; filter: blur(2px); }

/* ---------------------------------------------------- Quinn figures */
.figure {
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.85));
}

#coffin {
  left: 6vw;
  top: 21%;
  width: clamp(200px, 25vw, 340px);
  z-index: 2;
  animation: coffin-float 13s ease-in-out infinite;
  transform-origin: 50% 30%;
}
@keyframes coffin-float {
  0%, 100% { rotate: calc(-1.6deg * var(--chaos)); translate: 0 0; }
  50% { rotate: calc(1.2deg * var(--chaos)); translate: 0 calc(-10px * var(--chaos)); }
}

#cutout {
  right: 3vw;
  bottom: 0;
  width: clamp(160px, 21vw, 300px);
  z-index: 2;
  filter: drop-shadow(0 0 26px rgba(160,111,224,.28)) drop-shadow(0 14px 26px rgba(0,0,0,.9));
}

/* chrome burst behind the cut-out */
#cutout::after { content: ''; }
#collage::before {
  content: '';
  position: absolute;
  right: 2vw;
  bottom: -6%;
  width: clamp(230px, 30vw, 420px);
  aspect-ratio: 1;
  z-index: 1;
  background: conic-gradient(from 0deg,
    rgba(233,238,246,.16) 0 3deg, transparent 3deg 18deg,
    rgba(160,111,224,.14) 18deg 21deg, transparent 21deg 40deg);
  border-radius: 50%;
  animation: halo-turn 46s linear infinite;
  pointer-events: none;
}
@keyframes halo-turn { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- arch portal */
#arch-portal {
  left: 40%;
  bottom: 4%;
  width: clamp(120px, 15vw, 190px);
  padding: 0;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 6px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.8));
  transition: filter .3s var(--ease-out), translate .3s var(--ease-out);
}
#arch-portal img { width: 100%; height: auto; }
#arch-portal:hover, #arch-portal:focus-visible {
  translate: 0 -6px;
  filter: drop-shadow(0 0 22px rgba(233,238,246,.4)) drop-shadow(0 14px 26px rgba(0,0,0,.85));
}
.portal-label {
  font: 700 9px/1 var(--f-pixel);
  letter-spacing: .16em;
  color: var(--cold);
  background: #05060a;
  padding: 5px 8px;
  box-shadow: var(--bev-thin);
  white-space: nowrap;
}

/* ---------------------------------------------------- halo portrait */
#halo-portrait {
  right: 24vw;
  top: 12%;
  width: clamp(66px, 8vw, 104px);
  padding: 0;
  z-index: 5;
  border-radius: 50%;
  animation: halo-orbit 30s ease-in-out infinite;
}
#halo-portrait img { width: 100%; height: auto; border-radius: 50%; }
@keyframes halo-orbit {
  0%, 100% { translate: 0 0; }
  25% { translate: calc(14px * var(--chaos)) calc(-9px * var(--chaos)); }
  50% { translate: calc(4px * var(--chaos)) calc(-19px * var(--chaos)); }
  75% { translate: calc(-11px * var(--chaos)) calc(-7px * var(--chaos)); }
}
.halo-ring-2 {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(233,238,246,.4);
  box-shadow: 0 0 18px rgba(233,238,246,.22), inset 0 0 14px rgba(160,111,224,.28);
  animation: halo-pulse 4.2s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: .5; scale: 1; }
  50% { opacity: 1; scale: calc(1 + .06 * var(--chaos)); }
}
#halo-portrait.is-pulsed { animation: halo-hit .34s var(--ease-hard); }
@keyframes halo-hit {
  0% { scale: 1; }
  40% { scale: 1.16; filter: brightness(1.7) contrast(1.3); }
  100% { scale: 1; }
}

/* ---------------------------------------------------- gif strips */
.strip { position: absolute; height: auto; pointer-events: none; z-index: 3; }
.strip-fire { left: 4vw; top: 15%; width: clamp(90px, 11vw, 150px); opacity: .9; }
.strip-work { right: 6vw; top: 44%; width: clamp(80px, 9vw, 120px); }
.strip-thorn { left: 33%; top: 4%; width: clamp(110px, 15vw, 200px); opacity: .75; }

/* ═══════════════════════════════════════════════════ roaming stickers */
#decor {
  position: absolute;
  inset: 0 0 var(--tb-h) 0;
  z-index: var(--z-decor);
  pointer-events: none;
}
.sticker {
  position: absolute;
  height: auto;
  rotate: var(--tilt, 0deg);
  translate: var(--par-x, 0) var(--par-y, 0);
  animation: drift var(--drift-t, 14s) ease-in-out infinite alternate;
  animation-delay: var(--drift-d, 0s);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.8));
}
.sticker { animation-name: drift; }
@keyframes drift {
  to { transform: translate(calc(var(--drift-x) * var(--chaos)), calc(var(--drift-y) * var(--chaos))); }
}
.sticker.is-live {
  pointer-events: auto;
  cursor: url('../assets/tex/cur-cross.png') 13 13, pointer;
  transition: filter .2s var(--ease-out), scale .2s var(--ease-out);
}
.sticker.is-live:hover, .sticker.is-live:focus-visible {
  scale: 1.22;
  filter: drop-shadow(0 0 10px rgba(233,238,246,.7));
}

body.reduce-chaos .sticker,
body.is-hidden-tab .sticker { animation-play-state: paused; }
body.reduce-chaos .bg-noise,
body.reduce-chaos .bg-scan,
body.is-hidden-tab .bg-noise { animation-play-state: paused; }
body.reduce-chaos .bg-sigil,
body.reduce-chaos #coffin,
body.reduce-chaos #halo-portrait,
body.reduce-chaos .halo-ring-2,
body.reduce-chaos #collage::before { animation-play-state: paused; }

body.max-chaos .bg-scan { opacity: 1.6; }
body.max-chaos .bg-noise { opacity: .85; }

/* ═══════════════════════════════════════════════════ desktop icons */
#icons {
  position: absolute;
  left: 10px;
  top: 12px;
  z-index: 40;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.dicon {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  width: 148px;
  padding: 6px 8px;
  text-align: left;
  border: 1px dashed transparent;
  transition: background .16s linear, border-color .16s linear;
}
.dicon span {
  font: 400 9px/1.3 var(--f-pixel);
  letter-spacing: .06em;
  color: var(--silver-lt);
  text-shadow: 1px 1px 0 #05060a, 0 0 8px rgba(0,0,0,.9);
}
.dicon img { filter: drop-shadow(1px 2px 0 rgba(0,0,0,.85)); transition: filter .16s linear; }
.dicon:hover, .dicon:focus-visible {
  background: rgba(107,63,160,.26);
  border-color: rgba(233,238,246,.45);
}
.dicon:hover span, .dicon:focus-visible span { color: var(--cold); }
.dicon:hover img { filter: drop-shadow(0 0 8px rgba(233,238,246,.75)); }
.dicon:active { background: rgba(176,18,26,.34); }

/* ═══════════════════════════════════════════════════ window layer */
#winlayer { position: absolute; inset: 0; z-index: var(--z-win); pointer-events: none; }
#winlayer > * { pointer-events: auto; }

/* ═══════════════════════════════════════════════════ taskbar */
#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tb-h);
  z-index: var(--z-taskbar);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--metal-lit);
  box-shadow: var(--bev-out), 0 -8px 20px rgba(0,0,0,.6);
  border-top: 1px solid #4a4e5c;
}

#start-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  font: 700 11px/1 var(--f-pixel);
  letter-spacing: .1em;
  color: var(--cold);
  background: var(--chrome-bar-dim);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
  flex: none;
}
#start-btn:hover { background: var(--chrome-bar); color: #06070a; }
#start-btn[aria-expanded="true"] { box-shadow: var(--bev-in); }

#task-strip {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.task-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  max-width: 168px;
  padding: 0 8px;
  font: 400 9px/1 var(--f-pixel);
  color: var(--silver-lt);
  background: var(--metal);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
  overflow: hidden;
}
.task-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-btn:hover { color: var(--cold); }
.task-btn.is-front { box-shadow: var(--bev-in); background: #0d0e14; color: var(--rad); }

.tb-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
}

.tb-cell {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  font: 400 9px/1 var(--f-pixel);
  color: var(--silver);
  background: #0a0b10;
  box-shadow: var(--bev-in);
  white-space: nowrap;
}
.tb-secrets b { color: var(--rad); margin-left: 2px; }
.tb-secrets.is-complete { color: var(--rad); animation: sec-glow 2s ease-in-out infinite; }
@keyframes sec-glow { 50% { text-shadow: 0 0 10px var(--rad); } }

.tb-hits #hits { display: flex; gap: 1px; margin-left: 3px; }
.hit-d {
  display: block;
  min-width: 9px;
  padding: 1px 1px;
  text-align: center;
  font: 700 10px/1 var(--f-pixel);
  color: var(--rad);
  background: #05070a;
  border: 1px solid #2a2d37;
  animation: hit-roll .5s var(--ease-out) backwards;
}
@keyframes hit-roll {
  from { transform: translateY(-70%); opacity: 0; filter: blur(2px); }
}

.tb-btn {
  height: 26px;
  padding: 0 9px;
  font: 400 9px/1 var(--f-pixel);
  letter-spacing: .05em;
  color: var(--silver-lt);
  background: var(--metal);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
  white-space: nowrap;
}
.tb-btn:hover { color: var(--cold); background: var(--metal-lit); }
.tb-btn[aria-pressed="true"] { box-shadow: var(--bev-in); color: var(--rad); background: #0b0c12; }

.tb-clock { font-family: var(--f-term); font-size: 15px; color: var(--cold); gap: 1px; }
.tb-clock i { font-style: normal; animation: colon 1.1s steps(2, end) infinite; }
@keyframes colon { 50% { opacity: .18; } }
.tb-clock.is-witching { color: var(--blood-lt); text-shadow: 0 0 10px rgba(255,74,84,.6); }

.tb-night { color: var(--blood-lt); font: 700 11px/1 var(--f-pixel); }

#skull-key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  background: var(--metal);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
  opacity: .42;
  transition: opacity .2s linear, filter .2s linear;
}
#skull-key:hover, #skull-key:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255,74,84,.85));
}

/* ═══════════════════════════════════════════════════ start menu */
#start-menu {
  position: absolute;
  left: 4px;
  bottom: var(--tb-h);
  z-index: var(--z-menu);
  width: 216px;
  padding: 4px;
  background: var(--metal-lit);
  box-shadow: var(--bev-out), 0 10px 26px rgba(0,0,0,.7);
  border: 1px solid #05060a;
}
.start-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  font: 400 10px/1 var(--f-pixel);
  color: var(--silver-lt);
}
.start-item:hover, .start-item:focus-visible {
  background: var(--blood);
  color: var(--cold);
}