/* ============================================================
   FRUTIGER AERO — nature + glass + aqua + glow
   2006-era optimistic web aesthetic
   ============================================================ */

:root {
  --aqua:      #38d9f5;
  --aqua-d:    #0ab8d8;
  --teal:      #0ea89e;
  --sky:       #a8dff5;
  --green:     #7dc96e;
  --white-g:   rgba(255,255,255,0.82);
  --glass-bg:  rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.55);
  --glass-shadow: 0 8px 32px rgba(30,100,160,0.22), 0 1.5px 0 rgba(255,255,255,0.7) inset;
  --title-h:   34px;
}

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

html, body {
  height: 100%; overflow: hidden;
  font-family: "Segoe UI", "Ubuntu", "Calibri", Arial, sans-serif;
  font-size: 13px; color: #1a3a4a;
}

/* ── BACKGROUND ── */
.wallpaper {
  position: fixed; inset: 0; z-index: 0;
  background: #3a6ea5 center/cover no-repeat fixed;
}
/* soft overlay to deepen nature feel */
.wallpaper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(150,230,255,.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%,  rgba(100,210,130,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 80%,   rgba(60,180,240,.10) 0%, transparent 55%);
}


/* ── DESKTOP ── */
#desktop { position: fixed; inset: 0; z-index: 1; }

/* ── DESKTOP ICONS ── */
.desk-icons {
  position: absolute; top: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 16px; z-index: 2;
}
.desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 96px; background: none; border: none;
  color: #fff; font-size: 12.5px; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.desk-icon .di-img {
  width: 48px;
  height: 48px;
  display: block;
  background: center/contain no-repeat;
  image-rendering: pixelated;
}
.desk-icon .di-img img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.desk-icon:hover .di-img { filter: brightness(1.15) drop-shadow(0 0 6px rgba(100,220,255,.85)); }
.desk-icon:hover span:last-child { background: rgba(0,120,200,.45); border-radius: 3px; padding: 0 4px; }

