/* 燃夜 RANYE — UI. Everything is sized in font pixels (--fp) so the 12px pixel font stays crisp:
   JS sets --fp so that one font pixel is a whole number of device pixels. */

@font-face {
  font-family: 'FusionPixel';
  src: url('assets/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2') format('woff2');
  font-display: block;
}

:root {
  --ink0: #07080f;
  --ink1: #0e1024;
  --ink2: #181c3a;
  --ink3: #262b52;
  --ink4: #3a3f6e;
  --red: #c8323c;
  --red-hi: #ff5a4f;
  --red-lo: #851a2a;
  --red-dd: #4a0e1a;
  --gold: #f2b33d;
  --gold-hi: #ffd96b;
  --gold-lo: #9c6a1e;
  --cream: #f3e6c8;
  --cream-lo: #c7b08a;
  --mute: #8e93b8;
  --wood: #43281c;
  --wood-hi: #6b412c;
  --paper: #efe0bf;
  --ink-text: #3a2a22;

  --fp: 2px;  /* CSS px per font pixel (set by JS) */
  --ip: 3px;  /* CSS px per icon pixel */
  --pp: 4px;  /* CSS px per portrait pixel */
  --fs: calc(12 * var(--fp));
  --fs2: calc(24 * var(--fp));
  --fs3: calc(36 * var(--fp));
  --lh: calc(18 * var(--fp));
  --b: var(--fp);
  --g: calc(8 * var(--fp));
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

html,
body {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink0);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'FusionPixel', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--cream);
  -webkit-font-smoothing: none;
  font-smooth: never;
  cursor: default;
}
[hidden] {
  display: none !important;
}
p,
h1,
h2,
h3 {
  margin: 0;
  font-weight: normal;
}

#app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink0);
}
#app.rot {
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
}
#view {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}
#hudlayer,
#modallayer,
#touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#hudlayer { z-index: 1; }
#touch { z-index: 2; }
#modallayer { z-index: 3; }

.ico {
  display: inline-block;
  flex: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.shadowed,
#hud,
#banner,
#bossbar {
  text-shadow: var(--fp) var(--fp) 0 var(--ink0);
}

/* ── Pixel panel: notched double border drawn with box-shadows ─────────── */
.px {
  --line: var(--gold-lo);
  --fill: rgba(14, 16, 36, 0.94);
  background: var(--fill);
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--line),
    0 var(--b) 0 0 var(--line),
    calc(var(--b) * -1) 0 0 0 var(--line),
    var(--b) 0 0 0 var(--line),
    0 calc(var(--b) * -2) 0 0 var(--ink0),
    0 calc(var(--b) * 2) 0 0 var(--ink0),
    calc(var(--b) * -2) 0 0 0 var(--ink0),
    calc(var(--b) * 2) 0 0 0 var(--ink0);
}

/* ── HUD ────────────────────────────────────────────────── */
#hud {
  position: absolute;
  inset: 0;
  padding: calc(var(--g) * 1.5 + var(--st)) calc(var(--g) * 2 + var(--sr)) 0 calc(var(--g) * 2 + var(--sl));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#app.touchui #hud {
  padding-right: calc(58px + var(--sr));
}
.hud-left,
.hud-right {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fp) * 5);
}
.hud-right {
  align-items: flex-end;
}
#hearts {
  display: flex;
  gap: var(--ip);
}
#hearts.shake {
  animation: shake 0.32s steps(4);
}
#inv {
  display: flex;
  gap: calc(var(--fp) * 9);
}
.it {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 3);
}
.it b {
  font-weight: normal;
  min-width: calc(var(--fp) * 7);
}
.it.bump b {
  animation: bump 0.3s steps(3);
  color: var(--gold-hi);
}
#watch {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 4);
  color: var(--cream);
}
#watch b {
  font-weight: normal;
}
#watch .dots {
  display: flex;
  gap: var(--fp);
}
#watch .dots i {
  width: calc(var(--fp) * 3);
  height: calc(var(--fp) * 3);
  background: var(--ink4);
}
#watch .dots i.on {
  background: var(--gold);
}
#tracker {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 5);
  max-width: calc(var(--fs) * 20);
  padding: calc(var(--fp) * 2) calc(var(--fp) * 6) calc(var(--fp) * 2) calc(var(--fp) * 2);
  background: rgba(7, 8, 15, 0.55);
}
#tracker em {
  font-style: normal;
  flex: none;
  padding: 0 calc(var(--fp) * 3);
  color: var(--ink0);
  background: var(--gold);
  text-shadow: none;
}
#tracker.final em {
  background: var(--red);
  color: var(--cream);
}
#tracker.pulse {
  animation: pulse 0.5s steps(2) 3;
}

