/* 基础样式 */
:root{
  --bg1: #f8fafc; /* 浅灰色背景1 */
  --bg2: #e2e8f0; /* 浅灰色背景2 */
  --accent: #2563eb; /* 蓝色强调色 */
  /* 彩虹主题变量（主色与柔和版）*/
  --rainbow-main: linear-gradient(135deg,
    rgba(255,75,75,1) 0%,
    rgba(255,144,104,1) 15%,
    rgba(255,210,0,1) 30%,
    rgba(58,213,159,1) 50%,
    rgba(58,162,255,1) 70%,
    rgba(122,73,255,1) 85%
  );
  --rainbow-soft: linear-gradient(135deg,
    rgba(255,75,75,0.12) 0%,
    rgba(255,144,104,0.10) 15%,
    rgba(255,210,0,0.10) 30%,
    rgba(58,213,159,0.10) 50%,
    rgba(58,162,255,0.10) 70%,
    rgba(122,73,255,0.10) 85%
  );
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #1e293b; /* 深灰色文本 */
  /* 以 wall.png 为底图，并在上方叠加 50% 白色遮罩以降低饱和度，保证文字对比 */
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('assests/wall.png') center top / cover no-repeat;
  /* 允许页面滚动，模态打开时脚本会临时设置 body.style.overflow='hidden' */
  overflow: auto;
  -webkit-font-smoothing:antialiased;
}

/* 背景动态渐变 */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;
  /* 保持轻微光斑叠加以增加层次（与彩虹渐变搭配） */
  background: radial-gradient(600px at 10% 20%, rgba(255,255,255,0.06), transparent 10%),
              radial-gradient(500px at 90% 80%, rgba(255,255,255,0.04), transparent 15%);
  pointer-events:none;
  animation: moveBg 12s linear infinite;
}
@keyframes moveBg{0%{transform:translateY(0)}50%{transform:translateY(-30px)}100%{transform:translateY(0)}}

/* 加载覆盖层（模仿 Apple "你好" 风格） */
.loader{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* 彩虹主题的柔和叠层，保证文字可读 */
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.85)), var(--rainbow-main);
  color:#000;z-index:9999;backdrop-filter: blur(0px);
  transition: opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}
.loader .hi{
  font-weight:700;
  font-size:clamp(48px, 18vw, 220px);
  line-height:0.9;
  letter-spacing: -0.02em;
  transform:scale(.92);
  opacity:0;
  animation: hi-pop 1.1s cubic-bezier(.2,.9,.3,1) forwards;
}
.loader .sub{margin-top:18px;font-size:18px;opacity:0;color:#111;animation: sub-fade 0.9s .5s forwards}

@keyframes hi-pop{
  0%{transform:scale(.86);opacity:0}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes sub-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 当主界面显示时，淡出 loader（使用 transition 实现平滑淡化） */ 
body.loaded .loader{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
}

/* 主内容在加载后淡入 */
.content{position:relative;z-index:10;padding:120px 40px 40px 40px;min-height:auto;opacity:0;transform:translateY(8px);transition:opacity .9s ease .15s, transform .9s ease .15s}
body.loaded .content{opacity:1;transform:none}

/* 站点头部（左上角主标题） */
.site-header{position:fixed;top:18px;left:18px;z-index:50}
.brand{
  font-weight:700;font-size:20px;color:rgba(30,41,59,0.95); /* 深灰色标题 */
  padding:8px 12px;border-radius:10px;
  /* 顶部白条使用柔和的彩虹渐变（低不透明度）以体现主题色但不影响可读性 */
  background: linear-gradient(90deg,
    rgba(255,75,75,0.12) 0%,
    rgba(255,144,104,0.12) 20%,
    rgba(255,210,0,0.10) 40%,
    rgba(58,213,159,0.10) 60%,
    rgba(58,162,255,0.10) 80%,
    rgba(122,73,255,0.10) 100%
  );
  backdrop-filter: blur(6px);box-shadow:0 6px 18px rgba(2,6,23,0.15);
}

/* 主内容 */
.content{position:relative;z-index:10;padding:120px 40px 40px 40px;min-height:auto}
.hero h1{font-size:clamp(28px,6vw,48px);margin-bottom:12px}
.hero p{color:rgba(30,41,59,0.9);max-width:720px}

.cards{display:flex;gap:20px;margin-top:30px}
.card{
  /* 使用彩虹背景并叠加半透明白层以保留文字对比 */
  background: linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.55)), var(--rainbow-main);
  padding:24px;border-radius:14px;min-width:160px;box-shadow:0 8px 24px rgba(2,6,23,0.15);transform:translateY(12px);opacity:0;animation:card-in .8s ease forwards}
.card:nth-child(1){animation-delay:.6s}
.card:nth-child(2){animation-delay:.75s}
.card:nth-child(3){animation-delay:.9s}
@keyframes card-in{to{transform:none;opacity:1}}

/* Gallery 上传区样式（上传按钮与拖放） */
.g-upload{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 12px}
.g-upload #galleryInput{display:none}
.g-upload .upload-btn{
  appearance:none;border:none;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(37,99,235,0.12);
}
.g-upload .dropzone{
  width:100%;max-width:920px;border:2px dashed rgba(255,255,255,0.12);padding:14px;border-radius:10px;color:rgba(255,255,255,0.95);
  text-align:center;
  /* 轻微白层叠加彩虹，保持可见性同时体现主题色 */
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--rainbow-main);
  cursor:pointer;
}
.g-upload .dropzone.dragover{border-color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.04)}

