/* ==========================================================================
   Boot screens, desktop, icons, taskbar, start menu, wallpapers
   ========================================================================== */

/* ---- Boot ------------------------------------------------------------------ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  overflow: hidden;
}
.bios {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 20px 24px;
  color: #c0c0c0;
  font: 16px/1.35 "Perfect DOS VGA 437", "Lucida Console", Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}
@media (max-width: 600px) { .bios { font-size: 12px; padding: 14px; } }

.clouds,
.wp-clouds,
.desktop.wp-clouds {
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)) 4% 14% / 38% 22% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)) 26% 24% / 26% 15% no-repeat,
    radial-gradient(closest-side, #fff, rgba(255,255,255,0)) 74% 8% / 44% 22% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)) 96% 32% / 30% 18% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)) 50% 52% / 34% 12% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)) 10% 70% / 34% 20% no-repeat,
    radial-gradient(closest-side, #fff, rgba(255,255,255,0)) 34% 92% / 46% 24% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)) 84% 80% / 40% 24% no-repeat,
    linear-gradient(#0c5ad6, #2f7fe8 45%, #86bdf7);
}

.splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5vh;
  padding: 16px 16px 40px;
}
.splash-logo {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 28px);
}
.splash-paw {
  width: clamp(84px, 17vw, 160px);
  height: auto;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .25));
  transform: perspective(500px) rotateY(18deg) skewY(-4deg);
  animation: paw-wave 1.4s ease-in-out infinite alternate;
}
@keyframes paw-wave {
  to { transform: perspective(500px) rotateY(4deg) skewY(2deg) translateY(-4px); }
}
.splash-text {
  display: flex;
  flex-direction: column;
  color: #000;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  line-height: .95;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .35);
}
.splash-text small {
  font-size: clamp(15px, 2.6vw, 26px);
  font-weight: bold;
  letter-spacing: .02em;
}
.splash-text strong {
  font-size: clamp(42px, 9.5vw, 104px);
  font-weight: 900;
  letter-spacing: -.02em;
}
.splash-text sup {
  margin-left: .1em;
  font-size: .45em;
  color: #ff5a1f;
  vertical-align: top;
  position: relative;
  top: .2em;
}
.splash-edition {
  position: relative;
  transform: rotate(-3deg);
  animation: edition-pop .7s cubic-bezier(.2, 1.6, .4, 1) .25s both;
}
.splash-edition img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(520px, 86vw);
  max-height: 28vh;
  image-rendering: auto;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .25));
}
.splash-edition em {
  position: absolute;
  right: 4%;
  bottom: -.35em;
  color: #fff;
  font: italic 900 clamp(15px, 2.6vw, 26px)/1 "Franklin Gothic Medium", "Arial Black", Arial, sans-serif;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 #000080, -1px -1px 0 #000080, 1px -1px 0 #000080, -1px 1px 0 #000080;
}
@keyframes edition-pop {
  from { opacity: 0; transform: rotate(-12deg) scale(.3); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.splash-progress { width: min(340px, 82vw); text-align: center; }
.splash-progress.no-bar .progress { display: none; }
.splash-status {
  margin: 8px 0 0;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000080;
}
.splash-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(14px, 3vh, 26px);
  background: linear-gradient(90deg, #000080, #0050ff, #7fe0ff, #0050ff, #000080) 0 0 / 50% 100% repeat-x;
  animation: splash-bar 1.1s linear infinite;
}
@keyframes splash-bar { to { background-position: 100% 0; } }

.safe-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
  color: #ff8c00;
  font: bold clamp(22px, 4.6vw, 46px)/1.3 Arial, Helvetica, sans-serif;
  text-align: center;
  outline: none;
}
.safe-screen small { margin-top: 2.5em; color: #606060; font-size: 13px; font-weight: normal; }

@media (prefers-reduced-motion: reduce) {
  .splash-paw, .splash-bar, .splash-edition { animation: none; }
}

/* ---- Desktop ------------------------------------------------------------------ */
.desktop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: var(--teal);
}
.icons, .windows { position: absolute; inset: 0; }
.windows { pointer-events: none; }
.windows > .window { pointer-events: auto; }

