/* ============================================
   GLOBAL NES.CSS PIXEL STYLE - 全局像素风格规范
   ============================================ */

/* ============================================
   0. SPACING SYSTEM - 4px 基准网格 (P2: css-cleanup)
   ============================================ */
:root {
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* 色彩变量 */
    --c-bg: #ffffff;
    --c-text: #212529;
    --c-text-secondary: #666;
    --c-text-muted: #888;
    --c-border: #212529;
    --c-border-light: #d3d3d3;
    --c-surface: #f8f8f8;
    --c-green: #92cc41;
    --c-blue: #209cee;
    --c-red: #e76e55;
    --c-yellow: #f7d51d;
    --c-purple: #9b59b6;
    --c-dark: #212529;
    --c-nav-bg: #212529;
}

/* ============================================
   1. PIXEL FONT + NO ANTI-ALIASING
   ============================================ */
* {
    font-family: 'zpix', 'Press Start 2P', 'Courier New', monospace !important;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-sizing: border-box !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    text-rendering: pixelated !important;
    image-rendering: pixelated !important;
}

/* 基础字号 16px（像素风需要大号才有冲击力） */
body, input, span, div, td, th, button, select, textarea, label, p, a, li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: bold !important;
}

html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
body {
    background-color: var(--c-bg);
    color: var(--c-text);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;   /* 回退兼容 */
    min-height: 100dvh;  /* 使用 dynamic viewport height，避免手机地址栏隐藏时抖动 */
    padding: 0 0.5rem 1rem 0.5rem;
    margin: 0;
    /* 顶部导航栏留白 */
    padding-top: 52px;
    transition: background-color 0.2s steps(4), color 0.2s steps(4);
    overflow-x: hidden;
    max-width: 100vw;
    overscroll-behavior-x: none;
}

/* ============================================
   2. MAIN CONTAINER
   ============================================ */
.main-container,
.container {
    width: 95%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
}

.nes-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 1rem !important;
    overflow: hidden;
}
img, canvas, video, svg { max-width: 100%; height: auto; }

.nes-container.with-title {
    padding-top: 1.2rem !important;
}

/* ============================================
   3. TOP NAV - 顶部导航栏（参考 NES.css 官网风格）
   ============================================ */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #212529;
    border-bottom: 4px solid #212529;
    image-rendering: pixelated;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.nav-inner {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.8rem;
    height: 44px;
    gap: 0.5rem;
}

/* 品牌 */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 13px !important;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-brand i {
    transform: scale(0.45);
    margin: 0 -6px 0 0;
}

.nav-brand:hover {
    color: #92cc41;
}

/* 导航链接 */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.nav-link {
    color: #adafb2;
    text-decoration: none;
    font-size: 14px !important;
    padding: 4px 10px;
    border: 2px solid transparent;
    transition: none;
    white-space: nowrap;
}

.nav-link:hover {
    color: #fff;
    border-color: #555;
}

.nav-link.active {
    color: #92cc41;
    border-color: #92cc41;
}

/* 右侧：登出 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 导航栏内 nes-btn 重置（精简像素风） */
.nav-right .nes-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
}
.nav-right .nes-btn::after {
    display: none !important; /* 移除 NES.css 默认内阴影伪元素 */
}

.nav-logout.nes-btn {
    color: #e76e55 !important;
    text-decoration: none;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border: 2px solid #e76e55 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: none;
    white-space: nowrap;
}

.nav-logout.nes-btn:hover {
    background: #e76e55 !important;
    color: #fff !important;
}

/* 旧侧栏兼容（隐藏） */
.sidebar-nav {
    display: none !important;
}

/* ============================================
   3b. HAMBURGER + DRAWER (mobile nav)
   ============================================ */
.nav-hamburger {
    display: none; /* 桌面隱藏 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 4px;
    z-index: 10001;
}
.nav-hamburger span {
    display: block;
    width: 20px; height: 3px;
    background: #fff;
    transition: transform 0.2s, opacity 0.2s;
    image-rendering: pixelated;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
}
.nav-drawer-backdrop.open { display: block; }

.nav-drawer {
    position: fixed;
    top: 0; right: -220px;
    width: 200px;
    height: 100%;
    background: #212529;
    border-left: 4px solid #92cc41;
    z-index: 10001;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    overflow-y: auto;
    image-rendering: pixelated;
}
.nav-drawer.open { right: 0; }

.drawer-header {
    padding: 14px 12px;
    color: #92cc41;
    font-size: 12px !important;
    font-weight: bold;
    border-bottom: 3px solid #333;
    display: flex;
    align-items: center;
    gap: 4px;
}
.drawer-link {
    display: block;
    padding: 12px 16px;
    color: #adafb2;
    text-decoration: none;
    font-size: 14px !important;
    border-bottom: 1px solid #333;
    transition: none;
}
.drawer-link:hover, .drawer-link:active {
    color: #fff;
    background: #333;
}
.drawer-sep {
    flex: 1;
}
.drawer-logout {
    color: #e76e55 !important;
    border-top: 3px solid #333;
    border-bottom: none;
    margin-top: auto;
}

/* ============================================
   3c. FLOATING ACTION BUTTONS (统一浮动按钮)
   所有右下角浮动按钮共享此样式，确保大小、间距、对齐完全一致
   ============================================ */
.pxq-fab {
    position: fixed;
    right: 10px;
    z-index: 9990;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 3px solid #212529 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    image-rendering: pixelated;
    -webkit-font-smoothing: none !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3) !important;
    opacity: 0.85;
    transition: transform 0.1s;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none;
    box-sizing: border-box !important;
    overflow: hidden;
}
.pxq-fab::before,
.pxq-fab::after {
    display: none !important;   /* 殺死 NES.css 的偽元素 */
    content: none !important;
}
.pxq-fab:hover  { opacity: 1; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,0.3) !important; }
.pxq-fab:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.3) !important; }

