:root {
  --taskbar-h: 30px;
  --luna-blue: #245edb;
  --luna-blue-2: #3c91e8;
  --luna-dark: #0a246a;
  --start-green: #389338;
  --start-green-2: #5ebd5e;
  --face: #ece9d8;
  --face-2: #f1efe2;
  --ink: #000;
  --muted: #555;
  --sel: #316ac5;
  --window-outline: #0055ea;
  --font: Tahoma, "Segoe UI", Verdana, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: #003399;
  user-select: none;
}
body > *:not(#webamp):not([id^="webamp"]) {
  box-sizing: border-box;
}
#desktop, #desktop *, #taskbar, #taskbar *, #boot, #boot *, #webamp-error, #webamp-error * {
  box-sizing: border-box;
}
/* Winamp skins are pixel-sized; border-box collapses the chrome. */
#webamp, #webamp *,
.webamp, .webamp * {
  box-sizing: content-box !important;
}
/* Hide windows/visualizer only. Never hide <audio> or the Webamp root —
   mobile browsers pause media that is visibility:hidden / display:none.
   Use opacity, not visibility: Webamp sets the playing seek thumb to
   visibility:visible, which would punch through a hidden parent. */
#webamp.amp-minimized .window,
#webamp.amp-minimized .gen-window,
#webamp.amp-minimized canvas {
  opacity: 0 !important;
  pointer-events: none !important;
}
#webamp.amp-minimized #position,
#webamp.amp-minimized input[type="range"],
#webamp.amp-minimized input[type="range"]::-webkit-slider-thumb,
#webamp.amp-minimized input[type="range"]::-moz-range-thumb {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#webamp.amp-minimized {
  pointer-events: none;
}

#desktop {
  position: relative;
  height: calc(100% - var(--taskbar-h));
  background: #245edb url("/static/wallpaper.jpg") center / cover no-repeat;
  overflow: hidden;
}

#webamp-root {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#webamp-error {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  z-index: 80;
  max-width: 420px;
  background: #fff;
  border: 3px solid #0055ea;
  padding: 14px 16px;
  font: 12px/1.4 var(--font);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
#webamp-error[hidden] { display: none !important; }
#webamp-error strong { display: block; margin-bottom: 6px; }

