/* ============================================================================
   HBM 的核科技 · 管道鸟（Flappy Bird 风格小游戏）—— 样式
   ----------------------------------------------------------------------------
   全部类名 flap- 前缀；配色沿用站点调色板；不给 body / html 加任何规则，
   也不覆盖站点已有样式（没有 !important）。
   字号统一由 --flap-u（= 画布高度，JS 在 resize 时写入）等比推导，
   所以同一个尺寸在桌面 / 手机 / 竖屏横屏下都不会错位。
   ========================================================================== */

/* ── 舞台（宿主容器）───────────────────────────────────────── */
.flap-stage{
  --flap-acc:#e69138;
  --flap-acc-2:#ffca7a;
  --flap-cy:#4be3c0;
  --flap-txt:#e8e9f0;
  --flap-dim:#9aa0b4;
  --flap-line:#3a3d4b;
  --flap-danger:#ff5a3c;
  --flap-u:600px;                      /* JS 写入：画布高度 */
  --flap-num:"Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  --flap-ease:cubic-bezier(.2,.7,.3,1);

  position:relative;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16 / 10;                /* 外部没给高度时按 16:10 撑开 */
  max-width:100%;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#0b0e15 0%,#0e1016 45%,#0a1517 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.45);
  color:var(--flap-txt);
  font:14px/1.5 "Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
  contain:paint;
}

/* hidden 属性优先于下面的 display 声明 */
.flap-stage [hidden]{display:none}

.flap-canvas{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  touch-action:none;
}

/* ── HUD ──────────────────────────────────────────────────── */
.flap-hud{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;justify-content:center;align-items:flex-start;
  padding:calc(var(--flap-u) * .016) 0 0;
  pointer-events:none;
}
.flap-score{
  font:700 calc(var(--flap-u) * .095)/1 var(--flap-num);
  font-variant-numeric:tabular-nums;
  color:#fff7ea;
  letter-spacing:.02em;
  -webkit-text-stroke:calc(var(--flap-u) * .0018) rgba(230,145,56,.95);
  paint-order:stroke fill;
  text-shadow:
    0 calc(var(--flap-u) * .005) calc(var(--flap-u) * .004) rgba(0,0,0,.60),
    0 0 calc(var(--flap-u) * .030) rgba(230,145,56,.38);
  transform-origin:50% 40%;
}
.flap-score.is-pop{animation:flap-pop .28s var(--flap-ease)}
@keyframes flap-pop{
  0%{transform:scale(1)}
  36%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

.flap-tag{
  position:absolute;left:calc(var(--flap-u) * .018);top:calc(var(--flap-u) * .018);z-index:3;
  pointer-events:none;
  font:600 calc(var(--flap-u) * .018)/1 var(--flap-num);
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(154,160,180,.62);
  padding:calc(var(--flap-u) * .011) calc(var(--flap-u) * .014);
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;
  background:rgba(13,15,21,.42);
  white-space:nowrap;
  transition:opacity .3s var(--flap-ease);
}
.flap-stage[data-state="playing"] .flap-tag{opacity:.28}
.flap-stage[data-state="dying"] .flap-tag{opacity:.28}

.flap-tr{
  position:absolute;right:calc(var(--flap-u) * .018);top:calc(var(--flap-u) * .018);z-index:4;
  display:flex;align-items:center;gap:calc(var(--flap-u) * .012);
}
.flap-best{
  font:700 calc(var(--flap-u) * .026)/1 var(--flap-num);
  letter-spacing:.16em;color:var(--flap-dim);
  padding:calc(var(--flap-u) * .013) calc(var(--flap-u) * .016);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(24,27,36,.9),rgba(13,15,21,.95));
  white-space:nowrap;
}
.flap-best b{
  margin-left:.4em;font-weight:800;letter-spacing:.02em;
  color:var(--flap-acc-2);
}
.flap-mute{
  width:calc(var(--flap-u) * .062);height:calc(var(--flap-u) * .062);
  min-width:30px;min-height:30px;
  display:grid;place-items:center;
  padding:0;margin:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(24,27,36,.9),rgba(13,15,21,.95));
  color:var(--flap-dim);
  cursor:pointer;
  transition:color .18s var(--flap-ease), border-color .18s var(--flap-ease), background .18s var(--flap-ease);
}
.flap-mute:hover{color:var(--flap-acc-2);border-color:rgba(230,145,56,.5)}
.flap-mute:focus-visible{outline:2px solid var(--flap-acc-2);outline-offset:2px}
.flap-mute svg{width:62%;height:62%;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flap-mute .flap-ico-on{display:block}
.flap-mute .flap-ico-off{display:none}
.flap-stage.is-muted .flap-mute{color:var(--flap-danger)}
.flap-stage.is-muted .flap-mute .flap-ico-on{display:none}
.flap-stage.is-muted .flap-mute .flap-ico-off{display:block}

.flap-hint{
  position:absolute;left:50%;bottom:calc(var(--flap-u) * .028);z-index:3;
  transform:translateX(-50%);
  pointer-events:none;
  font:600 calc(var(--flap-u) * .021)/1 "Segoe UI","Microsoft YaHei UI",system-ui,sans-serif;
  letter-spacing:.1em;color:rgba(232,233,240,.5);
  white-space:nowrap;
  transition:opacity .3s var(--flap-ease);
}
.flap-hint.is-off{opacity:0}

/* ── 遮罩（开始 / 结算 / 暂停）────────────────────────────── */
.flap-overlay{
  position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;
  padding:calc(var(--flap-u) * .03);
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(230,145,56,.09), transparent 70%),
    linear-gradient(180deg,rgba(24,27,36,.9),rgba(13,15,21,.95));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--flap-ease), visibility .22s var(--flap-ease);
}
.flap-overlay.is-on{opacity:1;visibility:visible;pointer-events:auto}
.flap-pause{background:linear-gradient(180deg,rgba(12,14,20,.55),rgba(10,12,17,.72))}
.flap-pause.is-on{pointer-events:none}

