/* ============================================================
   Ѫ�������� �� ��ʽ��
   ============================================================ */

:root{
  --bg:#080506;
  --ink:#e7dcd6;
  --ink-dim:#9a8b86;
  --blood:#c2101f;
  --blood-deep:#7c0a13;
  --blood-glow:#ff3b3b;
  --amber:#e8c37a;
  --purple:#5b2b57;
  --steel:#6f7b83;
  --panel:rgba(16,10,12,.92);
  --line:rgba(194,16,31,.35);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  height:100%;
  overflow:hidden;
  background:#000;
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

#app{position:fixed;inset:0;overflow:hidden;background:#000;}

#game{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  image-rendering:optimizeSpeed;
  touch-action:none;
}

.hidden{display:none !important;}

/* ============================================================
   ��Ļ�㣨���� / ������
   ============================================================ */
/* align-items:center �������ݸ�������ʱ�õ������ҹ�����ȥ��
   ���Ը��� flex-start + ��Ԫ�� margin:auto ������ */
.screen{
  position:absolute;inset:0;
  z-index:40;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(92,20,28,.42), transparent 62%),
    radial-gradient(100% 70% at 50% 110%, rgba(48,16,52,.5), transparent 60%),
    #080506;
  animation:fadeIn .35s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* �������� */
.sky{
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 12%, rgba(150,24,32,.35), transparent 70%),
    radial-gradient(50% 36% at 82% 8%,  rgba(96,36,110,.34), transparent 72%),
    radial-gradient(70% 40% at 50% 100%, rgba(20,20,24,.7), transparent 70%);
  filter:blur(2px);
  animation:skyDrift 22s ease-in-out infinite alternate;
}
@keyframes skyDrift{
  0%{transform:translate3d(0,0,0) scale(1.04);opacity:.85}
  100%{transform:translate3d(-3%,2%,0) scale(1.12);opacity:1}
}

.scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:.32;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.45) 2px 3px);
  mix-blend-mode:multiply;
}

/* ============================================================
   �������
   ============================================================ */
#titleInner{
  position:relative;z-index:2;
  margin:auto;
  width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:16px;
  padding:6px 0 20px;
}

