/* ============================================================
 * LUXREALM · 小岛日记 —— 试玩版样式
 * 令牌沿用正式站 css/style.css（已通过 WCAG AA 对比度校验）
 * 布局要点：移动端单列，桌面两列；触摸热区最小 44pt
 * ============================================================ */
:root{
  --bg:#F7F7EF; --bg-alt:#F0F3E8;
  --green:#486A54; --green-hi:#3D5E48; --green-deep:#345641; --green-card:#3E6450;
  --ink:#304C3F; --text:#4A5C4E; --body:#56685A; --muted:#5C6E5E;
  --accent:#D8925B; --accent-deep:#9A5A20;
  --gold:#C98A4B; --gold-lt:#F2CD94; --gold-deep:#8F5A20;
  --line:#E5E8DC; --card:#FFFFFF;
  --shadow-sm:0 4px 16px rgba(48,76,63,.08);
  --shadow-md:0 12px 28px rgba(48,76,63,.10);
  --r-sm:14px; --r-md:20px; --r-lg:24px; --r-pill:999px;
  --f-sc:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --tap:44px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--f-sc);
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:radial-gradient(circle at 12% 8%,rgba(216,146,91,.07),transparent 45%),
                   radial-gradient(circle at 88% 92%,rgba(72,106,84,.08),transparent 45%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer}

/* ── 顶栏 ── */
.top{background:linear-gradient(160deg,#3D5E48,#2F4436);color:#fff;padding:14px 0;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 12px rgba(47,68,54,.18)}
.top-in{max-width:1040px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.02em;flex:1;min-width:0}
.top .tt{font-size:11px;color:var(--gold-lt);font-weight:600;letter-spacing:.14em;margin-bottom:1px}
.badge{background:rgba(255,255,255,.13);border:1px solid rgba(242,205,148,.4);color:#F5E9D4;
  border-radius:var(--r-pill);padding:3px 11px;font-size:11.5px;white-space:nowrap}
/* 顶栏入口按钮：与 badge 同尺寸，保证 44pt 触摸热区 */
.badge-link{display:inline-flex;align-items:center;text-decoration:none;background:rgba(242,205,148,.16)}
.badge-link:hover{background:rgba(242,205,148,.28)}

/* ── 布局 ── */
.wrap{max-width:1040px;margin:0 auto;padding:20px 18px 60px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.card{background:var(--card);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:16px}
.card>h3{margin:0 0 14px;font-size:15px;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:8px}
.card>h3 .n{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ── 精灵主舞台 ── */
.stage{background:linear-gradient(170deg,#F3F6EC,#E9EFE2);border-radius:var(--r-lg);
  padding:22px 18px;text-align:center;position:relative;overflow:hidden;margin-bottom:16px;
  box-shadow:var(--shadow-sm)}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:62px;
  background:linear-gradient(transparent,rgba(72,106,84,.09))}
.stage .date{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-bottom:12px}
.stage .petwrap{position:relative;width:148px;height:148px;margin:0 auto 10px}
.stage .petwrap img{width:100%;height:100%;object-fit:contain;border-radius:50%;
  background:rgba(255,255,255,.62);padding:8px;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.02)}}
.petname{font-size:21px;font-weight:700;color:var(--ink);margin-bottom:3px}
.petmeta{font-size:12.5px;color:var(--muted);margin-bottom:12px}
/* 等级与经验：战斗给经验后，这里是它的落点 */
.lvexp{display:flex;align-items:center;gap:9px;max-width:340px;margin:0 auto 12px}
.lv-badge{
  font-size:11.5px;font-weight:700;color:var(--green-deep);flex-shrink:0;
  background:rgba(72,106,84,.12);border-radius:var(--r-pill);padding:2px 9px;
}
.lv-track{flex:1;height:5px;background:rgba(72,106,84,.15);border-radius:var(--r-pill);overflow:hidden;min-width:0}
.lv-track i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1)}
.lv-txt{font-size:11px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.petflavor{font-size:13px;color:var(--body);font-style:italic;max-width:34ch;margin:0 auto 16px;min-height:2.6em}
.bond{background:rgba(255,255,255,.75);border-radius:var(--r-pill);padding:9px 16px;max-width:400px;margin:0 auto}
.bond .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px}
.bond .lv{font-weight:700;color:var(--green-deep)}
.bond .nx{color:var(--muted)}
.bar{height:7px;background:rgba(72,106,84,.16);border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-hi));
  border-radius:var(--r-pill);transition:width .55s cubic-bezier(.4,0,.2,1)}