#bossbar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--g) * 2 + var(--sb));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 4);
}
#app.touchui #bossbar {
  bottom: auto;
  top: calc(var(--g) * 5 + var(--st));
}
#bossbar .bname {
  color: var(--cream);
  letter-spacing: 0.3em;
}
#bossbar .bname small {
  color: var(--mute);
  font-size: var(--fs);
  letter-spacing: 0.1em;
  margin-left: 0.6em;
}
#bossbar .bar {
  display: flex;
  gap: calc(var(--fp) * 3);
}
#bossbar .bar i {
  display: block;
  width: calc(var(--fp) * 44);
  height: calc(var(--fp) * 4);
  background: var(--ink2);
  box-shadow: 0 0 0 var(--fp) var(--ink0);
}
#bossbar .bar u {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transition: width 0.25s steps(4);
}

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 4);
  opacity: 0;
  transition: opacity 0.5s steps(5);
}
#banner.show {
  opacity: 1;
}
#banner b {
  font-weight: normal;
  font-size: var(--fs2);
  line-height: 1;
  color: var(--gold-hi);
  letter-spacing: 0.25em;
  padding-left: 0.25em;
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 8);
}
#banner b::before,
#banner b::after {
  content: '';
  width: calc(var(--fp) * 22);
  height: var(--fp);
  background: var(--gold-lo);
}
#banner span {
  color: var(--cream-lo);
  letter-spacing: 0.2em;
}

#arrow {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 0 calc(var(--fp) * 3) rgba(255, 200, 80, 0.6));
}
#arrow.pulse .ico {
  animation: pulse 0.4s steps(2) 4;
}

#prompt {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 3);
  padding: 0 calc(var(--fp) * 4) 0 0;
  background: rgba(7, 8, 15, 0.8);
  white-space: nowrap;
  transform: translate(-50%, -100%);
}
#prompt kbd {
  font-family: inherit;
  color: var(--ink0);
  background: var(--gold);
  padding: 0 calc(var(--fp) * 3);
}

#toasts {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--g) * 7 + var(--st));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 4);
}
.toast {
  padding: calc(var(--fp) * 2) calc(var(--fp) * 8);
  background: rgba(7, 8, 15, 0.85);
  box-shadow: 0 0 0 var(--fp) var(--ink3);
  animation: rise 0.2s steps(3);
  transition: opacity 0.3s steps(3);
}
.toast.gold {
  color: var(--gold-hi);
  box-shadow: 0 0 0 var(--fp) var(--gold-lo);
}
.toast.red {
  color: var(--cream);
  background: rgba(133, 26, 42, 0.92);
  box-shadow: 0 0 0 var(--fp) var(--red);
}
.toast.out {
  opacity: 0;
}

#vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 40, 55, 0.55) 100%);
  opacity: 0;
}
#vignette.hit {
  animation: vig 0.35s steps(4);
}

