:root{
  --bg:#05060a;
  --fg:#e9ecf2;
  --dim:#7b8496;
  --faint:#4a5261;
  --line:rgba(255,255,255,.10);
  --panel:rgba(14,17,26,.72);
  --accent:#ff4d4d;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

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

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

body{
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

#stage{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  touch-action:none;
}

/* ---------------- 顶栏 ---------------- */

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:10;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:linear-gradient(180deg,rgba(5,6,10,.92) 0%,rgba(5,6,10,.62) 72%,rgba(5,6,10,0) 100%);
  transition:opacity .4s ease;
}

.topbar .row{
  display:flex;align-items:center;gap:9px;
  height:24px;
}

.label{font-size:11px;letter-spacing:.16em;color:var(--dim)}

.pct{
  font-family:var(--mono);
  font-size:14px;font-weight:500;
  color:var(--fg);
  min-width:44px;
}

.spacer{flex:1}

.stat{
  font-family:var(--mono);
  font-size:11.5px;color:var(--dim);
  letter-spacing:.03em;
}

.combo{
  font-size:12px;font-weight:600;
  color:#ffd166;
  opacity:0;
  transform:scale(.7);
  transition:opacity .16s ease,transform .16s cubic-bezier(.3,1.6,.5,1);
  white-space:nowrap;
}
.combo.on{opacity:1;transform:scale(1)}

.icon{
  font:inherit;font-size:15px;
  line-height:1;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-radius:100px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg);
}
.icon.off{opacity:.45}

.track{
  margin-top:9px;
  height:6px;
  border-radius:100px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}

.bar{
  height:100%;
  width:0%;
  border-radius:100px;
  background:linear-gradient(90deg,#22d3ee 0%,#a855f7 46%,#ff4d4d 100%);
  background-size:100vw 100%;
  transition:width .13s ease-out;
  box-shadow:0 0 12px rgba(255,77,77,.5);
}

/* ---------------- 武器栏 ---------------- */

.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:10;
  padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 10px);
  background:linear-gradient(0deg,rgba(5,6,10,.95) 0%,rgba(5,6,10,.72) 66%,rgba(5,6,10,0) 100%);
  transition:opacity .4s ease;
}

.weapons{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 14px 6px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.weapons::-webkit-scrollbar{display:none}

.wp{
  flex:0 0 auto;
  width:74px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 7px;
  font:inherit;
  color:var(--dim);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:14px;
  transition:transform .12s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.wp .ic{font-size:24px;line-height:1.1;filter:grayscale(.35) opacity(.8);transition:filter .2s ease}
.wp .nm{font-size:10.5px;line-height:1.15;text-align:center;letter-spacing:.01em}

.wp.on{
  background:rgba(255,77,77,.13);
  border-color:rgba(255,77,77,.62);
  color:var(--fg);
  transform:translateY(-3px);
}
.wp.on .ic{filter:none}
.wp:active{transform:scale(.94)}

body:not(.playing) .topbar,
body:not(.playing) .dock{opacity:0;pointer-events:none}

/* ---------------- 开场 ---------------- */

.intro{
  position:fixed;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  padding:36px 24px;
  background:
    radial-gradient(120% 76% at 50% -6%,rgba(52,18,24,.86) 0%,rgba(5,6,10,.94) 62%);
  transition:opacity .5s ease,visibility .5s ease;
}
body.playing .intro{opacity:0;visibility:hidden;pointer-events:none}

.intro .box{width:100%;max-width:420px}

.kicker{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:.22em;
  color:var(--accent);
  margin-bottom:14px;
}

.intro h1{
  font-size:clamp(40px,13vw,60px);
  font-weight:500;letter-spacing:-.02em;line-height:1;
}

.intro p{
  margin-top:16px;
  font-size:14px;line-height:1.8;color:var(--dim);
}

.picks{margin-top:30px;display:flex;flex-direction:column;gap:11px}

button.primary,button.ghost{
  font:inherit;font-size:15px;
  padding:15px 26px;
  border-radius:100px;
  border:1px solid transparent;
  transition:transform .14s ease,box-shadow .2s ease,background .2s ease;
}
button.primary{
  font-weight:500;
  color:#1a0505;
  background:linear-gradient(135deg,#ff8a5c 0%,#ff4d4d 100%);
  box-shadow:0 10px 30px -10px rgba(255,77,77,.75);
}
button.ghost{
  color:var(--fg);
  background:rgba(255,255,255,.06);
  border-color:var(--line);
}
button.primary:active,button.ghost:active{transform:scale(.97)}

.hint{margin-top:18px;font-size:11.5px;color:var(--faint);line-height:1.6}

/* ---------------- 结算 ---------------- */

.overlay{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:28px 22px;
  background:rgba(4,5,9,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .38s ease,visibility .38s ease;
}
.overlay.show{opacity:1;visibility:visible}

.overlay .card{
  width:100%;max-width:400px;
  background:rgba(18,20,30,.9);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px 26px 26px;
  text-align:center;
  transform:scale(.94);
  transition:transform .42s cubic-bezier(.2,1.5,.45,1);
}
.overlay.show .card{transform:scale(1)}

.ko{
  font-size:clamp(46px,15vw,64px);
  font-weight:500;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,#ffd166 0%,#ff4d4d 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.overlay .sub{margin-top:10px;font-size:12.5px;color:var(--dim)}

.grid2{
  margin-top:26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.cell{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 8px 12px;
  display:flex;flex-direction:column;gap:5px;
}
.cell b{
  font-family:var(--mono);
  font-size:19px;font-weight:500;color:var(--fg);
}
.cell span{font-size:11px;color:var(--dim);letter-spacing:.04em}

.acts{margin-top:24px;display:flex;flex-direction:column;gap:10px}

@media (max-height:560px){
  .intro h1{font-size:clamp(32px,10vw,44px)}
  .intro p{display:none}
  .picks{margin-top:20px}
}