/* ============================================================
   style.css — 星露谷 × Apple 融合风格
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── 颜色变量 ───────────────────────────────────────────────── */
:root {
  --bg:           #1a1108;   /* 深夜泥土 */
  --bg2:          #0f0b04;
  --panel:        #2e1f10;   /* 木板棕 */
  --panel-2:      #3a2818;   /* 浅木板 */
  --border:       #7a5533;   /* 木纹边框 */
  --border-hi:    #b07848;   /* 高光边框 */
  --border-lo:    #3d2010;   /* 阴影边框 */

  --accent:       #f0c040;   /* 丰收金 */
  --accent-dim:   #7a5f10;
  --accent-glow:  rgba(240,192,64,.25);

  --apple-silver: #e8e8ed;   /* Apple 银 */
  --apple-blue:   #0a84ff;   /* Apple 蓝 */
  --apple-green:  #30d158;   /* Apple 绿 */
  --sky:          #78b4e8;   /* 晴天蓝 */

  --text:         #f5e6c0;   /* 羊皮纸 */
  --text-dim:     #9b7d50;   /* 旧纸颜色 */
  --red:          #c0392b;

  /* 稀有度 — 宝石色 */
  --c-common:    #a0a080;   /* 灰石 */
  --c-rare:      #5bbfff;   /* 蓝宝石 */
  --c-epic:      #d070ff;   /* 紫水晶 */
  --c-legendary: #ffc840;   /* 星光金 */

  --ff-pixel: 'Press Start 2P', 'Courier New', monospace;
  --ff-body:  -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  overflow: hidden;
}

/* 草地纹理背景 */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(40,80,20,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(20,40,80,.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── 星露谷风格木框 Mixin ────────────────────────────────────── */
.sdv-panel {
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    inset 2px 2px 0 var(--border-hi),
    inset -2px -2px 0 var(--border-lo),
    0 4px 16px rgba(0,0,0,.5);
  image-rendering: pixelated;
}

/* ── 字体 ───────────────────────────────────────────────────── */
.title-pixel {
  font-family: var(--ff-pixel);
  font-size: clamp(14px, 2.2vw, 32px);
  color: var(--accent);
  text-shadow: 2px 2px 0 #3a2800, 0 0 20px var(--accent-dim);
  letter-spacing: 2px;
  line-height: 1.5;
}
.subtitle-pixel {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .75vw, 9px);
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-top: 6px;
}
.panel-title {
  font-family: var(--ff-pixel);
  font-size: clamp(8px, 1vw, 13px);
  color: var(--accent);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  text-shadow: 1px 1px 0 #3a2800;
  flex-shrink: 0;
}

/* ── Loading ────────────────────────────────────────────────── */
.loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100vh; gap: 28px;
}
.loading-icon { font-size: 56px; animation: bounce 0.8s steps(2) infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Buttons ────────────────────────────────────────────────── */
.pixel-btn {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .78vw, 9px);
  background: var(--panel-2);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--border-hi), inset -1px -1px 0 var(--border-lo),
              2px 2px 0 rgba(0,0,0,.4);
  color: var(--accent);
  padding: 8px 14px;
  cursor: pointer;
  transition: .08s;
  white-space: nowrap;
}
.pixel-btn:hover {
  background: var(--border);
  color: var(--text);
  transform: translate(1px, 1px);
  box-shadow: inset 1px 1px 0 var(--border-hi), inset -1px -1px 0 var(--border-lo),
              1px 1px 0 rgba(0,0,0,.4);
}
.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.back-btn {
  position: absolute; top: 20px; left: 20px;
  color: var(--text-dim); border-color: var(--border-lo);
}
.back-btn:hover { color: var(--text); }

/* ── 主屏 ───────────────────────────────────────────────────── */
.main-view {
  display: flex; flex-direction: column;
  height: 100vh; padding: 16px 20px; gap: 12px;
}

.main-header {
  display: flex; align-items: flex-start;
  gap: 20px; padding: 12px 18px;
  border-bottom: 3px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--panel-2) 0%, transparent 100%);
}

/* Apple logo 装饰 */
.main-header::before {
  content: ' ';
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1;
  align-self: center;
}

.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.main-content {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 12px; flex: 1; min-height: 0;
}

