/* =========================================================
   CN MUSIC PRODUCTION — Windows XP themed portfolio
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Tahoma", "Segoe UI", "Arial", sans-serif;
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #000;
  cursor: default;
}

body[dir="rtl"] {
  font-family: "Segoe UI", "Arial", "Tahoma", sans-serif;
}

img { -webkit-user-drag: none; user-drag: none; }

/* ---------- Screen switching ---------- */
.screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}
.screen.active { display: block; }

/* =========================================================
   1. BOOT SCREEN
   ========================================================= */
#boot-screen {
  background: #000;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
#boot-screen.active { display: flex; }

.boot-logo-wrap {
  text-align: center;
  animation: fadeIn 0.6s ease;
}
.boot-logo-text {
  font-family: "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.boot-cn {
  display: block;
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #b9d3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 6px;
}
.boot-mp {
  display: block;
  font-size: 18px;
  color: #cfcfcf;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: 4px;
}
.boot-bar {
  width: 200px;
  height: 14px;
  margin: 30px auto 12px;
  border: 1px solid #5179c8;
  background: #000;
  padding: 1px;
  overflow: hidden;
}
.boot-bar-inner {
  display: flex;
  height: 100%;
  gap: 2px;
  animation: bootSlide 1.2s linear infinite;
}
.boot-bar-block {
  width: 22px;
  height: 100%;
  background: linear-gradient(180deg, #6db8ff 0%, #1f53b5 100%);
}
@keyframes bootSlide {
  0%   { transform: translateX(-66px); }
  100% { transform: translateX(200px); }
}
.boot-copyright {
  margin-top: 30px;
  font-size: 11px;
  color: #888;
}

/* =========================================================
   2. LOCK / LOGIN SCREEN
   ========================================================= */
#lock-screen {
  background:
    radial-gradient(ellipse at center, #4172c4 0%, #1c4f9a 60%, #0d2e6e 100%);
  color: #fff;
  display: none;
  flex-direction: column;
}
#lock-screen.active { display: flex; }

.lock-top {
  height: 22%;
  padding: 40px 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lock-welcome {
  font-family: "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  font-size: 38px;
  font-weight: 400;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.45);
}
.lock-divider {
  height: 6px;
  margin-top: 10px;
  background: linear-gradient(90deg,
    transparent 0%,
    #ff8c2a 8%,
    #ffb44d 16%,
    #ffd47a 32%,
    #ffffff 50%,
    #ffd47a 68%,
    #ffb44d 84%,
    #ff8c2a 92%,
    transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255, 180, 80, 0.45);
}

.lock-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lock-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .lock-user:hover {
    background: rgba(255,255,255,0.10);
    outline: 1px solid rgba(255,255,255,0.35);
  }
}
.lock-user:active {
  background: rgba(255,255,255,0.18);
  outline: 1px solid rgba(255,255,255,0.45);
}
.lock-avatar {
  width: 56px;
  height: 56px;
  background: #fff;
  border: 2px solid #b9d3ff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: lock-avatar-pulse 1.8s ease-in-out infinite;
}
@keyframes lock-avatar-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,255,255,0.55); }
  50%      { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 10px rgba(255,255,255,0); }
}
.lock-enter-btn {
  margin-top: 18px;
  padding: 10px 26px;
  font-size: 16px;
  font-family: "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #4a90e2 0%, #1f5fb4 100%);
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: lock-enter-pulse 1.8s ease-in-out infinite;
}
.lock-enter-btn:hover {
  background: linear-gradient(180deg, #5aa3f0 0%, #2670c8 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.5);
}
.lock-enter-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
@keyframes lock-enter-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 0 10px rgba(255,255,255,0); }
}
.lock-avatar img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.lock-username {
  font-size: 22px;
  font-family: "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.lock-hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.lock-notice {
  display: none; /* hidden on desktop, shown on phones via media query */
  margin-top: 22px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  letter-spacing: 0.3px;
  max-width: 280px;
}
@media (max-width: 720px) {
  .lock-notice { display: block; }
}