/* Desktop icons */
.desktop-icons {
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 88px;
}
.desk-icon {
  background: none;
  border: 1px solid transparent;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font: 11px/1.2 var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  cursor: pointer;
}
.desk-icon:focus,
.desk-icon.selected {
  background: rgba(10, 36, 106, 0.35);
  border-color: rgba(255,255,255,0.65);
  outline: none;
}
.desk-glyph {
  width: 32px;
  height: 32px;
  display: block;
  image-rendering: pixelated;
}
.desk-glyph.sm { width: 22px; height: 22px; flex: none; }
.desk-glyph.folder {
  background:
    linear-gradient(#f8d04a, #e0a20b);
  border-radius: 2px 2px 1px 1px;
  position: relative;
  box-shadow: 1px 1px 0 #8a6a00;
}
.desk-glyph.folder::before {
  content: "";
  position: absolute;
  top: -5px; left: 2px;
  width: 12px; height: 7px;
  background: #f2c230;
  border-radius: 2px 2px 0 0;
}
.desk-glyph.winamp {
  background: linear-gradient(#ffe14a, #e89b12);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  box-shadow: none;
  position: relative;
}
.desk-glyph.winamp::after {
  content: "";
  position: absolute;
  inset: 8px 11px 6px;
  background: #1a1a1a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.desk-glyph.about {
  background: radial-gradient(circle at 30% 30%, #fff, #3c91e8 55%, #0a246a);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 1px 1px 0 #000;
}
.desk-glyph.refresh {
  background: conic-gradient(from 40deg, #3c91e8, #fff, #245edb);
  border-radius: 50%;
}
.desk-glyph.skins {
  background:
    linear-gradient(#3c91e8 0 8px, transparent 8px) 0 0 / 100% 8px no-repeat,
    linear-gradient(#f8d04a, #c07810);
  border-radius: 2px;
  box-shadow: 1px 1px 0 #000;
  position: relative;
}
.desk-glyph.skins::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 12px; bottom: 5px;
  background: repeating-linear-gradient(90deg, #1a1a1a 0 3px, #e8e0c8 3px 6px);
}

/* Luna window — do NOT use the class name "window"; Webamp skins use that. */
.luna {
  position: absolute;
  z-index: 80;
  min-width: 420px;
  background: var(--face);
  border: 3px solid var(--window-outline);
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.luna[hidden] {
  display: none !important;
}
.luna.maximized {
  inset: 0;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  border-radius: 0;
}
.titlebar {
  height: 26px;
  background: linear-gradient(to right, #0a246a, #3c91e8 55%, #1660c8);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 6px;
  font: 700 12px var(--font);
  cursor: grab;
  border-radius: 5px 5px 0 0;
}
.luna.maximized .titlebar { border-radius: 0; }
.title-icon {
  width: 16px; height: 16px;
  background: linear-gradient(#f8d04a, #e0a20b);
  border-radius: 2px;
  flex: none;
}
.title-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caption-btns { display: flex; gap: 2px; flex: none; z-index: 2; }
.cap {
  width: 21px; height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(#3c91e8, #1a4fbd);
  color: #fff;
  position: relative;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}
.cap.close { background: linear-gradient(#e36d5d, #c01e1e); }
.cap::before, .cap::after {
  content: "";
  position: absolute;
  background: #fff;
}
.cap.min::before { left: 4px; right: 4px; height: 2px; bottom: 4px; }
.cap.max::before { inset: 4px; background: none; border: 2px solid #fff; }
.cap.close::before, .cap.close::after {
  width: 12px; height: 2px; top: 9px; left: 4px;
}
.cap.close::before { transform: rotate(45deg); }
.cap.close::after { transform: rotate(-45deg); }

.menubar {
  display: flex;
  gap: 12px;
  padding: 3px 8px;
  font: 11px var(--font);
  background: var(--face-2);
  border-bottom: 1px solid #d0cbb8;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--face);
}
.toolbar button, .start-menu button, .task {
  font: 11px var(--font);
  background: linear-gradient(#fff, #ece9d8);
  border: 1px solid #003c74;
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
}
.toolbar button.primary {
  background: linear-gradient(#d3e5fa, #86b9ef);
  font-weight: 700;
}
.toolbar button:active, .task:active { background: #d4d0c8; }
.search { margin-left: auto; font: 11px var(--font); display: flex; gap: 6px; align-items: center; }
.search input {
  font: 11px var(--font);
  width: 180px;
  border: 1px solid #7f9db9;
  padding: 3px 6px;
}
.address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 6px;
  font: 11px var(--font);
  background: var(--face);
}
.address-field {
  flex: 1;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer { width: min(820px, calc(100% - 24px)); height: min(480px, calc(100% - 48px)); left: 18px; top: 56px; }
.skins-win {
  width: min(860px, calc(100% - 24px));
  height: min(520px, calc(100% - 40px));
  left: 110px;
  top: 36px;
}
.skins-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--face);
  font: 11px var(--font);
  border-bottom: 1px solid #aca899;
}
.skins-tabs { display: flex; gap: 4px; }
.skins-tab {
  font: 11px var(--font);
  border: 1px solid #003c74;
  background: linear-gradient(#fff, #ece9d8);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
}
.skins-tab.active { background: linear-gradient(#d3e5fa, #86b9ef); font-weight: 700; }
.skins-search, .skins-sort { display: flex; gap: 6px; align-items: center; }
.skins-search { margin-left: auto; }
.skins-search input, .skins-sort select {
  font: 11px var(--font);
  border: 1px solid #7f9db9;
  padding: 3px 6px;
}
.skins-search input { width: 180px; }
.skins-nsfw { display: flex; gap: 4px; align-items: center; }
.skins-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #101010;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 16px;
  padding: 12px;
  align-content: start;
  justify-items: center;
}
.skin-card {
  width: 275px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #111;
  border: 1px solid #333;
  color: #eee;
  text-align: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: 11px var(--font);
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
}
.skin-card:hover, .skin-card:focus { border-color: #3c91e8; outline: none; }
.skin-card img, .skin-card .skin-ph {
  width: 275px;
  height: 348px;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: top left;
  background: #000;
  display: block;
  flex: none;
  image-rendering: pixelated;
}
.skin-card .skin-ph {
  background: linear-gradient(#3c91e8, #0a246a);
}
.skins-pager button {
  font: 11px var(--font);
  border: 1px solid #003c74;
  background: linear-gradient(#fff, #ece9d8);
  border-radius: 3px;
  padding: 2px 10px;
  cursor: pointer;
}
.skins-pager button:disabled { opacity: 0.45; cursor: default; }
.skin-card .skin-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  line-height: 1.2;
  flex: none;
}
.skin-card .skin-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skin-card .fav {
  flex: none;
  border: 0;
  background: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.skin-card .fav.on { color: #f5c400; }
.skins-empty { color: #aaa; grid-column: 1 / -1; padding: 24px; font: 12px var(--font); }
.explorer-body { flex: 1; display: flex; min-height: 0; border-top: 1px solid #aca899; }
.tree {
  width: 210px;
  overflow: auto;
  background: #fff;
  border-right: 1px solid #aca899;
  padding: 6px 0;
  font: 11px var(--font);
}
.tree button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: 11px var(--font);
  padding: 3px 8px;
  cursor: pointer;
  color: #000;
}
.tree button.active, .tree button:focus { background: var(--sel); color: #fff; outline: none; }
.tree .pad { display: inline-block; width: 0; }
.list-wrap { flex: 1; overflow: auto; background: #fff; position: relative; }
.track-table { width: 100%; border-collapse: collapse; font: 11px var(--font); }
.track-table th {
  text-align: left;
  background: linear-gradient(#fff, #ece9d8);
  border-bottom: 1px solid #aca899;
  padding: 3px 8px;
  position: sticky;
  top: 0;
  font-weight: 600;
}
.track-table td { padding: 3px 8px; border-bottom: 1px solid #f3f2ec; white-space: nowrap; }
.track-table tr.selected td { background: var(--sel); color: #fff; }
.track-table tbody tr { cursor: pointer; }
.track-table tbody tr.folder-row td { font-weight: 700; }
.folder-mini {
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-right: 4px;
  background: linear-gradient(#f8d04a, #e0a20b);
  border-radius: 1px;
  vertical-align: -1px;
  box-shadow: 1px 1px 0 #8a6a00;
}
.track-table tbody tr:hover:not(.selected) td { background: #e5f0fb; }
.empty { position: absolute; inset: 40px 16px; color: var(--muted); font: 12px var(--font); }
.statusbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 8px;
  font: 11px var(--font);
  background: var(--face);
  border-top: 1px solid #fff;
}
.status-dir { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.about-win { width: 420px; left: 50%; top: 18%; transform: translateX(-50%); z-index: 40; }
.about-body { display: flex; gap: 14px; padding: 16px; font: 12px/1.4 var(--font); background: #fff; }
.about-body h1 { margin: 0 0 6px; font: 700 16px var(--font); }
.about-body p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.about-llama {
  width: 64px; height: 64px; flex: none;
  background: linear-gradient(#ffe14a, #e89b12);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* Taskbar + start */
#taskbar {
  height: var(--taskbar-h);
  background: linear-gradient(#4993e6 0%, #245edb 8%, #1941a5 100%);
  display: flex;
  align-items: stretch;
  color: #fff;
  z-index: 100000;
  position: relative;
  flex: none;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #8bb7f0;
}
#start-btn {
  width: 98px;
  flex: none;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(#5ebd5e, #2f8a2f 55%, #216c21);
  color: #fff;
  font: italic 700 15px "Franklin Gothic Medium", var(--font);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 8px;
  cursor: pointer;
  text-shadow: 1px 1px 1px #145014;
}
#start-btn:hover { filter: brightness(1.08); }
#start-btn.open {
  filter: brightness(0.85);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.45);
}
.start-flag {
  width: 16px; height: 16px;
  background:
    linear-gradient(#f35325 50%, #81bc06 50%) 0 0 / 50% 100% no-repeat,
    linear-gradient(#05a6f0 50%, #ffba08 50%) 100% 0 / 50% 100% no-repeat;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.tasks { display: flex; gap: 4px; padding: 3px 8px; flex: 1; min-width: 0; }
.task {
  background: linear-gradient(#5aa0f0, #2c6fd4);
  color: #fff;
  border-color: #8bb7f0;
  min-width: 120px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.task.active {
  background: linear-gradient(#1a4fbd, #163f96);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.45);
}
.task[hidden] {
  display: none !important;
}
.now-playing {
  max-width: 280px;
  font: 11px var(--font);
  display: flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}
.tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(#3c9cf0, #0f5fd0);
  border-left: 1px solid #0a3d8f;
  font: 11px var(--font);
}
.vol-icon {
  width: 12px; height: 12px;
  background: #fff;
  clip-path: polygon(0 35%, 40% 35%, 80% 10%, 80% 90%, 40% 65%, 0 65%);
}
#clock { font-variant-numeric: tabular-nums; }

#start-menu {
  position: fixed;
  inset: auto auto 30px 0;
  margin: 0;
  width: 260px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #fff;
  color: #000;
  border: 2px solid #245edb;
  padding: 0;
  flex-direction: column;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
}
#start-menu:popover-open,
#start-menu.is-open {
  display: flex;
}
#start-menu .start-banner {
  background: linear-gradient(#3c91e8, #0a246a);
  color: #fff;
  font: 700 14px var(--font);
  padding: 18px 12px 10px;
}
#start-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  text-align: left;
  padding: 8px 12px;
  font: 12px var(--font);
  width: 100%;
  cursor: pointer;
}
#start-menu button:hover { background: var(--sel); color: #fff; }
.start-skins {
  border-top: 1px solid #aca899;
  padding: 4px 0;
}
.start-skins .skin-label {
  font: 10px var(--font);
  color: #666;
  padding: 4px 12px 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#start-menu button.skin-item { padding-left: 22px; }

.boot {
  position: fixed;
  inset: 0;
  background: #003399;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 13px var(--font);
}
.boot.hidden { display: none; }
.boot-card { width: 280px; text-align: center; }
.boot-logo {
  width: 56px; height: 56px; margin: 0 auto 12px;
  background: linear-gradient(#ffe14a, #e89b12);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.boot-bar {
  height: 16px;
  border: 2px solid #fff;
  padding: 2px;
  margin-top: 10px;
}
.boot-bar span {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(#3c91e8, #245edb);
  animation: load 1.1s linear infinite;
}
@keyframes load {
  from { transform: translateX(-100%); }
  to { transform: translateX(330%); }
}

@media (max-width: 720px) {
  .explorer { left: 4px; top: 8px; width: calc(100% - 8px); height: calc(100% - 16px); min-width: 0; }
  .tree { display: none; }
  .now-playing { display: none; }
  .desktop-icons { display: none; }
}