/* ── Touch controls ─────────────────────────────────────── */
#stickzone {
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 0;
  width: 46%;
  pointer-events: auto;
}
#stick {
  position: absolute;
  left: 0;
  top: 0;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border-radius: 50%;
  background: rgba(243, 230, 200, 0.07);
  box-shadow: inset 0 0 0 2px rgba(243, 230, 200, 0.22);
  opacity: 0;
  pointer-events: none;
}
#stick.on {
  opacity: 1;
}
#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(243, 230, 200, 0.32);
}
.tbtn {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: auto;
  font-size: var(--fs);
  color: var(--cream);
  background: rgba(14, 16, 36, 0.55);
  box-shadow: inset 0 0 0 2px rgba(243, 230, 200, 0.28);
  border-radius: 18px;
  opacity: 0.85;
}
.tbtn.on {
  background: rgba(200, 50, 60, 0.85);
  box-shadow: inset 0 0 0 2px var(--red-hi);
  opacity: 1;
}
#tb-attack {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  right: calc(22px + var(--sr));
  bottom: calc(24px + var(--sb));
}
#tb-dash {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  right: calc(112px + var(--sr));
  bottom: calc(18px + var(--sb));
}
#tb-cracker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  right: calc(34px + var(--sr));
  bottom: calc(116px + var(--sb));
}
#tb-cracker .badge {
  position: absolute;
  right: -2px;
  top: -2px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  border-radius: 9px;
  color: var(--ink0);
  background: var(--gold);
}
#tb-interact {
  width: 72px;
  height: 44px;
  right: calc(104px + var(--sr));
  bottom: calc(96px + var(--sb));
  color: var(--ink0);
  background: rgba(242, 179, 61, 0.92);
  box-shadow: inset 0 0 0 2px var(--gold-hi);
  animation: rise 0.2s steps(3);
}
#tb-pause {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  right: calc(10px + var(--sr));
  top: calc(10px + var(--st));
}

