@font-face {
  font-family: 'ZCOOL QingKe HuangYou';
  src: url('fonts/zcool.woff2') format('woff2');
  font-display: swap;
}

:root {
  --cobalt: #1d3a87;
  --cobalt-deep: #142a66;
  --cobalt-ink: #0d1a45;
  --enamel: #f3f4ef;
  --enamel-shade: #dcded8;
  --red: #c42b23;
  --red-deep: #9a1f19;
  --iron: #17181c;
  --iron-soft: #3c4150;
  --mint: #9cc9b3;
  --amber: #ffd27a;

  --font-display: 'ZCOOL QingKe HuangYou', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-roll: cubic-bezier(.2, .9, .25, 1);
  --plate-shadow: 0 14px 26px -12px rgba(4, 10, 36, .75), 0 2px 0 rgba(4, 10, 36, .35);
}

* { box-sizing: border-box; }

html { color-scheme: light; height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font-body);
  color: var(--iron);
  background-color: var(--cobalt);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--red); color: var(--enamel); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.plate :focus-visible, .ach-panel :focus-visible, .line :focus-visible { outline-color: var(--cobalt-ink); }
.plan__tip :focus-visible { outline-color: var(--amber); }
* { scrollbar-color: var(--cobalt) var(--enamel-shade); scrollbar-width: thin; }

.sr-only {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 整个游戏锁在一屏里：上面一条状态，下面全是舞台 */
.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
body.is-title .app { grid-template-rows: 0 minmax(0, 1fr); gap: 0; }
body.is-title .hud { visibility: hidden; }

/* ---------- 搪瓷牌 ---------- */

.plate {
  position: relative;
  background: var(--enamel);
  border: 6px solid var(--cobalt-deep);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 4px var(--enamel),
    inset 0 0 0 5.5px var(--cobalt),
    var(--plate-shadow);
  transform-origin: 50% -12px;
}

.plate[class*='plate--chip-']::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 7px;
  background: radial-gradient(ellipse at 50% 40%, var(--iron) 45%, #4a2a17 80%);
  pointer-events: none;
}
.plate--chip-tl::after { top: -6px; left: 22%; width: 15px; clip-path: polygon(0 0, 100% 0, 88% 55%, 64% 70%, 52% 100%, 30% 62%, 10% 58%); }
.plate--chip-tr::after { top: -6px; right: 20px; width: 9px; clip-path: polygon(0 0, 100% 0, 80% 70%, 45% 100%, 18% 60%); }
.plate--chip-br::after { bottom: -6px; right: 12%; width: 18px; height: 8px; clip-path: polygon(8% 100%, 22% 40%, 41% 52%, 55% 0, 74% 38%, 92% 30%, 100% 100%); }
.plate--chip-bl::after { bottom: -6px; left: 14px; width: 11px; clip-path: polygon(0 100%, 20% 30%, 52% 45%, 70% 0, 100% 100%); }

.nail {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e5e7ec, #7a7e87 60%, #4a4e57);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.swing { animation: hang 1s var(--ease-out); }

@keyframes hang {
  0% { transform: translateY(-6px) rotate(-4deg); }
  38% { transform: translateY(0) rotate(3deg); }
  60% { transform: rotate(-1.6deg); }
  80% { transform: rotate(.7deg); }
  100% { transform: rotate(0); }
}

.jolt { animation: jolt .6s var(--ease-out); }

@keyframes jolt {
  0% { transform: rotate(0); }
  25% { transform: rotate(-2.4deg); }
  55% { transform: rotate(1.4deg); }
  80% { transform: rotate(-.5deg); }
  100% { transform: rotate(0); }
}

/* ---------- 顶部状态条 ---------- */

.hud {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.hud .plate {
  border-width: 4px;
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 3px var(--enamel),
    inset 0 0 0 4.2px var(--cobalt),
    0 8px 14px -8px rgba(4, 10, 36, .7),
    0 2px 0 rgba(4, 10, 36, .35);
}
.hud .nail { top: 4px; width: 6px; height: 6px; margin-left: -3px; }

.plate--day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 6px;
}
.day__num {
  font-family: var(--font-display);
  color: var(--red);
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.day__num b { font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; }
.day__num small { font-size: 15px; color: var(--cobalt); }
.day__meta { display: grid; gap: 1px; font-size: 12px; color: var(--iron-soft); letter-spacing: .06em; white-space: nowrap; }
.day__lease { font-family: var(--font-display); font-size: 14px; color: var(--red); }

.hud .plate--funds {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 6px;
  background: var(--cobalt);
  border-color: var(--cobalt-ink);
  box-shadow: inset 0 0 0 3px var(--cobalt), inset 0 0 0 4.5px var(--enamel), 0 8px 14px -8px rgba(4, 10, 36, .7);
  color: var(--enamel);
}
.hud .plate--funds.is-low { background: var(--red); box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4.5px var(--enamel), 0 8px 14px -8px rgba(4, 10, 36, .7); }
.funds__label { font-family: var(--font-display); writing-mode: vertical-rl; font-size: 13px; letter-spacing: .15em; }
.funds__yen { font-family: var(--font-display); font-size: 20px; opacity: .85; }
.plate--funds.is-debt .funds__yen::before { content: '−'; }

.funds__reels {
  display: flex;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reel {
  position: relative;
  width: .62em;
  height: 1em;
  overflow: hidden;
  text-align: center;
}
.reel:nth-child(4) { margin-left: .14em; }
.reel.is-lead { opacity: .22; }
.reel__strip { display: flex; flex-direction: column; transition: transform .9s var(--ease-roll); }
.reel__strip span { height: 1em; display: block; }

.meters {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.plate--meter {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 8px;
  padding: 8px 11px 7px;
}
.meter__label { font-family: var(--font-display); font-size: 14px; color: var(--cobalt); white-space: nowrap; overflow: hidden; }
.meter__num {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt-ink);
  transition: color .3s;
}
.plate--meter.is-danger .meter__num { color: var(--red); }
.meter__pips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.pip {
  height: 6px;
  border-radius: 3px;
  background: var(--enamel-shade);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
  transition: background-color .4s, transform .4s var(--ease-out);
}
.pip.is-on { background: var(--cobalt); }
.plate--meter.is-danger .pip.is-on { background: var(--red); }
.pip.is-pulse { transform: scaleY(1.6); }
button.plate--meter { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: box-shadow .18s; }
@media (hover: hover) {
  .hud button.plate--meter:hover { box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--cobalt), 0 8px 14px -8px rgba(4, 10, 36, .7), 0 2px 0 rgba(4, 10, 36, .35); }
}

/* 刻度牌的说明：挂在牌子下面的一块小搪瓷牌 */
.meter-tip {
  --nail-x: 50%;
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(300px, calc(100vw - 24px));
  padding: 20px 18px 14px;
  color: var(--iron);
  overflow: visible;
  transform-origin: var(--nail-x) -12px;
}
.meter-tip:popover-open { animation: hang 1s var(--ease-out); }
.meter-tip .nail { left: var(--nail-x); }
.meter-tip__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.meter-tip__desc { margin: 0; font-size: 14px; line-height: 1.6; }
.meter-tip__scale {
  --v: 0%;
  position: relative;
  height: 8px;
  margin: 14px 0 12px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--cobalt) var(--v), var(--enamel-shade) var(--v));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
}
.meter-tip__tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--red);
  border-radius: 1px;
}
.meter-tip__marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meter-tip__mark { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--iron-soft); }
.meter-tip__at {
  display: grid;
  place-items: center;
  height: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cobalt);
  border: 2px solid var(--cobalt);
  border-radius: 7px;
}
.meter-tip__mark.is-met .meter-tip__at { color: var(--enamel); background: var(--cobalt); }
.meter-tip__mark.is-danger .meter-tip__at { color: var(--enamel); background: var(--red); border-color: var(--red-deep); }
.meter-tip__mark.is-met, .meter-tip__mark.is-danger { color: var(--iron); }