.desk-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell-w, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 1px;
  border: 0;
  background: none;
  color: #fff;
  touch-action: none;
  outline: none;
}
.desk-icon.dragging { z-index: 5; opacity: .75; }
.desk-icon.snap { transition: left .12s ease-out, top .12s ease-out; }
.desk-icon-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  padding: 0 2px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.desk-icon.selected .desk-icon-label {
  -webkit-line-clamp: 4;
  background: var(--navy);
}
.desk-icon.selected:focus-visible .desk-icon-label { outline: 1px dotted #ffff80; }
.desktop:not(.wp-none) .desk-icon:not(.selected) .desk-icon-label { text-shadow: 1px 1px 0 #000; }

/* Icon with Win95's dithered selection tint */
.ico { position: relative; display: block; width: 32px; height: 32px; flex: none; }
.ico img { display: block; width: 32px; height: 32px; }
.selected > .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(var(--navy) 25%, transparent 0 50%, var(--navy) 0 75%, transparent 0) 0 0 / 2px 2px;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---- Wallpapers ------------------------------------------------------------------ */
.wp-none { background: var(--teal); }
.wp-print { background: #2c2766 url("../assets/wallpaper-print.jpg") center / cover no-repeat; }
.wp-paws {
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23006a6a'%3E%3Cellipse cx='14' cy='22' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='16' rx='3' ry='4.3'/%3E%3Cellipse cx='28' cy='16' rx='3' ry='4.3'/%3E%3Cellipse cx='34' cy='22' rx='3' ry='4'/%3E%3Cpath d='M24 22c-4 0-8 5-8 8.5 0 2.6 2 4 4.5 4 1.5 0 2.3-.8 3.5-.8s2 .8 3.5.8c2.5 0 4.5-1.4 4.5-4 0-3.5-4-8.5-8-8.5z'/%3E%3C/g%3E%3Cg fill='%23006a6a' transform='translate(48 48)'%3E%3Cellipse cx='14' cy='22' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='16' rx='3' ry='4.3'/%3E%3Cellipse cx='28' cy='16' rx='3' ry='4.3'/%3E%3Cellipse cx='34' cy='22' rx='3' ry='4'/%3E%3Cpath d='M24 22c-4 0-8 5-8 8.5 0 2.6 2 4 4.5 4 1.5 0 2.3-.8 3.5-.8s2 .8 3.5.8c2.5 0 4.5-1.4 4.5-4 0-3.5-4-8.5-8-8.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 96px;
}
.wp-setup { background: linear-gradient(#0000d0, #000018); }
.wp-vapor {
  background:
    radial-gradient(circle at 50% 62%, #ffd23f 0 9%, #ff7a59 9% 13%, transparent 13.2%),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, .55) 0 1px, transparent 1px 48px) bottom / 100% 38% no-repeat,
    repeating-linear-gradient(0deg, rgba(0, 255, 255, .55) 0 1px, transparent 1px 28px) bottom / 100% 38% no-repeat,
    linear-gradient(#14002b 0%, #5c1a7d 38%, #ff6ec7 62%, #24003d 62%, #3a0060 100%);
}

/* ---- Dimmed screen behind "Shut Down" --------------------------------------------------- */
body.dimmed .desktop::after,
body.dimmed .taskbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9000;
  background: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / 2px 2px;
}
.window.on-top { z-index: 9001 !important; }

/* ---- Taskbar ------------------------------------------------------------------------ */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 4px 2px calc(2px + env(safe-area-inset-bottom, 0px));
  background: var(--face);
  box-shadow: inset 0 1px var(--light), inset 0 2px var(--hilight);
}
.start-button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 4px;
  border: 0;
  background: var(--face);
  box-shadow: var(--raised);
  font-weight: bold;
}
.start-button img { width: 20px; height: 20px; }
.start-button[aria-expanded="true"] { box-shadow: var(--pressed); padding: 1px 5px 0 5px; }
.start-button:focus { outline: none; }
.start-button:focus-visible span,
.start-button[aria-expanded="true"] span { outline: 1px dotted #000; outline-offset: 1px; }

.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.task-btn {
  flex: 0 1 160px;
  min-width: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 0;
  background: var(--face);
  box-shadow: var(--raised);
  text-align: left;
}
.task-btn img { width: 16px; height: 16px; flex: none; }
.task-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-btn.active { background: var(--dither); box-shadow: var(--pressed); font-weight: bold; }
.task-btn:focus { outline: none; }

.tray {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 3px;
  box-shadow: var(--thin-in);
}
.tray-btn { display: flex; padding: 1px; border: 0; background: none; }
.tray-btn img { width: 16px; height: 16px; }
.clock { padding: 0 3px; border: 0; background: none; white-space: nowrap; }
.clock:focus-visible, .tray-btn:focus-visible { outline: 1px dotted #000; }

@media (pointer: coarse) {
  .start-button img { width: 26px; height: 26px; }
  .start-button { font-size: 15px; }
  .task-btn img { width: 22px; height: 22px; }
  .tray-btn img { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .task-btn { flex-basis: 44px; justify-content: center; padding: 0 4px; }
  .task-btn span { display: none; }
  .tray-volume { display: none !important; }
}

/* ---- Start menu & menus ------------------------------------------------------------------ */
.start-menu {
  position: fixed;
  left: 2px;
  bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px) - 3px);
  z-index: 9500;
  display: flex;
  max-height: calc(100% - var(--taskbar-h));
  padding: 3px;
  background: var(--face);
  box-shadow: var(--frame);
}
.start-menu-side {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 22px;
  padding-bottom: 6px;
  background: var(--shadow);
  overflow: hidden;
}
.start-menu-side span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--face);
  font: 900 18px/1 "Arial Black", Arial, sans-serif;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.start-menu-side b { margin-top: 3px; color: #fff; font-weight: 400; font-family: Arial, sans-serif; }
.start-menu > .menu { overflow-y: auto; }

.menu { list-style: none; margin: 0; padding: 0; min-width: 160px; }
.menu-popup {
  position: fixed;
  z-index: 9600;
  overflow-y: auto;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--frame);
}
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 22px;
  padding: 0 22px 0 4px;
  border: 0;
  background: none;
  color: #000;
  text-align: left;
  white-space: nowrap;
}
.menu-item img, .menu-noicon { flex: none; width: 16px; height: 16px; }
.menu-item:hover:not(:disabled),
.menu-item:focus-visible,
.menu-item.open {
  outline: none;
  background: var(--navy);
  color: #fff;
}
.menu-item:focus { outline: none; }
.menu-item:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilight); }
.menu-item.has-sub::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: currentColor;
  border-right: 0;
}
.menu-large { min-width: 170px; }
.menu-large .menu-item { height: 38px; gap: 10px; padding-left: 6px; }
.menu-large .menu-item img { width: 32px; height: 32px; }
.menu-sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilight); }

