/* 준환 OS 2004 — desktop: wallpaper, launcher, icons, sticky note, taskbar, start menu, context menu, boot. */

:root {
  --launcher-w: 268px;
  --icon-w: 92px;
}

/* ---------- boot (base look; extras.css may animate it) ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #24497a 0%, #11233d 55%, #08111f 100%);
  color: #fff;
}
.boot-inner { display: grid; justify-items: center; gap: 14px; }
.boot-logo { width: 84px; height: 84px; filter: drop-shadow(0 8px 18px rgba(255, 138, 43, 0.35)); }
.boot-name { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: 0.01em; }
.boot-name b { font-weight: 400; color: #ffb35c; }
.boot-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #5b7aa3;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
}
.boot-bar i {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: var(--c-led-on);
  opacity: 0.18;
  animation: boot-blink 1.2s ease-in-out infinite;
}
.boot-bar i:nth-child(2) { animation-delay: 0.1s; }
.boot-bar i:nth-child(3) { animation-delay: 0.2s; }
.boot-bar i:nth-child(4) { animation-delay: 0.3s; }
.boot-bar i:nth-child(5) { animation-delay: 0.4s; }
.boot-bar i:nth-child(6) { animation-delay: 0.5s; }
.boot-bar i:nth-child(7) { animation-delay: 0.6s; }
.boot-bar i:nth-child(8) { animation-delay: 0.7s; }
@keyframes boot-blink { 40% { opacity: 1; } }
.boot-msg { font-size: 13px; color: var(--c-bar-ink-2); }

.noscript {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  background: var(--c-paper);
  text-align: center;
}

/* ---------- desktop frame ---------- */
#desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- wallpaper ---------- */
#wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--c-sky-1) 0%, var(--c-sky-2) 40%, var(--c-sky-3) 68%, #f1fbff 76%);
}
.wp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wp-sun {
  position: absolute;
  left: 30%;
  top: 5%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 26%, rgba(255, 246, 196, 0.75) 38%, rgba(255, 246, 196, 0.22) 56%, rgba(255, 255, 255, 0) 70%);
}
.wp-cloud {
  position: absolute;
  width: 220px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(40, 110, 170, 0.14));
  animation: cloud-drift 120s linear infinite alternate;
}
.wp-cloud--1 { left: 8%; top: 9%; width: 240px; opacity: 0.95; }
.wp-cloud--2 { left: 58%; top: 4%; width: 170px; opacity: 0.85; animation-duration: 150s; animation-direction: alternate-reverse; }
.wp-cloud--3 { left: 40%; top: 22%; width: 130px; opacity: 0.7; animation-duration: 100s; }
.wp-cloud--4 { left: 76%; top: 30%; width: 200px; opacity: 0.8; animation-duration: 170s; animation-direction: alternate-reverse; }
@keyframes cloud-drift { to { transform: translateX(90px); } }
.wp-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 38%;
  min-height: 220px;
}
.wp-sparkles i {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fffbd0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}
.wp-sparkles i:nth-child(1) { left: 37%; top: 25%; }
.wp-sparkles i:nth-child(2) { left: 67%; top: 23%; width: 16px; height: 16px; }
.wp-sparkles i:nth-child(3) { left: 43%; top: 47%; width: 14px; height: 14px; }
.wp-sparkles i:nth-child(4) { left: 63%; top: 46%; }
.wp-sparkles i:nth-child(5) { left: 53%; top: 19%; width: 12px; height: 12px; }
.wp-sparkles i:nth-child(6) { left: 72%; top: 37%; width: 18px; height: 18px; }
.is-sparkle .wp-sparkles i { animation: twinkle 1.2s var(--ease-out) both; }
.is-sparkle .wp-sparkles i:nth-child(2) { animation-delay: 0.12s; }
.is-sparkle .wp-sparkles i:nth-child(3) { animation-delay: 0.24s; }
.is-sparkle .wp-sparkles i:nth-child(4) { animation-delay: 0.08s; }
.is-sparkle .wp-sparkles i:nth-child(5) { animation-delay: 0.3s; }
.is-sparkle .wp-sparkles i:nth-child(6) { animation-delay: 0.18s; }
@keyframes twinkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(90deg); }
}
.is-sparkle .wordmark { animation: wm-pop 700ms var(--ease-out); }
@keyframes wm-pop { 30% { transform: translateY(-6px) scale(1.03); } }