/* ── Modal layer ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fp) * 4);
  min-width: calc(var(--fs) * 5);
  padding: calc(var(--fp) * 3) calc(var(--fp) * 10);
  color: var(--cream);
  pointer-events: auto;
  cursor: pointer;
  --line: var(--ink4);
}
.btn.sel,
.btn:hover {
  --line: var(--gold);
  color: var(--gold-hi);
}
.btn.primary {
  --fill: var(--red-lo);
  --line: var(--red);
}
.btn.primary.sel,
.btn.primary:hover {
  --fill: var(--red);
  --line: var(--gold-hi);
  color: var(--cream);
}
.btn:active {
  transform: translateY(var(--fp));
}
.btn.dis {
  opacity: 0.45;
}

#title {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--g) * 5 + var(--st)) calc(var(--g) * 2) calc(var(--g) * 2.5 + var(--sb));
  background: radial-gradient(ellipse at 50% 62%, transparent 22%, rgba(7, 8, 15, 0.72) 100%);
}
#title .top,
#title .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#title .bottom {
  gap: calc(var(--g) * 1.5);
}
#title .logo {
  font-size: calc(var(--fs) * 6);
  line-height: 1;
  color: var(--cream);
  letter-spacing: 0.08em;
  padding-left: 0.08em;
  text-shadow:
    0 calc(var(--fp) * 2) 0 var(--red),
    0 calc(var(--fp) * 4) 0 var(--red-lo),
    0 calc(var(--fp) * 6) 0 var(--red-dd),
    0 calc(var(--fp) * 8) 0 var(--ink0);
  animation: rise 0.8s steps(6);
}
#title .roman {
  margin-top: calc(var(--fp) * 14);
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 8);
  color: var(--gold);
  letter-spacing: 0.7em;
  padding-left: 0.7em;
}
#title .badge {
  letter-spacing: 0.08em;
  padding: 0 calc(var(--fp) * 5);
  color: var(--ink0);
  background: var(--gold);
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--gold),
    0 var(--b) 0 0 var(--gold),
    0 calc(var(--b) * 2) 0 0 var(--gold-lo);
}
#title .tag {
  margin-top: calc(var(--fp) * 12);
  color: var(--cream-lo);
  letter-spacing: 0.12em;
}
#title .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 5);
}
#title .item {
  position: relative;
  padding: 0 calc(var(--fp) * 14);
  color: var(--cream-lo);
  cursor: pointer;
  pointer-events: auto;
  letter-spacing: 0.15em;
}
#title .item.sel {
  color: var(--gold-hi);
}
#title .item.sel .ico {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: flick 0.45s steps(2) infinite;
}
#title .item:not(.sel) .ico {
  display: none;
}
#title .hint {
  color: var(--cream-lo);
  animation: blink 1.2s steps(1) infinite;
}
#title .footer:empty {
  display: none;
}
#title .footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--fp) * 6) calc(var(--fp) * 10);
  padding: 0 calc(var(--g) * 2);
}
#title .footer a,
#title .footer .ca {
  color: var(--cream-lo);
  text-decoration: none;
  pointer-events: auto;
}
#title .footer a:hover {
  color: var(--gold-hi);
}
#title .footer .ca {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 4);
  user-select: text;
  -webkit-user-select: text;
}
#title .footer .ca code {
  font-family: inherit;
  color: var(--cream);
}
#title .footer .copy {
  padding: 0 calc(var(--fp) * 4);
  color: var(--ink0);
  background: var(--gold);
  cursor: pointer;
}
#title .corner {
  position: absolute;
  right: calc(var(--g) * 2 + var(--sr));
  bottom: calc(var(--g) * 1.5 + var(--sb));
  color: var(--ink4);
}
/* 中文 | EN language toggle (only rendered while English is enabled in src/lang.js) */
#title .langsw {
  position: absolute;
  right: calc(var(--g) * 2 + var(--sr));
  top: calc(var(--g) * 1.5 + var(--st));
  display: flex;
  pointer-events: auto;
  background: rgba(7, 8, 15, 0.6);
  box-shadow: 0 0 0 var(--fp) var(--ink4);
}
#title .langsw span {
  padding: calc(var(--fp) * 3) calc(var(--fp) * 7);
  color: var(--cream-lo);
  cursor: pointer;
}
#title .langsw span:hover {
  color: var(--gold-hi);
}
#title .langsw span.on {
  color: var(--ink0);
  background: var(--gold);
}

/* Short screens (landscape phones, incl. the force-rotated portrait case): set from JS on the
   *logical* size, because media queries only see the physical viewport. */
#app.short #title {
  padding-top: calc(var(--g) * 3 + var(--st));
}
#app.short #title .logo {
  font-size: calc(var(--fs) * 4);
}
#app.short #title .roman {
  margin-top: calc(var(--fp) * 10);
}
#app.short #title .tag {
  margin-top: calc(var(--fp) * 8);
}
#app.short #title .menu {
  flex-direction: row;
  gap: calc(var(--fp) * 6) calc(var(--fp) * 10);
}

/* Dialogue */
#dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--g) * 2 + var(--sb));
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--g) * 2 + var(--sr)) 0 calc(var(--g) * 2 + var(--sl));
  pointer-events: auto;
}
#dialog .dlg {
  position: relative;
  display: flex;
  gap: calc(var(--g) * 1.5);
  width: 100%;
  max-width: calc(var(--fs) * 36);
  padding: calc(var(--g) * 1.5) calc(var(--g) * 2) calc(var(--g) * 1.5) calc(var(--g) * 1.5);
  animation: rise 0.18s steps(3);
}
#dialog .portrait {
  flex: none;
  width: calc(16 * var(--pp));
  height: calc(16 * var(--pp));
  background: var(--ink2);
  box-shadow: 0 0 0 var(--fp) var(--ink3);
  align-self: center;
}
#dialog .portrait canvas {
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#dialog .body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--fp) * 3);
}
#dialog .who {
  align-self: flex-start;
  padding: 0 calc(var(--fp) * 5);
  color: var(--cream);
  background: var(--red);
}
#dialog .who.hero {
  color: var(--ink0);
  background: var(--gold);
}
#dialog .text {
  min-height: calc(var(--lh) * 3);
  color: var(--cream);
  word-break: break-all;
}
#dialog .more {
  position: absolute;
  right: calc(var(--g) * 1.2);
  bottom: calc(var(--fp) * 3);
  color: var(--gold);
  animation: bob 0.6s steps(2) infinite;
  opacity: 0;
}
#dialog .more.on {
  opacity: 1;
}