@media (pointer: coarse) {
  .menu-item { height: 36px; font-size: 15px; }
  .menu-item img { width: 20px; height: 20px; }
  .menu-large .menu-item { height: 44px; }
}
@media (max-height: 560px) {
  .menu-large .menu-item { height: 28px; }
  .menu-large .menu-item img { width: 20px; height: 20px; }
  .start-menu-side span { font-size: 14px; }
}

/* ---- Desktop assistant -------------------------------------------------------------- */
/* Sits on the desktop: above the icons, always behind every window (windows start at z-index 10) */
.assistant {
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 8px;
  width: 120px;
  pointer-events: none;
}
.assistant-char {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  touch-action: none;
  outline: none;
  animation: assistant-idle 3.2s ease-in-out infinite;
}
.assistant-char img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .3));
}
.assistant-char:focus-visible img { outline: 1px dotted #fff; }
.assistant-char.hop { animation: assistant-hop .55s ease-out, assistant-idle 3.2s ease-in-out .55s infinite; }
.assistant.dragging .assistant-char { animation: none; }
@keyframes assistant-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes assistant-hop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-20px) rotate(5deg); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* Office-97-style balloon */
.assistant-bubble {
  position: absolute;
  right: 30px;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #ffffe1;
  color: #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  pointer-events: auto;
  animation: bubble-in .18s ease-out;
}
.assistant-bubble::before,
.assistant-bubble::after {
  content: "";
  position: absolute;
  right: 34px;
  border-style: solid;
  border-color: transparent;
}
.assistant-bubble::before { bottom: -15px; border-width: 15px 8px 0; border-top-color: #000; }
.assistant-bubble::after { bottom: -13px; right: 35px; border-width: 14px 7px 0; border-top-color: #ffffe1; }
.bubble-below .assistant-bubble { bottom: auto; top: calc(100% + 14px); }
.bubble-below .assistant-bubble::before { bottom: auto; top: -15px; border-width: 0 8px 15px; border-bottom-color: #000; }
.bubble-below .assistant-bubble::after { bottom: auto; top: -13px; border-width: 0 7px 14px; border-bottom-color: #ffffe1; }
.bubble-right .assistant-bubble { right: auto; left: 30px; }
.bubble-right .assistant-bubble::before { right: auto; left: 34px; }
.bubble-right .assistant-bubble::after { right: auto; left: 35px; }

.bubble-text { margin: 0 16px 0 0; line-height: 1.45; }
.bubble-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2v1H0zM6 0h2v1H6zM1 1h2v1H1zM5 1h2v1H5zM2 2h4v1H2zM3 3h2v1H3zM2 4h4v1H2zM1 5h2v1H1zM5 5h2v1H5zM0 6h2v1H0zM6 6h2v1H6z'/%3E%3C/svg%3E") no-repeat center;
}
.bubble-close:hover, .bubble-close:focus-visible { opacity: 1; outline: none; }
.bubble-actions { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.bubble-actions:empty { display: none; }
.bubble-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #000;
  text-align: left;
}
.bubble-option::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9cc2ff, #0030ff 55%, #000080);
}
.bubble-option:hover, .bubble-option:focus-visible { color: #0000ff; text-decoration: underline; outline: none; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (pointer: coarse) { .bubble-option { padding: 6px 0; } }
/* Small screens: smaller */
@media (max-width: 640px), (max-height: 460px) { .assistant { width: 84px; } }
/* On phones, maximized windows take over - get out of the way */
@media (max-width: 640px), (max-height: 460px) {
  body:has(.window.maximized:not([hidden])) .assistant { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-char, .assistant-char.hop, .assistant-bubble { animation: none; }
}