/* === 登录/注册 === */
.auth-box{background:rgba(18,24,52,.95);border:2px solid #2b3358;border-radius:18px;padding:24px 18px;box-shadow:0 12px 30px #0006;margin-top:20px}
.auth-tabs{display:flex;gap:6px;background:#0f1530;border-radius:12px;padding:4px;margin:0 0 16px}
.auth-tab{flex:1;border:0;background:transparent;color:#94a3b8;padding:10px;border-radius:9px;font-size:14px;font-weight:700;transition:.15s}
.auth-tab.active{background:linear-gradient(180deg,#8b5cf6,#6d3df5);color:#fff;box-shadow:0 2px 6px #0005}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:12px;color:#a5b4fc;margin-bottom:6px;font-weight:700}
.field input{width:100%;padding:12px 14px;background:#151a38;border:2px solid #2b3358;border-radius:10px;color:#fff;font-size:15px;outline:none;transition:.15s}
.field input:focus{border-color:#7c3aed}
.auth-error{background:#7f1d1d33;border:1px solid #dc2626;color:#fca5a5;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13px}
.auth-hint{color:#94a3b8;font-size:12px;margin:8px 0;line-height:1.6}
.auth-extra{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px}
.auth-extra .dot{color:#475569}
.link{background:transparent;border:0;color:#a5b4fc;font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer}
.link:hover{background:#2b3358;color:#fff}
.auth-user-bar{display:flex;justify-content:space-between;align-items:center;background:#151a38;border-radius:10px;padding:8px 12px;margin-bottom:14px;font-size:13px;color:#94a3b8}

/* === 像素挂机 · 主题 === */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#080c1d;color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}
body{background:radial-gradient(circle at 50% -10%,#30205f 0,#11162e 45%,#080c1d 100%);min-height:100vh}
button{font:inherit;cursor:pointer}

/* 像素字体 */
.pixel-title,.pixel-title-sm,.job-icon,.modal-box h2{
  font-family:"Courier New",ui-monospace,monospace;
  letter-spacing:1px;
  text-shadow:2px 2px 0 #000,-1px -1px 0 #000;
}

/* 创建角色界面 */
.screen{padding:16px 14px 90px;max-width:760px;margin:0 auto;min-height:100vh}
.hidden{display:none!important}

.create-box{background:rgba(18,24,52,.95);border:2px solid #2b3358;border-radius:18px;padding:24px 18px;box-shadow:0 12px 30px #0006;margin-top:20px}
.pixel-title{font-size:36px;text-align:center;margin:0 0 6px;color:#c4b5fd;letter-spacing:2px}
.subtitle{text-align:center;color:#94a3b8;margin:0 0 20px;font-size:13px}
#nameInput{width:100%;padding:14px;background:#151a38;border:2px solid #2b3358;border-radius:12px;color:#fff;font-size:16px;margin-bottom:18px;outline:none}
#nameInput:focus{border-color:#7c3aed}

.job-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.job-card{background:#151a38;border:2px solid #2b3358;border-radius:14px;padding:14px 12px;cursor:pointer;transition:.2s;text-align:center}
.job-card:hover,.job-card.selected{border-color:#7c3aed;transform:translateY(-3px);box-shadow:0 8px 18px #7c3aed55}
.job-icon{width:64px;height:64px;margin:0 auto 8px;display:grid;place-items:center;image-rendering:pixelated}
.job-name{font-size:18px;font-weight:800;margin-bottom:4px}
.job-desc{font-size:12px;color:#94a3b8;margin-bottom:6px}
.job-stats{font-size:12px;color:#a5b4fc;margin-bottom:4px}
.job-skill{font-size:11px;color:#fbbf24;margin-top:4px}

.primary{width:100%;border:0;border-radius:13px;padding:14px;background:linear-gradient(180deg,#8b5cf6,#6d3df5);color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 0 #4c1d95;transition:.1s}
.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #4c1d95}
.hint{font-size:12px;color:#64748b;text-align:center;margin:14px 4px 0;line-height:1.6}

/* 顶部 */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pixel-title-sm{font-size:22px;margin:0;color:#c4b5fd;letter-spacing:1px}
.pill{border:1px solid #353d69;background:#151a38;border-radius:999px;padding:8px 12px;color:#c4b5fd;font-weight:700;font-size:13px}

/* 卡片 */
.card{background:rgba(18,24,52,.95);border:1px solid #2b3358;border-radius:18px;margin-bottom:12px;overflow:hidden;box-shadow:0 12px 30px #0003}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.small{font-size:13px;color:#a5b4fc;margin-top:7px}

/* 状态卡 */
.stats{padding:14px 16px}
#level{font-size:18px;color:#c4b5fd}
#jobTag{font-size:13px;color:#fbbf24;background:#fbbf2420;padding:3px 8px;border-radius:99px}
#kills{font-size:13px;color:#94a3b8}

.bar{position:relative;height:18px;background:#252b4b;border-radius:99px;margin:6px 0;overflow:hidden;border:1px solid #1a1f3a}
.bar-fill{height:100%;border-radius:99px;transition:width .25s}
.bar-fill.hp{background:linear-gradient(90deg,#ef4444,#f87171)}
.bar-fill.mp{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.bar-fill.xp{background:linear-gradient(90deg,#a855f7,#c084fc)}
.bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;text-shadow:1px 1px 0 #000}

/* 战斗 arena */
.arena{padding:10px}
canvas{display:block;width:100%;height:auto;border-radius:13px;background:linear-gradient(180deg,#1a1f3a 0%,#0f1530 100%);border:1px solid #2b3358;image-rendering:pixelated;image-rendering:crisp-edges}
.monster-info{text-align:center;color:#cbd5e1;font-size:13px;padding:10px 4px 4px;font-weight:600}
.arena-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin-top:8px}
.arena-actions button{border:0;border-radius:11px;padding:12px 6px;color:#fff;font-weight:800;font-size:13px;transition:.1s}
.skill{background:linear-gradient(180deg,#f59e0b,#d97706);box-shadow:0 3px 0 #92400e}
.skill:active{transform:translateY(2px);box-shadow:0 1px 0 #92400e}
.switch{background:#2b3358;box-shadow:0 3px 0 #1a1f3a}
.switch:active{transform:translateY(2px);box-shadow:0 1px 0 #1a1f3a}

/* 战斗日志 */
h2{font-size:15px;margin:0;padding:14px 16px 7px;color:#c4b5fd}
.log{height:170px;overflow:auto;padding:0 16px 14px;color:#cbd5e1;font-size:13px;line-height:1.65}
.log div{padding:2px 0;border-bottom:1px solid #94a3b80f}
.log .lvl{color:#fbbf24;font-weight:700}
.log .gold{color:#facc15}
.log .dmg{color:#f87171}
.log .crit{color:#fb923c;font-weight:700}
.log .heal{color:#86efac}
.log .info{color:#94a3b8}
.log .skill{color:#c084fc;font-weight:700}

/* 底部 nav */
.nav{position:fixed;z-index:5;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:#080c1df2;border-top:1px solid #252b4b;padding:8px 8px max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
.nav button{border:0;background:transparent;color:#94a3b8;display:grid;place-items:center;gap:2px;padding:5px;font-size:18px}
.nav span{font-size:11px}
.nav .active{color:#c4b5fd}

/* 弹层 */
.modal{position:fixed;inset:0;background:#000000a8;z-index:20;display:grid;place-items:center;padding:14px;backdrop-filter:blur(4px)}
.modal-box{background:#11162e;border:2px solid #2b3358;border-radius:18px;width:100%;max-width:520px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column}
.modal-box header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #2b3358}
.modal-box h2{margin:0;padding:0;font-size:18px}
#modalClose{background:transparent;border:0;color:#94a3b8;font-size:18px;padding:4px 8px}
#modalBody{overflow:auto;padding:14px 18px;flex:1}
.modal-box.offline{max-width:400px;padding:24px;text-align:center}
.modal-box.offline h2{font-size:22px;margin-bottom:6px;padding:0}
.modal-box.offline p{color:#94a3b8;margin:0 0 12px}
.offline-reward{background:#151a38;border-radius:12px;padding:14px;margin:14px 0;font-size:15px;line-height:1.8;text-align:left}

/* 列表样式 */
.list-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#151a38;border:1px solid #2b3358;border-radius:10px;margin-bottom:6px;gap:10px}
.list-row .name{font-weight:700}
.list-row .small2{font-size:11px;color:#94a3b8}
.list-row button{border:0;background:#6d3df5;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px}
.list-row button.gray{background:#2b3358;color:#94a3b8}
.list-row button.warn{background:#dc2626}

.zone-card{background:#151a38;border:2px solid #2b3358;border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.15s}
.zone-card:hover{border-color:#7c3aed;transform:translateX(2px)}
.zone-card.active{border-color:#22c55e;background:#22c55e15}
.zone-info .name{font-weight:700;font-size:15px;margin-bottom:4px}
.zone-info .desc{font-size:12px;color:#94a3b8}
.zone-lv{background:#2b3358;padding:5px 10px;border-radius:99px;font-size:13px;font-weight:700;color:#fbbf24}

.equip-card{display:flex;align-items:center;gap:12px;padding:12px;background:#151a38;border:1px solid #2b3358;border-radius:12px;margin-bottom:8px}
.equip-icon{width:48px;height:48px;border-radius:8px;background:#0f1530;display:grid;place-items:center;flex-shrink:0}
.equip-info{flex:1;min-width:0}
.equip-info .n{font-weight:700;margin-bottom:3px}
.equip-info .s{font-size:12px;color:#94a3b8}
.equip-actions{display:flex;flex-direction:column;gap:5px}
.equip-actions button{border:0;padding:6px 10px;border-radius:7px;font-size:11px;color:#fff;background:#6d3df5;white-space:nowrap}
.equip-actions button.gray{background:#2b3358;color:#94a3b8}
.equip-actions button.warn{background:#dc2626}

.rarity-c{color:#94a3b8}
.rarity-u{color:#22c55e}
.rarity-r{color:#3b82f6}
.rarity-sr{color:#c084fc}
.rarity-l{color:#fbbf24}

@media(max-width:480px){
  .pixel-title{font-size:28px}
  .job-pick{grid-template-columns:1fr}
  .arena-actions{grid-template-columns:1fr;gap:6px}
}
/* 邮箱验证码注册流程 */
.auth-code-target{display:block;margin-top:7px;color:#9aa4c7;font-size:12px;word-break:break-all}
.auth-verify-actions{display:grid;gap:10px}
.verify-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
#authCode{letter-spacing:.18em;font-weight:700}