/* =============================================================
 * 小鸡农场 · 链游设计系统（Cozy Farm × Web3 Dashboard）
 * 方法论参考 awesome-design-md：调色板/字体层级/组件/阴影/留白
 * 本文件在 peckin-web3.css 之后加载，统一覆盖共享组件。
 * ============================================================= */
:root {
  /* —— 表面 / 背景 —— */
  --bg:        #241812;   /* 应用底色（深可可）*/
  --bg-2:      #2f2016;
  --panel:     #fffaf0;   /* 浮起面板（暖奶油）*/
  --panel-2:   #f6e8cf;
  --line:      #1f150e;   /* 像素描边 */
  --line-soft: rgba(31,21,14,.14);
  /* —— 文字 —— */
  --ink:       #3a2a1c;
  --ink-soft:  #8a7560;
  --on-dark:   #f3e7d2;
  --on-dark-soft:#c8b596;  /* 提亮以满足对比度 */
  /* —— 强调色 —— */
  --green:     #4aa72f;  --green-d: #348a22;  --green-dd: #276b1a;  /* 主操作 / 农场 */
  --gold:      #f4b740;  --gold-d:  #e0a020;  --gold-dd:  #b07d12;  /* 金币 */
  --teal:      #18b8a6;  --teal-d:  #0f9c8c;  --teal-dd:  #0c7f72;  /* $CHICK / web3 */
  --danger:    #d8543b;
  /* —— 阴影 —— */
  --sh-card:   0 6px 0 0 rgba(31,21,14,.26), 0 12px 26px rgba(0,0,0,.30);
  --sh-soft:   0 4px 14px rgba(0,0,0,.22);
  --radius:    14px;
  --font: "Fredoka", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--on-dark);
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a2618 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 120%, #32200f 0%, transparent 55%),
    var(--bg);
}
.pw3-hidden { display: none !important; }