/* ── 木框 Panel ─────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    inset 2px 2px 0 var(--border-hi),
    inset -2px -2px 0 var(--border-lo);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}

/* ── 今日解锁 ───────────────────────────────────────────────── */
.unlocks-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}
.unlock-item {
  display: flex; align-items: center;
  gap: 14px; padding: 10px 14px;
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  cursor: pointer; transition: .1s;
  animation: slideIn .3s ease;
}
.unlock-item:hover {
  border-color: var(--accent);
  background: rgba(240,192,64,.07);
}
@keyframes slideIn {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.unlock-item.rarity-rare      { border-color: var(--c-rare);      box-shadow: 0 0 8px  rgba(91,191,255,.3); }
.unlock-item.rarity-epic      { border-color: var(--c-epic);      box-shadow: 0 0 10px rgba(208,112,255,.35); }
.unlock-item.rarity-legendary {
  border-color: var(--c-legendary);
  box-shadow: 0 0 16px rgba(255,200,64,.4);
  animation: legGlow 2s ease-in-out infinite alternate, slideIn .3s ease;
}
@keyframes legGlow {
  from { box-shadow: 0 0 8px  rgba(255,200,64,.3); }
  to   { box-shadow: 0 0 24px rgba(255,200,64,.7), 0 0 50px rgba(255,200,64,.2); }
}

.unlock-icon  { font-size: clamp(24px, 3.2vw, 48px); flex-shrink: 0; }
.unlock-info  { flex: 1; min-width: 0; }
.unlock-name  { font-size: clamp(14px, 1.8vw, 24px); font-weight: 700; color: var(--text); }
.unlock-badge {
  font-family: var(--ff-pixel);
  font-size: clamp(7px, .9vw, 12px);
  color: var(--accent);
  margin-top: 4px;
}
.unlock-desc  { font-size: clamp(10px, 1.1vw, 13px); color: var(--text-dim); margin-top: 3px; }

.rarity-tag {
  font-size: .72em; padding: 2px 5px;
  border: 1px solid currentColor;
  margin-left: 8px; vertical-align: middle;
}
.rarity-tag.rarity-common    { color: var(--c-common); }
.rarity-tag.rarity-rare      { color: var(--c-rare); }
.rarity-tag.rarity-epic      { color: var(--c-epic); }
.rarity-tag.rarity-legendary { color: var(--c-legendary); }

/* ── 本月排行 ───────────────────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.rank-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  cursor: pointer; transition: .1s;
}
.rank-item:hover { border-color: var(--accent); background: rgba(240,192,64,.06); }
.rank-pos-1 { border-color: #c8a820 !important; background: rgba(200,168,32,.08) !important; }
.rank-pos-2 { border-color: #888 !important; }
.rank-pos-3 { border-color: var(--border) !important; }
.rank-icon  { font-size: clamp(16px, 2vw, 26px); }
.rank-name  { font-size: clamp(13px, 1.7vw, 21px); flex: 1; }
.rank-count {
  font-family: var(--ff-pixel);
  font-size: clamp(14px, 1.8vw, 24px);
  color: var(--accent);
  text-shadow: 1px 1px 0 #3a2800;
}
.rank-unit  { font-size: .65em; color: var(--text-dim); }
.view-hint  { font-size: clamp(6px, .75vw, 9px); color: var(--text-dim); text-align: right; margin-top: auto; }

/* ── 今日贡献条 ─────────────────────────────────────────────── */
.today-bar {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  flex-shrink: 0;
}
.today-label { font-size: clamp(8px, .9vw, 11px); color: var(--text-dim); flex-shrink: 0; }
.contrib-tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--panel);
  font-size: clamp(10px, 1.1vw, 13px);
  cursor: pointer; transition: .1s;
}
.contrib-tag:hover { background: var(--border); color: var(--text); }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; flex: 1; min-height: 80px;
  color: var(--text-dim); text-align: center;
  font-size: clamp(12px, 1.4vw, 17px);
}
.empty-icon  { font-size: clamp(28px, 4vw, 48px); opacity: .35; }
.empty-hint  { font-size: clamp(8px, .9vw, 11px); opacity: .5; }

/* ── 徽章墙 ─────────────────────────────────────────────────── */
.wall-view {
  padding: 20px 28px;
  height: 100vh; overflow-y: auto; position: relative;
  background: var(--bg);
}
.person-header {
  padding: 64px 20px 24px;
  text-align: center;
  border-bottom: 3px solid var(--border);
  margin-bottom: 24px;
}
.person-name {
  font-size: clamp(26px, 4vw, 54px);
  font-weight: 900; color: var(--accent);
  text-shadow: 3px 3px 0 #3a2800, 0 0 20px var(--accent-dim);
}
.person-stats {
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 24px;
  margin-top: 10px;
  font-size: clamp(12px, 1.4vw, 17px);
  color: var(--text-dim);
}
.person-stats strong { color: var(--accent); }
.badge-progress {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .78vw, 9px);
  color: var(--text-dim); margin-top: 8px;
}

