/* 覆盖层 / 标题 / 职业卡
   拆分自 index.html（原第 283~413 行）· 修改后请勿跨文件重复定义同名选择器 */
/* ============================================================
   覆盖层 / 标题 / 职业卡
   ============================================================ */
.overlay{
  position:absolute; inset:0; z-index:50; padding:24px; gap:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 95% 75% at 50% 26%, rgba(22,34,50,.93), rgba(5,8,13,.975) 72%);
  animation:ovIn .3s ease-out;
}
.overlay.hidden{ display:none; animation:none; }
@keyframes ovIn{ from{opacity:0;} to{opacity:1;} }
#startOverlay{ position:absolute; }
#startOverlay::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 18% 12%, rgba(90,169,255,.10), transparent 42%),
    radial-gradient(circle at 84% 80%, rgba(195,155,255,.10), transparent 42%);
}

.title{
  position:relative; font-size:clamp(30px,6.4vw,50px); font-weight:900;
  letter-spacing:.14em; line-height:1.12; text-align:center;
  background:linear-gradient(180deg,#fffdf0 2%, #ffe9a8 32%, var(--gold) 68%, #e0ae33 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 16px rgba(245,196,81,.34));
}
.rule{ display:flex; align-items:center; gap:12px; margin-top:-8px; }
.rule i{ display:block; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--line3)); }
.rule i:last-child{ background:linear-gradient(270deg,transparent,var(--line3)); }
.rule span{ font-size:11.5px; letter-spacing:3px; color:var(--muted); font-weight:700; }
.rotate-hint{
  display:none; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  color:var(--gold); background:rgba(245,196,81,.1); border:1px solid rgba(245,196,81,.28);
  border-radius:20px; padding:5px 14px; letter-spacing:.6px;
}
@media (orientation:portrait) and (max-width:560px){ .rotate-hint{ display:flex; } }

.classes{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; max-width:780px; }
.class-card{
  position:relative; width:min(198px,42vw); padding:16px 14px 14px;
  cursor:pointer; overflow:hidden; border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(36,50,68,.94),rgba(13,19,27,.97));
  border:1.5px solid var(--line2);
  box-shadow:var(--sh2), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), border-color .2s, box-shadow .2s;
}
.class-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 62%);
  opacity:0; transition:opacity .2s;
}
.class-card:hover{ transform:translateY(-5px); border-color:var(--line3); box-shadow:var(--sh3); }
.class-card:hover::after{ opacity:1; }
.class-card.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(245,196,81,.45), 0 0 32px rgba(245,196,81,.18), var(--sh3);
}
.class-card.selected::before{
  content:"✓"; position:absolute; top:9px; right:9px; z-index:2;
  width:19px; height:19px; border-radius:50%; background:var(--gold); color:#20160a;
  font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.class-kbd{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; font-weight:800; font-family:var(--font-num);
  color:var(--dim); border:1px solid var(--line2); border-radius:5px; padding:1px 5px;
}
.class-portrait svg{ width:76px; height:86px; }
.class-portrait{
  height:82px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:6px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.class-card:hover .class-portrait{ transform:translateY(-2px) scale(1.05); }
.class-name{ font-size:17px; font-weight:900; text-align:center; letter-spacing:2.5px; margin-bottom:5px; }
.class-desc{ font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6; margin-bottom:11px; min-height:38px; }
.class-stats{ display:flex; flex-direction:column; gap:6px; }
.stat-line{ display:flex; align-items:center; gap:7px; font-size:10.5px; }
.stat-line .sl{ color:var(--dim); width:26px; flex:none; letter-spacing:.5px; }
.stat-bar{
  flex:1; height:5px; background:rgba(0,0,0,.55); border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.stat-bar > i{ display:block; height:100%; border-radius:3px; box-shadow:0 0 8px currentColor; }

/* —— 按钮 —— */
.btn{
  position:relative; overflow:hidden; border:none; cursor:pointer; font-family:inherit;
  padding:13px 42px; font-size:16px; font-weight:800; letter-spacing:2px;
  border-radius:var(--r-m); color:#fff;
  background:linear-gradient(180deg,#5aa9ff, var(--azure2));
  box-shadow:0 6px 22px rgba(37,99,216,.42), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .1s, filter .18s, box-shadow .18s;
}
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.btn:hover::after{ left:125%; }
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:scale(.96); box-shadow:0 2px 10px rgba(37,99,216,.4); }
.btn:disabled{ opacity:.34; cursor:not-allowed; box-shadow:none; }
.btn:disabled::after{ display:none; }
.btn.gold{
  background:linear-gradient(180deg,#ffe79c, var(--gold) 46%, var(--gold2));
  color:#20160a;
  box-shadow:0 6px 24px rgba(245,196,81,.4), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn.ghost{
  background:rgba(255,255,255,.04); border:1px solid var(--line2);
  color:var(--text2); box-shadow:none;
}
.btn.ghost:hover{ background:rgba(255,255,255,.075); border-color:var(--line3); color:#fff; }
/* 继续冒险：绿色主色，与"新建"区分开 */
.btn.cont{
  background:linear-gradient(180deg,#7ff0c4, #3fb950 52%, #2b8f3d);
  color:#06210f;
  box-shadow:0 6px 24px rgba(63,185,80,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn.cont:active{ box-shadow:0 2px 10px rgba(63,185,80,.4); }
/* 魂晶：与金币的暖金、继续的翠绿都拉开，一眼是"另一种资源" */
.btn.crystal{
  background:linear-gradient(180deg,#c9f0ff, #7fd8ff 46%, #2f7fa6);
  color:#04202c;
  box-shadow:0 6px 24px rgba(127,216,255,.38), inset 0 1px 0 rgba(255,255,255,.6);
  font-size:14px; padding:12px 30px;
}

.record{
  display:flex; gap:16px; font-size:12px; color:var(--muted);
  padding:7px 18px; border-radius:20px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.record b{ color:var(--gold); font-weight:800; font-family:var(--font-num); margin:0 2px; }