/* ============================================================
   赵云与阿斗 · 水墨风 UI
   配色：玄墨底 / 宣纸字 / 朱砂印 / 鎏金将
   ============================================================ */
:root{
  --ink-0:#0c0e12;
  --ink-1:#14171d;
  --ink-2:#1c2028;
  --paper:#e9e2cf;
  --paper-dim:#b9b29d;
  --vermilion:#c2452d;
  --vermilion-deep:#93301f;
  --gold:#d8b46a;
  --gold-bright:#f0cf8e;
  --jade:#7fbf9a;
  --brush:'Ma Shan Zheng','Xingkai SC','STXingkai','华文行楷','KaiTi','楷体',serif;
  --display:'ZCOOL QingKe HuangYou','Ma Shan Zheng','KaiTi','楷体',sans-serif;
  --body:'Noto Serif SC','Songti SC','SimSun','宋体',serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:var(--ink-0);
  font-family:var(--body);
  color:var(--paper);
  user-select:none;-webkit-user-select:none;
}

/* ---------- 页面背景：玄墨 + 巨幅水印字 ---------- */
#page{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1200px 700px at 18% -10%, #1a1f28 0%, transparent 60%),
    radial-gradient(1000px 800px at 110% 105%, #161a21 0%, transparent 55%),
    var(--ink-0);
}
#page::before{
  content:"漢";
  position:absolute;left:-4vw;top:50%;
  transform:translateY(-54%);
  font-family:var(--brush);
  font-size:44vh;line-height:1;
  color:rgba(233,226,207,.028);
  pointer-events:none;
}
#page::after{
  content:"魂";
  position:absolute;right:-3vw;bottom:-6vh;
  font-family:var(--brush);
  font-size:40vh;line-height:1;
  color:rgba(194,69,45,.035);
  pointer-events:none;
}

/* 两侧竖排题字（窄屏隐藏） */
.side-verse{
  position:absolute;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--brush);
  font-size:clamp(18px,2.6vh,30px);
  letter-spacing:.55em;
  color:rgba(233,226,207,.16);
  pointer-events:none;
}
.side-verse.left{left:calc(50% - min(46vh,46vw) - 70px)}
.side-verse.right{right:calc(50% - min(46vh,46vw) - 70px)}
@media (max-width:820px){.side-verse{display:none}}

/* ---------- 舞台：立轴装裱 ---------- */
#stage{
  position:relative;
  width:480px;height:800px;flex:none;
  background:var(--ink-1);
  box-shadow:
    0 0 0 1px #2c2a22,
    0 0 0 5px #17150f,
    0 0 0 6px rgba(216,180,106,.28),
    0 30px 80px rgba(0,0,0,.65);
}
#cv{position:absolute;inset:0;width:480px;height:800px;display:block;touch-action:none;cursor:default}

/* ---------- HUD ---------- */
#hud{
  position:absolute;left:0;right:0;top:0;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
  background:linear-gradient(180deg, rgba(10,12,16,.88), rgba(10,12,16,.35) 78%, transparent);
  pointer-events:none;z-index:5;
}
#hud .hud-right{display:flex;align-items:center;gap:8px;pointer-events:auto}
.hud-brush{font-family:var(--brush);font-size:24px;color:var(--paper);text-shadow:0 2px 6px rgba(0,0,0,.7)}
.hud-small{font-family:var(--display);font-size:13px;color:var(--paper-dim);margin-left:8px}
.hud-gold{font-family:var(--display);font-size:17px;color:var(--gold-bright);text-shadow:0 0 10px rgba(216,180,106,.35)}
.hud-btn{
  width:32px;height:32px;border:1px solid rgba(233,226,207,.3);
  background:rgba(20,23,29,.7);color:var(--paper);
  font-family:var(--brush);font-size:16px;line-height:1;
  cursor:pointer;transition:all .15s;
}
.hud-btn:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.hud-btn:active{transform:scale(.92)}
.hud-btn.off{color:#5c616b;border-color:#3a3f48}

/* ---------- 招募按钮（朱砂印） ---------- */
#btn-recruit{
  position:absolute;right:14px;bottom:16px;z-index:6;
  width:82px;height:82px;border:none;cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #d4553a, var(--vermilion) 55%, var(--vermilion-deep));
  color:#fdf6e8;font-family:var(--brush);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(253,246,232,.35), inset 0 0 18px rgba(80,15,5,.55);
  transform:rotate(-3deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .15s, box-shadow .15s;
}
#btn-recruit:hover{transform:rotate(0deg) scale(1.05)}
#btn-recruit:active{transform:scale(.94)}
#btn-recruit .rec-glyph{font-size:34px;line-height:1}
#btn-recruit .rec-cost{font-family:var(--display);font-size:12px;opacity:.9}
#btn-recruit.disabled{filter:grayscale(.75) brightness(.7);cursor:not-allowed;transform:rotate(-3deg)}

/* ---------- 遮罩与面板 ---------- */
.overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,14,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:ov-in .3s ease both;
}
.overlay.hidden{display:none}
@keyframes ov-in{from{opacity:0}to{opacity:1}}

