/* =====================================================================
   BAD ENDING: DEVIL THEME
   Applied by activateDevilTheme() when the Remains are fed to PURGE.
   Unlike the Matrix theme this one persists across reloads, and no word in the
   OS lifts it. The way out is found rather than given: 25 % 1976 in the
   Calculator reaches what is left of the man who built this machine, and he
   spends himself calling deactivateDevilTheme() in js/system.js. Nothing here
   may point at that, and nothing anywhere may offer it.

   Landing the theme is not the end of the sequence. PURGE has admin from here
   and spends it, in three player-paced stages driven by js/apps/sacrifice.js.
   Their look is at the bottom of this file, under THE COLLAPSE.

   Structure mirrors css/matrix.css on purpose: a :root palette, then every
   rule scoped under body.devil-theme. Red on black is far less legible than
   matrix green, so body copy stays a warm bone tone and the reds are kept
   for borders, titles, and accents.
   ===================================================================== */

:root {
  --devil-red: #ff2d1f;
  --devil-red-hot: #ff5a3c;
  --devil-ember: #ff8a3d;
  --devil-blood: #8b0f0a;
  --devil-blood-deep: #2b0705;
  --devil-bone: #f2ded7;
  --devil-bone-soft: rgba(242, 222, 215, 0.72);
  --devil-ink: #0a0201;
  --devil-panel: rgba(20, 5, 4, 0.94);
  --devil-panel-strong: rgba(28, 7, 5, 0.98);
  --devil-panel-soft: rgba(58, 12, 9, 0.82);
  --devil-line: rgba(255, 45, 31, 0.42);
  --devil-line-strong: rgba(255, 90, 60, 0.82);
  --devil-shadow-window: 0 0 0 1px rgba(255, 45, 31, 0.2),
    0 0 20px rgba(139, 15, 10, 0.42), 6px 6px 0 rgba(0, 0, 0, 0.94);
  --devil-shadow-panel: inset 0 0 0 1px rgba(255, 90, 60, 0.08),
    inset 0 0 28px rgba(139, 15, 10, 0.22);
  --devil-shadow-button: 4px 4px 0 rgba(0, 0, 0, 0.94),
    inset 0 0 0 1px rgba(255, 90, 60, 0.08);
  --devil-text-glow: 0 0 3px rgba(255, 90, 60, 0.55),
    0 0 12px rgba(255, 45, 31, 0.28);
}

/* The desktop is gradients only, by choice. An image layer used to sit on top
   of these as an optional extra, but the file was never added, so every load
   spent a request on a 404 to reveal the ember stack underneath anyway. The
   gradients are the theme.

   filter is forced to none because setWallpaper("classic") writes
   grayscale(100%) inline, which would otherwise drain the whole theme grey. */
body.devil-theme {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 45, 31, 0.24), transparent 46%),
    radial-gradient(circle at 50% 108%, rgba(255, 138, 61, 0.16), transparent 52%),
    linear-gradient(180deg, #1a0403 0%, #0a0201 46%, #120302 100%) !important;
  color: var(--devil-bone) !important;
  font-family: "VT323", monospace !important;
  filter: none !important;
}

/* Embers drifting up, plus the faint grid of something running underneath. */
body.devil-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 45, 31, 0.16) 0,
      rgba(10, 2, 1, 0) 26%,
      rgba(10, 2, 1, 0) 100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 26px,
      rgba(255, 45, 31, 0.035) 26px 27px,
      transparent 27px 54px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 138, 61, 0.03) 0 2px,
      transparent 2px 7px
    );
  opacity: 0.9;
  animation: devilBackdropDrift 18s linear infinite;
}

/* Scanlines and a vignette that breathes, so the desktop never sits still. */
body.devil-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.24) 0 1px,
      rgba(0, 0, 0, 0) 1px 4px
    ),
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0) 42%,
      rgba(58, 4, 2, 0.42) 78%,
      rgba(0, 0, 0, 0.72) 100%
    );
  animation: devilBreathe 7s ease-in-out infinite;
}

@keyframes devilBackdropDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, -108px 0, 0 -84px;
  }
}

@keyframes devilBreathe {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

body.devil-theme .grain {
  background-image: repeating-linear-gradient(
    rgba(255, 45, 31, 0.06) 0 1px,
    transparent 1px 6px
  );
  mix-blend-mode: screen;
  opacity: 0.4;
  z-index: 1;
}

body.devil-theme,
body.devil-theme input,
body.devil-theme textarea,
body.devil-theme button,
body.devil-theme select {
  font-family: "VT323", monospace !important;
}

body.devil-theme ::selection {
  background: rgba(255, 45, 31, 0.32);
  color: var(--devil-bone);
}

body.devil-theme ::placeholder {
  color: rgba(242, 222, 215, 0.46);
}

body.devil-theme * {
  scrollbar-color: rgba(255, 45, 31, 0.4) rgba(10, 2, 1, 0.94);
}

body.devil-theme a {
  color: var(--devil-red-hot);
}

body.devil-theme a:hover {
  color: var(--devil-ember);
}

/* =====================================================================
   BOOT AND LOGIN
   Reached again on every reload, because this theme is persisted.
   ===================================================================== */

body.devil-theme #boot-screen {
  background: radial-gradient(
      circle at 50% 42%,
      rgba(139, 15, 10, 0.42),
      transparent 58%
    ),
    #060101 !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .boot-apple {
  filter: drop-shadow(0 0 14px rgba(255, 45, 31, 0.72)) saturate(0.4)
    hue-rotate(-24deg);
}

body.devil-theme .boot-progress-wrap {
  border-color: var(--devil-line) !important;
  background: rgba(255, 45, 31, 0.06) !important;
}

body.devil-theme .boot-progress {
  background: linear-gradient(
    90deg,
    var(--devil-blood),
    var(--devil-red)
  ) !important;
  box-shadow: 0 0 12px rgba(255, 45, 31, 0.5);
}

body.devil-theme .boot-percent,
body.devil-theme .boot-caption {
  font-family: "VT323", monospace !important;
  color: var(--devil-red-hot) !important;
  text-shadow: var(--devil-text-glow);
}

/* The caption text is written by JS. This line is not, and it is the first
   thing that tells a returning visitor the reload did not save them. */
body.devil-theme .boot-caption::after {
  content: "permissions: granted";
  display: block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--devil-bone-soft);
  text-shadow: none;
}

