/* ============================================================
   方块幸存者 · 像素风 UI
   ============================================================ */
:root{
  --ink:#1b1424;          /* 描边主色 */
  --ink2:#2f2440;         /* 描边次色（底部厚度） */
  --paper:#f6f0df;        /* 米白面板 */
  --paper2:#e6dcc4;
  --white:#ffffff;

  --red:#e8433f;   --red-d:#a82522;
  --green:#3fb95a; --green-d:#237a35;
  --blue:#3d8fe0;  --blue-d:#1f5fa8;
  --purple:#9b5de5;--purple-d:#6a35a8;
  --yellow:#ffc93c;--yellow-d:#c89410;

  --text:#2a2233;
  --text-dim:#6b6278;
  --text-mute:#9a92a8;

  --bd:3px;
  --bd2:2.5px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  background:#0b0f0a;
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font-family:inherit;}
[hidden]{display:none !important;}
.hidden{display:none !important;}

/* ==================== 背景 ==================== */
.bg-layer{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 45% at 20% 10%, rgba(74,120,58,.35), transparent 62%),
    radial-gradient(ellipse 55% 42% at 82% 16%, rgba(52,90,52,.3), transparent 62%),
    radial-gradient(ellipse 85% 55% at 50% 108%, rgba(30,64,30,.5), transparent 70%),
    linear-gradient(180deg,#12200f 0%,#0d160c 45%,#070b06 100%);
}
/* 像素方格纹理 */
.bg-trees{
  position:fixed;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(0,0,0,.32) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.32) 2px, transparent 2px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.1) 60%,rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.1) 60%,rgba(0,0,0,.6));
}
.bg-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 66% at 50% 44%, transparent 28%, rgba(0,0,0,.78) 100%);
}

.screen{display:none;}
.screen.show{display:block;}

/* ==================== 菜单框架 ==================== */
#menu{position:relative;z-index:2;height:100%;overflow:hidden;}
.wrap{
  height:100%;max-width:1260px;margin:0 auto;
  padding:20px 24px 18px;
  display:flex;flex-direction:column;
}

.hero{text-align:center;margin-bottom:14px;flex-shrink:0;}
.hero h1{
  font-size:40px;font-weight:900;letter-spacing:.1em;text-indent:.1em;
  color:var(--yellow);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 7px 0 rgba(0,0,0,.45);
}
.hero-sub{
  margin-top:5px;font-size:10px;letter-spacing:.36em;color:#8ab06a;
  font-family:"Courier New",monospace;font-weight:700;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.tabs{margin-top:12px;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;}
.tab{
  padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--text);background:var(--paper);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.tab:hover{background:#fff;}
.tab:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink2);}
.tab.on{
  background:var(--yellow);
  box-shadow:0 3px 0 var(--yellow-d);
  transform:translateY(1px);
}

/* ==================== 三栏 ==================== */
.cols{
  flex:1 1 0;display:grid;
  grid-template-columns:296px minmax(0,1fr) 316px;
  gap:14px;align-items:stretch;
  min-height:0;overflow:hidden;
}
.cols.single{grid-template-columns:1fr;}

.panel{
  position:relative;
  background:var(--paper);
  border:var(--bd) solid var(--ink);
  border-radius:4px;
  padding:12px;
  box-shadow:0 5px 0 var(--ink2), 0 10px 28px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
}

.panel-title{
  display:flex;align-items:center;gap:9px;justify-content:center;
  margin:-12px -12px 11px;padding:7px 12px;
  background:var(--ink);
  flex-shrink:0;
}
.panel-title span{
  font-size:15px;font-weight:900;letter-spacing:.24em;text-indent:.24em;
  color:var(--yellow);
}
.panel-title i{display:none;}

/* ==================== 职业格 ==================== */
.class-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px;margin-bottom:12px;flex-shrink:0;
}
.cls-cell{
  position:relative;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.cls-cell svg{width:68%;height:68%;transition:.12s;}
.cls-cell:hover{background:#fffdf5;}
.cls-cell:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink2);}
.cls-cell.on{
  background:var(--yellow);
  box-shadow:0 3px 0 var(--yellow-d), 0 0 0 2px var(--ink) inset;
  transform:translateY(1px);
}

