:root {
  --bg: #f5f1e8;
  --card: #ffffff;
  --text: #2b2b2b;
  --muted: #777;
  --accent: #d9822b;
  --accent-text: #fff;
  --border: #e3dccd;
  --good: #3a9a4b;
  --bad: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1b18;
    --card: #2a2724;
    --text: #eee;
    --muted: #aaa;
    --border: #3d3934;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 16px 32px;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
h1 { font-size: 24px; }
h2 { margin-top: 0; font-size: 18px; }
h3 { font-size: 15px; margin: 12px 0 6px; }
.screen { max-width: 760px; margin: 0 auto; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
label { display: block; margin: 8px 0; }
input, select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
button {
  font: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.big { font-size: 18px; padding: 10px 22px; }
/* 冒险模式的方向按钮：十字排开，按住走；手机上长按不能弹出选字菜单 */
.dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 44px); gap: 4px; }
.dpad[hidden] { display: none; }
.dpad button { font-size: 18px; padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.dpad button.on { filter: brightness(0.85); transform: translateY(1px); }
.dpad [data-dir=up] { grid-column: 2; grid-row: 1; }
.dpad [data-dir=left] { grid-column: 1; grid-row: 2; }
.dpad [data-dir=down] { grid-column: 2; grid-row: 2; }
.dpad [data-dir=right] { grid-column: 3; grid-row: 2; }
button.link { border: none; background: none; color: var(--muted); text-decoration: underline; }
.msg { color: var(--bad); min-height: 1.2em; }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.map {
  text-align: left;
  padding: 12px;
  border-radius: 10px;
}
.map b { display: block; font-size: 16px; margin-bottom: 4px; }
.map small { color: var(--muted); }
canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #9fd28a;
}
.hud .energy { display: flex; align-items: center; gap: 8px; }
.bar { flex: 1; height: 16px; background: var(--border); border-radius: 8px; overflow: hidden; }
#energy-fill { height: 100%; width: 100%; background: var(--good); transition: width 0.3s; }
.target { margin-top: 8px; color: var(--muted); min-height: 1.2em; }
.log {
  max-height: 220px;
  overflow-y: auto;
  padding-left: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.log li { padding: 2px 0; white-space: pre-wrap; }
.log li:first-child { color: var(--text); }
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.overlay .card { max-width: 480px; width: 100%; }
.overlay pre { white-space: pre-wrap; font-family: inherit; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs button { padding: 6px 10px; }
.tabs button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.toast {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: pre-wrap;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tile b { font-size: 15px; }
.tile small { color: var(--muted); }
.tile.on { border-color: var(--good); }
.tile.dim { opacity: 0.55; }
.tile button { align-self: flex-start; padding: 4px 10px; }
.stats { color: var(--muted); }
.hunger { height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; margin: 6px 0 12px; }
.hunger div { height: 100%; background: var(--accent); }
.mastery { margin: 4px 0; }
.mastery .bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 3px 0; }
.mastery .bar i { display: block; height: 100%; background: var(--accent); }
.mastery .next { opacity: 0.7; }
[hidden] { display: none !important; }
.tile.deco { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 格子太窄（字大、缩放大）时文字和按钮换到预览下面，不会挤出格子 */
.tile.deco > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 110px; min-width: 0; }
.cat-preview { flex: none; cursor: pointer; border-radius: 8px; background: linear-gradient(#f6efe4, #e8dcc8); }
.deco-room { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.deco-room > div { flex: 1; min-width: 220px; }
.tile.deco button { white-space: nowrap; }
.deco-stage { flex: none !important; min-width: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.deco-stage > div { display: flex; gap: 8px; }
.tile.deco.action { flex-direction: column; align-items: flex-start; }
.card h3 { margin: 14px 0 6px; font-size: 15px; }
.fx-row { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-row .fx-pick { padding: 3px 8px; font-size: 12px; }
.fx-row .fx-pick.on { background: #f4a95c; color: #fff; border-color: #e08a3a; }
.look-editor { display: flex; flex-direction: column; gap: 8px; }
.look-row { display: flex; flex-direction: column; gap: 4px; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(61,42,31,0.35); }
.swatch.on { border: 3px solid #3d2a1f; box-shadow: 0 0 0 2px #fff inset; }
.look-editor input[type=color] { width: 30px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.line-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.line-row input { min-width: 0; }
/* 成长之路 */
.growth-tag { font-size: 13px; color: var(--accent); font-weight: bold; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #e2453c; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.mastery .bar.big { height: 12px; border-radius: 6px; }
.road { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px dashed var(--border); }
.road-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 0 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.road-step::before { content: ""; position: absolute; left: -31px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--border); border: 3px solid var(--card); }
.road-step.done::before { background: var(--good); }
.road-step.ready::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(217,130,43,0.25); }
.road-step.ready { border-color: var(--accent); }
.road-step.locked { opacity: 0.6; }
.road-step.big { border-width: 2px; }
.road-step.big .road-lv { background: linear-gradient(135deg, #ffd34d, #ff9a3c); color: #5a3200; }
.road-lv { flex: 0 0 auto; min-width: 46px; text-align: center; font-weight: bold; padding: 4px 6px; border-radius: 8px; background: var(--border); }
.road-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.road-body small { color: var(--muted); }
.road-done { color: var(--good); white-space: nowrap; }
.road-step button { white-space: nowrap; }
.road-deco canvas { display: block; width: auto; margin: 0; border-radius: 8px; }
.exclusive-tag { color: #b8860b !important; font-weight: bold; }
/* 装饰品质：高级 蓝、稀有 紫、典藏 金、至臻 红到金的流光 */
.quality { display: inline-block; padding: 0 6px; margin-left: 2px; border-radius: 6px; font-size: 12px; line-height: 18px; color: #fff; vertical-align: 1px; }
.quality.q0 { background: #4a8fe0; }
.quality.q1 { background: #9a5ad8; }
.quality.q2 { background: linear-gradient(135deg, #f0b429, #d98a12); }
.quality.q3 { background: linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d); background-size: 300% 100%; animation: q-badge 3s linear infinite; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.tile.qt0 { border-color: rgba(74,143,224,0.55); }
.tile.qt1 { border-color: rgba(154,90,216,0.6); background: linear-gradient(160deg, rgba(154,90,216,0.08), transparent 55%); }
.tile.qt2 { border-color: #e2a72e; background: linear-gradient(160deg, rgba(240,180,41,0.14), transparent 60%); }
.tile.qt3 { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d) border-box; background-size: 100% 100%, 300% 100%; animation: q-shine 3s linear infinite; box-shadow: 0 0 12px rgba(255,120,80,0.25); }
@keyframes q-shine { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } }
@keyframes q-badge { from { background-position: 0% 0; } to { background-position: 300% 0; } }

/* ---------------- 抽奖 ---------------- */
.lot-bars { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.lot-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; }
.lot-row .chance { opacity: 0.7; min-width: 78px; text-align: right; }
.lot-bar { height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.lot-bar i { display: block; height: 100%; border-radius: 5px; transition: width 0.4s; }
.lot-bar.q0 i { background: #4a8fe0; }
.lot-bar.q1 i { background: #9a5ad8; }
.lot-bar.q2 i { background: linear-gradient(90deg, #f0b429, #d98a12); }
.lot-bar.q3 i { background: linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d); background-size: 300% 100%; animation: q-badge 3s linear infinite; }
.lot-pity { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: -4px 0 12px; font-size: 14px; }
.lot-bar.pity i { background: linear-gradient(90deg, #f0b429, #ff7a3c); }
.lot-prize.qt0 { border-color: #4a8fe0; width: 88px; } .lot-prize.qt1 { border-color: #9a5ad8; width: 88px; }
.lot-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lot-buttons button { font-size: 16px; padding: 8px 18px; }
.lot-group { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.lot-group > .quality { flex: none; margin-top: 4px; }
.lot-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.lot-chip { border: 1px solid var(--border); border-radius: 14px; padding: 2px 10px; font-size: 13px; background: var(--card); }
.lot-chip.qt0 { border-color: #4a8fe0; } .lot-chip.qt1 { border-color: #9a5ad8; }
.lot-prize { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; width: 104px; text-align: center; }
.lot-prize.qt2 { border-color: #e0a82e; }
.lot-prize.qt3 { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d) border-box; background-size: 100% 100%, 300% 100%; animation: q-shine 3s linear infinite; }
.lot-prize .owned { color: var(--good); }
.prize-icon { display: flex; align-items: center; justify-content: center; font-size: 54px; border-radius: 8px; background: linear-gradient(#f6efe4, #e8dcc8); }

@keyframes rays-spin { to { transform: rotate(360deg); } }

/* 染色 */
.dye-studio { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.dye-studio .deco-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dye-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dye-swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; font-size: 13px; min-width: 60px; }
.dye-swatch small { font-size: 11px; opacity: 0.75; }
.dye-swatch.sel { outline: 2px solid var(--accent, #e07b24); background: rgba(224, 123, 36, 0.12); }
.dye-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3d2a1f; vertical-align: middle; }
.dye-dot.orig { background: conic-gradient(#d8323c 0 25%, #ffcc2e 0 50%, #4f8fd8 0 75%, #f7f6f1 0); }
.dye-item .dye-dot { width: 12px; height: 12px; margin-left: 4px; border-width: 1.5px; }
.dye-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dye-item { font-size: 13px; padding: 4px 10px; border-radius: 14px; }
.dye-item.qt2 { border-color: #e0a82e; } .dye-item.qt3 { border-color: #ff7a3c; } .dye-item.qt1 { border-color: #9a5ad8; }
.dye-item.sel { background: rgba(224, 123, 36, 0.18); font-weight: bold; }
@media (max-width: 640px) { .dye-studio { grid-template-columns: 1fr; } }

/* 每日 */
.checkin-row { display: grid; grid-template-columns: repeat(6, 1fr) 1.6fr; gap: 8px; margin: 10px 0 14px; }
.checkin-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); text-align: center; min-height: 112px; }
.checkin-day .day-icon { font-size: 28px; }
.checkin-day small { font-size: 12px; }
.checkin-day.done { opacity: 0.55; }
.checkin-day .tick { position: absolute; top: 4px; right: 6px; color: var(--good, #3a9a4a); font-style: normal; font-weight: bold; font-size: 18px; }
.checkin-day.today { border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(217,130,43,0.25), 0 0 16px rgba(255,190,90,0.6); animation: day-pulse 1.6s ease-in-out infinite; }
.checkin-day.big { border-color: #e0a82e; background: linear-gradient(160deg, rgba(255,205,100,0.22), var(--card)); }
@keyframes day-pulse { 50% { transform: translateY(-3px); } }
.big-btn { font-size: 17px; padding: 10px 26px; }
.tasks { display: flex; flex-direction: column; gap: 10px; }
.task { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.task > div { display: flex; flex-direction: column; gap: 3px; }
.task .bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.task .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0b429, #ff7a3c); border-radius: 4px; transition: width 0.4s; }
.task.ready { border-color: var(--accent); box-shadow: 0 0 10px rgba(255,170,60,0.45); }
.task.claimed { opacity: 0.6; }
.task.chest { background: linear-gradient(160deg, rgba(255,205,100,0.22), var(--card)); }
@media (max-width: 640px) { .checkin-row { grid-template-columns: repeat(4, 1fr); } .checkin-day.big { grid-column: span 4; } }

/* 图鉴收集奖励 */
.dex-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.dex-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.dex-reward .bar { width: 100%; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.dex-reward .bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fb3ff, #7ad79a); border-radius: 4px; }
.dex-reward.ready { border-color: var(--accent); box-shadow: 0 0 12px rgba(255,170,60,0.5); }
.dex-reward.claimed { opacity: 0.6; }
.dex-reward.all { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d) border-box; }

.sound-btn { background: none; border: none; font-size: 18px; padding: 2px 4px; cursor: pointer; }
.sound-btn.off { opacity: 0.5; }

/* 限时活动（万圣南瓜夜） */
.tabs button.event-tab { background: linear-gradient(135deg, #c8301f, #f07a22 60%, #f5b72a); color: #fff; border-color: transparent; }
.tabs button.event-tab.active { box-shadow: 0 0 0 2px #ffcf6a inset; }
.event-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; color: #fff;
  background: radial-gradient(circle at 90% 20%, rgba(255,196,106,0.55), transparent 40%), linear-gradient(120deg, #2a1640, #5a2466 60%, #c4572a);
  box-shadow: 0 4px 16px rgba(90,36,102,0.35); }
.event-banner div { display: flex; flex-direction: column; gap: 2px; }
.event-banner small { opacity: 0.9; }
.event-card { border: 2px solid rgba(255,138,31,0.7); background-image: linear-gradient(135deg, rgba(255,138,31,0.10), rgba(138,77,255,0.10)); }
.event-hero { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.event-hero p { margin: 4px 0; }
.event-time { font-weight: bold; color: #e8761a; }
.event-candy { display: flex; flex-direction: column; align-items: center; padding: 8px 18px; border-radius: 14px; background: rgba(255,138,31,0.18); }
.event-candy b { font-size: 26px; }
.event-squirrels { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.event-strip { margin: 4px 0 8px; padding: 6px 10px; border-radius: 10px; font-weight: bold; color: #fff; background: linear-gradient(90deg, #5a2466, #c4572a); }
.exclusive-tag.event-tag { color: #e0661a !important; }
.countdown { font-variant-numeric: tabular-nums; }

/* 隐藏品质：黑底上流动的炫彩（紫、青、粉、金） */
.quality.q4 { background: linear-gradient(90deg, #6a3cff, #20d0ff, #ff5ad8, #ffe066, #6a3cff); background-size: 300% 100%; animation: q-badge 2s linear infinite; color: #fff; font-weight: bold; text-shadow: 0 0 4px rgba(0,0,0,0.6); box-shadow: 0 0 8px rgba(160,100,255,0.7); }
.tile.qt4 { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #6a3cff, #20d0ff, #ff5ad8, #ffe066, #6a3cff) border-box; background-size: 100% 100%, 300% 100%; animation: q-shine 2s linear infinite; box-shadow: 0 0 16px rgba(140,90,255,0.45); }
.lot-bar.q4 i { background: linear-gradient(90deg, #6a3cff, #20d0ff, #ff5ad8, #ffe066, #6a3cff); background-size: 300% 100%; animation: q-badge 2s linear infinite; }
.lot-chip.qt4 { border-color: #8a5cff; }
.lot-prize.qt4 { border: 2px solid transparent; background: linear-gradient(#1c1530, #2a1f48) padding-box, linear-gradient(90deg, #6a3cff, #20d0ff, #ff5ad8, #ffe066, #6a3cff) border-box; background-size: 100% 100%, 300% 100%; animation: q-shine 2s linear infinite; box-shadow: 0 0 16px rgba(140,90,255,0.5); color: #f3ecff; }
.lot-prize.qt4 small { color: #f3ecff; }
@keyframes stars-twinkle { to { opacity: 0.3; } }

/* 皮肤专属技能特效的提示 */
.skin-fx { display: block; color: #9a5cff !important; font-weight: bold; }

/* 好友聊天 */
.friend-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.friend.on { background: #ffe9b8; border-color: #d99a2b; }
.chat-box { height: 300px; overflow-y: auto; padding: 10px; border-radius: 12px; background: #fbf6ec; border: 1px solid #ead9bd; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { margin: auto; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 7px 12px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid #ead9bd; color: #3a2a1c; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.chat-msg.mine .chat-bubble { border-radius: 14px 14px 4px 14px; background: #ffd27a; border-color: #e7b04a; }
.chat-msg small { font-size: 11px; color: #9a8670; margin: 2px 4px 0; }
.chat-send .chat-input { flex: 1; min-width: 140px; }

/* 每日任务的宝箱进度条：做完 3 个、5 个各一个宝箱 */
.chest-track { position: relative; margin: 14px 46px 64px 6px; }
.chest-track > .bar { height: 10px; }
.chest-stop { position: absolute; top: -14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 90px; }
.chest-stop button { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
.chest-stop b { font-size: 12px; margin-top: 2px; }
.chest-stop small { font-size: 11px; color: var(--muted, #8a7660); }
.chest-stop.ready button { animation: chest-bounce 0.9s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(255,190,60,0.35); }
.chest-stop.opened button { opacity: 0.6; }
@keyframes chest-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }
.chest-track .bar { overflow: visible; }
.chest-track .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0b429, #ff7a3c); border-radius: 5px; transition: width 0.4s; }

/* 家园 */
.home-room { width: 100%; aspect-ratio: 720 / 400; border-radius: 12px; display: block; touch-action: none; cursor: grab; }
.home-tools { min-height: 36px; display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.home-tools button { margin-left: 6px; }
.home-bag { display: flex; flex-wrap: wrap; gap: 8px; }
.home-bag-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; }
.home-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.home-tile { align-items: center; text-align: center; }

/* 快捷键 */
#screen-hunt button[data-key], #result button[data-key] { position: relative; }
#screen-hunt button[data-key]::after, #result button[data-key]::after {
  content: attr(data-key); position: absolute; top: -7px; right: -5px; font-size: 10px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; background: #3b2a1a; color: #fff6e0; opacity: 0.85; pointer-events: none;
}
@media (hover: none) { #screen-hunt button[data-key]::after, #result button[data-key]::after { display: none; } }
.keys-list { display: grid; gap: 6px; margin: 10px 0; max-height: 60vh; overflow: auto; }
.keys-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.key-cap { min-width: 84px; font-family: monospace; font-weight: bold; }
.key-cap.waiting { background: #ffe08a; }
.keys-card { max-width: 460px; }
.prize-icon.mystery { display:flex; align-items:center; justify-content:center; font-size:48px; border-radius:12px;
  background:radial-gradient(circle, rgba(255,215,120,.35), rgba(120,60,200,.25) 60%, transparent 75%); animation: mysteryPulse 2s ease-in-out infinite; }
@keyframes mysteryPulse { 50% { filter: drop-shadow(0 0 10px #ffd36a); transform: scale(1.05); } }
.emoji-btn { font-size: 20px; padding: 4px 10px; }
.emoji-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; padding: 8px; margin: 6px 0;
  background: rgba(255,255,255,.7); border-radius: 12px; max-height: 180px; overflow-y: auto; }
.emoji-panel[hidden] { display: none; }
.emoji-panel button { font-size: 22px; padding: 4px; background: transparent; border: none; box-shadow: none; cursor: pointer; border-radius: 8px; }
.emoji-panel button:hover { background: rgba(0,0,0,.08); transform: scale(1.15); }
.chat-bubble.big-emoji { font-size: 34px; background: transparent !important; border: none !important; box-shadow: none; padding: 2px 4px; }

/* ============================================================
   抽奖开奖（lottery.js）：全屏画布画宝箱、光、粒子，卡牌是 DOM 盖在上面
   ============================================================ */
.lot-fx { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px;
  background: radial-gradient(circle at 50% 55%, rgba(60,45,90,0.97), rgba(10,6,18,0.99)); backdrop-filter: blur(6px); animation: lf-in 0.25s ease-out; overflow: hidden; transition: background 0.6s; }
.lot-canvas, .lot-cards { transform: translate(var(--sx, 0), var(--sy, 0)); }
.lot-fx.best2 { background: radial-gradient(circle at 50% 55%, rgba(120,82,18,0.97), rgba(18,10,4,0.99)); }
.lot-fx.best3 { background: radial-gradient(circle at 50% 55%, rgba(150,40,70,0.97), rgba(22,6,14,0.99)); }
.lot-fx.best4, .lot-fx.galaxy { background: radial-gradient(circle at 50% 50%, rgba(50,22,110,0.95), rgba(4,2,14,0.99)); }
@keyframes lf-in { from { opacity: 0; } }
.lot-canvas { position: absolute; left: 0; top: 0; pointer-events: none; background: none; border-radius: 0; margin: 0; }
.lot-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.lot-title { position: absolute; top: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: 20px; font-weight: bold; text-shadow: 0 2px 6px rgba(0,0,0,0.6); pointer-events: none; }
.lot-skip { position: absolute; top: 12px; right: 14px; z-index: 3; background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 16px; padding: 4px 14px; backdrop-filter: blur(4px); }
.lot-close { position: relative; z-index: 2; font-size: 17px; padding: 8px 34px; animation: hb-pop 0.4s cubic-bezier(.2,1.6,.4,1); }
.lot-banner { position: absolute; top: 48px; left: 0; right: 0; text-align: center; font-size: 34px; font-weight: 900; letter-spacing: 8px; opacity: 0; pointer-events: none; z-index: 2; }
.lot-banner.on { opacity: 1; -webkit-text-stroke: 1px rgba(255,255,255,0.75); animation: hb-pop 0.7s cubic-bezier(.2,1.6,.4,1), q-badge 1.4s linear infinite; background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lot-banner.q3 { background-image: linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #5ef08a, #3ad8ff, #ff4d6d); filter: drop-shadow(0 0 10px rgba(255,140,90,0.9)); }
.lot-banner.q4 { background-image: linear-gradient(90deg, #8a5cff, #20d0ff, #ff5ad8, #ffe066, #8a5cff); filter: drop-shadow(0 0 12px rgba(180,130,255,0.95)); }
@keyframes hb-pop { from { transform: scale(0.2); opacity: 0; } }

.lot-cards { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; visibility: hidden; }
.lot-cards.show { visibility: visible; }
.lc { position: relative; perspective: 800px; opacity: 0; transition: filter 0.3s; }
.lc-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.lc-back, .lc-front { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
/* 卡背：奖池颜色的漆面，金边、菱格暗纹，正中一颗橡果 */
.lc-back { background: radial-gradient(circle at 50% 42%, var(--b1), var(--b2) 75%); border: 3px solid var(--t1);
  box-shadow: inset 0 0 0 3px var(--b2), inset 0 0 0 4.5px var(--t1), 0 6px 14px rgba(0,0,0,0.45); }
.lc-back::before { content: ""; position: absolute; inset: 9px; border-radius: 6px; opacity: 0.35;
  background: repeating-linear-gradient(45deg, var(--t0) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, var(--t0) 0 1px, transparent 1px 11px); }
.lc-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%); background-size: 250% 100%; animation: lc-sheen 2.6s linear infinite; }
.lc-emblem { position: absolute; left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%); color: var(--t1); filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)) drop-shadow(0 0 3px var(--t0)); }
.lc-emblem svg { display: block; width: 100%; }
@keyframes lc-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
/* 蓄力：卡背四周发出品质色的光，卡在抖 */
.lc.charging { animation: lc-jitter 0.07s linear infinite alternate; }
.lc.q2.charging .lc-back { box-shadow: inset 0 0 0 3px var(--b2), inset 0 0 0 4.5px var(--t1), 0 0 26px 8px rgba(255,200,60,0.95); border-color: #ffd23f; }
.lc.q3.charging .lc-back { animation: lc-rainbow 0.5s linear infinite; border-color: #fff; }
.lc.q4.charging .lc-back { animation: lc-holo 0.4s linear infinite; border-color: #fff; }
@keyframes lc-jitter { from { transform: translate(-1.5px, 1px) rotate(-1deg) scale(1.04); } to { transform: translate(1.5px, -1px) rotate(1deg) scale(1.06); } }
@keyframes lc-rainbow { 0% { box-shadow: 0 0 30px 10px #ff4d6d; } 33% { box-shadow: 0 0 30px 10px #ffd23f; } 66% { box-shadow: 0 0 30px 10px #3ad8ff; } 100% { box-shadow: 0 0 30px 10px #ff4d6d; } }
@keyframes lc-holo { 0% { box-shadow: 0 0 34px 12px #8a5cff; } 33% { box-shadow: 0 0 34px 12px #20d0ff; } 66% { box-shadow: 0 0 34px 12px #ff5ad8; } 100% { box-shadow: 0 0 34px 12px #8a5cff; } }
.lot-fx.focus .lc:not(.focus-me) { filter: brightness(0.35) saturate(0.6); }
.lc.focus-me { z-index: 2; }

/* 正面 */
.lc-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px;
  background: linear-gradient(170deg, #fffdf8, #f4ead8); border: 3px solid #4a8fe0; text-align: center; font-size: var(--fs); box-shadow: 0 6px 16px rgba(0,0,0,0.45); }
.lc-front > * { position: relative; }
.lc-front b { font-size: var(--fs); color: #3a2a1c; line-height: 1.2; }
.lc-front small { font-size: calc(var(--fs) - 2px); color: var(--muted); }
.lc-front .new { color: #e2453c; font-weight: bold; }
.lc-front .quality { font-size: calc(var(--fs) - 2px); }
.lc-front .pity-tag { font-style: normal; font-size: 11px; font-weight: bold; color: #fff; background: linear-gradient(90deg, #ff7a3c, #f0b429); border-radius: 8px; padding: 0 8px; }
.lc-front canvas, .lc-front .prize-icon { border-radius: 8px; background: radial-gradient(circle at 50% 60%, #fff, rgba(255,255,255,0) 70%); }
/* 翻开那一下扫过一道白光 */
.lc-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.85) 48%, transparent 66%); background-size: 260% 100%; background-position: 150% 0; }
.lc.shown .lc-front::after { animation: lc-sheen 0.8s 0.1s ease-out 1 both; }
.lc.shown.q2 .lc-front::after, .lc.shown.q3 .lc-front::after, .lc.shown.q4 .lc-front::after { animation: lc-sheen 0.8s 0.1s ease-out 1 both, lc-sheen 2.4s 1.5s linear infinite; }
.lc-front.q1 { border-color: #9a5ad8; background: linear-gradient(170deg, #fdf9ff, #ece0fa); box-shadow: 0 0 16px rgba(170,110,240,0.7); }
.lc-front.q2 { border-color: #f0b429; background: linear-gradient(170deg, #fffbea, #f9e7b4); box-shadow: 0 0 24px rgba(255,200,60,0.85); }
.lc-front.q3 { border: 3px solid transparent; background: linear-gradient(170deg, #fffaf4, #ffe3d8) padding-box, linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #5ef08a, #3ad8ff, #ff4d6d) border-box;
  background-size: 100% 100%, 300% 100%; animation: q-shine 2s linear infinite; box-shadow: 0 0 32px 6px rgba(255,120,90,0.9); }
.lc-front.q4 { border: 3px solid transparent; background: linear-gradient(160deg, #241a40, #3a2a66) padding-box, linear-gradient(90deg, #8a5cff, #20d0ff, #ff5ad8, #ffe066, #8a5cff) border-box;
  background-size: 100% 100%, 300% 100%; animation: q-shine 1.4s linear infinite; box-shadow: 0 0 38px 10px rgba(160,110,255,0.95); }
.lc-front.q4 b { color: #fff; text-shadow: 0 0 6px rgba(180,130,255,0.9); }
.lc-front.q4 small { color: #d9ccff; }
.lc-front.q4 canvas, .lc-front.q4 .prize-icon { background: radial-gradient(circle at 50% 60%, rgba(180,150,255,0.5), rgba(255,255,255,0) 70%); }
/* 金箔：典藏以上的卡面上一层斜着的细闪纹 */
.lc-foil { position: absolute !important; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(60deg, rgba(255,255,255,0.9) 0 2px, transparent 2px 9px); }

/* ============================================================
   活动中心（🎉 活动页）
   ============================================================ */
.theme-harvest { --th-a: #4a1608; --th-b: #a8351a; --th-c: #f0962a; --th-glow: #ffcf5a; }
.theme-halloween { --th-a: #1e0f33; --th-b: #5d3486; --th-c: #ff8a1e; --th-glow: #a6ff6a; }
.tabs button.event-tab { position: relative; }

/* 主页横幅：金秋配色 */
.event-banner.act-banner { background: radial-gradient(circle at 88% 15%, rgba(255,214,120,0.6), transparent 42%), linear-gradient(115deg, var(--th-a), var(--th-b) 58%, var(--th-c)); box-shadow: 0 4px 18px rgba(168,53,26,0.35); }

/* 活动卡片选择条 */
.act-picker { display: flex; gap: 10px; overflow-x: auto; padding: 8px 8px 12px; margin: -6px -8px 0; scrollbar-width: none; }
.act-picker::-webkit-scrollbar { display: none; }
.act-pick { position: relative; flex: 0 0 auto; min-width: 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px; border: 0; border-radius: 14px; color: #fff; text-align: left; cursor: pointer;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.28), transparent 45%), linear-gradient(120deg, var(--th-a, #5a3a20), var(--th-b, #a2622c) 60%, var(--th-c, #e0a050));
  opacity: 0.72; transform: scale(0.97); transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; }
.act-pick b { font-size: 15px; }
.act-pick small, .act-pick .countdown { font-size: 12px; opacity: 0.92; }
.act-pick.sel { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--th-glow, #ffcf5a), 0 6px 18px rgba(0,0,0,0.25); }
.act-pick .badge { position: absolute; top: -6px; right: -6px; margin: 0; box-shadow: 0 0 0 2px var(--card); }

/* 大横幅 */
.act-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: center; min-height: 330px; padding: 22px; border: 0; color: #fff;
  background: radial-gradient(ellipse at 78% 55%, rgba(255,214,120,0.55), transparent 48%), radial-gradient(circle at 8% 0%, rgba(255,255,255,0.18), transparent 35%), linear-gradient(135deg, var(--th-a), var(--th-b) 55%, var(--th-c));
  box-shadow: 0 10px 30px rgba(120,40,10,0.35), inset 0 0 0 1px rgba(255,220,160,0.25); }
.act-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none;
  background: radial-gradient(ellipse at 30% 120%, rgba(90,30,8,0.55), transparent 60%), radial-gradient(ellipse at 85% 130%, rgba(90,30,8,0.6), transparent 55%); }
canvas.act-leaves { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background: none; pointer-events: none; }
.act-hero-text, .act-skin { position: relative; z-index: 1; }
.act-hero-text h2 { font-size: 30px; margin: 6px 0 8px; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(90,25,5,0.6), 0 0 18px rgba(255,190,90,0.55); }
.act-hero-text p { margin: 6px 0; line-height: 1.55; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.act-kicker { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: bold; letter-spacing: 2px; color: #5a2008; background: linear-gradient(90deg, #ffe08a, #ffb03b); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.act-time { font-weight: bold; color: #ffe2a8; }
.act-wallet { display: inline-flex; flex-direction: column; margin-top: 10px; padding: 10px 18px; border-radius: 16px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,230,180,0.35); backdrop-filter: blur(4px); }
.act-wallet b { font-size: 30px; line-height: 1.1; text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.act-wallet small { opacity: 0.9; }
.act-skin { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.act-stage { position: relative; width: 300px; height: 250px; }
.act-stage::before { content: ""; position: absolute; left: 50%; bottom: 26px; width: 210px; height: 40px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,226,140,0.85), rgba(255,170,60,0.35) 45%, transparent 70%); }
.act-ray { position: absolute; left: 50%; top: 46%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none; opacity: 0.5;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,170,0.55) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: act-spin 24s linear infinite; }
@keyframes act-spin { to { transform: rotate(360deg); } }
.act-stage canvas.cat-preview { position: relative; background: none; margin: 0; border-radius: 0;
  -webkit-mask: radial-gradient(farthest-side, #000 78%, transparent); mask: radial-gradient(farthest-side, #000 78%, transparent); }
.act-skin-name { display: flex; flex-direction: column; align-items: center; }
.act-skin-name small { font-size: 12px; letter-spacing: 3px; color: #ffe08a; }
.act-skin-name b { font-size: 20px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.act-skin-desc { max-width: 290px; opacity: 0.92; line-height: 1.45; }
.act-skin .skin-fx { color: #ffe2a8 !important; }
.act-skin button { margin-top: 6px; min-width: 200px; padding: 9px 18px; border-radius: 999px; font-weight: bold; }
.act-skin button:disabled { background: rgba(0,0,0,0.28); color: #ffe8c8; border-color: rgba(255,230,180,0.35); opacity: 1; }
.act-skin-btn { color: #5a2008 !important; border: 0 !important; background: linear-gradient(90deg, #ffe08a, #ffb03b, #ffe08a) !important; background-size: 200% 100% !important; animation: act-pulse 1.4s ease-in-out infinite, q-shine 2.4s linear infinite; }
.act-claimed { background: rgba(255,255,255,0.18) !important; color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }
@keyframes act-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,100,0.75); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(255,210,100,0); transform: scale(1.04); } }

/* 积分进度奖励 */
.act-card { border-color: rgba(232,101,42,0.45); background-image: linear-gradient(160deg, rgba(240,150,42,0.09), transparent 45%); }
.act-track { overflow-x: auto; overflow-y: hidden; padding: 12px 0 6px; margin: 0 -6px; }
.act-rail { position: relative; min-width: 600px; height: 186px; margin: 0 66px 0 46px; }
.act-bar { position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-radius: 6px; background: var(--border); box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); }
.act-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f5b72a, #f07a22, #e8452c); box-shadow: 0 0 10px rgba(240,122,34,0.6); transition: width 0.5s; }
.act-stop { position: absolute; top: 4px; width: 104px; margin-left: -52px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.act-stop > b { font-size: 13px; margin-top: 2px; }
.act-stop > small { font-size: 11px; color: var(--muted); line-height: 1.3; min-height: 28px; }
.act-stop button { padding: 3px 14px; font-size: 13px; border-radius: 999px; }
.act-node { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 16px; background: var(--card); border: 2px solid var(--border); box-shadow: 0 3px 10px rgba(0,0,0,0.12); overflow: hidden; }
.act-node canvas, .act-node .prize-icon { margin: 0; background: none; border-radius: 0; }
.act-node .prize-icon { display: grid; place-items: center; }
.act-stop.qt1 .act-node { border-color: #9a5ad8; }
.act-stop.qt3 .act-node { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #ff4d6d, #ff9a3c, #ffd23f, #ff4d6d) border-box; background-size: 100% 100%, 300% 100%; animation: q-shine 3s linear infinite; }
.act-stop.big { top: -6px; width: 120px; margin-left: -60px; }
.act-stop.big .act-node { width: 96px; height: 92px; border-radius: 20px; box-shadow: 0 0 18px rgba(255,140,60,0.45); }
.act-stop.ready .act-node { animation: chest-bounce 0.9s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(255,190,60,0.45), 0 0 18px rgba(255,170,60,0.6); }
.act-stop.claimed .act-node { opacity: 0.55; filter: saturate(0.6); }
.act-tick { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 34px; font-weight: 900; color: #3a9a4b; background: rgba(255,255,255,0.35); text-shadow: 0 0 4px #fff; }

/* 活动任务 */
.act-task-head { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.act-task-head p { margin: 0; flex: 1; min-width: 220px; }
.task.act-task { grid-template-columns: auto 1fr auto; }
.act-pts { width: 54px; height: 54px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #e6a35c, #a8622a 65%, #7a4218); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 2px 6px rgba(120,60,20,0.35); }
.act-pts b { font-size: 16px; line-height: 1; }
.act-pts small { font-size: 9px; opacity: 0.9; }
.act-task.claimed .act-pts { filter: grayscale(0.7); }

@media (max-width: 640px) {
  .act-hero { grid-template-columns: 1fr; padding: 18px 14px; }
  .act-hero-text h2 { font-size: 24px; }
}

/* ---------------- 个人主页 ---------------- */
.hp-card { padding: 0; overflow: hidden; }
.hp-banner { position: relative; overflow: hidden; }
.hp-banner canvas { margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; display: block; }
.hp-banner .hp-bg { position: absolute; left: 0; top: 0; }
.hp-banner .hp-cat { position: absolute; cursor: pointer; }
.hp-bgname { position: absolute; right: 10px; top: 10px; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(20,16,30,0.42); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.35); }
.hp-bgname.qt3, .hp-bgname.qt4 { border-color: #ffd23f; box-shadow: 0 0 10px rgba(255,200,80,0.45); }
.hp-actions { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.hp-actions button { font-size: 12px; padding: 3px 10px; background: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.9); color: #3a2a1a; backdrop-filter: blur(4px); }
.hp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px 16px 6px;
  background: linear-gradient(180deg, rgba(217,130,43,0.10), transparent); border-top: 1px solid var(--border); }
.hp-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-name { font-size: 22px; font-weight: bold; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hp-sub { font-size: 13px; color: var(--muted); }
.hp-sign { font-size: 14px; font-style: italic; color: var(--text); padding: 4px 0; }
.hp-sign.empty { color: var(--muted); }
.hp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding: 8px 16px 16px; }
.hp-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.hp-stat b { font-size: 18px; color: var(--accent); }
.hp-stat small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.hp-chip.qt0 { border-color: rgba(74,143,224,0.6); } .hp-chip.qt1 { border-color: rgba(154,90,216,0.6); }
.hp-chip.qt2 { border-color: #e2a72e; } .hp-chip.qt3, .hp-chip.qt4 { border-color: #ff7a3c; }
.hp-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.hp-skin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid var(--border);
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.7), transparent 70%), var(--bg); }
.hp-skin.on { box-shadow: 0 0 0 2px var(--good) inset; }
.hp-skin.qt2 { border-color: #e2a72e; } .hp-skin.qt3, .hp-skin.qt4 { border-color: #ff7a3c; box-shadow: 0 0 10px rgba(255,120,80,0.25); }
.hp-skin canvas, .hp-bg-tile canvas { margin: 0; background: none; border: 0; }
.hp-skin b { font-size: 13px; }
.hp-bg-tile { gap: 6px; }
.hp-bg-tile .hp-thumb { border-radius: 8px; display: block; width: 100% !important; height: auto !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.hp-sign-input { flex: 1 1 220px; }
.hp-visit { margin-top: 4px; }
@media (prefers-color-scheme: dark) {
  .hp-skin { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.08), transparent 70%), var(--bg); }
}
@media (max-width: 480px) {
  .hp-stat b { font-size: 15px; }
  .hp-stat small { font-size: 11px; }
  .hp-name { font-size: 19px; }
}

/* 橙子派对的标签栏和游戏里的标签栏：一次只显示一个 */
.tabs[hidden] { display: none; }
.game-tabs { padding: 6px; border-radius: 12px; background: rgba(120, 180, 90, 0.12); }
.tabs button.back-tab { font-weight: bold; }
/* 游戏大厅的卡片 */
.game-card { display: flex; gap: 16px; align-items: center; }
.game-card .game-icon { font-size: 64px; line-height: 1; }
.game-card h2 { margin: 0 0 4px; }