/* 兼容减少动画偏好 */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  body::before{display:none}
}

/* 动画工具类：淡入上移 */
.fade-up{animation:fadeUp .56s cubic-bezier(.2,.9,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 按钮与卡片微交互 */
.card, .refresh-btn, .floatbtn{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.12)}
.refresh-btn:active, .floatbtn:active{transform:translateY(0) scale(.98)}

/* 刷新按钮 */
.refresh-btn {
  appearance:none;border:none;
  /* 用柔和彩虹作为按钮背景 */
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.7)), var(--rainbow-main);
  color: #111;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 长按弹出框（居中小提示，图片与文字垂直居中） */
.longpress-popover {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  /* 半透明白层 + 彩虹主题，保持提示可读 */
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.82)), var(--rainbow-main);
  color: #111;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  z-index: 10010;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Gallery 控件按钮（左右、关闭） */
.gallery-modal .g-prev,
.gallery-modal .g-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 使用半透明白层叠加彩虹，保证按钮在暗色模态中清晰 */
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.75)), var(--rainbow-main);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.gallery-modal .g-close {
  position: absolute;
  right: 6px;
  top: 6px;
  /* 关闭按钮也使用柔和彩虹背景 */
  background: linear-gradient(rgba(255,255,255,0.98), rgba(255,255,255,0.9)), var(--rainbow-main);
  color: #fff;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
}

/* 欢迎层图片背景（若外部被覆盖，styles.css 提供居中与背景方案） */
#welcome { display:grid; place-items:center; }
/* 将 picture 作为块级、限制最大宽度以便在不同屏幕上居中显示 */
#welcome picture { display:block; width:min(84vw,420px); max-width:92%; }
/* img 在容器内自适应并水平居中，避免因为 width:100% 导致视觉偏移 */
#welcome img { display:block; width:100%; height:auto; margin:0 auto; object-fit:contain; }

/* 加强版连笔风格与更大字号，针对首页英雄句 */
.hero .sub.cursive-large{
  /* 中文连笔/行书首选字体（按系统可用性回退），最后回退到 cursive */
  font-family: "华文行楷", "STKaiti", "KaiTi", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", cursive;
  /* 放大字号：桌面大、移动自适应 */
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* 轻微斜体/连笔效果（若字体支持） */
  font-style: normal;
  text-rendering: optimizeLegibility;
  /* 保证在彩虹/背景上可读，增加微妙的描边阴影 */
  text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 2px 8px rgba(0,0,0,0.08);
}

/* 横屏与超宽屏适配：避免内容被横向拉伸或布局错位 */
@media (orientation: landscape) {
  /* 阻止横向滚动（视觉修复） */
  html, body { overflow-x: hidden; }

  /* 缩减主内容上下内边距，给横向更多可用空间 */
  .content {
    padding: 48px 20px;
    max-width: calc(var(--max-content-width) * 1.15);
  }

  /* 顶部条在横屏下居中并限制宽度，避免左侧固定导致遮挡 */
  .site-header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(96%, var(--max-content-width));
    border-radius: 10px;
    padding: 0.4rem calc(var(--gap) * 1);
  }
  .brand { font-size: clamp(0.95rem, 2vw, 1.1rem); }

  /* 英雄区压缩垂直占用，连笔文本略放大以保持视觉重心 */
  .hero { padding: 1rem 0; }
  .cursive-large { font-size: clamp(1.4rem, 5vw, 2.4rem); line-height:1.06; }

  /* 使用网格让卡片在横屏更均匀分布，防止单行过长 */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: start;
    padding: calc(var(--gap) * 0.75);
  }
  .card { padding: 16px; }

  /* 欢迎图片限制宽度，避免横向过宽 */
  #welcome picture { width: min(60vw, 520px); }
  #welcome img { max-width: 100%; height: auto; }

  /* 模态在横屏适配更大宽度 */
  .gallery-modal .g-view { width: min(92vw, 1200px); max-height: 82vh; }
  .gallery-modal .g-image { max-height: calc(82vh - 120px); }

  /* 使加载覆盖层在横屏更紧凑 */
  .loader .hi { font-size: clamp(32px, 12vw, 160px); }
  .loader .sub { font-size: clamp(0.9rem, 1.8vw, 1rem); }
}

/* 超宽屏进一步限制内容宽度与卡片密度，避免线性拉伸 */
@media (min-width: 1400px) {
  .content { max-width: 1400px; padding-left: 36px; padding-right: 36px; }
  .cards { grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 1.25rem; }
  .card { padding: 20px; border-radius: 12px; }
  .brand { font-size: clamp(1.05rem, 1.6vw, 1.6rem); }
}

/* 极窄高度（例如横屏手机）进一步压缩 header 与间距 */
@media (max-height: 420px) and (orientation: landscape) {
  .site-header { top: 8px; padding: 0 0.6rem; height: clamp(44px, 6vh, 56px); }
  .content { padding-top: 48px; }
  .card { padding: 12px; font-size: 0.95rem; }
}