/* Author: goodjava@qq.com */
.stage { --ink: #253e34; --paper: #f0e8d5; --gold: #b49a64; --rail: 284px; }
.primary, .quiet, .pick, .seal, .slip { border-radius: 7px; transition: background .15s,border-color .15s; line-height: 1.5; }
.primary, .seal { background: #315747; border-color: #496954; color: #fff5dd; box-shadow: inset 0 1px #ffffff17,0 2px 5px #16251b14; }
.primary:hover, .seal:hover { background: #426c57; }
.quiet, .pick, .slip { background: #faf4e5; border-color: #c4b89a; }
.quiet:hover:not(:disabled), .pick:hover:not(:disabled), .slip:hover:not(:disabled) { background: #e9dfc7; border-color: #ab966b; }
button:disabled { cursor: not-allowed; }
.primary:disabled, .quiet:disabled, .slip:disabled { opacity: .55; }
button:focus-visible, summary:focus-visible { outline: 2px solid #b78e3c; outline-offset: 3px; }
.game-nav { background: linear-gradient(110deg,#172e27,#233c31); border-bottom-color: #a38b554d; box-shadow: 0 2px 14px #071c1730; }
.game-nav span { font-family: -apple-system,"PingFang SC",sans-serif; font-size: 11px; }
.nav-actions .quiet:hover:not(:disabled) { background: #385d49; color: #fff5dd; border-color: #b7aa77; }
.nav-actions .quiet { border-color: #d0c7a34a; min-height: 38px; }
.home-copy { margin-top: clamp(50px,10vh,140px); }
.home-save { color: #5c6e5b; font-size: 12px; }
.home h1 { text-shadow: 0 1px 0 #fffc; }
.home-actions .primary { background: #315747; }
.home-actions .primary:hover { background: #426c57; }
.dialog, .sheet { backdrop-filter: blur(5px); padding: 88px 24px 24px; }
.paper { position: relative; border: 1px solid #c7b58b; border-radius: 12px; padding: 30px 34px; background: linear-gradient(135deg,#f8f1e1,#ece2c9); box-shadow: 0 22px 90px #05130f70,inset 0 0 0 4px #fff7e733; scrollbar-width: thin; scrollbar-color: #a59b7b transparent; }
.paper h2 { font-size: 26px; color: #294b3b; letter-spacing: .08em; padding: 0 24px 18px; margin-bottom: 18px; border-bottom: 1px solid #c7b88f77; }
.paper > p { font-size: 14px; line-height: 1.85; color: #5a5a47; }
.paper h3 { color: #344c3b; }
.paper-actions { padding-top: 18px; border-top: 1px solid #c7b88f66; }
.overlay-close { position: sticky; top: 0; float: right; margin: -16px -20px -20px 0; z-index: 5; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #c6b895; border-radius: 50%; background: #f5eddb; color: #626d58; font: 24px/1 sans-serif; }
.overlay-close:hover { background: #dfd4b8; }
.settings-grid { gap: 12px; }
.pick.selected { background: #315747; border-color: #315747; }
.event-choices .slip { padding: 15px 18px; }
.event-choices .slip small { color: #964c38; margin-top: 6px; }
.picks[style] { gap: 10px; }
.slip { min-height: 44px; }
.foe-grid { gap: 14px; }
.foe-card { background: #f9f3e433; border-color: #c9bd9c; border-radius: 9px; padding: 16px; gap: 16px; min-height: 138px; box-sizing: border-box; align-items: center; }
.foe-card img { width: 84px; height: 134px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 5px 3px #40371f1c); }
.foe-card h3 { margin: 9px 0 12px; font-size: 18px; }
.foe-card small { font-family: -apple-system,"PingFang SC",sans-serif; font-size: 10px; letter-spacing: .02em; }
.foe-card summary { cursor: pointer; color: #45644d; }
.foe-card details p { font-size: 13px; line-height: 1.8; }
.fragment { border-bottom-color: #c7b88f66; padding: 18px 0; }
.fragment.unread { opacity: .65; }
.route-choice { border-radius: 7px; }
.route-choice:focus-visible { outline-offset: -4px; }
.stage #field { top: 204px; bottom: calc(var(--rail) + 38px); }
.combat-readout { position: absolute; top: 86px; left: 26px; right: 26px; width: auto; max-width: none; transform: none; padding: 0; border: 0; background: transparent; display: grid; grid-template-columns: minmax(200px,280px) minmax(180px,340px) minmax(200px,280px); align-items: start; justify-content: space-between; gap: 20px; color: #f6eedb; font-size: 14px; z-index: 5; }
.combat-readout .vital { display: block; padding: 14px 17px; border: 1px solid #d5c39d69; border-radius: 9px; background: #152e28e8; box-shadow: 0 5px 20px #0c24152e; text-align: left; }
.vital-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vital-title > b { font-size: 15px; letter-spacing: .04em; }
.battle-attributes { position: relative; font-size: 10px; font-family: -apple-system,"PingFang SC",sans-serif; }
.battle-attributes summary { cursor: pointer; color: #c6c4aa; list-style: none; border-bottom: 1px dotted #ada58280; }
.battle-attributes p { position: absolute; z-index: 10; right: 0; top: 20px; width: 205px; padding: 12px; box-sizing: border-box; border-radius: 6px; background: #112d25; color: #eee6d0; border: 1px solid #a5946d; font-size: 12px; line-height: 1.9; margin: 0; text-align: left; }
.vital-hp { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 7px; }
.vital-hp strong { font: 600 23px/1.1 Georgia,serif; }
.combat-readout .vital-hp small { display: inline; margin: 0; font: 13px Georgia,serif; color: #bfbfa6; }
.combat-readout .vital-hp > span { color: #d9d9bd; font-size: 11px; }
.hp-track { height: 5px; background: #020f0b88; border-radius: 3px; overflow: hidden; }
.hp-track i { height: 100%; display: block; background: linear-gradient(90deg,#609a7b,#b5c18e); }
.vital.enemy .hp-track i { background: linear-gradient(90deg,#9a5b42,#d2a579); }
.vital.wounded .hp-track i { background: #d08661; }
.status-list { display: flex; flex-wrap: wrap; gap: 5px; }
.status-chip { border: 1px solid #d8d4ad55; background: #203f2b; padding: 3px 6px; border-radius: 4px; margin-top: 9px; font-size: 10px; }
.combat-readout .enemy-intent { display: block; text-align: center; background: #f5efddd9; color: #283e33; border: 1px solid #c6b899; border-radius: 9px; padding: 12px 18px; box-shadow: 0 4px 20px #1b2c141f; }
.combat-readout .turn-label { font-size: 11px; color: #546b56; letter-spacing: .06em; }
.combat-readout .enemy-intent p { width: auto; border: 0; margin: 8px 0 5px; padding: 0; line-height: 1.55; color: #7c4936; }
.combat-readout .enemy-intent p span { display: block; color: #81775f; font-size: 10px; margin-bottom: 2px; }
.combat-readout .enemy-intent b { font-size: 15px; font-weight: 600; }
.combat-readout .enemy-intent small { display: block; font-size: 10px; color: #91846a; margin: 3px 0 0; }
.combat-dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail); background: linear-gradient(0deg,#0b201af5,#122c23f5 70%,#15362700); border-bottom: 1px solid #b5a06770; }
.hand { left: 100px; right: 160px; bottom: 20px; height: 248px; padding: 16px 10px 4px; gap: 12px; align-items: end; overflow-x: auto; overflow-y: hidden; justify-content: safe center; scrollbar-width: thin; scrollbar-color: #9e9562 #132c26; }
.orb { left: 22px; bottom: 105px; width: 66px; height: 66px; background: radial-gradient(circle at 40% 30%,#6b9e84,#234c3e 68%); border: 1px solid #c0ad77; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #264638,0 0 0 5px #d9bd704d; }
.orb strong { font: 600 28px/1 Georgia,serif; color: #fff3d3; }
.orb span { font-size: 10px; margin-top: 3px; color: #e2dbbd; }
.turn-actions { position: absolute; right: 24px; bottom: 80px; width: 120px; text-align: center; }
.end { position: static; display: block; width: 120px; height: 48px; border-radius: 7px; background: #82503b; border: 1px solid #c5a46d; color: #fff1d6; font-size: 14px; box-shadow: inset 0 1px #fff2; }
.end span { margin-left: 5px; }
.end:hover { background: #996447; }
.deck-counters { font-size: 11px; color: #bdc3a7; line-height: 1.8; margin: 12px 0 0; }
.battle-tips { bottom: 0; left: 100px; right: 160px; max-width: none; margin: 0; text-align: center; font-size: 10px; color: #acb39a; line-height: 18px; background: none; padding: 0; }
.playing .feedback { bottom: calc(var(--rail) + 8px); margin: 0; padding: 6px 14px; border: 1px solid #b0a47a50; border-radius: 20px; background: #173a30e6; color: #eee7cc; font-size: 12px; text-align: center; max-width: 72%; line-height: 1.5; box-sizing: border-box; }
#voice-caption { top: 230px; border-radius: 20px; font-size: 14px; }
.stage[aria-busy="true"] .end { opacity: .6; cursor: wait; }
#toast { background: #142e27; border: 1px solid #a58f61; color: #fff0d0; box-shadow: 0 6px 28px #0004; }
@media (max-width:1100px) {
  .hand { left: 88px; right: 135px; gap: 10px; }
  .turn-actions { right: 12px; width: 110px; }
  .end { width: 110px; }
  .orb { left: 13px; width: 58px; height: 58px; }
  .combat-readout { grid-template-columns: minmax(160px,240px) minmax(160px,300px) minmax(160px,240px); gap: 16px; left: 18px; right: 18px; }
}
@media (max-width:700px) {
  .stage { --rail: 310px; }
  .game-nav { padding: 9px 12px; }
  .game-nav b { font-size: 14px; }
  .game-nav span { font-size: 9px; }
  .nav-actions .quiet { min-height: 36px; padding: 6px 9px; }
  .dialog, .sheet { padding: 78px 12px 12px; }
  .paper { width: 100%; padding: 24px 18px; border-radius: 10px; }
  .paper.wide { width: 100%; }
  .paper h2 { font-size: 21px; padding-inline: 20px; }
  .overlay-close { margin: -12px -10px -20px 0; }
  .home-copy { margin-top: 8vh; }
  .home-bottom span { max-width: 145px; text-align: right; line-height: 1.6; }
  .stage #field { top: 210px; }
  .combat-readout { top: 78px; left: 12px; right: 12px; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: 12px; }
  .combat-readout .vital { padding: 10px 12px; }
  .vital-title > b { font-size: 12px; letter-spacing: 0; }
  .vital-hp { margin: 7px 0; }
  .vital-hp strong { font-size: 21px; }
  .vital-hp > span { font-size: 10px; }
  .combat-readout .enemy-intent { grid-column: 1 / -1; grid-row: 2; padding: 7px 10px; }
  .combat-readout .enemy-intent p { display: inline; margin: 0 0 0 8px; }
  .combat-readout .enemy-intent p span { display: none; }
  .combat-readout .enemy-intent b { font-size: 12px; }
  .combat-readout .enemy-intent small { display: none; }
  .combat-readout .turn-label { font-size: 10px; }
  .battle-attributes { font-size: 9px; }
  .battle-attributes p { right: auto; left: -100px; width: 170px; font-size: 11px; }
  .status-chip { font-size: 9px; margin-top: 6px; }
  .hand { left: 0; right: 0; bottom: 16px; height: 236px; padding: 14px 14px 4px; gap: 10px; justify-content: start; }
  .orb { left: 18px; top: 5px; bottom: auto; width: 42px; height: 42px; box-shadow: 0 0 0 2px #264638,0 0 0 3px #d9bd704d; }
  .orb strong { font-size: 21px; }
  .orb span { font-size: 8px; margin-top: 0; }
  .turn-actions { right: 14px; top: 4px; bottom: auto; width: auto; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; }
  .end { width: 108px; height: 40px; font-size: 13px; }
  .deck-counters { margin: 0; font-size: 10px; line-height: 1.6; }
  .battle-tips { left: 0; right: 0; bottom: 0; font-size: 9px; }
  .playing .feedback { bottom: calc(var(--rail) + 8px); font-size: 11px; max-width: 94%; width: max-content; }
  #voice-caption { top: 232px; font-size: 12px; max-width: 90%; }
  .foe-card { padding: 12px; gap: 14px; }
  .foe-card h3 { font-size: 17px; }
  .root-picks { gap: 8px; }
}
@media (max-height:650px) and (min-width:701px) {
  .stage { --rail: 246px; }
  .card-slot { --card-height: 210px; --card-width: 144px; }
  .face .card-picture { height: 44px; }
  .face .name { font-size: 15px; margin: 6px 0 4px; padding-bottom: 4px; }
  .hand { height: 210px; bottom: 18px; }
  .stage #field { top: 172px; }
  .combat-readout { top: 76px; }
  .combat-readout .vital { padding: 9px 12px; }
  .combat-readout .enemy-intent { padding: 8px 12px; }
  .combat-readout .enemy-intent small { display: none; }
  .orb { bottom: 88px; }
  .turn-actions { bottom: 62px; }
  .home-copy { margin-top: 30px; }
  .home h1 { font-size: 42px; margin: 10px 0; }
  .home-intro { font-size: 14px; }
  .home-actions { margin-top: 16px; gap: 7px; }
  .home-actions .primary { padding: 9px 16px; }
  .home-actions .quiet { padding: 5px 12px; min-height: 32px; }
  .home-save { margin-top: 12px; }
}
@media (max-height:500px) and (max-width:700px) {
  .stage { min-width: 0; }
  .combat-readout .vital { padding: 5px 9px; }
  .home { overflow-y: auto; }
  .home-copy { margin: 25px 0 90px 7%; }
  .home-bottom { position: fixed; bottom: 8px; }
}
@media (prefers-reduced-motion:reduce) { .primary,.quiet,.pick,.seal,.slip { transition: none; } }
.scene-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0; padding: 12px 15px; border: 1px solid #cfbf9870; border-radius: 7px; background: #dfd4b35c; font-size: 12px; color: #726344; }
.scene-meta b { font-size: 18px; margin-left: 4px; color: #3d6047; }
.section-label { padding-top: 12px; border-top: 1px solid #c7b88f66; }
.upgrade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.upgrade-grid .slip { padding: 12px 14px; }
.upgrade-grid .slip b, .upgrade-grid .slip span { display: block; }
.upgrade-grid .slip b { font-size: 14px; }
.upgrade-grid .slip span { margin-top: 5px; color: #7a755c; font-size: 12px; line-height: 1.6; }
.phase-shop > .slip { display: block; width: 100%; margin: 12px 0; }
.seal { min-height: 42px; padding: 10px 20px; font-size: 14px; }
@media (max-width:700px) {
  .upgrade-grid { grid-template-columns: 1fr; }
  .loot { flex-wrap: nowrap; overflow-x: auto; justify-content: start; padding: 4px 4px 12px; scrollbar-width: thin; scrollbar-color: #a99a74 transparent; }
  .loot > div { flex-shrink: 0; }
}
@media (max-height:500px) and (min-width:701px) {
  .stage:has(.battle) .game-nav { height: 54px; padding-block: 6px; }
  .stage #field { top: 190px; right: 52%; bottom: 24px; }
  .combat-readout { top: 64px; left: 12px; right: calc(52% + 12px); grid-template-columns: 1fr 1fr; gap: 8px; }
  .combat-readout .vital { padding: 8px 10px; }
  .vital-title > b { font-size: 11px; }
  .vital-hp strong { font-size: 18px; }
  .combat-readout .vital-hp small, .combat-readout .vital-hp > span { font-size: 10px; }
  .combat-readout .enemy-intent { grid-column: 1 / -1; grid-row: 2; padding: 6px 8px; }
  .combat-readout .enemy-intent p { display: inline; margin-left: 6px; }
  .combat-readout .enemy-intent p span, .combat-readout .enemy-intent small { display: none; }
  .combat-readout .enemy-intent b, .combat-readout .turn-label { font-size: 10px; }
  .combat-dock { left: 48%; top: 54px; height: auto; border-left: 1px solid #ac9d6c66; background: #102b23; }
  .hand { top: 63px; left: 0; right: 0; bottom: 18px; height: auto; padding: 8px 12px 12px; overflow-y: auto; display: grid; grid-template-columns: repeat(2,144px); align-content: start; justify-content: center; gap: 14px; }
  .orb { top: 10px; left: 20px; width: 40px; height: 40px; bottom: auto; }
  .orb strong { font-size: 22px; }
  .orb span { font-size: 8px; margin: 0; }
  .turn-actions { right: 14px; top: 10px; bottom: auto; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; width: auto; }
  .end { width: 108px; height: 40px; font-size: 12px; }
  .deck-counters { margin: 0; font-size: 9px; }
  .battle-tips { left: 0; right: 0; }
  .playing .feedback { left: 24%; bottom: 4px; max-width: 46%; font-size: 10px; padding: 3px 8px; }
  #voice-caption { left: 24%; top: 173px; max-width: 45%; font-size: 11px; }
  .dialog, .sheet { padding-top: 66px; }
}
.stage:has(.battle) { background: #1a342b; background-image: none; }
.stage #field { overflow: hidden; min-width: 0; min-height: 0; }
#field::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#1a342b,transparent 24px,transparent calc(100% - 24px),#1a342b); }