.title-head{text-align:center;}
.kicker{
  font-size:11px;letter-spacing:.28em;color:var(--ink-dim);
  text-transform:uppercase;margin-bottom:10px;
}
.game-title{
  font-size:clamp(38px,13vw,68px);
  font-weight:900;letter-spacing:.06em;line-height:1;
  color:#f2e7e2;
  text-shadow:
    0 0 1px #000,
    0 2px 0 #3a0a10,
    0 0 22px rgba(194,16,31,.55),
    0 0 60px rgba(194,16,31,.28);
}
.game-title span{display:inline-block;animation:titleBreathe 3.4s ease-in-out infinite;}
.game-title span:nth-child(2){animation-delay:.18s}
.game-title span:nth-child(3){animation-delay:.36s}
.game-title span:nth-child(4){animation-delay:.54s}
.game-title span:nth-child(5){animation-delay:.72s}
@keyframes titleBreathe{
  0%,100%{transform:translateY(0);text-shadow:0 2px 0 #3a0a10,0 0 22px rgba(194,16,31,.5)}
  50%{transform:translateY(-3px);text-shadow:0 2px 0 #3a0a10,0 0 34px rgba(255,59,59,.8)}
}
.subtitle{
  margin-top:10px;font-size:11px;letter-spacing:.34em;color:#8d5b5b;
}

.broadcast{
  border-left:2px solid var(--blood);
  background:linear-gradient(90deg,rgba(120,12,20,.2),transparent);
  padding:10px 12px;border-radius:0 8px 8px 0;
}
.broadcast p{font-size:12.5px;line-height:1.75;color:#c8b6b0;}
.broadcast-sub{margin-top:6px;color:#8b7a76 !important;font-size:11.5px !important;}

.sec-title{
  font-size:12px;letter-spacing:.3em;color:var(--ink-dim);
  margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}

/* ��ɫѡ��Ƭ */
#charList{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:7px;
}
.char-card{
  position:relative;
  background:linear-gradient(180deg,rgba(30,18,20,.9),rgba(14,9,11,.9));
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:9px 4px 8px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s,transform .18s,background .18s;
  overflow:hidden;
}
.char-card:active{transform:scale(.96)}
.char-card.sel{
  border-color:var(--blood);
  background:linear-gradient(180deg,rgba(96,14,22,.55),rgba(20,10,12,.95));
  box-shadow:0 0 0 1px rgba(194,16,31,.4),0 6px 22px -8px rgba(194,16,31,.8);
}
.char-card.locked{opacity:.5;filter:grayscale(.8);padding-bottom:19px;}
.char-card canvas{height:46px;width:auto;display:block;margin:0 auto 4px;}
.char-card .cname{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#e9ded9;}
.char-card .ctag{font-size:9px;color:var(--ink-dim);margin-top:2px;letter-spacing:.06em;}
.char-card .lock-badge{
  position:absolute;inset:auto 0 0 0;font-size:8.5px;padding:2px;
  background:rgba(0,0,0,.7);color:#b99;letter-spacing:.05em;
}

#charDetail{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(12,8,9,.72);
  padding:11px 12px;
  min-height:104px;
}
.cd-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.cd-name{font-size:16px;font-weight:800;color:#f0e5e0;}
.cd-role{font-size:10.5px;color:var(--blood-glow);letter-spacing:.16em;}
.cd-quote{font-size:11.5px;color:#9d8c87;margin:6px 0 9px;line-height:1.6;font-style:italic;}
.cd-weapon{font-size:11.5px;color:#cbbcb6;margin-bottom:8px;}
.cd-weapon b{color:var(--amber);font-weight:700;}
.cd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.cd-stat{text-align:center;background:rgba(255,255,255,.035);border-radius:6px;padding:5px 2px;}
.cd-stat .k{font-size:9px;color:var(--ink-dim);letter-spacing:.08em;}
.cd-stat .v{font-size:12.5px;font-weight:700;margin-top:2px;}
.v.up{color:#79c47a}.v.dn{color:#d9615c}.v.mid{color:#c9bdb8}

/* ����ť */
.big-btn{
  width:100%;
  padding:14px 18px;
  font-size:16px;font-weight:800;letter-spacing:.26em;
  color:#fff2ef;
  background:linear-gradient(180deg,#b3121f,#6d0a12);
  border:1px solid rgba(255,120,110,.35);
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 8px 26px -10px rgba(194,16,31,.9),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .12s,filter .18s;
  font-family:inherit;
}
.big-btn:active{transform:translateY(2px) scale(.99);filter:brightness(1.15)}

.ghost-btn{
  padding:9px 14px;
  font-size:12px;letter-spacing:.14em;
  color:#b9a8a3;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:color .16s,border-color .16s,background .16s;
}
.ghost-btn:active{background:rgba(255,255,255,.09);color:#fff}
.ghost-btn.wide{width:100%;margin-top:9px;}
.ghost-btn:disabled{opacity:.35;}

.title-foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
}
#bestRecord{font-size:10.5px;color:#7d6e6a;letter-spacing:.1em;width:100%;text-align:center;margin-top:2px;}

/* ============================================================
   ͨ�õ��������� / ��ͣ / ���� / ���飩
   ============================================================ */
.modal{
  position:relative;z-index:2;
  margin:auto;
  width:100%;max-width:460px;
  background:var(--panel);
  border:1px solid rgba(194,16,31,.28);
  border-radius:14px;
  padding:18px 16px 16px;
  box-shadow:0 30px 80px -30px #000,0 0 0 1px rgba(255,255,255,.04) inset;
  animation:popIn .22s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.modal-title{
  font-size:19px;font-weight:900;letter-spacing:.24em;text-align:center;
  color:#f4e9e4;text-shadow:0 0 20px rgba(194,16,31,.6);
}
.modal-sub{
  text-align:center;font-size:11.5px;color:var(--ink-dim);
  margin:6px 0 14px;letter-spacing:.1em;line-height:1.6;
}

/* ������Ƭ */
#cardList{display:flex;flex-direction:column;gap:9px;}
.up-card{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;
  background:linear-gradient(90deg,rgba(38,22,25,.9),rgba(18,11,13,.9));
  border:1px solid rgba(255,255,255,.08);
  border-left-width:3px;
  border-radius:10px;cursor:pointer;
  transition:transform .12s,border-color .16s,background .16s;
  text-align:left;font-family:inherit;color:inherit;width:100%;
}
.up-card:active{transform:scale(.985)}
.up-card .ico{
  flex:0 0 40px;height:40px;border-radius:9px;
  background:rgba(0,0,0,.45);
  display:grid;place-items:center;
}
.up-card .ico canvas{width:30px;height:30px;image-rendering:pixelated;}
.up-card .txt{flex:1;min-width:0;}
.up-card .n{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.up-card .lv{font-size:9.5px;padding:1px 6px;border-radius:20px;background:rgba(255,255,255,.09);color:#c7b9b4;letter-spacing:.06em;}
.up-card .d{font-size:11px;color:#a2938e;margin-top:3px;line-height:1.55;}
.up-card .kind{font-size:9px;letter-spacing:.16em;color:#7a6b67;margin-top:4px;}

.up-card.r-common{border-left-color:#7b8892}
.up-card.r-rare{border-left-color:#4b8fd6}
.up-card.r-epic{border-left-color:#a35bd0}
.up-card.r-evo{
  border-left-color:var(--amber);
  background:linear-gradient(90deg,rgba(94,66,20,.55),rgba(24,14,10,.92));
  box-shadow:0 0 22px -8px rgba(232,195,122,.7);
}
.up-card.r-evo .n{color:var(--amber)}
.up-card.r-heal{border-left-color:#4fae6a}

.stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px;
}
.stat-grid .cell{
  background:rgba(255,255,255,.04);border-radius:8px;padding:8px 10px;
}
.stat-grid .k{font-size:10px;color:var(--ink-dim);letter-spacing:.1em;}
.stat-grid .v{font-size:15px;font-weight:800;margin-top:2px;color:#efe4df;}

.over-loadout{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;justify-content:center;}
.over-loadout .oi{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.05);border-radius:7px;padding:4px 7px;font-size:10.5px;color:#c3b5b0;
}
.over-loadout .oi canvas{width:18px;height:18px;image-rendering:pixelated;}
.over-loadout .oi b{color:var(--amber);font-weight:700;}

.how-body p{font-size:12.5px;line-height:2;color:#bcaca7;}
.how-body b{color:var(--amber);font-weight:700;}
.how-tip{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:var(--blood-glow) !important;letter-spacing:.08em;}

/* ============================================================
   HUD
   ============================================================ */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none;}

#hudTop{
  position:absolute;
  top:calc(6px + var(--safe-t));
  left:calc(8px + var(--safe-l));
  right:calc(8px + var(--safe-r));
  display:flex;flex-direction:column;gap:5px;
}

#xpTrack{
  position:relative;height:13px;border-radius:7px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
#xpFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#3f7fd8,#7fd0ff);
  box-shadow:0 0 12px rgba(90,180,255,.7);
  transition:width .16s linear;
}
#xpText{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:9px;font-weight:800;letter-spacing:.14em;
  color:#fff;text-shadow:0 1px 2px #000;
}

#hudRow{display:flex;align-items:center;gap:8px;}
#timer{
  font-size:22px;font-weight:900;letter-spacing:.06em;
  color:#f1e6e1;text-shadow:0 2px 6px #000,0 0 16px rgba(194,16,31,.5);
  font-variant-numeric:tabular-nums;
}
#hudStats{display:flex;gap:9px;flex:1;}
#hudStats span{
  font-size:11px;font-weight:700;color:#cbbcb7;
  display:flex;align-items:center;gap:3px;text-shadow:0 1px 3px #000;
}
.ic-skull,.ic-drop{width:9px;height:9px;display:inline-block;border-radius:2px;}
.ic-skull{background:#cdc3bd;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.ic-drop{background:var(--blood);clip-path:polygon(50% 0,100% 62%,50% 100%,0 62%)}

#pauseBtn{
  pointer-events:auto;
  width:34px;height:34px;border-radius:9px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
  color:#ddd0cb;font-size:11px;cursor:pointer;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;gap:4px;font-family:inherit;
}
#pauseBtn i{display:block;width:3px;height:13px;border-radius:1px;background:currentColor;}
#pauseBtn.paused i:first-child{display:none;}
#pauseBtn.paused i:last-child{
  width:0;height:0;background:none;border-radius:0;
  border-left:11px solid currentColor;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  margin-left:2px;
}
#pauseBtn:active{background:rgba(255,255,255,.12)}

#hpWrap{
  position:absolute;
  left:calc(8px + var(--safe-l));
  right:calc(8px + var(--safe-r));
  top:calc(66px + var(--safe-t));
  height:11px;border-radius:6px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
#hpChip{
  position:absolute;left:0;top:0;height:100%;width:100%;
  background:rgba(255,180,170,.5);
  transition:width .45s cubic-bezier(.4,0,.2,1) .12s;
}
#hpFill{
  position:absolute;left:0;top:0;height:100%;width:100%;
  background:linear-gradient(90deg,#8f0c17,#e0303a);
  box-shadow:0 0 12px rgba(224,48,58,.6);
  transition:width .1s linear;
  z-index:2;
}
#hpText{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  font-size:8px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.08em;
}

#loadout{
  position:absolute;
  left:calc(8px + var(--safe-l));
  top:calc(84px + var(--safe-t));
  display:flex;flex-wrap:wrap;gap:4px;max-width:64%;
}
.lo-item{
  position:relative;
  width:28px;height:28px;border-radius:7px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;
}
.lo-item canvas{width:20px;height:20px;image-rendering:pixelated;}
.lo-item .lvdot{
  position:absolute;right:-2px;bottom:-3px;
  font-size:8px;font-weight:800;color:#fff;
  background:#7c0a13;border-radius:20px;padding:0 3px;line-height:11px;min-width:11px;text-align:center;
  border:1px solid rgba(0,0,0,.6);
}
.lo-item.evo{border-color:var(--amber);box-shadow:0 0 10px -2px var(--amber)}
.lo-item.evo .lvdot{background:#8a6a1c}

#bossBar{
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b));
  width:min(84%,420px);
}
#bossName{
  font-size:10.5px;letter-spacing:.24em;color:#ffb4b0;text-align:center;
  margin-bottom:3px;text-shadow:0 1px 4px #000;
}
#bossTrack{
  height:9px;border-radius:5px;background:rgba(0,0,0,.7);
  border:1px solid rgba(255,110,110,.4);overflow:hidden;
}
#bossFill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#6d0a12,#ff4d4d,#ffb3b3);
  transition:width .16s linear;
}

#storyToast{
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:38%;
  width:min(88%,480px);
  text-align:center;
  font-size:15px;line-height:1.8;font-weight:700;
  color:#f2e2dd;
  text-shadow:0 2px 10px #000,0 0 24px rgba(194,16,31,.75);
  animation:storyIn 4.4s ease both;
  pointer-events:none;
}
#storyToast .who{display:block;font-size:10.5px;letter-spacing:.3em;color:var(--blood-glow);margin-bottom:6px;font-weight:600;}
@keyframes storyIn{
  0%{opacity:0;transform:translate(-50%,10px)}
  12%{opacity:1;transform:translate(-50%,0)}
  80%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-8px)}
}