body.devil-theme #login-screen {
  backdrop-filter: blur(15px) brightness(0.5) saturate(1.5);
  -webkit-backdrop-filter: blur(15px) brightness(0.5) saturate(1.5);
  background-color: rgba(40, 4, 2, 0.42);
}

body.devil-theme .login-container {
  font-family: "VT323", monospace !important;
}

body.devil-theme .login-avatar img {
  border: 2px solid var(--devil-line-strong);
  box-shadow: 0 0 22px rgba(255, 45, 31, 0.42);
  filter: saturate(0.5) contrast(1.1);
}

body.devil-theme .login-name {
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme #login-password {
  background: rgba(20, 5, 4, 0.72) !important;
  border: 1px solid var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
}

/* The way in is still the way in, so this bubble is not hidden the way the
   three cheerful ones are. It only changes hands: cream goes black exactly as
   the follower's does, because what is holding the door open now is not Dash. */
body.devil-theme .login-prompt {
  border-color: var(--devil-red) !important;
  background: #0e0201 !important;
  color: var(--devil-bone) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.95),
    0 0 18px rgba(255, 45, 31, 0.32) !important;
}

/* All four sides rather than the two Morphy's tail draws, because this one
   points left on a desktop and up on a phone. Only the drawn pair shows. */
body.devil-theme .login-prompt::after {
  border-color: var(--devil-red) !important;
  background: #0e0201 !important;
}

/* =====================================================================
   DESKTOP CHROME
   ===================================================================== */

body.devil-theme .desktop-icon {
  border: 1px solid transparent;
  background: transparent;
  color: var(--devil-bone);
  z-index: 2;
}

body.devil-theme .desktop-icon:hover,
body.devil-theme .desktop-icon.selected {
  background: rgba(20, 5, 4, 0.82);
  border-color: var(--devil-line);
  box-shadow: inset 0 0 18px rgba(139, 15, 10, 0.28);
}

