/**
 * Aether 手绘天气样式（按 aether-weather.html 模板重构）
 * 手绘不规则圆角卡片 + 顶部动态天气场景 + 大号温度 + 条件胶囊
 * 卡片为自含式"贴纸"风格（浅色纸面 + 墨蓝文字），明暗主题下均可读
 * 所有类名 aw- 前缀，避免与站点样式冲突
 */

.weather-sketch {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 20px;
  position: relative;
  /* 模板字体，加载失败时回退到本地楷体/快乐体 */
  --aw-ink: #34435e;
  --aw-ink-soft: rgba(52, 63, 94, .62);
  --aw-line: rgba(52, 63, 94, .14);
  --aw-accent: #f2a65a;
  --aw-ease: cubic-bezier(.25, 1, .5, 1);
  --aw-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --aw-f-cn: 'ZCOOL KuaiLe', 'KaiTi', '楷体', 'STKaiti', cursive;
  --aw-f-temp: 'Baloo 2', 'ZCOOL KuaiLe', 'KaiTi', '楷体', sans-serif;
  color: var(--aw-ink);
  font-family: 'Quicksand', 'ZCOOL KuaiLe', 'Segoe UI', 'KaiTi', sans-serif;
}

/* ---------- 卡片网格：居中向外扩散 ---------- */
.aw-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
}

/* ---------- 卡片 ---------- */
.aw-card {
  --tilt: 0deg;
  position: relative;
  flex: 0 0 228px;
  border-radius: 26px 22px 30px 24px / 24px 30px 22px 28px; /* 手绘不规则圆角 */
  background: rgba(255, 255, 255, .86);
  border: 2px solid var(--aw-line);
  box-shadow: 0 12px 30px rgba(52, 63, 94, .12);
  overflow: hidden;
  cursor: pointer;
  transform: rotate(var(--tilt));
  transition: transform .3s var(--aw-ease), box-shadow .3s var(--aw-ease);
  animation: awCardIn .7s var(--aw-ease-expo) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes awCardIn {
  from { opacity: 0; transform: translateY(26px) rotate(var(--tilt)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
}
.aw-card:hover {
  transform: translateY(-8px) rotate(0deg);
  box-shadow: 0 22px 44px rgba(52, 63, 94, .18);
}

/* 拖拽排序 */
.aw-card { cursor: grab; }
.aw-card.dragging {
  opacity: .45;
  cursor: grabbing;
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 26px 52px rgba(52, 63, 94, .25);
  animation: none;
}
.aw-card .aw-remove { cursor: pointer; }

/* 水波纹 */
.aw-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(125, 180, 232, .5) 0%, rgba(125, 180, 232, .18) 55%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: awRip .65s var(--aw-ease) forwards;
  z-index: 6;
}
@keyframes awRip { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* 删除按钮 */
.aw-remove {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 8;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(52, 63, 94, .2);
  background: rgba(255, 255, 255, .9);
  color: var(--aw-ink);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .25s var(--aw-ease), transform .25s var(--aw-ease), background .2s;
}
.aw-card:hover .aw-remove, .aw-remove:focus-visible { opacity: 1; transform: none; }
.aw-remove:hover { background: #ffe1e1; border-color: #f2a0a0; }
@media (hover: none) { .aw-remove { opacity: 1; transform: none; } }

/* ---------- 卡片内容 ---------- */
.aw-body { padding: 12px 16px 15px; position: relative; z-index: 2; }
.aw-cityline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aw-cname {
  margin: 0;
  font-family: var(--aw-f-cn);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--aw-ink);
}
.aw-cen {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aw-ink-soft);
  font-weight: 700;
}
.aw-templine { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.aw-temp {
  font-family: var(--aw-f-temp);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--aw-ink);
}
.aw-temp i { font-style: normal; font-size: 1.5rem; vertical-align: .3em; color: var(--aw-accent); }
.aw-cond {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--aw-f-cn);
  font-size: .88rem;
  background: rgba(255, 255, 255, .65);
  border: 1.5px solid var(--aw-line);
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--aw-ink);
}
.aw-cond svg { width: 17px; height: 17px; flex: none; }
.aw-cond b { font-weight: 400; }
.aw-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1.5px dashed rgba(52, 63, 94, .16);
  font-size: .78rem;
  color: var(--aw-ink-soft);
  font-weight: 600;
}
.aw-stat { display: inline-flex; align-items: center; gap: 5px; }
.aw-stat b { color: var(--aw-ink); font-weight: 700; }
.aw-stat svg { width: 14px; height: 14px; opacity: .65; }