.cls-info{display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;}
.cls-info::-webkit-scrollbar{width:6px;}
.cls-info::-webkit-scrollbar-thumb{background:var(--ink2);}
.cls-info h2{
  font-size:21px;font-weight:900;color:var(--ink);letter-spacing:.06em;
  margin-bottom:6px;
}
.cls-info p{
  font-size:12px;line-height:1.8;color:var(--text-dim);
  margin-bottom:12px;
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;}
.stat{
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  padding:5px 3px;text-align:center;
  box-shadow:0 2px 0 var(--ink2);
}
.stat span{display:block;font-size:10px;color:var(--text-dim);margin-bottom:2px;font-weight:700;}
.stat b{display:block;font-size:14px;color:var(--ink);font-family:"Courier New",monospace;font-weight:700;}
.pool-label{
  font-size:11px;color:var(--text-dim);font-weight:700;letter-spacing:.1em;margin-bottom:6px;
}
.pool{display:flex;flex-wrap:wrap;gap:5px;}
.pool-item{
  width:30px;height:30px;border-radius:3px;
  background:var(--white);
  border:var(--bd2) solid var(--ink);
  box-shadow:0 2px 0 var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.pool-item svg{width:72%;height:72%;}

/* ==================== 角色栏 ==================== */
.panel-char{padding:12px 12px 11px;}
.char-top{display:flex;gap:12px;margin-bottom:11px;flex-shrink:0;}
.portrait{
  width:112px;height:158px;flex-shrink:0;
  background:linear-gradient(180deg,#cfe8b8,#a8d48c);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:inset 0 -14px 0 rgba(0,0,0,.08), 0 3px 0 var(--ink2);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
#portrait{width:100%;height:100%;object-fit:contain;}
.char-fields{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;}
.name-row{display:flex;gap:6px;}
.name-row input{
  flex:1;min-width:0;
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  padding:7px 9px;color:var(--ink);font-size:14px;font-weight:700;
  outline:none;box-shadow:0 2px 0 var(--ink2);
}
.name-row input:focus{box-shadow:0 2px 0 var(--blue-d), 0 0 0 2px var(--blue) inset;}
.mini{
  padding:0 12px;font-size:12px;font-weight:700;color:var(--ink);
  background:var(--paper2);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s;
}
.mini:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink2);}
.race-row{display:flex;gap:5px;flex-wrap:wrap;}
.race-btn{
  padding:4px 9px;font-size:12px;font-weight:700;color:var(--text-dim);
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 2px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.race-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink2);}
.race-btn.on{background:var(--blue);color:#fff;box-shadow:0 2px 0 var(--blue-d);}
.meta-row{font-size:12px;color:var(--text-dim);font-weight:700;}
.meta-row .dot{color:var(--text-mute);margin:0 5px;}

.sub-title{
  font-size:12px;color:var(--text-dim);font-weight:700;letter-spacing:.18em;text-align:center;
  margin-bottom:8px;flex-shrink:0;
}
.equip-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:7px;flex-shrink:0;}
.equip-slot{
  aspect-ratio:1;
  background:var(--paper2);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
}
.equip-slot::after{
  content:'';width:34%;height:34%;background:rgba(0,0,0,.16);
}
.equip-hint{
  font-size:11px;color:var(--text-mute);text-align:center;
  margin-bottom:11px;flex-shrink:0;
}
.two-btn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px;flex-shrink:0;}
.wide-btn{
  padding:8px 6px;text-align:center;
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.wide-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink2);}
.wide-btn b{display:block;font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.1em;margin-bottom:1px;}
.wide-btn span{display:block;font-size:10px;color:var(--text-dim);}
.wide-btn:hover{background:#fffdf5;}

.race-talent{
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 2px 0 var(--ink2);
  padding:9px 10px;flex:1;min-height:0;overflow:auto;
}
.rt-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.rt-head b{font-size:15px;font-weight:900;color:var(--ink);letter-spacing:.08em;}
.rt-tag{
  font-size:9px;font-weight:700;color:#fff;background:var(--purple);
  padding:1px 5px;border-radius:2px;border:2px solid var(--ink);
}
#racePerks{list-style:none;display:flex;flex-direction:column;gap:5px;}
#racePerks li{
  font-size:11.5px;line-height:1.65;color:var(--text-dim);
  padding-left:11px;position:relative;
}
#racePerks li::before{
  content:'';position:absolute;left:0;top:7px;
  width:5px;height:5px;background:var(--green);
  border:1.5px solid var(--ink);
}
#racePerks li b{color:var(--ink);font-weight:700;}

