/* =========================================================
   Rollie Pollie — Windows 7 theme
   Aero glass windows, pixel fonts, gadgets + taskbar.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;600&family=Press+Start+2P&display=swap");
@import url("icons.css"); /* generated by tools/make-icons.js */

:root {
  --font-pixel: "Pixelify Sans", "Segoe UI", Tahoma, sans-serif;
  --font-pixel-display: "Press Start 2P", "Pixelify Sans", monospace;

  /* Wallpapers (picked in Control Panel) */
  --wp-harmony:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.10) 44%, transparent 52%),
    linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, 0.07) 60%, transparent 66%),
    radial-gradient(ellipse at 72% 28%, rgba(130, 210, 255, 0.55), transparent 50%),
    radial-gradient(ellipse at 18% 85%, rgba(0, 140, 230, 0.45), transparent 55%),
    linear-gradient(160deg, #0a3d7a 0%, #1565b8 45%, #0b4a8f 70%, #062a57 100%);
  --wp-aurora:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.08) 44%, transparent 52%),
    radial-gradient(ellipse at 30% 20%, rgba(120, 255, 200, 0.45), transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(80, 160, 255, 0.4), transparent 55%),
    linear-gradient(160deg, #04363a 0%, #0b6b5c 45%, #0a4a5e 70%, #031f2a 100%);
  --wp-sakura:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.12) 44%, transparent 52%),
    radial-gradient(ellipse at 70% 25%, rgba(255, 255, 255, 0.5), transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 140, 190, 0.5), transparent 55%),
    linear-gradient(160deg, #f7a8c8 0%, #e97bb0 45%, #c95b9a 75%, #8c3f78 100%);
  --wp-sunset:
    radial-gradient(ellipse at 50% 90%, rgba(255, 210, 120, 0.7), transparent 50%),
    linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, 0.07) 60%, transparent 66%),
    linear-gradient(180deg, #2b1a5e 0%, #7b2f7f 40%, #e0586b 72%, #f7a35c 100%);
}

body[data-wallpaper="aurora"] { background-image: var(--wp-aurora); }
body[data-wallpaper="sakura"] { background-image: var(--wp-sakura); }
body[data-wallpaper="sunset"] { background-image: var(--wp-sunset); }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Desktop / wallpaper ---------- */

body {
  min-height: 100vh;
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1.45;
  color: #000;
  -webkit-font-smoothing: none;
  font-smooth: never;
  background-color: #0b4a8f;
  background-image: var(--wp-harmony);
  background-attachment: fixed;
  padding-bottom: 48px; /* room for the taskbar */
  overflow-x: clip; /* the spinning sun art pokes past the right edge */
  cursor: url('/assets/cursors/Wii-Cursor.cur'), auto;
}

a, button, .reveal-toggle, .fixation-header {
  cursor: url('/assets/cursors/wii-open.cur'), pointer;
}

.floating-widget {
  cursor: url('/assets/cursors/wii-grab.cur'), grab;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  image-rendering: pixelated;
}

button {
  font-family: inherit;
}

/* Pixel icons (css/icons.css) */
.ico {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.ico-lg {
  width: 24px;
  height: 24px;
}

.desktop {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) var(--right-col, 270px);
  grid-template-areas: "left main right";
  gap: 18px;
  align-items: start;
}

.main-col { grid-area: main; min-width: 0; }
.sidebar-left { grid-area: left; min-width: 0; }
.gadgets { grid-area: right; min-width: 0; }

.main-col > * + *,
.sidebar-left > * + *,
.gadgets > * + * {
  margin-top: 18px;
}

/* ---------- Aero glass window ---------- */

.window {
  position: relative;
  padding: 0 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 7px;
  background-color: rgba(120, 170, 220, 0.5);
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15) 30px, rgba(255, 255, 255, 0) 31px),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 34%, transparent 40%,
                    transparent 60%, rgba(255, 255, 255, 0.12) 64%, transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 4px 18px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-left: 2px;
}

.title-bar-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.title-bar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #000;
  text-shadow: 0 0 10px #fff, 0 0 8px #fff, 0 0 4px #fff;
}

/* Caption buttons: minimize / maximize / close (added by script.js) */
.title-bar-controls {
  display: flex;
  align-self: flex-start;
  margin-top: -1px;
  flex: none;
}

.cb {
  display: grid;
  place-items: center;
  width: 26px;
  height: 19px;
  padding: 0;
  font: inherit;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-left-width: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2) 45%,
                              rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.cb-min {
  border-left-width: 1px;
  border-bottom-left-radius: 5px;
}

.cb-min::before {
  content: "";
  width: 9px;
  height: 3px;
  margin-top: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px #2b2b2b;
}

.cb-max::before {
  content: "";
  width: 10px;
  height: 8px;
  border: 1px solid #fff;
  border-top-width: 2px;
  box-shadow: 0 0 0 1px #2b2b2b, inset 0 0 0 1px #2b2b2b;
}

.cb-close {
  width: 46px;
  border-bottom-right-radius: 5px;
  background: linear-gradient(#e8a598, #d36a52 45%, #c4391d 50%, #d6754b);
}

.cb-close::before {
  content: "\2715";
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

.cb:hover {
  background: linear-gradient(rgba(200, 235, 255, 0.95), rgba(130, 195, 240, 0.7) 45%,
                              rgba(60, 140, 220, 0.6) 50%, rgba(120, 200, 255, 0.8));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 8px rgba(120, 200, 255, 0.8);
}

.cb-close:hover {
  background: linear-gradient(#f2b3a3, #e47b62 45%, #d8492b 50%, #ec8a5a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 8px rgba(255, 120, 80, 0.8);
}

.cb:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -4px;
}

/* Window manager states (see script.js) */
.window.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 6px 26px rgba(0, 0, 0, 0.6);
}

.window.minimized {
  padding-bottom: 3px;
}

.window.minimized > :not(.title-bar) {
  display: none;
}

.window.shake {
  animation: shake 0.4s;
}

@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (min-width: 961px) {
  .window > .title-bar {
    cursor: url('/assets/cursors/wii-grab.cur'), move;
    touch-action: none;
  }
}

body.dragging {
  user-select: none;
}

body.dragging iframe {
  pointer-events: none;
}

/* White client area */
.window-body {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #6d88a9;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #000;
}

.window-body.flush {
  padding: 0;
}

.window-body h1,
.window-body h2,
.window-body h3 {
  font-weight: normal;
  color: #003399; /* Win7 "main instruction" blue */
}

.window-body h1 {
  font-family: var(--font-pixel-display);
  font-size: 16px; /* Press Start 2P stays crisp at multiples of 8px */
  line-height: 1.5;
  margin-bottom: 10px;
}

.window-body h2 { font-size: 18px; margin-bottom: 8px; }
.window-body h3 { font-size: 16px; margin-bottom: 6px; }

.window-body p {
  margin-bottom: 10px;
}

.window-body p:last-child {
  margin-bottom: 0;
}

/* Explorer-style address bar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 0 6px;
}

.nav-orb {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #13417a;
  background: radial-gradient(circle at 50% 30%, #c9ecff, #3a9ae0 55%, #1659a8);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  color: #fff;
  font-size: 10px;
  text-shadow: 0 0 2px #00264d;
}

.nav-orb.disabled {
  filter: grayscale(1);
  opacity: 0.7;
}

.address-bar {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin-left: 4px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  background: #fff;
  border: 1px solid #5a7aa5;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.address-bar .ico {
  margin-right: 4px;
}

/* Status bar */
.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  font-size: 13px;
  color: #1e2b3c;
  background: linear-gradient(#f1f5fb, #dfe7f2);
  border: 1px solid #6d88a9;
  border-top: 0;
}

.status-bar-field {
  flex: none;
  padding-right: 8px;
  border-right: 1px solid #b5c4d8;
}

.status-bar-field.grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-right: 0;
}