body.devil-theme .desktop-icon span {
  padding: 4px 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .desktop-section-heading span {
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .desktop-section-heading::after {
  background: var(--devil-red);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
}

body.devil-theme .desktop-icon.selected span {
  box-shadow: none;
}

body.devil-theme .android-folder-box {
  background: linear-gradient(
    180deg,
    rgba(44, 9, 7, 0.86),
    rgba(14, 3, 2, 0.92)
  );
  border: 1px solid var(--devil-line);
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(139, 15, 10, 0.24);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.devil-theme .android-folder:hover .android-folder-box,
body.devil-theme .desktop-icon.selected .android-folder-box {
  background: linear-gradient(
    180deg,
    rgba(58, 12, 9, 0.9),
    rgba(20, 5, 4, 0.96)
  );
  transform: none;
}

body.devil-theme .top-bar,
body.devil-theme .dock,
body.devil-theme .app-drawer,
body.devil-theme .menu,
body.devil-theme .socials-popup {
  border: 2px solid var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .top-bar {
  position: relative;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(46, 10, 7, 0.88),
    rgba(12, 3, 2, 0.96)
  ) !important;
  box-shadow: 0 0 0 1px rgba(255, 45, 31, 0.14) inset,
    0 10px 22px rgba(0, 0, 0, 0.42);
}

body.devil-theme .top-bar .icon,
body.devil-theme .status-icon,
body.devil-theme .top-bar .clock {
  border: 1px solid transparent;
  background: transparent;
  color: var(--devil-bone);
}

body.devil-theme .top-bar .icon:hover,
body.devil-theme .top-bar .icon.active,
body.devil-theme .status-icon:hover,
body.devil-theme .top-bar .clock:hover {
  background: rgba(46, 10, 7, 0.92);
  border-color: var(--devil-line);
}

body.devil-theme .battery {
  background: rgba(12, 3, 2, 0.88);
  border-color: var(--devil-line-strong);
}

body.devil-theme .battery:hover {
  background: rgba(34, 8, 6, 0.96);
}

body.devil-theme .battery::after {
  background-color: var(--devil-red);
}

body.devil-theme .battery-level {
  background: linear-gradient(
    90deg,
    var(--devil-blood),
    var(--devil-red)
  ) !important;
}

body.devil-theme .menu {
  background: linear-gradient(
    180deg,
    rgba(28, 7, 5, 0.98),
    rgba(12, 3, 2, 0.98)
  ) !important;
  box-shadow: var(--devil-shadow-window) !important;
}

body.devil-theme .menu div,
body.devil-theme .menu-item {
  color: var(--devil-bone) !important;
}

body.devil-theme .menu div:hover,
body.devil-theme .menu-item:hover {
  background: rgba(58, 12, 9, 0.96) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .dock,
body.devil-theme .app-drawer {
  background: linear-gradient(
    180deg,
    rgba(34, 8, 6, 0.9),
    rgba(10, 2, 1, 0.96)
  ) !important;
  box-shadow: var(--devil-shadow-window) !important;
}

body.devil-theme .dock-icon {
  color: var(--devil-bone);
}

body.devil-theme .dock-icon::before {
  border-color: transparent;
}

body.devil-theme .dock-icon:hover::before,
body.devil-theme .dock-icon.active::before {
  border-color: var(--devil-line);
  background: rgba(58, 12, 9, 0.72);
}

body.devil-theme .dock-icon:hover img,
body.devil-theme .dock-icon:hover svg,
body.devil-theme .dock-icon.active img,
body.devil-theme .dock-icon.active svg {
  filter: drop-shadow(0 0 8px rgba(255, 45, 31, 0.5));
}

body.devil-theme .dock-icon .label {
  background: rgba(12, 3, 2, 0.96) !important;
  border-color: var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .dock-badge {
  background: var(--devil-red) !important;
  border-color: #000 !important;
  color: #120302 !important;
}

body.devil-theme .socials-popup {
  background: linear-gradient(
    180deg,
    rgba(28, 7, 5, 0.98),
    rgba(12, 3, 2, 0.98)
  ) !important;
  box-shadow: var(--devil-shadow-window) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.devil-theme .socials-popup-title,
body.devil-theme .socials-popup-item span {
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .socials-popup-item {
  border-color: transparent;
}

body.devil-theme .socials-popup-item:hover {
  background: rgba(58, 12, 9, 0.9);
  border-color: var(--devil-line);
}

body.devil-theme .socials-popup-item:hover img {
  filter: drop-shadow(0 0 8px rgba(255, 45, 31, 0.42));
}

body.devil-theme .socials-overlay {
  background: rgba(6, 1, 1, 0.62);
}

/* =====================================================================
   WINDOWS AND CONTROLS
   ===================================================================== */

body.devil-theme .window {
  border: 2px solid var(--devil-line-strong) !important;
  background: linear-gradient(
    180deg,
    rgba(24, 6, 5, 0.98),
    rgba(12, 3, 2, 0.98)
  ) !important;
  box-shadow: var(--devil-shadow-window) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .window.maximized {
  box-shadow: none !important;
}

body.devil-theme .window .title {
  background: linear-gradient(
    180deg,
    rgba(70, 14, 10, 0.98),
    rgba(34, 8, 6, 0.98)
  ) !important;
  border-bottom: 1px solid var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .window .title .title-text {
  color: var(--devil-bone) !important;
}

body.devil-theme .window .content {
  background: linear-gradient(
    180deg,
    rgba(16, 4, 3, 0.98),
    rgba(24, 6, 5, 0.98)
  ) !important;
  color: var(--devil-bone) !important;
  box-shadow: var(--devil-shadow-panel);
}

body.devil-theme .ctrl {
  background: rgba(12, 3, 2, 0.94) !important;
  border: 1px solid var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .ctrl-close {
  background: rgba(139, 15, 10, 0.9) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .ctrl-max {
  background: rgba(70, 14, 10, 0.9) !important;
}

body.devil-theme .ctrl-min {
  background: rgba(46, 10, 7, 0.9) !important;
}

/* .msg-avatar-btn is a circular portrait, not a slab control — leave it out
   the way :not(.terminal-input) leaves the shell prompt alone. */
body.devil-theme button:not(.msg-avatar-btn),
body.devil-theme .button,
body.devil-theme .music-btn,
body.devil-theme .gb-btn,
body.devil-theme .nb-btn,
body.devil-theme .settings-btn,
body.devil-theme .custom-upload-btn,
body.devil-theme .internet-toolbar-btn,
body.devil-theme .finder-toggle-btn {
  background: linear-gradient(
    180deg,
    rgba(46, 10, 7, 0.94),
    rgba(16, 4, 3, 0.98)
  ) !important;
  border: 2px solid var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
  box-shadow: var(--devil-shadow-button) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme button:not(.msg-avatar-btn):hover,
body.devil-theme .button:hover,
body.devil-theme .music-btn:hover,
body.devil-theme .gb-btn:hover,
body.devil-theme .nb-btn:hover,
body.devil-theme .settings-btn:hover,
body.devil-theme .custom-upload-btn:hover,
body.devil-theme .internet-toolbar-btn:hover,
body.devil-theme .finder-toggle-btn:hover {
  background: linear-gradient(
    180deg,
    rgba(70, 14, 10, 0.96),
    rgba(24, 6, 5, 0.98)
  ) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme button a,
body.devil-theme .button a {
  color: var(--devil-bone) !important;
}

/* Real form fields get a field to look like — the Internet app's search boxes,
   the guestbook, the upload control. The terminal prompt is excluded because it
   is not a field: css/terminal.css deliberately leaves it transparent and
   borderless as an inline prompt, and the !important here was drawing a box
   around it. Scoped rather than out-shouted, so the prompt needs no counter
   rule of its own — the same exclusion css/matrix.css already carries, and it
   matters more here, because this is the theme whose way out is typed at that
   prompt. */
body.devil-theme input:not(.terminal-input),
body.devil-theme textarea,
body.devil-theme select {
  background: rgba(10, 2, 1, 0.94) !important;
  border: 2px solid var(--devil-line) !important;
  color: var(--devil-bone) !important;
  box-shadow: inset 0 0 14px rgba(139, 15, 10, 0.22);
  caret-color: var(--devil-red-hot);
}

body.devil-theme input:not(.terminal-input):focus,
body.devil-theme textarea:focus,
body.devil-theme select:focus {
  outline: none;
  border-color: var(--devil-line-strong) !important;
  box-shadow: inset 0 0 18px rgba(255, 45, 31, 0.2),
    0 0 0 1px rgba(255, 45, 31, 0.16) !important;
}

/* =====================================================================
   STATUS APPS
   ===================================================================== */

body.devil-theme .status-window .content,
body.devil-theme #clockApp .content,
body.devil-theme #wifiContent,
body.devil-theme #batteryContent {
  background: transparent !important;
  color: var(--devil-bone) !important;
}

body.devil-theme #clockApp .content *,
body.devil-theme #wifiContent *,
body.devil-theme #batteryContent * {
  color: var(--devil-bone) !important;
  border-color: var(--devil-line) !important;
}

body.devil-theme #clockApp .content div,
body.devil-theme #wifiContent div,
body.devil-theme #batteryContent div {
  background: transparent !important;
}

body.devil-theme #batteryContent > div > div:nth-of-type(2) {
  border: 1px solid var(--devil-line) !important;
  background: rgba(58, 12, 9, 0.82) !important;
  border-radius: 0 !important;
}

body.devil-theme #batteryContent > div > div:nth-of-type(2) > div {
  background: linear-gradient(
    90deg,
    var(--devil-blood),
    var(--devil-red)
  ) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(255, 45, 31, 0.32);
}

body.devil-theme #wifiContent button {
  width: 100%;
}

/* =====================================================================
   FINDER, MESSAGES, INTERNET, GUESTBOOK, NOTICE BOARD
   ===================================================================== */

body.devil-theme .finder-content,
body.devil-theme .finder-main,
body.devil-theme .finder-main-container,
body.devil-theme .msg-app,
body.devil-theme .msg-layout,
body.devil-theme .msg-conversation,
body.devil-theme .internet-content,
body.devil-theme .internet-browser-shell,
body.devil-theme .internet-browser-home,
body.devil-theme .internet-page-view,
body.devil-theme .community-content,
body.devil-theme .community-creator-panel,
body.devil-theme .community-creator-header,
body.devil-theme .guestbook-content,
body.devil-theme .guestbook-detail-body,
body.devil-theme .guestbook-compose,
body.devil-theme .noticeboard-content,
body.devil-theme .noticeboard-posts,
body.devil-theme .nb-compose {
  background: transparent !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .finder-sidebar,
body.devil-theme .msg-list,
body.devil-theme .msg-search,
body.devil-theme .msg-count,
body.devil-theme .msg-conversation-head,
body.devil-theme .msg-compose,
body.devil-theme .internet-title-tools,
body.devil-theme .gb-list-header,
body.devil-theme .gb-detail-header,
body.devil-theme .noticeboard-header {
  background: rgba(34, 8, 6, 0.9) !important;
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .sidebar-item,
body.devil-theme .msg-thread-row,
body.devil-theme .finder-icon,
body.devil-theme .guestbook-list-item,
body.devil-theme .nb-card,
body.devil-theme .favourite-item {
  color: var(--devil-bone) !important;
}

body.devil-theme .sidebar-item {
  border: 1px solid transparent;
}

body.devil-theme .sidebar-item.active,
body.devil-theme .sidebar-item:hover {
  background: rgba(58, 12, 9, 0.96);
  border-color: var(--devil-line);
  color: var(--devil-bone);
}

body.devil-theme .finder-icon {
  padding: 8px 6px;
  border: 1px solid transparent;
}

body.devil-theme .finder-icon:hover,
body.devil-theme .finder-icon.selected {
  background: rgba(34, 8, 6, 0.86);
  border-color: var(--devil-line);
  box-shadow: inset 0 0 14px rgba(139, 15, 10, 0.24);
}

body.devil-theme .finder-icon span {
  color: var(--devil-bone);
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .msg-conversation-name,
body.devil-theme .msg-contact-name,
body.devil-theme .gb-list-header h3,
body.devil-theme .gb-detail-header h3,
body.devil-theme .noticeboard-header h3,
body.devil-theme .settings-heading {
  color: var(--devil-red-hot) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .msg-contact-photo {
  border-color: var(--devil-line-strong) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.94), 0 0 14px rgba(255, 45, 31, 0.28);
}

body.devil-theme .msg-thread-stamp,
body.devil-theme .msg-conversation-handle,
body.devil-theme .msg-contact-handle,
body.devil-theme .msg-contact-note-label,
body.devil-theme .msg-contact-saved,
body.devil-theme .msg-receipt,
body.devil-theme .msg-count,
body.devil-theme .guestbook-list-item .gb-preview,
body.devil-theme .guestbook-list-item .gb-date,
body.devil-theme .noticeboard-empty,
body.devil-theme .gb-warning,
body.devil-theme .settings-desc,
body.devil-theme .guestbook-empty,
body.devil-theme .msg-empty {
  color: var(--devil-bone-soft) !important;
}

body.devil-theme .msg-back,
body.devil-theme .msg-compose-send {
  background: rgba(12, 3, 2, 0.94);
  border-color: var(--devil-line) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .msg-back:active {
  background: rgba(58, 12, 9, 0.96);
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .msg-thread-row {
  border-bottom-color: var(--devil-line) !important;
}

body.devil-theme .msg-thread-row:hover,
body.devil-theme .msg-thread-row.active {
  background: rgba(58, 12, 9, 0.96) !important;
}

body.devil-theme .msg-thread-dot {
  background: rgba(255, 45, 31, 0.12);
}

body.devil-theme .msg-thread-row.unread .msg-thread-dot {
  background: var(--devil-red);
  box-shadow: 0 0 10px rgba(255, 45, 31, 0.42);
}

body.devil-theme .msg-avatar:not(.msg-avatar-portrait),
body.devil-theme .msg-tapback {
  background: rgba(34, 8, 6, 0.9) !important;
  border-color: var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
}

/* Portraits keep their own white disc; only the ring follows the theme. */
body.devil-theme .msg-avatar-portrait {
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .msg-thread-name,
body.devil-theme .msg-bubble,
body.devil-theme .msg-contact-note,
body.devil-theme .msg-stamp-day,
body.devil-theme .msg-stamp-time {
  color: var(--devil-bone) !important;
}

body.devil-theme .msg-transcript {
  background: linear-gradient(
      180deg,
      rgba(12, 3, 2, 0.98),
      rgba(22, 5, 4, 0.98)
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 45, 31, 0.05) 0 1px,
      transparent 1px 28px
    ) !important;
  text-shadow: var(--devil-text-glow);
  box-shadow: inset 0 1px 0 rgba(255, 90, 60, 0.14);
}

body.devil-theme .msg-stamp {
  background: rgba(12, 3, 2, 0.98) !important;
}

body.devil-theme .msg-bubble,
body.devil-theme .msg-row.in.run-end .msg-bubble::after {
  background: rgba(34, 8, 6, 0.92) !important;
  border-color: var(--devil-line) !important;
}

body.devil-theme .msg-row.out .msg-bubble,
body.devil-theme .msg-row.out.run-end .msg-bubble::after {
  background: rgba(70, 14, 10, 0.96) !important;
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .msg-search-input,
body.devil-theme .msg-compose-field {
  background: rgba(10, 2, 1, 0.94) !important;
  border-color: var(--devil-line) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .msg-thread-row.read .msg-thread-name,
body.devil-theme .msg-thread-row.read .msg-thread-stamp {
  color: rgba(242, 222, 215, 0.6) !important;
}

body.devil-theme .msg-bubble strong {
  background: rgba(255, 45, 31, 0.2) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .msg-threads::-webkit-scrollbar-track,
body.devil-theme .msg-transcript::-webkit-scrollbar-track,
body.devil-theme .journal-pages::-webkit-scrollbar-track,
body.devil-theme .terminal-output::-webkit-scrollbar-track {
  border: 1px solid var(--devil-line);
  background: rgba(10, 2, 1, 0.94);
}

body.devil-theme .msg-threads::-webkit-scrollbar-thumb,
body.devil-theme .msg-transcript::-webkit-scrollbar-thumb,
body.devil-theme .journal-pages::-webkit-scrollbar-thumb,
body.devil-theme .terminal-output::-webkit-scrollbar-thumb {
  border: 1px solid var(--devil-line);
  background: rgba(58, 12, 9, 0.96);
}

body.devil-theme #internet.window,
body.devil-theme #music.window,
body.devil-theme #terminal.window {
  background: var(--devil-ink) !important;
}

body.devil-theme #internet .internet-content,
body.devil-theme .internet-browser-pane,
body.devil-theme .internet-browser-loading,
body.devil-theme #terminal .content,
body.devil-theme .terminal-content,
body.devil-theme .terminal-output,
body.devil-theme .terminal-input-container,
body.devil-theme .music-player,
body.devil-theme #local-music-view,
body.devil-theme .photo-viewer-content {
  background: transparent !important;
}

body.devil-theme #internetSearchInput,
body.devil-theme #internetHomeSearchInput {
  background: rgba(10, 2, 1, 0.94) !important;
  border-color: var(--devil-line-strong) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .internet-browser-pane,
body.devil-theme .photo-viewer-content {
  background: rgba(8, 2, 1, 0.98) !important;
}

/* Each fictional site carries its own background class, and a cheerful 1998
   palette punching through a theme that has eaten the desktop would undo the
   whole effect. Every one of them falls back to the theme's own surface, and the
   page keeps its structure — borders, rules, counters and the ASCII — in red.
   One rule covers every site, present and future. */
body.devil-theme .internet-page-view[class*="is-"] {
  background: transparent !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .internet-page-banner,
body.devil-theme .internet-page-heading,
body.devil-theme .internet-history-group {
  border-color: var(--devil-line-strong) !important;
  color: var(--devil-red-hot) !important;
  text-shadow: var(--devil-text-glow);
}

/* The sticky day label takes its fill from the page host, which is now
   transparent, so it needs one of its own or forty-six entries scroll through
   it. */
body.devil-theme .internet-history-group {
  background: var(--devil-ink) !important;
}

body.devil-theme .internet-page-pre,
body.devil-theme .internet-page-transfer,
body.devil-theme .internet-page-webring,
body.devil-theme .internet-page-host {
  border-color: var(--devil-line-strong) !important;
  background: rgba(10, 2, 1, 0.6) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .internet-page-link,
body.devil-theme .internet-page-download,
body.devil-theme .internet-result-title,
body.devil-theme .internet-recent-item,
body.devil-theme .internet-recent-more,
body.devil-theme .internet-history-item {
  color: var(--devil-red-hot) !important;
}

body.devil-theme .internet-page-link:hover,
body.devil-theme .internet-page-link:focus-visible,
body.devil-theme .internet-page-download:hover,
body.devil-theme .internet-page-download:focus-visible,
body.devil-theme .internet-result-title:hover,
body.devil-theme .internet-result-title:focus-visible,
body.devil-theme .internet-recent-item:hover,
body.devil-theme .internet-recent-item:focus-visible,
body.devil-theme .internet-recent-more:hover,
body.devil-theme .internet-recent-more:focus-visible,
body.devil-theme .internet-history-item:hover,
body.devil-theme .internet-history-item:focus-visible {
  background: rgba(46, 10, 7, 0.82) !important;
  color: var(--devil-red-hot) !important;
}

body.devil-theme .internet-recent-item.is-inert,
body.devil-theme .internet-history-item.is-inert,
body.devil-theme .internet-recent-item.is-inert:hover,
body.devil-theme .internet-recent-item.is-inert:focus-visible,
body.devil-theme .internet-history-item.is-inert:hover,
body.devil-theme .internet-history-item.is-inert:focus-visible {
  background: transparent !important;
  color: var(--devil-bone) !important;
  opacity: 0.55;
  cursor: default;
}

body.devil-theme .internet-page-note,
body.devil-theme .internet-page-broken,
body.devil-theme .internet-result-url,
body.devil-theme .internet-result-blurb {
  color: var(--devil-bone) !important;
}

body.devil-theme .internet-page-counter span {
  border-color: var(--devil-line-strong) !important;
  background: rgba(10, 2, 1, 0.96) !important;
  color: var(--devil-red-hot) !important;
}

body.devil-theme .internet-browser-loading {
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .favourites-title,
body.devil-theme .favourite-label {
  color: var(--devil-bone) !important;
  text-shadow: var(--devil-text-glow);
}

body.devil-theme .favourite-item {
  border-color: transparent;
}

body.devil-theme .favourite-item:hover,
body.devil-theme .favourite-item:focus-visible {
  background: rgba(46, 10, 7, 0.82);
  border-color: var(--devil-line);
  color: var(--devil-bone);
  outline: none;
}

body.devil-theme .favourite-item img {
  background-color: rgba(10, 2, 1, 0.96);
  border-color: var(--devil-line-strong);
  box-shadow: 0 0 0 1px rgba(255, 45, 31, 0.16);
}

body.devil-theme #local-music-view {
  background: linear-gradient(
    180deg,
    rgba(34, 8, 6, 0.94),
    rgba(10, 2, 1, 0.98)
  ) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme #local-music-view h3,
body.devil-theme #local-music-view p,
body.devil-theme #local-music-view button {
  color: inherit !important;
}

/* =====================================================================
   TERMINAL
   The one surface that still answers, and the window the ending pushes the
   visitor into.
   ===================================================================== */

body.devil-theme #terminal .content {
  background: linear-gradient(
    180deg,
    rgba(10, 2, 1, 0.98),
    rgba(20, 5, 4, 0.98)
  ) !important;
}

body.devil-theme .terminal-output {
  color: var(--devil-bone) !important;
}

body.devil-theme .terminal-prompt,
body.devil-theme .terminal-command,
body.devil-theme .terminal-boot {
  color: var(--devil-red-hot);
}

body.devil-theme .terminal-user {
  color: var(--devil-ember);
}

body.devil-theme .terminal-path,
body.devil-theme .terminal-info,
body.devil-theme .terminal-directory,
body.devil-theme .terminal-output a {
  color: #ffb08a;
}

body.devil-theme .terminal-command-text,
body.devil-theme .terminal-file {
  color: var(--devil-bone);
}

body.devil-theme .terminal-error {
  color: var(--devil-red);
}

body.devil-theme .terminal-input-container {
  border-top: 1px solid var(--devil-line);
}

body.devil-theme .terminal-input {
  color: var(--devil-bone);
  caret-color: var(--devil-red);
}

body.devil-theme .photo-viewer-content img {
  border: 1px solid var(--devil-line);
  box-shadow: 0 0 24px rgba(255, 45, 31, 0.18);
}

/* =====================================================================
   GUESTBOOK AND NOTICE BOARD PANELS
   ===================================================================== */

body.devil-theme .guestbook-list-item,
body.devil-theme .nb-card,
body.devil-theme .guestbook-loader-panel,
body.devil-theme .noticeboard-loader-panel,
body.devil-theme .community-dialog-panel {
  background: linear-gradient(
    180deg,
    rgba(34, 8, 6, 0.9),
    rgba(10, 2, 1, 0.98)
  ) !important;
  border-color: var(--devil-line-strong) !important;
  box-shadow: var(--devil-shadow-window) !important;
}

body.devil-theme .guestbook-list-item:hover,
body.devil-theme .guestbook-list-item:active {
  background: linear-gradient(
    180deg,
    rgba(58, 12, 9, 0.96),
    rgba(22, 5, 4, 0.98)
  ) !important;
  transform: none;
  box-shadow: var(--devil-shadow-window) !important;
}

body.devil-theme .gb-btn-send,
body.devil-theme .internet-go-btn,
body.devil-theme .nb-btn.gb-btn-send {
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .gb-btn-delete,
body.devil-theme .nb-btn-delete {
  color: var(--devil-red) !important;
  border-color: rgba(255, 45, 31, 0.68) !important;
}

body.devil-theme .gb-emoji-picker {
  background: rgba(10, 2, 1, 0.96) !important;
  border-color: var(--devil-line-strong) !important;
  box-shadow: var(--devil-shadow-window) !important;
  backdrop-filter: none;
}

body.devil-theme .gb-emoji-option {
  background: rgba(34, 8, 6, 0.9) !important;
  border-color: var(--devil-line) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .gb-emoji-option:hover,
body.devil-theme .gb-emoji-option:active {
  background: rgba(58, 12, 9, 0.96) !important;
  color: var(--devil-bone) !important;
}

body.devil-theme .guestbook-loader-title,
body.devil-theme .noticeboard-loader-title,
body.devil-theme .guestbook-loader-copy,
body.devil-theme .noticeboard-loader-copy,
body.devil-theme .nb-card-title,
body.devil-theme .nb-card-body,
body.devil-theme .gb-detail-meta {
  color: var(--devil-bone) !important;
}

body.devil-theme .guestbook-loader-track,
body.devil-theme .noticeboard-loader-track {
  background: rgba(34, 8, 6, 0.88) !important;
  border-color: var(--devil-line-strong) !important;
}

body.devil-theme .guestbook-loader-track::before,
body.devil-theme .noticeboard-loader-track::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 90, 60, 0.1) 0 12px,
    rgba(58, 12, 9, 0.92) 12px 24px
  );
}

body.devil-theme .guestbook-loader-track::after,
body.devil-theme .noticeboard-loader-track::after {
  background: linear-gradient(90deg, var(--devil-blood), var(--devil-red));
  border-left-color: rgba(6, 1, 1, 0.92);
  border-right-color: rgba(6, 1, 1, 0.92);
}

body.devil-theme .nb-card-header {
  background: rgba(46, 10, 7, 0.88) !important;
  border-bottom-color: var(--devil-line) !important;
}

body.devil-theme .nb-card-date,
body.devil-theme .nb-tag,
body.devil-theme .admin-badge,
body.devil-theme .nb-version-badge {
  color: var(--devil-bone) !important;
}

body.devil-theme .nb-version-badge,
body.devil-theme .admin-badge,
body.devil-theme .nb-tag,
body.devil-theme .nb-tag-update,
body.devil-theme .nb-tag-announce,
body.devil-theme .nb-tag-warning,
body.devil-theme .nb-tag-info {
  background: rgba(34, 8, 6, 0.88) !important;
  border-color: var(--devil-line) !important;
}

body.devil-theme .settings-divider {
  background: var(--devil-line);
  border-bottom-color: rgba(255, 90, 60, 0.14);
}

/* Settings can no longer change the wallpaper, and the buttons say so by
   looking spent. setWallpaper() enforces it; this only stops them lying. */
body.devil-theme .settings-btn,
body.devil-theme .custom-upload-btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The Trash guardian bubble has no one left to speak for it, and the two other
   dock bubbles are cheerful invitations that would read as a bug down here. */
body.devil-theme #trash-prompt,
body.devil-theme #music-prompt,
body.devil-theme .guestbook-prompt {
  display: none !important;
}

/* The Music window's minimize hint is not an invitation, it is the only place
   the OS says that closing the window is what stops the sound. So it stays and
   only changes hands, the same way the login prompt does. This one's tail
   turns depending on where the bubble lands, so all four borders are
   repainted; only ever two of them are drawn. */
body.devil-theme .music-minimize-hint {
  border-color: var(--devil-red) !important;
  background: #0e0201 !important;
  color: var(--devil-bone) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.95),
    0 0 18px rgba(255, 45, 31, 0.32) !important;
}

body.devil-theme .music-minimize-hint::after {
  border-color: var(--devil-red) !important;
  background: #0e0201 !important;
}

/* =====================================================================
   THE FOLLOWER
   Morphy's body is on the desktop even though the visitor killed him. The
   cream speech bubble he owned in the red-pill ending goes black, because
   what is using it now is not him. It carries the only thing this ending
   says directly to the visitor, so it has to look worth reading.
   ===================================================================== */

body.devil-theme #morphy-speech-bubble {
  border-color: var(--devil-red) !important;
  background: #0e0201 !important;
  color: var(--devil-bone) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.95),
    0 0 18px rgba(255, 45, 31, 0.32) !important;
}

body.devil-theme #morphy-speech-bubble::after {
  border-right-color: var(--devil-red) !important;
  border-bottom-color: var(--devil-red) !important;
  background: #0e0201 !important;
}

/* Desaturated and lit from underneath, so the dog reads as a puppet. */
body.devil-theme #morphy-cursor {
  filter: saturate(0.35) contrast(1.15)
    drop-shadow(0 0 10px rgba(255, 45, 31, 0.55));
}

body.devil-theme .morphy-paw-print {
  filter: saturate(0) brightness(0.5)
    drop-shadow(0 0 5px rgba(255, 45, 31, 0.72));
}

/* =====================================================================
   MOBILE AND MOTION
   ===================================================================== */

/* The mobile app drawer prints its labels bare, with no chip behind them. The
   dock rule above would give them one, so undo it at the drawer only. */
body.devil-theme .app-drawer .dock-icon .label {
  background: none !important;
  border: none !important;
}

/* The drifting backdrop repaints a fullscreen layer every frame. Nothing about
   this ending needs it, so honour the preference and hold both layers still. */
@media (prefers-reduced-motion: reduce) {
  body.devil-theme::before,
  body.devil-theme::after {
    animation: none;
  }

  body.devil-theme::after {
    opacity: 0.9;
  }
}

/* =====================================================================
   THE COLLAPSE — PURGE spending its admin
   =====================================================================
   js/apps/sacrifice.js owns the staging and puts one class per stage reached
   on <body>. This is only what the stages look like, and it is deliberately
   all subtraction: there is no new furniture anywhere in the sequence, because
   the whole point is the machine having less in it than it did.

     purge-collapse-1  Inventory. Nothing here at all — stage one takes the
                       contents of folders and leaves the chrome alone, which
                       is what makes it read as theft rather than as breakage.
     purge-collapse-2  Eviction. The dock empties down to the Trash and the
                       desktop goes colder. Refusals are handled in JS.
     purge-collapse-3  Foreclosure. Everything goes except one icon.

   Almost every rule here needs !important because updateFullscreenState() in
   js/system.js writes display on the dock and the top bar inline, and an inline
   style cannot be beaten by a stylesheet any other way. ===================== */

/* Eviction: colder, and the embers are going out. */
body.devil-theme.purge-collapse-2 {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 45, 31, 0.12), transparent 44%),
    linear-gradient(180deg, #100302 0%, #060101 52%, #0b0201 100%) !important;
}

body.devil-theme.purge-collapse-2 .dock-icon:not([data-app="trash"]) {
  display: none !important;
}

/* Foreclosure: no wallpaper left worth the name, and nothing on it. */
body.devil-theme.purge-collapse-3 {
  background:
    radial-gradient(circle at 50% 46%, rgba(139, 15, 10, 0.16), transparent 58%),
    #040000 !important;
}

body.devil-theme.purge-collapse-3 .top-bar,
body.devil-theme.purge-collapse-3 .dock,
body.devil-theme.purge-collapse-3 .app-drawer {
  display: none !important;
}

/* The pet house is a clickable object on the desktop, so it goes with the
   icons. Morphy's own sprite stays — the body PURGE is wearing walking an
   empty desktop is the best image in the sequence, and it takes no pointer
   events, so it is not something the visitor can reach for by mistake. */
body.devil-theme.purge-collapse-3 #morphy-house {
  display: none !important;
}

body.devil-theme.purge-collapse-3 .desktop-icon:not(#icon-calculator) {
  display: none !important;
}

/* ⚠️ The one object left, and the kill path's whole guarantee that nobody can
   be stranded here. PURGE has just had to admit out loud that there is one
   thing it cannot open; this is that admission on the desktop. The glow is
   box-shadow only — no transform and no size-changing keyframe, because this
   is still an ordinary desktop icon and the OS does not do that to controls.

   Do not add a `display: none` here for any reason. */
@keyframes purgeLastIcon {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 45, 31, 0);
  }
  50% {
    box-shadow: 0 0 26px rgba(255, 45, 31, 0.4);
  }
}

/* No display override here on purpose: .desktop-icon has no display of its own
   and the rule above only hides the others, so restating one would change this
   icon's layout for nothing. */
body.devil-theme.purge-collapse-3 #icon-calculator {
  animation: purgeLastIcon 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.devil-theme.purge-collapse-3 #icon-calculator {
    animation: none;
    box-shadow: 0 0 22px rgba(255, 45, 31, 0.34);
  }
}

/* PURGE refusing, and announcing each stage as it takes it. A band across the
   screen with no chrome on it and no way to dismiss it, rather than a message
   window: a polite dialog with a close button is the wrong register for a
   machine being taken apart, and being unable to answer it is the point.

   It sits under body.devil-theme::after at 99998, so the scanlines run over it
   like everything else. The fade must stay in step with PURGE_REFUSAL_FADE in
   js/apps/sacrifice.js, which is what times the element's removal. */
body.devil-theme .purge-refusal {
  position: fixed;
  left: 0;
  right: 0;
  top: 36%;
  z-index: 99997;
  pointer-events: none;
  padding: 16px 24px;
  font-family: "VT323", monospace;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 3px;
  text-align: center;
  white-space: pre-line;
  color: var(--devil-red-hot);
  text-shadow: 0 0 4px rgba(255, 45, 31, 0.7), 0 0 22px rgba(139, 15, 10, 0.75);
  background: linear-gradient(
    90deg,
    rgba(10, 2, 1, 0) 0%,
    rgba(10, 2, 1, 0.9) 14%,
    rgba(10, 2, 1, 0.9) 86%,
    rgba(10, 2, 1, 0) 100%
  );
  border-top: 1px solid var(--devil-line);
  border-bottom: 1px solid var(--devil-line);
  opacity: 0;
  transition: opacity 400ms ease;
}

body.devil-theme .purge-refusal.visible {
  opacity: 1;
}

@media (max-width: 600px) {
  body.devil-theme .purge-refusal {
    font-size: 24px;
    letter-spacing: 2px;
    padding: 12px 14px;
  }
}

/* =====================================================================
   THE SIEGE — the countdown, and the end of the machine
   =====================================================================
   Both are PURGE's own chromeless furniture, so they live here with
   .purge-refusal rather than in css/sacrifice.css, which owns the arc's
   full-screen set pieces. Both are scoped under body.devil-theme like everything
   else in this file, which is also the honest scope: neither can exist outside it.
   ===================================================================== */

/* The clock. Centred, above everything, and immediately UNDER the menu bar
   rather than over it — the bar keeps the place it has always had and the clock
   is the thing that gets out of its way. The offset is written by
   positionPurgeCountdown() in js/apps/sacrifice.js, which measures the bar's own
   bottom edge, because that edge moves: the bar sheds File, Edit and View at the
   phone breakpoint, a maximized window hides it, and Foreclosure takes it
   outright. The 0px fallback is that last case, and it is also what the clock
   uses before it has been placed once.

   It still takes no pointer events, which is what keeps the Apple menu reachable
   underneath it wherever the two happen to meet — the visitor has to be able to
   ask for Erase Memory and be told no.

   It survives Foreclosure because it is a body child and none of the things the
   stage-three rules above hide. That is the requirement: the clock has to outlast
   the dock, the menu bar and every icon but one.

   z-index sits just under body.devil-theme::after at 99998, so the scanlines run
   over it like everything else, and just under .purge-refusal at 99997, so a
   refusal band draws over the clock rather than the other way round. The two
   never collide anyway — the band is at 36% and this is at the top — but a band
   is the louder thing and should win if they ever do. */
body.devil-theme .purge-countdown {
  position: fixed;
  top: var(--purge-countdown-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99996;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 26px 8px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 2, 1, 0.94) 0%,
    rgba(10, 2, 1, 0.86) 70%,
    rgba(10, 2, 1, 0) 100%
  );
  border-bottom: 1px solid var(--devil-line);
  text-align: center;
}

body.devil-theme .purge-countdown-label {
  font-family: "VT323", monospace;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--devil-blood);
  text-shadow: 0 0 6px rgba(139, 15, 10, 0.8);
}

/* Numerals, so VT323 and never Pixelify Sans. Tabular figures would be ideal and
   VT323 is monospaced anyway, so the readout cannot jitter as digits change. */
body.devil-theme .purge-countdown-clock {
  font-family: "VT323", monospace;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--devil-red-hot);
  text-shadow: 0 0 5px rgba(255, 45, 31, 0.85), 0 0 24px rgba(139, 15, 10, 0.9);
}