.badge-cat { margin-bottom: 26px; }
.cat-title {
  font-family: var(--ff-pixel);
  font-size: clamp(7px, .88vw, 11px);
  color: var(--text-dim);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border-lo);
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(76px, 9.5vw, 115px), 1fr));
  gap: 12px;
}

/* 宝石/星露谷风格徽章格子 */
.badge-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 12px 6px;
  background: var(--panel-2);
  border: 3px solid var(--border-lo);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.4);
  transition: transform .12s;
  user-select: none;
}
.badge-cell.unlocked { cursor: pointer; }
.badge-cell.unlocked:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.badge-cell.locked   { opacity: .25; filter: grayscale(1); cursor: pointer; }

.badge-cell.unlocked.rarity-rare      { border-color: var(--c-rare);      box-shadow: 0 0 8px  rgba(91,191,255,.4); }
.badge-cell.unlocked.rarity-epic      { border-color: var(--c-epic);      box-shadow: 0 0 10px rgba(208,112,255,.4); }
.badge-cell.unlocked.rarity-legendary {
  border-color: var(--c-legendary);
  box-shadow: 0 0 16px rgba(255,200,64,.5);
  animation: legGlow 2s ease-in-out infinite alternate;
}

.badge-icon   { font-size: clamp(20px, 2.6vw, 34px); display: flex; align-items: center; justify-content: center; }
.badge-name   {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .72vw, 8px);
  text-align: center; line-height: 1.5;
  color: var(--text);
}
.badge-rarity { font-size: clamp(5px, .62vw, 7px); opacity: .6; }
.badge-rarity.rarity-rare      { color: var(--c-rare); }
.badge-rarity.rarity-epic      { color: var(--c-epic); }
.badge-rarity.rarity-legendary { color: var(--c-legendary); }

/* ── 全员名册 ───────────────────────────────────────────────── */
.roster-view {
  padding: 20px 28px;
  height: 100vh; overflow-y: auto; position: relative;
}
.roster-title { margin: 60px 0 20px; }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 14vw, 190px), 1fr));
  gap: 12px;
}
.roster-card {
  background: var(--panel-2);
  border: 3px solid var(--border-lo);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.05), 2px 2px 0 rgba(0,0,0,.3);
  padding: 12px 10px;
  cursor: pointer; transition: .12s;
  display: flex; flex-direction: column; gap: 5px;
}
.roster-card:hover {
  border-color: var(--accent);
  background: rgba(240,192,64,.06);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.roster-name   { font-size: clamp(13px, 1.7vw, 19px); font-weight: 700; color: var(--text); }
.roster-team   { font-size: clamp(9px, 1vw, 12px); color: var(--text-dim); }
.roster-badges-preview {
  font-size: clamp(15px, 2vw, 22px);
  min-height: 1.4em;
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
}
.roster-badges-preview .more     { font-size: .7em; color: var(--text-dim); }
.roster-badges-preview .no-badge { font-size: .62em; color: var(--text-dim); }
.roster-stats  { font-size: clamp(8px, .9vw, 11px); color: var(--text-dim); }

/* ── 录入页 ─────────────────────────────────────────────────── */
.input-view {
  max-width: 580px; margin: 0 auto;
  padding: 20px 24px;
  height: 100vh; overflow-y: auto; position: relative;
}
.input-title { margin: 60px 0 24px; }
.input-form  { display: flex; flex-direction: column; gap: 16px; }
.form-group  { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .78vw, 9px);
  color: var(--text-dim);
}
.form-group select,
.form-group input {
  background: var(--panel-2);
  border: 3px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--border-lo), inset -1px -1px 0 var(--border-hi);
  color: var(--text);
  padding: 10px 14px;
  font-size: 16px;
  font-family: var(--ff-body);
  width: 100%;
  appearance: none;
}
.form-group select:focus,
.form-group input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.submit-btn {
  padding: 13px; margin-top: 4px;
  border-color: var(--accent); color: var(--accent);
  font-size: clamp(8px, 1vw, 11px);
}
.submit-btn:hover { background: var(--accent); color: var(--bg); }