.hud__tools { display: flex; align-items: center; gap: 8px; }
.hud__menu { display: grid; place-items: center; width: 44px; padding: 6px; }
.hud__menu svg { width: 20px; height: 20px; }

/* ---------- 按钮：小搪瓷牌 ---------- */

.tag {
  font: inherit;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  color: var(--cobalt);
  background: var(--enamel);
  border: 2px solid var(--cobalt);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--enamel), inset 0 0 0 3px rgba(29, 58, 135, .35), 0 3px 6px -2px rgba(4, 10, 36, .5);
  transition: background-color .18s, color .18s, transform .12s, box-shadow .18s;
}
.tag:active { transform: translateY(1px); }
.tag:disabled { opacity: .42; cursor: not-allowed; }

.tag--quiet {
  font-size: 15px;
  padding: 6px 12px;
  color: var(--enamel);
  background: transparent;
  border-color: rgba(243, 244, 239, .55);
  box-shadow: none;
}
.tag--quiet[aria-pressed='true'] { background: var(--enamel); color: var(--cobalt); box-shadow: none; }

.tag--red {
  color: var(--enamel);
  background: var(--red);
  border-color: var(--red-deep);
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(243, 244, 239, .55), 0 4px 10px -3px rgba(80, 10, 8, .6);
  font-size: 20px;
  padding: 10px 22px;
}
/* 选中：钴蓝底 + 对勾；悬停只是把牌子抬起来，两者一眼分得开。手机上没有悬停，不留粘住的高亮 */
.tag.is-selected { background: var(--cobalt); color: var(--enamel); box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 3px rgba(243, 244, 239, .6), 0 3px 6px -2px rgba(4, 10, 36, .5); }
.tag.is-selected::before {
  content: '';
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-right: 6px;
  vertical-align: -.04em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.8 3.8L13.5 4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.8 3.8L13.5 4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
  /* 抬起来后底边留一条透明的接手区，指针停在下沿时不会一抬一落地抖 */
  .tag { position: relative; }
  .tag:not(:disabled):hover::after { content: ''; position: absolute; inset: 0 -2px -4px; }
  .tag:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--enamel), inset 0 0 0 3px rgba(29, 58, 135, .6), 0 8px 14px -6px rgba(4, 10, 36, .6); }
  .tag.is-selected:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 3px rgba(243, 244, 239, .6), 0 8px 14px -6px rgba(4, 10, 36, .6); }
  .tag--quiet:not(:disabled):hover { background: rgba(243, 244, 239, .14); box-shadow: none; }
  .tag--quiet[aria-pressed='true']:hover { background: var(--enamel); }
  .tag--red:not(:disabled):hover { background: var(--red-deep); box-shadow: inset 0 0 0 2px var(--red-deep), inset 0 0 0 3px rgba(243, 244, 239, .55), 0 8px 14px -5px rgba(80, 10, 8, .6); }
  .tag:not(:disabled):active { transform: translateY(1px); }
  .plan__shop-summary:hover .plan__title { text-decoration: underline; text-underline-offset: 4px; }
  .plan__tip .tag:not(:disabled):hover { background: var(--enamel-shade); color: var(--cobalt-deep); box-shadow: none; }
  .plan__tip-skip:hover { opacity: 1; }
}

/* ---------- 舞台 ---------- */

.stage {
  position: relative;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cobalt-ink);
  box-shadow: 0 0 0 4px var(--cobalt-ink), 0 24px 40px -20px rgba(4, 10, 36, .85);
  isolation: isolate;
}

.scene {
  --sky-top: #9ec3e6;
  --sky-bottom: #e8f0f4;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cobalt-ink);
}
.scene svg { display: block; width: 100%; height: 100%; }

.sky-top { stop-color: var(--sky-top); transition: stop-color 1.2s; }
.sky-bottom { stop-color: var(--sky-bottom); transition: stop-color 1.2s; }

#tint, #nightLamp, #nightLampHall, #signGlow, #signBulbs, #aroma, #bedNew, #bedOld, #memberPlate, #teaSign, #bedGuest, .loc-tint {
  transition: opacity 1.2s ease;
}

.sign-text { font-family: var(--font-display); font-size: 52px; fill: var(--red); letter-spacing: 16px; }
.sign-text--alley { font-size: 30px; letter-spacing: 8px; }
/* 结局换招牌：每个字先描边再上色，一个接一个 */
.sign-text.is-writing tspan {
  fill: transparent;
  stroke: var(--red);
  stroke-width: 1.2px;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation:
    sign-stroke 1s ease-out calc(var(--i) * .42s) forwards,
    sign-fill .45s ease calc(var(--i) * .42s + .8s) forwards;
}
@keyframes sign-stroke { to { stroke-dashoffset: 0; } }
@keyframes sign-fill { to { fill: var(--red); } }

/* 招牌灯泡通电时闪两下 */
.bulb.is-flicker { animation: flicker .32s steps(1) both; }
@keyframes flicker { 0% { opacity: .2; } 30% { opacity: 1; } 55% { opacity: .35; } 75% { opacity: 1; } }
.board-title { font-family: var(--font-display); font-size: 17px; fill: var(--red); letter-spacing: 4px; }
.board-line { font-family: var(--font-body); font-size: 12.5px; fill: var(--iron); }
.board-price { font-family: var(--font-display); font-size: 15px; fill: var(--cobalt); }
.door-sign { font-family: var(--font-display); font-size: 13px; fill: var(--enamel); letter-spacing: 1px; }
.counter-text { font-family: var(--font-display); font-size: 22px; fill: var(--enamel); letter-spacing: 6px; }
.mug-text { font-family: var(--font-display); font-size: 11px; fill: var(--red); }
.tiny-sign { font-family: var(--font-display); font-size: 12px; fill: var(--enamel); }
.tiny-sign--blue { fill: var(--cobalt); }
.tiny-sign--red { fill: var(--red); }
.tiny-sign--big { font-size: 18px; letter-spacing: 4px; }
.bubble-text { font-family: var(--font-display); font-size: 15px; fill: var(--cobalt); }
.bubble-text--red { fill: var(--red); }
.cart-text { font-family: var(--font-display); font-size: 15px; fill: var(--red); letter-spacing: 2px; }
.stage-banner { font-family: var(--font-display); font-size: 20px; fill: var(--enamel); letter-spacing: 6px; }
.led-line { font-family: var(--font-display); font-size: 17px; fill: var(--amber); letter-spacing: 2px; }

