/* ============================================================
   styles.css — 角色创建 / 即时战斗 共享样式
   毛玻璃版（配合 glass-theme.css 的全屏壁纸层使用）
   ============================================================ */
:root{
  --bg:#0a1020; --panel:rgba(18,26,44,.38); --panel2:rgba(255,255,255,.07);
  --ink:#f2f6fb; --muted:rgba(226,236,248,.68); --line:rgba(255,255,255,.18); --line2:rgba(255,255,255,.30);
  --gold:#f0d194; --gold-soft:#e8c87e; --teal:#8fe8e0; --rose:#f2a7bc; --violet:#c2b3f2;
  --green:#9fe0a9; --red:#f0968b; --blue:#9cc4f0;
  --blur:blur(16px) saturate(1.25);
  --shadow:0 18px 44px -20px rgba(2,8,24,.65);
  --glow:0 0 0 1px rgba(240,209,148,.35), 0 10px 24px -12px rgba(240,209,148,.45);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100vw}
::selection{background:rgba(240,209,148,.32);color:#fff}
body{margin:0;min-height:100vh;color:var(--ink);background:transparent;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;line-height:1.6}
.wrap{max-width:1000px;margin:0 auto;padding:26px 18px 64px}
h1{font-size:28px;letter-spacing:3px;margin:4px 0 2px;font-weight:800;color:#fff;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,"Songti SC","STSong",serif;
  text-shadow:0 2px 18px rgba(4,10,26,.75)}
h1 .dot{color:var(--gold)}
.sub{color:var(--muted);font-size:13.5px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line);position:relative}
.sub::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