.panel{
  width:min(400px,88%);
  background:linear-gradient(170deg,#1b1f27,#14171d 70%);
  border:1px solid rgba(233,226,207,.16);
  outline:1px solid rgba(216,180,106,.18);outline-offset:4px;
  padding:30px 28px 26px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:panel-in .38s cubic-bezier(.2,1.4,.4,1) both;
}
.panel.slim{width:min(320px,84%)}
@keyframes panel-in{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}

.panel-title{
  font-family:var(--brush);font-weight:400;
  font-size:42px;letter-spacing:.18em;color:var(--paper);
  text-shadow:0 3px 12px rgba(0,0,0,.7);
}
.panel-btns{display:flex;gap:14px;justify-content:center;margin-top:22px}

/* 印章主按钮 */
.seal-btn{
  border:none;cursor:pointer;
  background:radial-gradient(circle at 32% 28%, #d4553a, var(--vermilion) 58%, var(--vermilion-deep));
  color:#fdf6e8;font-family:var(--brush);font-size:22px;letter-spacing:.2em;
  padding:12px 30px 12px 34px;
  transform:rotate(-2deg);
  box-shadow:0 5px 16px rgba(0,0,0,.5), inset 0 0 0 2px rgba(253,246,232,.35), inset 0 0 16px rgba(80,15,5,.5);
  transition:transform .15s, box-shadow .15s;
}
.seal-btn:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.55), inset 0 0 0 2px rgba(253,246,232,.45), inset 0 0 16px rgba(80,15,5,.5)}
.seal-btn:active{transform:scale(.95)}
.seal-btn.big{font-size:28px;padding:15px 40px 15px 46px}

/* 墨线次按钮 */
.ink-btn{
  cursor:pointer;background:transparent;
  border:1px solid rgba(233,226,207,.4);
  color:var(--paper);font-family:var(--brush);font-size:20px;letter-spacing:.2em;
  padding:12px 26px 12px 30px;
  transition:all .15s;
}
.ink-btn:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.ink-btn:active{transform:scale(.95)}

/* ---------- 开始菜单（非对称构图） ---------- */
#menu-start{justify-content:flex-start;background:rgba(8,10,14,.55)}
.ink-blot{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.ink-blot.b1{width:340px;height:300px;right:-90px;top:-70px;background:radial-gradient(closest-side, rgba(194,69,45,.16), transparent 70%)}
.ink-blot.b2{width:420px;height:380px;left:-140px;bottom:-120px;background:radial-gradient(closest-side, rgba(233,226,207,.06), transparent 70%)}

.start-verse{
  position:absolute;left:26px;top:120px;
  font-family:var(--brush);font-size:30px;line-height:1.5;
  color:rgba(233,226,207,.5);letter-spacing:.3em;
  border-right:1px solid rgba(233,226,207,.2);
  padding-right:14px;
  animation:verse-in 1s .2s ease both;
}
@keyframes verse-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.start-body{margin-left:118px;margin-top:66px;animation:body-in .8s .35s cubic-bezier(.2,1.2,.4,1) both}
@keyframes body-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.start-kicker{
  font-family:var(--display);font-size:14px;letter-spacing:.5em;
  color:var(--gold);margin-bottom:10px;
}
.start-title{
  font-family:var(--brush);font-weight:400;
  font-size:66px;line-height:1.12;color:var(--paper);
  text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 34px rgba(233,226,207,.15);
}
.start-title .amp{font-size:40px;color:var(--vermilion);margin:0 4px;vertical-align:12px}

.start-seal-row{display:flex;gap:10px;margin:18px 0 16px}
.mini-seal{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--vermilion);color:#fdf6e8;
  font-family:var(--brush);font-size:20px;
  box-shadow:inset 0 0 0 1.5px rgba(253,246,232,.4), 0 3px 8px rgba(0,0,0,.4);
  animation:stamp-in .45s cubic-bezier(.2,2.2,.4,1) both;
}
.mini-seal.s1{transform:rotate(-6deg);animation-delay:.55s}
.mini-seal.s2{transform:rotate(4deg);animation-delay:.7s}
.mini-seal.s3{transform:rotate(-3deg);animation-delay:.85s}
@keyframes stamp-in{from{opacity:0;transform:scale(1.9) rotate(0deg)}to{opacity:1}}