#pw3-app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ============================ 顶部 Tab 栏 ============================ */
#pw3-tabs {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 58px; padding: 0 16px;
  background: linear-gradient(#3a2719, #2c1d12);
  border-bottom: 2px solid #16100a;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  position: relative; z-index: 20;
}
.pw3-tabbar { display: flex; align-items: center; gap: 4px; }
.pw3-tab-logo { height: 42px; width: 110px; object-fit: contain; image-rendering: auto; margin-right: 10px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.pw3-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--on-dark-soft);
  background: transparent; border: 0; border-radius: 10px;
  padding: 9px 15px; cursor: pointer; letter-spacing: .3px;
  transition: color .16s ease, background .16s ease, transform .1s ease;
}
.pw3-tab .ico { width: 19px; height: 19px; flex: 0 0 auto; display: block; transition: transform .18s ease; }
.pw3-tab:hover { color: var(--on-dark); background: rgba(255,255,255,.06); }
.pw3-tab:hover .ico { transform: translateY(-1px) rotate(-3deg); }
.pw3-tab:active { transform: translateY(1px); }
.pw3-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(24,184,166,.55); }
.pw3-tab-active, .pw3-tab-active:hover {
  color: #fff; background: linear-gradient(var(--green), var(--green-d));
  box-shadow: 0 3px 0 0 var(--green-dd), 0 4px 10px rgba(0,0,0,.3);
}
.pw3-mini {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold-d));
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  box-shadow: 0 3px 0 0 #b07d12, 0 3px 8px rgba(0,0,0,.25);
  transition: transform .06s;
}
.pw3-mini:active { transform: translateY(2px); }
.pw3-mini-dim { background: #5a4632; color: var(--on-dark-soft); box-shadow: none; cursor: default; }

/* —— 顶栏 HUD：🪙 金币 + 💰 $CHICK + 兑换（常驻，所有标签页可见）—— */
#pw3-wallet-slot { flex: 0 0 auto; }
.pw3-hud { display: flex; align-items: center; gap: 8px; }
.pw3-hud-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1;
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pw3-hud-item b { font-weight: 800; }
.pw3-hud-coins { color: var(--ink); background: linear-gradient(#fff7e6, var(--panel-2)); box-shadow: 0 3px 0 0 #d8c4a0, 0 3px 8px rgba(0,0,0,.22); }
.pw3-hud-coin-ico { height: 15px; width: auto; image-rendering: pixelated; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.pw3-hud-tok { color: #053b32; background: linear-gradient(var(--teal), var(--teal-d)); box-shadow: 0 3px 0 0 #0c7f72, 0 3px 8px rgba(0,0,0,.25); cursor: pointer; }
.pw3-hud-tok:active { transform: translateY(2px); }
.pw3-hud-btn {
  font-family: var(--font); font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(var(--green), var(--green-d));
  border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  box-shadow: 0 3px 0 0 var(--green-dd), 0 3px 8px rgba(0,0,0,.25);
  transition: transform .06s, filter .1s;
}
.pw3-hud-btn:hover { filter: brightness(1.06); }
.pw3-hud-btn:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--green-dd); }
.pw3-hud-btn:disabled { opacity: .55; cursor: not-allowed; }
.pw3-hud-connect { background: linear-gradient(var(--teal), var(--teal-d)); box-shadow: 0 3px 0 0 #0c7f72, 0 3px 8px rgba(0,0,0,.25); }

/* —— 兑换成功飘字 —— */
.pw3-toast {
  position: fixed; top: 70px; left: 50%; z-index: 100000; pointer-events: none;
  font-family: var(--font); font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(var(--teal), var(--teal-d));
  border: 3px solid var(--line); border-radius: 999px;
  padding: 11px 22px; box-shadow: 0 10px 26px rgba(0,0,0,.45);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  animation: pw3toast 2.3s cubic-bezier(.2,.8,.2,1) forwards;
}
.pw3-toast b { font-weight: 900; }
.pw3-toast-ic { font-size: 19px; }
@keyframes pw3toast {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(.9); }
  12%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* ============================ 页面容器 ============================ */
#pw3-pages { flex: 1 1 auto; min-height: 0; position: relative; }
.pw3-page { position: absolute; inset: 0; }
.pw3-page[data-page="intro"], .pw3-page[data-page="wallet"] { overflow-y: auto; }

/* ============================ 农场：内嵌游戏窗口 ============================ */
.pw3-page[data-page="game"] { display: flex; align-items: center; justify-content: center; padding: clamp(6px, 2vmin, 22px); overflow: hidden; }
#pw3-screen {
  /* 严格按原版 287×181 等比 contain：宽屏/全屏时优先按高度收住，避免上下裁切。 */
  width: min(calc(100vw - 44px), calc(158.5635vh - 162px));
  width: min(calc(100vw - 44px), calc(158.5635dvh - 162px));
  min-width: min(94vw, 320px);
  aspect-ratio: 287 / 181;
  max-width: none;
  max-height: none;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #1c2a14;
  border: 5px solid var(--line);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.06),
    0 14px 40px rgba(0,0,0,.5),
    0 0 0 6px #3a2719;
}
#container { display: contents; }
#pw3-screen canvas { image-rendering: pixelated; display: block; flex: 0 0 auto; }
#pw3-screen:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  border: 0; border-radius: 0; box-shadow: none;
}
#pw3-screen:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  border: 0; border-radius: 0; box-shadow: none;
}

/* 农场未授权门闸（不透明，盖住原版存档槽）*/
#pw3-gate-inline {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #325a1f, #1c3413);
}
.pw3-gate-card {
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-card); padding: 28px 32px; text-align: center; max-width: 86%;
}
.pw3-gate-msg { font-size: 19px; font-weight: 700; color: var(--green-d); }
.pw3-gate-sub { font-size: 13.5px; margin: 8px 0 18px; color: var(--ink-soft); }