.card-ui{border:1px solid var(--line);border-radius:18px;background:var(--panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
button{font-family:inherit;cursor:pointer}
.btn{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:10px 20px;font-size:15px;transition:transform .15s,border-color .15s,color .15s,box-shadow .15s;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn:hover{border-color:var(--gold-soft);color:var(--gold);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:rgba(240,209,148,.20);border-color:var(--gold-soft);color:var(--gold);font-weight:600;
  box-shadow:0 0 0 1px rgba(240,209,148,.18),0 8px 20px -12px rgba(240,209,148,.5)}
.btn.primary:hover{box-shadow:var(--glow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sm{padding:6px 14px;font-size:13px}

.opt-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.opt{border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:999px;padding:10px 18px;font-size:14px;color:var(--muted);cursor:pointer;transition:.15s;user-select:none}
.opt:hover{border-color:var(--line2);color:var(--ink);transform:translateY(-1px)}
.opt.active{border-color:var(--gold-soft);color:var(--gold);background:rgba(240,209,148,.16);box-shadow:0 0 0 1px var(--gold-soft) inset}
.lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:16px;font-weight:600}

/* creation */
.race-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:10px}
.race-card{border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:14px;padding:12px;
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:.15s}
.race-card:hover{border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(2,8,24,.7)}
.race-card.sel{border-color:var(--gold-soft);background:rgba(240,209,148,.16);box-shadow:0 0 0 1px var(--gold-soft) inset}
.race-card h4{margin:0 0 4px;font-size:15px;color:var(--gold)}
.race-card .stats{font-size:12px;color:var(--muted)}
.race-card .feat{font-size:11px;color:var(--ink);margin-top:6px;line-height:1.45}

.stat-row{display:flex;align-items:center;gap:12px;margin:8px 0;padding:8px 12px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px}
.stat-row b{min-width:60px;color:var(--gold)}
.stat-row span{font-size:13px;color:var(--muted);min-width:40px}
.stat-row .val{font-size:15px;color:var(--ink);font-weight:700;min-width:32px}
.stat-row input[type=range]{flex:1;accent-color:var(--gold)}

.skill-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.skill-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.07);cursor:pointer;font-size:13px;transition:.15s;position:relative}
.skill-card:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.skill-card.sel{border-color:var(--gold-soft);background:rgba(240,209,148,.16);box-shadow:0 0 0 1px var(--gold-soft) inset}
.skill-card.dis{opacity:.45;cursor:not-allowed}
.skill-card .tag{font-size:11px;padding:1px 7px;border-radius:6px;display:inline-block;margin-bottom:4px}
.t-phys{background:rgba(240,150,139,.18);color:var(--red)}
.t-magic{background:rgba(194,179,242,.18);color:var(--violet)}
.t-heal{background:rgba(159,224,169,.18);color:var(--green)}
.t-shield{background:rgba(143,232,224,.18);color:var(--teal)}
.skill-card .cd{position:absolute;top:6px;right:8px;font-size:11px;color:var(--muted)}

.passive-box{border:1px dashed var(--line2);border-radius:14px;padding:14px;background:rgba(255,255,255,.05);margin-top:12px}
.passive-box h4{margin:0 0 6px;color:var(--gold)}
.passive-box p{margin:0;font-size:13px;color:var(--muted)}

.select-styled{width:100%;padding:10px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(10,16,32,.5);color:var(--ink);font-size:14px;cursor:pointer;color-scheme:dark}
.select-styled:focus{outline:none;border-color:var(--gold-soft)}

/* battle */
.side{border:1px solid var(--line);border-radius:16px;padding:13px 17px;margin-bottom:12px;
  background:var(--panel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.side.foe{background:rgba(242,167,188,.10);border-color:rgba(242,167,188,.30)}
.side.me{background:rgba(143,232,224,.10);border-color:rgba(143,232,224,.30)}
.side .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.who{font-weight:800;font-size:17px;letter-spacing:.5px}
.who.foe{color:var(--rose)} .who.me{color:var(--teal)}
.stats{display:flex;gap:8px;flex-wrap:wrap;font-size:13.5px;align-items:center}
.stat{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;padding:3px 12px;color:var(--muted)}
.stat b{color:var(--gold);font-weight:700}
.hpbar{height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px;border:1px solid var(--line);position:relative}
.hpbar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f0968b,#f0c08a);transition:width .5s cubic-bezier(.3,.8,.3,1);box-shadow:0 0 10px -3px rgba(240,150,139,.6)}
.me .hpbar > i{background:linear-gradient(90deg,#8fe8e0,#9fe0a9);box-shadow:0 0 10px -3px rgba(143,232,224,.6)}

.timeline{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);margin:12px 0;box-shadow:var(--shadow)}
.timeline h4{margin:0 0 10px;color:var(--gold);font-size:14px}
.tl-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.tl-row b{min-width:80px;color:var(--ink)}
.tl-row .tl-spd{min-width:54px;color:var(--teal);font-weight:700;white-space:nowrap;font-size:12px}
.tl-row .tl-spd i{font-style:normal;margin-left:2px}
.tl-row .tl-spd i.up{color:var(--green)}
.tl-row .tl-spd i.down{color:var(--red)}
.tl-row .track{flex:1;height:14px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;position:relative;border:1px solid var(--line)}
.tl-row .fill{height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--teal));border-radius:999px;transition:width .3s}
/* 双方蓄力条差异化：己方青绿、对方玫瑰红（与两侧生命条同色），一眼分辨谁蓄力更快 */
.tl-row .fill.side-me{background:linear-gradient(90deg,#57c7bb,#9fe0a9);box-shadow:0 0 8px -2px rgba(143,232,224,.7)}
.tl-row .fill.side-foe{background:linear-gradient(90deg,#e0707f,#f2a7bc);box-shadow:0 0 8px -2px rgba(240,150,139,.7)}
.tl-row .fill.fox{background:linear-gradient(90deg,rgba(240,150,139,.45),rgba(242,167,188,.6))}
/* 预计先手标记：下一个出手的角色名字旁金色徽章，蓄力条镀金边 */
.tl-first-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;color:#1a1408;background:linear-gradient(90deg,var(--gold-soft),var(--gold));vertical-align:1px;white-space:nowrap}
.tl-row.first .track{border-color:rgba(217,180,106,.65)}
/* 战斗记录双色：我方行动青绿、敌方行动玫瑰红（与两侧生命条同色系），系统/中立行保持原色 */
#battleLog p.lg-me,#battleLog p.lg-me span,#ebLog p.lg-me,#ebLog p.lg-me span{color:#74d2c4 !important}
#battleLog p.lg-foe,#battleLog p.lg-foe span,#ebLog p.lg-foe,#ebLog p.lg-foe span{color:#ef9aa6 !important}
.tl-row .mark{position:absolute;top:0;bottom:0;width:2px;background:var(--gold)}
.tl-eta{min-width:58px;text-align:right;color:var(--muted);font-size:12px;white-space:nowrap}
.tl-eta.ready{color:var(--gold);font-weight:700}
.tl-eta.fox{color:var(--rose);font-weight:700}
.tl-order{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}

.skill-hand{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center}
.bskill{width:130px;border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:14px;
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:10px 8px;text-align:center;transition:.15s;position:relative;user-select:none;cursor:pointer}
.bskill:hover{transform:translateY(-3px);border-color:var(--gold-soft);box-shadow:0 10px 20px -14px rgba(2,8,24,.7)}
.bskill.sel{border-color:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-soft) inset;transform:translateY(-3px);background:rgba(240,209,148,.16)}
.bskill.dis{opacity:.4;cursor:not-allowed}
.bskill .nm{font-weight:700;font-size:14px;margin:2px 0 4px}
.bskill .cd{position:absolute;top:6px;right:8px;font-size:11px;color:var(--muted)}
.bskill .tp{font-size:11px;margin-bottom:4px}
.bskill .ds{font-size:11px;color:var(--muted);line-height:1.35}

.log{max-height:22vh;min-height:120px;overflow-y:auto;background:rgba(10,16,32,.45);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;font-size:13.5px;margin-top:12px}
.log p{margin:2px 0;animation:fadein .25s ease}
.log .hit{color:var(--red)} .log .heal{color:var(--green)} .log .sys{color:var(--gold)} .log .info{color:var(--muted)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.actbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pill{font-size:12px;padding:3px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.07)}
.pill.sys{color:var(--gold);border-color:var(--gold-soft)}

.overlay{position:fixed;inset:0;background:rgba(6,10,22,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.overlay.on{display:flex}
.modal{border:1px solid var(--gold-soft);border-radius:18px;background:rgba(14,20,36,.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  padding:26px 28px;max-width:520px;text-align:center;box-shadow:var(--shadow)}
.modal h3{margin:0 0 10px;color:var(--gold)}
.modal p{color:var(--muted);font-size:14px}
.hidden{display:none}
.warn{color:var(--red);font-size:13px;margin-top:6px}

/* create page extras */
.saved-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.saved-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.07);cursor:pointer;transition:.15s}
.saved-card:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.saved-card.sel{border-color:var(--gold-soft);background:rgba(240,209,148,.16)}
.saved-card h5{margin:0 0 4px;color:var(--gold);font-size:14px}
.saved-card .meta{font-size:12px;color:var(--muted)}

.field{margin-top:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field input[type=text]{width:100%;padding:10px 16px;border:1px solid var(--line2);border-radius:999px;background:rgba(10,16,32,.5);color:var(--ink);font-size:15px;color-scheme:dark}
.field input[type=text]:focus{outline:none;border-color:var(--gold-soft)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);
  background:rgba(14,20,36,.75);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);color:var(--ink);padding:10px 20px;border-radius:999px;font-size:14px;opacity:0;transition:.3s;z-index:100}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.nav{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.nav a{color:var(--gold);text-decoration:none;font-size:14px}
.nav a:hover{text-decoration:underline}

/* battle setup */
.setup-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.setup-row label{font-size:14px;color:var(--muted);min-width:80px}
.setup-row select{padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(10,16,32,.5);color:var(--ink);font-size:14px;min-width:160px;color-scheme:dark}

/* skill shape tags */
.s-single{background:rgba(255,255,255,.14);color:#cfcfcf}
.s-aoe{background:rgba(240,192,138,.18);color:#f0c08a}
.s-chain{background:rgba(194,179,242,.18);color:var(--violet)}

/* heal target chooser */
.heal-chooser{display:flex;gap:8px;justify-content:center;margin:10px 0}
.heal-chooser .opt{flex:1;max-width:120px;text-align:center}

/* shield stack hint */
.shield-hint{font-size:11px;color:var(--teal);margin-left:4px}

/* ---------- battle 自适应与动效 ---------- */
.side .stats{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* 受击：抖动 + 红色闪光 */
@keyframes hitShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.side.hit{animation:hitShake .38s ease;border-color:rgba(240,150,139,.85)}
.side::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(240,120,110,.34),rgba(240,120,110,.10));opacity:0;pointer-events:none;transition:opacity .15s}
.side.hit::after{opacity:1}
/* 治疗：绿色闪光 */
@keyframes healFlash{0%{box-shadow:var(--shadow)}50%{box-shadow:0 0 26px rgba(159,224,169,.55)}100%{box-shadow:var(--shadow)}}
.side.healed{animation:healFlash .6s ease}
/* 施法：金色呼吸 */
@keyframes castGlow{0%{box-shadow:var(--shadow)}50%{box-shadow:0 0 26px rgba(240,209,148,.55)}100%{box-shadow:var(--shadow)}}
.side.cast{animation:castGlow .5s ease}
/* 倒下：置灰 */
.side.dead{filter:grayscale(.85);opacity:.65}
.side.dead .who::after{content:" ☠";color:var(--red)}
/* 伤害/治疗飘字 */
.dmg-float{position:absolute;top:34%;left:50%;transform:translate(-50%,0);font-weight:800;font-size:22px;letter-spacing:1px;
  color:var(--red);text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none;z-index:6;animation:dmgUp .95s ease-out forwards;white-space:nowrap}
.dmg-float.heal{color:var(--green)}
.dmg-float.shield{color:var(--teal);font-size:16px}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}18%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-48px) scale(1)}}

@media (max-width:720px){
  .wrap{padding:16px 10px 48px}
  h1{font-size:22px;letter-spacing:1px}
  .sub{font-size:12px;margin-bottom:14px;padding-bottom:12px}
  .card-ui{padding:16px 14px}
  .side{padding:11px 12px}
  .side .top{flex-direction:column;align-items:flex-start;gap:7px}
  .side .stats{justify-content:flex-start}
  .stat{padding:2px 9px;font-size:12px}
  .who{font-size:15px}
  .tl-row b{min-width:54px;font-size:12px}
  .tl-row{gap:7px}
  .tl-row .tl-spd{min-width:46px;font-size:11px}
  .tl-eta{min-width:48px;font-size:11px}
  .skill-hand{gap:8px}
  .bskill{width:calc(50% - 4px);min-width:0;padding:9px 7px}
  .bskill .ds{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .actbar{gap:8px}
  .actbar .btn{flex:1 1 auto;text-align:center}
  .log{font-size:12.5px;padding:9px 10px}
  .modal{padding:20px 16px;width:100%}
  .setup-row{flex-direction:column;align-items:stretch}
  .setup-row label{min-width:0}
  .setup-row select{width:100%;min-width:0}
}