/* ═══════════════════════════════════════════════
   花间小筑 · 疗愈花园  —  设计分辨率 1536×864
   原画作为场景底图，活动 UI 像素级叠加
   ═══════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:#1a1421;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              "Source Han Sans SC","Noto Sans SC",sans-serif;
}

.hidden { display:none !important; }

#app { position:fixed; inset:0; }

/* ── 1536×864 固定舞台，等比缩放居中 ── */
#stage {
  position:absolute; left:50%; top:50%;
  width:1536px; height:864px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  overflow:hidden;
  border-radius:6px;
  box-shadow:0 0 80px rgba(0,0,0,.55);
}

.scene { position:absolute; inset:0; }

.scene-bg {
  position:absolute; inset:0;
  background-size:1536px 864px;
  background-repeat:no-repeat;
}
.bg-login  { background-image:url("../images/login.png"); }
.bg-garden { background-image:url("../images/garden.png"); }

/* ── 隐形热点（保留原画，叠加点击区） ── */
.hotspot {
  position:absolute;
  background:transparent;
  border:none; outline:none;
  cursor:pointer;
  border-radius:14px;
}
.hotspot:active { background:rgba(255,255,255,.07); }
.hotspot.scenic { border-radius:40%; }
.hotspot.scenic:active { background:radial-gradient(closest-side, rgba(255,255,255,.13), transparent); }

/* ── 原图贴片按钮：显示原画同一区域像素，按压时整体缩放 ── */
.img-btn {
  position:absolute;
  border:none; outline:none; cursor:pointer;
  background-repeat:no-repeat;
  background-size:1536px 864px;   /* JS 设定 background-position = -left -top */
  transition:transform .12s ease, filter .12s ease;
}
.img-btn.login-img  { background-image:url("../images/login.png"); }
.img-btn.garden-img { background-image:url("../images/garden.png"); }
.img-btn:active { transform:scale(.94); filter:brightness(1.12) saturate(1.06); }

/* 红点徽标 */
.badge {
  position:absolute; right:4px; top:2px;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a80, #e53935);
  border:2px solid #fff3;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  pointer-events:none;
  animation:badge-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ═══════════════ 登录场景 ═══════════════ */

#login-form { position:absolute; inset:0; }

.lg-field {
  position:absolute;
  display:flex; align-items:center;
  background:linear-gradient(180deg,#fdf3e4 0%, #fbeada 55%, #f8e3d2 100%);
  border-radius:24px;
  box-shadow:inset 0 2px 5px rgba(166,124,82,.22), inset 0 -1px 2px rgba(255,255,255,.8);
  padding:0 14px 0 12px;
}
.lg-field.shake { animation:shake .4s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

.lg-icon { width:26px; height:26px; flex:0 0 26px; margin-right:9px; }

.lg-field input {
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-size:21px; color:#7a5c40;
  font-family:inherit;
  letter-spacing:1px;
}
.lg-field input::placeholder { color:#c5a18a; letter-spacing:2px; }

#lg-eye {
  flex:0 0 34px; width:34px; height:34px;
  border:none; background:transparent; cursor:pointer; padding:4px;
}
#lg-eye svg { width:100%; height:100%; }
#lg-eye:active { transform:scale(.85); }

/* ═══════════════ 花园场景 · 货币活数字 ═══════════════ */

.cur-num {
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.cur-num span {
  display:inline-block;
  font-size:22px; font-weight:500;
  font-family:ui-rounded, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color:#f8eedf;
  text-shadow:0 1px 2px rgba(70,45,30,.4);
  white-space:nowrap;
  transform:scaleX(.95);
}
.cur-num.bump span { animation:num-bump .35s ease; }
@keyframes num-bump { 30%{transform:scaleX(.95) scale(1.22); color:#ffe98a} }

/* 灯笼点亮光晕 */
#lantern-glow {
  position:absolute; left:1005px; top:580px;
  width:150px; height:170px;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,200,90,.55), rgba(255,170,60,.18), transparent);
  animation:glow-flicker 2.4s ease-in-out infinite;
}
@keyframes glow-flicker { 0%,100%{opacity:.85} 50%{opacity:1} }

/* ═══════════════ 粒子层 ═══════════════ */

#fx-canvas {
  position:absolute; inset:0;
  width:1536px; height:864px;
  pointer-events:none;
  z-index:40;
}

/* ═══════════════ 面板层 ═══════════════ */

#panel-layer { position:absolute; inset:0; z-index:50; }

#panel-dim {
  position:absolute; inset:0;
  background:rgba(38,22,34,.45);
  backdrop-filter:blur(2px);
  animation:fade-in .2s ease;
}
@keyframes fade-in { from{opacity:0} }

#panel-box {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:760px; max-height:660px;
  background:
    linear-gradient(180deg, #fdf6e7 0%, #faeed9 60%, #f6e6cc 100%);
  border:6px solid #a9764f;
  border-radius:30px;
  box-shadow:
    0 14px 40px rgba(40,20,10,.5),
    inset 0 0 0 3px #e7c79a,
    inset 0 0 26px rgba(170,120,70,.18);
  padding:64px 30px 26px;
  animation:panel-pop .28s cubic-bezier(.34,1.45,.64,1);
}
@keyframes panel-pop { from{transform:translate(-50%,-46%) scale(.86); opacity:0} }

#panel-title-banner {
  position:absolute; left:50%; top:-26px;
  transform:translateX(-50%);
  min-width:240px; height:58px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#8fc98a, #67ab63 55%, #5b9e58);
  border:4px solid #4c7d46;
  border-radius:30px;
  box-shadow:0 4px 10px rgba(40,60,30,.4), inset 0 3px 6px rgba(255,255,255,.45);
  padding:0 34px;
}
#panel-title {
  font-size:27px; font-weight:800; color:#fff;
  text-shadow:0 2px 2px rgba(50,90,45,.6);
  letter-spacing:6px;
}

