/* ===== 星光小镇物语 · 马卡龙治愈系 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg1:#ffeef5; --bg2:#e8f7ff;
  --card:#ffffffcc; --card-solid:#fff;
  --ink:#5a4a6e; --sub:#a89bb8;
  --primary:#ff9ec7; --primary-d:#ff7fb3;
  --accent:#ffd166; --mint:#9be8d8; --lilac:#c9b6ff;
  --radius:22px;
  --shadow-soft:0 10px 30px rgba(158,140,200,.14);
  --shadow-pop:0 16px 40px rgba(255,158,199,.28);
}
html,body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(160deg,var(--bg1),var(--bg2),#fff6fb);
  color:var(--ink); overflow:hidden;
}

/* ===== 动态梦幻背景（流动渐变 + 柔光星云） ===== */
body::before {
  content:""; position:fixed; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 45% at 18% 22%, rgba(255,182,214,.55), transparent 60%),
             radial-gradient(38% 42% at 82% 30%, rgba(173,222,255,.55), transparent 60%),
             radial-gradient(42% 46% at 68% 78%, rgba(216,191,255,.50), transparent 60%),
             radial-gradient(34% 38% at 28% 82%, rgba(255,224,168,.45), transparent 60%);
  filter:blur(6px);
  animation:bgDrift 22s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform:translate3d(2%,-2%,0) rotate(2deg) scale(1.06); }
  100% { transform:translate3d(-2%,2%,0) rotate(-2deg) scale(1.04); }
}
/* 柔和漂浮光点 */
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(2px 2px at 12% 30%, rgba(255,158,199,.8), transparent),
    radial-gradient(2px 2px at 72% 18%, rgba(201,182,255,.8), transparent),
    radial-gradient(2.5px 2.5px at 44% 62%, rgba(255,209,102,.8), transparent),
    radial-gradient(2px 2px at 88% 70%, rgba(155,232,216,.9), transparent),
    radial-gradient(1.8px 1.8px at 30% 86%, rgba(255,158,199,.7), transparent),
    radial-gradient(2.2px 2.2px at 58% 40%, rgba(173,222,255,.8), transparent);
  background-repeat:repeat;
  background-size:260px 260px;
  animation:sparkleTwinkle 4s ease-in-out infinite;
}
@keyframes sparkleTwinkle { 0%,100%{opacity:.45} 50%{opacity:.9} }