/* ================= 动态天气场景 ================= */
.aw-scene { position: relative; height: 148px; overflow: hidden; }
.aw-scene svg.aw-cloud-svg { display: block; width: 100%; height: auto; fill: currentColor; }
.aw-cloud {
  position: absolute;
  left: 0;
  top: var(--ty, 20%);
  width: var(--w, 90px);
  color: #fff;
  opacity: var(--o, .92);
  filter: blur(var(--b, 0px));
  animation: awDrift var(--dur, 44s) linear infinite;
  animation-delay: var(--del, 0s);
  will-change: transform;
}
@keyframes awDrift { from { transform: translateX(-150%); } to { transform: translateX(780%); } }
@keyframes awBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 晴朗 */
.aw-card[data-weather="sunny"] .aw-scene { background: linear-gradient(180deg, #a5d8ff, #ffefc9); }
.aw-sun {
  position: absolute;
  left: 20%; top: 24%;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8dc, #ffd978 72%, #ffc95e);
  box-shadow: 0 0 36px 12px rgba(255, 214, 110, .55);
  animation: awSunPulse 5s ease-in-out infinite;
}
.aw-sun::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 190, 80, .5);
  animation: awSpin 26s linear infinite;
}
@keyframes awSunPulse {
  0%, 100% { box-shadow: 0 0 30px 8px rgba(255, 214, 110, .5); }
  50% { box-shadow: 0 0 46px 16px rgba(255, 214, 110, .68); }
}
@keyframes awSpin { to { transform: rotate(360deg); } }
.aw-rays {
  position: absolute;
  left: 20%; top: 24%;
  width: 150px; height: 150px;
  margin: -44px 0 0 -44px;
  animation: awSpin 34s linear infinite;
  opacity: .7;
}
.aw-rays line { stroke: #ffcb66; stroke-width: 3; stroke-linecap: round; }

/* 多云 */
.aw-card[data-weather="cloudy"] .aw-scene { background: linear-gradient(180deg, #c3d4ea, #e9eff6); }

/* 小雨 */
.aw-card[data-weather="rain"] .aw-scene { background: linear-gradient(180deg, #8fa9c4, #c6d6e4); }
.aw-drop {
  position: absolute;
  top: -26px;
  width: 2.5px;
  height: var(--h, 16px);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(219, 236, 255, .95));
  opacity: .85;
  animation: awRainfall var(--dur, 1.1s) linear infinite;
  animation-delay: var(--del, 0s);
  will-change: transform;
}
@keyframes awRainfall { to { transform: translateY(230px) rotate(9deg); } }
.aw-puddle {
  position: absolute;
  bottom: 14px;
  left: 24%;
  width: 56px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  filter: blur(2px);
}
.aw-puddle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px; height: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .7);
  animation: awRipple2 2.6s ease-out infinite;
}
@keyframes awRipple2 { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* 飘雪 */
.aw-card[data-weather="snow"] .aw-scene { background: linear-gradient(180deg, #b9cde6, #eef4fb); }
.aw-flake {
  position: absolute;
  top: -14px;
  animation: awSnowfall var(--fd, 6s) linear infinite;
  animation-delay: var(--fdel, 0s);
  will-change: transform;
}
.aw-flake i {
  display: block;
  width: var(--s, 7px); height: var(--s, 7px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(255, 255, 255, .95);
  opacity: var(--o, .9);
  animation: awSway var(--sw, 2.8s) ease-in-out infinite alternate;
}
@keyframes awSnowfall { to { transform: translateY(215px); } }
@keyframes awSway { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.aw-hill {
  position: absolute;
  bottom: -14px;
  width: 46%; height: 44px;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 255, 255, .75);
  filter: blur(1px);
}
.aw-hill.aw-hill2 { left: 44%; width: 56%; background: rgba(255, 255, 255, .55); }

/* 雷阵雨 */
.aw-card[data-weather="thunder"] .aw-scene { background: linear-gradient(180deg, #39415f, #71809f); }
.aw-bolt {
  position: absolute;
  left: 53%; top: 26%;
  width: 32px;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 240, 150, .95));
  animation: awStrike 6.5s linear infinite;
  animation-delay: var(--bdel, 0s);
}
.aw-bolt path { fill: #ffe89a; stroke: #ffd94d; stroke-width: 1.5; stroke-linejoin: round; }
@keyframes awStrike {
  0%, 86%, 94.5%, 100% { opacity: 0; }
  87%, 94% { opacity: 1; }
  89% { opacity: .2; }
  91.5% { opacity: .85; }
}
.aw-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 58% 38%, rgba(255, 255, 240, .6), transparent 62%);
  animation: awFlashbg 6.5s linear infinite;
  animation-delay: var(--bdel, 0s);
}
@keyframes awFlashbg {
  0%, 86%, 95%, 100% { opacity: 0; }
  87% { opacity: .95; }
  89% { opacity: .2; }
  92% { opacity: .7; }
}

/* 薄雾 */
.aw-card[data-weather="mist"] .aw-scene { background: linear-gradient(180deg, #d8e0ea, #f3ede6); }
.aw-hazedsun {
  position: absolute;
  right: 22%; top: 22%;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 250, 235, .85);
  filter: blur(7px);
  box-shadow: 0 0 34px 14px rgba(255, 250, 230, .5);
}
.aw-fogband {
  position: absolute;
  left: -22%;
  width: 144%;
  height: var(--h, 32px);
  top: var(--ty, 40%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85) 32%, rgba(255, 255, 255, .96) 62%, transparent);
  border-radius: 50%;
  filter: blur(6px);
  animation: awFogdrift var(--dur, 15s) ease-in-out infinite alternate;
  animation-delay: var(--del, 0s);
}
@keyframes awFogdrift { from { transform: translateX(-5.5%); } to { transform: translateX(5.5%); } }

/* 晴夜 */
.aw-card[data-weather="night"] .aw-scene { background: linear-gradient(180deg, #1b2344, #4a567f); }
.aw-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, .85);
  animation: awTwinkle var(--td, 2.4s) ease-in-out infinite alternate;
  animation-delay: var(--tdel, 0s);
}
@keyframes awTwinkle {
  from { opacity: .2; transform: scale(.65); }
  to { opacity: 1; transform: scale(1.15); }
}
.aw-meteor {
  position: absolute;
  top: 14%; left: -14%;
  width: 74px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), transparent);
  opacity: 0;
  animation: awShoot 9s linear infinite;
  animation-delay: var(--mdel, 3s);
}
@keyframes awShoot {
  0%, 88% { opacity: 0; transform: rotate(16deg) translateX(0); }
  89% { opacity: 1; }
  97% { opacity: .9; }
  99% { opacity: 0; transform: rotate(16deg) translateX(540px); }
  100% { opacity: 0; }
}
.aw-moon {
  position: absolute;
  right: 15%; top: 15%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffdf2, #f4e8be 68%, #e9dcaa);
  box-shadow: 0 0 32px 10px rgba(255, 247, 209, .4);
  animation: awBob 7s ease-in-out infinite;
}
.aw-moon::before, .aw-moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(120, 105, 60, .14);
}
.aw-moon::before { width: 15px; height: 15px; left: 14px; top: 22px; }
.aw-moon::after { width: 9px; height: 9px; left: 36px; top: 12px; }
.aw-card[data-weather="night"] .aw-cloud { color: #8b96c2; }

/* ---------- 添加城市（虚线手绘输入卡，居中于卡片上方） ---------- */
.aw-add {
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}
.aw-add-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
/* 恢复定位城市小按钮 */
.aw-restore {
  border: 2px dashed rgba(52, 63, 94, .3);
  background: rgba(255, 255, 255, .8);
  color: var(--aw-ink, #34435e);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.aw-restore:hover {
  background: #fff;
  border-color: rgba(125, 180, 232, .8);
  transform: translateY(-2px);
}
.aw-add-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(8px);
  border: 2px dashed rgba(52, 63, 94, .3);
  border-radius: 999px;
  padding: 8px 18px;
  transition: border-color .25s var(--aw-ease), box-shadow .25s var(--aw-ease);
}
.aw-add-wrap:focus-within {
  border-style: solid;
  border-color: rgba(125, 180, 232, .8);
  box-shadow: 0 8px 26px rgba(125, 180, 232, .22);
}
.aw-add-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--aw-ink);
  min-width: 0;
}
.aw-add-input::placeholder { color: rgba(52, 63, 94, .4); font-weight: 500; }
.aw-add-full {
  text-align: center;
  font-family: var(--aw-f-cn);
  font-size: .92rem;
  color: var(--aw-ink-soft);
  padding: 8px 0;
}

/* ---------- 城市建议：横向铺开的标签（chips） ---------- */
.aw-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border: 2px solid var(--aw-line, rgba(52, 63, 94, .14));
  border-radius: 20px 14px 22px 14px / 14px 22px 14px 20px;
  box-shadow: 0 14px 34px rgba(52, 63, 94, .14);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .22s var(--aw-ease, ease), transform .22s var(--aw-ease, ease);
}
.aw-chips.open { opacity: 1; transform: none; pointer-events: auto; }
.aw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border: 1.5px solid var(--aw-line, rgba(52, 63, 94, .14));
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--aw-ink, #34435e);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  max-width: 100%;
}
.aw-chip:hover, .aw-chip.active {
  background: #eef5ff;
  border-color: rgba(125, 180, 232, .85);
  transform: translateY(-2px);
}
.aw-chip .aw-s-name {
  font-family: var(--aw-f-cn, inherit);
  font-size: .95rem;
  white-space: nowrap;
}
.aw-chip .aw-s-en {
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--aw-ink-soft, rgba(52, 63, 94, .62));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-chips-empty {
  font-size: .88rem;
  color: var(--aw-ink-soft, rgba(52, 63, 94, .62));
  text-align: center;
  padding: 2px 8px;
}

/* ---------- 提示条 ---------- */
.sk-hint {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%) rotate(-0.5deg);
  display: none;
  padding: 5px 18px;
  font-size: 13px;
  font-family: var(--aw-f-cn);
  color: var(--aw-ink);
  background: rgba(255, 255, 255, .92);
  border: 2px solid var(--aw-line);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 0 8px 22px rgba(52, 63, 94, .14);
  white-space: nowrap;
  z-index: 50;
}
.sk-hint-ok { color: #2e9e5b; }

/* ---------- 响应式 & 无障碍 ---------- */
@media (max-width: 640px) {
  .aw-grid { gap: 10px; }
  .aw-card { flex: 1 1 44%; }
  .aw-scene { height: 110px; }
  .aw-temp { font-size: 2rem; }
  .aw-cname { font-size: 1.1rem; }
  .aw-body { padding: 10px 12px 12px; }
  .sk-hint { top: -42px; font-size: 12px; }
}
@media (max-width: 400px) {
  .aw-card { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-sketch *, .weather-sketch *::before, .weather-sketch *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}