/* ==================== 区域 ==================== */
.zone-list{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding-right:3px;
}
.zone-list::-webkit-scrollbar{width:7px;}
.zone-list::-webkit-scrollbar-track{background:rgba(0,0,0,.06);}
.zone-list::-webkit-scrollbar-thumb{background:var(--ink2);}

.zone-item{
  position:relative;text-align:left;padding:7px 9px;
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
  flex-shrink:0;
}
.zone-item:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink2);}
.zone-item:hover{background:#fffdf5;}
.zone-item.on{
  background:var(--blue);
  box-shadow:0 3px 0 var(--blue-d), 0 0 0 2px var(--ink) inset;
  transform:translateY(1px);
}
.zone-item.on .zi-name,
.zone-item.on .zi-tag,
.zone-item.on .zi-desc,
.zone-item.on .zi-boss,
.zone-item.on .zi-boss b{color:#fff;}
.zi-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.zi-name{font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.05em;}
.zi-tag{
  font-size:10px;color:var(--text-dim);font-weight:700;white-space:nowrap;
  font-family:"Courier New",monospace;
}
.zi-desc{
  font-size:10.5px;color:var(--text-dim);line-height:1.45;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zi-boss{font-size:10px;color:var(--red);margin-top:2px;font-weight:700;}
.zi-boss b{color:var(--red);font-weight:900;}

.zone-item.locked{opacity:.55;cursor:not-allowed;}
.zone-item.locked:hover{background:var(--white);}
.zi-clear{
  font-style:normal;font-size:9px;color:#fff;background:var(--green);
  padding:0 4px;margin-left:5px;border-radius:2px;border:1.5px solid var(--ink);
  vertical-align:middle;font-weight:700;
}

/* ==================== 底栏 ==================== */
.dock{
  display:grid;grid-template-columns:172px 1fr 172px;gap:12px;
  align-items:stretch;margin-top:14px;flex-shrink:0;
}
.dock-side{
  padding:8px 10px;text-align:center;
  background:var(--paper);
  border:var(--bd) solid var(--ink);border-radius:4px;
  box-shadow:0 4px 0 var(--ink2);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.dock-side:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink2);}
.dock-side:hover{background:#fffdf5;}
.ds-t{display:block;font-size:13px;font-weight:900;color:var(--ink);letter-spacing:.12em;margin-bottom:1px;}
.ds-v{display:block;font-size:11px;color:var(--text-dim);font-weight:700;}

.dock-main{
  position:relative;padding:9px 18px;border-radius:4px;
  background:var(--red);
  border:var(--bd) solid var(--ink);
  box-shadow:0 6px 0 var(--red-d), 0 10px 24px rgba(0,0,0,.45);
  transition:transform .08s, box-shadow .08s, background .12s;
  overflow:hidden;
}
.dock-main::before{
  content:'';position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.dock-main:hover{background:#f04f4a;}
.dock-main:active{transform:translateY(5px);box-shadow:0 1px 0 var(--red-d);}
.dm-t{
  display:block;font-size:19px;font-weight:900;color:#fff;letter-spacing:.16em;text-indent:.16em;
  text-shadow:0 2px 0 var(--red-d), 0 3px 0 rgba(0,0,0,.35);
}
.dm-s{display:block;font-size:10.5px;color:rgba(255,255,255,.85);margin-top:1px;font-weight:700;}

.hint{
  text-align:center;font-size:11px;color:#a4b894;margin-top:9px;flex-shrink:0;
  font-weight:700;letter-spacing:.04em;
}

/* ==================== 数据页 ==================== */
.panel-full{padding:12px 14px;}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:8px;overflow-y:auto;flex:1;min-height:0;padding-right:4px;
  align-content:start;
}
.card-grid::-webkit-scrollbar{width:7px;}
.card-grid::-webkit-scrollbar-thumb{background:var(--ink2);}
.dcard{
  display:flex;gap:8px;padding:8px;
  background:var(--white);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 3px 0 var(--ink2);
}
.dcard-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:3px;
  background:var(--paper2);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.dcard-ic svg{width:74%;height:74%;}
.dcard-ic .glyph{font-size:19px;line-height:1;}
.dcard-body{min-width:0;flex:1;}
.dcard-name{font-size:13px;color:var(--ink);font-weight:900;letter-spacing:.04em;}
.dcard-meta{font-size:10px;color:var(--text-dim);margin-top:2px;font-weight:700;}
.dcard-desc{font-size:10.5px;color:var(--text-dim);line-height:1.55;margin-top:3px;}
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.soon-mark{font-size:46px;opacity:.4;}
.soon h2{font-size:24px;color:var(--ink);letter-spacing:.16em;font-weight:900;}
.soon p{font-size:12px;color:var(--text-dim);font-weight:700;}

/* ==================== 游戏画面 ==================== */
#game{position:fixed;inset:0;z-index:10;background:#050806;touch-action:none;overscroll-behavior:none;}
#cv{display:block;width:100%;height:100%;}
.hud{position:absolute;inset:0;pointer-events:none;}

.hud-top{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
}
.hp-wrap{width:230px;flex-shrink:0;}
.hp-bar{
  position:relative;height:24px;border-radius:3px;
  background:#2a2233;border:var(--bd2) solid var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.5);
  overflow:hidden;
}
.hp-fill{
  height:100%;width:100%;
  background:var(--red);
  box-shadow:inset 0 -6px 0 var(--red-d), inset 0 5px 0 rgba(255,255,255,.22);
  transition:width .14s ease-out;
}
.hp-bar span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;font-weight:900;font-family:"Courier New",monospace;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}

.xp-wrap{flex:1;display:flex;align-items:center;gap:8px;padding-top:3px;min-width:0;}
.xp-bar{
  flex:1;height:12px;border-radius:3px;
  background:#2a2233;border:var(--bd2) solid var(--ink);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
  overflow:hidden;
}
.xp-fill{
  height:100%;width:0%;
  background:var(--green);
  box-shadow:inset 0 -4px 0 var(--green-d);
  transition:width .1s linear;
}
.lv-badge{
  font-size:12px;color:#c8f0a0;font-weight:900;white-space:nowrap;
  font-family:"Courier New",monospace;
  text-shadow:0 2px 0 rgba(0,0,0,.7);
}
.lv-badge b{font-size:15px;color:var(--yellow);}

.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;}
.timer{
  font-family:"Courier New",monospace;font-size:20px;font-weight:900;color:#fff;letter-spacing:.04em;
  text-shadow:0 3px 0 rgba(0,0,0,.7);
}
.kills{font-size:11px;color:#b9c4a8;font-weight:700;font-family:"Courier New",monospace;}
.kills b{color:var(--yellow);margin-left:4px;font-size:13px;}

.boss-bar{
  position:absolute;top:62px;left:50%;transform:translateX(-50%);
  width:min(520px,72vw);text-align:center;
}
.boss-name{
  font-size:13px;color:var(--yellow);font-weight:900;letter-spacing:.18em;margin-bottom:5px;
  text-shadow:0 2px 0 rgba(0,0,0,.8);
}
.boss-track{
  height:14px;border-radius:3px;
  background:#2a2233;border:var(--bd2) solid var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.5);
  overflow:hidden;
}
.boss-fill{
  height:100%;width:100%;
  background:var(--purple);
  box-shadow:inset 0 -5px 0 var(--purple-d), inset 0 4px 0 rgba(255,255,255,.2);
  transition:width .2s;
}

.hud-bottom{
  position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;
}
.slot-bar{display:flex;gap:6px;}
.slot{
  position:relative;width:48px;height:48px;border-radius:3px;
  background:var(--paper);
  border:var(--bd2) solid var(--ink);
  box-shadow:0 4px 0 rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
}
.slot svg{width:70%;height:70%;}
.slot .lv{
  position:absolute;right:-3px;bottom:-3px;
  min-width:16px;height:16px;padding:0 3px;
  background:var(--ink);border:1.5px solid var(--yellow);border-radius:2px;
  font-size:10px;color:var(--yellow);font-weight:900;
  display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;
}

/* ==================== 遮罩层 ==================== */
.overlay{
  position:absolute;inset:0;z-index:20;
  background:radial-gradient(ellipse at 50% 50%,rgba(12,10,20,.78),rgba(0,0,0,.93));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
.overlay.hidden{display:none;}

.lv-head{
  font-size:34px;font-weight:900;letter-spacing:.3em;text-indent:.3em;color:var(--yellow);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 7px 0 rgba(0,0,0,.5);
}
.lv-sub{font-size:12px;color:#b6c8a2;letter-spacing:.2em;margin-top:8px;margin-bottom:22px;font-weight:700;}
.cards{display:flex;gap:14px;}
.card{
  width:208px;padding:14px 12px;
  background:var(--paper);
  border:var(--bd) solid var(--ink);border-radius:4px;
  box-shadow:0 6px 0 var(--ink2), 0 10px 30px rgba(0,0,0,.5);
  text-align:center;position:relative;
  transition:transform .1s, box-shadow .1s;
  animation:cardIn .26s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.card:nth-child(2){animation-delay:.05s;}
.card:nth-child(3){animation-delay:.1s;}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.95);}to{opacity:1;transform:none;}}
.card:hover,.card.hover{
  transform:translateY(-4px);
  box-shadow:0 10px 0 var(--ink2), 0 14px 34px rgba(0,0,0,.55);
}
.card:active{transform:translateY(2px);box-shadow:0 3px 0 var(--ink2);}
.card-key{
  position:absolute;top:6px;left:8px;font-size:12px;color:var(--text-mute);
  font-family:"Courier New",monospace;font-weight:700;
}
.card-ic{
  width:58px;height:58px;margin:2px auto 9px;border-radius:3px;
  background:var(--white);border:var(--bd2) solid var(--ink);
  box-shadow:0 3px 0 var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.card-ic svg{width:74%;height:74%;}
.card-ic .glyph{font-size:28px;line-height:1;}
.card-name{font-size:16px;color:var(--ink);font-weight:900;letter-spacing:.08em;margin-bottom:2px;}
.card-lv{
  display:inline-block;font-size:10.5px;color:#fff;background:var(--purple);
  padding:1px 6px;border-radius:2px;border:2px solid var(--ink);
  margin-bottom:8px;font-weight:700;
}
.card-lv.new{background:var(--green);}
.card-desc{font-size:11.5px;color:var(--text-dim);line-height:1.75;min-height:44px;font-weight:700;}

.lv-tip{margin-top:22px;font-size:11px;color:#a4b894;letter-spacing:.14em;font-weight:700;}

/* 结算 */
.res-title{
  font-size:36px;font-weight:900;letter-spacing:.2em;text-indent:.2em;color:var(--yellow);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    0 7px 0 rgba(0,0,0,.5);
}
.res-title.small{font-size:26px;}
.res-title.dead{color:#ff6b5e;}
.res-sub{font-size:12.5px;color:#9fb08c;font-weight:700;letter-spacing:.08em;margin-top:10px;margin-bottom:22px;}
.res-stats{display:flex;gap:14px;margin-bottom:24px;}
.res-stat{
  text-align:center;padding:10px 18px;
  background:var(--paper);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  box-shadow:0 4px 0 var(--ink2);
}
.res-stat span{display:block;font-size:10.5px;color:var(--text-dim);font-weight:700;margin-bottom:3px;}
.res-stat b{
  display:block;font-size:22px;color:var(--ink);font-family:"Courier New",monospace;font-weight:900;
}
.res-btns{display:flex;gap:11px;}
.res-btn{
  padding:10px 30px;font-size:14px;font-weight:900;letter-spacing:.12em;border-radius:4px;
  background:var(--green);color:#fff;
  border:var(--bd) solid var(--ink);
  box-shadow:0 5px 0 var(--green-d), 0 8px 20px rgba(0,0,0,.4);
  transition:transform .08s, box-shadow .08s, background .12s;
  text-shadow:0 2px 0 var(--green-d);
}
.res-btn:hover{background:#4acd66;}
.res-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-d);}
.res-btn.ghost{
  background:var(--paper);color:var(--ink);
  box-shadow:0 5px 0 var(--ink2), 0 8px 20px rgba(0,0,0,.4);
  text-shadow:none;
}
.res-btn.ghost:hover{background:#fffdf5;}
.res-btn.ghost:active{box-shadow:0 1px 0 var(--ink2);}

/* ==================== 触屏控件 ==================== */
.joystick{
  position:absolute;left:24px;bottom:24px;
  width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,16,12,.7),rgba(6,9,6,.84));
  border:3px solid rgba(27,20,36,.85);
  display:none;align-items:center;justify-content:center;
  touch-action:none;z-index:16;
  box-shadow:inset 0 0 26px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35);
}
.joystick.active{
  border-color:rgba(255,201,60,.7);
  background:radial-gradient(circle,rgba(18,24,18,.76),rgba(6,9,6,.88));
}
.stick-knob{
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#c89a30);
  border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 4px 0 rgba(255,255,255,.35);
  pointer-events:none;will-change:transform;
}
.pause-btn{
  position:absolute;top:12px;right:12px;
  width:42px;height:42px;border-radius:3px;
  display:none;align-items:center;justify-content:center;
  background:var(--paper);border:var(--bd2) solid var(--ink);
  box-shadow:0 4px 0 var(--ink2);
  color:var(--ink);font-size:11px;font-weight:900;
  z-index:16;
}
.pause-btn:active{transform:translateY(4px);box-shadow:none;}
.rotate-hint{
  position:absolute;left:50%;top:64px;transform:translateX(-50%);
  padding:6px 14px;border-radius:3px;
  background:var(--paper);border:var(--bd2) solid var(--ink);
  box-shadow:0 3px 0 var(--ink2);
  font-size:12px;color:var(--ink);font-weight:700;letter-spacing:.08em;
  opacity:0;pointer-events:none;transition:opacity .4s;z-index:17;
  white-space:nowrap;
}
.rotate-hint.on{opacity:1;}

body.is-touch .joystick{display:flex;}
body.is-touch .pause-btn{display:flex;}
body.is-touch .hud-right{margin-right:48px;}

@media (hover:none) and (pointer:coarse){
  .joystick{display:flex;}
  .pause-btn{display:flex;}
  .hud-right{margin-right:48px;}
}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);
  padding:9px 20px;background:var(--paper);
  border:var(--bd2) solid var(--ink);border-radius:3px;
  font-size:13px;color:var(--ink);font-weight:700;letter-spacing:.06em;
  opacity:0;pointer-events:none;transition:.26s;z-index:999;
  box-shadow:0 4px 0 var(--ink2), 0 10px 28px rgba(0,0,0,.5);
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ==================== 响应式 ==================== */
@media (max-width:1180px){
  .cols{grid-template-columns:258px minmax(0,1fr) 278px;}
  .hero h1{font-size:34px;}
}
@media (max-height:760px){
  .hero h1{font-size:30px;}
  .hero-sub{margin-top:2px;}
  .tabs{margin-top:8px;}
  .wrap{padding:12px 18px 10px;}
  .portrait{height:132px;}
  .cls-cell{aspect-ratio:auto;height:52px;}
  .dock{margin-top:10px;}
  .hint{margin-top:6px;}
}

/* 手机 / 窄屏 */
@media (max-width:900px){
  #menu{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
  .wrap{height:auto;min-height:100%;width:100%;padding:14px 12px 156px;}
  .hero{margin-bottom:10px;}
  .hero h1{font-size:27px;letter-spacing:.06em;text-indent:.06em;}
  .hero-sub{font-size:9px;letter-spacing:.24em;margin-top:3px;}
  .tabs{gap:4px;margin-top:9px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;}
  .tab{padding:5px 9px;font-size:11.5px;flex-shrink:0;}

  .cols{
    flex:0 0 auto;min-height:0;min-width:0;
    grid-template-columns:minmax(0,1fr);
    overflow:visible;gap:11px;
  }
  .cols.single{grid-template-columns:minmax(0,1fr);}
  .panel{overflow:visible;min-width:0;min-height:auto;}
  .cls-info{overflow:visible;min-width:0;flex:0 0 auto;min-height:0;}
  .zone-list{overflow:visible;max-height:none;flex:0 0 auto;min-height:0;}
  .race-talent{overflow:visible;flex:0 0 auto;}
  .char-top{min-width:0;}
  .char-fields{min-width:0;}
  .name-row input{min-width:0;}
  .race-row{gap:5px;}
  .race-btn{padding:4px 8px;font-size:11.5px;}

  .class-grid{gap:6px;margin-bottom:11px;}
  .cls-info h2{font-size:19px;}
  .cls-info p{font-size:11.5px;line-height:1.7;margin-bottom:10px;}
  .portrait{height:150px;width:100px;}

  .cols > section:nth-child(1){order:1;}
  .cols > section:nth-child(3){order:2;}
  .cols > section:nth-child(2){order:3;}
  .cols > section:nth-child(1)::after{
    content:'↓ 继续下滑选择区域';
    display:block;text-align:center;
    font-size:11px;color:#8fa07c;font-weight:700;letter-spacing:.1em;
    margin-top:9px;
  }

  .dock{
    position:fixed;left:0;right:0;bottom:0;
    grid-template-columns:1fr 1fr;
    gap:8px;margin:0;padding:9px 11px 14px;
    background:linear-gradient(180deg,rgba(8,14,7,.4),rgba(8,14,7,.96) 40%);
    border-top:var(--bd) solid var(--ink);
    z-index:20;
  }
  .dock-main{grid-column:1 / -1;order:-1;padding:8px 14px;}
  .dm-t{font-size:16px;}
  .dm-s{font-size:9.5px;}
  .dock-side{padding:6px 8px;}
  .ds-t{font-size:12px;}
  .ds-v{font-size:10px;}
  .hint{display:none;}
}

/* 手机游戏 HUD */
@media (max-width:640px){
  .hud-top{padding:9px 10px;gap:7px;}
  .hp-wrap{width:126px;}
  .hp-bar{height:19px;}
  .hp-bar span{font-size:10px;}
  .xp-bar{height:9px;}
  .lv-badge{font-size:10px;}
  .lv-badge b{font-size:13px;}
  .timer{font-size:16px;}
  .hud-right{margin-right:46px;}
  .slot{width:38px;height:38px;}
  .slot .lv{font-size:9px;min-width:13px;height:13px;}
  .hud-bottom{bottom:12px;}
  .boss-bar{top:54px;width:82vw;}
  .boss-name{font-size:11px;}

  .lv-head{font-size:24px;}
  .lv-sub{font-size:11px;margin-bottom:16px;}
  .lv-tip{margin-top:14px;font-size:10px;}
  .cards{flex-direction:column;width:88%;max-width:340px;gap:9px;}
  .card{
    width:100%;padding:9px 11px;
    display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;
    gap:1px 10px;text-align:left;align-items:center;
  }
  .card-ic{width:46px;height:46px;margin:0;grid-row:1 / span 2;grid-column:1;}
  .card-name{font-size:14px;grid-column:2;margin-bottom:0;}
  .card-lv{grid-column:2;justify-self:start;margin-bottom:0;font-size:9.5px;}
  .card-desc{font-size:11px;grid-column:2;min-height:0;line-height:1.5;margin-top:3px;}
  .card-key{top:3px;left:5px;font-size:10px;}

  .res-title{font-size:24px;}
  .res-sub{font-size:11px;margin-bottom:16px;}
  .res-stats{gap:8px;margin-bottom:18px;}
  .res-stat{padding:8px 12px;}
  .res-stat b{font-size:18px;}
  .res-btn{padding:9px 20px;font-size:13px;letter-spacing:.06em;}
}

/* 横屏手机 */
@media (orientation:landscape) and (max-height:520px){
  .hero{margin-bottom:7px;}
  .hero h1{font-size:22px;letter-spacing:.05em;text-indent:.05em;}
  .hero-sub{display:none;}
  .tabs{margin-top:5px;}
  .tab{padding:4px 8px;font-size:11px;}
  .wrap{padding:9px 12px 84px;}

  .dock{grid-template-columns:1fr 2.2fr 1fr;gap:6px;padding:5px 9px 8px;}
  .dock-main{grid-column:auto;order:0;padding:5px 11px;}
  .dm-t{font-size:15px;letter-spacing:.1em;}
  .dm-s{font-size:9px;}
  .dock-side{padding:4px 6px;}
  .ds-t{font-size:11px;}
  .ds-v{font-size:9px;}

  .class-grid{grid-template-columns:repeat(9,1fr);gap:5px;margin-bottom:9px;}
  .cls-cell{aspect-ratio:1;height:auto;}
  .cls-info h2{font-size:16px;margin-bottom:3px;}
  .cls-info p{font-size:10.5px;line-height:1.55;margin-bottom:7px;}

  .cards{gap:8px;width:auto;max-width:none;}
  .card{width:156px;padding:7px 6px;display:block;text-align:center;}
  .card-ic{width:36px;height:36px;margin:2px auto 5px;}
  .card-name{font-size:12.5px;}
  .card-lv{font-size:9px;margin-bottom:4px;}
  .card-desc{font-size:9.5px;min-height:30px;line-height:1.4;}
  .lv-head{font-size:21px;}
  .lv-sub{font-size:10px;margin-top:2px;margin-bottom:9px;}
  .lv-tip{margin-top:9px;font-size:9.5px;}
  .joystick{width:104px;height:104px;left:16px;bottom:16px;}
  .stick-knob{width:46px;height:46px;}
  .hud-top{padding:7px 11px;}
  .hud-right{margin-right:46px;}
  .hp-wrap{width:180px;}
  .boss-bar{top:44px;}
}