/* Halloween mode: only applies while <html> has the `halloween` class (see the inline script in <head>). */

/* Zombie browse hand */
html.halloween body {
  cursor: url('assets/halloween-cursor.png') 5 0, auto;
  cursor: -webkit-image-set(url('assets/halloween-cursor.png') 1x, url('assets/halloween-cursor@2x.png') 2x) 5 0, auto;
}

html.halloween :is(a, button, label, summary, select, [role="button"]) {
  cursor: url('assets/halloween-cursor.png') 5 0, pointer !important;
  cursor: -webkit-image-set(url('assets/halloween-cursor.png') 1x, url('assets/halloween-cursor@2x.png') 2x) 5 0, pointer !important;
}

.halloween-only {
  display: none;
}

html.halloween .halloween-only {
  display: block;
}

/* Phones only have room for "Souls:" */
@media (max-width: 520px) {
  .souls-detail {
    display: none;
  }
}

/* Desk accessories stack under Settings. Narrower layouts only get In the Dark, since Key Caps
   needs a keyboard, and put it first: right after the main window, above the clocks. */
.desk-accessory {
  display: none;
}

html.halloween body.home-page .after-dark {
  display: block;
  width: 100%;
  max-width: 240px;
}

@media (max-width: 859px) {
  html.halloween body.home-page .after-dark {
    order: -1;
  }
}

@media (min-width: 860px) {
  html.halloween body.home-page .desk-accessory {
    display: block;
    grid-area: settings;
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: 240px;
    /* Offset rather than a margin, and a negative bottom margin so its own height doesn't
       count either: the stack mustn't make the first row of the grid taller than the About
       window and push Recent Updates down (as expanding Karui's release notes did). */
    position: relative;
    top: var(--desk-accessory-top, 0);
    margin-bottom: -10000px;
  }
}

.key-caps-content {
  padding: 6px 8px 8px;
}

.key-caps {
  container-type: inline-size;
}

/* Key labels shrink with the window on narrower screens (the home page forces 11px everywhere) */
body.home-page .key-caps .key-caps-key {
  font-size: clamp(8px, 4.6cqw, 11px) !important;
}

.key-caps-display {
  height: 18px;
  margin-bottom: 6px;
  padding: 0 4px;
  border: 1px solid #000;
  background: #fff;
  text-align: left;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
}

.key-caps-board {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 2px;
}

.key-caps-key {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 0 #000;
  line-height: 1;
  user-select: none;
}

.key-caps-space {
  grid-row: 4;
  grid-column: 6 / span 10;
  aspect-ratio: 5;
}

.key-caps-key:active,
.key-caps-key.is-down {
  background: #000;
  color: #fff;
  box-shadow: none;
  transform: translateY(1px);
}

/* Sad Mac boot screen: black until it rises, then the desktop shows through as it fades */
html.sad-mac-boot,
html.sad-mac-boot body {
  background: #000 !important;
}

html.sad-mac-boot body > :not(.sad-mac-screen) {
  visibility: hidden;
}

.sad-mac-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #000;
  transition: opacity 0.35s ease;
}

.sad-mac-screen.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.sad-mac-stage {
  position: relative;
  width: 88px;
  height: 104px;
}

.sad-mac-icon {
  display: block;
  width: 88px;
  height: 104px;
  transition: filter 0.6s ease;
}

.sad-mac-face-risen {
  display: none;
}

.sad-mac-screen.is-risen-face .sad-mac-face-sad {
  display: none;
}

.sad-mac-screen.is-risen-face .sad-mac-face-risen {
  display: inline;
}

.sad-mac-screen.is-jolting .sad-mac-icon {
  animation: sad-mac-jolt 0.8s steps(1) both;
}

/* Rise in 4px steps (one pixel of the icon), with a zombie-green glow */
.sad-mac-screen.is-rising .sad-mac-icon {
  animation: sad-mac-rise 0.9s steps(6) both;
  filter: drop-shadow(0 0 6px rgba(159, 184, 138, 0.85));
}

/* Lightning bolt: drawn top to bottom, flickers once (only the bolt), then fades */
.sad-mac-bolt {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(200, 220, 255, 0.95)) drop-shadow(0 0 14px rgba(140, 170, 255, 0.6));
  animation: sad-mac-bolt-strike 0.14s steps(7) both;
}

.sad-mac-bolt svg {
  display: block;
}

.sad-mac-bolt.is-restriking {
  animation: sad-mac-bolt-restrike 0.14s steps(1) both;
}

.sad-mac-bolt.is-fading {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* The Mac holds the charge for a moment after the strike */
.sad-mac-screen.is-charged .sad-mac-icon {
  filter: drop-shadow(0 0 4px rgba(220, 235, 255, 1)) drop-shadow(0 0 16px rgba(150, 180, 255, 0.7));
}

.sad-mac-bit {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: #fff;
  animation: sad-mac-bit 0.7s steps(5) both;
}

.sad-mac-bit.is-spark {
  top: 0;
  bottom: auto;
  background: #e6eeff;
  animation-duration: 0.45s;
}

body.home-page .sad-mac-screen .sad-mac-code,
body.home-page .sad-mac-screen .sad-mac-code * {
  color: #fff;
  font-family: 'Monaco', 'Menlo', monospace !important;
  font-size: 13px !important;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

@keyframes sad-mac-jolt {
  0% { transform: translate(0, 0) scale(1, 1); }
  10% { transform: translate(-4px, 0) scale(1.06, 0.92); }
  20% { transform: translate(4px, -4px) scale(0.96, 1.06); }
  30% { transform: translate(0, 0) scale(1, 1); }
  45% { transform: translate(-4px, -4px) scale(1.04, 0.96); }
  55% { transform: translate(4px, 0) scale(1, 1); }
  65% { transform: translate(0, -4px) scale(0.94, 1.08); }
  75% { transform: translate(-4px, 0) scale(1.08, 0.92); }
  85% { transform: translate(4px, -4px) scale(1, 1); }
  100% { transform: translate(0, 0) scale(1, 1); }
}

@keyframes sad-mac-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-24px); }
}