.flap-panel{
  width:100%;max-width:420px;
  text-align:center;
  padding:calc(var(--flap-u) * .042) calc(var(--flap-u) * .038);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(24,27,36,.9),rgba(13,15,21,.95));
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(7px) scale(.986);
  transition:transform .26s var(--flap-ease);
}
.flap-overlay.is-on .flap-panel{transform:none}
.flap-panel-slim{padding:calc(var(--flap-u) * .03) calc(var(--flap-u) * .04);max-width:320px}

.flap-kicker{
  font:700 calc(var(--flap-u) * .018)/1 var(--flap-num);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--flap-cy);opacity:.85;
}
.flap-kicker-danger{color:var(--flap-danger);opacity:.95}

.flap-title{
  margin:calc(var(--flap-u) * .013) 0 0;
  font-size:calc(var(--flap-u) * .072);
  line-height:1.12;font-weight:800;letter-spacing:.06em;
  color:#f2f3f8;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 calc(var(--flap-u) * .05) rgba(230,145,56,.22);
}
.flap-title-sm{font-size:calc(var(--flap-u) * .05)}

.flap-sub{
  margin:calc(var(--flap-u) * .015) 0 0;
  font-size:calc(var(--flap-u) * .024);
  line-height:1.65;color:var(--flap-dim);
}
.flap-tip{
  margin:calc(var(--flap-u) * .018) 0 0;
  font-size:calc(var(--flap-u) * .019);
  letter-spacing:.06em;color:rgba(154,160,180,.72);
}

.flap-btn{
  margin-top:calc(var(--flap-u) * .028);
  font:700 calc(var(--flap-u) * .029)/1 "Segoe UI","Microsoft YaHei UI",system-ui,sans-serif;
  letter-spacing:.06em;
  color:#fff6e6;
  padding:calc(var(--flap-u) * .022) calc(var(--flap-u) * .045);
  border:1px solid rgba(0,0,0,.6);
  border-radius:8px;
  background:linear-gradient(#c9791f,#a95f13 55%,#8d4d0c);
  box-shadow:
    inset 1px 1px 0 rgba(255,220,160,.35),
    inset -1px -1px 0 rgba(0,0,0,.4),
    0 6px 18px rgba(230,145,56,.22);
  cursor:pointer;
  transition:transform .12s var(--flap-ease), background .2s var(--flap-ease), box-shadow .2s var(--flap-ease);
}
.flap-btn:hover{background:linear-gradient(#e08a2c,#bb6b16 55%,#9a5510)}
.flap-btn:active{transform:translateY(1px);box-shadow:inset 1px 1px 0 rgba(0,0,0,.45)}
.flap-btn:focus-visible{outline:2px solid var(--flap-acc-2);outline-offset:2px}

.flap-result{
  margin-top:calc(var(--flap-u) * .026);
  display:flex;flex-direction:column;gap:calc(var(--flap-u) * .011);
}
.flap-res{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--flap-u) * .02);
  padding:calc(var(--flap-u) * .012) calc(var(--flap-u) * .016);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.flap-res span{font-size:calc(var(--flap-u) * .022);letter-spacing:.06em;color:var(--flap-dim)}
.flap-res b{
  font:800 calc(var(--flap-u) * .04)/1 var(--flap-num);
  color:var(--flap-acc-2);
}
.flap-res .flap-res-best{color:var(--flap-cy)}

.flap-newrec{
  display:block;
  width:max-content;
  margin:calc(var(--flap-u) * .022) auto 0;
  font:800 calc(var(--flap-u) * .019)/1 var(--flap-num);
  letter-spacing:.2em;
  color:#1a1206;
  padding:calc(var(--flap-u) * .011) calc(var(--flap-u) * .018);
  border-radius:4px;
  background:linear-gradient(180deg,var(--flap-acc-2),var(--flap-acc));
  animation:flap-blink 1.1s steps(2,start) infinite;
}
@keyframes flap-blink{0%,100%{opacity:1}50%{opacity:.45}}

.flap-fallback{
  position:absolute;inset:0;z-index:6;
  display:grid;place-items:center;
  font-size:calc(var(--flap-u) * .026);
  color:var(--flap-dim);
  background:rgba(14,16,22,.9);
}

/* ── 小屏 / 竖屏 ──────────────────────────────────────────── */
@media (max-width:760px){
  .flap-stage{aspect-ratio:4 / 5;border-radius:10px}
}
@media (max-width:760px) and (orientation:landscape){
  .flap-stage{aspect-ratio:16 / 9}
}

/* ── 尊重「减少动态效果」──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .flap-overlay,.flap-panel,.flap-btn,.flap-score,.flap-hint,.flap-tag{
    transition:none;
  }
  .flap-score.is-pop,.flap-newrec{animation:none}
}