/* ===========================================================
   摸鱼室 · 基础样式
   设计意图：看起来像个记事本，不像个游戏（假设里就要求"不像纯娱乐"）
   所以：无渐变背景、无霓虹、无弹窗、无音效默认最大声
   =========================================================== */

:root {
  --paper: #f6f4ef;
  --ink: #2b2b28;
  --ink-2: #6f6a61;
  --ink-3: #a8a29a;
  --line: rgba(43, 43, 40, 0.08);
  --card: #fffdf9;
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- 首页 ---------- */

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 22px 64px;
}

.brand {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 26px;
}

h1 {
  font-size: 30px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 34px;
}

.cards { display: grid; gap: 12px; }

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.card:active { transform: scale(0.985); }

@media (hover: hover) {
  .card:hover { border-color: rgba(43, 43, 40, 0.2); }
}

.card .idx {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #efebe2;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.card .body { flex: 1 1 auto; min-width: 0; }

.card .name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 3px;
}

.card .desc {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

.card .go {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink-3);
}

.card.soon {
  opacity: 0.5;
  pointer-events: none;
}

.card.soon .go::after { content: "施工中"; }

.foot {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-3);
}

.foot strong { color: var(--ink-2); font-weight: 500; }

/* ---------- 游戏页通用骨架 ---------- */

.stage {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 6px;
}

.top .title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.top .back {
  font-size: 13px;
  color: var(--ink-3);
  padding: 6px 2px;
}

.bottom {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px 22px;
  border-top: 1px solid var(--line);
}

.hud { min-width: 0; }

.hud .num {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hud .num .unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 6px;
  letter-spacing: 0;
}

.hud .stat {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.icon-btn:active { background: #efebe2; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 104px;
  transform: translate(-50%, 10px);
  opacity: 0;
  background: rgba(43, 43, 40, 0.92);
  color: #f6f4ef;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.4;
  max-width: 80vw;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease;
  z-index: 20;
}

.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}