/* Generic overlay panel (board / shop / red envelope / pause / settings / help) */
#panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--g) * 2);
  background: rgba(7, 8, 15, 0.62);
  pointer-events: auto;
}
.sheet {
  display: flex;
  flex-direction: column;
  gap: calc(var(--g) * 1.5);
  padding: calc(var(--g) * 2) calc(var(--g) * 2.5);
  max-width: 100%;
  max-height: 100%;
  /* Small screens (and longer English text): let a tall panel scroll instead of clipping. */
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--ink4) transparent;
  animation: rise 0.2s steps(3);
}
.sheet h2 {
  text-align: center;
  color: var(--gold-hi);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}
.sheet .row {
  display: flex;
  gap: calc(var(--g) * 1.5);
  justify-content: center;
  flex-wrap: wrap;
}
.sheet .col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fp) * 5);
  align-items: stretch;
}
.sheet .sub {
  color: var(--mute);
  text-align: center;
}

/* Bounty board */
.board {
  --fill: var(--wood);
  --line: var(--wood-hi);
  width: calc(var(--fs) * 38);
}
.posters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--g) * 1.2);
}
.poster {
  position: relative;
  padding: calc(var(--g) * 1) calc(var(--g) * 1.2);
  color: var(--ink-text);
  background: var(--paper);
  box-shadow: 0 var(--b) 0 0 #b59a6a;
  cursor: pointer;
  pointer-events: auto;
  min-height: calc(var(--lh) * 4.5);
}
.poster h3 {
  color: var(--red-lo);
}
.poster .giver {
  color: #8a6a4a;
}
.poster .rew {
  color: #9a5a00;
  margin-top: calc(var(--fp) * 2);
}
.poster .st {
  position: absolute;
  right: calc(var(--fp) * 5);
  top: calc(var(--fp) * 5);
  padding: 0 calc(var(--fp) * 3);
  color: var(--paper);
  background: #8a6a4a;
}
.poster .st.open {
  background: var(--red);
}
.poster .st.active {
  background: #3a7a55;
}
.poster.locked {
  background: #9c8a68;
  color: #5a4a3a;
  cursor: default;
}
.poster.locked h3 {
  color: #5a4a3a;
}
.poster.sel {
  box-shadow:
    0 0 0 var(--fp) var(--gold-hi),
    0 0 0 calc(var(--fp) * 2) var(--ink0);
}
.poster .seal {
  position: absolute;
  right: calc(var(--fp) * 8);
  bottom: calc(var(--fp) * 6);
  padding: 0 calc(var(--fp) * 3);
  color: var(--red);
  box-shadow: 0 0 0 var(--fp) var(--red);
  transform: rotate(-12deg);
  letter-spacing: 0.1em;
}
.poster .seal.new {
  animation: stamp 0.35s steps(4);
}

/* Shop */
.shop {
  width: calc(var(--fs) * 30);
}
.goods {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fp) * 4);
}
.good {
  display: flex;
  align-items: center;
  gap: calc(var(--g) * 1.2);
  padding: calc(var(--fp) * 4) calc(var(--fp) * 6);
  background: var(--ink2);
  cursor: pointer;
  pointer-events: auto;
}
.good .ico {
  margin: 0 calc(var(--fp) * 2);
}
.good .nm {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.good .nm small {
  font-size: var(--fs);
  color: var(--mute);
}
.good .price {
  color: var(--gold-hi);
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 3);
}
.good.sel {
  box-shadow: 0 0 0 var(--fp) var(--gold);
}
.good.sold {
  opacity: 0.45;
}
.shop .purse {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--fp) * 4);
  color: var(--cream-lo);
}