/* ---------- Win7 controls ---------- */

.w7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 75px;
  min-height: 23px;
  padding: 3px 14px;
  font: inherit;
  color: #000;
  text-decoration: none;
  border: 1px solid #707070;
  border-radius: 3px;
  background: linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.w7-btn:hover {
  text-decoration: none;
  border-color: #3c7fb1;
  background: linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
}

.w7-btn:active {
  border-color: #2c628b;
  background: linear-gradient(#e5f4fc 0%, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.w7-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* Command links (the green-arrow buttons from Win7 dialogs) */
.reveal-toggle,
.fixation-header {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: #151c55;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.reveal-toggle::before,
.fixation-header::before {
  content: "\279C  ";
  color: #2f9e3a;
  font-weight: bold;
}

.reveal-toggle:hover,
.fixation-header:hover {
  color: #07104b;
  border-color: #a7cdf0;
  background: linear-gradient(#f7fbfe, #e5f1fb);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.reveal-toggle:focus-visible,
.fixation-header:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

.reveal-content,
.fixation-content {
  margin: 4px 0 10px;
  padding: 8px 10px;
  background: #f5f8fc;
  border: 1px solid #d5dfe5;
  border-radius: 3px;
}

.reveal-content h3 {
  margin-bottom: 4px;
}

.changelog-list {
  padding-left: 18px;
  list-style: square;
}

.changelog-list li {
  margin-bottom: 4px;
}

/* Explorer "Favorites" pane */
.fav-list {
  list-style: none;
}

.fav-list a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  color: #000;
  border: 1px solid transparent;
  border-radius: 3px;
}

.fav-list a:hover {
  text-decoration: none;
  border-color: #b8d6fb;
  background: linear-gradient(#fafbfd, #ebf3fd);
}

.new-badge {
  margin-left: auto;
  padding: 0 5px;
  font-family: var(--font-pixel-display);
  font-size: 8px;
  line-height: 14px;
  vertical-align: middle;
  color: #fff;
  background: linear-gradient(#ff9a5a, #e8541f);
  border: 1px solid #b3400f;
  border-radius: 2px;
}

/* Yellow info bar */
.infobar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0;
  padding: 6px 10px;
  text-align: left;
  background: #fffbe0;
  border: 1px solid #d3c682;
}

/* Win7 progress bar (green, with the moving glint) */
.progress {
  position: relative;
  max-width: 200px;
  height: 14px;
  margin: 0 auto 14px;
  overflow: hidden;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  background: linear-gradient(#f3f3f3, #e2e2e2 50%, #d6d6d6 51%, #e9e9e9);
}

.progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#cef5c4 0%, #6fd35a 45%, #3fbf2d 50%, #5ad04b 100%);
}

.progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: glint 2.4s linear infinite;
}

@keyframes glint {
  from { left: -40%; }
  to   { left: 100%; }
}

/* ---------- Main window content ---------- */

/* Win7 thumbnail frame */
.thumb {
  width: 64px;
  height: 64px;
  padding: 2px;
  background: #fff;
  border: 1px solid #b8c8dc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Home: Win7 "Getting Started" banner across the top of the window */
.welcome-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -12px -14px 14px;
  padding: 14px 16px;
  overflow: hidden;
  border-bottom: 1px solid #b8d0ea;
  background:
    linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.7) 62%, transparent 72%),
    linear-gradient(#f5faff, #dcecfa);
}

.welcome-banner .thumb {
  flex: none;
  width: 72px;
  height: 72px;
}

.welcome-titles {
  flex: 1;
  min-width: 0;
}

.welcome-banner h1 {
  margin-bottom: 6px;
}

.welcome-banner h2 {
  min-height: 1.45em; /* no jump while the typewriter fills it in */
  margin: 0;
  font-size: 17px;
  color: #1e5aa8;
}

.welcome {
  max-width: 560px;
  margin: 0 auto;
}

.welcome p {
  font-size: 15px;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.welcome-signoff {
  text-align: center;
}

.signoff {
  color: #6d4fc4;
}

.flowers-love {
  display: block;
  width: 60%;
  max-width: 210px;
  margin: 14px auto 0;
  image-rendering: pixelated;
}

@media (max-width: 480px) {
  .welcome-banner {
    margin: -10px -10px 12px;
    padding: 12px;
  }

  .welcome-banner .thumb {
    width: 56px;
    height: 56px;
  }

  .welcome-banner .navi-fairy {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
  }
}

.site-footer {
  margin-top: 18px;
  padding-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #555;
  border-top: 1px solid #dfe6ef;
}

.footer-gifs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}

.footer-gifs img {
  height: 40px;
}

.blinky {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Navi */
.navi-fairy {
  width: 56px;
  height: 56px;
  flex: none;
  cursor: pointer;
  filter: drop-shadow(0 0 10px #88f2ff);
}

.navi-fairy:focus-visible {
  outline: 1px dotted #000;
}

.pulse-glow {
  animation: naviGlow 2.3s infinite alternate;
}

@keyframes naviGlow {
  from { filter: drop-shadow(0 0 6px #71e0ff) brightness(1.1); }
  to   { filter: drop-shadow(0 0 18px #9fe6ff) brightness(1.5); }
}

.navi-pop {
  animation: naviPop 0.5s cubic-bezier(.6, 2, .6, 1);
}

@keyframes naviPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3) rotate(-7deg); }
  60%  { transform: scale(1.1) rotate(7deg); }
  100% { transform: scale(1); }
}

/* ---------- Gadgets ---------- */

.gadget {
  padding: 10px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08) 40%, rgba(0, 0, 0, 0.18));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gadget-title {
  margin-bottom: 6px;
  font-size: 14px;
}

/* Sapphire.exe (home): the GBA sits on a deep sapphire stage */
.sapphire-window .window-body {
  padding: 16px 12px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 190, 255, 0.55), transparent 60%),
    linear-gradient(#1f5cc0, #12357a 60%, #0a1f4d);
}

.sapphire-window .floating-widget {
  max-width: 150px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(0, 0, 0, 0.5);
}

body.dark-mode .welcome-banner {
  border-color: #3c4559;
  background:
    linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.06) 62%, transparent 72%),
    linear-gradient(#2a3346, #1d2433);
}

body.dark-mode .welcome-banner h2 {
  color: #a9d4ff;
}

body.dark-mode .sapphire-window .window-body {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80, 140, 230, 0.35), transparent 60%),
    linear-gradient(#123a7d, #0a1f4d 60%, #050f29);
}

.photo-viewer .window-body {
  background: #0b0d12; /* Photo Viewer's dark canvas */
}

.photo-viewer img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-widget {
  display: block;
  max-width: 130px;
  margin: 0 auto;
  transition: transform 0.18s;
}

.floating-widget:hover {
  transform: scale(1.06) rotate(-2deg);
}

.floating-widget.active {
  animation: glowSpin 1s ease;
  filter: drop-shadow(0 0 8px #00f0ff);
}

@keyframes glowSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Speech-bubble tooltip under the GBA */
.gba-popup {
  margin: 10px auto 0;
  padding: 8px 10px;
  max-width: 220px;
  color: #000;
  text-shadow: none;
  background: linear-gradient(#fff, #e4ecf7);
  border: 1px solid #767676;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
}

/* Vista mini player: a regular Aero window, so the window manager
   gives it minimize / drag / snap back (script.js) */
/* Extra room in the gadget column on pages with the player */
.desktop:has(.wmp-window) {
  --right-col: 320px;
}

.wmp-window .window-body {
  padding: 8px 10px 10px;
  background: linear-gradient(#fdfeff, #eef3f9 48%, #e1e9f3 52%, #eef3fa);
}

/* Little orange "play" disc standing in for the WMP logo */
.wmp-logo {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffd36b 20%, #f08a00 60%, #8a3d00 100%);
  box-shadow: 0 0 0 1px rgba(120, 60, 0, 0.5), 0 0 4px rgba(255, 255, 255, 0.9);
}

.wmp-logo::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
}

/* Title bar equalizer: shows it's still playing while minimized */
.wmp-window .title-bar .eq {
  margin-right: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.wmp-window .title-bar .eq span {
  background: #1a7fd0;
  box-shadow: 0 0 2px #fff;
}

.wmp-window.playing .title-bar .eq {
  opacity: 1;
}

.wmp-window.playing .eq span {
  animation: eq 0.7s steps(4) infinite alternate;
}

/* "Now playing" screen: pale blue glass */
.wmp-screen {
  position: relative;
  height: 70px;
  padding: 6px 8px;
  overflow: hidden;
  color: #0b3a6b;
  border: 1px solid #8aa6c6;
  border-radius: 3px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(#e3f3fd, #bfe1f7);
  box-shadow: inset 0 1px 3px rgba(0, 40, 90, 0.25), 0 1px 0 #fff;
}

/* Spectrum bars sit behind the text */
.wmp-viz {
  position: absolute;
  inset: auto 6px 4px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 38px;
  opacity: 0.5;
}

.wmp-viz span {
  flex: 1;
  height: 2px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(#6fd0ff, #1a7fd0);
  transition: height 0.3s;
}

.wmp-window.playing .wmp-viz span {
  animation: wmpBar 0.6s ease-in-out infinite alternate;
}

/* Live spectrum (script.js sets each bar height from the FFT) */
.wmp-window.playing .wmp-viz.live span {
  animation: none;
  transition: none;
}

.wmp-viz span {
  position: relative;
}

.wmp-viz.live span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 1px + var(--lift, 0px));
  height: 2px;
  background: #0b5fa8;
  opacity: 0;
}

.wmp-window.playing .wmp-viz.live span::after {
  opacity: 1;
}

body.dark-mode .wmp-viz.live span::after {
  background: #bff4ff;
}

@keyframes wmpBar {
  0%   { height: 3px; }
  30%  { height: 70%; }
  60%  { height: 30%; }
  100% { height: 95%; }
}

.wmp-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.wmp-now {
  display: inline-block;
}

.wmp-marquee.scroll .wmp-now {
  animation: wmpScroll 9s ease-in-out infinite alternate;
}

@keyframes wmpScroll {
  0%, 15%   { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--shift, 0)); }
}

.wmp-sub {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 11px;
  color: #2a5f94;
}

.wmp-seek {
  position: relative;
  height: 7px;
  margin: 9px 2px 0;
  cursor: pointer;
  touch-action: none;
  border: 1px solid #8a9bb0;
  border-radius: 4px;
  background: linear-gradient(#d3dbe5, #f7f9fc);
}

.wmp-seek:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

.wmp-seek-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(#c9f3ff, #3cb3f5 50%, #137ad0 51%, #4fc0ff);
}

/* Glassy knob riding the end of the fill */
.wmp-seek-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid #3c7fb1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff, #d9f0fc 45%, #7cc0ec);
  transform: translateY(-50%);
}

.wmp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 0 2px;
}

.wmp-btn,
.wmp-play {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
}

.wmp-btn:focus-visible,
.wmp-play:focus-visible,
.wmp-vol-slider:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

/* Small buttons share the Win7 button gradient */
.wmp-stop,
.wmp-mute,
.wmp-prev,
.wmp-next {
  height: 24px;
  border: 1px solid #707070;
  background: linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.wmp-stop,
.wmp-mute {
  width: 24px;
  border-radius: 50%;
}

.wmp-btn:hover {
  border-color: #3c7fb1;
  background: linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
}

.wmp-btn:active {
  border-color: #2c628b;
  background: linear-gradient(#e5f4fc 0%, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%);
}

.wmp-stop span {
  width: 8px;
  height: 8px;
  background: #2b3a4a;
}

/* Prev | PLAY | next: two half-pill buttons tucked under the big orb */
.wmp-transport {
  display: flex;
  align-items: center;
}

.wmp-prev,
.wmp-next {
  width: 40px;
}

.wmp-prev {
  margin-right: -10px;
  padding-right: 8px;
  border-radius: 12px 0 0 12px;
}

.wmp-next {
  margin-left: -10px;
  padding-left: 8px;
  border-radius: 0 12px 12px 0;
}

/* Double arrows with a bar: drawn as ▶▶|, mirrored for |◀◀ */
.wmp-prev span,
.wmp-next span {
  --ink: #2b3a4a;
  width: 12px;
  height: 8px;
  background:
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 2px 100% no-repeat,
    conic-gradient(from 240deg at 100% 50%, var(--ink) 60deg, transparent 0) 0 0 / 5px 100% no-repeat,
    conic-gradient(from 240deg at 100% 50%, var(--ink) 60deg, transparent 0) 5px 0 / 5px 100% no-repeat;
}

.wmp-prev span {
  transform: scaleX(-1);
}

.wmp-play {
  z-index: 1;
  width: 46px;
  height: 46px;
  border: 1px solid #0b2a52;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1) 98%, transparent 100%),
    radial-gradient(circle at 50% 100%, #8ff0ff 0, #2b9be6 40%, #0a4a9a 80%);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #8a9bb0,
    0 2px 6px rgba(0, 60, 120, 0.4);
}

.wmp-play:hover {
  filter: brightness(1.12);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #3c7fb1,
    0 0 12px rgba(60, 170, 255, 0.9);
}

.wmp-play:active {
  filter: brightness(0.9);
}

/* Play triangle → pause bars */
.wmp-play span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.wmp-window.playing .wmp-play span {
  width: 13px;
  height: 16px;
  margin-left: 0;
  border: 0;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.wmp-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Speaker drawn with a box + cone; a red slash when muted */
.wmp-mute span {
  width: 4px;
  height: 6px;
  margin-right: 4px;
  background: #2b3a4a;
}

.wmp-mute span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -2px;
  border-style: solid;
  border-width: 6px 6px 6px 0;
  border-color: transparent #2b3a4a transparent transparent;
}

.wmp-mute.muted::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 10px;
  width: 15px;
  height: 2px;
  background: #d8492b;
  transform: rotate(-45deg);
}

.wmp-vol-slider {
  width: 80px;
  height: 14px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.wmp-vol-slider::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #8a9bb0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3cb3f5 var(--vol, 60%), #dfe5ec var(--vol, 60%));
}

.wmp-vol-slider::-moz-range-track {
  height: 5px;
  border: 1px solid #8a9bb0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3cb3f5 var(--vol, 60%), #dfe5ec var(--vol, 60%));
}

.wmp-vol-slider::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border: 1px solid #3c7fb1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff, #d9f0fc 45%, #7cc0ec);
  -webkit-appearance: none;
  appearance: none;
}

.wmp-vol-slider::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid #3c7fb1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff, #d9f0fc 45%, #7cc0ec);
}

/* Nothing in the playlist yet */
.wmp-window.empty .wmp-btn,
.wmp-window.empty .wmp-play,
.wmp-window.empty .wmp-seek {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Taskbar ---------- */

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000; /* stays above windows brought to the front */
  display: flex;
  align-items: center;
  height: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: rgba(20, 40, 70, 0.6);
  background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.25));
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.start-orb {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0 8px 0 6px;
  font-family: var(--font-pixel-display);
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 4px #fff;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1) 98%, transparent 100%),
    radial-gradient(circle at 50% 100%, #7fe3ff 0, #2b8fdf 35%, #0b4a9a 70%, #04254f 100%);
  box-shadow: 0 0 6px rgba(90, 190, 255, 0.7), inset 0 0 2px rgba(255, 255, 255, 0.7);
}

.start-orb:hover {
  text-decoration: none;
  filter: brightness(1.2);
  box-shadow: 0 0 14px rgba(120, 210, 255, 0.95), inset 0 0 2px rgba(255, 255, 255, 0.7);
}

.task-items {
  display: flex;
  min-width: 0;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0 2px;
  padding: 0 12px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 3px;
}

.task-item .ico {
  width: 20px;
  height: 20px;
}

.task-item:hover,
.task-item.active {
  text-decoration: none;
  border-color: rgba(0, 0, 0, 0.6);
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12) 50%,
                              rgba(255, 255, 255, 0.05) 51%, rgba(255, 255, 255, 0.18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.task-item:hover {
  background-image:
    radial-gradient(circle at var(--mx, 50%) 100%, rgba(140, 210, 255, 0.75), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12) 50%,
                    rgba(255, 255, 255, 0.05) 51%, rgba(255, 255, 255, 0.18));
}

.tray {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-left: auto;
  padding-left: 8px;
}

.tray-btn {
  display: grid;
  place-items: center;
  padding: 4px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.tray-btn .ico {
  width: 20px;
  height: 20px;
}

.tray-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.tray-clock {
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.tray-clock span {
  display: block;
}

.show-desktop {
  width: 14px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
}

.show-desktop:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
  box-shadow: 0 0 10px rgba(160, 220, 255, 0.8);
}

.show-desktop:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -3px;
}

.start-orb.pressed {
  filter: brightness(1.25);
  box-shadow: 0 0 16px rgba(140, 220, 255, 1), inset 0 0 2px rgba(255, 255, 255, 0.7);
}

/* ---------- Shared page bits ---------- */

/* Group box (Win7 fieldset) */
.groupbox {
  margin: 14px 0;
  padding: 8px 12px 12px;
  border: 1px solid #d5dfe5;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #fff;
}

.groupbox legend {
  padding: 0 4px;
  color: #003399;
  font-size: 13px;
}

.groupbox::after {
  content: "";
  display: block;
  clear: both;
}

.groupbox .thumb {
  float: right;
  width: auto;
  height: 72px;
  margin: 0 0 6px 12px;
}

.w7-list {
  padding-left: 18px;
  list-style: square;
}

.w7-list li {
  margin-bottom: 4px;
}

.plain-list {
  list-style: none;
}

.plain-list li {
  margin-bottom: 4px;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag {
  padding: 1px 8px;
  font-size: 13px;
  color: #1e3287;
  border: 1px solid #c5d3e3;
  border-radius: 3px;
  background: linear-gradient(#fff, #eef3f9);
}

/* Profile (About page) */
.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.profile .thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
}

.profile-bio {
  flex: 1 1 220px;
}

/* Small webmaster card in sidebars */
.webmaster-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.webmaster-mini .thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* Blog posts */
.blog-desc {
  color: #555;
}

.post {
  padding: 14px 0;
  border-top: 1px solid #dfe6ef;
}

.post-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 6px;
}

.post-header h2 {
  margin: 0;
}

.post-date {
  font-size: 13px;
  color: #6d6d6d;
}

.post-body {
  font-size: 15px;
  line-height: 1.6;
}

.post-footnote {
  font-style: italic;
  color: #6d4fc4;
}

/* Links page: Explorer "tiles" */
.link-list {
  list-style: none;
}

.link-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.link-item + .link-item {
  margin-top: 6px;
}

.link-item:hover {
  border-color: #7da2ce;
  background: linear-gradient(#e8f2fe, #cfe3fc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.link-item .link-image {
  flex: none;
  width: 88px;
  height: auto;
}

.link-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.link-description {
  margin-top: 2px;
  color: #444;
}

/* Hyperfixations */
.moodboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.moodboard img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.review-head .thumb {
  width: 140px;
  height: 140px;
  object-fit: cover;
  cursor: pointer;
}

.review-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 13px;
}

.review-meta dt {
  color: #6d6d6d;
}

.scorecard {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
}

.score {
  font-size: 13px;
  color: #444;
}

/* Win7 progress bar used as a rating meter */
.meter {
  height: 14px;
  overflow: hidden;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  background: linear-gradient(#f3f3f3, #e2e2e2 50%, #d6d6d6 51%, #e9e9e9);
}

.meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(#cef5c4 0%, #6fd35a 45%, #3fbf2d 50%, #5ad04b 100%);
}

/* Win7 turned progress bars red for errors */
.meter-bad > span {
  background: linear-gradient(#f9c9c0 0%, #e8705a 45%, #d8492b 50%, #e86a4b 100%);
}

/* Off the charts */
.meter-max {
  border-color: #e0a800;
  box-shadow: 0 0 8px rgba(255, 200, 40, 0.8);
}

.meter-max > span {
  background: linear-gradient(#fff3b0 0%, #ffd23f 45%, #f0b400 50%, #ffd84f 100%);
}

/* Mini music player (Windows Media Player-ish control bar) */
.track-player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 8px 12px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  border: 1px solid #0b1424;
  border-radius: 6px;
  background: linear-gradient(#4b5a72, #232c3d 48%, #141a26 52%, #1d2534);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.track-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #0b2a52;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 98%, transparent 100%),
    radial-gradient(circle at 50% 100%, #7fe3ff 0, #2b8fdf 40%, #0b4a9a 80%);
  box-shadow: 0 0 6px rgba(90, 190, 255, 0.6);
}

.track-play:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(120, 210, 255, 0.95);
}

.track-play:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 3px;
}

/* Play triangle → pause bars */
.track-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.track-player.playing .track-icon {
  width: 12px;
  height: 15px;
  margin-left: 0;
  border: 0;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.track-info {
  flex: 1;
  min-width: 0;
}

.track-title {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-artist {
  color: #a9c4e6;
}

.track-bar {
  height: 8px;
  margin: 5px 0 3px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 4px;
  background: #0d121b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.track-bar:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 2px;
}

.track-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(#bfefff, #3aa8f0 50%, #1a7fd0 51%, #5cc2ff);
}

.track-status {
  font-size: 12px;
  color: #c3d3ea;
}

.track-status a {
  color: #8fe0ff;
}

.track-time {
  flex: none;
  font-size: 12px;
  color: #c3d3ea;
}

/* Little equalizer that bounces while playing */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.eq span {
  width: 3px;
  height: 3px;
  background: #6fe0ff;
}

.track-player.playing .eq span {
  animation: eq 0.7s steps(4) infinite alternate;
}

.eq span:nth-child(2) { animation-delay: -0.2s; }
.eq span:nth-child(3) { animation-delay: -0.45s; }
.eq span:nth-child(4) { animation-delay: -0.1s; }

@keyframes eq {
  from { height: 3px; }
  to   { height: 12px; }
}

.fact-list {
  padding-left: 22px;
}

.fact-list li {
  margin-bottom: 8px;
}

.fact-list li::marker {
  color: #003399;
  font-weight: 600;
}

.rating {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.rating-title {
  margin-right: 8px;
  color: #003399;
}

.rating-label {
  margin-left: 8px;
  font-weight: 600;
  color: #c2185b;
}

.fixation-toggle + .fixation-toggle {
  margin-top: 2px;
}

/* Magic Link: floats, wobbles, casts on click (script.js).
   Three nested layers so the animations don't fight over `transform`. */
.magic-buddy {
  position: relative;
  width: 200px;
  margin: 96px auto 0; /* headroom for the speech bubble */
  animation: magicFloat 3.2s ease-in-out infinite;
}

.magic-link {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  animation: magicWobble 2.3s ease-in-out infinite;
}

.magic-link img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto; /* big source image; nearest-neighbor shrink looks noisy */
  filter: drop-shadow(0 0 10px rgba(255, 240, 150, 0.7)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
  transform-origin: 60% 60%;
}

.magic-link:hover img {
  animation: magicWiggle 0.35s ease-in-out infinite;
}

.magic-link:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 4px;
}

.magic-link img.casting {
  animation: magicCast 0.8s cubic-bezier(.5, -0.4, .4, 1.4);
}

@keyframes magicFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

@keyframes magicWobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

@keyframes magicWiggle {
  0%, 100% { transform: rotate(0) scale(1.04); }
  25%      { transform: rotate(-6deg) scale(1.04); }
  75%      { transform: rotate(6deg) scale(1.04); }
}

@keyframes magicCast {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(0.8, 1.2) rotate(-20deg); }
  70%  { transform: scale(1.2) rotate(360deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* Pixel "+" sparkles that burst from his hands */
.sparkle {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  pointer-events: none;
  background: var(--c);
  box-shadow: 4px 0 var(--c), -4px 0 var(--c), 0 4px var(--c), 0 -4px var(--c);
  animation: sparkleFly 0.9s ease-out forwards;
}

@keyframes sparkleFly {
  from { transform: translate(0, 0) scale(1.5); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
}

/* Shared speech bubble (Magic Link, Nokia, caterpillar) */
.speech-bubble {
  position: absolute;
  z-index: 3;
  bottom: 100%;
  left: 50%;
  width: max-content;
  max-width: 220px;
  margin-bottom: 4px;
  padding: 6px 10px;
  transform: translateX(-50%);
  text-align: center;
  color: #000;
  background: linear-gradient(#fff, #e4ecf7);
  border: 1px solid #767676;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #767676;
}

/* ---------- Desk toys (effects in script.js) ---------- */

.nokia-btn,
.tank,
.sun,
.wormy {
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
}

.nokia-btn:focus-visible,
.tank:focus-visible,
.sun:focus-visible,
.wormy:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 4px;
}

/* Nokia: sways, buzzes + lights up on click */
.nokia {
  position: relative;
  width: 240px;
  margin: 80px auto 0; /* headroom for the text bubble */
}

.nokia-btn {
  position: relative;
  display: block;
  width: 100%;
  animation: nokiaSway 4s ease-in-out infinite;
}

.nokia-btn img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}

.nokia-btn.buzzing {
  animation: nokiaBuzz 0.08s linear 14;
}

/* Glowing LCD laid over the photo's screen (tilted to match) */
.nokia-screen {
  position: absolute;
  left: 57.6%;
  top: 30%;
  width: 23%;
  height: 19.5%;
  display: grid;
  place-items: center;
  font-family: var(--font-pixel-display);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
  color: #1d2b0e;
  background: #a8cf5a;
  box-shadow: 0 0 12px 3px rgba(170, 230, 90, 0.8), inset 0 0 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%) rotate(16deg) skewX(8deg);
  opacity: 0;
  transition: opacity 0.2s;
}

.nokia-btn.lit .nokia-screen {
  opacity: 1;
}

@keyframes nokiaSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg) translateY(-6px); }
}

@keyframes nokiaBuzz {
  0%   { transform: translate(-3px, 1px) rotate(-2deg); }
  50%  { transform: translate(3px, -1px) rotate(2deg); }
  100% { transform: translate(-3px, 1px) rotate(-2deg); }
}

/* Aquarium: the fish swims laps; clicking blows bubbles */
.tank {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background: linear-gradient(#8adaff, #2a8fd8 60%, #13579e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 12px 20px rgba(255, 255, 255, 0.25);
}

.tank-sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, #e8c77a 0 4px, #d4ab55 4px 8px);
  border-top: 2px solid #b88d3c;
}

/* Layers: lap (left), happy flip (click), bob (img). The fish never turns
   around (that would mirror "I LOVE FISH"), so it swims forward to the left
   and then drifts back to the right, tail first. */
.fish-swim {
  position: absolute;
  top: 38px;
  left: calc(100% - 105px);
  z-index: 1;
  animation: fishSwim 12s ease-in-out infinite;
}

.fish-flip {
  display: block;
}

.fish-happy {
  display: block;
}

.fish-happy.happy {
  animation: fishHappy 0.7s ease-in-out;
}

.fish-happy img {
  display: block;
  animation: fishBob 1.4s ease-in-out infinite;
}

@keyframes fishSwim {
  0%, 5%    { left: calc(100% - 105px); }
  35%, 45%  { left: 6px; }
  100%      { left: calc(100% - 105px); }
}

@keyframes fishBob {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}

@keyframes fishHappy {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(-180deg) scale(1.2); }
  100% { transform: rotate(-360deg) scale(1); }
}

.bubble,
.ambient-bubble {
  position: absolute;
  z-index: 2;
  width: var(--size, 8px);
  height: var(--size, 8px);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0 15%, rgba(255, 255, 255, 0.15) 30%);
}

.bubble {
  animation: bubbleRise 1.8s ease-in forwards;
}

.ambient-bubble {
  bottom: 14px;
  opacity: 0;
  animation: bubbleRise 4s ease-in infinite;
}

.ambient-bubble:nth-child(1) { left: 12%; --size: 6px; }
.ambient-bubble:nth-child(2) { left: 18%; --size: 9px; animation-delay: 1.3s; }
.ambient-bubble:nth-child(3) { left: 80%; --size: 5px; animation-delay: 2.6s; }

@keyframes bubbleRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(5px, -60px); }
  100% { transform: translate(-3px, -130px); opacity: 0; }
}