/* The last fifteen seconds. A brightness pulse on the text rather than anything
   that changes size: this is a readout and the OS keeps growth and shrink out of
   ordinary surfaces even here. */
@keyframes purgeCountdownUrgent {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

body.devil-theme .purge-countdown.is-urgent .purge-countdown-clock {
  animation: purgeCountdownUrgent 0.5s steps(2, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.devil-theme .purge-countdown.is-urgent .purge-countdown-clock {
    animation: none;
  }
}

/* Erase Memory, refused for the whole of the siege. The item still takes clicks —
   PURGE has to be able to answer it, and a pointer-events: none item would just
   look broken — so this is only what "not available" looks like. */
body.devil-theme.purge-siege #menu-erase-memory {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@media (max-width: 600px) {
  body.devil-theme .purge-countdown {
    padding: 4px 16px 6px;
  }

  body.devil-theme .purge-countdown-label {
    font-size: 13px;
    letter-spacing: 3px;
  }

  body.devil-theme .purge-countdown-clock {
    font-size: 32px;
  }
}

/* =====================================================================
   The machine, gone
   =====================================================================
   ⚠️ TWO REGISTERS, AND THEY MUST STAY VISIBLY APART. The top half is PURGE
   finishing; the bottom half is the site talking to a real person and is the only
   way back out of this screen. Everything about the meta block is a deliberate
   break from the block above it — the type, the case, the colour, the rule
   between them — because the one thing that must not happen here is a visitor
   reading the reset as part of the story.

   It is the only surface in the OS above the boot screen's 99999, because it has
   to be the last word on a machine that no longer works. The Erase Memory
   confirmation still opens over it: raiseWindowStackAboveOverlays() in
   js/system.js lifts the window stack past this once, and the two numbers must
   stay in that order.
   ===================================================================== */

body.devil-theme .purge-destroyed {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 30px 24px;
  overflow-y: auto;
  background: #040000;
  opacity: 0;
  transition: opacity 1.4s ease;
}

body.devil-theme .purge-destroyed.visible {
  opacity: 1;
}

body.devil-theme .purge-destroyed-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

body.devil-theme .purge-destroyed-heading {
  font-family: "VT323", monospace;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 12px;
  color: var(--devil-red-hot);
  text-shadow: 0 0 8px rgba(255, 45, 31, 0.7), 0 0 40px rgba(139, 15, 10, 0.9);
}

body.devil-theme .purge-destroyed-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 128px;
  font-family: "VT323", monospace;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 2px;
  color: var(--devil-blood);
}

