/* ============================================================
 *  一念问道 — style.css   水墨修仙 / 移动端优先竖屏
 * ============================================================ */
:root{
  --bg:#0d0b14; --bg2:#15121f; --panel:#1b1726; --panel2:#231d33;
  --ink:#e8e3d5; --ink-dim:#a89f8c; --muted:#6f6855;
  --gold:#e8c66b; --gold-dim:#b9974a; --jade:#7fce8c;
  --hp:#e05a5a; --hp2:#ff7a6a; --qi:#5aa6e0; --exp:#caa14a;
  --enemy:#d06a6a; --crit:#ffcb5b; --good:#7fce8c; --warn:#e0b65a; --bad:#e05a5a;
  --line:#332b46; --shadow:0 4px 18px rgba(0,0,0,.5);
  --r1:#9fb0c0; --r2:#6fb7ff; --r3:#c08bff; --r4:#ffcb5b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:#000;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;user-select:none;-webkit-user-select:none;
}
#game-frame{
  position:relative;width:100%;max-width:460px;height:100%;max-height:920px;
  background:radial-gradient(120% 80% at 50% -10%,#1c1830 0%,var(--bg) 55%,#070510 100%);
  overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.8);
}
#app{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
#app::-webkit-scrollbar{width:5px;}
#app::-webkit-scrollbar-thumb{background:#3a3350;border-radius:3px;}