/* Red envelope (styled after WeChat's 红包) */
.red {
  position: relative;
  width: calc(var(--fs) * 15);
  height: calc(var(--fs) * 21);
  background: #d4453f;
  box-shadow:
    0 0 0 var(--fp) #a8322f,
    0 0 0 calc(var(--fp) * 2) var(--ink0);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: rise 0.25s steps(4);
}
.red .flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: #c03a36;
  border-bottom: var(--fp) solid #e8a05a;
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
}
.red.opened .flap {
  height: 17%;
  border-radius: 0 0 50% 50% / 0 0 45% 45%;
  transition: height 0.3s steps(3);
}
.red .from {
  position: relative;
  margin-top: calc(var(--fs) * 2.2);
  color: #ffe6b0;
  text-align: center;
}
.red .open {
  position: relative;
  margin-top: calc(var(--fs) * 3.4);
  width: calc(var(--fs) * 5);
  height: calc(var(--fs) * 5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs2);
  color: #3a2210;
  background: #ebcd99;
  box-shadow: 0 var(--fp) 0 0 #b8904f;
  cursor: pointer;
  pointer-events: auto;
}
.red .open.spin {
  animation: spinY 0.5s steps(6) infinite;
}
.red .inside {
  position: relative;
  margin-top: calc(var(--fs) * 2.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 5);
  color: #ffe6b0;
}
.red .inside .big {
  font-size: var(--fs2);
  line-height: 1;
  color: var(--gold-hi);
}
.red .inside .items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 3);
}
.red .inside .items span {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 4);
}
.red .take {
  position: absolute;
  bottom: calc(var(--g) * 1.5);
}

/* Settings / help */
.settings,
.help,
.pause {
  min-width: calc(var(--fs) * 20);
}
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--g) * 2);
  padding: calc(var(--fp) * 2) calc(var(--fp) * 4);
  cursor: pointer;
  pointer-events: auto;
}
.setrow.sel {
  box-shadow: 0 0 0 var(--fp) var(--gold);
}
.setrow .val {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 5);
  color: var(--gold-hi);
}
.setrow .val .ar {
  color: var(--mute);
}
.meter {
  display: flex;
  gap: var(--fp);
}
.meter i {
  width: calc(var(--fp) * 3);
  height: calc(var(--fp) * 7);
  background: var(--ink4);
}
.meter i.on {
  background: var(--gold);
}
.keys {
  display: grid;
  grid-template-columns: auto auto;
  gap: calc(var(--fp) * 4) calc(var(--g) * 3);
}
.keys .k {
  color: var(--gold-hi);
  text-align: right;
}
.pause .col .btn {
  width: 100%;
}

/* Intro / fallen card */
#card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fp) * 10);
  padding: calc(var(--g) * 3);
  text-align: center;
  pointer-events: auto;
}
#card.black {
  background: var(--ink0);
}
#card p {
  opacity: 0;
  transition: opacity 0.6s steps(6);
  letter-spacing: 0.08em;
}
#card p.on {
  opacity: 1;
}
#card .big {
  font-size: var(--fs2);
  line-height: 1.2;
  color: var(--cream);
}
#card .tip {
  color: var(--mute);
}
#card .skip {
  position: absolute;
  right: calc(var(--g) * 2 + var(--sr));
  bottom: calc(var(--g) * 2 + var(--sb));
  color: var(--ink4);
}