.rival-sign { font-family: var(--font-display); font-size: 16px; fill: var(--enamel); letter-spacing: 1px; }
.rival-sign--big { font-size: 34px; letter-spacing: 8px; }
.rival-promo { font-family: var(--font-display); font-size: 12px; fill: var(--red); }
.rival-promo--big { font-size: 17px; }
.rival-branch { font-family: var(--font-display); font-size: 12px; fill: var(--enamel); }
.calendar-head { font-family: var(--font-display); font-size: 7.5px; fill: var(--enamel); letter-spacing: 1px; }
.calendar-num { font-family: var(--font-display); font-size: 19px; fill: var(--red); font-variant-numeric: tabular-nums; }
#rivalPromo, #rivalBranch, #spotlight, #crowd, #alleyPromo, #alleyBranch, #alleyStage { transition: opacity .8s ease; }

.steam circle { animation: mist 2.6s ease-in-out infinite; transform-box: fill-box; }
.steam circle:nth-child(2) { animation-delay: -.9s; }
.steam circle:nth-child(3) { animation-delay: -1.7s; }
.megaphone-waves { opacity: 0; }
#megaphone.is-blaring .megaphone-waves { animation: blare .5s steps(2, jump-none) infinite; }
@keyframes blare { from { opacity: .2; } to { opacity: 1; } }
.er-glow { animation: er 1.8s ease-in-out infinite; }
@keyframes er { 50% { opacity: .35; } }
.laundry { transform-box: fill-box; transform-origin: 50% 0; animation: laundry 5s ease-in-out infinite; }
@keyframes laundry { 50% { transform: skewX(4deg); } }

/* 只在店里出现的东西 */
.scene:not([data-place='shop']) .shutter-frame,
.scene:not([data-place='shop']) .hang-sign { display: none; }

.strip { transform-box: fill-box; transform-origin: 50% 0; }
.strip.sway { animation: sway 1.1s var(--ease-out); }
.strip.sway:nth-child(odd) { animation-delay: .05s; }
@keyframes sway {
  20% { transform: skewX(-9deg); }
  50% { transform: skewX(5deg); }
  75% { transform: skewX(-2deg); }
}

.mist circle { animation: mist 3s ease-in-out infinite; transform-box: fill-box; }
.mist circle:nth-child(2) { animation-delay: -1s; }
.mist circle:nth-child(3) { animation-delay: -2s; }
@keyframes mist {
  0% { transform: translateY(6px) scale(.6); opacity: 0; }
  40% { opacity: .8; }
  100% { transform: translateY(-14px) scale(1.2); opacity: 0; }
}

.cat-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: tail 4.2s ease-in-out infinite; }
@keyframes tail {
  0%, 70%, 100% { transform: rotate(0); }
  80% { transform: rotate(-16deg); }
  90% { transform: rotate(6deg); }
}
.cat-head { transform-box: fill-box; transform-origin: 70% 90%; animation: doze 6s ease-in-out infinite; }
@keyframes doze { 50% { transform: translateY(1px) rotate(5deg); } }

/* 摸一下推推：身子往后抻长，脑袋往前探，尾巴竖起来 */
.cat-body { transform-box: fill-box; transform-origin: 100% 100%; }
#cat.is-stretching .cat-body { animation: cat-stretch 1.6s var(--ease-out); }
#cat.is-stretching .cat-head { animation: cat-reach 1.6s var(--ease-out); }
#cat.is-stretching .cat-tail { animation: cat-tail 1.6s var(--ease-out); }
@keyframes cat-stretch { 25%, 60% { transform: scale(1.16, .82); } }
@keyframes cat-reach { 25%, 60% { transform: translate(-6px, 3px) rotate(-14deg); } }
@keyframes cat-tail { 25%, 60% { transform: rotate(-38deg); } }

/* ---------- 人物 ---------- */

.actor .arm,
.actor .fore,
.actor .swing,
.actor .lift,
.actor .head,
.actor .head-mount,
.actor .leg { transform-box: fill-box; }
.actor .arm,
.actor .fore,
.actor .swing,
.actor .lift,
.actor .head-mount { transform-origin: 50% 50%; }
.actor .swing { animation: none; }
.actor.is-sweeping .swing-near,
.actor.is-sweeping .swing-far { animation: sweep 1.2s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
.actor .arm,
.actor .fore { transition: transform .45s var(--ease-out); }
.actor .head { transform-origin: 50% 50%; transition: transform .45s var(--ease-out); }
.actor .lift { transition: transform .5s var(--ease-out); }
.actor .leg { transform-origin: 50% 50%; transition: transform .45s var(--ease-out); }
.actor .legs { transition: transform .45s var(--ease-out); }
.actor .shin { display: none; }
.actor.is-seated .shin { display: inline; }
.actor.is-seated .leg { transform: rotate(-80deg); }
.actor.is-seated .legs { transform: translateY(14px); }

.actor .upper { animation: breathe 3.8s ease-in-out infinite; animation-delay: var(--blink-delay, 0s); }
@keyframes breathe { 50% { transform: translateY(-1.2px); } }

.actor .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.4s infinite; animation-delay: var(--blink-delay, 0s); }
@keyframes blink {
  0%, 94%, 100% { transform: none; }
  96.5% { transform: scaleY(.12); }
}

.actor .mouth-talk { display: none; transform-box: fill-box; transform-origin: 50% 30%; }
.actor.is-talking .mouth { display: none; }
.actor.is-talking .mouth-talk { display: inline; animation: talk .2s steps(2, jump-none) infinite alternate; }
@keyframes talk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.actor.is-talking .head-mount { animation: nod .46s ease-in-out infinite alternate; }
@keyframes nod { to { transform: translateY(-1.2px); } }

.actor .blush { transition: opacity .3s; }
.actor.is-surprised .head-mount { animation: start .45s var(--ease-out); }
@keyframes start {
  30% { transform: translateY(-5px); }
  100% { transform: none; }
}

.actor .arm.is-working { animation: knead .55s ease-in-out infinite alternate; }
@keyframes knead {
  from { transform: rotate(-4deg) translateX(0); }
  to { transform: rotate(18deg) translateX(3px); }
}

.prop-stool { display: none; }
#ya[data-pose='tired'] .prop-stool { display: inline; }
.scene:not([data-place='shop']) .prop-stool { display: none; }

.cast { opacity: 0; }

