/* ========== 放置修仙H5 · 古风样式 ========== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --ink:#14100a;
  --ink2:#1f1810;
  --panel:#241c12;
  --panel2:#2e2416;
  --gold:#d4af37;
  --gold-light:#f0d98a;
  --gold-dim:#9a7d2b;
  --jade:#7ed957;
  --red:#c0392b;
  --text:#f0e4c8;
  --text-dim:#a89878;
  --border:#4a3a22;
}
html,body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background: radial-gradient(ellipse at top, #241c12 0%, #14100a 70%);
  color:var(--text);
  overflow-x:hidden;
  user-select:none;
}
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; }

/* ========== 登录界面 ========== */
.login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(circle at 50% 20%, rgba(212,175,55,.08), transparent 50%),
    radial-gradient(ellipse at top, #241c12 0%, #14100a 70%);
}
.login-box {
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--gold-dim); border-radius:14px; padding:32px 26px;
  box-shadow:0 0 40px rgba(212,175,55,.15), inset 0 0 30px rgba(0,0,0,.3);
}
.game-title { text-align:center; margin-bottom:24px; }
.title-main { font-size:38px; font-weight:700; letter-spacing:10px; color:var(--gold);
  text-shadow:0 0 18px rgba(212,175,55,.5); padding-left:10px; }
.title-sub { font-size:14px; letter-spacing:8px; color:var(--text-dim); margin-top:6px; padding-left:8px; }
.login-tabs { display:flex; gap:10px; margin-bottom:18px; }
.tab-btn { flex:1; padding:10px; background:transparent; color:var(--text-dim);
  border:1px solid var(--border); border-radius:8px; font-size:15px; letter-spacing:4px; transition:.2s; }
.tab-btn.active { color:var(--gold); border-color:var(--gold); background:rgba(212,175,55,.08); }
.login-input {
  width:100%; padding:13px 14px; margin-bottom:12px; background:var(--ink2);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px;
}
.login-input:focus { border-color:var(--gold); }
.login-submit {
  width:100%; padding:14px; margin-top:6px; font-size:17px; letter-spacing:8px; padding-left:8px;
  color:#1a1408; font-weight:700; border-radius:8px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 4px 14px rgba(212,175,55,.3); transition:.15s;
}
.login-submit:active { transform:scale(.97); }
.login-msg { color:#e8746b; font-size:13px; text-align:center; min-height:18px; margin-top:8px; }
.login-tip { text-align:center; color:var(--text-dim); font-size:12px; margin-top:14px; }

/* ========== 游戏主界面布局 ========== */
.game-screen { min-height:100vh; display:flex; flex-direction:column; max-width:1100px; margin:0 auto; }
.top-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:rgba(20,16,10,.6); backdrop-filter:blur(4px); position:sticky; top:0; z-index:10;
}
.player-info { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.player-name { font-size:17px; font-weight:700; color:var(--gold-light); }
.player-realm { font-size:14px; color:var(--gold); border:1px solid var(--gold-dim); padding:2px 10px; border-radius:20px; }
.top-resources { display:flex; align-items:center; gap:12px; }
.res-stone { color:var(--gold-light); font-size:15px; font-weight:600; }
.btn-small { background:var(--panel2); color:var(--text-dim); border:1px solid var(--border);
  padding:5px 12px; border-radius:6px; font-size:12px; }
.btn-small:active { background:var(--border); }

.main-layout { flex:1; display:flex; gap:14px; padding:14px; align-items:flex-start; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
.cultivate-panel { flex:1.2; min-width:0; }
.side-panel { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ========== 修炼面板 ========== */
.cult-stage { text-align:center; margin-bottom:8px; }
.stage-label { font-size:12px; color:var(--text-dim); letter-spacing:3px; }
.stage-name { font-size:26px; font-weight:700; color:var(--gold); margin-top:4px;
  text-shadow:0 0 14px rgba(212,175,55,.4); letter-spacing:2px; }

.cult-visual { position:relative; height:180px; display:flex; align-items:center; justify-content:center; margin:6px 0; }
.taiji {
  width:90px; height:90px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--gold) 0%, var(--ink) 25%, var(--gold) 50%, var(--ink) 75%, var(--gold) 100%);
  animation:spin 6s linear infinite;
  box-shadow:0 0 30px rgba(212,175,55,.4);
  position:relative;
}
.taiji::after {
  content:""; position:absolute; inset:18px; border-radius:50%;
  background:radial-gradient(circle, var(--ink2) 30%, transparent 31%),
             conic-gradient(from 180deg, var(--ink) 0%, var(--gold-light) 25%, var(--ink) 50%, var(--gold-light) 75%, var(--ink) 100%);
}
@keyframes spin { to { transform:rotate(360deg); } }
.aura { position:absolute; border-radius:50%; border:1px solid rgba(212,175,55,.3); animation:pulse 3s ease-out infinite; }
.aura1 { width:120px; height:120px; }
.aura2 { width:120px; height:120px; animation-delay:1s; }
.aura3 { width:120px; height:120px; animation-delay:2s; }
@keyframes pulse {
  0% { transform:scale(.75); opacity:.9; }
  100% { transform:scale(1.6); opacity:0; }
}
.cult-text { position:absolute; bottom:0; font-size:13px; color:var(--text-dim); letter-spacing:4px; }

.progress-block { margin:10px 0; }
.progress-label { display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.progress-bar { height:14px; background:var(--ink); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.progress-fill {
  height:100%; width:0%; border-radius:10px; transition:width .4s;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-light));
  box-shadow:0 0 8px rgba(212,175,55,.6);
}

.speed-info { background:var(--ink2); border-radius:8px; padding:10px 12px; margin:12px 0; }
.speed-row { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--text-dim); }
.speed-row span:last-child { color:var(--text); }
.bonus-text { color:var(--jade) !important; }

