/* Author: goodjava@qq.com */
.stage { width: 100vw; height: 100dvh; max-width: 1920px; min-height: 380px; }
.primary, .quiet, .pick { border: 1px solid #aa9a7f; border-radius: 5px; padding: 10px 18px; background: #f1e6cf; color: #322b22; min-height: 42px; }
.primary { background: #713e32; border-color: #713e32; color: #fff5e3; font-weight: 600; }
.quiet:hover, .pick:hover { background: #e3d5b9; }
.primary:hover { background: #8c5142; }
button:focus-visible { outline: 3px solid #c2a35e; outline-offset: 3px; }
.eyebrow { letter-spacing: .12em; font-size: 12px; }
.muted { color: #746956; font-size: 14px; }
.home { position: absolute; inset: 0; color: #2d372f; background: #d8d4be url('/art/environments/realm_map_bg.png') center/cover; }
.home::before { content: ''; position: absolute; inset: 0; background: rgba(235,231,212,.74); }
.home-copy { position: relative; z-index: 2; width: min(440px, 43%); margin: 10vh 0 0 10%; }
.home h1 { font-size: clamp(38px, 5vw, 72px); margin: 12px 0 20px; letter-spacing: .16em; font-weight: 600; }
.home-intro { line-height: 1.9; font-size: 17px; max-width: 350px; }
.home-actions { display: grid; gap: 11px; max-width: 310px; margin-top: 28px; }
.home-actions .primary { font-size: 18px; padding: 15px 20px; }
.home-actions .quiet { background: rgba(244,237,218,.8); }
.home-save { font-size: 13px; margin-top: 22px; }
.home-guardian { position: absolute; right: 9%; bottom: 7%; height: 82%; max-width: 43%; object-fit: contain; }
.home-bottom { position: absolute; bottom: 22px; left: 10%; right: 6%; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; }
.home-bottom .quiet { font-size: 12px; min-height: 32px; padding: 6px 12px; }
.game-nav { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 66px; box-sizing: border-box; padding: 10px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #182a25; color: #eee6d5; border-bottom: 1px solid #536052; }
.game-nav b { font-size: 17px; letter-spacing: .1em; display: block; }
.game-nav span { font-size: 12px; opacity: .85; }
.nav-actions { display: flex; gap: 8px; }
.nav-actions .quiet { min-height: 36px; padding: 7px 14px; font-size: 13px; background: transparent; color: #f1e8d5; border-color: #758172; }
.nav-actions .quiet:hover { background: #35473e; }
.sheet, .dialog, .ending { padding: 84px 18px 20px; z-index: 10; background: rgba(10,17,13,.57); }
.paper { background: #efe7d4; border-radius: 5px; padding: 26px 30px; max-width: 860px; }
.paper-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.paper h3 { font-size: 16px; margin: 18px 0 10px; }
.settings-grid, .root-picks, .event-choices { display: grid; gap: 10px; margin: 18px 0; }
.settings-grid { grid-template-columns: 1fr 1fr; }
.root-picks { grid-template-columns: 1fr 1fr; }
.pick.selected { border-color: #713e32; background: #713e32; color: #fff5e3; }
.warning { padding: 12px; border-left: 3px solid #9b5940; background: #e6d4b9; }
.guide { padding-left: 22px; line-height: 1.7; }
.guide li { margin: 14px 0; }
.guide p { color: #615746; }
.slip { border-radius: 4px; text-align: left; padding: 12px 16px; }
.event-choices .slip b, .event-choices .slip span, .event-choices .slip small { display: block; line-height: 1.65; }
.event-choices .slip span { font-size: 13px; color: #655c4a; }
.journey { position: absolute; inset: 0; background: #d8d4be url('/art/environments/realm_map_bg.png') center/cover; color: #263b30; }
.journey::before { content: ''; position: absolute; inset: 66px 0 0; background: rgba(231,226,208,.66); pointer-events: none; }
.journey-title { position: absolute; top: 76px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.journey-title p { margin: 3px 0; font-size: 13px; }
.journey-title h2 { margin: 4px 0 7px; font-size: 23px; }
.map-legend { display: flex; gap: 14px; white-space: nowrap; font-size: 12px; padding-bottom: 2px; }
.map-scroll { position: absolute; top: 176px; bottom: 158px; left: 24px; right: 24px; overflow-y: auto; border-top: 1px solid #9a9e84; border-bottom: 1px solid #9a9e84; scrollbar-color: #8a977f transparent; }
.route-canvas { position: relative; height: 1380px; }
.route-canvas svg { position: absolute; inset: 0; height: 100%; width: 100%; pointer-events: none; }
.route-canvas line { stroke: #77836c; stroke-width: .19; opacity: .26; }
.route-canvas line.route-open { stroke: #b48630; opacity: 1; stroke-width: .34; }
.route-canvas line.route-walked { stroke: #3d6b55; opacity: .8; stroke-width: .28; }
.route-node { position: absolute; transform: translate(-50%, -50%); width: 62px; text-align: center; }
.route-node i { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; font-style: normal; background: #e8e5d3; border: 1px solid #75806d; font-size: 16px; }
.route-node span { font-size: 11px; display: block; margin-top: 4px; color: #334538; }
.route-node.locked { opacity: .3; }
.route-node.visited i { background: #486956; border-color: #2e5341; color: #fff6dd; }
.route-node.available i { border: 3px solid #b18a37; background: #fbf1cf; color: #674922; }
.route-node.available span { font-weight: 700; color: #60441c; }
.route-node:hover:not(:disabled) i { background: #ead28b; }
.route-node.boss i { width: 58px; height: 58px; overflow: hidden; border-color: #8e5241; }
.route-node.boss img { width: 130%; height: 180%; object-fit: cover; object-position: center 8%; }
.route-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 28px 20px; height: 145px; box-sizing: border-box; background: #eae3cd; border-top: 1px solid #a9a38c; }
.route-footer > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.route-footer > div:first-child span { font-size: 12px; color: #746952; }
.route-choices { display: flex; gap: 10px; overflow-x: auto; }
.route-choice { flex: 1 0 130px; max-width: 260px; padding: 12px 16px; text-align: left; background: #274b3b; color: #f6edda; border: 1px solid #45644b; border-radius: 4px; }
.route-choice b, .route-choice span { display: block; }
.route-choice span { margin-top: 5px; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-choice:hover { background: #3c624c; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 20px 8px; padding-top: 10px; }
.bag-card { text-align: center; }
.bag-card small { display: block; font-size: 11px; margin-top: 6px; }
.ending-scene { position: absolute; inset: 0; background: #23392c url('/art/environments/realm_map_bg.png') center/cover; }
.playing .battle .hud { top: 78px; left: 26px; right: 26px; font-size: 13px; height: 32px; }
.playing .feedback { top: auto; bottom: 260px; font-size: 13px; max-width: 65%; }
.battle-loading { position: absolute; top: 48%; left: 0; right: 0; text-align: center; color: #dcd6ba; }
.stage:has(#field[data-ready="true"]) .battle-loading { display: none; }
.stage:has(.battle) { background-image: url('/art/environments/zhulin.png'); }
.hand { left: 85px; right: 118px; bottom: 6px; height: 218px; gap: 4px; overflow-x: auto; justify-content: safe center; align-items: end; padding: 44px 6px 0; box-sizing: content-box; }
.end { right: 22px; bottom: 66px; border-radius: 6px; width: 85px; height: 56px; font-size: 14px; }
.orb { width: 60px; height: 60px; left: 16px; bottom: 65px; font-size: 24px; }
.battle-tips { position: absolute; bottom: 12px; right: 20px; font-size: 11px; color: #fff6df; max-width: 100px; text-align: center; }
#toast { z-index: 30; top: auto; bottom: 20px; max-width: 80vw; text-align: center; border-radius: 4px; font-size: 13px; }
.gallery figure { background: #e1d9c4; border-radius: 4px; padding: 8px; }
.foe-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.foe-card { display: flex; align-items: start; gap: 12px; border: 1px solid #c6bca5; padding: 12px; border-radius: 4px; }
.foe-card.discovered { border-color: #5d7e63; background: #e3e1c9; }
.foe-card img { width: 65px; height: 100px; object-fit: contain; }
.foe-card > div { min-width: 0; }
.foe-card small { color: #7a6c51; font-size: 10px; }
.foe-card h3 { text-align: left; margin: 6px 0; font-size: 15px; }
.foe-card details { font-size: 12px; }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.art-chip { background: #ddd6bd; border-radius: 4px; padding: 5px 9px; font-size: 12px; }
@media (max-width: 700px) {
  .stage { min-height: 0; }
  .home-copy { margin: 10vh 0 0 7%; width: 84%; }
  .home-guardian { height: 58%; max-width: 65%; right: -9%; bottom: 8%; opacity: .3; }
  .home h1 { font-size: 42px; }
  .home-intro { font-size: 15px; width: 80%; }
  .home-actions { max-width: 245px; }
  .home-bottom { left: 7%; right: 6%; }
  .game-nav { padding: 9px 12px; height: 66px; }
  .game-nav b { font-size: 14px; }
  .game-nav span { font-size: 10px; }
  .nav-actions { gap: 5px; }
  .nav-actions .quiet { padding: 6px 8px; font-size: 11px; }
  .journey-title { left: 16px; right: 16px; top: 80px; }
  .journey-title h2 { font-size: 20px; }
  .journey-title p { font-size: 11px; }
  .map-legend { position: absolute; top: 99px; left: 0; gap: 14px; font-size: 10px; }
  .map-scroll { top: 205px; left: 6px; right: 6px; bottom: 167px; }
  .route-canvas { height: 1450px; }
  .route-node { width: 42px; }
  .route-node i { width: 32px; height: 32px; font-size: 14px; }
  .route-footer { padding: 13px 14px 16px; height: 158px; }
  .route-footer > div:first-child { display: block; font-size: 13px; }
  .route-footer > div:first-child span { display: block; margin-top: 4px; font-size: 10px; }
  .route-choice { flex-basis: 150px; padding: 9px 12px; }
  .paper { padding: 20px; width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .album { grid-template-columns: 1fr; }
  .foe-grid { grid-template-columns: 1fr; }
  .playing .battle .hud { left: 8px; right: 8px; font-size: 10px; }
  .stage:has(.battle) { background: #263b31; }
  .piles img { display: none; }
  .piles { gap: 5px; }
  .playing .feedback { bottom: 238px; font-size: 11px; max-width: 90%; width: max-content; }
  .hand { left: 5px; right: 5px; bottom: 8px; justify-content: start; gap: 2px; height: 150px; padding-top: 24px; }
  .end { right: 12px; bottom: 181px; width: 78px; height: 42px; }
  .orb { left: 12px; bottom: 174px; width: 50px; height: 50px; }
  .battle-tips { right: 100px; bottom: 182px; max-width: 170px; font-size: 10px; background: #263b31; padding: 4px 6px; border-radius: 3px; }
}