.actor .body.is-arriving { animation: arrive .7s var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes arrive {
  0% { transform: translateY(-14px) scale(.9); opacity: .2; }
  60% { transform: translateY(0) scale(1.03); opacity: 1; }
  100% { transform: none; }
}

.walker.is-walking .leg-a { animation: step .44s ease-in-out infinite alternate; }
.walker.is-walking .leg-b { animation: step .44s ease-in-out infinite alternate-reverse; }
.walker.is-walking .body { animation: stride .22s ease-in-out infinite alternate; }
.walker.is-walking .swing-near { animation: swing .44s ease-in-out infinite alternate-reverse; }
.walker.is-walking .swing-far { animation: swing .44s ease-in-out infinite alternate; }
@keyframes step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes stride { to { transform: translateY(-2px); } }
@keyframes swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* 转身：先压扁再翻过来，像把身子转过去 */
.actor.is-turning .body { animation: turn .18s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes turn { 50% { transform: scaleX(.2); } }

.actor.is-nodding .head-mount { animation: nod-yes .8s ease-in-out; }
@keyframes nod-yes {
  25%, 65% { transform: rotate(9deg); }
  45%, 100% { transform: none; }
}
.actor.is-shaking .head-mount { animation: shake-no .8s ease-in-out; }
@keyframes shake-no {
  20%, 60% { transform: translateX(-1.6px) rotate(-3deg); }
  40%, 80% { transform: translateX(1.6px) rotate(3deg); }
}
.actor.is-hopping .body { animation: hop .5s var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hop {
  30% { transform: translateY(-9px) scaleY(1.03); }
  60% { transform: translateY(0) scaleY(.96); }
}
.actor.is-clapping .fore { animation: clap .2s ease-in-out infinite alternate; }
@keyframes clap { from { transform: rotate(-40deg); } to { transform: rotate(-78deg); } }

/* 没轮到说话的人偶尔动一下：抬头看看、换个重心 */
.actor.idle-look .head-mount { animation: idle-look 2s ease-in-out; }
@keyframes idle-look { 30%, 70% { transform: rotate(-6deg); } }
.actor.idle-shift .body { animation: idle-shift 1.8s ease-in-out; }
@keyframes idle-shift { 50% { transform: translateX(1.6px); } }

.emote__art { transform-box: fill-box; transform-origin: 50% 100%; animation: emote 1.5s var(--ease-out) both; }
@keyframes emote {
  0% { transform: translateY(4px) scale(.3); opacity: 0; }
  14% { transform: scale(1.15); opacity: 1; }
  24% { transform: none; }
  78% { opacity: 1; }
  100% { transform: translateY(-5px); opacity: 0; }
}

/* 营业中“点我”的提示：冒出来以后不走，轻轻上下浮着，等人点或过时 */
.emote--hold .emote__art { animation: emote-in .45s var(--ease-out) both, emote-bob 1.1s ease-in-out .45s infinite alternate; }
@keyframes emote-in { from { transform: translateY(4px) scale(.3); opacity: 0; } }
@keyframes emote-bob { to { transform: translateY(-3px); } }

/* 透明待命的人也站在台上，别让他们挡住点击；只有亮起来的人能点 */
.actor { pointer-events: none; }
.actor.is-tappable { pointer-events: auto; }
.actor.is-tappable,
#cat[role='button'] { cursor: pointer; }
.actor.is-tappable:focus-visible,
#cat:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 6px; }

.bubble { animation: pop .5s var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* 卷帘门（位置由脚本按镜头算） */
.shutter-frame {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.shutter {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 6%, transparent 94%, rgba(0, 0, 0, .18)),
    repeating-linear-gradient(180deg, #a7acb4 0 9px, #7e848d 9px 11px, #c0c4ca 11px 13px, #959aa3 13px 18px);
  transition: transform 1.7s cubic-bezier(.6, 0, .3, 1);
  will-change: transform;
}
.shutter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0b1640;
  mix-blend-mode: multiply;
  opacity: var(--tint, 0);
  transition: opacity 1.2s ease;
}
.shutter.is-ajar { transform: translateY(-58%); }
.shutter.is-open { transform: translateY(-101%); }
.shutter__handle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4.5%;
  background: linear-gradient(#5e636c, #3c4048);
}
.shutter__handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 30%;
  width: 7%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--iron);
}

.hang-sign {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% 0;
  padding: .3em 1em .25em;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vmin, 44px);
  letter-spacing: .3em;
  color: var(--enamel);
  background: var(--red);
  border: 5px solid var(--red-deep);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px var(--enamel), var(--plate-shadow);
  transform-origin: 50% -30px;
  display: none;
  filter: brightness(calc(1 - var(--tint, 0) * .5));
}
.hang-sign::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -32px;
  width: 50%;
  height: 28px;
  translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M2 28L50 2l48 26' fill='none' stroke='%2317181c' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='50' cy='3' r='3' fill='%2317181c'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hang-sign.is-shown { display: block; }

.rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(104deg, transparent 0 22px, rgba(214, 224, 246, .32) 22px 23.5px);
  background-size: 160px 160px;
  animation: rain .45s linear infinite;
  transition: opacity 1.2s ease;
}
.scene.is-raining .rain { opacity: .7; }
@keyframes rain { to { background-position: -40px 160px; } }

.scene.is-paused *,
.scene.is-paused *::before,
.scene.is-paused *::after { animation-play-state: paused !important; }
.scene.is-paused .actor .upper,
.scene.is-paused .actor .eyes,
.scene.is-paused .actor .head-mount,
.scene.is-paused .actor .body,
.scene.is-paused .actor .fore,
.scene.is-paused .actor .emote__art,
.scene.is-paused .actor.is-talking *,
.scene.is-paused .cast.is-walking *,
.scene.is-paused .is-walking * { animation-play-state: running !important; }

/* ---------- 转场 ---------- */

.blackout {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--cobalt-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.blackout.is-on { opacity: 1; pointer-events: auto; }

/* 地点路牌：钴蓝搪瓷白字，舒心坊是红牌，医院是白牌；钉在黑场正中，挂上去时晃一下 */
.place-sign {
  --sign-bg: var(--cobalt);
  --sign-ink: var(--enamel);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
  padding: 22px clamp(28px, 5vmin, 48px) 12px;
  color: var(--sign-ink);
  background: var(--sign-bg);
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px var(--sign-bg), inset 0 0 0 5.5px var(--sign-ink), var(--plate-shadow);
  transform-origin: 50% 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.place-sign[data-place='rival'] { --sign-bg: var(--red); }
.place-sign[data-place='hospital'] { --sign-bg: var(--enamel); --sign-ink: var(--cobalt); }
.place-sign::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e5e7ec, #7a7e87 60%, #4a4e57);
}
.place-sign__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vmin, 46px);
  line-height: 1.1;
  letter-spacing: .3em;
  text-indent: .3em;
}
.place-sign__sub {
  padding-top: 5px;
  min-width: 70%;
  border-top: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
  opacity: .85;
}
.place-sign__sub:empty { display: none; }
.blackout.has-caption .place-sign { opacity: 1; animation: hang 1.1s var(--ease-out); }