.start-desc{font-size:14px;line-height:2;color:var(--paper-dim);margin-bottom:26px}
.start-btns{display:flex;gap:16px;align-items:center}
.start-best{margin-top:24px;font-family:var(--display);font-size:13px;letter-spacing:.2em;color:rgba(216,180,106,.75)}

/* ---------- 玩法说明 ---------- */
.help-list{list-style:none;text-align:left;margin:20px 0 6px;display:flex;flex-direction:column;gap:14px}
.help-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.85;color:var(--paper-dim)}
.help-list b{color:var(--paper);font-weight:700}
.help-num{
  flex:none;width:30px;height:30px;display:grid;place-items:center;margin-top:2px;
  border:1px solid rgba(194,69,45,.6);color:var(--vermilion);
  font-family:var(--brush);font-size:17px;transform:rotate(-4deg);
}
.hl-gold{color:var(--gold-bright)}
.hl-red{color:#e8664c}
.help-tips{display:flex;gap:8px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap}
.tip{
  font-family:var(--display);font-size:12px;color:var(--paper-dim);
  border:1px dashed rgba(233,226,207,.25);padding:4px 10px;
}
.pause-sub{margin-top:10px;font-size:13px;color:var(--paper-dim);letter-spacing:.3em}

/* ---------- 结算 ---------- */
.end-title{font-size:56px}
.end-title.win{color:var(--gold-bright);text-shadow:0 0 26px rgba(216,180,106,.4)}
.end-title.lose{color:#e8664c}
.end-sub{margin-top:8px;font-size:14px;color:var(--paper-dim);letter-spacing:.25em}
.end-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin:22px 0 6px;padding:14px 4px;
  border-top:1px solid rgba(233,226,207,.14);border-bottom:1px solid rgba(233,226,207,.14);
}
.stat{display:flex;flex-direction:column;gap:4px}
.stat-v{font-family:var(--display);font-size:24px;color:var(--paper)}
.stat-k{font-size:11px;color:var(--paper-dim);letter-spacing:.2em}
.end-newbest{margin:8px 0 0;font-family:var(--display);font-size:14px;color:var(--gold-bright);letter-spacing:.3em;animation:pulse 1s ease infinite}
@keyframes pulse{50%{opacity:.45}}

/* ---------- 受击红闪 ---------- */
#breach-flash{
  position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 50% 100%, rgba(194,45,25,.4), transparent 60%);
}
#breach-flash.on{animation:breach .5s ease-out}
@keyframes breach{0%{opacity:1}100%{opacity:0}}

/* ---------- 护主大招按钮（充能环 + 就绪脉冲） ---------- */
.rage-btn{
  position:absolute;top:58px;right:8px;z-index:6;
  width:44px;height:44px;border-radius:50%;border:none;cursor:not-allowed;
  display:grid;place-items:center;
  background:conic-gradient(var(--rage-col,#5a3a2a) calc(var(--p,0)*1%), rgba(18,21,27,.9) 0);
  box-shadow:inset 0 0 0 2px rgba(233,226,207,.16), 0 3px 10px rgba(0,0,0,.5);
  transition:transform .12s;
}
.rage-btn::after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2a2018, #14100b);
}
.rage-glyph{
  position:relative;z-index:1;
  font-family:var(--brush);font-size:23px;color:#7a6a55;line-height:1;
  transition:color .2s, text-shadow .2s;
}
.rage-btn.ready{cursor:pointer;animation:rage-pulse 1s ease-in-out infinite}
.rage-btn.ready .rage-glyph{color:#ffe9b0;text-shadow:0 0 12px rgba(240,207,142,.85)}
.rage-btn.ready::after{background:radial-gradient(circle at 35% 30%, #5a2418, #2a0f08)}
.rage-btn:active{transform:scale(.88)}
@keyframes rage-pulse{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(240,207,142,.5), 0 0 0 0 rgba(194,69,45,.5), 0 3px 10px rgba(0,0,0,.5)}
  50%{box-shadow:inset 0 0 0 2px rgba(240,207,142,.85), 0 0 0 9px rgba(194,69,45,0), 0 3px 16px rgba(0,0,0,.6)}
}