.inp-feedback { margin-top: 8px; min-height: 20px; }
.inp-feedback.success {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .78vw, 9px);
  color: var(--apple-green);
  padding: 10px 14px;
  border: 2px solid var(--apple-green);
  background: rgba(48,209,88,.07);
}

.today-log { margin-top: 24px; }
.today-log-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.today-log-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; /* 始终靠右 */
}
.log-item {
  display: flex; align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-lo);
  font-size: clamp(12px, 1.4vw, 16px);
  gap: 8px;
}
.log-name  { flex: 1; }
.log-count { color: var(--accent); font-family: var(--ff-pixel); font-size: .8em; }

.local-hint {
  margin-top: 24px; padding: 14px 16px;
  border: 2px dashed var(--border-lo);
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--text-dim); line-height: 1.7;
}

/* ── 删除按钮 ───────────────────────────────────────────────── */
.del-btn {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 2px 7px;
  cursor: pointer; font-size: 10px;
  margin-left: auto; flex-shrink: 0;
  transition: .1s;
}
.del-btn:hover { background: var(--red); color: #fff; }

.del-all-btn { border-color: var(--red); color: var(--red); }
.del-all-btn:hover { background: var(--red); color: #fff; }

/* ── 数据管理 ───────────────────────────────────────────────── */
.manage-view {
  padding: 20px 24px;
  height: 100vh; overflow-y: auto; position: relative;
}
.manage-title { margin: 60px 0 20px; }
.manage-date-group { margin-bottom: 20px; }
.manage-date-header {
  display: flex; align-items: center;
  gap: 12px; padding: 6px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
}
.manage-date {
  font-family: var(--ff-pixel);
  font-size: clamp(7px, .88vw, 11px);
  color: var(--accent);
}
.manage-date-total {
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--text-dim);
}

/* ── 季节主题 ───────────────────────────────────────────────── */

/* 春：嫩绿 × 樱花粉 */
body.season-spring {
  --bg:          #080f08;
  --bg2:         #050a05;
  --panel:       #132010;
  --panel-2:     #1c3018;
  --border:      #4a7838;
  --border-hi:   #7ab858;
  --border-lo:   #253818;
  --accent:      #ffb8d8;
  --accent-dim:  #885068;
  --accent-glow: rgba(255,184,216,.22);
  --text:        #f8f0ec;
  --text-dim:    #8a7870;
  --c-legendary: #ffb8d8;
}
body.season-spring::before {
  background-image:
    radial-gradient(ellipse at 15% 85%, rgba(200,80,120,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(80,160,80,.10)  0%, transparent 50%);
}

/* 夏：深夜蓝 × 萤火青 */
body.season-summer {
  --bg:          #040c18;
  --bg2:         #020810;
  --panel:       #081a30;
  --panel-2:     #0c2238;
  --border:      #1c4870;
  --border-hi:   #3878b8;
  --border-lo:   #0c1e30;
  --accent:      #38d8f8;
  --accent-dim:  #106888;
  --accent-glow: rgba(56,216,248,.20);
  --text:        #cce8ff;
  --text-dim:    #407090;
  --c-legendary: #38d8f8;
}
body.season-summer::before {
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(0,80,160,.15)  0%, transparent 50%),
    radial-gradient(ellipse at 75% 25%, rgba(0,160,200,.10) 0%, transparent 45%);
}

/* 秋：丰收暖橙（当前主题增强版） */
body.season-autumn {
  --bg:          #160b02;
  --bg2:         #0e0700;
  --panel:       #2c1608;
  --panel-2:     #3c2010;
  --border:      #904818;
  --border-hi:   #c87828;
  --border-lo:   #3c1808;
  --accent:      #ffa828;
  --accent-dim:  #804010;
  --accent-glow: rgba(255,168,40,.22);
  --text:        #ffe8c0;
  --text-dim:    #906840;
  --c-legendary: #ffa828;
}
body.season-autumn::before {
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(120,50,10,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(40,20,80,.10)  0%, transparent 50%);
}

/* 冬：星夜蓝 × 冰雪银 */
body.season-winter {
  --bg:          #03060f;
  --bg2:         #020408;
  --panel:       #081428;
  --panel-2:     #0c1c30;
  --border:      #244470;
  --border-hi:   #4070b0;
  --border-lo:   #0c1c30;
  --accent:      #88ccff;
  --accent-dim:  #1c4870;
  --accent-glow: rgba(136,204,255,.20);
  --text:        #d8ecff;
  --text-dim:    #405870;
  --c-legendary: #88ccff;
}
body.season-winter::before {
  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(20,60,140,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgba(80,120,200,.10) 0%, transparent 45%);
}

/* ── 季节粒子 ───────────────────────────────────────────────── */
#season-fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.season-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  user-select: none;
}