/* 每天开场的撕页挂历：红色挂头，白纸大字；最后五天红字，第三十天把数字圈起来 */
.day-card {
  --pace: 1;
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 6;
  width: clamp(150px, 24vmin, 210px);
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 0;
}
.day-card.is-shown { opacity: 1; animation: hang 1.1s var(--ease-out); }
.day-card.is-leaving { opacity: 0; transform: translateY(-24px); transition: opacity .35s ease-in, transform .35s ease-in; }
.day-card__binding {
  height: 20px;
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 28% 50%, var(--iron) 3.5px, transparent 4.5px),
    radial-gradient(circle at 72% 50%, var(--iron) 3.5px, transparent 4.5px),
    var(--red);
  box-shadow: inset 0 -1px 0 var(--red-deep);
}
.day-card__page {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 12px 14px;
  background: var(--enamel);
  border-radius: 0 0 8px 8px;
  border-top: 2px dashed var(--enamel-shade);
  box-shadow: var(--plate-shadow);
}
.day-card__week { font-size: 14px; letter-spacing: .4em; text-indent: .4em; color: var(--iron-soft); }
.day-card__num {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(64px, 12vmin, 104px);
  line-height: .95;
  color: var(--cobalt-ink);
  font-variant-numeric: tabular-nums;
}
.day-card__meta { font-family: var(--font-display); font-size: 15px; letter-spacing: .2em; text-indent: .2em; color: var(--cobalt); }
.day-card__recall {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(560px, 86vw);
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  color: var(--enamel);
}
.day-card__recall:empty { display: none; }
.day-card.is-shown .day-card__recall { animation: recall-in .8s .5s var(--ease-out) backwards; }
@keyframes recall-in { from { opacity: 0; transform: translateY(8px); } }
.day-card__page.is-final .day-card__num,
.day-card__page.is-final .day-card__meta { color: var(--red); }
.day-card__page.is-due .day-card__num::after {
  content: '';
  position: absolute;
  inset: -4px -18px -2px;
  border: 3px solid var(--red);
  border-radius: 48% 52% 46% 54%;
  rotate: -7deg;
}
.day-card__page.is-torn {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  transform-origin: 100% 0;
  animation: tear calc(.8s / var(--pace)) ease-in calc(.5s / var(--pace)) forwards;
}
@keyframes tear {
  25% { transform: rotate(-6deg); }
  100% { transform: translate(-30%, 120%) rotate(-26deg); opacity: 0; }
}
.day-card__page.is-flip { animation: flip-page .12s ease-out; }
@keyframes flip-page { from { transform: translateY(-5px); opacity: .5; } }

/* 震惊时画面短促一震 */
.scene.is-jolt { animation: cam-jolt .32s ease-out; }
@keyframes cam-jolt {
  20% { translate: -4px 2px; }
  45% { translate: 3px -2px; }
  70% { translate: -1px 1px; }
}

/* ---------- 对话：气泡、字幕、选项托盘 ---------- */

.dialog {
  --tray: 0px;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
/* 等着点继续时整块都能点；其余时候让点击落到舞台上的人和猫 */
.dialog.is-awaiting,
.dialog > * { pointer-events: auto; }
.dialog.is-awaiting.is-over-tappable { cursor: pointer; }
body.is-title .dialog { display: none; }

.line {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(440px, calc(100% - 24px));
  padding: 12px 18px 10px;
  border-radius: 14px;
  background: var(--enamel);
  border: 3px solid var(--cobalt-deep);
  box-shadow: 0 12px 22px -12px rgba(4, 10, 36, .75), 0 2px 0 rgba(4, 10, 36, .3);
  transform-origin: var(--tail-x, 50%) 100%;
}
.line[hidden] { display: none; }
.line.is-pop { animation: line-in .32s var(--ease-out); }
@keyframes line-in { from { transform: scale(.82); opacity: 0; } }

.line__who {
  position: absolute;
  top: -15px;
  left: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .15em;
  padding: 3px 11px 2px;
  border-radius: 7px;
  color: var(--enamel);
  background: var(--iron);
  box-shadow: inset 0 0 0 1.5px var(--iron), inset 0 0 0 2.5px rgba(243, 244, 239, .45);
}
.line__who:empty { display: none; }
.line__who.is-ya { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red), inset 0 0 0 2.5px rgba(243, 244, 239, .55); }
.line__who.is-xuan { background: var(--cobalt); box-shadow: inset 0 0 0 1.5px var(--cobalt), inset 0 0 0 2.5px rgba(243, 244, 239, .55); }

.line__body { font-size: 17px; line-height: 1.7; }
.line__body:empty { display: none; }
.line__next { display: flex; justify-content: flex-end; margin: 0 -8px -6px 0; }
.line__next:empty { display: none; }

.line__tail {
  position: absolute;
  top: 100%;
  left: calc(var(--tail-x, 50%) - 12px);
  width: 24px;
  height: 15px;
  margin-top: -1px;
  background: var(--cobalt-deep);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.line__tail::after {
  content: '';
  position: absolute;
  left: 4.5px;
  right: 4.5px;
  top: 0;
  height: 9.5px;
  background: var(--enamel);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.line.is-below { transform-origin: var(--tail-x, 50%) 0; }
.line.is-below .line__tail { top: auto; bottom: 100%; margin: 0 0 -1px; transform: scaleY(-1); }
.line.is-below .line__who { top: auto; bottom: -15px; }
.line:not(.is-bubble) .line__tail,
.line.is-side .line__tail { display: none; }
.line__ghost { visibility: hidden; }

/* 旁白：底部字幕条 */
.line.is-narr {
  left: 50%;
  top: auto;
  bottom: calc(var(--tray) + 14px);
  translate: -50% 0;
  max-width: min(720px, calc(100% - 24px));
  padding: 10px 20px 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(13, 26, 69, .9);
  color: var(--enamel);
  text-align: center;
  transform-origin: 50% 100%;
}
.line.is-narr .line__body { font-size: 16px; }
.line.is-narr .continue { color: var(--amber); }

/* 营业时的状态：左上角小签 */
.line.is-status {
  left: 12px;
  top: 12px;
  max-width: min(420px, calc(100% - 24px));
  padding: 6px 14px 5px;
  border-width: 2px;
  border-radius: 10px;
  transform-origin: 0 0;
}
.line.is-status .line__body { font-size: 14px; line-height: 1.55; }

.continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--cobalt);
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
}
.continue svg { width: 14px; height: 14px; animation: nudge 1.2s ease-in-out infinite; }
.continue:disabled { opacity: .45; cursor: default; }
.continue:disabled svg { animation: none; }
@keyframes nudge { 50% { transform: translateX(3px); } }
/* 自动播放：下面一道线走满就翻下一句 */
.continue { position: relative; }
.continue.is-auto::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 1px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  animation: auto-fill var(--auto, 2s) linear both;
}
@keyframes auto-fill { from { transform: scaleX(0); } }