.bondsay{font-size:12.5px;color:var(--body);margin-top:7px}
/* 战斗状态值：与战斗页同一口径，让亲密度有可见的下游目标 */
.bondstat{
  margin-top:9px; padding-top:8px; font-size:11.5px; color:var(--muted);
  border-top:1px dashed var(--line); letter-spacing:.02em;
}
.bondstat b{color:var(--gold-deep); font-weight:700; font-variant-numeric:tabular-nums;
  margin-left:6px; font-size:13px}

/* ── 气泡反馈 ── */
.bubble{display:flex;align-items:flex-start;gap:9px;background:#fff;border-radius:var(--r-pill);
  padding:11px 16px;box-shadow:var(--shadow-md);margin:14px auto 0;max-width:420px;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;text-align:left}
.bubble.show{opacity:1;transform:translateY(0)}
.bb-emo{font-size:19px;line-height:1.4;flex-shrink:0}
.bb-txt{font-size:13.5px;color:var(--body);line-height:1.65}

/* ── 统计条 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.st{background:var(--card);border-radius:var(--r-sm);padding:12px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.st b{display:block;font-size:20px;color:var(--green-deep);font-weight:700;line-height:1.2}
.st span{font-size:11.5px;color:var(--muted)}

/* ── 动作按钮（触摸热区 ≥44pt）── */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.act{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 12px;
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:var(--r-sm);
  text-align:left;transition:.18s}