/* 春秋通用：飘落 */
.sp-fall {
  animation: spFall linear infinite;
}
@keyframes spFall {
  0%   { transform: translateX(0) translateY(0) rotate(0deg);
         opacity: 0; }
  8%   { opacity: .75; }
  88%  { opacity: .55; }
  100% { transform: translateX(calc(var(--drift) * 1px))
                    translateY(108vh)
                    rotate(calc(var(--spin) * 400deg));
         opacity: 0; }
}

/* 冬：雪花，比叶子漂更慢更柔 */
.sp-snow {
  animation: spSnow linear infinite;
  color: #cce8ff;
}
@keyframes spSnow {
  0%   { transform: translateX(0) translateY(0) rotate(0deg);
         opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .6; }
  100% { transform: translateX(calc(var(--drift) * .6px))
                    translateY(106vh)
                    rotate(calc(var(--spin) * 240deg));
         opacity: 0; }
}

/* 夏：萤火虫飘浮 */
.sp-firefly {
  border-radius: 50%;
  background: #38d8f8;
  box-shadow: 0 0 6px 3px rgba(56,216,248,.7);
  animation: spFirefly ease-in-out infinite;
}
@keyframes spFirefly {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(calc(var(--fx) * 1px), calc(var(--fy) * -1px)) scale(1.3);
         opacity: .9; }
  80%  { opacity: .6; }
  100% { transform: translate(calc(var(--fx) * 1.8px), calc(var(--fy) * -2.2px)) scale(.7);
         opacity: 0; }
}

/* ── 季节标签（主屏 header）────────────────────────────────── */
.season-label {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .65vw, 8px);
  color: var(--accent);
  opacity: .75;
  margin-top: 5px;
  letter-spacing: 2px;
}

/* ── 电子宠物区（ASCII 帧动画版）───────────────────────────── */
.pet-section {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.5vw, 28px);
  margin: 0 0 28px;
  background: var(--panel-2);
  border: 3px solid var(--border-lo);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.04), 2px 2px 0 rgba(0,0,0,.3);
}
.pet-section.quality-glow-rare {
  border-color: rgba(91,191,255,.45);
  box-shadow: 0 0 10px rgba(91,191,255,.2);
}
.pet-section.quality-glow-epic {
  border-color: rgba(208,112,255,.45);
  box-shadow: 0 0 12px rgba(208,112,255,.25);
}
.pet-section.quality-glow-legendary {
  border-color: var(--c-legendary);
  box-shadow: 0 0 20px rgba(255,200,64,.35);
  animation: legGlow 2s ease-in-out infinite alternate;
}

/* 训练师头像 */
.trainer-photo-wrap {
  width: clamp(54px, 6.5vw, 80px);
  height: clamp(54px, 6.5vw, 80px);
  border: 3px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--border-hi), inset -1px -1px 0 var(--border-lo);
  flex-shrink: 0;
  overflow: hidden;
}
.trainer-photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.trainer-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-pixel);
  font-size: clamp(12px, 1.5vw, 18px);
  color: var(--accent);
  background: var(--panel);
}

/* ASCII 宠物展示 */
.pet-display-area {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  flex-shrink: 0;
}
.pet-display-area.pet-clickable {
  cursor: pointer;
  border: 1px dashed transparent;
  padding: 4px 8px;
  transition: border-color .18s ease, transform .12s ease;
}
.pet-display-area.pet-clickable:hover,
.pet-display-area.pet-clickable:focus-visible {
  border-color: var(--accent);
}
.pet-display-area.pet-clickable:active {
  transform: scale(.98);
}
.pet-ascii-wrap {
  animation: petBounce 2.2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  min-width: clamp(100px, 12vw, 160px);
}
@keyframes petBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.legendary-bounce {
  animation: legendaryBounce 1.4s ease-in-out infinite;
}
@keyframes legendaryBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.04); }
}

