/* ════════════════════════════════════════════════
   ZOC × XIN · 千禧年 Y2K 蓝天版
   ════════════════════════════════════════════════ */

@font-face {
  font-family: 'PressStart';
  src: url('fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Zpix';
  src: url('fonts/zpix.woff2') format('woff2');
  font-display: swap;
}

:root {
  --railw: clamp(46px, 4.4vw, 64px);
  --sky1: #b3eeff;
  --sky2: #6ed6f8;
  --sky3: #2ba9de;
  --sky4: #1a8ec4;
  --mint: #b9f4e4;
  --lilac: #cfbcff;
  --pink: #ffb7da;
  --butter: #ffe6a0;
  --ink: #0d5c7d;
  --ink-soft: #2b87a8;
  --paper: #ffffff;
  --shadow: 0 10px 22px rgba(12, 86, 122, .22);
  --font-p: 'Zpix', 'PingFang SC', system-ui, sans-serif;
  --font-x: 'PressStart', 'Zpix', monospace;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-p);
  color: var(--ink);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 4%, #d9f7ff 0%, rgba(217, 247, 255, 0) 55%),
    linear-gradient(178deg, var(--sky1) 0%, var(--sky2) 38%, var(--sky3) 72%, var(--sky4) 100%);
}

/* 半调网点 —— 千禧年的印刷感 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .75) 1px, transparent 1.2px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

/* ══════ 天空装饰 ══════ */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.cloudy {
  position: absolute;
  background: #fff;
  border-radius: 999px;
  filter: blur(.3px);
  opacity: .85;
  box-shadow: 0 10px 20px rgba(36, 132, 175, .12);
}
.cloudy::before,
.cloudy::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloudy::before { width: 62%; height: 150%; left: 8%; top: -70%; }
.cloudy::after { width: 44%; height: 130%; right: 10%; top: -52%; }

.c1 { width: 210px; height: 58px; left: -40px; top: 16%; animation: drift 46s linear infinite; }
.c2 { width: 150px; height: 44px; left: 62%; top: 8%; opacity: .7; animation: drift 62s linear infinite reverse; }
.c3 { width: 250px; height: 66px; left: 20%; bottom: 12%; opacity: .55; animation: drift 74s linear infinite; }
.c4 { width: 120px; height: 38px; right: 6%; bottom: 26%; opacity: .6; animation: drift 54s linear infinite reverse; }

@keyframes drift {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(108vw); }
}

.bub {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0%, rgba(255, 255, 255, .55) 26%, rgba(180, 240, 255, .28) 55%, rgba(255, 255, 255, .1) 75%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .8), 0 6px 14px rgba(23, 137, 182, .16);
  animation: float 11s ease-in-out infinite;
}
.b1 { width: 86px; height: 86px; left: 3%; top: 62%; }
.b2 { width: 46px; height: 46px; left: 12%; top: 26%; animation-delay: -3s; }
.b3 { width: 120px; height: 120px; right: 4%; top: 58%; animation-delay: -6s; }
.b4 { width: 34px; height: 34px; right: 18%; top: 20%; animation-delay: -1.5s; }
.b5 { width: 62px; height: 62px; left: 46%; bottom: 4%; animation-delay: -8s; opacity: .8; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.04); }
}

.tw {
  position: absolute;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 0 10px #fff, 0 0 22px rgba(255, 255, 255, .8);
  animation: twinkle 3.2s ease-in-out infinite;
}
.t1 { left: 8%; top: 8%; animation-delay: -.4s; }
.t2 { left: 72%; top: 84%; animation-delay: -1.2s; font-size: 15px; }
.t3 { right: 8%; top: 12%; animation-delay: -2s; }
.t4 { left: 30%; bottom: 16%; animation-delay: -.8s; font-size: 14px; }
.t5 { left: 54%; top: 6%; animation-delay: -1.7s; font-size: 17px; }

@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(24deg); }
}