/* Ending */
#ending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: calc(var(--g) * 2) calc(var(--g) * 5);
  padding: calc(var(--g) * 2);
  pointer-events: auto;
  background: linear-gradient(to bottom, rgba(7, 8, 15, 0) 0%, rgba(7, 8, 15, 0.55) 100%);
}
#ending .e-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--g) * 1.5);
}
#ending .sub {
  color: var(--mute);
}
#ending .dawn {
  font-size: calc(var(--fs) * 4);
  line-height: 1;
  color: var(--gold-hi);
  letter-spacing: 0.15em;
  padding-left: 0.15em;
  text-shadow:
    0 calc(var(--fp) * 2) 0 var(--red),
    0 calc(var(--fp) * 4) 0 var(--red-lo),
    0 calc(var(--fp) * 6) 0 var(--ink0);
  animation: rise 1s steps(8);
}
#ending .lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp) * 4);
  color: var(--cream);
  text-shadow: var(--fp) var(--fp) 0 var(--ink0);
}
#ending .lines p {
  opacity: 0;
  transition: opacity 0.8s steps(6);
}
#ending .lines p.on {
  opacity: 1;
}
#ending .stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: calc(var(--fp) * 3) calc(var(--g) * 3);
  padding: calc(var(--g) * 1.5) calc(var(--g) * 2.5);
  opacity: 0;
  transition: opacity 0.6s steps(4);
}
#ending .stats.on {
  opacity: 1;
}
#ending .stats h3 {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin-bottom: calc(var(--fp) * 3);
}
#ending .stats .v {
  color: var(--gold-hi);
  text-align: right;
}
#ending .stats .badge {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: calc(var(--fp) * 5);
  padding: 0 calc(var(--fp) * 5);
  color: var(--ink0);
  background: var(--gold);
}
#ending .row {
  display: flex;
  gap: calc(var(--g) * 2);
  opacity: 0;
  transition: opacity 0.6s steps(4);
}
#ending .row.on {
  opacity: 1;
}

#fade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--ink0);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.6s steps(6);
}

#nofile {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--cream-lo);
  background: var(--ink0);
}
#nofile b {
  font-size: 40px;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--red-lo);
}
#nofile code {
  color: var(--gold-hi);
}

@keyframes rise {
  from {
    transform: translateY(calc(var(--fp) * 6));
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes bob {
  50% {
    transform: translateY(calc(var(--fp) * 2));
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes flick {
  50% {
    transform: translateY(-50%) scaleX(-1);
  }
}
@keyframes shake {
  25% {
    transform: translateX(calc(var(--fp) * -3));
  }
  75% {
    transform: translateX(calc(var(--fp) * 3));
  }
}
@keyframes bump {
  50% {
    transform: translateY(calc(var(--fp) * -3));
  }
}
@keyframes pulse {
  50% {
    filter: brightness(1.8);
  }
}
@keyframes vig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes stamp {
  0% {
    transform: rotate(-12deg) scale(2.4);
    opacity: 0;
  }
  70% {
    transform: rotate(-12deg) scale(0.92);
    opacity: 1;
  }
  100% {
    transform: rotate(-12deg) scale(1);
  }
}
@keyframes spinY {
  50% {
    transform: scaleX(0.1);
  }
}

/* ── English layout tweaks: word wrapping and tighter letter-spacing on Latin text ── */
html[lang='en'] #dialog .text {
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang='en'] #banner b {
  letter-spacing: 0.06em;
  padding-left: 0.06em;
}
html[lang='en'] #banner span,
html[lang='en'] .sheet h2,
html[lang='en'] #bossbar .bname,
html[lang='en'] #title .tag,
html[lang='en'] #ending .stats h3,
html[lang='en'] #card p {
  letter-spacing: 0.03em;
  padding-left: 0;
}
html[lang='en'] #title .item {
  letter-spacing: 0.03em;
}
html[lang='en'] #ending .dawn {
  letter-spacing: 0.04em;
  padding-left: 0.04em;
}
html[lang='en'] #tracker {
  max-width: calc(var(--fs) * 24);
}