: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; }
.lottery-card .pity-tag { font-style: normal; font-size: 12px; font-weight: bold; color: #fff; background: linear-gradient(90deg, #ff7a3c, #f0b429); border-radius: 8px; padding: 0 8px; }
.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); }

.lottery-reveal { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px;
  background: radial-gradient(circle at 50% 45%, rgba(80,60,120,0.85), rgba(15,10,25,0.94)); animation: lr-in 0.25s ease-out; overflow-y: auto; }
.lottery-reveal.best2 { background: radial-gradient(circle at 50% 45%, rgba(140,100,20,0.85), rgba(20,12,5,0.94)); }
.lottery-reveal.best3 { background: radial-gradient(circle at 50% 45%, rgba(170,50,70,0.88), rgba(25,8,15,0.95)); }
@keyframes lr-in { from { opacity: 0; } }
.lottery-title { color: #fff; font-size: 22px; font-weight: bold; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.lottery-orb { position: relative; width: 120px; height: 120px; animation: orb-shake 0.18s ease-in-out infinite alternate; }
.lottery-orb i, .lottery-orb b { position: absolute; inset: 0; border-radius: 50%; }
.lottery-orb i { background: radial-gradient(circle at 35% 30%, #fff, var(--oc) 45%, var(--od)); box-shadow: 0 0 40px 10px var(--oc); }
.lottery-orb b { inset: -30px; background: radial-gradient(circle, var(--oc), transparent 65%); opacity: 0.6; animation: orb-pulse 0.45s ease-in-out infinite alternate; }
.lottery-orb.q0 { --oc: #6aa8f0; --od: #2d5fa8; } .lottery-orb.q1 { --oc: #b07ae8; --od: #5f2e9e; }
.lottery-orb.q2 { --oc: #ffc94a; --od: #b5730f; } .lottery-orb.q3 { --oc: #ff7a6a; --od: #c4223b; }
.lottery-orb.q3 i { animation: orb-rainbow 0.6s linear infinite; }
.lottery-orb.burst { animation: orb-burst 0.35s ease-out forwards; }
@keyframes orb-shake { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.06); } }
@keyframes orb-pulse { to { transform: scale(1.25); opacity: 0.9; } }
@keyframes orb-rainbow { to { filter: hue-rotate(360deg); } }
@keyframes orb-burst { to { transform: scale(3); opacity: 0; height: 0; margin: -60px 0; } }
.lottery-cards { display: grid; grid-template-columns: repeat(5, 120px); gap: 12px; justify-content: center; perspective: 900px; }
.lottery-cards.n1 { grid-template-columns: 170px; }
@media (max-width: 680px) { .lottery-cards { grid-template-columns: repeat(2, 120px); } }
.lottery-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; background: #fffaf2; text-align: center;
  border: 3px solid #4a8fe0; opacity: 0; animation: card-flip 0.5s cubic-bezier(.2,1.4,.4,1) forwards; overflow: hidden; }
.lottery-card b { font-size: 14px; position: relative; color: #3a2a1c; } .lottery-card small { position: relative; color: var(--muted); }
.lottery-card .new { color: #e2453c; font-weight: bold; }
.lottery-card.q1 { border-color: #9a5ad8; box-shadow: 0 0 14px rgba(154,90,216,0.6); }
.lottery-card.q2 { border-color: #f0b429; box-shadow: 0 0 22px rgba(240,180,41,0.8); }
.lottery-card.q3 { border-color: #ff7a6a; box-shadow: 0 0 30px 4px rgba(255,120,90,0.9); animation: card-flip 0.5s cubic-bezier(.2,1.4,.4,1) forwards, card-glow 1.2s 0.5s ease-in-out infinite alternate; }
.lottery-card canvas, .lottery-card .prize-icon { position: relative; }
.lottery-card .rays { position: absolute; left: 50%; top: 40%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,215,90,0.55) 0 10deg, rgba(255,255,255,0) 10deg 30deg); animation: rays-spin 6s linear infinite; }
@keyframes card-flip { from { opacity: 0; transform: rotateY(90deg) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes card-glow { to { box-shadow: 0 0 44px 10px rgba(255,200,90,0.95); } }
@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, #ff8a1f, #8a4dff); 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; }
.lottery-reveal.best4 { background: radial-gradient(circle at 50% 45%, rgba(90,40,180,0.9), rgba(5,3,20,0.97)); }
.lottery-reveal.best4::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 65%, #fff, transparent), radial-gradient(2px 2px at 10% 70%, #fff, transparent); animation: stars-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes stars-twinkle { to { opacity: 0.3; } }
.lottery-orb.q4 { --oc: #b38cff; --od: #2a1070; }
.lottery-orb.q4 i { animation: orb-rainbow 0.35s linear infinite; }
.lottery-card.q4 { border-color: #b38cff; background: linear-gradient(160deg, #241a40, #3a2a66); color: #f3ecff; box-shadow: 0 0 36px 8px rgba(160,110,255,0.95);
  animation: card-flip 0.5s cubic-bezier(.2,1.4,.4,1) forwards, card-holo 1s 0.5s linear infinite; }
.lottery-card.q4 small { color: #d9ccff; }
.lottery-card.q4 b { color: #fff; text-shadow: 0 0 6px rgba(180,130,255,0.9); }
.lottery-card.q4 .rays { background: repeating-conic-gradient(rgba(180,140,255,0.6) 0 10deg, rgba(255,255,255,0) 10deg 20deg, rgba(90,220,255,0.5) 20deg 30deg, rgba(255,255,255,0) 30deg 40deg); animation-duration: 3s; }
.hidden-banner { color: #fff; font-size: 30px; font-weight: 900; letter-spacing: 6px; background: linear-gradient(90deg, #6a3cff, #20d0ff, #ff5ad8, #ffe066, #6a3cff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: q-badge 1.2s linear infinite, hb-pop 0.6s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 0 10px rgba(180,130,255,0.9)); }
@keyframes hb-pop { from { transform: scale(0.2); opacity: 0; } }
@keyframes card-holo { 0% { box-shadow: 0 0 36px 8px rgba(160,110,255,0.95); } 33% { box-shadow: 0 0 36px 8px rgba(80,220,255,0.95); } 66% { box-shadow: 0 0 36px 8px rgba(255,90,216,0.95); } 100% { box-shadow: 0 0 36px 8px rgba(160,110,255,0.95); } }

/* 皮肤专属技能特效的提示 */
.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; }