:root {
  color-scheme: light;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  color: #000;
  background: #3a6ea5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button { font: inherit; }

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

.xp-desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  background-color: #3a77ba;
  background-image: url("assets/desktop/bliss.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.desktop-shortcut {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 18px;
  width: 78px;
  min-height: 74px;
  padding: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  cursor: default;
}

.desktop-shortcut img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  image-rendering: auto;
}

.desktop-shortcut:hover,
.desktop-shortcut:focus-visible {
  border-color: rgba(180, 205, 255, .9);
  outline: 0;
  background: rgba(18, 75, 180, .38);
}

.desktop-shortcut:focus-visible span {
  background: #0b61d8;
  outline: 1px dotted #fff;
}

.xp-window {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: calc(50% - 15px);
  width: min(806px, calc(100vw - 28px), calc((100vh - 72px) * 1.343333));
  transform: translate(-50%, -50%);
  filter: drop-shadow(5px 8px 9px rgba(0, 0, 0, .48));
}

.xp-window.hidden-window { display: none; }

.xp-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 3px 3px 3px 5px;
  border: 1px solid #003cbe;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg,
      #62a7ff 0,
      #0b61e9 10%,
      #0053dc 48%,
      #0046c7 82%,
      #2475ed 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .7),
    inset -1px 0 0 #001e93;
  cursor: default;
}

.xp-window-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 1px 1px 1px #0b2e85;
  white-space: nowrap;
}

.xp-window-title img {
  width: 18px;
  height: 18px;
}

.xp-window-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.xp-caption-button {
  position: relative;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 21px 168px;
  box-shadow: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 17px;
  text-shadow: 1px 1px #163472;
}

.xp-caption-button.minimize {
  padding-bottom: 7px;
  background-image: url("assets/desktop/luna/window-minimize.png");
  font-size: 16px;
}

.xp-caption-button.maximize {
  background-image: url("assets/desktop/luna/window-maximize.png");
  font-size: 18px;
  line-height: 16px;
}

.xp-caption-button.close {
  margin-left: 1px;
  background-image: url("assets/desktop/luna/window-close.png");
  font-size: 22px;
  line-height: 16px;
  text-shadow: 1px 1px #761206;
}

.xp-caption-button:hover { background-position: 0 -21px; }
.xp-caption-button:active { background-position: 0 -42px; }
.xp-caption-button:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }

.xp-client {
  width: 100%;
  padding: 0 3px 3px;
  border: 1px solid #003cbe;
  border-top: 0;
  background: #0053dc;
  box-shadow: inset 1px 0 rgba(93, 165, 255, .9), inset -1px 0 #001e93;
}

.game-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

canvas:focus-visible { outline: 1px dotted #fff; outline-offset: -2px; }
canvas[data-screen="menu"],
canvas[data-screen="characterSelect"] { cursor: pointer; }

canvas.native-cursor {
  cursor: url("assets/original/cursors/pointer.png") 22 24, crosshair;
}

canvas.native-cursor[data-screen="menu"],
canvas.native-cursor[data-screen="levelSelect"],
canvas.native-cursor[data-screen="characterSelect"],
canvas.native-cursor[data-screen="adventure"],
canvas.native-cursor[data-screen="options"],
canvas.native-cursor[data-screen="help"],
canvas.native-cursor[data-screen="replays"],
canvas.native-cursor[data-screen="credits"] {
  cursor: url("assets/original/cursors/hand.png") 28 24, pointer;
}

.loading-card,
.help-card {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(82%, 440px);
  border: 2px solid #72d5ff;
  border-radius: 15px;
  background: rgba(7, 22, 47, .95);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68), inset 0 0 24px rgba(53, 139, 255, .18);
  color: #edf5ff;
}

.loading-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 25px;
}