/* ---------- hero wordmark ---------- */
#hero {
  position: absolute;
  z-index: 1;
  left: calc(var(--launcher-w) + 48px);
  right: calc(var(--icon-w) * 2 + 40px);
  top: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: #fff;
  white-space: nowrap;
}
html[lang="en"] .wordmark { font-size: clamp(40px, 5.4vw, 86px); }
.wm-main {
  text-shadow:
    0 1px 0 #d8efff,
    0 2px 0 #2a8fd8,
    0 4px 0 #2079bd,
    0 6px 0 #1a64a0,
    0 8px 0 #154f80,
    0 14px 22px rgba(10, 45, 90, 0.35);
}
.wm-year {
  position: relative;
  padding: 0.2em 0.42em 0.14em;
  border: 0.06em solid #fff;
  border-radius: 0.42em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ff9d42, #e2560f);
  color: #fff;
  font-size: 0.42em;
  text-shadow: 0 2px 0 #a8400b;
  box-shadow: 0 0.12em 0 #a8400b, 0 0.3em 0.5em rgba(120, 40, 0, 0.3);
  transform: rotate(-7deg) translateY(-0.55em);
}
.hero-tag {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  margin-top: 22px;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--sh-1);
}
.hero-hint { color: var(--c-ink-2); font-weight: 700; }
.hero-hint::before { content: "·"; margin: 0 8px; color: var(--c-ink-3); }