/* ── GLASS WINDOWS ── */
.glass-window {
  position: absolute; z-index: 5;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.glass-window.minimized { display: none !important; }
.glass-window.maximized {
  left: 0 !important; top: 0 !important; right: 0;
  width: auto !important; height: calc(100% - 30px) !important;
  border-radius: 0;
}

/* title bar */
.title-bar {
  height: var(--title-h);
  background: linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(180,230,255,.38) 50%,
    rgba(120,200,240,.30) 100%);
  border-bottom: 1px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 12px;
  user-select: none;
}
.title-text {
  font-size: 13px; font-weight: 600; color: #1a4060;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.title-controls { display: flex; gap: 5px; }

/* traffic-light style buttons */
.tb-btn {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18); padding: 0; position: relative;
}
.tb-btn.close  { background: radial-gradient(circle at 40% 35%, #ff8f8f, #e02020); }
.tb-btn.min    { background: radial-gradient(circle at 40% 35%, #ffe080, #e0a800); }
.tb-btn.max    { background: radial-gradient(circle at 40% 35%, #90e870, #28b820); }
.tb-btn:hover  { filter: brightness(1.15); }
.tb-btn:active { filter: brightness(.85); }

/* window body */
.window-body {
  padding: 16px 18px;
  background: rgba(255,255,255,.18);
  flex: 1; overflow: auto;
  color: #0e2a3a;
}
.window-body h1 {
  font-size: 22px; font-weight: 300; color: #0a3a5a; margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.window-body h1 .accent { color: var(--aqua-d); font-weight: 600; }
.window-body p { line-height: 1.6; color: #1a3a50; margin-bottom: 6px; }
.window-body .tiny { font-size: 11px; color: rgba(20,60,90,.6); margin-top: 10px; }

/* ── TASKBAR (Windows XP Luna) ── */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px;
  z-index: 50;
  display: flex; align-items: stretch; gap: 0; padding: 0;
  background: linear-gradient(180deg,
    #3b9de3 0%, #2775cd 4%, #1e5eb5 50%, #194c9a 92%, #173f82 100%);
  border-top: 1px solid #5c9fe8;
  box-shadow: none;
}

/* start button — user icon only */
.start-btn {
  height: 30px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  cursor: pointer;
}
.start-icon {
  height: 30px;
  width: auto;
  display: block;
  pointer-events: none;
}
.start-btn:hover { filter: brightness(1.06); }
.start-btn:active { filter: brightness(.94); }

.task-divider {
  width: 2px; flex: 0 0 auto; align-self: center; height: 22px;
  margin: 0 3px;
  background: #1941a5;
  border-left: 1px solid #0d357f;
  border-right: 1px solid #5c9fe8;
}
.task-items {
  display: flex; gap: 2px; flex: 1; overflow: hidden;
  align-items: center; padding: 3px 2px; min-width: 0;
}
.task-btn {
  height: 22px; padding: 0 8px 0 4px; max-width: 180px; min-width: 120px;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #3c8ef3 0%, #2775cd 48%, #1941a5 100%);
  border: 1px solid #1941a5;
  border-top-color: #5c9fe8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff; font-size: 11px; font-weight: 400; font-family: Tahoma, "Segoe UI", sans-serif;
  white-space: nowrap; overflow: hidden;
  text-shadow: none;
}
.task-btn-icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  object-fit: contain; image-rendering: auto;
}
.task-btn-label {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.task-btn.active {
  background: linear-gradient(180deg, #1941a5 0%, #1e52a4 50%, #245edc 100%);
  border-color: #0d357f #5c9fe8 #5c9fe8 #0d357f;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.45);
}
.task-btn:hover:not(.active) {
  background: linear-gradient(180deg, #4a9af5 0%, #3080d5 48%, #1e52a4 100%);
}

.tray {
  display: flex; align-items: center; justify-content: center;
  margin: 2px 2px 2px auto; padding: 0 8px; height: 26px; flex-shrink: 0;
  background: linear-gradient(180deg, #0e4a9c 0%, #1290e8 55%, #18b0f0 100%);
  border: 1px solid;
  border-color: #0a2460 #4da3f7 #4da3f7 #0a2460;
  border-radius: 0;
}
.tray-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  padding: 0 2px;
  user-select: none;
}
.clock-time,
.clock-date {
  color: #fff;
  font: 11px/1.05 Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  white-space: nowrap;
}

/* ── START MENU (Windows XP Luna) ── */
.start-menu {
  position: fixed; left: 0; bottom: 30px;
  width: 196px; z-index: 60;
  background: #fff;
  border: 2px solid #0054e3;
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,.35);
  overflow: hidden;
  padding: 2px 0 4px;
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
}
.sm-items { display: flex; flex-direction: column; padding: 2px 0; }
.sm-items button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 28px;
  text-align: left; padding: 3px 10px 3px 8px;
  border: none; background: transparent;
  font: 11px Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  color: #000; border-radius: 0; cursor: default;
}
.sm-icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  object-fit: contain;
}
.sm-items button:hover {
  background: #316ac5;
  color: #fff;
}

/* ── POPUP ADS ── */
.popup-ad {
  position: fixed; z-index: 100;
  background: rgba(220,240,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(10,80,160,.3);
  overflow: hidden;
  animation: popIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { transform: scale(.7); opacity: 0; } }
.popup-ad .pa-bar {
  height: 28px; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(160,220,250,.35));
  border-bottom: 1px solid rgba(255,255,255,.5);
  font-size: 11px; font-weight: 600; color: #0a3a5a;
  user-select: none;
}
.popup-ad .pa-bar .tb-btn.close { width: 13px; height: 13px; }
.popup-ad img { display: block; max-width: 90vw; max-height: 70vh; }


/* ── WINDOWS XP WINDOW ── */
.xp-window {
  position: absolute; z-index: 8;
  display: flex; flex-direction: column;
  border: 1px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 0 0 1px #fff inset,
    2px 2px 10px rgba(0,0,0,.35);
  overflow: hidden;
  background: #ece9d8;
}
.xp-window.minimized { display: none !important; }
.xp-window.maximized {
  left: 0 !important; top: 0 !important; right: 0;
  width: auto !important; height: calc(100% - 30px) !important;
  border-radius: 0;
}
.xp-window.maximized .xp-resize-br { display: none; }
.xp-resize-br {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  z-index: 5;
}
.xp-resize-br::before {
  content: "";
  position: absolute;
  right: 3px; bottom: 3px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(0,0,0,.35);
  border-bottom: 2px solid rgba(0,0,0,.35);
  box-shadow:
    -3px 0 0 -1px rgba(255,255,255,.55),
    0 -3px 0 -1px rgba(255,255,255,.55);
}
.xp-window.focused { z-index: 20; }

.xp-title-bar {
  height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 0 8px;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #2f8fff 100%);
  border-bottom: 1px solid #003c9f;
  user-select: none; cursor: default;
}
.xp-title-text {
  font-size: 12.5px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-title-controls { display: flex; gap: 2px; }

.xp-btn {
  width: 21px; height: 21px; padding: 0; border: none; position: relative;
  background: linear-gradient(180deg, #3c8cff 0%, #2056d4 45%, #1848c4 100%);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #fff inset,
    0 0 0 1px rgba(0,0,0,.25);
}
.xp-btn::after {
  content: ""; position: absolute; inset: 4px 5px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 1px;
}
.xp-btn:hover { filter: brightness(1.08); }
.xp-btn:active { filter: brightness(.92); }
.xp-btn.min::before {
  content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 2px;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.xp-btn.max::before {
  content: ""; position: absolute; inset: 5px;
  border: 2px solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.xp-btn.close {
  background: linear-gradient(180deg, #f88 0%, #d33 45%, #b22 100%);
}
.xp-btn.close::before,
.xp-btn.close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 2px; background: #fff;
  margin: -1px 0 0 -5px; border: none; box-shadow: none;
}
.xp-btn.close::before { transform: rotate(45deg); }
.xp-btn.close::after  { transform: rotate(-45deg); }

.xp-window-body {
  flex: 1; overflow: auto;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f6f4ec 0%, #ece9d8 100%);
  color: #000;
  font-size: 12px;
}
.xp-hint { margin-bottom: 10px; font-weight: 600; }
.xp-foot {
  margin-top: 12px; font-size: 11px; color: #444;
}
.xp-foot code {
  background: rgba(255,255,255,.65); padding: 1px 4px; border-radius: 2px;
}

/* background picker grid */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}
.bg-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid #7f9db9;
  border-radius: 3px;
  padding: 0;
  background: #fff center/cover no-repeat;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #fff;
  overflow: hidden;
}
.bg-tile:hover {
  border-color: #316ac5;
  box-shadow: 0 0 0 1px #fff inset, 0 0 6px rgba(49,106,197,.45);
}
.bg-tile.selected::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(110, 110, 110, 0.52);
  pointer-events: none;
}
.bg-tile.selected::before {
  content: "✓";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  font-size: 22px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  pointer-events: none;
}
.bg-tile .bg-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 4px;
  font-size: 10px; color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.photos-body,
.memes-body { position: relative; }
.meme-viewer {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  z-index: 3;
}
.meme-viewer-media {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.meme-viewer-media img,
.meme-viewer-media video {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border: 2px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  background: #000;
}
.bg-tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bg-tile-video::after {
  content: "▶";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  pointer-events: none;
}
.meme-viewer-close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  border: 1px solid #fff; border-radius: 2px;
  background: #c0c0c0; color: #000;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.meme-viewer-close:hover { background: #e81123; color: #fff; border-color: #fff; }

.bg-empty {
  grid-column: 1 / -1;
  padding: 24px 12px; text-align: center;
  color: #555; background: rgba(255,255,255,.45);
  border: 1px dashed #9ab;
  border-radius: 4px;
}

/* Webamp: full-screen overlay so windows can be dragged anywhere */
#webamp-container {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 30px;          /* sit above taskbar */
  z-index: 6;
  overflow: visible;
  pointer-events: none; /* clicks pass through empty desktop */
}
#webamp-container > * { pointer-events: auto; }

/* Let Webamp handle its own canvas scaling — CSS image-rendering here blurs on http:// */

/* ── HIDDEN ── */
.hidden { display: none !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(60,160,220,.5); border-radius: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .glass-window,
  .xp-window { left: 8px !important; right: 8px; width: auto !important; }
}