/* ==========================================================================
   奶蛙偷偷放屁 · 主样式
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须真的隐藏：.modal/.screen 的 display 会盖过 UA 样式表 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: #0d1620;                 /* 桌面端露出的深底，衬托纸张 */
  /* 深底上压一层极淡的光晕，免得大屏看起来像一块死黑 */
  background-image: radial-gradient(ellipse at 50% 42%, #16232f 0%, #0d1620 62%);
  font-family: var(--font-text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 舞台容器：390×844 参考，手机上铺满 ---- */
#app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  max-height: 924px;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* 桌面端：给纸张一个画框。
   这里只看宽度。早先的条件还要求 min-height:900px，而笔记本大多是
   800–900 高，于是绝大多数桌面用户看到的是没有画框的满屏竖条。 */
@media (min-width: 480px) {
  #app {
    height: min(844px, calc(100dvh - 40px));
    max-height: none;
    border-radius: 28px;
    box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  }
}

/* 宽屏：左右留白处放竖排标题和键盘提示。
   否则大屏上就是一根孤零零的手机柱子摆在一片空地中间。 */
@media (min-width: 1100px) {
  body::before {
    content: '奶蛙偷偷放屁';
    position: fixed; left: 7vw; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--font-display); font-synthesis: none;
    font-size: 34px; letter-spacing: .22em; line-height: 1;
    color: rgba(246, 243, 234, .13);
    pointer-events: none; user-select: none;
  }
  body::after {
    content: '按住空格 = 偷偷排气';
    position: fixed; right: 7vw; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 12px; letter-spacing: .3em; line-height: 1;
    color: rgba(246, 243, 234, .32);
    pointer-events: none; user-select: none;
  }
}

/* 转场方向：进入更深一层从右推入，返回从左推入 */
.screen.is-active.from-right > * { animation-name: riseInRight; }
.screen.is-active.from-left  > * { animation-name: riseInLeft; }
@keyframes riseInRight {
  from { opacity: 0; transform: translate3d(26px, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseInLeft {
  from { opacity: 0; transform: translate3d(-26px, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- 屏幕：叠放，靠 .is-active 切换 ---- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4)
           calc(env(safe-area-inset-bottom) + var(--sp-4));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--t-base) var(--ease-expo),
              transform var(--t-base) var(--ease-expo),
              visibility 0s linear var(--t-base);
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

/* 出场时子元素错峰上浮。
   用 animation 而非 transition：初始就带 is-active 时 transition 不会触发，
   元素会永远停在 opacity:0。animation 的 both 填充更确定。 */
.screen.is-active > * { animation: riseIn var(--t-base) var(--ease-expo) both; }
.screen.is-active > *:nth-child(1) { animation-delay: 40ms; }
.screen.is-active > *:nth-child(2) { animation-delay: 110ms; }
.screen.is-active > *:nth-child(3) { animation-delay: 180ms; }
.screen.is-active > *:nth-child(4) { animation-delay: 250ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   游戏屏
   ========================================================================== */
.hud { display: flex; flex-direction: column; gap: var(--sp-3); flex: none; }

/* 声浪波形 */
.wave {
  height: 46px;
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 var(--sp-3);
}
.wave__bar {
  width: 3px;
  min-height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  transition: height 90ms linear, background-color 200ms ease;
}
.wave.is-loud { border-color: var(--green); }
.wave.is-loud .wave__bar { background: var(--green); }

/* 双格状态 */
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gauge {
  background: var(--surface);
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.gauge__label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); }
.gauge__value {
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--green);
}
.gauge--alert .gauge__value { color: var(--ink); }
.gauge__cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.gauge__cell {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--paper-deep);
  transition: background-color var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease-back);
}
.gauge__cell.is-on { background: var(--green); }
.gauge--alert .gauge__cell.is-on { background: var(--ink); }
.gauge__cell.is-full {
  background: var(--amber);
  animation: cellPulse 520ms var(--ease-breathe) infinite alternate;
}
@keyframes cellPulse { from { opacity: .6 } to { opacity: 1 } }

/* 排气量读数 */
.odometer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
}
.odometer__label { font-size: var(--fs-body); font-weight: 800; letter-spacing: .06em; }
.odometer__value {
  font-family: var(--font-num);
  font-size: var(--fs-num-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.odometer__unit { font-size: var(--fs-small); font-weight: 700; color: var(--ink-faint); }
.odometer.is-bump .odometer__value { animation: numBump 320ms var(--ease-back); }
@keyframes numBump { 0%{transform:none} 35%{transform:scale(1.06)} 100%{transform:none} }

/* 游戏画面：直角，和圆角 UI 卡片区分 */
.stage {
  position: relative;
  flex: 1;
  margin: var(--sp-3) calc(var(--sp-4) * -1);
  min-height: 0;
  overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: 100%; }

/* 底部控制 */
.controls { flex: none; display: flex; flex-direction: column; gap: var(--sp-3); }

.btn-fart {
  position: relative;
  width: 100%;
  padding: var(--sp-4);
  border: none;
  border-radius: var(--r-md);
  background: var(--green);
  color: #fff;
  font-family: var(--font-text);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-tap) var(--ease-back),
              background-color var(--t-tap) linear;
}
.btn-fart::after {                       /* 按压时从中心扩散的墨色反馈 */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
              rgba(0,0,0,.22), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-soft);
}
.btn-fart.is-down { transform: scale(.965); background: var(--green-deep); }
.btn-fart.is-down::after { opacity: 1; }

/* 蓄力：按住时从左侧涨起的深绿，随本次放屁量推进 */
.btn-fart::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.10));
  transform: scaleX(var(--charge, 0));
  transform-origin: left center;
  transition: transform 80ms linear;
  pointer-events: none;
}
.btn-fart__label { position: relative; z-index: 1; }

.nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.btn-ghost {
  padding: var(--sp-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform var(--t-tap) var(--ease-back),
              background-color var(--t-tap) linear;
}
.btn-ghost:active { transform: scale(.96); background: var(--paper-deep); }

/* ---- 无障碍：键盘焦点 ---- */
:focus-visible { outline: 2.5px solid var(--green); outline-offset: 2px; }

/* ==========================================================================
   减弱动效
   前庭敏感的用户会因画面抖动、缩放、无限循环而不适。
   这里把所有装饰性动效收掉，但保留状态变化本身（该出现的还是会出现）。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}