/* ---------- launcher (metal menu player) ---------- */
#launcher {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 22px;
  width: var(--launcher-w);
}
.lp {
  position: relative;
  padding: 0 14px 12px;
  border: 1px solid #8a99ab;
  border-radius: 30px;
  background:
    radial-gradient(120% 55% at 25% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(20, 40, 70, 0.025) 1px 3px),
    linear-gradient(180deg, #f4f7fa 0%, #d3dce5 52%, #e7ecf1 74%, #bcc7d3 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 8px rgba(20, 40, 70, 0.1),
    0 2px 0 rgba(255, 255, 255, 0.5),
    0 14px 28px rgba(12, 34, 64, 0.24),
    0 30px 60px rgba(12, 34, 64, 0.2);
}
.lp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -14px;
  padding: 11px 20px 9px;
  border-radius: 29px 29px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(37, 196, 178, 0.75), rgba(17, 140, 160, 0.82));
  border-bottom: 1px solid rgba(8, 90, 100, 0.45);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.lp-model {
  color: #032b30;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lp-lamps { display: flex; gap: 5px; }
.lp-lamps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6ffe9, #2fd27a 60%, #138a49);
  box-shadow: 0 0 6px rgba(80, 255, 160, 0.8);
}
.lp-lamps i + i { background: radial-gradient(circle at 35% 30%, #fff0d0, #ffb347 60%, #c46a00); box-shadow: 0 0 6px rgba(255, 180, 70, 0.7); }

.lp-screen {
  position: relative;
  margin: 12px 0 12px;
  padding: 8px 9px;
  border: 1px solid #4c5b6b;
  border-radius: 13px;
  background: var(--c-led-bg);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.95);
}
.lp-led { width: 100%; height: 56px; }
.lp-glass {
  position: absolute;
  inset: 2px 2px 50% 2px;
  border-radius: 11px 11px 40% 40% / 11px 11px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.lp-menu {
  display: grid;
  gap: 7px;
  list-style: none;
}
.lp-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px 7px 8px;
  border: 1px solid #a6b3c2;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f6 50%, #e1e7ee 51%, #e9eef3 100%);
  color: var(--c-ink);
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12, 34, 64, 0.14);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.lp-item:hover {
  border-color: #5fa9e0;
  background: linear-gradient(180deg, #ffffff 0%, #e6f5ff 50%, #cfeafc 51%, #dcf1fe 100%);
}
.lp-item:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(12, 34, 64, 0.18); }
.lp-icon { width: 34px; height: 34px; filter: var(--sh-icon); }
.lp-text { display: grid; min-width: 0; }
.lp-title { font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.lp-sub { color: var(--c-ink-3); font-size: 12px; font-weight: 700; line-height: 1.3; }
.lp-track {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: #213247;
  color: #8ff3ff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.lp-item:hover .lp-track, .lp-item:focus-visible .lp-track { color: #5dffa5; }
.lp-item:hover .lp-track::before, .lp-item:focus-visible .lp-track::before { content: "▶"; font-size: 9px; }
.lp-item:hover .lp-track, .lp-item:focus-visible .lp-track { font-size: 0; }
.lp-item:hover .lp-track::before, .lp-item:focus-visible .lp-track::before { font-size: 10px; }

.lp-grille {
  height: 26px;
  margin: 14px 34px 2px;
  border-radius: 13px;
  background: radial-gradient(circle, #6f7f91 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  opacity: 0.75;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
}

/* ---------- desktop icons ---------- */
#icons {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 96px);
  grid-auto-columns: var(--icon-w);
  gap: 4px 2px;
  direction: rtl; /* first column on the right, like a real desktop */
  align-content: start;
}
.dicon {
  direction: ltr;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: var(--icon-w);
  height: 96px;
  padding: 6px 3px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dicon-img { position: relative; display: block; width: 48px; height: 48px; }
.dicon-img img { width: 48px; height: 48px; filter: var(--sh-icon); transition: transform var(--t-fast) var(--ease-out); }
.dicon-label {
  max-width: 100%;
  padding: 1px 6px 2px;
  border-radius: 6px;
  background: rgba(12, 38, 68, 0.66);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.dicon:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); }
.dicon:hover .dicon-img img { transform: translateY(-2px); }
.dicon.is-selected { background: rgba(42, 127, 212, 0.3); border-color: rgba(255, 255, 255, 0.75); }
.dicon.is-selected .dicon-label { background: #1a5ea8; }
.dicon--link .dicon-img::after {
  /* shortcut arrow badge */
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 17px;
  height: 17px;
  border: 1px solid #6f8296;
  border-radius: 4px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11c0-4 2.5-6 6-6' fill='none' stroke='%231a5ea8' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 2.5 12.5 5 9 7.5' fill='none' stroke='%231a5ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 1px 2px rgba(12, 34, 64, 0.3);
}

/* ---------- sticky note ---------- */
.sticky {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: calc(var(--icon-w) * 2 + 52px);
  width: 222px;
  padding: 26px 18px 18px;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(180, 150, 40, 0.22) 25px 26px) 0 50px / 100% calc(100% - 56px) no-repeat,
    linear-gradient(180deg, #fff6a3 0%, #ffec7a 100%);
  color: #3b3210;
  box-shadow: 0 1px 1px rgba(80, 60, 0, 0.12), 0 10px 18px rgba(80, 60, 0, 0.2);
  transform: rotate(2.4deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.sticky::before {
  /* tape */
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 78px;
  height: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%) rotate(-3deg);
}
.sticky::after {
  /* curled corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #e8cf4a 0 50%, transparent 50%);
}
.sticky-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #5a4600;
}
.sticky-list { list-style: none; display: grid; }
.sticky-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
}
.sticky-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border: 2px solid #8a7414;
  border-radius: 3px;
}
.sticky-list li.is-done { color: #6b5d1e; text-decoration: line-through; text-decoration-color: #c0392b; text-decoration-thickness: 2px; }
.sticky-list li.is-done::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #c0392b;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}

/* ---------- taskbar ---------- */
#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--taskbar-h);
  padding: 0 8px 0 5px;
  border-top: 1px solid #6487b4;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--c-bar-1) 0%, var(--c-bar-2) 55%, var(--c-bar-3) 100%);
  box-shadow: 0 -2px 12px rgba(4, 16, 32, 0.22);
  color: var(--c-bar-ink);
}
.tb-start {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 36px;
  padding: 0 16px 0 3px;
  border: 1px solid #05463a;
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0) 41%),
    linear-gradient(180deg, #0c7d67 0%, #0a6654 55%, #075141 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: filter var(--t-fast);
}
.tb-start:hover { filter: brightness(1.1); }
.tb-start.is-open { filter: brightness(0.92); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); }
.tb-start-orb { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }

.tb-windows {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px;
}
.tb-windows::-webkit-scrollbar { display: none; }

.tb-tray {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: 36px;
  padding: 0 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tray-btn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 5px;
  border-radius: 7px;
  color: var(--c-bar-ink);
}
.tray-btn:hover { background: rgba(255, 255, 255, 0.13); }
.tb-lang { display: inline-flex; align-items: center; gap: 2px; }
.lang-opt {
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--c-bar-ink-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
html[lang="ko"] .lang-opt--ko,
html[lang="en"] .lang-opt--en { background: var(--c-led-on); color: #052a33; }
.tb-sound .snd-on { display: none; }
.tb-sound[aria-pressed="true"] .snd-on { display: inline; }
.tb-sound[aria-pressed="true"] .snd-off { display: none; }
.tb-sound[aria-pressed="false"] { color: var(--c-bar-ink-2); }
.tb-clock {
  padding: 0 7px 0 5px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- start menu ---------- */
#startmenu {
  position: fixed;
  left: 6px;
  bottom: calc(var(--taskbar-h) + 6px);
  z-index: 60;
  width: min(470px, calc(100vw - 12px));
  max-height: calc(100% - var(--taskbar-h) - 12px);
  overflow-y: auto;
  border: 1px solid #50709a;
  border-radius: 16px;
  background: var(--c-paper);
  box-shadow: var(--sh-3);
  animation: sm-in 160ms var(--ease-out);
  transform-origin: 0 100%;
}
@keyframes sm-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.sm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #0a7a72 0%, #1a5ea8 55%, #4b3bb8 100%);
  color: #fff;
}
.sm-avatar {
  width: 48px;
  height: 48px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.sm-name { font-family: var(--font-display); font-size: 22px; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.sm-sub { font-size: 12.5px; font-weight: 700; }
.sm-cols { display: grid; grid-template-columns: 1fr 1fr; }
.sm-sec { padding: 8px; }
.sm-sec--links { background: var(--c-panel); border-left: 1px solid var(--c-line); }
.sm-h {
  padding: 4px 8px 6px;
  color: var(--c-ink-3);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sm-list { list-style: none; display: grid; gap: 1px; }
.sm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.sm-item:hover {
  border-color: #9ccbee;
  background: linear-gradient(180deg, #f2faff, #d6edfc);
}
.sm-icon { flex: none; width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(10, 30, 60, 0.25)); }
.sm-label { display: grid; min-width: 0; line-height: 1.25; }
.sm-label small { color: var(--c-ink-3); font-size: 11.5px; font-weight: 700; }
.sm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, #eef3f8, #dde6ef);
}
.sm-brand { color: var(--c-ink-2); font-family: var(--font-display); font-size: 14px; }
.sm-lang { min-height: 28px; padding: 3px 12px; }

/* ---------- context menu ---------- */
#ctxmenu {
  position: fixed;
  z-index: 70;
  min-width: 196px;
  padding: 5px;
  border: 1px solid var(--c-win-line);
  border-radius: 11px;
  background: var(--c-paper);
  box-shadow: var(--sh-2);
  animation: sm-in 120ms var(--ease-out);
  transform-origin: 0 0;
}
.ctx { display: grid; gap: 1px; }
.ctx-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--c-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}
.ctx-item:hover, .ctx-item:focus-visible {
  background: linear-gradient(180deg, #1f6fc0, #154f8f);
  color: #fff;
  outline: none;
  box-shadow: none;
}
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--c-line); }

/* placeholder body used by app stubs */
.app-stub {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  background: linear-gradient(180deg, #ffffff, var(--c-panel));
  color: var(--c-ink-2);
  font-weight: 700;
  text-align: center;
}

/* ---------- medium screens: a little tighter ---------- */
@media (max-width: 1180px) and (min-width: 768px) {
  :root { --launcher-w: 248px; --icon-w: 86px; }
  .sticky { display: none; }
  .lp-sub { font-size: 11.5px; }
}
@media (max-height: 720px) and (min-width: 768px) {
  .lp-grille { display: none; }
  .lp-item { padding-top: 5px; padding-bottom: 5px; }
  #hero { top: 22%; }
}
@media (max-height: 600px) and (min-width: 768px) {
  #launcher { top: 12px; }
  .lp-screen { margin: 8px 0; }
  .lp-led { height: 40px; }
  .lp-sub { display: none; }
  .lp-menu { gap: 5px; }
}

/* ---------- phones: one scrolling column ---------- */
@media (max-width: 767.98px) {
  #desktop {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 16px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #wallpaper { position: fixed; inset: 0 0 var(--taskbar-h) 0; }
  .wp-sun { left: 62%; top: 2%; width: 110px; height: 110px; }
  .wp-cloud--1 { left: -10%; top: 6%; width: 170px; }
  .wp-cloud--2 { left: 64%; top: 18%; width: 130px; }
  .wp-cloud--3, .wp-cloud--4 { display: none; }
  .wp-hills { height: 30%; min-height: 0; }
  .wp-sparkles i:nth-child(1) { left: 12%; top: 5%; }
  .wp-sparkles i:nth-child(2) { left: 82%; top: 4%; }
  .wp-sparkles i:nth-child(3) { left: 20%; top: 14%; }
  .wp-sparkles i:nth-child(4) { left: 74%; top: 13%; }
  .wp-sparkles i:nth-child(5) { left: 48%; top: 2%; }
  .wp-sparkles i:nth-child(6) { left: 90%; top: 10%; }

  #hero { position: relative; inset: auto; flex: none; }
  .wordmark { font-size: clamp(38px, 12.5vw, 60px); }
  .hero-tag { display: grid; justify-items: center; margin-top: 16px; padding: 7px 18px; border-radius: 18px; font-size: 13px; }
  .hero-hint { font-size: 12.5px; }
  .hero-hint::before { content: none; }

  #launcher {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
  }
  .lp { padding: 0 10px 10px; border-radius: 24px; }
  .lp-top { margin: 0 -10px; padding: 9px 18px 8px; border-radius: 23px 23px 0 0; }
  .lp-screen { margin: 10px 0; }
  .lp-led { height: 50px; }
  .lp-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lp-item { grid-template-columns: 28px minmax(0, 1fr); gap: 7px; padding: 6px 8px; border-radius: 12px; }
  .lp-icon { width: 28px; height: 28px; }
  .lp-title { font-size: 14px; }
  .lp-sub { font-size: 11.5px; }
  .lp-track, .lp-grille { display: none; }

  #icons {
    position: relative;
    inset: auto;
    flex: none;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 6px 2px;
    direction: ltr;
  }
  .dicon { width: auto; height: auto; min-height: 92px; }
  /* labels wrap only at spaces or before ".doc"/".cloud", never mid-word */
  .dicon-label { padding: 1px 4px 2px; font-size: 12px; overflow-wrap: normal; }

  .sticky {
    position: relative;
    inset: auto;
    flex: none;
    align-self: center;
    margin: 6px 0 4px;
  }

  #taskbar { gap: 6px; padding: 0 6px 0 4px; }
  .tb-start { padding: 0 12px 0 3px; }
  .tb-clock { padding: 0 4px 0 3px; font-size: 12px; }
  .tray-btn { min-width: 30px; padding: 0 3px; }
  .sm-cols { grid-template-columns: 1fr; }
  .sm-sec--links { border-left: 0; border-top: 1px solid var(--c-line); }
}

@media (max-width: 359.98px) {
  #icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-cloud { animation: none; }
}