/* ══════ 窗口 ══════ */
.desk {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.window {
  position: relative;
  width: min(1080px, 100%);
  height: min(720px, 100%);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, .9);
  background: linear-gradient(165deg, rgba(255, 255, 255, .5), rgba(214, 246, 255, .3));
  box-shadow:
    0 26px 60px rgba(11, 80, 115, .34),
    0 2px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 6px rgba(255, 255, 255, .18);
  overflow: hidden;
  animation: pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes pop {
  from { transform: scale(.94) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.window.minimized { height: 46px; }

/* ── 标题栏 ── */
.titlebar {
  position: relative;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
  background:
    linear-gradient(90deg, #b8f2e2 0%, #8ee2ff 34%, #a9d8ff 62%, #d3bfff 100%);
  overflow: hidden;
}
.titlebar::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.dots { display: flex; gap: 7px; }
.dots i {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(11, 80, 115, .2);
}
.dots i:nth-child(1) { background: radial-gradient(circle at 35% 30%, #fff, #ffc0e0); }
.dots i:nth-child(2) { background: radial-gradient(circle at 35% 30%, #fff, #c8f0ff); }
.dots i:nth-child(3) { background: radial-gradient(circle at 35% 30%, #fff, #d8c8ff); }

.win-title {
  font-family: var(--font-x);
  font-size: 12px;
  letter-spacing: 1px;
  color: #0c5570;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
}

.win-tag {
  font-family: var(--font-x);
  font-size: 8px;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, #59c6ef, #2a9dd2);
  padding: 4px 8px 3px;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 2px 6px rgba(20, 100, 140, .3);
}

.win-btns { margin-left: auto; display: flex; gap: 7px; z-index: 1; }
.wbtn {
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  font-family: var(--font-p);
  font-size: 12px;
  line-height: 1;
  color: #12678a;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 2px 5px rgba(14, 90, 125, .2);
  cursor: pointer;
  transition: transform .15s, background .2s;
}
.wbtn:hover { background: #fff; transform: translateY(-1px); }
.wbtn.close { background: linear-gradient(180deg, #ffd3e6, #ffb0d2); color: #a2265a; }

/* ── 主体 ── */
.body {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 10px;
}

/* ── 左侧：竖排头像图标（贴天空，不再单独一条底板） ── */
.rail {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  width: var(--railw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(3px, .9vh, 9px);
  background: none;
}

.sticker-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 6px 9px rgba(6, 62, 94, .35));
  transition: transform .26s cubic-bezier(.2, 1.5, .4, 1), filter .26s;
}
.sticker-btn img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  transform: scale(var(--s, 1));
  transition: transform .26s cubic-bezier(.2, 1.5, .4, 1);
  -webkit-user-drag: none;
  user-select: none;
}
.sticker-btn .name {
  margin-top: 2px;
  font-family: var(--font-x);
  font-size: clamp(9px, .84vw, 11px);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 0 #0a5570, 0 2px 0 #0a5570, 0 0 3px rgba(6, 50, 74, .95), 0 0 8px rgba(6, 50, 74, .55);
  transition: color .2s, text-shadow .2s;
}
.sticker-btn:hover,
.sticker-btn:focus-visible {
  transform: translateY(-4px);
  filter: drop-shadow(0 11px 14px rgba(6, 62, 94, .45));
}
.sticker-btn:hover img,
.sticker-btn:focus-visible img { transform: scale(calc(var(--s, 1) * 1.07)); }
.sticker-btn.active .name {
  color: #fff3b0;
  text-shadow: 0 2px 0 rgba(8, 84, 120, .55), 0 0 10px rgba(255, 236, 160, .9);
}
.sticker-btn.active img {
  transform: scale(calc(var(--s, 1) * 1.05));
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .85));
}


/* 星屑拖尾：绝对定位铺在天空上，不参与排版 */
.trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.trail i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--s);
  font-style: normal;
  color: #fff;
  opacity: .85;
  text-shadow: 0 0 8px rgba(255, 255, 255, .95);
  animation: twinkle 3.2s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes twinkle {
  from { opacity: .25; transform: scale(.7); }
  to   { opacity: 1;   transform: scale(1.15); }
}

/* ── 主屏 ── */
.screen {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 84% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 62%),
    linear-gradient(176deg, #7fe3ff 0%, #45c9f2 34%, #1fb0e4 72%, #1590c8 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42), inset 0 16px 34px rgba(255, 255, 255, .3);
}

/* 主屏里的天空细节 */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.3px);
  background-size: 7px 7px;
  mix-blend-mode: soft-light;
}

.sky-in { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.icloud {
  position: absolute;
  background: rgba(255, 255, 255, .96);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(20, 110, 150, .16);
}
.icloud::before, .icloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.icloud::before { width: 58%; height: 148%; left: 10%; top: -68%; }
.icloud::after { width: 42%; height: 126%; right: 12%; top: -48%; }

.i1 { width: 190px; height: 50px; left: -30px; top: 44%; animation: drift2 68s linear infinite; }
.i2 { width: 130px; height: 36px; left: 40%; bottom: 14%; opacity: .9; animation: drift2 84s linear infinite reverse; }
.i3 { width: 90px; height: 26px; left: 66%; top: 62%; opacity: .75; animation: drift2 58s linear infinite; }
.i4 { width: 150px; height: 40px; left: 18%; top: 12%; opacity: .55; animation: drift2 96s linear infinite reverse; }
.i5 { width: 116px; height: 32px; left: 4%; top: 20%; opacity: .8; animation: drift2 108s linear infinite; }

@keyframes drift2 {
  from { transform: translateX(-40%); }
  to   { transform: translateX(560px); }
}

.itw {
  position: absolute;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 0 8px #fff, 0 0 18px rgba(255, 255, 255, .9);
  animation: twinkle 3.6s ease-in-out infinite;
}
.itw.k1 { left: 36%; top: 22%; animation-delay: -.6s; }
.itw.k2 { left: 52%; bottom: 30%; animation-delay: -1.8s; font-size: 12px; }
.itw.k3 { right: 26%; bottom: 16%; animation-delay: -2.6s; font-size: 18px; }
.itw.k4 { left: 58%; top: 58%; animation-delay: -1.1s; font-size: 11px; }
.itw.k5 { right: 16%; top: 12%; animation-delay: -3.1s; font-size: 13px; }
.itw.k6 { left: 30%; top: 66%; animation-delay: -2.2s; font-size: 15px; }

/* 底部一层薄雾，让天空有远近 */
.sky-in::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35));
}

.sun {
  position: absolute;
  top: -4px;
  right: 10px;
  width: 186px;
  height: 186px;
  object-fit: contain;
  filter: drop-shadow(6px 8px 0 rgba(10, 92, 132, .14)) drop-shadow(0 12px 20px rgba(20, 105, 145, .22));
  animation: bob 7s ease-in-out infinite;
  z-index: 2;
  transition: opacity .45s, transform .55s;
  pointer-events: none;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(3deg) scale(1.03); }
}
.screen.is-open .sun { opacity: 0; transform: scale(.6) translateY(-30px); }

/* ── 弹出的相册窗口（Windows 7 风格） ── */
.subwin {
  position: absolute;
  inset: 14px 14px 12px calc(var(--railw) + 24px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #f3fbff;
  border: 1px solid #8fc7de;
  box-shadow: 0 2px 3px rgba(6, 48, 70, .2), 0 18px 40px rgba(6, 52, 76, .38), 0 0 0 3px rgba(255, 255, 255, .5);
  animation: winpop .26s cubic-bezier(.2, 1.3, .45, 1) both;
}
@keyframes winpop {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.subwin[hidden] { display: none !important; }
.subwin.maxed { inset: 0; border-radius: 0; }

.subbar {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 10px;
  background: linear-gradient(180deg, #f2fdff 0%, #d3f0fc 44%, #b6e4f7 45%, #dcf4fd 100%);
  border-bottom: 1px solid #8cc6dd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}
.sub-ico {
  font-size: 10px;
  color: #14708f;
  text-shadow: 0 1px 0 #fff;
}
.sub-title {
  flex: 1;
  font-family: var(--font-p);
  font-size: 12px;
  letter-spacing: .12em;
  color: #0c5876;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-btns { display: flex; gap: 4px; }
.sbtn {
  width: 26px;
  height: 19px;
  padding: 0;
  border: 1px solid #79b2cc;
  border-radius: 4px;
  font-family: var(--font-p);
  font-size: 11px;
  line-height: 1;
  color: #0e6180;
  background: linear-gradient(180deg, #ffffff, #dff4fd 45%, #c2e8f8 46%, #e8f8fe);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(8, 60, 84, .18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbtn:hover { background: linear-gradient(180deg, #ffffff, #d2f1fd 45%, #a6ddf4 46%, #dcf4fd); }
.sbtn:active { transform: translateY(1px); }
.sbtn.close {
  border-color: #c05138;
  color: #fff;
  background: linear-gradient(180deg, #ffd9cf, #f89073 45%, #e2543b 46%, #f9a186);
  text-shadow: 0 1px 0 rgba(120, 30, 10, .5);
}
.sbtn.close:hover { background: linear-gradient(180deg, #ffe4dc, #fa9d83 45%, #ea5c42 46%, #ffb49c); }

.subbody {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #eaf8ff, #f7fdff 40%, #eef9ff);
}

/* 瀑布流：照片按原比例，不裁头 */
.grid {
  column-width: 172px;
  column-gap: 14px;
}

.card {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 6px 6px 6px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(9, 74, 106, .24);
  cursor: pointer;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transform: rotate(var(--rot, 0deg));
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s;
  animation: cardin .45s ease both;
}
.grid .card:nth-child(3n+1) { --rot: -1.6deg; }
.grid .card:nth-child(3n+2) { --rot: 1.1deg; }
.grid .card:nth-child(3n)   { --rot: -.5deg; }

.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #eaf9ff;
}
.card:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.035);
  box-shadow: 0 16px 28px rgba(9, 74, 106, .3);
  z-index: 2;
}

@keyframes cardin {
  from { opacity: 0; transform: translateY(14px) scale(.96) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

/* ── 底栏 ── */
.taskbar {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(226, 248, 255, .92));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9) inset;
}

.tb-star {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff2b8, #ffd76e);
  color: #a87a13;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 2px 6px rgba(21, 110, 150, .2);
  transition: transform .2s;
}
.tb-star:hover { transform: rotate(18deg) scale(1.1); }

.tb-label {
  font-family: var(--font-x);
  font-size: 8px;
  letter-spacing: 1px;
  color: #2a8aab;
}

.tb-gap { flex: 1; }

.tb-btn {
  width: 26px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .9);
  color: #12678a;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(14, 90, 125, .18);
  transition: transform .2s;
}
.tb-btn:hover { transform: translateY(-1px); }

.clock {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-x);
  font-size: 9px;
  color: #12678a;
  background: rgba(255, 255, 255, .85);
  padding: 7px 10px 6px;
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(14, 90, 125, .16), 0 1px 0 #fff inset;
}

/* ══════ 大图 ══════ */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(20, 120, 160, .55);
  backdrop-filter: blur(8px);
  z-index: 50;
  animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lb-figure {
  margin: 0;
  max-width: min(78vw, 720px);
  max-height: 86vh;
  background: #fff;
  padding: 10px 10px 6px;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(6, 60, 90, .45);
  transform: rotate(-.6deg);
}
.lb-figure img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  border-radius: 8px;
}
.lb-cap {
  font-family: var(--font-x);
  font-size: 8px;
  letter-spacing: 1px;
  color: #4a8ca6;
  text-align: center;
  padding: 8px 0 4px;
}

.lb-close,
.lb-nav {
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: #12678a;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(6, 60, 90, .3);
  transition: transform .2s, background .2s;
}
.lb-close { position: absolute; top: 22px; right: 24px; width: 40px; height: 40px; font-size: 20px; }
.lb-nav { width: 46px; height: 46px; font-size: 26px; line-height: 1; }
.lb-close:hover, .lb-nav:hover { background: #fff; transform: scale(1.08); }

/* ══════ 天黑 ══════ */
.night {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: linear-gradient(180deg, #0d2b52 0%, #173f74 55%, #1f4f88 100%);
  cursor: pointer;
  animation: fade .5s ease both;
}
.moon {
  position: absolute;
  top: 14%;
  right: 18%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffdf2, #ffe9b0 60%, #f3d089);
  box-shadow: 0 0 44px rgba(255, 232, 176, .65), 0 0 90px rgba(255, 232, 176, .35);
  animation: bob 8s ease-in-out infinite;
}
.nstar {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 10px #cfe7ff;
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* ══════ 手机 ══════ */
@media (max-width: 820px) {
  .desk { padding: 10px; }
  .window { height: 100%; border-radius: 18px; }
  .win-tag { display: none; }

  .body { flex-direction: column; padding: 7px; gap: 0; }

  /* 手机：图标横排浮在天空左上 */
  .rail {
    position: absolute;
    left: 8px;
    top: 8px;
    right: 8px;
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
  }
  .sticker-btn { flex: 0 0 auto; width: clamp(38px, 10.5vw, 48px); }
  .sticker-btn img { border-radius: 10px; }

  .subwin { inset: 64px 8px 8px 8px; }

  .screen { border-radius: 10px; }
  .sun { width: 96px; height: 96px; right: 8px; top: 8px; }

  .taskbar { gap: 6px; padding: 0 8px; }
  .tb-label { font-size: 8px; letter-spacing: 0; }
  .clock { font-size: 9px; gap: 5px; }
  .icloud.i4 { display: none; }

  .gallery { padding: 8px 10px 16px; }
  .grid { column-width: 108px; column-gap: 9px; }
  .card { padding: 4px 4px 4px; border-radius: 9px; margin-bottom: 9px; }
  .card img { border-radius: 6px; }

  .taskbar { flex: 0 0 34px; padding: 0 10px; gap: 7px; }
  .clock { font-size: 8px; padding: 5px 7px 4px; }
  .lb-nav { display: none; }
  .lb-figure { max-width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}