.act:hover{background:#E9EFE2;border-color:var(--green)}
.act:active{transform:scale(.97)}
.act[aria-disabled="true"]{opacity:.55;cursor:pointer;background:#F3F4EE}
.act[aria-disabled="true"]:hover{border-color:var(--muted)}
.act-emo{font-size:22px;line-height:1;flex-shrink:0}
.act-txt{display:flex;flex-direction:column;min-width:0}
.act-txt b{font-size:13.5px;color:var(--ink);font-weight:700}
.act-txt small{font-size:11px;color:var(--muted)}

/* ── 探索 ── */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.zone{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 12px;
  background:linear-gradient(140deg,#F0F5F4,#EDF2EA);border:1.5px solid var(--line);
  border-radius:var(--r-sm);text-align:left;transition:.18s}
.zone:hover{border-color:var(--green)}
.zone:active{transform:scale(.97)}
.zone[aria-disabled="true"]{opacity:.55;cursor:pointer}
.zone[aria-disabled="true"]:hover{border-color:var(--muted)}
.zone-emo{font-size:21px;flex-shrink:0}
.zone-txt{display:flex;flex-direction:column;min-width:0}
.zone-txt b{font-size:13.5px;color:var(--ink)}
.zone-txt small{font-size:11px;color:var(--muted)}

/* ── 材料 ── */
.mats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mat{display:flex;align-items:center;gap:5px;background:var(--bg-alt);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;color:var(--muted)}
.mat.has{background:#E9F0E4;border-color:var(--green);color:var(--green-deep);font-weight:700}
.mat-emo{font-size:14px}
.mat-n{font-weight:700}

/* ── 工坊 ── */
.rcs{display:grid;gap:8px}
.rc{display:flex;align-items:center;gap:11px;min-height:var(--tap);padding:10px 13px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);text-align:left;transition:.18s}
.rc:hover{border-color:var(--green);background:#FAFCF8}
.rc:active{transform:scale(.98)}
.rc[aria-disabled="true"]{opacity:.68;cursor:pointer}
.rc[aria-disabled="true"]:hover{border-color:var(--muted);background:#fff}
.rc-emo{font-size:21px;flex-shrink:0}
.rc-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rc-txt b{font-size:13.5px;color:var(--ink)}
.rc-cost{display:flex;gap:8px;flex-wrap:wrap}
.rc-mat{font-size:11px;color:var(--muted)}
.rc-mat.ok{color:var(--green-deep);font-weight:600}
.rc-mat.lack{color:#A8443A}
.rc.off .rc-txt b{color:var(--green-deep)}

/* ── 日记 ── */
.diaries{display:grid;gap:10px;max-height:340px;overflow-y:auto}
.diary{background:linear-gradient(150deg,#FFFDF7,#FDF8EE);border:1px solid #EFE6D4;
  border-radius:var(--r-sm);padding:13px 15px}
.diary-day{font-size:11.5px;color:var(--gold-deep);font-weight:700;letter-spacing:.03em}
.diary-txt{margin:5px 0 0;font-size:13.5px;color:var(--text);line-height:1.85}
.diary-empty{font-size:13px;color:var(--muted);margin:0}

/* ── 领养 ── */
.pickwrap{background:var(--card);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-md)}
.pickwrap h2{margin:0 0 6px;font-size:21px;color:var(--ink);font-weight:700}
.pickwrap p.lead{margin:0 0 18px;font-size:13.5px;color:var(--body)}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.pcard{background:#fff;border:2px solid var(--line);border-radius:var(--r-md);padding:12px 8px 11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.18s}
.pcard:hover{border-color:var(--el);background:var(--el-soft);transform:translateY(-2px)}
.pcard:active{transform:scale(.97)}
.pcard img{width:64px;height:64px;object-fit:contain;border-radius:50%;background:var(--el-soft);padding:5px}
.pc-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.pc-el{font-size:11px;color:var(--muted)}

/* ── 工具区 ── */
.tools h3{margin:0 0 6px;font-size:14.5px;color:var(--ink);font-weight:700}
.tools p.note{margin:0 0 12px;font-size:12.5px;color:var(--body);line-height:1.7}
#logMode{display:block;background:#E9F0E4;border-left:3px solid var(--green);
  border-radius:0 8px 8px 0;padding:9px 13px;font-size:12.5px;color:var(--green-deep);
  margin:0 0 14px;line-height:1.65}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.btn{min-height:var(--tap);padding:0 17px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:#fff;font-size:13px;font-weight:600;color:var(--green-deep);transition:.18s}
.btn:hover{background:var(--bg-alt);border-color:var(--green)}
.btn:active{transform:scale(.97)}
.btn.warn{color:#8E3A31;border-color:#E8D3CF}
.btn.warn:hover{background:#FBF3F1}
#ioArea{width:100%;min-height:104px;padding:12px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--bg-alt);font-size:11.5px;color:var(--text);
  font-family:ui-monospace,Menlo,monospace;resize:vertical;line-height:1.6;word-break:break-all}
#ioArea:focus{outline:2px solid var(--green);outline-offset:1px}

/* ── Toast ── */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:var(--r-pill);
  font-size:13.5px;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:opacity .26s,transform .26s;z-index:99;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

footer{text-align:center;padding:26px 18px 34px;font-size:12px;color:var(--muted);line-height:1.9}
footer b{color:var(--green-deep)}

/* ── 调试面板入口 ──
 * 版本号那行字。看起来像装饰，实际连点 7 次能开调试面板。
 * 用 padding 撑出 44px 触摸热区，满足手指点按，
 * 但视觉上还是那行不起眼的小字。 */
#dbgTap{
  display:inline-block;
  margin-top:8px; padding:10px 18px;
  color:var(--muted); opacity:.45;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#dbgTap:active{opacity:.8}

/* ── 响应式 ── */
@media (max-width:820px){
  .cols{grid-template-columns:1fr}
  .picks{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  body{font-size:14.5px}
  .wrap{padding:16px 14px 50px}
  .acts,.zones{grid-template-columns:1fr 1fr}
  .picks{grid-template-columns:repeat(2,1fr)}
  .stats{gap:7px}
  .st b{font-size:18px}
  .card{padding:16px}
  .stage .petwrap{width:124px;height:124px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}