body.is-peek .dialog { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.dialog__actions {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  width: min(640px, calc(100% - 24px));
  display: grid;
  gap: 8px;
}
.dialog__actions:empty { display: none; }
.dialog__actions .choice { animation: tray-in .4s var(--ease-out) backwards; }
.dialog__actions .choice:nth-child(2) { animation-delay: .05s; }
.dialog__actions .choice:nth-child(3) { animation-delay: .1s; }
.dialog__actions .choice:nth-child(4) { animation-delay: .15s; }
@keyframes tray-in { from { transform: translateY(14px); opacity: 0; } }
.dialog__actions > .skip,
.dialog__actions > .continue { justify-self: end; }
.dialog__actions:has(> .offer) { grid-template-columns: 1fr auto; align-items: end; }
.dialog__actions:has(> .offer) > .skip { grid-column: 2; grid-row: 1; }
.dialog__actions > .offer { grid-column: 1; justify-self: start; animation: tray-in .3s var(--ease-out) backwards; }
.dialog__actions > .skip { font-size: 14px; padding: 6px 12px; }

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 14px;
}
.choice__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--enamel);
  background: var(--cobalt);
  transition: background-color .18s, color .18s;
}
.choice__hint { display: block; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; opacity: .78; margin-top: 2px; }
.choice__hint:empty { display: none; }
/* 会结束整局的选项点了第一下：翻成红牌，写明后果 */
.tag.choice.is-armed,
.tag.choice.is-armed:hover {
  color: var(--enamel);
  background: var(--red);
  border-color: var(--red-deep);
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(243, 244, 239, .55), 0 3px 6px -2px rgba(80, 10, 8, .5);
}
.choice.is-armed .choice__key { color: var(--red); background: var(--enamel); }
.choice.is-armed .choice__hint { display: block; opacity: 1; }

/* ---------- 抽屉：早晨安排、账本、结局 ---------- */

.sheet {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(440px, 46%);
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px 22px 0;
  border-width: 5px;
  animation: sheet-in .5s var(--ease-out);
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0; } }
.sheet__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: .14em; color: var(--red); }
.sheet__text { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--iron-soft); }

.plan { display: grid; gap: 16px; }
.plan__shop { border-top: 1.5px dashed var(--enamel-shade); }
.plan__shop-summary {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  min-height: 44px;
  padding-top: 10px;
  list-style: none;
  cursor: pointer;
}
.plan__shop-summary::-webkit-details-marker { display: none; }
.plan__shop-state { font-size: 13px; color: var(--iron-soft); }
.plan__shop-summary svg { width: 16px; height: 16px; margin-left: auto; color: var(--cobalt); transition: transform .3s var(--ease-out); }
.plan__shop[open] .plan__shop-summary svg { transform: rotate(90deg); }
.plan__shop-body { display: grid; gap: 18px; padding-top: 8px; }
.staff-list { display: grid; }
.upgrade.is-hired .upgrade__name::after { content: ' · 在岗'; color: var(--red); }
.plan__group { display: grid; gap: 8px; align-content: start; }
.plan__title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--red);
  letter-spacing: .12em;
  margin: 0;
}
.plan__row { display: flex; flex-wrap: wrap; gap: 8px; }
.plan__row--pace { align-items: center; margin-top: 4px; }
.plan__label { font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; color: var(--iron-soft); margin-right: 2px; }
.plan__note { font-size: 13px; color: var(--iron-soft); margin: 0; min-height: 1.4em; }
.plan .tag { font-size: 16px; padding: 7px 12px; }

.upgrade {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 7px 0;
  border-bottom: 1.5px dashed var(--enamel-shade);
}
.upgrade:last-child { border-bottom: 0; }
.upgrade__name { font-family: var(--font-display); font-size: 16px; color: var(--cobalt); }
.upgrade__desc { grid-column: 1; font-size: 12.5px; color: var(--iron-soft); }
.upgrade .tag { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; padding: 5px 10px; min-width: 76px; }
.upgrade.is-owned .upgrade__name::after { content: ' · 已添置'; color: var(--red); }

.plan.is-coaching > :not(.is-coached),
.plan.is-coaching .plan__shop-body > :not(.is-coached) { opacity: .28; pointer-events: none; transition: opacity .3s; }
.plan.is-coaching .plan__shop-summary { pointer-events: none; }
.plan__tip {
  position: relative;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--cobalt);
  color: var(--enamel);
  box-shadow: 0 8px 16px -8px rgba(4, 10, 36, .7);
  animation: hang .9s var(--ease-out);
  transform-origin: 24px -10px;
}
.plan__tip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 22px;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom-color: var(--cobalt);
}
.plan__tip p { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.6; }
.plan__tip .tag { font-size: 15px; padding: 5px 12px; }
.plan__tip-skip {
  font: inherit;
  font-size: 13px;
  color: var(--enamel);
  background: none;
  border: 0;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: .8;
}
.plan__go {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  margin: 0 -22px;
  padding: 12px 22px 16px;
  background: var(--enamel);
  box-shadow: 0 -10px 14px -12px rgba(4, 10, 36, .45);
}
.plan__go .tag--red { width: 100%; }
.plan__forecast { font-size: 13.5px; color: var(--iron-soft); }

/* 账本 */
.ledger-wrap { display: grid; gap: 16px; }
.ledger-net { display: grid; gap: 2px; justify-items: start; }
.ledger-net__label { font-family: var(--font-display); font-size: 17px; color: var(--iron-soft); letter-spacing: .12em; }
.ledger-net__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vmin, 60px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
}
.ledger-net__value.is-out { color: var(--red); }
.ledger-net__note { font-size: 13px; color: var(--iron-soft); }

.ledger { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ledger td { padding: 6px 0; border-bottom: 1.5px solid var(--enamel-shade); font-size: 15px; }
.ledger td:last-child { text-align: right; font-family: var(--font-display); font-size: 19px; padding-left: 24px; }
.ledger .is-in { color: var(--cobalt); }
.ledger .is-out { color: var(--red); }
.ledger tr:last-child td { border-bottom: 0; }
.ledger--reveal tr,
.ledger-net--reveal { animation: row-in .34s var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 200ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(5px); } }
.ledger--total tr:last-child td { border-top: 3px double var(--iron); }

.sheet__actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 8px;
  margin: 16px -22px 0;
  padding: 12px 22px 16px;
  background: var(--enamel);
  box-shadow: 0 -10px 14px -12px rgba(4, 10, 36, .45);
}
.sheet__actions .tag--red { width: 100%; }

.ending-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vmin, 40px);
  color: var(--red);
  margin: 0 0 10px;
  letter-spacing: .1em;
}
.sheet__actions--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: stretch; }
.sheet__actions--pair .tag { width: 100%; }

/* ---------- 三十天回顾：挂牌写结局名，胆量曲线，片尾字幕往上滚 ---------- */