.lock-bottom {
  height: 22%;
  padding: 0 60px 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 14px;
}
.lock-foot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.lock-power {
  width: 28px;
  height: 28px;
  background: #c83d3d;
  border-radius: 50%;
  border: 2px solid #ff8a8a;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 0 6px rgba(0,0,0,0.4);
}
.lock-power::after {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 2px; height: 10px;
  background: #fff;
  transform: translateX(-50%);
}
.lock-foot-right {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  text-align: right;
  line-height: 1.5;
}
body[dir="rtl"] .lock-foot-right { text-align: left; }

/* =========================================================
   3. DESKTOP
   ========================================================= */
#desktop-screen {
  background: #2a6e2c;
  display: none;
}
#desktop-screen.active { display: block; }

#desktop {
  position: absolute;
  inset: 0 0 30px 0;
  background-image: url('assets/bliss.jpg');
  background-size: cover;
  background-position: center;
  /* CSS fallback that resembles Bliss in case the image is missing */
  background-color: #5b9bd5;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* If bliss.jpg is missing, this fallback layer paints sky + hill */
#desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #6fb8f5 0%, #99cfff 40%, #cfe7ff 60%, #6cb04a 60%, #4d8a35 100%);
  z-index: -1;
}

/* ---------- Desktop icons ---------- */
.desktop-icons {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[dir="rtl"] .desktop-icons {
  left: auto;
  right: 18px;
}

.desktop-icon {
  width: 110px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  border: 1px dotted transparent;
}
.desktop-icon:hover .desktop-icon-img {
  filter: brightness(1.1);
}
.desktop-icon.selected,
.desktop-icon:active {
  border-color: rgba(255,255,255,0.4);
  background: rgba(80, 130, 200, 0.25);
}
.desktop-icon-img {
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.desktop-icon-label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.75),
    1px 0 1px rgba(0,0,0,0.75),
    0 1px 1px rgba(0,0,0,0.75);
  word-wrap: break-word;
  line-height: 1.25;
}

/* Each icon uses an inline SVG via data URI so no extra files are needed */
.icon-videos {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='2' y='6' width='24' height='20' rx='2' fill='%23222' stroke='%23000' stroke-width='1'/><rect x='4' y='8' width='20' height='16' fill='%2335a0ff'/><polygon points='12,12 12,20 20,16' fill='%23ffffff'/><circle cx='28' cy='10' r='3' fill='%23c0c0c0' stroke='%23555'/><circle cx='28' cy='22' r='3' fill='%23c0c0c0' stroke='%23555'/></svg>");
}
.icon-about {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='5,3 22,3 28,9 28,29 5,29' fill='%23ffffff' stroke='%23555' stroke-width='1'/><polygon points='22,3 22,9 28,9' fill='%23dcdcdc' stroke='%23555' stroke-width='1'/><line x1='9' y1='14' x2='24' y2='14' stroke='%2358a' stroke-width='1'/><line x1='9' y1='17' x2='24' y2='17' stroke='%2358a' stroke-width='1'/><line x1='9' y1='20' x2='24' y2='20' stroke='%2358a' stroke-width='1'/><line x1='9' y1='23' x2='20' y2='23' stroke='%2358a' stroke-width='1'/></svg>");
}
.icon-services {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='6' fill='none' stroke='%23222' stroke-width='3'/><g fill='%23ffd24a' stroke='%23222' stroke-width='1.2'><rect x='14.5' y='1' width='3' height='6'/><rect x='14.5' y='25' width='3' height='6'/><rect x='1' y='14.5' width='6' height='3'/><rect x='25' y='14.5' width='6' height='3'/><rect x='5' y='5' width='6' height='3' transform='rotate(45 8 6.5)'/><rect x='21' y='5' width='6' height='3' transform='rotate(-45 24 6.5)'/><rect x='5' y='24' width='6' height='3' transform='rotate(-45 8 25.5)'/><rect x='21' y='24' width='6' height='3' transform='rotate(45 24 25.5)'/></g></svg>");
}
.icon-contact {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='2' y='7' width='28' height='20' rx='1' fill='%23ffffff' stroke='%23333'/><polyline points='2,7 16,19 30,7' fill='none' stroke='%23c33' stroke-width='1.5'/><polyline points='2,27 12,16 22,16 30,27' fill='none' stroke='%23333'/></svg>");
}
.icon-language {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13' fill='%231a73e8' stroke='%23083a87' stroke-width='1.5'/><ellipse cx='16' cy='16' rx='13' ry='5' fill='none' stroke='%23ffffff' stroke-width='0.8'/><ellipse cx='16' cy='16' rx='6' ry='13' fill='none' stroke='%23ffffff' stroke-width='0.8'/><line x1='3' y1='16' x2='29' y2='16' stroke='%23ffffff' stroke-width='0.8'/><line x1='16' y1='3' x2='16' y2='29' stroke='%23ffffff' stroke-width='0.8'/></svg>");
}
.icon-photos {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='3' y='6' width='26' height='20' rx='1' fill='%23ffffff' stroke='%23333' stroke-width='1.2'/><circle cx='10' cy='13' r='2.5' fill='%23ffd24a'/><polygon points='3,26 12,16 18,22 22,18 29,26' fill='%2376c478' stroke='%23335f33' stroke-width='1' stroke-linejoin='round'/><rect x='3' y='6' width='26' height='3' fill='%23dcdcdc' stroke='%23333' stroke-width='1.2'/></svg>");
}