/* ============================================================
   ����������
   ============================================================ */
/* ���㲻���¼���ֻ��ҡ�����ͳ�̼��ӹܣ����⵲ס HUD �ϵ���ͣ��ť */
#touchLayer{position:absolute;inset:0;z-index:25;pointer-events:none;}

#stickZone{
  position:absolute;
  left:0;bottom:0;
  width:58%;height:62%;
  pointer-events:auto;
}
#stickBase{
  position:absolute;
  width:112px;height:112px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  background:radial-gradient(circle,rgba(255,255,255,.07),rgba(0,0,0,.28));
  transform:translate(-50%,-50%);
  left:-999px;top:-999px;
  opacity:0;transition:opacity .16s;
  pointer-events:none;
}
#stickBase.on{opacity:1}
#stickKnob{
  position:absolute;left:50%;top:50%;
  width:50px;height:50px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 32%,rgba(255,120,120,.85),rgba(140,14,22,.9));
  box-shadow:0 0 18px rgba(194,16,31,.65),inset 0 1px 2px rgba(255,255,255,.35);
}

#dashBtn{
  position:absolute;
  right:calc(20px + var(--safe-r));
  bottom:calc(28px + var(--safe-b));
  width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,rgba(70,44,48,.92),rgba(20,10,12,.92));
  border:2px solid rgba(255,255,255,.16);
  color:#e5d6d1;cursor:pointer;
  pointer-events:auto;
  display:grid;place-items:center;
  font-family:inherit;
  overflow:hidden;
}
#dashBtn:active{filter:brightness(1.4)}
#dashBtn.ready{border-color:rgba(255,90,90,.7);box-shadow:0 0 22px -6px rgba(255,60,60,.9)}
.dash-label{font-size:13px;font-weight:800;letter-spacing:.12em;z-index:2;}
.dash-cd{position:absolute;inset:0;transform:rotate(-90deg);}
.dash-cd circle{
  fill:none;stroke:rgba(255,60,60,.55);stroke-width:8;
  stroke-dasharray:289;stroke-dashoffset:289;
}