.loading-orb {
  width: 18px;
  height: 18px;
  border: 3px solid #a6f5ff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(1turn); } }

.help-card { padding: 24px 26px 22px; user-select: text; }
.help-card h2 { margin: 0 0 8px; font-family: Georgia, serif; font-style: italic; }
.help-card p { color: #c7d7f0; line-height: 1.55; }
.help-card dl { display: grid; gap: 8px; }
.help-card dl div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.help-card dt { color: #ffd96b; font-weight: 800; }
.help-card dd { margin: 0; color: #cfddf3; }
.close-help { position: absolute; right: 12px; top: 9px; border: 0; background: none; color: white; font-size: 28px; cursor: pointer; }
.keys { font-size: 13px; }
kbd { display: inline-block; min-width: 24px; margin: 0 2px; padding: 2px 6px; border: 1px solid #506489; border-bottom-width: 2px; border-radius: 5px; background: #17233e; text-align: center; }

.xp-legacy-controls { display: none; }
.mobile-controls { display: none; }

.xp-window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw;
  height: calc(100vh - 30px);
  transform: none !important;
  filter: none;
}

.xp-window.is-maximized .xp-titlebar { border-radius: 0; }
.xp-window.is-maximized .xp-client {
  display: grid;
  height: calc(100% - 30px);
  place-items: center;
  background: #000;
}
.xp-window.is-maximized .game-frame {
  width: min(calc(100vw - 8px), calc((100vh - 38px) * 4 / 3));
}

.xp-taskbar {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 30px;
  align-items: stretch;
  border-top: 1px solid #0831a1;
  background: linear-gradient(180deg, #3168d5 0, #4b8df3 9%, #245edb 18%, #245edb 78%, #1941a5 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .35);
}

.xp-start-button {
  display: flex;
  width: 102px;
  flex: 0 0 102px;
  align-items: center;
  gap: 5px;
  margin: -1px 7px 0 0;
  padding: 0 13px 1px 8px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #72bb66 0, #2b9a36 12%, #18892b 65%, #11741f 88%, #58a94e 100%);
  box-shadow: inset 0 1px 1px #b8ec9b, inset -2px 0 3px #0f6820, 2px 0 3px rgba(0, 0, 0, .35);
  color: white;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 1px 1px 2px #15510f;
}

.xp-start-button:hover,
.xp-start-button[aria-expanded="true"] { filter: brightness(1.12); }
.xp-start-button:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }

.windows-flag {
  display: grid;
  width: 22px;
  height: 19px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  transform: skewY(-5deg);
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35));
}
.windows-flag i:nth-child(1) { background: #f13b22; }
.windows-flag i:nth-child(2) { background: #60b828; }
.windows-flag i:nth-child(3) { background: #207eea; }
.windows-flag i:nth-child(4) { background: #f5c826; }

.xp-quick-launch {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 3px;
  border-right: 1px solid rgba(9, 48, 155, .9);
  color: #fff;
  font-size: 15px;
  text-shadow: 1px 1px #1642a3;
}

.xp-task-button {
  display: flex;
  width: 190px;
  min-width: 120px;
  align-items: center;
  gap: 6px;
  margin: 3px 2px;
  padding: 1px 8px;
  overflow: hidden;
  border: 1px solid #1746a4;
  border-radius: 2px;
  background: linear-gradient(180deg, #5a94ef, #3471d7);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 11px;
  text-align: left;
  text-shadow: 1px 1px #17428f;
  white-space: nowrap;
}
.xp-task-button.active { background: linear-gradient(180deg, #1d52b7, #1747a8); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .38); }
.xp-task-button img { width: 16px; height: 16px; }
.xp-task-button span { overflow: hidden; text-overflow: ellipsis; }
.xp-task-spacer { flex: 1; }

.xp-tray {
  display: flex;
  min-width: 112px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px 0 9px;
  border-left: 1px solid #0b72bc;
  background: linear-gradient(180deg, #19a6e9, #0d8bd7 60%, #0780ca);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px #15608c;
  white-space: nowrap;
}
.xp-speaker { font-family: Arial, sans-serif; font-size: 10px; }

.xp-start-menu {
  position: absolute;
  z-index: 90;
  left: 0;
  bottom: 30px;
  width: 382px;
  height: 456px;
  border: 2px solid #1455ba;
  border-radius: 6px 6px 0 0;
  background: #fff;
  box-shadow: 3px -3px 10px rgba(0, 0, 0, .35);
  overflow: hidden;
  font-size: 11px;
}

.xp-start-menu > header {
  display: flex;
  height: 66px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #1f6fd7, #498ddd 80%, #1b65c7);
  color: #fff;
  font-size: 16px;
  text-shadow: 1px 1px #164480;
}

.xp-user-tile {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 5px;
  background: linear-gradient(145deg, #ffcf54, #de7922);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.xp-start-columns { display: grid; height: 344px; grid-template-columns: 1fr 1fr; }
.xp-start-left { position: relative; padding: 10px 8px; background: #fff; }
.xp-start-right { padding: 10px 12px; border-left: 1px solid #95bdee; background: #d3e5fa; color: #164177; }
.xp-start-menu hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, #9d9d9d, transparent); }
.xp-start-left button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 0;
  background: transparent;
  text-align: left;
}
.xp-start-left button:hover { background: #2f71cd; color: #fff; }
.xp-start-left button img { width: 32px; height: 32px; }
.xp-start-left button span { display: grid; }
.xp-start-left button small { color: #777; }
.xp-start-left button:hover small { color: #fff; }
.xp-start-left > p { position: absolute; right: 12px; bottom: 0; left: 12px; display: flex; justify-content: flex-end; gap: 10px; }
.xp-start-right p { margin: 0; padding: 7px 2px; }
.xp-start-menu > footer {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 0 11px;
  background: linear-gradient(180deg, #4287d8, #1e67c5);
  color: #fff;
  text-shadow: 1px 1px #164480;
}

@media (max-width: 640px) {
  .desktop-shortcut { display: none; }
  .xp-window { top: calc(50% - 15px); width: min(calc(100vw - 8px), calc((100vh - 68px) * 4 / 3 + 6px)); }
  .xp-quick-launch { display: none; }
  .xp-task-button { width: 155px; }
  .xp-start-menu { width: min(382px, 100vw); }
}

@media (pointer: coarse), (max-width: 720px), (max-width: 950px) and (max-height: 540px) {
  html,
  body,
  .xp-desktop { height: 100dvh; }

  .xp-desktop {
    background-color: #071225;
    background-position: center;
  }

  .desktop-shortcut,
  .xp-titlebar,
  .xp-taskbar,
  .xp-start-menu { display: none !important; }

  .xp-window,
  .xp-window.is-maximized {
    position: fixed;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    transform: none !important;
    filter: none;
  }

  .xp-client,
  .xp-window.is-maximized .xp-client {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: #071225;
    box-shadow: none;
  }

  .game-frame,
  .xp-window.is-maximized .game-frame {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    height: calc(100vw * 3 / 4);
    min-height: 0;
    max-height: calc(100vw * 3 / 4);
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
  }

  canvas {
    position: absolute;
    inset: 0;
    min-width: 0;
    max-width: 100%;
    cursor: default;
  }

  .mobile-controls {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-evenly;
    gap: clamp(8px, 2dvh, 18px);
    padding: clamp(12px, 2.4dvh, 22px) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-top: 2px solid #2f72dd;
    background:
      radial-gradient(circle at 50% 0, rgba(61, 142, 255, .28), transparent 46%),
      linear-gradient(180deg, #0b2554, #06142e 72%, #030a19);
    color: #fff;
    touch-action: none;
  }

  .mobile-aim-control { display: grid; gap: 8px; }
  .mobile-aim-control label {
    display: flex;
    justify-content: space-between;
    color: #a9dcff;
    font-size: clamp(13px, 3.5vw, 18px);
    font-weight: 800;
    letter-spacing: .14em;
  }
  .mobile-aim-control output { color: #fff36a; font-variant-numeric: tabular-nums; }
  .mobile-aim-control input {
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: #65d8ff;
    touch-action: none;
  }
  .mobile-aim-control input::-webkit-slider-runnable-track {
    height: 12px;
    border: 2px solid #74d9ff;
    border-radius: 9px;
    background: linear-gradient(90deg, #153e93, #38aef5 50%, #153e93);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65);
  }
  .mobile-aim-control input::-webkit-slider-thumb {
    width: 34px;
    height: 34px;
    margin-top: -13px;
    border: 3px solid #fff;
    border-radius: 50%;
    appearance: none;
    background: radial-gradient(circle at 35% 30%, #fff991, #ff9c17 55%, #cf4707 72%);
    box-shadow: 0 2px 8px #000, 0 0 10px #ffdf55;
  }

  .mobile-primary-controls {
    display: grid;
    grid-template-columns: 1fr 1.65fr 1fr;
    gap: clamp(9px, 3vw, 18px);
  }

  .mobile-secondary-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mobile-controls button {
    min-height: 52px;
    border: 2px solid #8be5ff;
    border-radius: 15px;
    background: linear-gradient(#2f8de9, #0d4baa 58%, #082d7c);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), 0 4px 0 #031b52, 0 6px 12px rgba(0, 0, 0, .45);
    color: #fff;
    font-size: clamp(12px, 3.6vw, 18px);
    font-weight: 900;
    letter-spacing: .05em;
    text-shadow: 1px 2px #09245c;
    touch-action: none;
  }
  .mobile-controls button:active,
  .mobile-controls button.is-held {
    transform: translateY(3px);
    background: linear-gradient(#1455b7, #0a327b);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), 0 1px 0 #031b52;
  }
  .mobile-controls .mobile-fire {
    min-height: 68px;
    border-color: #fff07b;
    border-radius: 34px;
    background: radial-gradient(circle at 50% 25%, #ffef56, #ff9d18 45%, #d93c09 72%, #7d1308);
    box-shadow: inset 0 3px 2px rgba(255, 255, 255, .75), 0 5px 0 #71100a, 0 0 22px rgba(255, 125, 20, .5);
    font-size: clamp(20px, 6vw, 32px);
    text-shadow: 1px 2px #8d2406;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 720px) and (orientation: landscape), (max-width: 950px) and (max-height: 540px) and (orientation: landscape) {
  .xp-client,
  .xp-window.is-maximized .xp-client {
    flex-direction: row;
    align-items: center;
  }

  .game-frame,
  .xp-window.is-maximized .game-frame {
    width: min(calc(100dvh * 4 / 3), calc(100vw - 164px));
    max-width: min(calc(100dvh * 4 / 3), calc(100vw - 164px));
    height: min(100dvh, calc((100vw - 164px) * 3 / 4));
    max-height: min(100dvh, calc((100vw - 164px) * 3 / 4));
  }

  .mobile-controls {
    align-self: stretch;
    gap: clamp(5px, 1.2dvh, 10px);
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 8px;
    border-top: 0;
    border-left: 2px solid #2f72dd;
  }

  .mobile-aim-control { gap: 2px; }
  .mobile-aim-control label { font-size: 11px; }
  .mobile-aim-control input { height: 32px; }
  .mobile-primary-controls { gap: 6px; }
  .mobile-secondary-controls { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mobile-controls button { min-height: 38px; border-radius: 10px; font-size: 11px; }
  .mobile-controls .mobile-fire { min-height: 50px; font-size: clamp(16px, 3.2vw, 24px); }
}