.pet-ascii {
  font-family: 'Courier New', 'Menlo', monospace;
  font-size: clamp(11px, 1.3vw, 16px);
  line-height: 1.55;
  white-space: pre;
  margin: 0;
  transition: color .3s;
  user-select: none;
}
/* 品质颜色 */
.q-text-common    { color: #c8c8cc; }
.q-text-rare      { color: #5bbfff; text-shadow: 0 0 6px rgba(91,191,255,.7); }
.q-text-epic      { color: #d070ff; text-shadow: 0 0 8px rgba(208,112,255,.8); }
.q-text-legendary {
  color: #ffc840;
  animation: legendTextGlow 1.2s ease-in-out infinite alternate;
}
@keyframes legendTextGlow {
  from { text-shadow: 0 0 6px rgba(255,200,64,.8); }
  to   { text-shadow: 0 0 16px rgba(255,200,64,1), 0 0 4px #fff8; }
}

.pet-product-name {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .72vw, 9px);
  color: var(--accent); text-align: center;
}
.pet-quality-chip {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .6vw, 7px);
  padding: 2px 7px;
  border: 1px solid currentColor;
}
.pet-quality-chip.q-common    { color: var(--c-common); }
.pet-quality-chip.q-rare      { color: var(--c-rare); }
.pet-quality-chip.q-epic      { color: var(--c-epic); }
.pet-quality-chip.q-legendary { color: var(--c-legendary); }
.pet-click-hint {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .58vw, 7px);
  color: var(--text-dim);
  opacity: .8;
}

/* 宠物信息列 */
.pet-info-area {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
}
.pet-stat-row {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(11px, 1.3vw, 16px);
}
.pet-stat-label { color: var(--text-dim); min-width: 3em; }
.pet-stat-val   { color: var(--text); font-weight: 600; }

.pet-evo-bar-wrap {
  display: flex; align-items: center; gap: 8px;
}
.pet-evo-bar {
  flex: 1; height: 6px;
  background: var(--panel);
  border: 1px solid var(--border-lo);
}
.pet-evo-fill {
  height: 100%;
  background: var(--accent);
  transition: width .4s ease;
}
.pet-evo-fill.q-fill-rare      { background: #5bbfff; }
.pet-evo-fill.q-fill-epic      { background: #d070ff; }
.pet-evo-fill.q-fill-legendary { background: #ffc840; }
.pet-evo-pct {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .6vw, 7px);
  color: var(--text-dim); min-width: 2.8em;
}

.pet-next-hint {
  font-size: clamp(9px, 1vw, 12px);
  color: var(--text-dim);
}
.pet-next-hint strong { color: var(--accent); }
.pet-next-hint.maxed  { color: var(--c-legendary); }

.pet-last-event {
  font-family: var(--ff-pixel);
  font-size: clamp(5px, .6vw, 7px);
  color: var(--text-dim);
  border-left: 2px solid var(--border);
  padding-left: 8px;
  line-height: 1.8;
}
.pet-talk-text {
  font-size: clamp(10px, 1.05vw, 13px);
  color: var(--text);
  line-height: 1.6;
  min-height: 1.6em;
}
.pet-talk-text.error {
  color: #ff7e7e;
}

/* 未孵化状态 */
.pet-section.pet-locked { opacity: .55; }
.pet-egg-area {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.pet-egg-hint {
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--text-dim); text-align: center;
}

/* ── 像素图标 ───────────────────────────────────────────────── */
.pixel-badge-img {
  width: clamp(24px, 3vw, 40px);
  height: clamp(24px, 3vw, 40px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.unlock-pixel {
  width: clamp(32px, 4vw, 52px);
  height: clamp(32px, 4vw, 52px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* ── 徽章详情弹窗 ────────────────────────────────────────────── */
.badge-detail-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72);
  animation: fadeIn .15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.badge-detail-card {
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    inset 2px 2px 0 var(--border-hi),
    inset -2px -2px 0 var(--border-lo),
    0 12px 48px rgba(0,0,0,.7);
  padding: 28px 32px;
  min-width: clamp(200px, 28vw, 340px);
  max-width: 90vw;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  animation: popIn .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.badge-detail-card.rarity-border-rare      { border-color: var(--c-rare);      box-shadow: inset 2px 2px 0 var(--border-hi), inset -2px -2px 0 var(--border-lo), 0 0 24px rgba(91,191,255,.4); }
.badge-detail-card.rarity-border-epic      { border-color: var(--c-epic);      box-shadow: inset 2px 2px 0 var(--border-hi), inset -2px -2px 0 var(--border-lo), 0 0 24px rgba(208,112,255,.4); }
.badge-detail-card.rarity-border-legendary { border-color: var(--c-legendary); box-shadow: inset 2px 2px 0 var(--border-hi), inset -2px -2px 0 var(--border-lo), 0 0 32px rgba(255,200,64,.5); }

.bdm-img-wrap {
  width: clamp(56px, 8vw, 96px);
  height: clamp(56px, 8vw, 96px);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  padding: 8px;
}
.bdm-img-wrap img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.bdm-name {
  font-family: var(--ff-pixel);
  font-size: clamp(9px, 1.1vw, 14px);
  color: var(--accent);
  text-align: center;
  text-shadow: 1px 1px 0 #3a2800;
  margin-top: 4px;
}
.bdm-rarity {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .7vw, 8px);
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.bdm-rarity.rarity-common    { color: var(--c-common); }
.bdm-rarity.rarity-rare      { color: var(--c-rare); }
.bdm-rarity.rarity-epic      { color: var(--c-epic); }
.bdm-rarity.rarity-legendary { color: var(--c-legendary); }

.bdm-desc {
  font-size: clamp(10px, 1.2vw, 14px);
  color: var(--text);
  text-align: center; line-height: 1.7;
  border-top: 2px solid var(--border-lo);
  border-bottom: 2px solid var(--border-lo);
  padding: 12px 4px;
  width: 100%;
}
.bdm-condition {
  font-size: clamp(9px, 1vw, 12px);
  color: var(--text-dim);
  text-align: center; line-height: 1.6;
}
.bdm-status {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .75vw, 9px);
  padding: 5px 12px;
  border: 2px solid currentColor;
}
.bdm-status.achieved { color: var(--apple-green); }
.bdm-status.not-yet  { color: var(--text-dim); }

/* ── 成员管理 ───────────────────────────────────────────────── */
.members-admin-view {
  max-width: 680px; margin: 0 auto;
  padding: 20px 24px;
  height: 100vh; overflow-y: auto; position: relative;
}
.members-title { margin: 60px 0 4px; }
.members-count {
  font-size: clamp(9px, 1vw, 12px);
  color: var(--text-dim); margin-bottom: 20px;
}

.members-add-panel {
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.members-add-title {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .75vw, 9px);
  color: var(--text-dim); margin-bottom: 10px;
}
.members-add-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.member-input {
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--border-lo);
  color: var(--text);
  padding: 8px 12px; font-size: 14px;
  font-family: var(--ff-body);
  flex: 1; min-width: 100px;
}
.member-input.inline { flex: 1; min-width: 80px; }
.member-input:focus  { outline: none; border-color: var(--accent); }
.member-add-btn { flex-shrink: 0; }

.member-feedback {
  margin-top: 8px; min-height: 18px;
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .72vw, 8px);
}
.member-feedback.success { color: var(--apple-green); }
.member-feedback.error   { color: var(--red); }

.members-list { display: flex; flex-direction: column; gap: 4px; }
.member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--panel-2);
  border: 2px solid var(--border-lo);
  transition: .1s;
}
.member-row:hover { border-color: var(--border); }
.member-idx  { color: var(--text-dim); font-size: clamp(9px, 1vw, 12px); min-width: 24px; }
.member-name-cell { flex: 1; font-size: clamp(13px, 1.5vw, 17px); }
.member-team-cell {
  font-size: clamp(9px, 1vw, 12px);
  color: var(--text-dim);
  min-width: 80px;
}

.members-reset-zone {
  margin-top: 32px; padding-top: 16px;
  border-top: 2px solid var(--border-lo);
  text-align: right;
}

/* ── Mobile Entry / My Home ────────────────────────────────── */

/* ── 滚动条 ─────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--panel-2); }
::-webkit-scrollbar-thumb        { background: var(--border); }
::-webkit-scrollbar-thumb:hover  { background: var(--border-hi); }

/* ── 二维码弹窗 ─────────────────────────────────────────────── */
.qr-modal {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  animation: fadeIn .15s ease;
}
.qr-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 28px 32px;
  max-width: min(92vw, 320px);
}
.qr-title {
  font-family: var(--ff-pixel);
  font-size: clamp(8px, 1vw, 11px);
  color: var(--accent);
  text-align: center;
  text-shadow: 1px 1px 0 #3a2800;
}
.qr-canvas-wrap {
  background: #fff;
  padding: 10px;
  border: 3px solid var(--border);
  line-height: 0; /* 避免 canvas 下方出现多余空白 */
}
.qr-canvas-wrap canvas,
.qr-canvas-wrap img {
  display: block;
}
.qr-url {
  font-size: 10px;
  color: var(--text-dim);
  word-break: break-all;
  text-align: center;
  max-width: 240px;
  line-height: 1.5;
}
.qr-hint {
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--text);
  text-align: center;
  line-height: 1.7;
  border-top: 1px solid var(--border-lo);
  padding-top: 10px;
  width: 100%;
}