@keyframes sad-mac-bolt-strike {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes sad-mac-bolt-restrike {
  0% { opacity: 1; }
  30% { opacity: 0.2; }
  60% { opacity: 1; }
}

@keyframes sad-mac-bit {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* Screensaver after a while idle: flying jack-o'-lanterns on black */
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  background: #000;
  cursor: none !important;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.screensaver.is-on {
  opacity: 1;
  transition-duration: 0.6s;
}

.screensaver-sprite {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.screensaver-sprite svg {
  display: block;
}

.screensaver-sprite g[data-frame] {
  display: none;
}

.screensaver-sprite[data-frame="0"] g[data-frame="0"],
.screensaver-sprite[data-frame="1"] g[data-frame="1"],
.screensaver-sprite[data-frame="2"] g[data-frame="2"] {
  display: inline;
}

/* Candles flicker inside the carved faces */
.screensaver-glow {
  fill: #ffd23f;
  animation: screensaver-candle 1.3s steps(1) infinite;
}

@keyframes screensaver-candle {
  0% { fill: #ffd23f; }
  35% { fill: #ffe680; }
  55% { fill: #ffb92e; }
  80% { fill: #ffdc5c; }
}

/* In the Dark desk accessory */
.after-dark-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 8px;
  text-align: left;
}

.after-dark-module {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A little black screen with the module's pumpkin centered in it, holding still */
.after-dark-preview {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  padding: 5px;
  border: 1px solid #000;
  background: #000;
}

.after-dark-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}

.after-dark-preview .screensaver-glow {
  animation: none;
}

.after-dark-setting {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
}

/* Platinum-style slider: a recessed groove, a pointed thumb, and a tick for each step */
.after-dark-slider {
  display: block;
}

.after-dark-setting input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.after-dark-setting input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 1px;
  background: #a9a9a9;
  box-shadow:
    inset 1px 1px 0 var(--classic-ink, #111),
    0 1px 0 var(--classic-highlight, #fff);
}

.after-dark-setting input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 1px;
  background: #a9a9a9;
  box-shadow:
    inset 1px 1px 0 var(--classic-ink, #111),
    0 1px 0 var(--classic-highlight, #fff);
}

.after-dark-setting input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 15px;
  margin-top: -3px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M.5.5h10v9l-5 5-5-5z' fill='%23eee' stroke='%23111'/%3E%3Cpath d='M1.5 9V1.5h8' fill='none' stroke='%23fff'/%3E%3Cpath d='M3.5 4v4m2-4v4m2-4v4' stroke='%23777'/%3E%3C/svg%3E") no-repeat;
  background-color: transparent;
  box-shadow: none;
}

.after-dark-setting input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 15px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M.5.5h10v9l-5 5-5-5z' fill='%23eee' stroke='%23111'/%3E%3Cpath d='M1.5 9V1.5h8' fill='none' stroke='%23fff'/%3E%3Cpath d='M3.5 4v4m2-4v4m2-4v4' stroke='%23777'/%3E%3C/svg%3E") no-repeat;
  background-color: transparent;
  box-shadow: none;
}

.after-dark-setting input[type="range"]:focus-visible {
  outline: 2px solid var(--classic-accent, #000);
  outline-offset: 1px;
}

/* Ticks line up with where the thumb's point lands at each step */
.after-dark-ticks {
  display: flex;
  justify-content: space-between;
  padding: 1px 5px 0;
}

.after-dark-ticks i {
  width: 1px;
  height: 3px;
  background: var(--classic-ink, #111);
}

.after-dark-sleep {
  align-self: center;
  margin-top: 2px;
}

/* Balloon Help (index.js) shows ghosts during Halloween. The shape is ghostSvg() in halloween.js. */
.help-balloon.is-ghost {
  min-width: 96px;
  max-width: 150px;
  padding: 0 12px 16px;
  text-align: center;
  animation:
    help-balloon-appear 0.15s ease-out,
    ghost-balloon-float 1.8s ease-in-out 0.15s infinite alternate;
}

.ghost-balloon-eyes,
.ghost-balloon-mouth {
  fill: #000;
}

.ghost-balloon-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: ghost-balloon-blink 4s step-end infinite;
}

@keyframes ghost-balloon-float {
  to { transform: translateY(-3px); }
}

@keyframes ghost-balloon-blink {
  0%, 96% { transform: none; }
  97%, 99% { transform: scaleY(0.15); }
}

@media (prefers-reduced-motion: reduce) {
  .help-balloon.is-ghost,
  .ghost-balloon-eyes {
    animation: none;
  }
}