/*
   位置槽（bottom = 前一個 bottom + 40 + 8）
   slot-1: 12px   — BGM (M/X)         全站
   slot-2: 60px   — 語言 (EN/CN)      全站
   slot-3: 108px  — 深色模式 (L/D)    全站
   slot-4: 156px  — 簽到球             僅首頁手機端
*/
.pxq-fab-slot-1 { bottom: 12px; }
.pxq-fab-slot-2 { bottom: 60px; }
.pxq-fab-slot-3 { bottom: 108px; }
.pxq-fab-slot-4 { bottom: 156px; }

/* 顏色主題 */
.pxq-fab-bgm     { background: #209cee !important; }
.pxq-fab-lang    { background: #f7d51d !important; color: #212529 !important; }
.pxq-fab-theme   { background: #555 !important; }
.pxq-fab-checkin { background: #212529 !important; position: relative; }

/* 簽到球特殊狀態 */
.pxq-fab-checkin.is-ready {
    animation: pokeBounce 2s ease-in-out infinite;
    border-color: #e76e55 !important;
}
.pxq-fab-checkin.is-ready::after {
    display: flex !important;
    content: '!' !important;
    position: absolute;
    top: -6px; right: -4px;
    background: #e76e55;
    color: #fff;
    font-size: 8px !important;
    width: 14px; height: 14px;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid #212529 !important;
    box-shadow: none !important;
}

/* 精靈球圖標縮放 */
.pxq-fab i {
    transform: scale(0.55);
    margin: -4px;
}

/* slot-4 (簽到球) 默認隱藏，僅首頁手機端顯示 */
.pxq-fab-slot-4 {
    display: none !important;
}
@media (max-width: 480px) {
    .pxq-fab-slot-4.pxq-fab-show {
        display: flex !important;
    }
}

/* 暗色模式下深色按鈕高亮 */
body.dark-theme .pxq-fab-theme {
    background: #f7d51d !important;
    color: #212529 !important;
}

/* ============================================
   4. BRAND LOGO - 统一缩放
   ============================================ */
.brand-logo {
    text-align: center;
    margin-bottom: 0.8rem;
}

/* 缩小 nes-jp-logo / nes-logo 等大型像素画 */
.brand-logo .nes-jp-logo,
.brand-logo .nes-logo,
.brand-logo .nes-snes-logo {
    transform: scale(0.7);
    transform-origin: center;
    display: inline-block;
}

/* 页面标题 */
.brand-logo h1 {
    font-size: 18px !important;
    margin: 0.3rem 0 0 0;
}

.brand-logo h2 {
    font-size: 16px !important;
    margin: 0.3rem 0 0 0;
}

.brand-logo p {
    font-size: 12px !important;
    color: #666;
    margin-top: 0.2rem;
}

/* ============================================
   4.5. SECTION TITLE - NES.css 官网风格 #Title
   参考: https://nostalgic-css.github.io/NES.css/#
   ============================================ */
.section-heading {
    margin: 0.8rem 0 0.4rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 4px solid #212529;
    image-rendering: pixelated;
}

/* 首个 section-heading 贴近顶部 */
.main-container > .section-heading:first-child {
    margin-top: 0.3rem;
}

.section-heading h2 {
    font-size: 18px !important;
    margin: 0 !important;
    color: #212529;
}

.section-heading h2 .hash {
    color: #adafb2;
    margin-right: 2px;
}

.section-heading h3 {
    font-size: 16px !important;
    margin: 0 !important;
    color: #212529;
}

.section-heading h3 .hash {
    color: #adafb2;
    margin-right: 2px;
}

.section-desc {
    font-size: 14px !important;
    color: #666;
    margin: 0.3rem 0 0.5rem 0 !important;
    line-height: 1.6;
}

/* NES容器标题也用同风格 */
.nes-container.with-title > .title .hash {
    color: #adafb2;
    font-size: inherit;
}

/* ============================================
   5. NES-ICON SIZE OVERRIDE + 全局图标规格
   ============================================ */
/* 所有 nes-icon 基准放大（像素风需要清晰可见） */
.nes-icon {
    transform: scale(1.3) !important;
    transform-origin: center;
    image-rendering: pixelated !important;
    vertical-align: middle;
}
.nes-icon.is-small {
    transform: scale(0.9) !important;
}
.nes-icon.is-medium {
    transform: scale(1.6) !important;
}

/* 按钮内图标对齐 */
.nes-btn > .nes-icon,
.nes-btn .nes-icon {
    vertical-align: middle !important;
    margin-right: 6px;
    transform: scale(1.1) !important;
}

/* 属性列表图标固定宽容器 */
.icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    flex-shrink: 0;
}
.icon-slot .nes-icon {
    transform: scale(1.0) !important;
}

/* 像素角色缩放 */
i.nes-mario,
i.nes-ash,
i.nes-pokeball,
i.nes-bulbasaur,
i.nes-charmander,
i.nes-squirtle,
i.nes-kirby,
i.nes-octocat {
    transform: scale(0.8);
    transform-origin: center;
    display: inline-block;
}

/* 小号角色（用于装饰） */
.pokemon-sm {
    transform: scale(0.5) !important;
    transform-origin: center;
    display: inline-block;
    margin: 0 -8px;
}

/* ============================================
   6. SHOP CARDS - 商店通行证卡片（NES 黑框风格）
   ============================================ */
.shop-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0.6rem 0;
}

/* ---- 单张卡片：NES 像素黑框 ---- */
.shop-card {
    position: relative;
    min-width: 0;
    /* NES 经典黑色像素边框 */
    border-style: solid;
    border-width: 4px;
    border-color: #212529;
    border-image-slice: 3;
    border-image-width: 3;
    border-image-outset: 2;
    image-rendering: pixelated;
    background: #fff;
    padding: 8px 8px 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 4px 4px 0 #212529;
}
.shop-card:active {
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 #212529;
}

/* ---- 角标 ---- */
.card-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: #92cc41;
    color: #fff;
    font-size: 10px !important;
    font-weight: bold;
    padding: 2px 8px;
    z-index: 2;
    border-left: 2px solid #212529;
    border-bottom: 2px solid #212529;
}
.card-ribbon.yearly-ribbon {
    background: #e74c3c;
}
/* 新人福利角标 — 绿色闪烁 */
.card-ribbon.ribbon-new {
    background: #f7d51d;
    color: #212529;
    animation: ribbonPulse 2s ease-in-out infinite;
}
@keyframes ribbonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
/* 已领取角标 — 灰色 */
.card-ribbon.ribbon-used {
    background: #888;
    color: #ccc;
}
/* 已领取整张卡片 — 灰化 + 不可交互 */
.shop-card.is-used {
    filter: grayscale(0.85) brightness(0.75);
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}
.shop-card.is-used:hover {
    transform: none;
    box-shadow: none;
}

/* ---- 头部宝可梦 (放大容器，严格对齐) ---- */
.card-head {
    margin: 4px 0 0 0;
    line-height: 0;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-head i {
    transform: scale(0.55);
    transform-origin: center;
}

/* ---- 卡名 (严格固定高度) ---- */
.card-name {
    font-size: 15px !important;
    font-weight: bold;
    margin: 4px 0 2px 0;
    color: #212529;
    height: 24px;
    min-height: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- 稀有度标签 (已移除文字，保留高度占位) ---- */
.card-tier-text {
    font-size: 11px !important;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 4px;
    min-height: 18px;
    line-height: 18px;
}

/* ---- 分割线（NES像素风） ---- */
.card-divider {
    width: 85%;
    height: 0;
    border-top: 3px dashed #ccc;
    margin: 4px auto 6px auto;
    image-rendering: pixelated;
}

/* ---- 属性列表 (严格对齐：固定总高 + 每行固定高) ---- */
.card-attrs {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0;
    width: 100%;
}
.card-attrs li {
    font-size: 13px !important;
    color: #555;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    min-height: 24px;
    line-height: 24px;
}
.card-attrs .icon-slot {
    width: 1.8em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.card-attrs .icon-slot .nes-icon {
    transform: scale(0.7) !important;
}

/* ---- 价格 (严格固定高度) ---- */
.card-price {
    font-size: 20px !important;
    font-weight: bold;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 3px solid #212529;
    width: 80%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

/* ======== 各 tier 默认色（稀有度：绿→蓝→紫→红）======== */
.shop-card.c-trial .card-price  { color: #92cc41; }  /* 绿-普通 */
.shop-card.c-daily .card-price  { color: #209cee; }  /* 蓝-精良 */
.shop-card.c-monthly .card-price { color: #9b59b6; } /* 紫-稀有 */
.shop-card.c-yearly .card-price  { color: #e74c3c; } /* 红-传说 */

/* ======== 选中态 —— 整张卡背景色 + 阴影变化 ======== */
.shop-card.selected {
    transform: translateY(-6px);
}

/* 体验卡 - 绿 (普通) */
.shop-card.c-trial.selected {
    background: #e8ffd6;
    border-color: #5a9e1e;
    box-shadow: 5px 5px 0 #5a9e1e;
}
.shop-card.c-trial.selected .card-name { color: #3a7d0a; }
.shop-card.c-trial.selected .card-divider { border-top-color: #92cc41; }
.shop-card.c-trial.selected .card-attrs li { color: #3a7d0a; }
.shop-card.c-trial.selected .card-price { border-top-color: #5a9e1e; }

/* 日卡 - 蓝 (精良) */
.shop-card.c-daily.selected {
    background: #d4edfc;
    border-color: #1479c4;
    box-shadow: 5px 5px 0 #1479c4;
}
.shop-card.c-daily.selected .card-name { color: #0e5fa1; }
.shop-card.c-daily.selected .card-divider { border-top-color: #209cee; }
.shop-card.c-daily.selected .card-attrs li { color: #0e5fa1; }
.shop-card.c-daily.selected .card-price { border-top-color: #1479c4; }

/* 月卡 - 紫 (稀有) */
.shop-card.c-monthly.selected {
    background: #f0e6f6;
    border-color: #8e44ad;
    box-shadow: 5px 5px 0 #8e44ad;
}
.shop-card.c-monthly.selected .card-name { color: #6c3483; }
.shop-card.c-monthly.selected .card-divider { border-top-color: #9b59b6; }
.shop-card.c-monthly.selected .card-attrs li { color: #6c3483; }
.shop-card.c-monthly.selected .card-price { border-top-color: #8e44ad; }

/* 年卡 - 红 (传说) */
.shop-card.c-yearly.selected {
    background: #fde8e8;
    border-color: #c0392b;
    box-shadow: 5px 5px 0 #c0392b;
}
.shop-card.c-yearly.selected .card-name { color: #922b21; }
.shop-card.c-yearly.selected .card-divider { border-top-color: #e74c3c; }
.shop-card.c-yearly.selected .card-attrs li { color: #922b21; }
.shop-card.c-yearly.selected .card-price { border-top-color: #c0392b; }

/* ---- 选中弹跳 ---- */
@keyframes cardPop {
    0%   { transform: translateY(-6px) scale(1); }
    25%  { transform: translateY(-6px) scale(1.06); }
    50%  { transform: translateY(-6px) scale(0.97); }
    100% { transform: translateY(-6px) scale(1); }
}
.shop-card.bounce {
    animation: cardPop 0.35s steps(6);
}

/* Flex spacer - 强制价格底部对齐 */
.card-spacer {
    flex: 1;
}

/* 角标固定宽度 */
.card-ribbon {
    min-width: 44px;
    text-align: center;
}
/* 隐形角标占位（无角标的卡片保持高度对齐） */
.card-ribbon-placeholder {
    position: absolute;
    top: 0; right: 0;
    min-width: 44px;
    padding: 2px 8px;
    visibility: hidden;
    font-size: 10px !important;
}

/* ---- 响应式：窄屏 2 列 / 极窄 1 列 ---- */
@media (max-width: 720px) {
    .shop-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
@media (max-width: 420px) {
    .shop-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* 兼容旧 nes-table */
.plan-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.nes-table {
    table-layout: fixed !important;
    width: 100% !important;
    word-wrap: break-word !important;
    border-collapse: collapse;
}

/* 商店表格列宽（仅限非日历表格）—— 严格固定 % */
.nes-table:not(.cal-table) thead th:nth-child(1),
.nes-table:not(.cal-table) tbody td:nth-child(1) { width: 30% !important; }
.nes-table:not(.cal-table) thead th:nth-child(2),
.nes-table:not(.cal-table) tbody td:nth-child(2) { width: 18% !important; }
.nes-table:not(.cal-table) thead th:nth-child(3),
.nes-table:not(.cal-table) tbody td:nth-child(3) { width: 22% !important; }
.nes-table:not(.cal-table) thead th:nth-child(4),
.nes-table:not(.cal-table) tbody td:nth-child(4) { width: 30% !important; }

.nes-table:not(.cal-table) td, .nes-table:not(.cal-table) th {
    vertical-align: middle !important;
    text-align: center !important;
    padding: 0.5rem 0.4rem !important;
    word-break: break-word;
    font-size: 14px !important;
}

.nes-table:not(.cal-table) th {
    font-size: 14px !important;
}

/* ============================================
   7. PLAN ROW - 选中态
   ============================================ */
/* (旧 plan-row 已废弃，使用 shop-card 替代) */

/* ============================================
   8. PLAN NAME & BADGES
   ============================================ */
/* (旧 plan-name 已废弃，使用 card-name 替代) */

/* (星星图标已全局移除) */

/* (旧 price-badge 已废弃，使用 card-price) */

.best-value {
    background-color: #f7d51d !important;
    color: #212529 !important;
    padding: 0.1rem 0.4rem;
    font-size: 10px !important;
    margin-left: 0.2rem;
    display: inline-block;
}

/* ============================================
   9. DIALOG - 绝对居中
   ============================================ */
dialog.nes-dialog, .nes-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    /* width/max-width 不加 !important，允许子页面按需覆盖 */
    width: 88%;
    max-width: 560px;
    min-width: 280px;
    padding: 1.2rem;
    border: 4px solid #212529;
    background: #fff;
    z-index: 9999 !important;
    overflow-y: auto;
    max-height: 88vh;
}

dialog::backdrop { background-color: rgba(0,0,0,0.7); }
dialog .title { font-size: 18px !important; margin-bottom: 0.8rem; text-align: center; }
dialog p { font-size: 15px !important; line-height: 1.6; margin-bottom: 0.6rem; }

.dialog-buttons {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.dialog-buttons .nes-btn {
    font-size: 14px !important;
    padding: 6px 14px !important;
    min-width: 110px;
}

/* ============================================
   10. FORM ELEMENTS
   ============================================ */
.nes-field { margin-bottom: 0.8rem; }
.nes-field label { display: block; margin-bottom: 0.3rem; font-size: 13px !important; }

.nes-input, .nes-textarea {
    width: 100%;
    font-size: 14px !important;
    padding: 0.5rem !important;
}

#verification-code, #trial-email {
    text-align: center;
    font-size: 18px !important;
    padding: 0.6rem !important;
    letter-spacing: 4px;
}

/* ============================================
   11. PAYMENT INFO
   ============================================ */
.payment-info {
    background-color: #f0f0f0;
    padding: 1rem;
    margin: 0.5rem 0;
    border: 3px solid #212529;
}

.payment-amount {
    font-size: 20px !important;
    color: #e76e55;
    text-align: center;
    margin: 0.5rem 0;
    font-weight: bold;
}

.wallet-address {
    word-break: break-all;
    font-size: 11px !important;
    background: #fff;
    padding: 0.5rem;
    border: 2px solid #212529;
    margin: 0.3rem 0;
    font-family: 'Courier New', monospace !important;
}

#qrcode-container {
    display: flex;
    justify-content: center;
    margin: 0.8rem 0;
}

#qrcode-container canvas, #qrcode-container img {
    image-rendering: pixelated !important;
}

/* ============================================
   12. UTILITY
   ============================================ */
.hidden { display: none !important; }
.text-center { text-align: center !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-2 { margin-top: 0.6rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 0.6rem !important; }

/* ============================================
   13. ANIMATIONS
   ============================================ */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.loading { animation: blink 1s infinite; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}
.error-shake { animation: shake 0.5s; }

/* ============================================
   14. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .main-container, .container {
        width: 100%;
    }
    .brand-logo .nes-jp-logo,
    .brand-logo .nes-logo {
        transform: scale(0.5);
    }
    /* 小屏导航 — 汉堡模式已接管，无需再调整链接尺寸 */
    .nav-inner {
        padding: 0 0.4rem;
        gap: 0.3rem;
    }
}

/* ============================================
   15. BUTTON ACTIVE STATE
   ============================================ */
.nes-btn:active {
    transform: translateY(3px);
    box-shadow: inset 0 0 0 3px #212529;
}

/* 自定义紫色按钮（NES.css 无内建） */
.nes-btn.is-purple {
    color: #fff;
    background-color: #9b59b6;
}
.nes-btn.is-purple::after {
    position: absolute;
    top: -4px; right: -4px; bottom: -4px; left: -4px;
    content: "";
    box-shadow: inset -4px -4px #7d3c98;
    pointer-events: none;
}
.nes-btn.is-purple:hover {
    background-color: #a66bbe;
    color: #fff;
}
.nes-btn.is-purple:active {
    background-color: #7d3c98;
}

/* ============================================
   16. DASHBOARD GRID (紧凑双列)
   ============================================ */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 0.6rem 0;
}

.dash-grid .nes-container {
    padding: 0.6rem !important;
}

@media (max-width: 600px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
}

.progress-wrapper {
    margin: 0.4rem 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    font-size: 12px !important;
}

.nes-progress {
    margin: 0.3rem 0;
}

/* QR二维码包装 */
.qr-wrapper {
    background: #fff;
    padding: 0.5rem;
    display: inline-block;
    border: 3px solid #212529;
}

/* ============================================
   17. CHAT (SUPPORT PAGE)
   ============================================ */
.message { margin: 0.6rem 0; }
.message-bot, .message-user {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}
.message-user { flex-direction: row-reverse; }
.nes-balloon { max-width: 70%; }

/* ============================================
   18. LINK CONSOLE (GET_LINK PAGE)
   ============================================ */
.link-console {
    background-color: #000;
    color: #00ff00;
    border: 3px solid #212529;
    padding: 0.6rem;
    word-break: break-all;
    font-size: 11px !important;
    font-family: 'Courier New', monospace !important;
    max-height: 150px;
    overflow-y: auto;
    cursor: pointer;
}

/* ============================================
   19. NO LAYOUT SHIFT
   ============================================ */
html {
    overflow-y: scroll;
}
body {
    overflow-x: hidden;
}

/* ============================================
   20. SECTION TITLE ICON
   ============================================ */
.nes-container.with-title > .title {
    font-size: 16px !important;
}

.nes-container.with-title > .title .nes-icon {
    transform: scale(0.7) !important;
    vertical-align: middle;
}

/* ============================================
   21. (点赞功能已移除)
   ============================================ */

/* 22. THEME TOGGLE — 已遷移至浮動按鈕 .pxq-fab-theme */

/* ============================================
   23. 暗色主题 - 深蓝夜色 (dark-theme)
   ============================================ */
body.dark-theme {
    --c-bg: #0c0e1a;
    --c-text: #c8ccd4;
    --c-text-secondary: #8e94a0;
    --c-text-muted: #555b6e;
    --c-border: #3a3f52;
    --c-border-light: #2a2e3e;
    --c-surface: #161929;
    --c-green: #92cc41;
    --c-blue: #209cee;
    --c-red: #e76e55;
    --c-yellow: #f7d51d;
    --c-purple: #9b59b6;
    --c-dark: #0c0e1a;
    --c-nav-bg: #0c0e1a;

    background-color: #0c0e1a !important;
    color: #c8ccd4 !important;
}

/* 暗色 导航栏 */
body.dark-theme .top-nav {
    background: #0c0e1a;
    border-bottom-color: #2a2e3e;
}
body.dark-theme .nav-brand,
body.dark-theme .nav-brand:hover {
    color: #c8ccd4;
}
body.dark-theme .nav-link {
    color: #555b6e;
}
body.dark-theme .nav-link:hover,
body.dark-theme .nav-link.active {
    color: #c8ccd4;
    border-color: #3a3f52;
}
body.dark-theme .nav-logout {
    color: #e76e55;
    border-color: #3a3f52;
}
body.dark-theme .nav-logout:hover {
    background: #e76e55;
    color: #fff;
}
body.dark-theme .nav-drawer {
    background: #0c0e1a;
    border-left-color: #3a3f52;
}
body.dark-theme .drawer-header {
    border-bottom-color: #2a2e3e;
}
body.dark-theme .drawer-link {
    color: #8e94a0;
    border-bottom-color: #1a1e2e;
}
body.dark-theme .drawer-link:hover {
    color: #fff;
    background: #1a1e2e;
}
body.dark-theme .nav-hamburger span {
    background: #c8ccd4;
}

/* 暗色 容器 */
body.dark-theme .nes-container {
    background: #161929;
    border-color: #3a3f52;
    color: #c8ccd4;
}
body.dark-theme .nes-container.is-dark {
    background: #0c0e1a;
    border-color: #3a3f52;
    color: #c8ccd4;
}
body.dark-theme .nes-container.is-rounded {
    border-color: #3a3f52;
}

/* 暗色 按钮 */
body.dark-theme .nes-btn {
    background: #2a2e3e;
    color: #c8ccd4;
    box-shadow: inset -4px -4px #1a1d2e;
}
body.dark-theme .nes-btn:hover {
    background: #3a3f52;
    color: #fff;
}
body.dark-theme .nes-btn.is-primary { background: #1a6dbd; color: #fff; }
body.dark-theme .nes-btn.is-success { background: #5a9e1e; color: #fff; }
body.dark-theme .nes-btn.is-warning { background: #c4a800; color: #212529; }
body.dark-theme .nes-btn.is-error { background: #c0392b; color: #fff; }
body.dark-theme .nes-btn.is-purple { background: #7d3c98; color: #fff; }

/* 暗色 文字 */
body.dark-theme p,
body.dark-theme span,
body.dark-theme strong,
body.dark-theme div,
body.dark-theme label,
body.dark-theme li,
body.dark-theme td,
body.dark-theme th,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3 {
    color: #c8ccd4 !important;
}

/* 暗色 section heading */
body.dark-theme .section-heading {
    border-bottom-color: #3a3f52;
}
body.dark-theme .section-heading h2 .hash,
body.dark-theme .section-heading h3 .hash {
    color: #555b6e;
}
body.dark-theme .section-desc {
    color: #8e94a0 !important;
}

/* 暗色 输入框 */
body.dark-theme .nes-input,
body.dark-theme .nes-textarea {
    background: #0c0e1a;
    border-color: #3a3f52;
    color: #c8ccd4;
}

/* 暗色 进度条 */
body.dark-theme .nes-progress {
    border-color: #3a3f52;
}

/* 暗色 表格 */
body.dark-theme .nes-table {
    border-color: #3a3f52;
}
body.dark-theme .nes-table td,
body.dark-theme .nes-table th {
    border-color: #3a3f52;
    background: #161929;
}

/* 暗色 商店卡片 */
body.dark-theme .shop-card {
    background: #161929;
    border-color: #3a3f52;
}
body.dark-theme .shop-card:hover {
    box-shadow: 4px 4px 0 #3a3f52;
}
body.dark-theme .shop-card.selected {
    background: #1e2236;
    border-color: #5a6080;
    box-shadow: 5px 5px 0 #3a3f52;
}
body.dark-theme .card-name { color: #c8ccd4 !important; }
body.dark-theme .card-attrs li { color: #8e94a0 !important; }
body.dark-theme .card-divider {
    border-top-color: #3a3f52;
}

/* 暗色 链接 */
body.dark-theme a {
    color: #209cee;
}

/* 暗色 对话框 */
body.dark-theme .nes-dialog,
body.dark-theme dialog.nes-dialog {
    background: #161929;
    border-color: #3a3f52;
    color: #c8ccd4;
}

/* 暗色 像素地图 */
body.dark-theme .pixel-map-wrap {
    background: #060810;
    border-color: #3a3f52;
}
body.dark-theme .continent {
    background: #1e2a42;
}
body.dark-theme .node-tooltip {
    background: #0c0e1a;
    border-color: #92cc41;
    color: #92cc41;
}

/* 暗色 XP 等级区 */
body.dark-theme .xp-level-text { color: #c8ccd4 !important; }
body.dark-theme .xp-level-text .xp-lv { color: #f7d51d !important; }
body.dark-theme .xp-level-text .xp-title { color: #8e94a0 !important; }
body.dark-theme .xp-bar-nums { color: #8e94a0 !important; }
body.dark-theme .xp-bar-nums span { color: #8e94a0 !important; }
body.dark-theme .xp-status-hint { color: #92cc41 !important; }
body.dark-theme .xp-status-hint.paused { color: #e76e55 !important; }
body.dark-theme .xp-sprite-slot .xp-no-pokemon { color: #555b6e !important; }
body.dark-theme .partner-col {
    background: #0c0e1a !important;
    border-color: #3a3f52 !important;
}
body.dark-theme .hub-meta { border-bottom-color: #3a3f52; }
body.dark-theme .hub-meta .hub-date { color: #8e94a0 !important; }
body.dark-theme .bar-value { color: #8e94a0 !important; }
body.dark-theme .partner-flavor { color: #555b6e !important; }

/* 暗色 卡包卡片 */
body.dark-theme .inv-slot {
    background: #161929 !important;
    border-color: #3a3f52 !important;
}
body.dark-theme .inv-slot.has-card:hover {
    box-shadow: 3px 3px 0 #5a6080;
}
body.dark-theme .inv-slot .card-name-label { color: #c8ccd4 !important; }
body.dark-theme .inv-slot .card-brief { color: #8e94a0 !important; }
body.dark-theme .inv-slot .card-sep { border-top-color: #3a3f52 !important; }
body.dark-theme .inv-slot:not(.has-card) { border-color: #2a2e3e !important; }
body.dark-theme .inv-slot .slot-empty { color: #3a3f52 !important; }
body.dark-theme .inv-slot .slot-empty-label { color: #3a3f52 !important; }

/* 暗色 主题切换 — 已遷移至浮動按鈕 */

/* ============================================
   24. MOBILE-FIRST RESPONSIVE
   完整移动端适配 (320px ~ 768px)
   ============================================ */

/* ---------- 平板 (≤768px) ---------- */
@media (max-width: 768px) {
    /* 基础字号缩小 */
    body, input, span, div, td, th, button, select, textarea, label, p, a, li {
        font-size: 14px !important;
    }

    body {
        padding-top: 46px;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }

    /* 导航栏 → 汉堡菜单模式 */
    .top-nav {
        border-bottom-width: 3px;
    }
    .nav-inner {
        height: 40px;
        padding: 0 0.5rem;
        gap: 0.3rem;
    }
    .nav-brand {
        font-size: 11px !important;
        gap: 3px;
    }
    .nav-brand i {
        transform: scale(0.35);
        margin-right: -6px;
    }
    .nav-brand span {
        display: inline !important; /* 恢復品牌名 */
        font-size: 11px !important;
    }
    .nav-desktop {
        display: none !important; /* 隱藏桌面端鏈接和登出 */
    }
    .nav-hamburger {
        display: flex !important; /* 顯示漢堡按鈕 */
    }

    /* 容器满宽 */
    .main-container, .container {
        width: 100%;
        padding: 0 0.2rem;
    }

    /* NES 容器内边距缩小 */
    .nes-container {
        padding: 0.7rem !important;
    }
    .nes-container.with-title {
        padding-top: 1rem !important;
    }

    /* 标题缩小 */
    .section-heading h2 {
        font-size: 15px !important;
    }
    .section-heading h3 {
        font-size: 14px !important;
    }
    .brand-logo h1 {
        font-size: 15px !important;
    }
    .brand-logo h2 {
        font-size: 14px !important;
    }
    .brand-logo p {
        font-size: 11px !important;
    }

    /* 商店卡片 */
    .shop-card {
        padding: 6px 6px 8px 6px;
    }
    .card-head {
        height: 56px;
        min-height: 56px;
        max-height: 56px;
    }
    .card-head i {
        transform: scale(0.45);
    }
    .card-name {
        font-size: 13px !important;
        height: 20px;
        min-height: 20px;
        line-height: 20px;
    }
    .card-attrs li {
        font-size: 11px !important;
        height: 20px;
        min-height: 20px;
        line-height: 20px;
    }
    .card-price {
        font-size: 16px !important;
        height: 26px;
        line-height: 26px;
    }
    .card-ribbon {
        font-size: 9px !important;
        padding: 1px 5px;
    }

    /* 对话框 */
    dialog.nes-dialog, .nes-dialog {
        width: 94%;
        padding: 0.8rem;
        max-height: 85vh;
    }
    dialog .title {
        font-size: 15px !important;
    }
    dialog p {
        font-size: 13px !important;
    }
    .dialog-buttons .nes-btn {
        font-size: 12px !important;
        padding: 5px 10px !important;
        min-width: 90px;
    }

    /* 仪表盘网格 */
    .dash-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .dash-grid .nes-container {
        padding: 0.5rem !important;
    }

    /* 进度条标签 */
    .progress-label {
        font-size: 11px !important;
    }

    /* 按钮 */
    .nes-btn {
        font-size: 13px !important;
        padding: 5px 10px !important;
    }

    /* 表单 */
    .nes-input, .nes-textarea {
        font-size: 13px !important;
        padding: 0.4rem !important;
    }
    .nes-field label {
        font-size: 12px !important;
    }

    /* 支付信息 */
    .payment-amount {
        font-size: 17px !important;
    }
    .wallet-address {
        font-size: 10px !important;
        padding: 0.4rem;
    }

    /* 聊天气泡 */
    .nes-balloon {
        max-width: 85%;
    }

    /* 图标缩小 */
    .nes-icon {
        transform: scale(1.0) !important;
    }
    .nes-icon.is-medium {
        transform: scale(1.2) !important;
    }

    /* 表格 */
    .nes-table:not(.cal-table) td,
    .nes-table:not(.cal-table) th {
        font-size: 12px !important;
        padding: 0.3rem 0.2rem !important;
    }

    /* 链接控制台 */
    .link-console {
        font-size: 10px !important;
    }

    /* 容器标题 */
    .nes-container.with-title > .title {
        font-size: 14px !important;
    }
}

/* ---------- 手机 (≤480px) ---------- */
@media (max-width: 480px) {
    body, input, span, div, td, th, button, select, textarea, label, p, a, li {
        font-size: 13px !important;
    }

    body {
        padding-top: 42px;
    }

    /* 导航极简化 */
    .nav-inner {
        height: 36px;
        padding: 0 0.3rem;
    }
    .nav-brand {
        font-size: 10px !important;
    }
    .nav-brand i {
        transform: scale(0.3);
    }

    /* 标题 */
    .section-heading h2 {
        font-size: 14px !important;
    }
    .section-heading h3 {
        font-size: 13px !important;
    }
    .brand-logo h1 {
        font-size: 14px !important;
    }
    .brand-logo .nes-jp-logo,
    .brand-logo .nes-logo {
        transform: scale(0.4);
    }

    /* 商店卡片 */
    .shop-cards {
        gap: 8px;
    }
    .card-head {
        height: 48px;
        min-height: 48px;
        max-height: 48px;
    }
    .card-head i {
        transform: scale(0.4);
    }
    .card-name {
        font-size: 12px !important;
    }
    .card-attrs li {
        font-size: 10px !important;
        height: 18px;
        min-height: 18px;
        line-height: 18px;
    }
    .card-price {
        font-size: 14px !important;
        border-top-width: 2px;
    }

    /* 对话框 */
    dialog.nes-dialog, .nes-dialog {
        width: 96%;
        min-width: 260px;
        padding: 0.6rem;
    }
    dialog .title {
        font-size: 14px !important;
    }
    dialog p {
        font-size: 12px !important;
    }
    .dialog-buttons {
        gap: 0.3rem;
    }
    .dialog-buttons .nes-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-width: 75px;
    }

    /* NES 容器 */
    .nes-container {
        padding: 0.5rem !important;
        border-width: 3px;
    }

    /* 按钮 */
    .nes-btn {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    /* 像素精灵缩放 */
    i.nes-mario, i.nes-ash, i.nes-pokeball,
    i.nes-bulbasaur, i.nes-charmander, i.nes-squirtle,
    i.nes-kirby, i.nes-octocat {
        transform: scale(0.6);
    }

    /* 像素角色装饰 */
    .pokemon-sm {
        transform: scale(0.4) !important;
        margin: 0 -10px;
    }

    /* 表格紧凑 */
    .nes-table:not(.cal-table) td,
    .nes-table:not(.cal-table) th {
        font-size: 11px !important;
        padding: 0.2rem 0.15rem !important;
    }

    /* 进度条 */
    .progress-label {
        font-size: 10px !important;
    }

    /* 验证码输入 */
    #verification-code, #trial-email {
        font-size: 15px !important;
        letter-spacing: 2px;
    }
}

/* ---------- 极小屏 (≤360px) ---------- */
@media (max-width: 360px) {
    body, input, span, div, td, th, button, select, textarea, label, p, a, li {
        font-size: 12px !important;
    }

    .nav-link {
        font-size: 8px !important;
        padding: 2px 2px;
    }

    .shop-cards {
        grid-template-columns: 1fr !important;
    }

    .card-price {
        font-size: 13px !important;
    }

    dialog.nes-dialog, .nes-dialog {
        width: 98%;
        padding: 0.5rem;
    }

    .dialog-buttons .nes-btn {
        min-width: 65px;
        font-size: 10px !important;
    }
}

/* ---------- 全局移动端触摸优化 ---------- */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备：增大可点击区域 */
    .nav-link {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }
    .nes-btn {
        min-height: 36px;
    }

    /* 禁用 hover 效果（避免触摸后残留） */
    .shop-card:hover {
        transform: none;
        box-shadow: none;
    }
    .shop-card.selected:hover {
        transform: translateY(-6px);
    }

    /* 平滑滚动 */
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- 横屏手机优化 ---------- */
@media (max-height: 480px) and (orientation: landscape) {
    body {
        padding-top: 38px;
    }
    .nav-inner {
        height: 34px;
    }
    dialog.nes-dialog, .nes-dialog {
        max-height: 80vh;
    }
}