/* ── 个人墙：保存页面按钮 ───────────────────────────────────── */
.save-page-btn {
  margin-top: 12px;
  border-color: var(--apple-blue);
  color: var(--apple-blue);
  font-size: clamp(7px, .85vw, 10px);
}
.save-page-btn:hover {
  background: var(--apple-blue);
  color: #fff;
}
.sync-btn {
  border-color: var(--apple-green);
  color: var(--apple-green);
}
.sync-btn:hover { background: var(--apple-green); color: #fff; }
.sync-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 下拉刷新指示条 ─────────────────────────────────────────── */
#ptr-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  opacity: 0;
  background: var(--accent);
  z-index: 500;
  font-size: 0;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent-glow);
}
#ptr-bar.ptr-ready {
  background: var(--apple-green);
  box-shadow: 0 0 8px rgba(48,209,88,.5);
}

/* 锁定模式标记 */
.locked-mode-hint {
  font-family: var(--ff-pixel);
  font-size: clamp(6px, .7vw, 8px);
  color: var(--text-dim);
  opacity: .6;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* ── 名册搜索框（全端）──────────────────────────────────────── */
.roster-search {
  display: block;
  width: 100%;
  background: var(--panel-2);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--border-lo);
  color: var(--text);
  padding: 10px 14px;
  font-size: 16px;
  font-family: var(--ff-body);
  margin-bottom: 14px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-sizing: border-box;
}
.roster-search::placeholder { color: var(--text-dim); }
.roster-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ── Mobile (iPhone Pro / Pro Max) ─────────────────────────── */
@media (max-width: 480px) {
  html, body, #app {
    height: 100dvh;
  }

  /* 移动端字体整体放大 10% */
  html { font-size: 110%; }

  /* 全局触控目标 ≥ 44px（Apple HIG 标准） */
  .pixel-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 10px;
  }

  /* 录入页菜单靠右 */
  .today-log-header { flex-wrap: wrap; gap: 6px; }
  .today-log-actions { margin-left: auto; }

  .main-view,
  .wall-view,
  .roster-view,
  .input-view,
  .manage-view,
  .members-admin-view {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .main-view {
    height: 100dvh;
    padding-top: max(10px, env(safe-area-inset-top));
    gap: 10px;
  }
  .main-header {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }
  .header-actions {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .header-actions .pixel-btn {
    min-height: 44px;
    padding: 8px 4px;
    font-size: 9px;
  }

  .main-content {
    grid-template-columns: 1fr;
    gap: 10px;
    overflow-y: auto;
  }
  .panel {
    padding: 12px;
    min-height: 0;
  }
  .unlocks-list {
    grid-template-columns: 1fr;
  }
  .today-bar {
    padding: 8px 10px;
  }

  .back-btn {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 3;
    min-height: 44px;
  }
  .person-header {
    padding: 58px 8px 16px;
    margin-bottom: 16px;
  }
  .person-stats {
    gap: 8px 12px;
  }

  /* ── 宠物区：照片 + ASCII 并排，信息在下 ── */
  .pet-section {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px;
    margin-bottom: 16px;
  }
  /* 第 1 子：训练师头像 → 左列上排 */
  .pet-section > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    width: 64px;
    height: 64px;
    align-self: center;
  }
  /* 第 2 子：ASCII 展示区 / 蛋区 → 右列上排 */
  .pet-section > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  /* 第 3 子：宠物信息区 → 跨两列下排 */
  .pet-section > :nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pet-ascii-wrap {
    min-width: 0;
  }
  .pet-ascii {
    font-size: 13px;
    line-height: 1.45;
  }

  .badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .badge-cell {
    padding: 10px 4px;
    gap: 5px;
  }

  .roster-title,
  .input-title,
  .manage-title,
  .members-title {
    margin-top: 56px;
  }
  .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .input-view,
  .manage-view,
  .members-admin-view,
  .roster-view,
  .wall-view {
    height: 100dvh;
  }
  .members-add-row {
    flex-direction: column;
    align-items: stretch;
  }
  .member-add-btn {
    width: 100%;
    min-height: 44px;
  }
  .member-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .member-team-cell {
    min-width: 0;
  }

  .badge-detail-card {
    width: min(92vw, 360px);
    padding: 18px 14px;
  }
}

@media (max-width: 390px) {
  .header-actions {
    grid-template-columns: 1fr 1fr;
  }
  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}