/* Sun: spins slowly, pulses on hover, sunburst on click, naps in dark mode */
.sun-wrap {
  position: relative;
  width: 190px;
  margin: 20px auto 0;
}

.sun {
  position: relative;
  display: block;
  width: 190px;
  height: 196px;
  animation: sunSpin 40s linear infinite;
}

/* The source PNG is mostly empty canvas: oversize it and offset so the
   drawing fills the button and sits on its rotation center */
.sun img {
  position: absolute;
  left: -109px;
  top: -87px;
  width: 429px;
  max-width: none;
  height: auto;
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  transition: filter 0.4s;
}

.sun:hover img {
  animation: sunPulse 0.9s ease-in-out infinite;
}

.sun img.shine {
  animation: sunShine 0.7s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes sunSpin {
  to { transform: rotate(360deg); }
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

@keyframes sunShine {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.sun-flash {
  position: fixed;
  inset: 0;
  z-index: 99999; /* under the taskbar */
  pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y),
    rgba(255, 236, 140, 0.75), rgba(255, 200, 90, 0.3) 30%, transparent 65%);
  animation: sunFlash 1.3s ease-out forwards;
}

@keyframes sunFlash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

body.dark-mode .sun img {
  filter: grayscale(0.7) brightness(0.55) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

body.dark-mode .sun-wrap::after {
  content: "z Z z";
  position: absolute;
  top: 0;
  right: -6px;
  font-family: var(--font-pixel-display);
  font-size: 8px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  animation: sunSnore 2.4s ease-in-out infinite;
}

@keyframes sunSnore {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-8px); opacity: 1; }
}