/* --- Out of character ---
   No caps, no letter-spacing, no red, sentence case, and a hairline above it. It
   should look like a note stuck to the screen rather than anything the machine
   said. The rule is the boundary and it is the most important 1px in the file. */
body.devil-theme .purge-destroyed-meta {
  max-width: 520px;
  padding-top: 26px;
  border-top: 1px solid #3a2320;
  text-align: left;
  opacity: 0;
  transition: opacity 1s ease;
}

body.devil-theme .purge-destroyed-meta.visible {
  opacity: 1;
}

body.devil-theme .purge-destroyed-meta-label {
  margin-bottom: 8px;
  font-family: "VT323", monospace;
  font-size: 15px;
  letter-spacing: 1px;
  color: #6f6f6f;
}

body.devil-theme .purge-destroyed-meta-copy {
  margin: 0 0 18px 0;
  font-family: "VT323", monospace;
  font-size: 20px;
  line-height: 1.4;
  color: #cfcfcf;
}

/* The one <strong> in the block is the other ending being admitted to, so it is
   brighter rather than inverted — the chip treatment belongs to Messages. */
body.devil-theme .purge-destroyed-meta-copy strong {
  color: #fff;
  font-weight: normal;
}

/* An ordinary retro button, on purpose. This is the OS's own control, not
   PURGE's, so it wears the OS's own chrome — and !important because this file
   restyles every `button` on the page and would otherwise paint it in embers. */
body.devil-theme .purge-destroyed-erase {
  padding: 7px 18px !important;
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  background: #e0e0e0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9) !important;
  font-family: "VT323", monospace !important;
  font-size: 19px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  color: #000 !important;
  text-shadow: none !important;
  cursor: pointer;
}

body.devil-theme .purge-destroyed-erase:active {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}

@media (max-width: 600px) {
  body.devil-theme .purge-destroyed {
    gap: 22px;
    padding: 24px 16px;
    /* Left-aligned at this width: four centred lines of 38 characters wrap into
       a ragged block, and the fiction reads better as a log than as a poster. */
    justify-content: flex-start;
    padding-top: 56px;
  }

  body.devil-theme .purge-destroyed-heading {
    font-size: 40px;
    letter-spacing: 7px;
  }

  body.devil-theme .purge-destroyed-lines {
    min-height: 0;
    font-size: 18px;
    letter-spacing: 1px;
  }

  body.devil-theme .purge-destroyed-meta {
    padding-top: 18px;
  }

  body.devil-theme .purge-destroyed-meta-copy {
    font-size: 18px;
  }
}