/* ============================ 玩法介绍 ============================ */
.pw3-intro { max-width: 980px; margin: 0 auto; padding: 30px 18px 44px; }
.pw3-intro-title {
  text-align: center; font-size: 26px; font-weight: 700; color: var(--on-dark);
  margin: 6px 0 26px; letter-spacing: .5px;
}
.pw3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.pw3-gcard {
  min-width: 0; background: var(--panel); border: 3px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px 18px; text-align: center; box-shadow: var(--sh-card);
  transition: transform .14s ease, box-shadow .14s ease;
}
.pw3-gcard:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 rgba(31,21,14,.28), 0 16px 30px rgba(0,0,0,.32); }
.pw3-gcard img {
  width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated;
  background: var(--panel-2); border-radius: 14px; padding: 10px; box-sizing: content-box;
  box-shadow: inset 0 0 0 2px rgba(31,21,14,.10); margin-bottom: 10px;
}
.pw3-gcard h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pw3-gcard p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); overflow-wrap: anywhere; }
.pw3-gcard-hl { background: linear-gradient(#fff6dc, #ffeebf); border-color: var(--gold-d); }
.pw3-gcard-hl h3 { color: var(--gold-d); }
.pw3-gcard-hl b { color: var(--teal-d); }
.pw3-foot-note { text-align: center; color: var(--on-dark-soft); font-size: 12px; margin: 28px 0 6px; }

/* ============================ 钱包页 ============================ */
#pw3-wallet-page { max-width: 540px; margin: 0 auto; padding: 30px 18px 48px; }
.pw3-wpanel {
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-card); padding: 20px 20px 18px; margin-bottom: 18px;
}
.pw3-wtitle { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--ink); }
.pw3-wrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 14.5px; margin: 10px 0; flex-wrap: wrap; }
.pw3-wrow label { flex: 1; color: var(--ink-soft); }
.pw3-wrow b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================ 共享组件覆盖 ============================ */
.pw3-btn {
  font-family: var(--font); font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(var(--green), var(--green-d));
  border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer;
  box-shadow: 0 4px 0 0 var(--green-dd), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .06s, filter .1s;
}
.pw3-btn:hover { filter: brightness(1.05); }
.pw3-btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--green-dd); }
.pw3-btn:disabled { opacity: .5; cursor: not-allowed; }
.pw3-btn-go { background: linear-gradient(var(--teal), var(--teal-d)); box-shadow: 0 4px 0 0 #0c7f72, 0 4px 10px rgba(0,0,0,.18); }
.pw3-btn-go:active { box-shadow: 0 0 0 0 #0c7f72; }
.pw3-btn-ghost { background: var(--panel-2); color: var(--ink); box-shadow: 0 4px 0 0 #d8c4a0; }
.pw3-btn-ghost:active { box-shadow: 0 0 0 0 #d8c4a0; }
.pw3-btn-sm { padding: 7px 12px; font-size: 12.5px; }

.pw3-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }

.pw3-status { min-height: 18px; margin: 8px 0; font-size: 13px; line-height: 1.6; word-break: break-word; }
.pw3-ok   { color: var(--green-d); font-weight: 700; }
.pw3-warn { color: var(--gold-d); font-weight: 700; }
.pw3-err  { color: var(--danger); font-weight: 700; }

.pw3-input {
  font-family: var(--font); font-size: 15px; color: var(--ink);
  width: 130px; padding: 8px 10px; text-align: right;
  background: #fffdf7; border: 2px solid var(--line); border-radius: 9px;
}
.pw3-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,184,166,.25); }

/* 弹窗（钱包选择）*/
.pw3-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(20,13,8,.7); backdrop-filter: blur(3px); }
.pw3-card { position: relative; width: min(92vw, 380px); background: var(--panel); color: var(--ink); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 24px 22px 18px; text-align: center; }
.pw3-logo { font-size: 22px; font-weight: 700; color: var(--green-d); }
.pw3-sub { font-size: 12.5px; margin-top: 4px; color: var(--ink-soft); }
.pw3-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; font-size: 15px; font-weight: 700; color: #fff; background: var(--danger); border: 3px solid var(--line); border-radius: 50%; cursor: pointer; box-shadow: 0 3px 0 0 var(--line); padding: 0; }
.pw3-close:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--line); }
.pw3-wallet-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.pw3-wallet-item { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; box-shadow: 0 3px 0 0 #d8c4a0; text-align: left; transition: transform .06s; }
.pw3-wallet-item:hover { filter: brightness(1.04); }
.pw3-wallet-item:active { transform: translateY(3px); box-shadow: 0 0 0 0 #d8c4a0; }
.pw3-wallet-item img, .pw3-wallet-ph { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.pw3-wallet-name { flex: 1; }
.pw3-foot { margin-top: 14px; font-size: 10.5px; color: var(--ink-soft); }

@media (max-width: 560px) {
  .pw3-tab { padding: 8px 10px; font-size: 13px; }
  .pw3-tab-logo { display: none; }
  .pw3-intro-title { font-size: 22px; }
  #pw3-tabs { gap: 8px; padding: 0 10px; }
  .pw3-tabbar { min-width: 0; }
  .pw3-hud { gap: 6px; }
  .pw3-hud-item { padding: 7px 10px; font-size: 12px; }
  .pw3-hud-btn { padding: 8px 13px; font-size: 12px; }
  .pw3-hud-unit { display: none; }   /* 窄屏隐藏 "$CHICK" 字样省空间 */
}

/* ============================ 排行榜页 ============================ */
#pw3-rank-page { max-width: 640px; margin: 0 auto; padding: 26px 16px 44px; }
.pw3-rank-title { text-align: center; font-size: 24px; font-weight: 700; color: var(--on-dark); margin: 4px 0 14px; letter-spacing: .5px; }
.pw3-rank-status { text-align: center; }
.pw3-rank-list { display: flex; flex-direction: column; gap: 8px; }
.pw3-rank-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-family: var(--font); text-align: left;
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--line); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 3px 0 0 rgba(31,21,14,.22);
}
.pw3-rank-no { flex: 0 0 auto; width: 36px; text-align: center; font-size: 16px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pw3-rank-addr { flex: 1; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.pw3-rank-addr em { color: var(--green-d); font-style: normal; font-size: 12px; }
.pw3-rank-coin { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #5a3d05; }
.pw3-rank-self { background: linear-gradient(#fff6dc, #ffeebf); border-color: var(--gold-d); }
.pw3-rank-empty { text-align: center; color: var(--on-dark-soft); padding: 30px 0; }
.pw3-rank-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pw3-rank-pageinfo { color: var(--on-dark-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.pw3-rank-foot { text-align: center; color: var(--on-dark-soft); font-size: 12px; margin-top: 18px; }

/* ============================================================
 * 外壳重做 · 增量打磨（20260701）
 * 仅新增/加强，不改动上方既有规则；游戏画框 #pw3-screen 未动。
 * ============================================================ */

/* —— 玩法介绍：手绘 SVG 图标图钉（替代原精灵图）—— */
.pw3-gico {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--line-soft);
  color: var(--green-d);
}
.pw3-gico svg { width: 32px; height: 32px; display: block; }
.pw3-gico img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(31,21,14,.18)); }
.pw3-gcard-hl .pw3-gico { color: var(--teal-d); background: #fff; }
.pw3-gcard-hl h3 { color: var(--gold-dd); }

/* —— 焦点可见态（键盘可达性）—— */
.pw3-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,167,47,.5), 0 4px 0 0 var(--green-dd); }
.pw3-btn-go:focus-visible { box-shadow: 0 0 0 3px rgba(24,184,166,.5), 0 4px 0 0 #0c7f72; }
.pw3-hud-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,167,47,.5); }
.pw3-hud-tok:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(24,184,166,.55); }
.pw3-rank-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(24,184,166,.5); }
.pw3-input:focus-visible { outline: none; }

/* —— 入场动效（纯 CSS，一次性；减弱动效时不播放）—— */
@keyframes pw3-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes pw3-pop  { from { opacity: 0; transform: scale(.972); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pw3-tab-logo { animation: pw3-rise .5s .04s both cubic-bezier(.22,.61,.36,1); }
  #pw3-tabs .pw3-tab { animation: pw3-rise .45s both cubic-bezier(.22,.61,.36,1); }
  #pw3-tabs .pw3-tab:nth-of-type(1) { animation-delay: .10s; }
  #pw3-tabs .pw3-tab:nth-of-type(2) { animation-delay: .16s; }
  #pw3-tabs .pw3-tab:nth-of-type(3) { animation-delay: .22s; }
  #pw3-tabs .pw3-tab:nth-of-type(4) { animation-delay: .28s; }
  #pw3-screen { animation: pw3-pop .6s .16s both cubic-bezier(.22,.61,.36,1); }
}

/* ============================================================
 * 外壳美化 v2（20260702）
 * 背景真相：非游戏页的「草地」是底下持续渲染的游戏 canvas 透出来的。
 * 思路：把它变成设计语言 —— 非游戏页盖一层「暖夜色磨砂玻璃」，
 * 农场在底下隐约流动；标题做成游戏同款木牌；排行榜前三金银铜。
 * 本段只追加覆盖，不改动上方既有规则。
 * ============================================================ */

/* —— 非游戏页：暖夜磨砂底（游戏画面隐约透出）+ 纵向居中 —— */
.pw3-page[data-page="intro"],
.pw3-page[data-page="rank"],
.pw3-page[data-page="wallet"] {
  display: flex; overflow-y: auto;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(96,64,28,.38), transparent 62%),
    linear-gradient(180deg, rgba(24,15,7,.82), rgba(20,12,6,.92));
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
}
.pw3-page.pw3-hidden { display: none; }  /* flex 覆盖后仍需能隐藏 */
.pw3-intro      { margin: auto; width: 100%; }
#pw3-wallet-page{ margin: auto; width: 100%; }
#pw3-rank-page  { margin: auto; width: 100%; }

/* —— 页面大标题：游戏同款木牌（对齐场景里的「任务板」）——
 * 钉子直接用两个 radial-gradient 画在背景里（而非伪元素），
 * 这样同一套样式能复用到 #pw3-wallet-page::before 生成的木牌上。 */
.pw3-intro-title, .pw3-rank-title, #pw3-wallet-page::before {
  position: relative; display: table; margin: 4px auto 30px; padding: 13px 44px 14px;
  font-size: 23px; font-weight: 700; letter-spacing: 6px; text-indent: 6px; color: #53381a;
  font-family: var(--font);
  background:
    radial-gradient(circle 5px at 17px 50%, #6b4218 62%, rgba(0,0,0,0) 63%),
    radial-gradient(circle 5px at calc(100% - 17px) 50%, #6b4218 62%, rgba(0,0,0,0) 63%),
    repeating-linear-gradient(0deg, rgba(122,76,32,.18) 0 2px, transparent 2px 11px),
    linear-gradient(#eab869, #dc9f52 55%, #cd8f43);
  border: 3px solid var(--line); border-radius: 10px;
  box-shadow: 0 5px 0 0 #7c521f, 0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.4);
  text-shadow: 0 1px 0 rgba(255,244,214,.5);
}
#pw3-wallet-page::before { content: "Wallet"; }

/* —— 玩法介绍卡片 v2 —— */
.pw3-intro { padding: 34px 18px 46px; }
.pw3-cards { gap: 16px; }
.pw3-gcard { border-radius: 16px; padding: 22px 16px 20px; }
.pw3-gico {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px;
  background: linear-gradient(#faf1dc, #efdcb4);
  box-shadow: inset 0 0 0 2px rgba(31,21,14,.12), inset 0 -6px 0 rgba(31,21,14,.06);
}
.pw3-gico img { width: 46px; height: 46px; transition: transform .18s ease; }
.pw3-gcard:hover .pw3-gico img { transform: scale(1.12) rotate(-4deg); }
.pw3-gcard h3 { font-size: 16.5px; }
.pw3-gcard p { font-size: 12.8px; }
.pw3-gcard-hl {
  box-shadow: 0 6px 0 0 rgba(176,125,18,.5), 0 12px 26px rgba(0,0,0,.3), 0 0 26px rgba(244,183,64,.22);
}
.pw3-gcard-hl .pw3-gico { background: linear-gradient(#fffdf4, #fdf3d3); }

/* —— 排行榜 v2：前三金银铜、行更饱满 —— */
#pw3-rank-page { max-width: 620px; padding: 30px 16px 42px; }
.pw3-rank-list { gap: 9px; }
.pw3-rank-row { padding: 12px 16px; border-radius: 14px; gap: 14px; }
.pw3-rank-no { width: 40px; }
.pw3-rank-top1 .pw3-rank-no, .pw3-rank-top2 .pw3-rank-no, .pw3-rank-top3 .pw3-rank-no { font-size: 22px; }
.pw3-rank-top1 { background: linear-gradient(#fff4c8, #ffe289); border-color: #c9962a; }
.pw3-rank-top2 { background: linear-gradient(#f6f6fa, #e2e4ec); border-color: #99a0b4; }
.pw3-rank-top3 { background: linear-gradient(#f8e4cd, #eec9a2); border-color: #b07648; }
.pw3-rank-top1 .pw3-rank-addr, .pw3-rank-top2 .pw3-rank-addr, .pw3-rank-top3 .pw3-rank-addr { font-size: 16px; }
.pw3-rank-coin {
  background: rgba(31,21,14,.07); border-radius: 999px; padding: 6px 12px;
  box-shadow: inset 0 0 0 1px rgba(31,21,14,.08);
}
.pw3-rank-pageinfo { color: var(--on-dark-soft); }

/* —— 页脚小字：暗色药丸，别再飘在草地上 —— */
.pw3-foot-note, .pw3-rank-foot {
  display: table; margin: 26px auto 0; padding: 7px 16px; border-radius: 999px;
  background: rgba(0,0,0,.34); color: #cdbb9a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

/* —— 顶栏微调：更挺括的 logo 与统一高度的 HUD —— */
#pw3-tabs { height: 62px; }
.pw3-tab-logo { height: 46px; width: 118px; }
.pw3-hud-item, .pw3-hud-btn { height: 34px; display: inline-flex; align-items: center; }

/* —— 钱包页 v2 —— */
#pw3-wallet-page { max-width: 560px; padding: 30px 18px 46px; }
.pw3-wpanel { border-radius: 16px; padding: 22px 22px 20px; }
.pw3-wtitle { font-size: 18px; }

/* —— 真手机窄屏（≤430px）：tab 只留图标，防止顶栏挤爆 —— */
@media (max-width: 430px) {
  .pw3-tab span { display: none; }
  .pw3-tab { padding: 9px 11px; }
  .pw3-tab .ico { width: 20px; height: 20px; }
  .pw3-intro-title, .pw3-rank-title, #pw3-wallet-page::before {
    font-size: 19px; letter-spacing: 4px; padding: 11px 34px 12px;
  }
}

/* ============================================================
 * v3 门户首页（20260702）—— 布局大改：门户官网式
 * 首页 = hero + 链上数据 + 玩法 + Top5 + 代币经济;
 * 游戏 / 排行榜 / 钱包保留为子视图。
 * ============================================================ */

/* 首页容器：同款暖夜磨砂 + 纵向滚动 */
.pw3-page[data-page="home"] {
  display: flex; overflow-y: auto;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(96,64,28,.38), transparent 62%),
    linear-gradient(180deg, rgba(24,15,7,.82), rgba(20,12,6,.92));
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
}
.pw3-home { margin: auto; width: 100%; max-width: 1020px; padding: 0 18px 46px; }
.pw3-home .pw3-intro-title, .pw3-home .pw3-rank-title { margin: 40px auto 26px; }

/* —— Hero —— */
.pw3-hero { text-align: center; padding: 48px 8px 26px; }
.pw3-hero-logo { height: 96px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.pw3-hero-flock { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 14px 0 2px; }
.pw3-hero-flock img { image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.pw3-hero-title {
  margin: 10px 0 8px; font-size: clamp(26px, 4.6vw, 40px); font-weight: 700;
  color: #fff; letter-spacing: 3px; text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.pw3-hero-sub { margin: 0 0 24px; font-size: 15px; color: var(--on-dark-soft); }
.pw3-hero-sub b { color: var(--teal); }
.pw3-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pw3-cta-play { font-size: 18px; padding: 15px 36px; border-radius: 14px; }
.pw3-cta-buy {
  display: inline-block; text-decoration: none; font-size: 18px; padding: 15px 30px; border-radius: 14px;
  font-family: var(--font); font-weight: 700; color: #4a3205;
  background: linear-gradient(var(--gold), var(--gold-d));
  box-shadow: 0 4px 0 0 var(--gold-dd), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .06s, filter .1s;
}
.pw3-cta-buy:hover { filter: brightness(1.05); }
.pw3-cta-buy:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--gold-dd); }
.pw3-cta-dim { opacity: .62; cursor: not-allowed; }
.pw3-cta-dim:active { transform: none; box-shadow: 0 4px 0 0 var(--gold-dd), 0 4px 10px rgba(0,0,0,.18); }

/* —— 链上数据条（两块：累计已兑换 / 持币门槛）—— */
.pw3-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 26px auto 10px; max-width: 620px; }
.pw3-stat {
  text-align: center; padding: 16px 12px; border-radius: 14px;
  background: rgba(255,250,240,.06);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.09);
}
.pw3-stat-v { font-size: 24px; font-weight: 800; color: #ffd873; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0,0,0,.3); overflow-wrap: anywhere; }
.pw3-stat-k { margin-top: 5px; font-size: 12.5px; color: var(--on-dark-soft); }

/* —— Top5 —— */
.pw3-top5 { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
.pw3-top5-more { text-align: center; margin: 16px 0 6px; }

/* —— 代币经济 —— */
.pw3-flow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pw3-flow-step {
  min-width: 158px; padding: 14px 18px; text-align: center;
  background: var(--panel); border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 0 0 rgba(31,21,14,.24), 0 8px 18px rgba(0,0,0,.28);
}
.pw3-flow-step span { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.pw3-flow-step small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.pw3-flow-hl { background: linear-gradient(#fff6dc, #ffeebf); border-color: var(--gold-d); }
.pw3-flow-hl span { color: var(--gold-dd); }
.pw3-flow-arrow { align-self: center; font-size: 22px; font-weight: 800; color: #ffd873; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.pw3-contracts { max-width: 620px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 8px; }
.pw3-caddr {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 12px; font-size: 13.5px; color: var(--on-dark);
  background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.pw3-caddr b { color: #ffd873; }
.pw3-caddr code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pw3-caddr a { margin-left: auto; color: var(--teal); font-weight: 700; text-decoration: none; }
.pw3-caddr a:hover { text-decoration: underline; }
.pw3-caddr-na { color: var(--on-dark-soft); }

@media (max-width: 640px) {
  .pw3-hero { padding-top: 30px; }
  .pw3-hero-logo { height: 72px; }
  .pw3-flow-arrow { transform: rotate(90deg); flex-basis: 100%; text-align: center; }
  .pw3-flow-step { flex: 1 1 100%; }
}