/* Caterpillar: inches back and forth, eats when clicked, grows */
.wormy-track {
  position: relative;
  height: 96px;
  margin-top: 90px; /* headroom for the bubble */
}

.wormy-walk {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 130px;
  animation: wormyCrawl 16s linear infinite;
}

.wormy-walk.paused {
  animation-play-state: paused;
}

.wormy {
  display: block;
  width: 130px;
  height: 88px;
}

.wormy.chomp {
  animation: wormyChomp 0.3s ease-in-out;
}

.wormy-flip {
  display: block;
  width: 100%;
  height: 100%;
  animation: wormyTurn 16s step-end infinite;
}

.wormy-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  --grow: 1;
  transform-origin: 50% 100%;
  animation: wormyInch 0.9s ease-in-out infinite;
}

.wormy-body img {
  position: absolute;
  left: -17px;
  top: -40px;
  width: 167px;
  max-width: none;
  height: auto;
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  transition: filter 0.6s;
}

.wormy-body.cocoon img {
  filter: sepia(1) saturate(0.5) brightness(0.75) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
}

.wormy-body.cocoon {
  animation: wormyWiggle 0.25s ease-in-out infinite;
}

@keyframes wormyCrawl {
  0%, 3%    { left: 0; }
  47%, 53%  { left: calc(100% - 130px); }
  97%, 100% { left: 0; }
}