.recap {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 22px);
  padding: clamp(22px, 5vh, 44px) 16px clamp(14px, 3vh, 28px);
  background: var(--cobalt-ink);
  color: var(--enamel);
  animation: recap-in .6s ease both;
}
.recap[hidden] { display: none; }
@keyframes recap-in { from { opacity: 0; } }
.recap__head { display: grid; justify-items: center; gap: 10px; text-align: center; }
.recap__title {
  margin: 0;
  padding: .32em 1em .26em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 4.2vmin, 40px);
  letter-spacing: .2em;
  text-indent: .2em;
  background: var(--red);
  border: 5px solid var(--red-deep);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4.5px var(--enamel), var(--plate-shadow);
  transform-origin: 50% -20px;
  animation: hang 1.2s var(--ease-out) .2s both;
}
.recap__meta { margin: 0; font-size: 14px; letter-spacing: .3em; opacity: .75; }
.recap__chart { width: min(520px, 100%); margin: 0; padding: 24px 18px 10px; animation: tray-in .6s var(--ease-out) .4s both; }
.recap__chart[hidden] { display: none; }
.recap__caption { font-family: var(--font-display); font-size: 15px; letter-spacing: .2em; color: var(--cobalt); }
.recap__curve { display: block; width: 100%; height: auto; overflow: visible; }
.recap__rule { stroke: var(--enamel-shade); stroke-width: 1; stroke-dasharray: 3 3; }
.recap__axis { stroke: var(--iron-soft); stroke-width: 1; }
.recap__tick { font-family: var(--font-body); font-size: 8.5px; fill: var(--iron-soft); }
.recap__line {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 2.6s var(--ease-out) .8s forwards;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.recap__dot {
  fill: var(--red);
  stroke: var(--enamel);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-in .35s var(--ease-out) forwards;
  animation-delay: calc(1s + var(--i) * .2s);
}
@keyframes dot-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

.recap__roll {
  position: relative;
  width: min(520px, 100%);
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
/* 从下沿滚上来，停在最后一句“谢谢你……”上 */
.recap__credits {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  animation: roll var(--roll, 16s) linear 1.6s forwards;
}
@keyframes roll { to { top: 0; transform: translateY(calc(-100% + 3.4em)); } }
.credits__block { margin-bottom: 26px; }
.credits__block h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .4em;
  text-indent: .4em;
  text-align: center;
  opacity: .7;
}
.credits__block dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 18px; margin: 0; }
.credits__block dt { font-family: var(--font-display); font-size: 18px; letter-spacing: .1em; text-align: right; }
.credits__block dd { margin: 0; align-self: center; font-size: 14px; line-height: 1.5; opacity: .82; }
.credits__end { margin: 0; padding-top: 6px; font-family: var(--font-display); font-size: 19px; letter-spacing: .2em; text-align: center; }
.recap__next { min-width: min(280px, 100%); }

/* 一年后的尾声开始，顶部数值牌退场 */
body.is-epilogue .hud { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }

/* ---------- 结局图鉴 ---------- */

.ach-panel__section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .14em;
  color: var(--iron);
}
.ending-gallery {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px 10px;
}
.ending-card { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.ending-card__sign {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 42px;
  padding: 6px 4px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--enamel);
  background: var(--red);
  border: 3px solid var(--red-deep);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px var(--enamel);
}
.ending-card__name { font-size: 12.5px; line-height: 1.4; color: var(--iron); }
.ending-card:not(.is-got) .ending-card__sign {
  background: var(--enamel-shade);
  border-color: #a9adb5;
  box-shadow: inset 0 0 0 2px var(--enamel-shade), inset 0 0 0 3.5px rgba(60, 65, 80, .2);
}
.ending-card:not(.is-got) .ending-card__name { color: var(--iron-soft); }

.ending-ach { margin-top: 18px; }
.ending-ach__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: .12em; color: var(--red); }
.ach-list.ending-ach__list { grid-template-columns: 1fr; }

/* ---------- 标题画面 ---------- */

.title {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 18px;
  padding: 0 16px max(5vh, 20px);
  pointer-events: none;
}
body:not(.is-title) .title { display: none; }
.title > * { pointer-events: auto; }
.title__sub {
  margin: 0;
  padding: 18px 30px 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vmin, 28px);
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--red);
  animation: hang 1.2s var(--ease-out) .9s backwards;
}
.title__menu { display: grid; gap: 10px; width: min(320px, 100%); animation: tray-in .6s var(--ease-out) 1.3s backwards; }
.title__menu .tag--red, .title__menu > .tag { width: 100%; }
.title__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title__save { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--enamel); opacity: .85; }

/* ---------- 飞行层 ---------- */

.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.coin {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--enamel);
  background: var(--red);
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px var(--enamel), 0 4px 8px -2px rgba(4, 10, 36, .6);
}
.coin--out { background: var(--iron); box-shadow: inset 0 0 0 2px var(--iron), inset 0 0 0 3.5px var(--enamel), 0 4px 8px -2px rgba(4, 10, 36, .6); }

.float-tag {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 18px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--enamel);
  background: var(--cobalt);
  box-shadow: 0 4px 8px -3px rgba(4, 10, 36, .6);
}
.float-tag.is-neg { background: var(--red); }

/* ---------- 成就：奖章、挂牌提示、成就簿 ---------- */

.medal {
  --medal-ribbon: var(--red);
  --medal-ring: var(--cobalt);
  --medal-star: var(--red);
  flex: none;
  width: 32px;
  height: 40px;
}

.toast-layer {
  position: fixed;
  top: 76px;
  right: clamp(12px, 3vw, 28px);
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}
.toast-layer.is-left { right: auto; left: clamp(12px, 3vw, 28px); justify-items: start; }

.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 20px 22px 14px 16px;
  animation: toast-in 1.1s var(--ease-out);
  transition: transform .3s ease-in, opacity .3s ease-in;
}
.toast .medal { transform-origin: 50% 0; animation: medal-swing 1.6s var(--ease-out) .2s; }
.toast.is-leaving { transform: translateY(-16px); opacity: 0; }

@keyframes toast-in {
  0% { transform: translateY(-26px) rotate(-5deg); }
  40% { transform: translateY(0) rotate(3deg); }
  62% { transform: rotate(-1.6deg); }
  82% { transform: rotate(.7deg); }
  100% { transform: rotate(0); }
}
@keyframes medal-swing {
  0% { transform: rotate(0); }
  20% { transform: rotate(18deg); }
  45% { transform: rotate(-10deg); }
  70% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.toast__text { display: grid; gap: 2px; }
.toast__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .08em;
  color: var(--red);
}
.toast__desc { font-size: 13px; line-height: 1.5; color: var(--iron-soft); }

.ach-panel,
.menu-panel,
.log-panel {
  position: fixed;
  inset: 72px max(12px, env(safe-area-inset-right)) auto auto;
  margin: 0;
  max-height: calc(100dvh - 96px);
  padding: 28px 22px 18px;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--iron);
}
.ach-panel, .log-panel { width: min(560px, calc(100vw - 24px)); }
.menu-panel { width: min(400px, calc(100vw - 24px)); }
.ach-panel:popover-open, .menu-panel:popover-open, .log-panel:popover-open { animation: hang 1s var(--ease-out); }
body.is-title .ach-panel, body.is-title .menu-panel { inset: 0; margin: auto; height: fit-content; }
body.is-title .menu-panel__retry { display: none; }

