/* ===== 闪身步 · 竖屏小游戏 ===== */
:root{
  --ink:#151217;
  --paper:#f5efe1;
  --red:#ff3b30;
  --yellow:#ffd93d;
  --blue:#2f6bff;
  --mint:#8ef0c0;
  --sans:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  background:#0c0b10;
  background-image:radial-gradient(circle at 50% 18%, #201e2b 0%, #0a090e 72%);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  overscroll-behavior:none;
}

#frame{
  position:fixed;left:0;top:0;
  width:1080px;height:1920px;
  transform-origin:0 0;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}
#game{display:block;width:1080px;height:1920px;}

/* ===== 音效按钮 / toast ===== */
.icon-btn{
  position:absolute;right:34px;bottom:34px;z-index:30;
  width:104px;height:104px;border-radius:50%;
  border:6px solid var(--ink);
  background:rgba(245,239,225,.92);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:6px 6px 0 rgba(21,18,23,.9);
  transition:transform .08s;
  padding:0;
}
.icon-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 rgba(21,18,23,.9);}
.icon-btn svg{
  width:54px;height:54px;fill:none;
  stroke:var(--ink);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon-btn .spk{fill:var(--ink);stroke:var(--ink);stroke-width:2;}
.icon-btn .slash{display:none;stroke:var(--red);stroke-width:3.4;}
.icon-btn.off .wave,.icon-btn.off .wave2{display:none;}
.icon-btn.off .slash{display:block;}
.icon-btn.off{opacity:.75;}

.toast{
  position:absolute;left:50%;bottom:190px;z-index:40;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);
  font-size:34px;font-weight:700;letter-spacing:1px;
  padding:20px 34px;border-radius:999px;
  opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;white-space:nowrap;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== 屏幕 ===== */
.screen{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:130px 96px;
  background:var(--paper);
  opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility .26s;
  overflow:hidden;
}
.screen.on{opacity:1;visibility:visible;}

.screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--ink) 2.3px,transparent 2.5px);
  background-size:28px 28px;
  opacity:.075;
}
.screen::after{
  content:"";position:absolute;left:-140px;top:-260px;width:760px;height:760px;
  border-radius:50%;background:var(--yellow);opacity:.35;
  pointer-events:none;
}

.poster{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;gap:26px;
}

.tag{
  align-self:flex-start;
  background:var(--ink);color:var(--paper);
  font-size:28px;font-weight:800;letter-spacing:3px;
  padding:12px 24px;border-radius:8px;
  transform:rotate(-1.5deg);
}
.tag.red{background:var(--red);color:#fff;transform:rotate(-2deg);}

.title{
  font-family:var(--serif);
  font-size:238px;line-height:.94;font-weight:900;
  letter-spacing:12px;
  margin-left:-10px;
  text-shadow:10px 10px 0 rgba(21,18,23,.12);
  position:relative;
}
.title::after{
  content:"";position:absolute;left:8px;bottom:6px;
  width:600px;height:26px;background:var(--red);
  transform:rotate(-1.2deg);z-index:-1;opacity:.9;
}
.title-en{
  font-size:26px;font-weight:800;letter-spacing:11px;
  opacity:.45;margin-top:-6px;
}
.lead{
  font-family:var(--serif);
  font-size:52px;font-weight:700;letter-spacing:4px;
  margin-top:2px;
}

.rules{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.rules li{display:flex;align-items:center;gap:18px;}
.rules i{
  flex:0 0 auto;width:52px;height:52px;border-radius:12px;
  background:var(--ink);color:var(--paper);
  font-style:normal;font-size:30px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.rules div{font-size:36px;font-weight:600;letter-spacing:1px;}
.rules b{
  background:linear-gradient(transparent 58%, var(--yellow) 58%);
  padding:0 4px;font-weight:800;
}

.btn{
  width:100%;
  font-family:var(--sans);
  font-size:58px;font-weight:900;letter-spacing:10px;
  padding:34px 20px;
  border:8px solid var(--ink);border-radius:20px;
  background:var(--yellow);color:var(--ink);
  box-shadow:14px 14px 0 var(--ink);
  cursor:pointer;
  transition:transform .07s ease,box-shadow .07s ease;
  margin-top:14px;
}
.btn:active{transform:translate(11px,11px);box-shadow:3px 3px 0 var(--ink);}
.btn.ghost{
  background:var(--paper);
  font-size:40px;letter-spacing:3px;
  box-shadow:10px 10px 0 var(--ink);
  border-width:7px;
}

.meta{
  font-size:28px;letter-spacing:1px;opacity:.62;font-weight:600;
  text-align:center;
}
.meta b{font-size:32px;opacity:1;color:var(--red);}
.credit{
  font-size:22px;line-height:1.5;opacity:.45;letter-spacing:.5px;
  text-align:center;margin-top:2px;
}

/* ===== 结算 ===== */
.over-title{
  font-family:var(--serif);
  font-size:104px;font-weight:900;letter-spacing:8px;line-height:1.05;
}
.score-big{
  display:flex;align-items:baseline;gap:14px;
  font-weight:900;line-height:.9;
}
.score-big span{font-size:200px;letter-spacing:-6px;color:var(--red);}
.score-big small{font-size:52px;font-weight:800;opacity:.55;}

.rank-pill{
  align-self:flex-start;
  background:var(--ink);color:var(--yellow);
  font-size:38px;font-weight:900;letter-spacing:4px;
  padding:14px 30px;border-radius:999px;
  transform:rotate(-1.2deg);
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.stats>div{
  border:7px solid var(--ink);border-radius:16px;background:#fffdf6;
  padding:20px 8px 16px;text-align:center;
}
.stats b{display:block;font-size:66px;line-height:1;font-weight:900;}
.stats span{display:block;margin-top:8px;font-size:24px;font-weight:600;opacity:.55;}

.death{
  font-size:30px;font-weight:700;opacity:.75;letter-spacing:1px;
  border-left:10px solid var(--red);padding-left:18px;line-height:1.4;
}
.row{display:flex;gap:18px;align-items:stretch;}
.row .btn{margin-top:0;}
.row .btn.primary{flex:1.4;}
.row .btn.ghost{flex:1;}

@media (prefers-reduced-motion:reduce){
  .screen,.btn,.icon-btn{transition:none;}
}