#rotateHint{display:none;}

/* ============================================================
   ����Ӧ
   ============================================================ */
@media (min-width:700px){
  .game-title{font-size:64px;}
  #timer{font-size:26px;}
  #touchLayer.desktop-hide{display:none;}
}

@media (max-height:640px){
  .broadcast{display:none;}
  #titleInner{gap:12px;}
  .game-title{font-size:clamp(32px,11vw,50px);}
}

@media (orientation:landscape) and (max-height:520px){
  #titleInner{max-width:860px;gap:9px;padding-bottom:10px;}
  .broadcast{display:none;}
  .title-head{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;}
  .kicker{margin-bottom:0;font-size:10px;}
  .game-title{font-size:clamp(26px,5vw,40px);}
  .subtitle{margin-top:0;font-size:9.5px;}
  .char-card canvas{height:34px;}
  .char-card{padding:6px 3px 5px;}
  #charDetail{min-height:0;padding:8px 10px;}
  .cd-quote{display:none;}
  .cd-stats{grid-template-columns:repeat(4,1fr);}
  .cd-stat{padding:3px 2px;}
  .big-btn{padding:11px 16px;font-size:14px;}
  .modal{max-width:640px;padding:14px 14px 12px;}
  #cardList{display:grid;grid-template-columns:1fr 1fr;}
  .modal-title{font-size:16px;}
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  #stickZone{height:82%;width:46%;}
  #dashBtn{width:64px;height:64px;bottom:calc(18px + var(--safe-b));}
}