#panel-close {
  position:absolute; right:-16px; top:-16px;
  width:52px; height:52px; border-radius:50%;
  border:4px solid #8a5a36;
  background:radial-gradient(circle at 35% 30%, #f7b9a0, #e0795d);
  color:#fff; font-size:22px; font-weight:900;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(60,30,15,.4), inset 0 2px 4px rgba(255,255,255,.5);
  text-shadow:0 1px 2px rgba(120,40,20,.6);
}
#panel-close:active { transform:scale(.88); }

#panel-content {
  max-height:540px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4px 6px;
  color:#6e4f33;
  scrollbar-width:thin;
  scrollbar-color:#c79f74 transparent;
}
#panel-content::-webkit-scrollbar { width:8px; }
#panel-content::-webkit-scrollbar-thumb { background:#c79f74; border-radius:4px; }

/* ── 面板通用元素 ── */

.row-card {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,252,243,.85);
  border:2px solid #e2c294;
  border-radius:18px;
  padding:12px 16px;
  margin-bottom:12px;
  box-shadow:0 2px 5px rgba(150,100,50,.12);
}
.row-card .rc-emoji {
  width:54px; height:54px; flex:0 0 54px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px;
  background:radial-gradient(circle at 35% 30%, #fff7e3, #f3dcb6);
  border:2px solid #ddb87f;
  border-radius:14px;
}
.row-card .rc-main { flex:1; min-width:0; }
.row-card .rc-title { font-size:19px; font-weight:700; color:#6e4422; }
.row-card .rc-sub   { font-size:14px; color:#9a7a55; margin-top:3px; }

.btn-wood {
  border:none; cursor:pointer;
  padding:9px 22px;
  font-size:17px; font-weight:700; color:#fff;
  font-family:inherit;
  background:linear-gradient(180deg,#8fc98a,#5b9e58);
  border-radius:22px;
  box-shadow:0 3px 0 #46793f, inset 0 2px 4px rgba(255,255,255,.45);
  text-shadow:0 1px 2px rgba(50,90,45,.55);
  transition:transform .1s ease;
  white-space:nowrap;
}
.btn-wood:active { transform:translateY(2px); box-shadow:0 1px 0 #46793f; }
.btn-wood.gray   { background:linear-gradient(180deg,#cfc6b8,#a99e8d); box-shadow:0 3px 0 #87796a; text-shadow:none; cursor:default; }
.btn-wood.orange { background:linear-gradient(180deg,#ffc46b,#ef9436); box-shadow:0 3px 0 #b96f1f; }
.btn-wood.blue   { background:linear-gradient(180deg,#8ec3ec,#5b93cd); box-shadow:0 3px 0 #41709f; }

.progress-track {
  height:14px; border-radius:7px;
  background:#ead9bd;
  box-shadow:inset 0 2px 3px rgba(140,100,55,.3);
  overflow:hidden; margin-top:7px;
}
.progress-fill {
  height:100%;
  background:linear-gradient(90deg,#a7dca0,#6cb866);
  border-radius:7px;
  transition:width .4s ease;
}

/* 图鉴网格 */
.atlas-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.atlas-cell {
  background:rgba(255,252,243,.9);
  border:2px solid #e2c294;
  border-radius:16px;
  padding:12px 6px 10px;
  text-align:center;
  box-shadow:0 2px 5px rgba(150,100,50,.12);
}
.atlas-cell .af { font-size:44px; line-height:1.2; filter:drop-shadow(0 2px 2px rgba(120,80,40,.25)); }
.atlas-cell .an { font-size:15px; font-weight:700; color:#6e4422; margin-top:5px; }
.atlas-cell.locked .af { filter:grayscale(1) opacity(.35); }
.atlas-cell.locked .an { color:#b9a288; }
.atlas-cell.fresh { animation:cell-glow 1.2s ease 2; }
@keyframes cell-glow { 50%{box-shadow:0 0 18px 4px rgba(255,210,110,.8)} }

/* 签到网格 */
.sign-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.sign-cell {
  background:rgba(255,252,243,.9);
  border:2px solid #e2c294;
  border-radius:14px;
  text-align:center;
  padding:10px 4px;
}
.sign-cell .sd { font-size:13px; color:#9a7a55; font-weight:700; }
.sign-cell .se { font-size:30px; margin:4px 0; }
.sign-cell .sr { font-size:13px; color:#6e4422; font-weight:700; }
.sign-cell.got { opacity:.55; }
.sign-cell.got .se::after { content:" ✓"; color:#5b9e58; font-size:16px; font-weight:900; }
.sign-cell.today { border-color:#6cb866; box-shadow:0 0 0 3px rgba(108,184,102,.35), 0 0 14px rgba(160,220,130,.5); }

.panel-center { text-align:center; padding:6px 0 2px; }
.panel-tip { text-align:center; font-size:14px; color:#a98d68; margin-top:10px; }

/* 设置面板 */
.set-row {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,252,243,.85);
  border:2px solid #e2c294;
  border-radius:18px;
  padding:14px 20px;
  margin-bottom:12px;
  font-size:19px; font-weight:700; color:#6e4422;
}
.switch {
  position:relative; width:72px; height:36px;
  border:none; border-radius:18px; cursor:pointer;
  background:#cbbca5;
  transition:background .2s ease;
  box-shadow:inset 0 2px 4px rgba(120,90,50,.35);
}
.switch.on { background:linear-gradient(180deg,#8fc98a,#5b9e58); }
.switch::after {
  content:""; position:absolute; left:4px; top:4px;
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fffdf6, #ecdcc0);
  box-shadow:0 2px 4px rgba(80,50,25,.4);
  transition:left .2s ease;
}
.switch.on::after { left:40px; }

/* 个人信息 */
.profile-head { display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.profile-avatar {
  width:110px; height:104px; flex:0 0 110px;
  border-radius:22px;
  border:4px solid #d9a96b;
  background-image:url("../images/garden.png");
  background-size:1536px 864px;
  background-position:-25px -25px;
  box-shadow:0 3px 8px rgba(120,80,40,.35);
}
.profile-name { font-size:24px; font-weight:800; color:#6e4422; }
.profile-lv {
  display:inline-block; margin-top:6px;
  background:linear-gradient(180deg,#f0a3a3,#da8181);
  color:#fff; font-size:15px; font-weight:800;
  padding:3px 14px; border-radius:14px;
  text-shadow:0 1px 1px rgba(150,60,60,.5);
}
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.profile-stats .ps {
  background:rgba(255,252,243,.85);
  border:2px solid #e2c294;
  border-radius:14px;
  padding:10px 14px;
  font-size:16px; color:#6e4f33;
}
.profile-stats .ps b { color:#6e4422; font-size:19px; }

/* 邮件 */
.mail-card.read { opacity:.6; }

/* ═══════════════ 转场 ═══════════════ */

#transition {
  position:absolute; inset:0; z-index:80;
  background:radial-gradient(circle, #fff8ec 0%, #ffe9f2 60%, #f8d9e8 100%);
  opacity:0;
  pointer-events:none;
}
#transition.run { animation:trans-flash 1.1s ease forwards; pointer-events:auto; }
@keyframes trans-flash { 0%{opacity:0} 35%{opacity:1} 65%{opacity:1} 100%{opacity:0} }

/* ═══════════════ Toast ═══════════════ */

#toast-wrap {
  position:absolute; left:50%; top:120px;
  transform:translateX(-50%);
  z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none;
}
.toast {
  background:rgba(60,40,30,.86);
  color:#ffeede;
  font-size:19px; font-weight:600;
  padding:12px 30px;
  border-radius:24px;
  border:2px solid rgba(255,220,170,.4);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  letter-spacing:1px;
  animation:toast-in 2.6s ease forwards;
  white-space:nowrap;
}
@keyframes toast-in {
  0%{opacity:0; transform:translateY(-14px) scale(.9)}
  10%,80%{opacity:1; transform:translateY(0) scale(1)}
  100%{opacity:0; transform:translateY(-10px)}
}

/* ═══════════════ 竖屏提示 ═══════════════ */

#rotate-overlay {
  position:fixed; inset:0; z-index:999;
  display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(160deg,#3a2a44,#1d1526);
}
@media (orientation:portrait) { #rotate-overlay { display:flex; } }

.rotate-card { text-align:center; color:#f6e7ee; }
.rotate-icon {
  font-size:64px;
  display:inline-block;
  animation:rot-hint 1.8s ease-in-out infinite;
}
@keyframes rot-hint { 0%,20%{transform:rotate(0)} 55%,75%{transform:rotate(-90deg)} 100%{transform:rotate(-90deg)} }
.rotate-card p { font-size:24px; margin-top:18px; letter-spacing:4px; }
.rotate-card .rotate-sub { font-size:15px; color:#bca6c9; letter-spacing:2px; margin-top:8px; }