/* 粒子层 */
#fx-canvas { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ===== 屏幕切换 ===== */
.screen { position:fixed; inset:0; z-index:10; display:none; flex-direction:column; overflow-y:auto; padding:18px; }
.screen.active { display:flex; animation:fadeIn .4s cubic-bezier(.22,1,.36,1); }
@keyframes fadeIn { from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
/* 自定义滚动条 */
.screen::-webkit-scrollbar { width:8px; }
.screen::-webkit-scrollbar-track { background:transparent; }
.screen::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#ffd2e4,#cbb8f5); border-radius:8px; }
::selection { background:#ffd6e8; color:#5a4a6e; }

/* ===== 登录 ===== */
#screen-login { align-items:center; justify-content:center; }
.login-card {
  position:relative;
  background:linear-gradient(160deg,#ffffff,#fff4fa); backdrop-filter:blur(14px);
  border-radius:36px; padding:44px 30px 34px; width:min(420px,92%);
  text-align:center; box-shadow:var(--shadow-pop);
  border:2px solid rgba(255,255,255,.9); overflow:hidden;
}
.login-card::before { /* 顶部星光装饰带 */
  content:"🌙 🌟 ⭐ ✨ 🌟 ⭐"; position:absolute; top:14px; left:0; right:0; text-align:center;
  font-size:12px; letter-spacing:8px; opacity:.7; animation:floaty 3s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.logo {
  font-size:30px; font-weight:800; letter-spacing:1px; margin-top:6px;
  background:linear-gradient(90deg,#ff9ec7,#ffb26b,#9be8d8,#b78ae0);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:logoShine 5s linear infinite;
  filter:drop-shadow(0 3px 6px rgba(255,158,199,.25));
}
@keyframes logoShine { to{ background-position:250% center; } }
.subtitle { color:var(--sub); margin:10px 0 26px; font-size:14px; letter-spacing:2px; }
.login-form { display:flex; flex-direction:column; gap:14px; }
.login-form input {
  border:2px solid #f3e3ee; border-radius:18px; padding:15px 18px; font-size:15px;
  outline:none; background:#fff; color:var(--ink); text-align:center;
  transition:border-color .2s, box-shadow .2s;
}
.login-form input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(255,158,199,.15); }
.login-form input::placeholder { color:#d3c4d6; }
.login-hint { color:var(--sub); font-size:12px; margin-top:16px; }

/* ===== 按钮 ===== */
.btn { border:none; cursor:pointer; border-radius:18px; padding:14px 22px; font-size:15px; font-weight:700; position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.btn:active { transform:scale(.95); }
.btn-primary {
  background:linear-gradient(90deg,var(--primary),var(--primary-d));
  color:#fff; box-shadow:0 10px 24px rgba(255,127,179,.4);
}
.btn-primary::after { /* 光扫过效果 */
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-25deg);
}
.btn-primary:hover::after { animation:shineSweep .9s ease; }
@keyframes shineSweep { to{ left:130%; } }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,127,179,.45); }
.btn-ghost { background:rgba(246,237,244,.85); color:var(--sub); border:1px solid #f3e3ee; }
.btn-ghost:hover { background:#f1e6f0; }
.btn.big { padding:17px; font-size:17px; border-radius:20px; }
.btn-back {
  background:var(--card-solid); border:1px solid #f0e0ea; color:var(--ink); border-radius:14px;
  padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.05);
  transition:all .15s; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn-back svg { color:var(--primary); flex-shrink:0; }
.btn-back:hover { background:#fdf2f8; border-color:#ffd2e4; transform:translateX(-2px); }
.btn-back:hover svg { transform:translateX(-2px); transition:transform .15s; }

/* ===== 主大厅 ===== */
.hall-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.player-info { display:flex; align-items:center; gap:12px; }
.avatar {
  width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#ffd6e8,#b9e8ff);
  display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow:0 8px 20px rgba(255,158,199,.35); border:3px solid #fff; position:relative;
}
.avatar::after { /* 呼吸光环 */
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,158,199,.45); animation:avatarPulse 2.4s ease-in-out infinite;
}
@keyframes avatarPulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.08);opacity:1} }
.player-name { font-size:19px; font-weight:800; }
.player-sub { font-size:13px; color:var(--sub); }
.res-bar { display:flex; gap:10px; }
.res-chip {
  display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid #fff;
  padding:8px 12px; border-radius:16px; font-size:14px; font-weight:700;
  box-shadow:0 6px 16px rgba(158,140,200,.12); backdrop-filter:blur(8px);
}
.hall-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; flex:1; align-content:center; }
.hall-card {
  background:var(--card); backdrop-filter:blur(10px); border:1.5px solid #fff; border-radius:var(--radius);
  padding:22px 10px; text-align:center; cursor:pointer; transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; align-items:center; gap:7px; position:relative;
}
/* 每张卡片各自的马卡龙渐变 */
.hall-card:nth-child(1){ background:linear-gradient(160deg,#fff,#eafff3); }
.hall-card:nth-child(2){ background:linear-gradient(160deg,#fff,#fff0f5); }
.hall-card:nth-child(3){ background:linear-gradient(160deg,#fff,#fff7e6); }
.hall-card:nth-child(4){ background:linear-gradient(160deg,#fff,#eef7ff); }
.hall-card:nth-child(5){ background:linear-gradient(160deg,#fff,#f6eeff); }
.hall-card:nth-child(6){ background:linear-gradient(160deg,#fff,#ffeef8); }
.hall-card:nth-child(7){ background:linear-gradient(160deg,#fff,#eef9ff); }
.hall-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-pop); }
.hall-card:active { transform:scale(.96); }
.hall-card .hc-icon {
  font-size:42px; display:inline-block;
  transition:transform .3s cubic-bezier(.2,1.6,.4,1);
  filter:drop-shadow(0 3px 4px rgba(158,140,200,.25));
}
.hall-card .hc-icon svg { width:40px; height:40px; color:var(--primary); filter:drop-shadow(0 2px 3px rgba(158,140,200,.3)); }
.hall-card:nth-child(2) .hc-icon svg { color:#f09a3e; }
.hall-card:nth-child(3) .hc-icon svg { color:#5b8def; }
.hall-card:nth-child(4) .hc-icon svg { color:#5fbf7f; }
.hall-card:nth-child(5) .hc-icon svg { color:#e0539b; }
.hall-card:nth-child(6) .hc-icon svg { color:#e9619d; }
.hall-card:nth-child(7) .hc-icon svg { color:#f0b429; }
.hall-card:hover .hc-icon { transform:translateY(-3px) scale(1.15) rotate(-4deg); }
.hall-card .hc-name { font-size:15px; font-weight:800; }
.hall-card.soon { opacity:.55; cursor:not-allowed; }
.hall-card.soon em { display:block; font-style:normal; font-size:11px; color:var(--sub); font-weight:600; }
.hall-bottom { margin-top:16px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.sign-banner {
  background:linear-gradient(90deg,#ffd166,#ffb3c8); color:#7a5a10; padding:13px 22px; border-radius:18px;
  font-weight:700; font-size:14px; box-shadow:0 8px 20px rgba(255,209,102,.4); width:100%; text-align:center;
  animation:glow 2s infinite; border:1px solid #fff;
}
.guest-note { color:var(--sub); font-size:12px; text-align:center; }

/* ===== 页面头 ===== */
.screen-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.head-title {
  font-size:22px; font-weight:800; flex:1; letter-spacing:1px; display:flex; align-items:center; gap:6px;
  color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.head-title svg { color:var(--primary); filter:drop-shadow(0 2px 3px rgba(255,127,179,.3)); }
.head-res { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.head-res .res-chip { padding:6px 10px; font-size:13px; }

/* ===== 花园 ===== */
.section-label { font-size:14px; font-weight:800; color:var(--sub); margin:14px 0 10px; letter-spacing:.5px; }
.garden-plots { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plot {
  background:linear-gradient(150deg,#eafbe8,#d7f3e0); border:2px solid #fff; border-radius:20px;
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  position:relative; padding:10px; box-shadow:0 6px 16px rgba(122,200,150,.16); transition:transform .15s;
}
.plot:hover { transform:translateY(-2px); }
.plot .plant-stage { font-size:36px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.08)); }
.plot .plot-name { font-size:13px; font-weight:700; }
.plot.busy .plot-timer { font-size:13px; color:#8a9b7a; font-weight:700; }
.plot.busy .progress-bar { width:80%; height:6px; background:#fff; border-radius:8px; overflow:hidden; }
.plot.busy .progress-fill { height:100%; background:var(--mint); border-radius:8px; transition:width 1s linear; }
.plot.ready { background:linear-gradient(150deg,#fff6bf,#ffe9a8); cursor:pointer; animation:glow 1.6s infinite; }
@keyframes glow { 0%,100%{box-shadow:0 0 0 rgba(255,209,102,0)} 50%{box-shadow:0 0 26px rgba(255,209,102,.65)} }
.plot.empty { background:linear-gradient(150deg,#f6f1fa,#efe6f8); cursor:pointer; opacity:.85; }
.plot.empty:hover { opacity:1; }
.seed-shop { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; }
.seed-card {
  background:var(--card-solid); border-radius:20px; padding:14px; text-align:center; cursor:pointer;
  border:1px solid #f0e0ea; transition:transform .15s, box-shadow .15s; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.seed-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.seed-card:active { transform:scale(.95); }
.seed-card .sc-icon { font-size:32px; display:inline-block; transition:transform .3s; }
.seed-card:hover .sc-icon { transform:scale(1.15) rotate(-6deg); }
.seed-card .sc-name { font-size:13px; font-weight:700; margin:4px 0; }
.seed-card .sc-meta { font-size:11px; color:var(--sub); }
.seed-card .sc-btn { margin-top:8px; font-size:12px; padding:7px 12px; }

/* ===== 工坊 ===== */
.craft-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.craft-card {
  background:var(--card-solid); border-radius:22px; padding:18px; text-align:center; position:relative;
  border:1px solid #f0e0ea; transition:transform .15s, box-shadow .15s; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.craft-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.craft-card .cc-icon { font-size:40px; display:inline-block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.08)); }
.craft-card .cc-name { font-size:15px; font-weight:800; margin:6px 0 2px; }
.craft-card .cc-desc { font-size:12px; color:var(--sub); min-height:32px; }
.craft-card .cc-req { font-size:12px; color:#8a7a9a; margin:6px 0; }
.craft-card.producing { opacity:.85; }
.craft-card .cc-timer { font-size:14px; font-weight:800; color:var(--primary-d); margin-top:6px; }
.craft-card .btn { width:100%; margin-top:8px; }

/* ===== 签到 ===== */
.sign-board {
  background:var(--card); border:1.5px solid #fff; border-radius:32px; padding:24px;
  text-align:center; max-width:460px; margin:0 auto; width:100%;
  box-shadow:var(--shadow-pop); backdrop-filter:blur(10px);
}
.sign-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:18px 0; }
.sign-day {
  aspect-ratio:1; border-radius:16px; background:#f6edf4; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--sub); position:relative; transition:transform .15s;
}
.sign-day:hover { transform:scale(1.05); }
.sign-day .sd-n { font-size:16px; color:var(--ink); }
.sign-day.done { background:linear-gradient(135deg,#9be8d8,#7fd8c4); color:#0e6b52; box-shadow:0 4px 12px rgba(110,220,190,.35); }
.sign-day.done .sd-n { color:#0e6b52; }
.sign-day.today { border:2px solid var(--primary); box-shadow:0 0 0 3px rgba(255,158,199,.2); }
.sign-day.done .sd-tick { position:absolute; top:-6px; right:-6px; font-size:14px; }
.sign-tip { color:var(--sub); font-size:13px; margin-top:12px; }
.btn-sign.muted { background:#ddd4e6; box-shadow:none; cursor:not-allowed; }

/* ===== 全局音效开关 ===== */
#sound-toggle {
  position:fixed; top:14px; right:14px; z-index:120; width:46px; height:46px; border-radius:50%;
  background:var(--card); border:1.5px solid #fff; box-shadow:0 8px 20px rgba(158,140,200,.25);
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
  transition:transform .15s; backdrop-filter:blur(8px);
}
#sound-toggle:hover { transform:scale(1.1) rotate(8deg); }
#sound-toggle:active { transform:scale(.9); }

/* ===== 换装搭配 ===== */
.dress-stat {
  align-self:flex-start; background:var(--card); border:1px solid #fff; border-radius:16px;
  padding:9px 18px; font-size:14px; font-weight:700; box-shadow:var(--shadow-soft); margin-bottom:10px;
  backdrop-filter:blur(8px);
}
.dress-wrap {
  position:relative; width:100%; max-width:300px; margin:0 auto; border-radius:28px; overflow:hidden;
  box-shadow:0 18px 44px rgba(255,158,199,.35); border:3px solid #fff;
  background:linear-gradient(180deg,#fdf2f8,#eef3ff,#fff6fb);
  flex-shrink:0;   /* 防止在 flex column 屏幕里被压缩，导致人物下半身被裁掉 */
}
#dress-canvas { width:100%; height:auto; display:block; }
.dress-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 12px; }
.cat-tab {
  background:var(--card-solid); border:1px solid #f0e0ea; border-radius:14px; padding:8px 16px;
  font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.cat-tab:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.cat-tab.active { background:linear-gradient(90deg,var(--primary),var(--primary-d)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(255,127,179,.35); }
.dress-shop { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dress-item { transition:transform .15s, box-shadow .15s; }
.dress-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.dress-item.wearing { border-color:var(--primary); box-shadow:0 0 0 2px rgba(255,158,199,.3); }
.mini-btn {
  border:none; border-radius:12px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer;
  margin-top:6px; transition:transform .12s, box-shadow .12s; width:100%;
}
.mini-btn:active { transform:scale(.94); }
.mini-btn.buy { background:linear-gradient(90deg,var(--accent),#ffc15e); color:#7a5a10; box-shadow:0 4px 10px rgba(255,193,94,.35); }
.mini-btn.wear { background:linear-gradient(90deg,var(--mint),#7fd8c4); color:#0e6b52; box-shadow:0 4px 10px rgba(127,216,196,.35); }
.mini-btn.on { background:#e6ddf0; color:var(--sub); cursor:default; }
.wear-badge { display:inline-block; width:100%; margin-top:6px; font-size:11px; color:var(--sub); font-weight:700; }

/* ===== 男主羁绊 ===== */
.heart-list { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.heart-card {
  display:flex; align-items:center; gap:14px; background:var(--card); border:2px solid #fff; border-radius:20px;
  padding:13px; cursor:pointer; transition:all .2s; box-shadow:0 4px 12px rgba(0,0,0,.05); backdrop-filter:blur(8px);
}
.heart-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.heart-card.active { border-color:var(--hc); box-shadow:0 0 0 2px var(--hc), var(--shadow-soft); }
.hc-avatar {
  width:54px; height:54px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center;
  font-size:27px; flex-shrink:0; transition:transform .2s;
}
.heart-card:hover .hc-avatar { transform:scale(1.1); }
.hc-body { flex:1; min-width:0; }
.hc-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hc-name { font-size:16px; font-weight:800; }
.hc-title { font-size:12px; color:var(--sub); font-weight:600; }
.hc-heart { font-size:12px; font-weight:800; color:#e0536b; white-space:nowrap; }
.hc-bio { font-size:11px; color:var(--sub); margin:3px 0 6px; }
.hc-bar { height:7px; background:#f0e6f0; border-radius:8px; overflow:hidden; }
.hc-fill { height:100%; background:linear-gradient(90deg,var(--hc),#ff9ec7); border-radius:8px; transition:width .5s ease; }
.hc-meta { font-size:10px; color:var(--sub); margin-top:4px; }

.heart-detail {
  background:linear-gradient(150deg,#fff,#fbf5ff); border:1.5px solid #fff; border-radius:22px; padding:18px;
  display:flex; gap:16px; box-shadow:var(--shadow-soft); margin-bottom:12px; backdrop-filter:blur(8px);
}
.hd-avatar { width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0; box-shadow:0 6px 16px rgba(158,140,200,.2); }
.hd-info { flex:1; min-width:0; }
.hd-name { font-size:19px; font-weight:800; }
.hd-level { font-size:14px; font-weight:800; margin:3px 0; }
.hd-bio { font-size:12px; color:var(--sub); margin-bottom:8px; }
.hd-heartval { font-size:12px; font-weight:700; color:#e0536b; margin-top:5px; }

.talk-bubble {
  background:#fff; border:1px solid #f0d9ec; border-radius:18px; padding:11px 16px; font-size:14px; color:#5a4a6e;
  margin:8px 0; opacity:0; transform:translateY(6px); transition:all .3s; min-height:20px; box-shadow:0 4px 12px rgba(255,158,199,.1);
}
.talk-bubble em { color:#e0536b; font-style:normal; }
.talk-bubble.show { opacity:1; transform:none; }

.heart-gifts .gift-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gift-item { background:var(--card-solid); border:1px solid #f0e0ea; border-radius:18px; padding:12px 6px; text-align:center; transition:transform .15s, box-shadow .15s; }
.gift-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.gift-item.locked { opacity:.55; }
.gift-item .gi-icon { font-size:32px; position:relative; display:inline-block; }
.gift-item .gi-count { position:absolute; top:-4px; right:-6px; background:#ff9ec7; color:#fff; border-radius:10px; font-size:10px; padding:1px 5px; font-weight:700; }
.gift-item .gift-fav { position:absolute; top:-6px; right:-4px; font-size:10px; background:#ffe3ee; color:#e0536b; border-radius:8px; padding:1px 5px; }
.gift-item .gi-name { font-size:12px; font-weight:700; margin:6px 0 2px; }
.gift-item .gi-gain { font-size:11px; color:#e0536b; font-weight:700; }
.gift-item .mini-btn { margin-top:6px; }

.cg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cg-card {
  background:linear-gradient(160deg,#fff,#f6f0ff); border:1.5px solid #fff; border-radius:18px; padding:16px 10px;
  text-align:center; box-shadow:0 4px 12px rgba(158,140,200,.10); transition:transform .2s, box-shadow .2s;
}
.cg-card:hover { transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-soft); }
.cg-card .cg-icon { font-size:40px; display:inline-block; filter:drop-shadow(0 3px 4px rgba(158,140,200,.3)); }
.cg-card.locked { opacity:.5; filter:grayscale(.6); }
.cg-card .cg-name { font-size:13px; font-weight:800; margin:6px 0 2px; }
.cg-card .cg-desc { font-size:11px; color:var(--sub); }

/* 男主支线剧情 */
.story-list { display:flex; flex-direction:column; gap:8px; }
.story-card { background:linear-gradient(150deg,#fdf6ff,#fff); border:1px solid #ead8f0; border-radius:14px; padding:12px 14px; }
.story-card.locked { opacity:.55; filter:grayscale(.7); }
.st-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; color:#7a5a94; gap:8px; }
.st-lock { font-size:10px; color:var(--sub); font-weight:600; white-space:nowrap; }
.st-body { font-size:13px; color:#5a4a6e; line-height:1.6; margin-top:6px; background:#faf3ff; border-radius:10px; padding:8px 10px; }
.story-empty { font-size:12px; color:var(--sub); text-align:center; padding:10px; background:var(--card-solid); border-radius:12px; }

/* ===== 小镇社交（图鉴/任务/活动/好友/排行） ===== */
.social-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.social-tabs .cat-tab { flex:1; min-width:70px; }
.social-body { width:100%; }
.section-label { font-size:14px; font-weight:800; color:#7a5a94; margin:12px 0 8px; }
.section-label.sec-sm { font-size:12px; margin-top:16px; }
.album-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.album-card {
  background:var(--card-solid); border:1px solid #f0e0ea; border-radius:18px; padding:16px 10px; text-align:center;
  transition:transform .15s, box-shadow .15s; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.album-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.album-card .al-emoji { font-size:32px; display:inline-block; filter:drop-shadow(0 2px 3px rgba(158,140,200,.25)); }
.album-card .al-name { font-size:13px; font-weight:800; margin:6px 0 6px; }
.album-card .al-bar { height:7px; background:#f0e6f0; border-radius:8px; overflow:hidden; }
.album-card .al-fill { height:100%; background:linear-gradient(90deg,#b78ae0,#ff9ec7); border-radius:8px; transition:width .5s ease; }
.album-card .al-meta { font-size:11px; color:var(--sub); margin-top:5px; font-weight:700; }
.mini-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; }
.mini-cell { background:var(--card-solid); border:1px solid #f0e0ea; border-radius:12px; padding:8px 2px; text-align:center; font-size:20px; transition:transform .12s; }
.mini-cell:hover { transform:scale(1.08); }
.mini-cell span { display:block; font-size:9px; color:var(--sub); margin-top:2px; }
.mini-cell.locked { opacity:.45; filter:grayscale(.8); }

.task-list { display:flex; flex-direction:column; gap:8px; }
.task-row { background:var(--card-solid); border:1px solid #f0e0ea; border-radius:16px; padding:11px 13px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; transition:all .15s; }
.task-row:hover { box-shadow:var(--shadow-soft); }
.task-row.can-claim { border-color:#ff9ec7; box-shadow:0 0 0 2px #ffe3ee; animation:glow 1.8s infinite; }
.tk-name { font-size:13px; font-weight:700; flex:1; min-width:120px; }
.tk-prog { font-size:11px; color:var(--sub); font-weight:600; margin-left:6px; }
.tk-bar { flex:1; min-width:80px; height:6px; background:#f0e6f0; border-radius:8px; overflow:hidden; }
.tk-fill { height:100%; background:linear-gradient(90deg,#7fd8a8,#b78ae0); border-radius:8px; transition:width .4s; }
.tk-reward { font-size:11px; color:#e0536b; font-weight:700; white-space:nowrap; }
.tk-desc { font-size:11px; color:var(--sub); width:100%; }
.task-row .mini-btn { margin-left:auto; }
.mini-btn.claimed { background:#eae3f0; color:#999; }

.event-card { background:linear-gradient(150deg,#fff5fa,#f3ecff); border:1.5px solid #ffd6e6; border-radius:20px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow-soft); }
.ev-head { display:flex; align-items:center; gap:10px; }
.ev-icon { font-size:32px; filter:drop-shadow(0 2px 3px rgba(255,158,199,.3)); }
.ev-name { font-size:17px; font-weight:800; }
.ev-period { font-size:11px; color:#e0536b; font-weight:700; }
.ev-desc { font-size:12px; color:var(--sub); margin:8px 0; }
.ev-goals { display:flex; flex-direction:column; gap:8px; }
.ev-goal { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #f0e0ea; border-radius:14px; padding:9px 12px; font-size:13px; transition:all .15s; }
.ev-goal:hover { box-shadow:var(--shadow-soft); }
.ev-goal.can-claim { border-color:#ff9ec7; box-shadow:0 0 0 2px #ffe3ee; }
.ev-reward { margin-left:auto; font-weight:700; color:#e0536b; white-space:nowrap; }

.rank-list { display:flex; flex-direction:column; gap:6px; }
.rank-row { display:flex; align-items:center; gap:12px; background:var(--card-solid); border:1px solid #f0e0ea; border-radius:16px; padding:11px 13px; transition:all .15s; }
.rank-row:hover { box-shadow:var(--shadow-soft); transform:translateX(2px); }
.rank-row.me { border-color:#ff9ec7; box-shadow:0 0 0 2px #ffe3ee; }
.rk-no { font-size:18px; width:26px; text-align:center; font-weight:800; }
.rk-avatar { width:40px; height:40px; border-radius:50%; background:#f3ecff; border:2px solid #d8c8f0; display:flex; align-items:center; justify-content:center; font-size:20px; }
.rk-info { flex:1; min-width:0; }
.rk-name { font-size:14px; font-weight:800; }
.rk-me { font-size:10px; color:#e0536b; margin-left:4px; }
.rk-town { font-size:11px; color:var(--sub); }
.rk-score { font-size:14px; font-weight:800; color:#b78ae0; }

.friend-list { display:flex; flex-direction:column; gap:8px; }
.friend-row { display:flex; align-items:center; gap:12px; background:var(--card-solid); border:1px solid #f0e0ea; border-radius:16px; padding:11px 13px; transition:all .15s; }
.friend-row:hover { box-shadow:var(--shadow-soft); transform:translateX(2px); }
.fk-avatar { width:46px; height:46px; border-radius:50%; background:#fff5fa; border:2px solid #ffd6e6; display:flex; align-items:center; justify-content:center; font-size:23px; }
.fk-info { flex:1; min-width:0; }
.fk-name { font-size:14px; font-weight:800; }
.fk-town { font-size:11px; color:#7a5a94; font-weight:700; }
.fk-desc { font-size:11px; color:var(--sub); }
.friend-row .mini-btn { margin-left:6px; white-space:nowrap; }

/* ===== 小镇建造 ===== */
.build-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.build-stat {
  background:var(--card); border:1px solid #fff; border-radius:16px; padding:9px 16px;
  font-size:14px; font-weight:700; box-shadow:var(--shadow-soft); white-space:nowrap; backdrop-filter:blur(8px);
}
.build-tools { display:flex; gap:8px; flex-wrap:wrap; }
.tool-btn {
  background:var(--card-solid); border:1px solid #f0e0ea; border-radius:14px; padding:9px 14px;
  font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.tool-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.tool-btn.active { background:linear-gradient(90deg,var(--primary),var(--primary-d)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(255,127,179,.35); }
.tool-btn.danger { color:#e0536b; }
.tool-btn:active { transform:scale(.94); }
.build-canvas-wrap {
  position:relative; background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 16px 40px rgba(158,140,200,.2); border:3px solid #fff;
  flex-shrink:0; min-height:200px;   /* 防止在 flex column 屏幕里被挤压到 0 */
}
#build-canvas { width:100%; height:auto; display:block; touch-action:none; cursor:grab; }
.build-hint {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(90,74,110,.85); color:#fff; font-size:12px; padding:7px 16px; border-radius:14px;
  pointer-events:none; white-space:nowrap; backdrop-filter:blur(4px); box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.build-scale { display:none; align-items:center; gap:10px; margin-top:10px; background:var(--card); padding:10px 16px; border-radius:16px; border:1px solid #fff; font-size:13px; font-weight:700; box-shadow:var(--shadow-soft); }
.build-scale input[type=range] { flex:1; accent-color:var(--primary); }
.furn-shop { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:4px; }
.furn-card {
  background:var(--card-solid); border-radius:18px; padding:12px 6px; text-align:center; cursor:pointer;
  border:1px solid #f0e0ea; transition:transform .15s, box-shadow .15s; box-shadow:0 2px 6px rgba(0,0,0,.04);
  position:relative;
}
.furn-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.furn-card:active { transform:scale(.94); }
.furn-card .fc-icon { font-size:32px; display:inline-block; transition:transform .25s; filter:drop-shadow(0 2px 3px rgba(158,140,200,.25)); }
.furn-card:hover .fc-icon { transform:scale(1.15) rotate(-5deg); }
.furn-card .fc-name { font-size:12px; font-weight:700; margin:4px 0 2px; }
.furn-card .fc-meta { font-size:10px; color:var(--sub); }
.furn-card .fc-own { font-size:10px; color:#2a9d8f; font-weight:700; margin-top:2px; }

/* ===== 响应式 · 手机端排布优化 ===== */

/* 中尺寸平板/窄窗口 */
@media (max-width:720px) {
  .hall-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .screen { padding:14px; }

  /* 男主羁绊：≥560 宽的大屏手机/平板竖屏也压成 2 列，避免全宽行把聊天按钮顶到屏外 */
  .heart-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .heart-card { padding:10px; gap:9px; border-radius:16px; flex-direction:column; text-align:center; }
  .hc-avatar { width:44px; height:44px; font-size:22px; }
  .hc-body { width:100%; }
  .hc-top { flex-direction:column; gap:2px; }
  .hc-name { font-size:14px; }
  .hc-title { font-size:10px; }
  .hc-heart { font-size:10px; }
  .hc-bio { display:none; }
  .hc-bar { height:6px; }
  .hc-meta { display:none; }
  .heart-detail { display:none; }            /* 隐藏大详情面板，让聊天按钮上移 */

  /* ===== 男主页整体压紧：聊天按钮与送礼都挤进首屏，且明确分隔不遮挡 ===== */
  .heart-panel { padding:12px; }
  .heart-list { gap:6px; }
  .heart-card { padding:8px 6px; gap:5px; border-radius:14px; }
  .hc-avatar { width:40px; height:40px; font-size:20px; }
  .hc-name { font-size:13px; }
  .hc-title { display:none; }                /* 隐藏称号进一步压缩卡片 */
  #talk-bubble { margin:5px 0 3px; }

  /* 聊天按钮：加大、醒目，与下方送礼区留出明确间距 */
  #btn-chat {
    margin:10px 0 22px; padding:14px 16px; font-size:16px;
    border-radius:16px; flex-shrink:0;
  }
  .heart-gifts { margin-top:0; }
  .heart-gifts .section-label { margin-bottom:8px; }
  .heart-gifts .gift-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
  .gift-item { padding:6px 3px; border-radius:12px; gap:2px; }
  .gift-item .gi-icon { font-size:26px; }
  .gift-item .gi-count, .gift-item .gift-fav { font-size:8px; }
  .gift-item .gi-name { font-size:10px; }
  .gift-item .gi-gain { display:none; }      /* 隐藏收益文字，压缩卡片 */
  .gift-item .mini-btn { font-size:10px; padding:3px 6px; border-radius:8px; margin-top:1px; }
}

/* 手机竖屏（主流手机 320–430px） */
@media (max-width:560px) {
  /* 屏幕内边距收紧，顶部避开刘海/状态栏 */
  .screen { padding:12px; padding-top:max(14px, env(safe-area-inset-top)); padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  .screen-head { margin-bottom:12px; }
  .head-title { font-size:18px; }

  /* ===== 主大厅：紧凑两列宫格，卡片更适合拇指点击 ===== */
  .hall-top { flex-wrap:wrap; gap:10px; margin-bottom:12px; }
  .player-info .avatar { width:48px; height:48px; font-size:24px; }
  .player-name { font-size:16px; }
  .res-bar { gap:6px; flex-wrap:wrap; }
  .res-chip { padding:6px 9px; font-size:12px; border-radius:13px; }
  .hall-grid { grid-template-columns:repeat(2,1fr); gap:12px; align-content:start; }
  .hall-card { padding:18px 8px 16px; gap:6px; border-radius:20px; }
  .hall-card .hc-icon { font-size:34px; }
  .hall-card .hc-name { font-size:14px; }
  .hall-card.soon em { font-size:10px; }
  .hall-bottom { margin-top:14px; gap:8px; }
  .sign-banner { padding:12px 14px; font-size:13px; border-radius:15px; }

  /* ===== 花园 ===== */
  .garden-plots { grid-template-columns:repeat(2,1fr); gap:10px; }
  .plot { min-height:120px; border-radius:18px; padding:8px; }
  .plot .plant-stage { font-size:30px; }
  .seed-shop { grid-template-columns:repeat(2,1fr); gap:10px; }
  .seed-card { padding:12px 8px; border-radius:18px; }
  .seed-card .sc-icon { font-size:28px; }
  .seed-card .sc-btn { font-size:11px; padding:7px 10px; margin-top:6px; }

  /* ===== 工坊 =====
     结构：#craft-list(外层容器) > .section-label + .craft-list(内层卡片网格)
     外层不能当 2 列 grid（会把 label 和卡片列表并排拆开），改上下堆叠；
     内层 .craft-list 才是真正放卡片的网格。 */
  #craft-list { display:block; }
  #craft-list .craft-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .craft-list .craft-card { padding:14px 8px; border-radius:18px; }
  .craft-card .cc-icon { font-size:32px; }
  .craft-card .cc-name { font-size:14px; }
  .craft-card .cc-desc { font-size:11px; min-height:26px; }
  .craft-card .btn { font-size:12px; padding:11px 8px; }

  /* ===== 签到日历：7 列保持，但格子缩小 ===== */
  .sign-board { padding:18px 12px; border-radius:26px; }
  .sign-cal { gap:5px; margin:14px 0; }
  .sign-day { border-radius:12px; font-size:10px; }
  .sign-day .sd-n { font-size:14px; }

  /* ===== 换装 ===== */
  .dress-stat { padding:7px 12px; font-size:13px; }
  .dress-tabs { gap:6px; }
  .cat-tab { padding:7px 12px; font-size:12px; border-radius:12px; }
  .dress-shop { grid-template-columns:repeat(3,1fr); gap:8px; }
  .dress-item .mini-btn { font-size:11px; padding:6px 4px; }

  /* ===== 男主羁绊 ===== */
  .heart-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .heart-card { padding:10px; gap:9px; border-radius:16px; flex-direction:column; text-align:center; }
  .hc-avatar { width:44px; height:44px; font-size:22px; }
  .hc-body { width:100%; }
  .hc-top { flex-direction:column; gap:2px; }
  .hc-name { font-size:14px; }
  .hc-title { font-size:10px; }
  .hc-heart { font-size:10px; }
  .hc-bio { display:none; }   /* 列表里隐藏简介，详情面板已展示 */
  .hc-bar { height:6px; }
  .hc-meta { font-size:9px; }
  .heart-detail { flex-direction:row; padding:14px; gap:12px; border-radius:18px; }
  .hd-avatar { width:60px; height:60px; font-size:28px; }

  /* 手机端隐藏大号详情面板（与卡片信息重复，且把聊天按钮顶到屏外），让按钮上移可点 */
  .heart-detail { display:none; }
  .heart-gifts .gift-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .gift-item { padding:10px 4px; border-radius:16px; }
  .gift-item .gi-icon { font-size:28px; }

  /* 男主页：卡片压缩 + 聊天按钮与送礼区明确分隔，避免矮屏按钮被送礼区遮挡/半边截断 */
  .heart-card { padding:8px; gap:6px; }
  .hc-avatar { width:38px; height:38px; font-size:19px; }
  .hc-top { gap:1px; }
  .hc-heart { font-size:9px; }
  .hc-bar { height:5px; margin:3px 0; }
  .hc-meta { display:none; }            /* 列表里的小数值行冗余，隐藏以大幅缩短卡片 */
  #btn-chat { margin:8px 0 20px; }      /* 与下方送礼区留出更大间距，避免遮挡 */
  .heart-gifts { margin-top:0; }
  .gift-item .gi-gain { display:none; } /* 隐藏收益文字，压缩卡片 */

  /* 极矮屏（如带浏览器底栏的手机 ~600px 高）：进一步收紧，务必让聊天按钮完整露出 */
  @media (max-height: 640px) {
    .heart-list { gap:6px; }
    .heart-card { padding:6px; }
    .hc-avatar { width:32px; height:32px; font-size:16px; }
    .hc-name { font-size:12px; }
    .hc-title { font-size:9px; }
    #talk-bubble { margin:4px 0 2px; }
    #btn-chat { padding:12px; font-size:14px; margin:6px 0 16px; }
    .gift-item { padding:6px 3px; }
    .gift-item .gi-icon { font-size:22px; }
    .gift-item .mini-btn { font-size:9px; padding:2px 4px; }
  }

  .cg-grid { grid-template-columns:repeat(2,1fr); gap:8px; }   /* 3列→2列 */
  .cg-card { padding:14px 8px; border-radius:16px; }
  .cg-card .cg-icon { font-size:34px; }

  /* ===== 小镇社交 ===== */
  .social-tabs .cat-tab { min-width:0; font-size:12px; padding:7px 8px; }
  .album-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .album-card { padding:12px 6px; border-radius:16px; }
  .album-card .al-emoji { font-size:28px; }
  .album-card .al-name { font-size:12px; }
  .task-row { padding:10px 11px; gap:8px; }
  .event-card { padding:14px; border-radius:18px; }
  .rank-row, .friend-row { padding:10px 11px; gap:10px; }
  .friend-row .mini-btn { font-size:11px; padding:6px 8px; }

  /* ===== 小镇建造 ===== */
  .build-tools { gap:6px; }
  .tool-btn { padding:8px 11px; font-size:12px; border-radius:12px; }
  .build-scale { padding:8px 12px; font-size:12px; }
  .furn-shop { grid-template-columns:repeat(3,1fr); gap:8px; }   /* 5列→3列，卡片更大好点 */
  .furn-card { padding:12px 6px; border-radius:15px; }
  .furn-card .fc-icon { font-size:30px; }
  .furn-card .fc-name { font-size:12px; }
  .furn-card .fc-meta { font-size:10px; }
  .build-hint { font-size:11px; padding:6px 12px; bottom:8px; }

  /* ===== 全局交互 ===== */
  #sound-toggle { top:10px; right:10px; width:38px; height:38px; font-size:17px; }
  .btn.big { padding:15px; font-size:16px; }
  .btn-back { padding:8px 12px; font-size:13px; }
  .login-card { padding:34px 20px 28px; border-radius:30px; }
  .logo { font-size:25px; }

  /* 保证绝不横向溢出 */
  .screen, .hall-grid, .garden-plots, .seed-shop, .craft-list,
  .dress-shop, .furn-shop, .cg-grid, .album-grid {
    max-width:100%; overflow-x:hidden;
  }

  /* 花园/工坊：外层容器是「标签+内部网格」两层结构，外层必须上下堆叠，
     只有内层真网格才分列（否则标签被并到一列、被拉成 400px 高的竖条） */
  #seed-shop, #craft-list { display:block; }
  #seed-shop > .seed-shop, #craft-list > .craft-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* 小屏手机（≤360px，如 iPhone SE / 旧安卓） */
@media (max-width:360px) {
  .screen { padding:10px; }
  .hall-grid, .garden-plots, .seed-shop, .craft-list { grid-template-columns:repeat(2,1fr); gap:8px; }
  .dress-shop { grid-template-columns:repeat(2,1fr); }
  .furn-shop { grid-template-columns:repeat(3,1fr); }
  .heart-gifts .gift-grid { grid-template-columns:repeat(2,1fr); }
  .hall-card .hc-icon { font-size:30px; }
  .hall-card .hc-name { font-size:13px; }
  .res-chip { padding:5px 8px; font-size:11px; }
  .sign-day .sd-n { font-size:12px; }
}