/* ---------- Windows host ---------- */
#windows-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#windows-host > .win {
  pointer-events: auto;
}

/* ---------- Floating 3D logo ---------- */
#logo3d-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo3d-container canvas {
  display: block;
}


/* ---------- Window styling tweaks (overrides xp.css) ---------- */
.win {
  position: absolute;
  min-width: 320px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
}
.win .title-bar {
  cursor: move;
  user-select: none;
}
.win .title-bar-text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.win .win-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: #ECE9D8;
}
body[dir="rtl"] .win .win-body { direction: rtl; text-align: right; }

.win.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 30px) !important;
}

/* App-specific bodies */
.win-body.notepad {
  background: #fff !important;
  font-family: "Lucida Console", "Consolas", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  padding: 14px !important;
  color: #000;
}

.win-body.media {
  background: #1c1c1c !important;
  color: #fff;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.media-top {
  background: linear-gradient(180deg, #2c4677 0%, #11244f 100%);
  padding: 6px 10px;
  font-size: 11px;
  color: #cfe2ff;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
}
.media-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 240px;
  position: relative;
}
.media-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
}

/* Body-level video player — sits ABOVE the VHS overlay so the
   video itself plays clean (no scanlines, RGB split, vignette). */
#video-player-frame {
  position: fixed;
  border: 0;
  background: #000;
  z-index: 100001;
  display: none;
}
.media-empty {
  color: #888;
  font-size: 13px;
  text-align: center;
}
.media-list {
  height: 160px;
  overflow-y: auto;
  background: #ECE9D8;
  color: #000;
  border-top: 2px solid #888;
}
.media-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid #d8d2bb;
}
.media-item:hover { background: #d8e3ff; }
.media-item.active {
  background: #316ac5;
  color: #fff;
}
.media-thumb {
  width: 64px;
  height: 36px;
  background: #000;
  background-size: cover;
  background-position: center;
  border: 1px solid #444;
  flex-shrink: 0;
}
.media-meta { flex: 1; min-width: 0; }
.media-title { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-sub { font-size: 11px; opacity: 0.8; }

.services-list { padding: 0; margin: 0; list-style: none; }
.services-list li {
  padding: 10px 10px;
  border-bottom: 1px solid #cfc8a9;
  display: flex;
  gap: 10px;
}
.services-list li:before {
  content: "▸";
  color: #2a64b0;
  font-size: 14px;
  flex-shrink: 0;
}
.services-list h4 { margin: 0 0 2px; font-size: 13px; }
.services-list p { margin: 0; font-size: 12px; color: #333; }

.contact-form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.contact-form label { font-size: 12px; }
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #7f9db9;
  background: #fff;
}
.contact-form textarea { min-height: 80px; resize: vertical; }
.contact-info {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #aaa;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- Photo album (masonry, no captions, no clicks) ---------- */
.win-body.photos {
  background: #1f1f1f;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.photos-album {
  column-width: 220px;
  column-gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}
.photo-tile {
  display: block;
  margin: 0 0 8px 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  cursor: default;
}
.photo-tile img {
  width: 100%;
  display: block;
  border: 1px solid #444;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.photos-empty {
  padding: 40px 24px;
  text-align: center;
  color: #aaa;
  font-size: 12px;
  line-height: 1.5;
}

.lang-choices { display: flex; gap: 14px; margin-top: 10px; }
.lang-btn {
  flex: 1;
  padding: 16px;
  font-size: 14px;
  cursor: pointer;
}
.lang-btn.active {
  outline: 2px solid #1f53b5;
  font-weight: 700;
}


/* =========================================================
   4. TASKBAR
   ========================================================= */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(180deg,
    #245edb 0%,
    #2f7ade 8%,
    #245edb 40%,
    #1941a5 92%,
    #0c2d7d 100%);
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  z-index: 9999;
  border-top: 1px solid #0c40a0;
  font-family: "Tahoma", sans-serif;
}

#start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin: 1px 0;
  padding: 0 22px 2px 10px;
  background: linear-gradient(180deg, #3aaa3a 0%, #2c8b2c 50%, #1a5e1a 100%);
  color: #fff;
  font-family: "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  border: 0;
  border-right: 1px solid #0c40a0;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
#start-btn:hover { filter: brightness(1.08); }
#start-btn:active { filter: brightness(0.95); }
.start-flag {
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M2 6 L11 4 L11 11 L2 11 Z' fill='%23f25022'/><path d='M13 4 L22 2 L22 11 L13 11 Z' fill='%237fba00'/><path d='M2 13 L11 13 L11 20 L2 18 Z' fill='%2300a4ef'/><path d='M13 13 L22 13 L22 22 L13 20 Z' fill='%23ffb900'/></g></svg>") no-repeat center / contain;
}
body[dir="rtl"] #start-btn {
  border-radius: 12px 0 0 12px;
  padding: 0 10px 2px 22px;
  border-left: 1px solid #0c40a0;
  border-right: 0;
}

#taskbar-apps {
  flex: 1;
  display: flex;
  gap: 3px;
  padding: 0 6px;
  overflow: hidden;
}
.task-btn {
  height: 24px;
  min-width: 140px;
  max-width: 200px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #3a8aff 0%, #1f5cd1 100%);
  color: #fff;
  border: 1px solid #0a2a73;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-btn.active {
  background: linear-gradient(180deg, #1f53b5 0%, #0a2c7d 100%);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
}
.task-btn .task-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#systray {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1175cb 0%, #0d4cae 100%);
  border-left: 1px solid #0a2a73;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11px;
}
body[dir="rtl"] #systray { border-left: 0; border-right: 1px solid #0a2a73; }

#systray-icons { display: flex; gap: 6px; }
.systray-ico {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.systray-vol { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='2,6 5,6 9,3 9,13 5,10 2,10' fill='%23ffffff'/><path d='M11 5 Q13 8 11 11' stroke='%23ffffff' fill='none' stroke-width='1'/><path d='M12 3 Q15 8 12 13' stroke='%23ffffff' fill='none' stroke-width='1'/></svg>"); }
.systray-net { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='8' width='3' height='6' fill='%23ffffff'/><rect x='2' y='3' width='3' height='6' fill='%23999999' opacity='0.6'/><rect x='8' y='3' width='3' height='11' fill='%23ffffff'/><rect x='8' y='3' width='3' height='6' fill='%23999999' opacity='0.6'/></svg>"); }

#clock {
  font-family: "Tahoma", sans-serif;
  letter-spacing: 0.5px;
}

/* =========================================================
   5. START MENU
   ========================================================= */
#start-menu {
  position: fixed;
  bottom: 30px;
  left: 0;
  width: 380px;
  background: #fff;
  border: 2px solid #0c40a0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-family: Tahoma, sans-serif;
  z-index: 10000;
  box-shadow: 4px -4px 16px rgba(0,0,0,0.3);
  overflow: hidden;
}
body[dir="rtl"] #start-menu { left: auto; right: 0; }
#start-menu.hidden { display: none; }

.start-header {
  background: linear-gradient(180deg, #2779e8 0%, #1356c6 50%, #0c40a0 100%);
  color: #fff;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #f7d100;
}
.start-avatar {
  width: 42px;
  height: 42px;
  background: #fff;
  border: 2px solid #b9d3ff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.start-avatar img { width: 80%; height: 80%; object-fit: contain; }
.start-username {
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.start-body {
  display: flex;
  background: linear-gradient(90deg, #ffffff 50%, #d3e4fd 50%);
  min-height: 280px;
}
.start-col {
  width: 50%;
  padding: 6px 0;
}
.start-col-left { background: #fff; }
.start-col-right { background: #d3e4fd; padding: 6px 8px; }

.start-item {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  align-items: center;
}
.start-item:hover {
  background: linear-gradient(180deg, #316ac5 0%, #1a4080 100%);
  color: #fff;
}
.start-item:hover small { color: #cde0ff; }

.start-item-ico {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.start-item-text { display: flex; flex-direction: column; line-height: 1.2; }
.start-item-text small { color: #555; font-size: 10px; }
.start-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #888, transparent);
  margin: 6px 8px;
}
.start-item-r {
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.start-item-r:hover { background: rgba(255,255,255,0.6); }

.start-footer {
  background: linear-gradient(180deg, #2779e8 0%, #1356c6 50%, #0c40a0 100%);
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 6px 14px;
  border-top: 2px solid #f7d100;
}
.start-footer button {
  background: transparent;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.start-footer button:hover { background: rgba(255,255,255,0.15); border-radius: 2px; }
.logoff-ico, .shutdown-ico {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #fff;
  display: inline-block;
}
.logoff-ico  { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='8' height='10' fill='%23ffd24a' stroke='%23222'/><polygon points='9,5 13,8 9,11' fill='%23222'/></svg>") no-repeat center / contain; background-color: transparent; }
.shutdown-ico { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='9' r='5' fill='none' stroke='%23ff5252' stroke-width='2'/><rect x='7' y='1' width='2' height='6' fill='%23ff5252'/></svg>") no-repeat center / contain; background-color: transparent; }

/* =========================================================
   6. UTILITIES & ANIMATIONS
   ========================================================= */
.hidden { display: none !important; }

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

.fading-out { animation: fadeOut 0.45s ease forwards; }
@keyframes fadeOut {
  to { opacity: 0; }
}

/* =========================================================
   MOBILE / SMALL-SCREEN ADJUSTMENTS
   ========================================================= */

/* Lighter VHS on phones — drop the heavy SVG RGB-aberration filter
   and the periodic jolt animation; keep the rest for the vibe. */
@media (max-width: 720px) {
  .screen {
    filter: contrast(1.10) saturate(1.18) brightness(1.0);
    animation: vhsWobble 2.4s ease-in-out infinite;
  }
  .vhs-noise    { animation-duration: 0.22s; opacity: 0.22; }
  .vhs-tracking-2, .vhs-tracking-3 { display: none; }

  /* Much smaller, tighter virus popups on mobile */
  .virus-popup { box-shadow: 2px 2px 0 rgba(0,0,0,0.4), 0 0 14px rgba(255,80,80,0.4); }
  .virus-titlebar { font-size: 8.5px; padding: 2px 5px; letter-spacing: 0; }
  .virus-close { width: 13px; height: 11px; font-size: 9px; }
  .virus-body { padding: 6px 7px 6px; font-size: 9.5px; line-height: 1.3; }
  .virus-text { margin-bottom: 5px; }
  .virus-cta {
    padding: 3px 8px;
    font-size: 9.5px;
    border-width: 1px;
    letter-spacing: 0;
  }
  .virus-actions { gap: 4px; }
  .virus-text code { font-size: 9px; padding: 0 2px; }
}

@media (max-width: 640px) {
  /* ----- Mobile lock screen: cleaner, portrait-friendly layout ----- */
  .lock-top {
    height: auto;
    padding: 38px 24px 18px;
  }
  .lock-welcome { font-size: 32px; }
  .lock-divider { height: 4px; margin-top: 8px; }

  .lock-middle {
    gap: 14px;
    padding: 0 16px;
  }
  /* Stack avatar above username vertically — feels more like a phone login */
  .lock-user {
    flex-direction: column;
    gap: 12px;
    padding: 14px 22px;
    text-align: center;
  }
  .lock-avatar { width: 86px; height: 86px; }
  .lock-username { font-size: 22px; }
  .lock-hint { font-size: 13px; margin-top: 8px; }

  .lock-bottom {
    height: auto;
    padding: 14px 24px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 14px;
  }
  /* Hide the chatty "After you log on..." paragraph — pure noise on phone */
  .lock-foot-right { display: none; }
  .lock-foot-left  { font-size: 12px; }

  /* Smaller desktop icons */
  .desktop-icons { top: 12px; left: 12px; gap: 8px; }
  body[dir="rtl"] .desktop-icons { right: 12px; }
  .desktop-icon { width: 84px; padding: 6px 4px; }
  .desktop-icon-img { width: 44px; height: 44px; }
  .desktop-icon-label { font-size: 11px; }

  /* Windows sized for phone */
  .win { min-width: 280px; max-width: calc(100vw - 16px); }
  .win.maximized { width: 100vw !important; height: calc(100vh - 30px) !important; }

  /* Start menu: hide decorative right column, take more width */
  #start-menu { width: 92vw; max-width: 380px; }
  .start-col-right { display: none; }
  .start-col-left  { width: 100%; }

  /* Tighter taskbar */
  #start-btn { font-size: 14px; padding: 0 16px 2px 8px; }
  body[dir="rtl"] #start-btn { padding: 0 8px 2px 16px; }
  .task-btn { min-width: 90px; max-width: 130px; font-size: 11px; }

  /* Photos: narrower masonry columns */
  .photos-album { column-width: 160px; }
}

/* =========================================================
   7. VHS / LO-FI VIDEO TAPE OVERLAY
   ========================================================= */

/* Strong contrast + saturation push + RGB chromatic aberration +
   constant micro-wobble + occasional horizontal jolt = VHS feel */
.screen {
  filter: url(#vhs-rgb) contrast(1.14) saturate(1.25) brightness(1.0);
  animation:
    vhsWobble 2.2s ease-in-out infinite,
    vhsJolt 11s steps(1, end) infinite;
  transform-origin: center center;
  will-change: transform, filter;
}
body.no-vhs .screen { filter: none; animation: none; }
body.no-vhs #vhs-overlay { display: none; }
body.no-vhs #vhs-overlay ~ * { /* noop */ }

/* Subtle constant wobble — like the tape isn't tracking perfectly */
@keyframes vhsWobble {
  0%, 100% { transform: translate3d(0, 0, 0) skewX(0); }
  25%      { transform: translate3d(-1px, 0, 0) skewX(0.05deg); }
  50%      { transform: translate3d(1px, 0, 0) skewX(-0.04deg); }
  75%      { transform: translate3d(-1px, 0, 0) skewX(0.04deg); }
}

/* Occasional horizontal jolt / tear — fires for ~0.5s every ~11s */
@keyframes vhsJolt {
  0%, 95.4%, 100% { transform: translate3d(0, 0, 0) skewX(0); }
  95.5% { transform: translate3d(-6px, 0, 0) skewX(-1.6deg); }
  95.9% { transform: translate3d(7px, 0, 0) skewX(1.2deg); }
  96.4% { transform: translate3d(-3px, 0, 0) skewX(-0.5deg); }
  97.0% { transform: translate3d(2px, 0, 0) skewX(0.2deg); }
  97.6% { transform: translate3d(0, 0, 0) skewX(0); }
}

#vhs-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

/* --- Scanlines (CRT/VHS horizontal lines) --- */
.vhs-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.65;
}
/* Subtle vertical stripe pattern on top */
.vhs-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* --- Animated noise grain (heavier) --- */
.vhs-noise {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.32;
  animation: vhsNoise 0.12s steps(4) infinite;
}
@keyframes vhsNoise {
  0%   { transform: translate(0%, 0%); }
  20%  { transform: translate(-3%, 1%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(3%, -1%); }
  100% { transform: translate(-2%, -2%); }
}

/* --- Tracking bands at different speeds for layered interference --- */
.vhs-tracking {
  position: absolute;
  left: 0; right: 0;
  top: -80px;
  mix-blend-mode: screen;
  filter: blur(1px);
}
.vhs-tracking-1 {
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.22) 48%,
    rgba(160,200,255,0.26) 50%,
    rgba(255,255,255,0.22) 52%,
    rgba(255,255,255,0.04) 70%,
    transparent 100%
  );
  animation: vhsTrack 9s linear infinite;
}
.vhs-tracking-2 {
  height: 18px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,180,180,0.30) 50%,
    transparent 100%
  );
  animation: vhsTrack 5.4s linear infinite -2s;
}
.vhs-tracking-3 {
  height: 6px;
  background: rgba(255,255,255,0.55);
  animation: vhsTrack 3.7s linear infinite -1.2s;
  filter: blur(2px);
}
@keyframes vhsTrack {
  0%   { top: -100px; }
  92%  { top: 100%; }
  100% { top: 100%; }
}

/* --- Vignette: dark corners like an old TV --- */
.vhs-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.22) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .vhs-noise    { animation: none; }
  .vhs-tracking { animation: none; display: none; }
}

/* =========================================================
   8. FAKE "VIRUS" POPUP ADS
   ========================================================= */
.virus-popup {
  position: fixed;
  background: #fff;
  border: 2px solid #000;
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    0 0 28px rgba(255, 80, 80, 0.55);
  font-family: "Tahoma", "Arial", sans-serif;
  color: #000;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.virus-popup.virus-visible {
  opacity: 1;
  transform: scale(1);
}
.virus-popup.virus-dismiss {
  opacity: 0;
  transform: scale(0.92);
}

.virus-titlebar {
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  user-select: none;
  color: #fff;
  background: linear-gradient(180deg, #ff2d2d 0%, #b00000 100%);
  overflow: hidden;
  min-height: 20px;
}
.virus-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.virus-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 13px;
  padding: 0;
  margin: 0;
  border: 1px solid #222;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #d8d4c0 100%);
  color: #000;
  font-family: "Tahoma", "Arial", sans-serif;
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  text-shadow: none;
  flex-shrink: 0;
  flex-grow: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.virus-close:hover {
  background: linear-gradient(180deg, #ffe2e2, #ff5555);
  border-color: #a00;
  color: #fff;
}

.virus-body {
  padding: 14px 14px 12px;
  background: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
.virus-popup[dir="rtl"] .virus-body { text-align: center; }
.virus-text {
  margin-bottom: 12px;
  color: #000;
}
.virus-text code {
  background: #f0f0e0;
  border: 1px solid #c0c0a0;
  padding: 0 4px;
  font-family: "Lucida Console", "Consolas", monospace;
  font-size: 11px;
}

.virus-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.virus-cta {
  background: linear-gradient(180deg, #ffe600 0%, #ff8800 100%);
  border: 2px outset #ffd400;
  padding: 7px 18px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
  animation: virusPulse 0.7s ease-in-out infinite alternate;
  letter-spacing: 0.4px;
}
.virus-cta:hover {
  background: linear-gradient(180deg, #fff200 0%, #ffaa00 100%);
}
.virus-cta-2 {
  background: linear-gradient(180deg, #ffffff 0%, #d0d0d0 100%);
  border: 2px outset #d0d0d0;
  text-shadow: none;
  animation: none;
}

@keyframes virusPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* --- Per-template variants --- */
/* Animate via background swap (not filter) so the close button
   inside the title bar doesn't flicker along with it. */
.virus-congrats .virus-titlebar {
  animation: virusFlashRed 0.7s steps(2) infinite;
}
@keyframes virusFlashRed {
  0%, 49%   { background: linear-gradient(180deg, #ff2d2d 0%, #b00000 100%); }
  50%, 100% { background: linear-gradient(180deg, #ff8080 0%, #e22222 100%); }
}

.virus-alert .virus-titlebar {
  background: repeating-linear-gradient(
    45deg,
    #f7d100 0 16px,
    #000 16px 32px
  );
  color: #000;
  text-shadow: 1px 1px 0 #fff;
}

.virus-prize .virus-titlebar {
  background: linear-gradient(90deg, #ff00b8, #00ffaa, #ff00b8);
  background-size: 200% 100%;
  animation: virusSlide 2.4s linear infinite;
  color: #fff;
}
@keyframes virusSlide {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
.virus-prize {
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 0, 184, 0.6);
}

.virus-error .virus-titlebar {
  background: linear-gradient(180deg, #c8c8c8, #808080);
  color: #000;
  text-shadow: none;
}
.virus-error .virus-body {
  background: #d4d0c8;
}

/* =========================================================
   9. CLASSIC WINDOWS XP CURSORS
   ========================================================= */

/* Default arrow — chunky white with black outline (XP Luna style) */
html, body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='42' viewBox='0 0 22 24'><path d='M 1 1 L 1 20 L 6 16 L 9 22 L 12 21 L 9 15 L 15 15 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.5' stroke-linejoin='round'/></svg>") 2 2, default;
}

/* Hand pointer for clickable elements */
button,
a,
.desktop-icon,
.start-item,
.start-item-r,
#start-btn,
.virus-cta,
.virus-close,
.lock-user,
.lock-foot-left,
.media-item,
.lang-btn,
.title-bar-controls button,
.start-footer button,
[role="button"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='44' viewBox='0 0 22 26'><path d='M 8 2 L 8 13 L 6 13 L 6 11 L 4 11 L 4 18 L 6 24 L 16 24 L 18 22 L 18 16 L 16 14 L 16 13 L 14 13 L 14 12 L 12 12 L 12 11 L 10 11 L 10 2 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.4' stroke-linejoin='round'/></svg>") 15 3, pointer;
}

/* Move cursor on draggable title bars */
.win .title-bar {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 22 22'><path d='M 11 1 L 7 5 L 9 5 L 9 9 L 5 9 L 5 7 L 1 11 L 5 15 L 5 13 L 9 13 L 9 17 L 7 17 L 11 21 L 15 17 L 13 17 L 13 13 L 17 13 L 17 15 L 21 11 L 17 7 L 17 9 L 13 9 L 13 5 L 15 5 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'/></svg>") 19 19, move;
}

/* Text I-beam for inputs */
input[type="text"],
input[type="email"],
input:not([type]),
textarea {
  cursor: text;
}

/* =========================================================
   10. PIXEL FIRE EXPLOSION ON CLICK
   ========================================================= */
.click-boom {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 1px;
  height: 1px;
}

/* (1) White-hot initial flash */
.boom-flash {
  position: absolute;
  width: 36px;
  height: 36px;
  left: -18px;
  top: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffee44 45%, rgba(255,170,0,0.4) 70%, transparent 100%);
  animation: boomFlash 0.22s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes boomFlash {
  0%   { transform: scale(0.25); opacity: 1; }
  100% { transform: scale(2.6);  opacity: 0; }
}

/* (2) Pixel-art explosion sprite (rasterized PNG with transparent bg) */
.boom-burst {
  position: absolute;
  width: 64px;
  height: 64px;
  left: -32px;
  top: -32px;
  background: url("assets/boom.png") no-repeat center / contain;
  animation: boomBurst 0.55s ease-out forwards;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.85));
}
@keyframes boomBurst {
  0%   { transform: scale(0.15) rotate(0deg);    opacity: 0; }
  15%  { transform: scale(1.0)  rotate(8deg);    opacity: 1; }
  55%  { transform: scale(1.55) rotate(28deg);   opacity: 0.95; }
  100% { transform: scale(2.05) rotate(45deg);   opacity: 0; }
}

/* (3) Pixel debris particles — fire-colored, fly outward */
.boom-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  left: -2px;
  top: -2px;
  background: #ff6600;
  box-shadow: 0 0 4px 1px rgba(255, 80, 0, 0.7);
  animation: boomParticle 0.55s ease-out forwards;
  --dx: 0px;
  --dy: 0px;
  image-rendering: pixelated;
}
@keyframes boomParticle {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* (4) Smoke puffs drifting upward after the blast */
.boom-smoke {
  position: absolute;
  width: 7px;
  height: 7px;
  left: -3.5px;
  top: -3.5px;
  background: rgba(60, 60, 60, 0.75);
  border-radius: 50%;
  filter: blur(2px);
  animation: boomSmoke 0.65s ease-out forwards;
  --dx: 0px;
  --dy: 0px;
  opacity: 0;
}
@keyframes boomSmoke {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  25%  { opacity: 0.75; }
  100% { transform: translate(var(--dx), var(--dy)) scale(2.0); opacity: 0; }
}