.btn-break {
  width:100%; padding:14px; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:linear-gradient(135deg,#8e2b20,var(--red)); color:#fff5e0;
  box-shadow:0 4px 16px rgba(192,57,43,.35); transition:.15s;
}
.btn-break:active { transform:scale(.98); }
.btn-break:disabled { filter:grayscale(.7) brightness(.7); cursor:not-allowed; }
.break-main { font-size:19px; font-weight:700; letter-spacing:8px; padding-left:8px; }
.break-sub { font-size:12px; opacity:.85; }
.next-realm { text-align:center; font-size:12px; color:var(--text-dim); margin-top:8px; }

/* ========== 右侧标签页 ========== */
.side-tabs { display:flex; gap:6px; margin-bottom:12px; }
.side-tab { flex:1; padding:8px 4px; font-size:13px; background:var(--ink2); color:var(--text-dim);
  border:1px solid var(--border); border-radius:6px; }
.side-tab.active { color:var(--gold); border-color:var(--gold-dim); background:rgba(212,175,55,.08); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.draw-area { margin-bottom:12px; }
.draw-row { display:flex; gap:10px; }
.btn-draw { flex:1; padding:12px 6px; font-size:14px; line-height:1.4; border-radius:8px;
  background:linear-gradient(135deg,var(--panel2),var(--ink2)); color:var(--gold-light);
  border:1px solid var(--gold-dim); }
.btn-draw small { font-size:11px; color:var(--text-dim); }
.btn-draw:active { transform:scale(.97); }
.quality-legend { display:flex; justify-content:space-between; font-size:11px; margin-top:8px; padding:0 2px; }

.bag-section { margin-top:12px; }
.bag-title { font-size:13px; color:var(--gold); margin-bottom:8px; }
.equip-tip { font-size:11px; color:var(--text-dim); font-weight:400; }
.bag-list { display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.bag-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; background:var(--ink2); border:1px solid var(--border);
  border-left-width:3px; border-radius:6px; font-size:13px;
}
.bag-item.equipped { outline:1px solid var(--gold); background:rgba(212,175,55,.08); }
.bag-item-name { font-weight:600; }
.bag-item-bonus { font-size:12px; color:var(--jade); }
.empty-tip { text-align:center; color:var(--text-dim); font-size:12px; padding:16px 0; }

.rank-list { max-height:430px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.rank-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--ink2);
  border-radius:6px; font-size:13px; }
.rank-no { width:26px; text-align:center; font-weight:700; color:var(--text-dim); }
.rank-no.top1 { color:#ffd43b; } .rank-no.top2 { color:#d8d8d8; } .rank-no.top3 { color:#e0a458; }
.rank-name { flex:1; }
.rank-stage { color:var(--gold); font-size:12px; }
.rank-me { outline:1px solid var(--gold-dim); }

.me-stat { font-size:13px; line-height:2; }
.me-stat .stat-row { display:flex; justify-content:space-between; border-bottom:1px dashed var(--border); padding:2px 0; }
.me-stat .stat-row span:last-child { color:var(--gold-light); }

/* ========== 日志区 ========== */
.log-bar { border-top:1px solid var(--border); background:rgba(20,16,10,.7); padding:8px 16px; height:96px; }
.log-list { height:100%; overflow-y:auto; font-size:12px; line-height:1.7; color:var(--text-dim); }
.log-line .log-time { color:#6b5d44; margin-right:6px; }
.log-line.good { color:var(--jade); }
.log-line.bad { color:#e8746b; }
.log-line.gold { color:var(--gold-light); }

/* ========== 弹窗 ========== */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box {
  width:100%; max-width:340px; background:var(--panel); border:1px solid var(--gold-dim);
  border-radius:14px; padding:28px 24px; text-align:center;
  box-shadow:0 0 50px rgba(212,175,55,.25);
  animation:pop .3s ease;
}
@keyframes pop { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-btn {
  width:100%; padding:12px; margin-top:18px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1408;
  font-size:16px; font-weight:700; letter-spacing:4px;
}
.break-result-icon { font-size:52px; margin-bottom:8px; }
.break-result-icon.success { color:var(--gold); text-shadow:0 0 24px rgba(212,175,55,.8); animation:glow 1.2s; }
.break-result-icon.fail { color:#e8746b; }
@keyframes glow { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
.break-result-title { font-size:22px; font-weight:700; letter-spacing:4px; margin-bottom:10px; }
.break-result-title.success { color:var(--gold); }
.break-result-title.fail { color:#e8746b; }
.break-result-desc { font-size:14px; color:var(--text-dim); line-height:1.8; }

.offline-title { font-size:22px; letter-spacing:8px; padding-left:8px; color:var(--gold); margin-bottom:14px; }
.offline-time { color:var(--text-dim); font-size:13px; margin-bottom:16px; }
.offline-gain { background:var(--ink2); border-radius:8px; padding:12px; }
.gain-row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; }
.gain-row span:last-child { color:var(--jade); font-weight:600; }
.offline-note { font-size:11px; color:var(--text-dim); margin-top:10px; }

.draw-quality { font-size:14px; letter-spacing:6px; padding-left:6px; margin-bottom:6px; }
.draw-name { font-size:30px; font-weight:700; letter-spacing:4px; padding-left:4px; margin-bottom:8px;
  text-shadow:0 0 20px currentColor; }
.draw-bonus { font-size:14px; color:var(--jade); }

/* Toast */
.toast {
  position:fixed; left:50%; top:18%; transform:translateX(-50%); z-index:200;
  background:rgba(30,22,12,.95); border:1px solid var(--gold-dim); color:var(--text);
  padding:10px 20px; border-radius:8px; font-size:14px; max-width:80%; text-align:center;
  animation:toastIn .25s;
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%,-10px); } to { opacity:1; transform:translate(-50%,0); } }

/* ========== 手机端适配 ========== */
@media (max-width:720px) {
  .main-layout { flex-direction:column; padding:10px; gap:10px; }
  .cultivate-panel,.side-panel { width:100%; }
  .stage-name { font-size:22px; }
  .cult-visual { height:150px; }
  .title-main { font-size:32px; }
  .bag-list,.rank-list { max-height:none; }
  .log-bar { height:80px; }
}