.screen{min-height:100%;padding:16px 14px 26px;display:flex;flex-direction:column;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- 按钮 ---------- */
.btn{
  font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  cursor:pointer;transition:.15s;line-height:1.3;text-align:center;
}
.btn:hover{border-color:var(--gold-dim);color:#fff;}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(180deg,#3a2f12,#241b08);
  border-color:var(--gold-dim);color:var(--gold);font-weight:600;
  box-shadow:0 0 14px rgba(232,198,107,.15);
}
.btn-primary:hover{background:linear-gradient(180deg,#4a3c18,#2e220a);color:#ffe08a;}
.btn-sm{font-size:12px;padding:7px 10px;border-radius:8px;}
.btn-wide{width:100%;}
.btn-danger{border-color:#7a3030;color:#e07a7a;}
.btn:disabled{opacity:.45;cursor:default;}
.btn.disabled{opacity:.4;cursor:default;}

/* ---------- 标题页 ---------- */
.title-screen{justify-content:center;align-items:center;text-align:center;position:relative;}
.title-bg{position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 50% 30%,rgba(232,198,107,.10),transparent 70%),
    radial-gradient(50% 50% at 80% 80%,rgba(127,166,224,.08),transparent);
  pointer-events:none;}
.title-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.game-title{
  font-size:54px;margin:0;letter-spacing:8px;font-weight:800;
  background:linear-gradient(180deg,#fff3cf,var(--gold) 50%,#9a7a30);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(232,198,107,.25);
}
.subtitle{color:var(--ink-dim);letter-spacing:3px;font-size:13px;margin:0 0 6px;}
.title-stats{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:24px;}
.title-stats span{padding:3px 8px;border:1px solid var(--line);border-radius:20px;}
.title-btns{display:flex;flex-direction:column;gap:12px;width:230px;}
.title-tip{margin-top:30px;color:var(--muted);font-size:12px;line-height:1.9;}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.topbar h2{margin:0;font-size:18px;color:var(--gold);font-weight:700;letter-spacing:1px;}
.btn-back{padding:6px 10px;font-size:13px;}
.karma,.gold-badge{font-size:13px;color:var(--gold);white-space:nowrap;}

/* ---------- 元进度 ---------- */
.meta-desc{color:var(--ink-dim);font-size:13px;line-height:1.7;margin:0 0 14px;}
.meta-grid{display:flex;flex-direction:column;gap:10px;}
.meta-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.meta-card.maxed{border-color:var(--gold-dim);}
.meta-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.meta-lv{font-size:12px;color:var(--gold-dim);font-weight:400;}
.meta-card-desc{font-size:12.5px;color:var(--ink-dim);line-height:1.6;margin-bottom:10px;}

/* ---------- 角色创建 ---------- */
.create-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;}
.create-tip{color:var(--ink-dim);font-size:13px;text-align:center;margin:6px 0;}
.root-card{
  width:100%;max-width:340px;padding:26px 20px;border-radius:16px;text-align:center;
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,255,255,.05),transparent),var(--panel);
  border:1.5px solid var(--rc,var(--line));box-shadow:0 0 28px -8px var(--rc);
}
.root-name{font-size:30px;font-weight:800;letter-spacing:3px;margin-bottom:12px;}
.rare-tag{font-size:13px;color:var(--gold);vertical-align:super;}
.root-desc{font-size:14px;color:var(--ink-dim);line-height:1.8;}
.create-btns{display:flex;flex-direction:column;gap:10px;width:240px;}
.all-roots{width:100%;margin-top:10px;}
.roots-title{text-align:center;color:var(--muted);font-size:12px;margin:10px 0;}
.roots-list{display:flex;flex-direction:column;gap:6px;}
.root-mini{font-size:11.5px;color:var(--muted);padding:6px 10px;background:var(--panel);border-radius:8px;border:1px solid var(--line);}
.root-mini b{margin-right:8px;}

/* ---------- 玩家状态条 ---------- */
.pbar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.pbar-row{display:flex;gap:8px;align-items:center;font-size:12px;margin-bottom:8px;flex-wrap:wrap;}
.root-badge{font-weight:700;}
.realm-badge{color:var(--gold);background:rgba(232,198,107,.08);padding:2px 8px;border-radius:12px;border:1px solid var(--gold-dim);}
.gold-badge{margin-left:auto;}
.stat-line{display:flex;flex-direction:column;gap:5px;}
.stat-mini{font-size:11.5px;color:var(--ink-dim);margin-top:7px;text-align:center;}

/* 进度条 */
.bar{display:flex;align-items:center;gap:7px;font-size:11px;}
.bar-label{width:30px;color:var(--ink-dim);flex-shrink:0;}
.bar-track{flex:1;height:11px;background:#0c0a13;border-radius:6px;overflow:hidden;border:1px solid #2a2438;}
.bar-fill{height:100%;border-radius:6px;transition:width .35s ease;}
.bar.hp .bar-fill{background:linear-gradient(90deg,#a02e2e,var(--hp2));}
.bar.qi .bar-fill{background:linear-gradient(90deg,#2e5fa0,var(--qi));}
.bar.exp .bar-fill{background:linear-gradient(90deg,#7a5e1e,var(--exp));}
.bar.ehp .bar-fill{background:linear-gradient(90deg,#7a1e1e,#e05a5a);}
.bar-val{width:78px;text-align:right;color:var(--ink-dim);flex-shrink:0;font-variant-numeric:tabular-nums;}

/* ---------- 地图 ---------- */
.region-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:12px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--rcol,#333) -40%,var(--panel) 60%);border:1px solid var(--line);}
.region-info h2{margin:0 0 4px;font-size:18px;color:var(--ink);}
.region-no{font-size:11px;color:var(--gold-dim);font-weight:400;}
.region-info p{margin:0;font-size:12px;color:var(--ink-dim);line-height:1.5;}
.btn-menu{flex-shrink:0;}

@keyframes pulse{0%,100%{box-shadow:0 0 10px -2px var(--gold);}50%{box-shadow:0 0 20px 1px var(--gold);}}

/* 进度足迹 */
.path-trail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:4px 0 14px;}
.trail-cell{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;background:var(--panel);border:1px solid var(--line);flex-shrink:0;}
.trail-cell.done{opacity:.5;border-color:var(--gold-dim);}
.trail-cell.current{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px -2px var(--gold);
  animation:pulse 1.6s infinite;transform:scale(1.12);}
.trail-cell.future{color:var(--muted);opacity:.55;}
.trail-cell.boss-cell{border-color:#8a3a3a;color:#e08a8a;}
.trail-conn{width:9px;height:2px;background:var(--line);flex-shrink:0;}
.trail-conn.lit{background:var(--gold-dim);}

/* 抉择标题 */
.choice-title{text-align:center;color:var(--gold);font-size:15px;letter-spacing:3px;margin:2px 0 12px;font-weight:600;}

/* 抉择卡片 */
.choice-area{display:flex;flex-direction:column;gap:11px;margin-bottom:18px;}
.choice-card{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:.16s;position:relative;overflow:hidden;}
.choice-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line);}
.choice-card:hover{border-color:var(--gold-dim);transform:translateX(3px);box-shadow:var(--shadow);}
.choice-card:active{transform:scale(.99);}
.choice-card .cc-icon{font-size:32px;width:42px;text-align:center;flex-shrink:0;}
.choice-card .cc-body{flex:1;min-width:0;}
.choice-card .cc-label{font-size:16px;font-weight:700;margin-bottom:3px;}
.choice-card .cc-hint{font-size:12px;color:var(--ink-dim);line-height:1.5;}
.choice-card .cc-go{font-size:24px;color:var(--gold-dim);flex-shrink:0;}
.choice-card.t-battle::before{background:#c0604a;}
.choice-card.t-elite::before{background:#e0a05a;} .choice-card.t-elite .cc-label{color:#e0a05a;}
.choice-card.t-event::before{background:#9a5ac0;} .choice-card.t-event .cc-label{color:#c89ae8;}
.choice-card.t-shop::before{background:var(--gold);} .choice-card.t-shop .cc-label{color:var(--gold);}
.choice-card.t-rest::before{background:#4ac06a;} .choice-card.t-rest .cc-label{color:var(--jade);}
.choice-card.boss-choice{background:radial-gradient(80% 120% at 0% 50%,rgba(208,74,74,.18),var(--panel));
  border-color:#8a3a3a;box-shadow:0 0 22px -8px #c04a4a;animation:pulse-red 1.8s infinite;}
.choice-card.boss-choice .cc-label{color:#f0a0a0;font-size:18px;}
.choice-card.boss-choice::before{background:#e05a5a;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 14px -6px #c04a4a;}50%{box-shadow:0 0 26px -2px #c04a4a;}}

/* ---------- 背包面板 ---------- */
.inv-panel,.map-inv{margin-top:auto;}
.inv-sec{margin-bottom:10px;}
.inv-sec h4{margin:0 0 6px;font-size:12px;color:var(--gold-dim);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:4px;}
.inv-items{display:flex;flex-wrap:wrap;gap:6px;}
.chip{font-size:11px;padding:5px 9px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);line-height:1.2;}
.chip i{color:var(--qi);font-style:normal;font-size:10px;margin-left:2px;}
.chip.clickable{cursor:pointer;}
.chip.clickable:hover{border-color:var(--gold);}
.pill-chip{border-color:#3a5a3a;color:#9ad69a;}
.art-chip{border-color:#3a4a6a;}
.empty{font-size:11px;color:var(--muted);}

/* 稀有度标签 */
.rar{font-size:10px;font-weight:700;}
.rar.r1{color:var(--r1);} .rar.r2{color:var(--r2);} .rar.r3{color:var(--r3);} .rar.r4{color:var(--r4);}

/* ---------- 战斗 ---------- */
.combat-screen{padding:14px 12px;}
.enemy-zone{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;margin-bottom:10px;
  background:radial-gradient(80% 120% at 70% 0%,rgba(208,106,106,.12),transparent),var(--panel);
  border:1px solid #4a2a2a;}
.enemy-zone.boss{border-color:#8a3a3a;box-shadow:0 0 22px -6px #c04a4a;
  background:radial-gradient(80% 120% at 70% 0%,rgba(208,74,74,.22),transparent),var(--panel);}
.enemy-art{font-size:52px;filter:drop-shadow(0 0 10px rgba(208,106,106,.5));animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.enemy-info{flex:1;min-width:0;}
.enemy-name{font-size:17px;font-weight:700;color:#f0c0c0;margin-bottom:6px;}
.enemy-status{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;min-height:16px;font-size:11px;}

.combat-log{
  background:#0a0813;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;height:170px;overflow-y:auto;font-size:12.5px;line-height:1.7;margin-bottom:10px;
}
.combat-log::-webkit-scrollbar{width:4px;}
.combat-log::-webkit-scrollbar-thumb{background:#3a3350;border-radius:2px;}
.log-line{margin-bottom:2px;}
.lc-intro{color:var(--gold);font-style:italic;}
.lc-player{color:#9cc5f0;}
.lc-enemy{color:#f0a0a0;}
.lc-dmg{color:#e09090;}
.lc-crit{color:var(--crit);font-weight:700;}
.lc-good{color:var(--good);}
.lc-info{color:var(--ink-dim);}
.lc-warn{color:var(--warn);}
.lc-win{color:var(--gold);font-weight:700;}
.lc-lose{color:var(--bad);font-weight:700;}

.pcombat-bar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;}
.pcb-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;margin-bottom:8px;}
.turn-badge{color:var(--ink-dim);}
.tag{font-size:10px;padding:2px 7px;border-radius:10px;line-height:1.3;}
.tag-shield{background:rgba(127,166,224,.15);color:#9cc5f0;border:1px solid #3a4a6a;}
.tag-buff{background:rgba(127,206,140,.12);color:var(--good);border:1px solid #3a5a3a;}
.tag-debuff{background:rgba(224,90,90,.12);color:#e09090;border:1px solid #5a3a3a;}

.combat-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.combat-actions .act-tech{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 8px;}
.combat-actions .act-tech b{font-size:13px;font-weight:600;}
.combat-actions .act-tech i{font-style:normal;font-size:10px;color:var(--qi);}
.act-basic{border-color:#5a4a2a;}
.act-def{border-color:#3a4a6a;}
.act-tech.t-attack{border-left:3px solid #c0604a;}
.act-tech.t-buff{border-left:3px solid #4a8ac0;}
.act-tech.t-heal{border-left:3px solid #4ac06a;}
.act-tech.t-debuff{border-left:3px solid #9a5ac0;}
.btn-wide{grid-column:1/-1;}
.enemy-turn-hint{grid-column:1/-1;text-align:center;color:var(--ink-dim);padding:12px;}
.combat-inv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;}
.ci-label{font-size:11px;color:var(--gold-dim);}

/* ---------- 事件 / 休整 ---------- */
.event-screen,.rest-screen{justify-content:center;}
.event-card{
  background:radial-gradient(80% 60% at 50% 0%,rgba(232,198,107,.06),transparent),var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;
  box-shadow:var(--shadow);
}
.event-icon{font-size:44px;margin-bottom:6px;}
.event-card h2{margin:0 0 14px;color:var(--gold);font-size:21px;letter-spacing:1px;}
.event-text{color:var(--ink-dim);font-size:14px;line-height:2;margin:0 0 22px;text-align:left;}
.event-result{color:var(--ink);}
.event-options{display:flex;flex-direction:column;gap:10px;}
.btn-option{text-align:left;line-height:1.6;}

/* ---------- 商店 ---------- */
.shop-tip{color:var(--ink-dim);font-size:12.5px;font-style:italic;text-align:center;margin:0 0 14px;}
.shop-goods{display:flex;flex-direction:column;gap:10px;}
.shop-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.shop-card.sold{opacity:.45;}
.shop-card-head{display:flex;gap:8px;align-items:center;margin-bottom:5px;}
.shop-kind{font-size:10px;color:var(--muted);background:var(--panel2);padding:2px 7px;border-radius:10px;}
.shop-card-name{font-size:15px;font-weight:700;margin-bottom:5px;}
.shop-card-name i{font-style:normal;font-size:11px;color:var(--qi);}
.shop-card-desc{font-size:12.5px;color:var(--ink-dim);line-height:1.6;margin-bottom:10px;}
.shop-services{margin:14px 0;}
.shop-services .btn{width:100%;}

/* ---------- 奖励 ---------- */
.reward-screen{justify-content:center;}
.reward-card{background:radial-gradient(80% 60% at 50% 0%,rgba(232,198,107,.10),transparent),var(--panel);
  border:1px solid var(--gold-dim);border-radius:16px;padding:28px 22px;text-align:center;box-shadow:0 0 30px -10px var(--gold);}
.reward-icon{font-size:48px;margin-bottom:8px;animation:pop .4s ease;}
@keyframes pop{from{transform:scale(0);}to{transform:scale(1);}}
.reward-card h2{margin:0 0 16px;color:var(--gold);font-size:22px;}
.reward-list{list-style:none;padding:0;margin:0 0 20px;text-align:center;}
.reward-list li{font-size:14px;padding:5px 0;color:var(--ink);}
.reward-list .bt{color:var(--gold);font-weight:700;}
.reward-list .boss-drop{color:var(--r4);}
.region-clear{color:var(--jade);font-size:13px;font-style:italic;margin-bottom:16px;}

/* ---------- 结局 ---------- */
.end-screen{justify-content:center;text-align:center;}
.end-card{padding:30px 22px;}
.end-icon{font-size:60px;margin-bottom:10px;}
.end-screen.win .end-icon{color:var(--gold);text-shadow:0 0 30px var(--gold);}
.end-card h1{font-size:40px;margin:0 0 18px;letter-spacing:6px;}
.gameover .end-card h1{color:#888;}
.win .end-card h1{background:linear-gradient(180deg,#fff3cf,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.end-text{font-size:14px;line-height:2;color:var(--ink-dim);margin:0 0 18px;}
.end-text b{color:var(--ink);}
.end-karma{font-size:15px;color:var(--gold);margin:0 0 22px;}
.end-karma b{font-size:19px;}
.end-quote{font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.9;margin:0 0 26px;}
.end-btns{display:flex;flex-direction:column;gap:10px;}

/* ---------- 浮层 / 菜单 ---------- */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s;}
.menu-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;width:78%;max-width:300px;text-align:center;}
.menu-box h3{margin:0 0 18px;color:var(--gold);}
.menu-box .btn{margin-bottom:10px;}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
  background:rgba(20,16,30,.96);border:1px solid var(--gold-dim);color:var(--ink);
  padding:10px 18px;border-radius:24px;font-size:13px;opacity:0;pointer-events:none;
  transition:.25s;z-index:100;white-space:nowrap;box-shadow:var(--shadow);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.good{border-color:var(--good);color:#bfe8c5;}
#toast.bad{border-color:var(--bad);color:#f0b0b0;}

/* ---------- 桌面端：留出手机外框观感 ---------- */
@media (min-width:480px){
  #game-frame{border-radius:22px;border:1px solid #1a1626;height:96vh;}
}