.ach-panel__head, .menu-panel__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ach-panel__title, .menu-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .12em;
  color: var(--red);
}
.ach-panel__count { font-family: var(--font-display); font-size: 17px; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.ach-panel__close, .menu-panel__close { margin-left: auto; font-size: 15px; padding: 6px 12px; }

.setting {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--enamel-shade);
}
.setting__pace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.setting__pace .tag { font-size: 15px; padding: 6px 4px; }
.setting__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--iron-soft); }
.setting__toggle { font-size: 15px; padding: 6px 10px; }
.setting__toggle[aria-pressed='false'] { color: var(--iron-soft); border-color: #a9adb5; box-shadow: none; }

.setting__range {
  --fill: 70%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.setting__range:disabled { opacity: .4; cursor: not-allowed; }
.setting__range:focus-visible { outline-offset: 2px; }
.setting__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--cobalt) var(--fill), var(--enamel-shade) var(--fill));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
}
.setting__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--enamel);
  border: 3px solid var(--cobalt);
  box-shadow: 0 2px 4px -1px rgba(4, 10, 36, .5);
}
.setting__range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--enamel-shade); }
.setting__range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--cobalt); }
.setting__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--enamel);
  border: 3px solid var(--cobalt);
  box-shadow: 0 2px 4px -1px rgba(4, 10, 36, .5);
}

.menu-panel__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.menu-panel__actions .tag { font-size: 15px; padding: 8px 6px; }

.menu-panel__retry { padding: 12px 0; border-bottom: 1px solid var(--enamel-shade); }
.menu-panel__section {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--cobalt);
}
.retry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.retry .tag { font-size: 14px; padding: 6px 4px; }
.ending-retry { margin-top: 18px; }
.ending-retry .ending-ach__title { margin-bottom: 8px; }

/* 快捷键：一排小键帽，触屏上不显示 */
.keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--iron-soft);
}
.keys > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.keys dt { display: flex; align-items: center; gap: 2px; flex: none; }
.keys dd { margin: 0; white-space: nowrap; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--cobalt);
  background: var(--enamel);
  border: 1.5px solid var(--cobalt);
  border-bottom-width: 3px;
  border-radius: 5px;
}
@media (pointer: coarse), (max-width: 640px) { .keys { display: none; } }

/* 对话回看：按天分段，名牌和气泡里的一样 */
.log { list-style: none; margin: 8px 0 0; padding: 0; }
.log__day {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .15em;
  color: var(--red);
}
.log__day:first-child { margin-top: 4px; }
.log__row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--enamel-shade); }
.log__who {
  justify-self: start;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .1em;
  padding: 2px 8px 1px;
  border-radius: 6px;
  color: var(--enamel);
  background: var(--iron);
}
.log__who.is-ya { background: var(--red); }
.log__who.is-xuan { background: var(--cobalt); }
.log__text { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.65; }
.log__row.is-narr .log__text { color: var(--iron-soft); }
.log__row.is-pick .log__text { font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; color: var(--cobalt); }
.log__empty { padding: 18px 0 8px; font-size: 14px; color: var(--iron-soft); }

.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}
.ach {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--enamel-shade);
}
.ach .medal { grid-row: 1 / 3; width: 26px; height: 33px; }
.ach__name { font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; color: var(--cobalt); }
.ach__desc { font-size: 13px; line-height: 1.5; color: var(--iron-soft); }
.ach:not(.is-got) .medal { --medal-ribbon: var(--enamel-shade); --medal-ring: #a9adb5; --medal-star: transparent; }
.ach:not(.is-got) .ach__name { color: var(--iron-soft); }

/* ---------- 响应式 ---------- */

@media (max-width: 1100px) {
  .meter__owner { display: none; }
}

@media (max-width: 640px), (pointer: coarse) {
  .tag, .tag--quiet, .choice, .continue, .plan__tip-skip { min-height: 44px; }
}

@media (max-width: 640px) {
  .app { gap: 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .hud { flex-wrap: wrap; gap: 6px; }
  .plate--day { padding: 7px 10px 5px; gap: 8px; }
  .day__num b { font-size: 24px; }
  .day__num small { font-size: 13px; }
  .day__meta { font-size: 12px; }
  .day__lease { font-size: 12px; }
  .hud .plate--funds { flex: 1; padding: 6px 10px 5px; gap: 6px; }
  .funds__reels { font-size: 24px; }
  .funds__label { font-size: 12px; }
  .funds__yen { font-size: 16px; }
  .hud .plate--funds { min-width: 0; }
  .hud__tools { display: contents; }
  .hud__tools .tag--quiet { padding: 4px 9px; font-size: 14px; }
  .hud__menu { width: 44px; order: 4; }
  .meters { flex: 1 1 calc(100% - 56px); order: 3; gap: 6px; }
  .plate--meter { padding: 6px 8px 5px; gap: 2px 4px; }
  .meter__label { font-size: 12px; }
  .meter__num { font-size: 16px; }
  .pip { height: 4px; }
  .meter__pips { gap: 1.5px; }
  .stage { border-radius: 10px; }

  .line { max-width: calc(100% - 16px); padding: 10px 14px 8px; }
  .line__body { font-size: 15.5px; line-height: 1.65; }
  .line.is-narr .line__body { font-size: 15px; }
  .line.is-status { left: 8px; top: 8px; }
  .dialog__actions { width: calc(100% - 16px); bottom: 8px; gap: 6px; }
  .choice { padding: 8px 12px; font-size: 14.5px; }

  .sheet {
    top: auto;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    max-height: 66%;
    padding: 22px 16px 0;
    animation-name: sheet-up;
  }
  .plan__go, .sheet__actions { margin-inline: -16px; padding-inline: 16px; }
  .ach-panel, .menu-panel, .log-panel { inset: 12px; margin: auto; width: auto; height: fit-content; max-height: calc(100dvh - 24px); }
  .ach-list { grid-template-columns: 1fr; }
  .toast-layer { top: 108px; }
}
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }

@media (max-height: 520px) {
  .app { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .plate--day, .hud .plate--funds, .plate--meter { padding-top: 5px; padding-bottom: 4px; }
  .day__num b, .funds__reels { font-size: 22px; }
  .meter__num { font-size: 16px; }
  .pip { height: 4px; }
  .line__body { font-size: 15px; line-height: 1.55; }
  .choice { padding: 6px 12px; min-height: 38px; }
  .choice__hint { display: none; }
  .sheet { top: 6px; bottom: auto; right: 6px; max-height: calc(100% - 12px); }
  .day-card { top: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .shutter { transition: opacity .3s !important; }
  .shutter.is-open { transform: none; opacity: 0; }
  .recap__roll { overflow: auto; mask-image: none; }
  .recap__credits { position: static; animation: none !important; }
}