/* The art faces right, so mirror it for the walk back */
@keyframes wormyTurn {
  0%  { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

@keyframes wormyInch {
  0%, 100% { transform: scale(var(--grow)); }
  50%      { transform: scale(calc(var(--grow) * 1.08), calc(var(--grow) * 0.9)); }
}

@keyframes wormyChomp {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12, 0.88); }
}

@keyframes wormyWiggle {
  0%, 100% { transform: scale(var(--grow)) rotate(-3deg); }
  50%      { transform: scale(var(--grow)) rotate(3deg); }
}

/* Movable toys (script.js): drag them anywhere on wide screens */
.toy-movable {
  position: relative; /* so a dragged toy can stack above windows */
}

@media (min-width: 961px) {
  .toy-movable {
    touch-action: none;
  }

  .toy-movable,
  .toy-movable button {
    cursor: url(/assets/cursors/wii-grab.cur), grab;
  }
}

.toy-dragging {
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35));
}

/* ---------- Window effects (script.js) ---------- */

/* Windows pop open one after another on page load */
.window.opening {
  animation: winOpen 0.35s cubic-bezier(.2, .9, .3, 1.15) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.window.closing {
  animation: winClose 0.2s ease-in forwards;
}

@keyframes winOpen {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
}

@keyframes winClose {
  to { opacity: 0; transform: scale(0.92); }
}

/* Aero Peek: windows turn into glass outlines */
.desktop > * > *,
.window.dialog {
  transition: opacity 0.25s;
}

body.peek .desktop > * > *,
body.peek .window.dialog {
  opacity: 0.08;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -2px;
}

/* Dark mode switch wash */
.mode-fade {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  animation: modeFade 0.6s ease-out forwards;
}

.mode-fade.to-dark { background: #000; }
.mode-fade.to-light { background: #fff; }

@keyframes modeFade {
  from { opacity: 0.6; }
  to   { opacity: 0; }
}

/* Reveal / fixation content slides open */
.reveal-content:not(.hidden),
.fixation-content:not(.hidden) {
  animation: slideOpen 0.22s ease-out;
}

@keyframes slideOpen {
  from { opacity: 0; transform: translateY(-6px); }
}

.fixation-header::before {
  display: inline-block;
  transition: transform 0.2s;
}

.fixation-header.open::before {
  transform: rotate(90deg);
}

/* ---------- Page effects ---------- */

/* Typewriter caret */
.typing::after {
  content: "_";
  animation: blink 0.8s steps(2, start) infinite;
}

/* Tags + moodboard tiles bounce when clicked */
.tag {
  cursor: pointer;
  transition: transform 0.15s;
}

.tag:hover {
  transform: translateY(-2px);
}

.boing {
  animation: boing 0.45s cubic-bezier(.3, 1.8, .5, 1);
}

@keyframes boing {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25, 0.8); }
  70%  { transform: scale(0.9, 1.1); }
  100% { transform: scale(1); }
}

.moodboard img {
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}

.moodboard img:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.35) rotate(-4deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* Rating stars do a wave on hover */
.rating:hover .ico-star {
  animation: starWave 0.6s ease-in-out;
}

.rating .ico-star:nth-child(2) { animation-delay: 0.06s; }
.rating .ico-star:nth-child(3) { animation-delay: 0.12s; }
.rating .ico-star:nth-child(4) { animation-delay: 0.18s; }
.rating .ico-star:nth-child(5) { animation-delay: 0.24s; }

@keyframes starWave {
  50% { transform: translateY(-6px) scale(1.2); }
}

/* Win7-style row highlight on list items (About) */
.sidebar-left .w7-list li {
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.sidebar-left .w7-list li:hover {
  border-color: #b8d6fb;
  background: linear-gradient(#fafbfd, #ebf3fd);
}

/* Link buttons wiggle on hover (Links) */
.link-item:hover .link-image {
  animation: wiggle 0.4s ease-in-out;
}

@keyframes wiggle {
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

/* NEW badges glow */
.new-badge {
  animation: badgeGlow 1.6s ease-in-out infinite;
}

@keyframes badgeGlow {
  50% { box-shadow: 0 0 6px 1px rgba(255, 140, 60, 0.9); }
}

/* Blog posts fade in on scroll (only once JS has set things up) */
body.js-reveal .post {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s, transform 0.5s;
}

body.js-reveal .post.seen {
  opacity: 1;
  transform: none;
}

/* Reading progress in the blog status bar */
.mini-progress {
  display: inline-block;
  width: 60px;
  height: 9px;
  vertical-align: -1px;
  overflow: hidden;
  border: 1px solid #b2b2b2;
  border-radius: 2px;
  background: linear-gradient(#f3f3f3, #e2e2e2);
}

.mini-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(#cef5c4 0%, #6fd35a 45%, #3fbf2d 50%, #5ad04b 100%);
}

/* ---------- Dialogs (script.js createDialog) ---------- */

.window.dialog {
  position: fixed;
  max-width: calc(100vw - 16px);
}

.dialog .window-body {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px;
  background: #f0f0f0;
  border: 1px solid #6d88a9;
  border-top: 1px solid #dfdfdf;
}

.dialog-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dialog-message .ico {
  width: 32px;
  height: 32px;
}

.dialog-note {
  font-size: 12px;
  color: #666;
}

.progress-stuck {
  margin: 8px 0 4px;
  max-width: none;
}

.progress-stuck::before {
  right: 88%;
}

.sys-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}

.sys-info dt {
  color: #555;
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.check input,
.wallpaper-option input {
  accent-color: #2a78c2;
}

.wallpaper-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.wallpaper-option {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.wallpaper-option:hover,
.wallpaper-option:has(input:checked) {
  border-color: #7da2ce;
  background: linear-gradient(#e8f2fe, #cfe3fc);
}

.wallpaper-option input {
  position: absolute;
  opacity: 0;
}

.wallpaper-option:has(input:focus-visible) {
  outline: 1px dotted #000;
}

.swatch {
  width: 64px;
  height: 40px;
  border: 1px solid #555;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.swatch-harmony { background-image: var(--wp-harmony); }
.swatch-aurora  { background-image: var(--wp-aurora); }
.swatch-sakura  { background-image: var(--wp-sakura); }
.swatch-sunset  { background-image: var(--wp-sunset); }

/* ---------- Start menu (start-menu.js) ---------- */

.start-menu {
  position: fixed;
  left: 4px;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  z-index: 100001;
  display: flex;
  gap: 6px;
  width: 420px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 56px);
  padding: 8px 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 8px 8px 0 0;
  background-color: rgba(20, 40, 70, 0.72);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.15)),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 36%, transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 18px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.start-menu.opening {
  animation: smOpen 0.18s ease-out;
}

@keyframes smOpen {
  from { opacity: 0; transform: translateY(10px); }
}

.sm-left {
  display: flex;
  flex-direction: column;
  flex: 1 1 250px;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #6d88a9;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.sm-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  list-style: none;
}

.sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  font: inherit;
  text-align: left;
  color: #000;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.sm-item:hover,
.sm-item:focus-visible {
  text-decoration: none;
  outline: none;
  border-color: #7da2ce;
  background: linear-gradient(#e8f2fe, #cfe3fc);
}

.sm-item[aria-current="page"] .sm-label {
  font-weight: 600;
}

.sm-text {
  display: grid;
  min-width: 0;
}

.sm-label {
  font-size: 14px;
}

.sm-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #6d6d6d;
}

.sm-soon {
  margin-left: auto;
  padding: 0 4px;
  font-family: var(--font-pixel-display);
  font-size: 7px;
  line-height: 13px;
  color: #6d4fc4;
  border: 1px solid #c9b8f5;
  border-radius: 2px;
}

.sm-heading {
  margin: 8px 6px 4px;
  padding-top: 6px;
  font-size: 12px;
  color: #1e3287;
  border-top: 1px solid #dfe6ef;
}

.sm-empty {
  padding: 10px;
  color: #6d6d6d;
}

.sm-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px;
  padding: 3px 6px;
  border: 1px solid #a5b6cc;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.sm-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-style: italic;
  border: 0;
  outline: none;
  background: none;
}

.sm-right {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 140px;
  padding-top: 40px;
}

.sm-user {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  object-fit: cover;
  image-rendering: auto;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.sm-places {
  flex: 1;
  list-style: none;
}

.sm-place {
  display: block;
  width: 100%;
  padding: 5px 8px;
  font: inherit;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.sm-place.strong {
  font-weight: 600;
}

.sm-place:hover,
.sm-place:focus-visible {
  text-decoration: none;
  outline: none;
  border-color: rgba(0, 0, 0, 0.5);
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 51%, rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.sm-sep {
  height: 1px;
  margin: 4px 8px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.sm-power {
  position: relative;
  display: flex;
  margin: 8px 4px 2px;
}

.sm-shutdown,
.sm-power-more {
  min-height: 24px;
  font: inherit;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.15));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.sm-shutdown {
  flex: 1;
  border-radius: 3px 0 0 3px;
}

.sm-power-more {
  width: 24px;
  border-left: 0;
  border-radius: 0 3px 3px 0;
}

.sm-shutdown:hover,
.sm-power-more:hover {
  background: linear-gradient(rgba(255, 180, 160, 0.6), rgba(230, 90, 60, 0.5) 50%, rgba(200, 50, 20, 0.5) 51%, rgba(240, 120, 80, 0.6));
}

.sm-power-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  padding: 2px;
  background: #f0f0f0;
  border: 1px solid #979797;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.sm-power-menu button {
  display: block;
  width: 100%;
  padding: 4px 24px 4px 12px;
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.sm-power-menu button:hover,
.sm-power-menu button:focus-visible {
  outline: none;
  border-color: #aecff7;
  background: linear-gradient(#f2f8fe, #e1eefc);
}

/* ---------- Shut down / boot screens (start-menu.js) ---------- */

.shutdown {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 16px;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

.shutdown.phase-wait {
  background: radial-gradient(ellipse at 50% 40%, #2a6fb8, #0b3a73 70%, #061f40);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.spinner {
  width: 28px;
  height: 28px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #8fe0ff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.shutdown.phase-safe,
.shutdown.phase-boot {
  background: #000;
}

.safe-text {
  font-family: var(--font-pixel-display);
  font-size: 16px;
  line-height: 1.8;
  color: #ff9a1f;
}

.power-on {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: #1b1b1b;
  border: 1px solid #555;
  border-radius: 4px;
}

.power-on:hover,
.power-on:focus-visible {
  outline: none;
  border-color: #8fe0ff;
  box-shadow: 0 0 12px rgba(143, 224, 255, 0.6);
}

.boot-orb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  font-family: var(--font-pixel-display);
  font-size: 26px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1) 98%, transparent 100%),
    radial-gradient(circle at 50% 100%, #7fe3ff 0, #2b8fdf 35%, #0b4a9a 70%, #04254f 100%);
  animation: bootGlow 1.4s ease-in-out infinite alternate;
}

@keyframes bootGlow {
  from { box-shadow: 0 0 10px rgba(90, 190, 255, 0.4); }
  to   { box-shadow: 0 0 40px rgba(120, 220, 255, 1); }
}

.shutdown .progress {
  width: 200px;
  margin: 0;
}

.shutdown.fade-out {
  animation: winClose 0.6s ease-in forwards;
}

/* ---------- Desktop icons (start-menu.js) ---------- */

/* A row above the windows; on wide screens a column down the left
   edge, like a real desktop. On phones they go below the main window. */
.desktop:has(.desktop-icons) {
  grid-template-areas: "icons icons icons" "left main right";
}

.desktop-icons {
  grid-area: icons;
  min-width: 0;
}

.desktop-icons ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
}

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 78px;
  padding: 5px 6px 4px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.7);
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.desk-icon:hover {
  text-decoration: none;
  background: rgba(170, 215, 255, 0.18);
  border-color: rgba(200, 230, 255, 0.45);
}

.desk-icon.selected {
  background: rgba(90, 160, 240, 0.4);
  border-color: rgba(185, 225, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.desk-icon:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -3px;
}

/* 12px pixel art at 3x stays crisp */
.desk-ico {
  position: relative;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

/* Shortcut arrow badge, because these are all shortcuts */
.desk-ico::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 1px solid #555;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 9 9%27%3E%3Cpath d=%27M2 7L7 2M3.5 2H7V5.5%27 stroke=%27%231e5aa8%27 stroke-width=%271.8%27 fill=%27none%27/%3E%3C/svg%3E") center / 9px no-repeat;
}

.desk-label {
  white-space: nowrap;
}

.desk-icon.soon .desk-ico {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) grayscale(0.4);
  opacity: 0.8;
}

@media (min-width: 1280px) {
  .desktop:has(.desktop-icons) {
    max-width: 1312px;
    grid-template-columns: 100px 230px minmax(0, 1fr) var(--right-col, 270px);
    grid-template-areas: "icons left main right";
  }

  .desktop-icons ul {
    flex-direction: column;
  }

  .desk-icon {
    width: 96px;
  }
}

@media (max-width: 960px) {
  .desktop:has(.desktop-icons) {
    grid-template-areas: "main" "icons" "left" "right";
  }

  .desktop-icons ul {
    justify-content: center;
  }
}

/* ---------- Utilities ---------- */

/* `hidden` must win over component display rules (e.g. .start-menu's flex) */
[hidden] {
  display: none !important;
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Dark mode: "night" theme ---------- */

body.dark-mode {
  background-color: #050b18;
  background-image:
    radial-gradient(ellipse at 70% 20%, rgba(80, 60, 180, 0.35), transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(20, 110, 160, 0.3), transparent 55%),
    linear-gradient(160deg, #050b18 0%, #0c1f3d 50%, #04070f 100%);
}

body.dark-mode .window {
  background-color: rgba(25, 30, 45, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 18px rgba(0, 0, 0, 0.6);
}

body.dark-mode .title-bar-text {
  color: #fff;
  text-shadow: 0 0 8px #000, 0 0 6px #000;
}

body.dark-mode .window-body {
  color: #e3e8f2;
  background: #1d2230;
  border-color: #0d1018;
}

body.dark-mode .window-body h1,
body.dark-mode .window-body h2,
body.dark-mode .window-body h3 {
  color: #8ec5ff;
}

body.dark-mode a {
  color: #8cc8ff;
}

body.dark-mode .address-bar {
  color: #dde3ee;
  background: #12151d;
  border-color: #0d1018;
}

body.dark-mode .status-bar {
  color: #c9d3e6;
  background: linear-gradient(#2a3040, #222736);
  border-color: #0d1018;
}

body.dark-mode .status-bar-field {
  border-color: #3c4559;
}

body.dark-mode .w7-btn {
  color: #eee;
  border-color: #15181f;
  background: linear-gradient(#4a5163 0%, #3b4152 49%, #323747 50%, #2b303e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .w7-btn:hover {
  border-color: #3c7fb1;
  background: linear-gradient(#4d6a8c 0%, #3f5a7a 49%, #33506f 50%, #2a4663 100%);
}

body.dark-mode .reveal-toggle,
body.dark-mode .fixation-header,
body.dark-mode .fav-list a {
  color: #cfe3ff;
}

body.dark-mode .reveal-toggle:hover,
body.dark-mode .fixation-header:hover,
body.dark-mode .fav-list a:hover,
body.dark-mode .link-item:hover {
  border-color: rgba(140, 190, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.dark-mode .reveal-content,
body.dark-mode .fixation-content {
  background: #252b3b;
  border-color: #3c4559;
}

body.dark-mode .groupbox {
  border-color: #3c4559;
  box-shadow: none;
}

body.dark-mode .groupbox legend {
  color: #8ec5ff;
}

body.dark-mode .tag {
  color: #cfe3ff;
  border-color: #3c4559;
  background: linear-gradient(#2a3040, #222736);
}

body.dark-mode .post {
  border-color: #3c4559;
}

body.dark-mode .post-date,
body.dark-mode .blog-desc,
body.dark-mode .link-description {
  color: #a9b4c8;
}

body.dark-mode .post-footnote {
  color: #c4b0ff;
}

body.dark-mode .rating-label {
  color: #ff8fc0;
}

body.dark-mode .sm-place {
  color: #fff;
}

body.dark-mode .review-meta dt,
body.dark-mode .score {
  color: #a9b4c8;
}

body.dark-mode .rating-title,
body.dark-mode .fact-list li::marker {
  color: #8ec5ff;
}

body.dark-mode .sm-left,
body.dark-mode .sm-search {
  background: #1d2230;
  border-color: #0d1018;
}

body.dark-mode .sm-item,
body.dark-mode .sm-search input {
  color: #e3e8f2;
}

body.dark-mode .sm-item:hover,
body.dark-mode .sm-item:focus-visible,
body.dark-mode .sidebar-left .w7-list li:hover,
body.dark-mode .wallpaper-option:hover,
body.dark-mode .wallpaper-option:has(input:checked) {
  border-color: rgba(140, 190, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sm-desc,
body.dark-mode .sm-empty,
body.dark-mode .dialog-note,
body.dark-mode .sys-info dt {
  color: #a9b4c8;
}

body.dark-mode .sm-heading {
  color: #8ec5ff;
  border-color: #3c4559;
}

body.dark-mode .dialog-buttons,
body.dark-mode .sm-power-menu {
  background: #232838;
  border-color: #0d1018;
}

body.dark-mode .sm-power-menu button {
  color: #e3e8f2;
}

body.dark-mode .sm-power-menu button:hover {
  border-color: rgba(140, 190, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .infobar {
  color: #f3ecc4;
  background: #3a3520;
  border-color: #6b5f2a;
}

body.dark-mode .thumb {
  background: #2a3040;
  border-color: #3c4559;
}

body.dark-mode .site-footer {
  color: #a9b4c8;
  border-color: #3c4559;
}

body.dark-mode .signoff {
  color: #c4b0ff;
}

body.dark-mode .wmp-window .window-body {
  background: linear-gradient(#2a3040, #222736 48%, #1b1f2b 52%, #222736);
}

body.dark-mode .wmp-screen {
  color: #d6ecff;
  border-color: #0d1018;
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%),
    linear-gradient(#123657, #0a1d33);
}

body.dark-mode .wmp-marquee {
  text-shadow: 0 0 6px rgba(120, 210, 255, 0.7);
}

body.dark-mode .wmp-sub {
  color: #8fd2ff;
}

body.dark-mode .wmp-seek {
  border-color: #0d1018;
  background: linear-gradient(#12151d, #2a3040);
}

body.dark-mode .wmp-stop,
body.dark-mode .wmp-mute,
body.dark-mode .wmp-prev,
body.dark-mode .wmp-next {
  border-color: #15181f;
  background: linear-gradient(#4a5163 0%, #3b4152 49%, #323747 50%, #2b303e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .wmp-stop span,
body.dark-mode .wmp-mute span {
  background: #e3e8f2;
}

body.dark-mode .wmp-mute span::after {
  border-right-color: #e3e8f2;
}

body.dark-mode .wmp-prev span,
body.dark-mode .wmp-next span {
  --ink: #e3e8f2;
}

body.dark-mode .wmp-play {
  box-shadow: 0 0 0 2px #3c4559, 0 0 0 3px #0d1018, 0 0 10px rgba(90, 190, 255, 0.5);
}

body.dark-mode .wmp-vol-slider::-webkit-slider-runnable-track {
  border-color: #0d1018;
  background: linear-gradient(90deg, #3cb3f5 var(--vol, 60%), #12151d var(--vol, 60%));
}

body.dark-mode .wmp-vol-slider::-moz-range-track {
  border-color: #0d1018;
  background: linear-gradient(90deg, #3cb3f5 var(--vol, 60%), #12151d var(--vol, 60%));
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .desktop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "left" "right";
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  /* Icon-only taskbar; labels stay readable to screen readers */
  .task-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .task-item {
    padding: 0 10px;
  }

  .window-body {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .start-menu {
    flex-direction: column;
    left: 4px;
    right: 4px;
    width: auto;
    overflow-y: auto;
  }

  .sm-left {
    flex: none;
  }

  .sm-list {
    overflow: visible;
  }

  .sm-right {
    flex: none;
    padding-top: 0;
  }

  .sm-user {
    display: none;
  }

  .sm-places {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sm-sep {
    display: none;
  }
}

@media (max-width: 420px) {
  .tray-clock .clock-date {
    display: none;
  }

  .start-orb {
    margin-right: 4px;
  }

  .task-item {
    margin: 0;
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}