html, body { margin: 0; height: 100%; background: #070b0a; overflow: hidden; }
body { display: grid; place-items: center; }
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 1366 / 820));
  height: min(100vh, calc(100vw * 820 / 1366));
  overflow: hidden;
  background: #101614 center / cover no-repeat;
  color: #f4efe4;
  font-family: "Songti SC", "Noto Serif SC", serif;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }

.menu { position: absolute; inset: 0; display: grid; place-items: center; background: #0b100f; }
.canvas { position: relative; }
.canvas img { width: 100%; height: 100%; display: block; }
.hot { position: absolute; border-radius: 14px; }
.hot:hover { background: rgba(46, 158, 138, 0.18); box-shadow: inset 0 0 0 2px rgba(80, 210, 180, 0.75); }

.sheet, .dialog, .ending {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 7, 6, 0.55);
}
.paper {
  width: min(640px, 86%);
  padding: 28px 32px;
  color: #2a241c;
  background: rgba(237, 227, 204, 0.96);
  border: 1px solid rgba(50, 42, 32, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.paper.wide { width: min(880px, 92%); }
.sheet, .dialog, .ending { box-sizing: border-box; padding: 90px 12px 18px; z-index: 4; }
.paper { box-sizing: border-box; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.slip:disabled { opacity: .5; }
.book.lore-book { right: 88px; }
.chapter-note { position: absolute; left: 16px; bottom: 14px; max-width: 70%; padding: 6px 12px; background: rgba(12, 20, 17, .8); font-size: 13px; pointer-events: none; }
.chapter-note b, .chapter-note span { display: block; line-height: 1.5; }
.fragment { padding: 12px 0; border-bottom: 1px solid rgba(50, 42, 32, .2); }
.fragment h3 { margin: 0; font-size: 16px; }
.fragment.unread { opacity: .5; }
.lore-progress { text-align: center; }
@media (max-width: 600px) {
  .stage:has(.dialog), .stage:has(.sheet), .stage:has(.ending) { height: 100dvh; }
  .paper { width: 100%; padding: 18px; }
  .paper h2 { font-size: 21px; }
  .hud { font-size: 12px; gap: 4px; padding: 0 6px; }
  .chapter-note { max-width: 62%; font-size: 11px; }
}
.paper h2, .album h3 { margin: 0 0 8px; text-align: center; font-weight: 600; }
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.album h3 { font-size: 16px; }
.gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gallery figure { width: 108px; margin: 0; text-align: center; }
.gallery img { width: 100%; height: 120px; object-fit: contain; }
.gallery figcaption, .album .slip { font-size: 13px; }
.paper p { margin: 8px 0; line-height: 1.6; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 16px; }
.picks button, .picks span.on, .slip, .seal {
  border: 1px solid rgba(50, 42, 32, 0.35);
  background: rgba(255, 250, 240, 0.7);
  color: #2a241c;
  padding: 8px 14px;
}
.picks button.on, .picks span.on { background: #6e2e28; color: #f6efe4; border-color: #6e2e28; }
.seal { background: #6e2e28; color: #f6efe4; }

.hud {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 3;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  height: 36px; padding: 0 12px;
  background: rgba(20, 32, 28, 0.74);
  border: 1px solid rgba(160, 184, 168, 0.4);
  color: #f0eadc; font-size: 16px;
}
.piles { display: flex; gap: 14px; align-items: center; }
.piles img { width: 22px; height: 22px; vertical-align: middle; }

.map { position: absolute; inset: 0; background: #14211c url("/art/environments/realm_map_bg.png") center / cover; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bag { position: absolute; right: 16px; bottom: 16px; z-index: 4; }
.book { position: absolute; top: 54px; right: 16px; z-index: 5; padding: 6px 12px; }
.dock {
  position: absolute; z-index: 6; top: 52px; left: 16px;
  display: flex; gap: 10px;
}
.stage:has(.menu) .dock { top: 22px; left: auto; right: 22px; }
.charm {
  padding: 7px 16px; letter-spacing: 0.16em; font-size: 15px; color: #f8f1e4;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 232, 204, 0.2), transparent 58%),
    linear-gradient(180deg, #8d4a3f, #5a2c27);
  border: 1px solid #e6c79a; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.45), 0 8px 16px rgba(0, 0, 0, 0.28);
}
.charm:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.55), 0 0 0 3px rgba(231, 199, 162, 0.28), 0 10px 18px rgba(0, 0, 0, 0.32); }
.charm:active { transform: translateY(1px); }
.charm.off {
  color: #d7d0c4;
  background: linear-gradient(180deg, #3e4844, #242b28);
  border-color: #b7aa96;
}
.charm.leave { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 220, 190, 0.16), transparent 58%), linear-gradient(180deg, #6e3a32, #3c201c); }
.node { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.node i {
  display: grid; place-items: center; margin: 0 auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12, 16, 14, 0.72);
  border: 2px solid rgba(180, 170, 150, 0.45);
  font-style: normal; font-size: 18px;
}
.node.available i { border-color: #d7c27a; box-shadow: 0 0 12px rgba(215, 194, 122, 0.7); }
.node.visited { opacity: 0.45; }
.node.boss i { width: 78px; height: 78px; padding: 0; overflow: hidden; border-color: #a8453c; }
.node.boss i img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; border-radius: 50%; display: block; }
.seal.boss-seal { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; }
.seal.boss-seal img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 42%; }
.node span { display: block; margin-top: 4px; font-size: 13px; text-shadow: 0 1px 2px #000; }
.map.spire .node i { width: 28px; height: 28px; font-size: 12px; }
.map.spire .node.boss i { width: 44px; height: 44px; }
.map.spire .node span { display: none; }
.loot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

#field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#field canvas { display: block; }
.battle { position: absolute; inset: 0; z-index: 1; background: none; }
.actor { position: absolute; bottom: 16%; width: 28%; text-align: center; }
.actor.player { left: 8%; }
.actor.enemy { right: 7%; }
.actor { height: 72%; }
.actor img.sprite { height: 78%; filter: drop-shadow(0 18px 8px rgba(0,0,0,.45)); }
.vitals {
  width: max-content; max-width: 96%; margin: -46px auto 0; padding: 2px 10px 4px;
  background: rgba(8, 12, 10, 0.5); border-radius: 10px;
}
.vitals b { font-size: 22px; text-shadow: 0 2px 4px #000; }
.bar { height: 7px; margin: 3px auto; width: 140px; background: rgba(0,0,0,.45); }
.bar i { display: block; height: 100%; background: #8d3a32; }
.bar.block i { background: #7f93a3; }
.nameplate {
  position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -72%);
  min-width: 7em; padding: 4px 12px 6px; text-align: center; line-height: 1.3;
  color: #3a221c; background: rgba(255, 246, 230, 0.42);
  border: 1px solid rgba(90, 40, 30, 0.22); pointer-events: none;
}
.nameplate b, .nameplate span { display: block; }
.nameplate span { font-size: 13px; }
.feedback {
  position: absolute; left: 50%; top: 54px; transform: translateX(-50%); z-index: 3;
  max-width: 46%; margin: 0; padding: 4px 12px; text-align: center; color: #3a2a22; font-size: 16px;
  background: rgba(255, 246, 230, 0.55); border: 1px solid rgba(90, 40, 30, 0.15); pointer-events: none;
}
.vignette { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; background: url("/art/ui/vignette_bottom.png") center / 100% 100%; pointer-events: none; }
.orb {
  position: absolute; left: 28px; bottom: 64px; width: 86px; height: 86px;
  background: url("/art/ui/energy_orb.png") center / contain no-repeat;
  display: grid; place-items: center; font-size: 28px; text-shadow: 0 2px 4px #000;
}
.hand, .orb, .end, .nameplate { z-index: 3; }
.hand {
  position: absolute; left: 120px; right: 110px; bottom: -36px; height: 250px;
  display: flex; justify-content: center; align-items: flex-end;
}
.end {
  position: absolute; right: 22px; bottom: 78px; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(110, 46, 40, 0.92); border: 1px solid #e7c7a2; letter-spacing: 0.15em;
}

.tray { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 8px; display: flex; gap: 8px; overflow-x: auto; background: linear-gradient(transparent, rgba(8,10,9,.88) 30%); }
.tray .face { width: 108px; height: 162px; }
#toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; background: #6e2e28; color: #f6efe4; }
.struck { animation: hit .35s ease; }
@keyframes hit { 25% { transform: translateX(8px); } 50% { transform: translateX(-6px); } }
.fx-layer { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.projectile { position: absolute; left: 0; top: 0; width: 210px; height: 78px; object-fit: contain; }
.projectile.bolt { width: 340px; height: 128px; }
.burst {
  position: absolute; width: 240px; height: 240px; object-fit: contain;
  transform: translate(-50%, -50%) scale(.45);
  animation: burst .28s ease-out forwards;
}
@keyframes burst { to { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
.actor.knock { animation: knock .28s ease; }
.actor.player.knock { animation-name: knock-back; }
@keyframes knock { 40% { transform: translate(18px, -4px) rotate(2deg); } }
@keyframes knock-back { 40% { transform: translate(-16px, -3px) rotate(-2deg); } }
.stage.shake { animation: shake .28s linear; }
@keyframes shake { 25% { transform: translate(4px, -2px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(2px, 2px); } }
.actor.lunge { animation: lunge .32s ease; }
@keyframes lunge { 40% { transform: translate(-28px, -6px); } }
.actor.glow .sprite { animation: glow .46s ease; }
@keyframes glow { 40% { filter: drop-shadow(0 0 18px rgba(255, 214, 120, .95)); } }
.sheet-attr { margin: 2px 0 0; font-size: 12px; letter-spacing: 0.06em; color: #f6efe4; text-shadow: 0 1px 2px #000; }
.buffs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.buffs i { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: 999px; color: #f6efe4; background: rgba(20, 16, 12, 0.55); border: 1px solid rgba(230, 199, 154, 0.5); }
.buffs i.bad { border-color: #d07068; color: #ffd2cc; }
.buffs i.icon { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.buffs i.icon svg { width: 30px; height: 30px; display: block; }
.buffs i.icon b { position: absolute; right: -1px; bottom: -2px; font-size: 14px; line-height: 1; text-shadow: 0 1px 2px #000; }
.bleed {
  position: absolute; left: 50%; top: 18%; z-index: 6; margin: 0;
  font-style: normal; font-weight: 700; font-size: 28px; pointer-events: none;
  color: #c8ffb0; text-shadow: 0 2px 0 #143018, 0 0 8px #39d56a;
  transform: translate(-50%, 0); animation: bleed-up .72s ease forwards;
}
@keyframes bleed-up { to { transform: translate(-50%, -42px); opacity: 0; } }
.actor.poisoned .sprite { animation: poison-flash .45s ease; }
@keyframes poison-flash { 40% { filter: drop-shadow(0 0 16px rgba(90, 230, 130, .95)); } }
.end.done { display: grid; place-items: center; margin: 0; color: #f8f1e4; }