:root {
  color-scheme: dark;
  --ink: #f9f1dd;
  --navy: #132238;
  --panel: #203755;
  --gold: #f2c65f;
  --accent: #73d5ff;
  --jade: #6ed6a3;
  --crimson: #e46b5c;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #07101d; font-family: system-ui, "Microsoft YaHei", sans-serif; }
body { min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button { appearance: none; border: 0; border-radius: 12px; background: var(--gold); color: #16243b; cursor: pointer; font: 800 15px system-ui, "Microsoft YaHei", sans-serif; min-height: 44px; padding: 9px 14px; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.94); }
button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .55; }

#app { width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; color: var(--ink); background: radial-gradient(circle at 12% 4%, #7ca5bb 0 2%, transparent 18%), radial-gradient(circle at 85% 16%, #476b7f 0 2%, transparent 21%), linear-gradient(180deg, #254b59, #142840 58%, #0b172a); }
.home-screen { position: relative; isolation: isolate; width: min(100%, 560px); min-height: 100dvh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 15px max(18px, env(safe-area-inset-bottom)); overflow: hidden; color: var(--ink); background: linear-gradient(180deg, rgba(22, 22, 20, .3) 0%, rgba(50, 35, 22, .03) 37%, rgba(30, 26, 22, .12) 67%, rgba(12, 18, 21, .71) 100%), url('./assets/home-arena-ink-v2.png') center center / cover no-repeat; }
.home-screen::before, .home-screen::after { position: absolute; z-index: -1; width: 80%; height: 28%; border-radius: 50%; content: ''; filter: blur(14px); opacity: .4; }.home-screen::before { top: 11%; left: -48%; background: #ced6bb; }.home-screen::after { right: -48%; bottom: 10%; background: #172d39; }
.home-topbar { display: grid; grid-template-columns: 1fr auto 38px; align-items: center; gap: 8px; }.home-profile { display: flex; align-items: center; min-height: 50px; gap: 7px; padding: 3px; border: 1px solid #e9c773; border-radius: 13px; background: rgba(20, 43, 49, .84); color: #fff2c2; text-align: left; }.home-profile b { display: block; font-size: 12px; }.home-profile small { display: block; color: #bdd7d2; font-size: 9px; }.home-profile i, .home-start-battle i { font-style: normal; }.home-avatar { display: block; width: 41px; height: 41px; flex: 0 0 41px; border: 2px solid #f8df99; border-radius: 10px; background-image: url('./assets/avatar-roster-v1.png'); background-position: var(--avatar-x, 0%) var(--avatar-y, 0%); background-size: 500% 400%; box-shadow: inset 0 0 0 2px #142431, 0 2px 5px #0007; }
.home-resources { display: grid; gap: 5px; }.home-resources > span, .home-coins-button { display: flex; min-width: 114px; min-height: 42px; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid #d6ba70; border-radius: 12px; background: rgba(54, 36, 29, .9); color: #ffdc77; font-size: 16px; }.home-coins-button { text-align: left; line-height: 1; }.home-coins-button span, .home-stamina-resource > span { display: grid; gap: 2px; }.home-coins-button small, .home-stamina-resource small { display: block; color: #f8d99c; font-size: 8px; }.home-stamina-resource { border-color: #9edc8c !important; background: rgba(23, 58, 42, .92) !important; color: #d9ff9f !important; }.home-stamina-resource small { color: #c7ebaa; }.home-stamina-add { min-width: 24px; min-height: 24px; margin-left: auto; padding: 0; border: 1px solid #dcf397; border-radius: 50%; background: linear-gradient(180deg, #84c35d, #377c45); color: #fff; font-size: 19px; line-height: 1; box-shadow: 0 2px 0 #1e4e30; }.resource-icon { position: relative; display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 900; }.coin-icon { border: 3px solid #ffd66b; background: radial-gradient(circle, #ffc85d 0 29%, #a95b28 32% 48%, #edb743 51%); box-shadow: inset 0 0 0 2px #70411f, 0 2px 4px #0005; color: #fff1a2; }.bun-icon { border: 2px solid #f6d5a4; border-radius: 48% 48% 42% 42%; background: radial-gradient(ellipse at 50% 28%, #fff0d1 0 18%, transparent 20%), linear-gradient(145deg, #fff2d6, #d99b61); box-shadow: inset 0 -4px #be764b, 0 2px 4px #0005; color: #8a4c2e; font-size: 10px; }
.home-hero { position: relative; min-height: 325px; margin-top: 8px; padding-top: 15px; overflow: hidden; text-align: center; }.home-kicker { margin: 0; color: #f1e4b7; font-size: 10px; letter-spacing: 3px; text-shadow: 0 2px 6px #000; }.home-hero h1 { margin: 4px 0 3px; color: #ffe8a2; font-size: clamp(27px, 7vw, 37px); font-family: KaiTi, STKaiti, serif; letter-spacing: 2px; text-shadow: 0 3px 0 #3b3431, 0 7px 12px #10212a; }.home-rank { display: inline-block; margin: 0; padding: 3px 15px; border: 1px solid #f2d881; border-radius: 12px; background: #6e3d37e8; color: #fff0b5; font-size: 12px; font-weight: 900; box-shadow: 0 3px 8px #0007; }.home-match-brief { position: relative; z-index: 2; width: max-content; max-width: 90%; margin: 12px auto 0; padding: 7px 16px; border: 1px solid #e2d1a1; border-radius: 13px; background: rgba(17, 33, 34, .78); box-shadow: 0 5px 12px #17272399; }.home-match-brief span, .home-match-brief small { display: block; color: #d5e3dc; font-size: 9px; }.home-match-brief b { display: block; margin: 1px 0; color: #fff0b3; font-size: 15px; }.home-tableau { display: none; }
.home-tableau { position: absolute; z-index: 1; right: 50%; bottom: 3px; width: 320px; height: 252px; transform: translateX(50%); }.home-hill { position: absolute; bottom: 0; width: 175px; height: 92px; border-radius: 100% 0 0; background: #405c4b; box-shadow: inset 0 15px #688267; }.hill-left { left: -28px; transform: skewY(-13deg); }.hill-right { right: -28px; transform: scaleX(-1) skewY(-13deg); }.home-wall { position: absolute; bottom: 50px; left: 73px; width: 174px; height: 100px; border: 4px solid #e9cf91; border-radius: 10px 10px 4px 4px; background: repeating-linear-gradient(90deg, #c5a96e 0 24px, #836344 25px 27px); box-shadow: 0 10px 0 #4a3d32, inset 0 -24px #6b513b; }.home-wall::before { position: absolute; top: -19px; left: -5px; width: 177px; height: 20px; content: ''; background: repeating-linear-gradient(90deg, #efda9a 0 17px, transparent 18px 26px); }.home-wall b { position: absolute; top: 27px; left: 61px; padding: 7px 12px; border-radius: 50%; background: #9b453b; color: #ffe8a7; font: 900 24px KaiTi, serif; }.home-banner { position: absolute; bottom: 137px; left: 149px; width: 34px; height: 61px; padding-top: 4px; border-radius: 2px 2px 12px 12px; background: linear-gradient(90deg, #d3634f, #983632); box-shadow: -3px 0 #f2d289; color: #fff2bd; font: 900 16px KaiTi, serif; }.home-path { position: absolute; bottom: 0; left: 132px; width: 65px; height: 93px; border-radius: 50% 50% 0 0; background: #d1b077; transform: perspective(50px) rotateX(28deg); }.home-torch { position: absolute; bottom: 54px; width: 8px; height: 39px; border-radius: 4px; background: #473127; box-shadow: 0 -10px 8px #ffc45d; }.torch-one { left: 52px; }.torch-two { right: 52px; }.home-mist { position: absolute; z-index: 0; width: 180px; height: 45px; border-radius: 50%; background: #e4e7cf55; filter: blur(8px); }.mist-one { top: 142px; left: -45px; }.mist-two { top: 212px; right: -53px; }
.home-official-announcement { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; width: 100%; min-height: 49px; margin: 2px 1px 9px; padding: 6px 10px; border: 1px solid #7db6a0; border-radius: 12px; background: rgba(16, 47, 53, .86); color: #ffe49a; text-align: left; }.home-official-announcement span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #f0d37d; border-radius: 7px; background: #803d38; color: #fff0b5; font: 900 16px KaiTi, serif; }.home-official-announcement b { padding-left: 7px; font-size: 12px; }.home-official-announcement small { grid-column: 2; padding-left: 7px; color: #bfd7d0; font-size: 9px; }.home-official-announcement i { grid-row: 1 / span 2; grid-column: 3; color: #f5d884; font-size: 25px; font-style: normal; }
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.home-actions button { display: grid; min-height: 76px; place-items: center; gap: 0; padding: 5px; border: 1px solid #d6ba70; border-radius: 13px; background: linear-gradient(155deg, #345e60, #1b3945); color: #fff0bd; }.home-actions span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #f4d677; border-radius: 50%; background: #965044; font-weight: 900; }.home-actions b { font-size: 12px; }.home-actions small { color: #b9d8d2; font-size: 9px; }
.home-start-battle { position: relative; z-index: 3; width: min(88%, 350px); min-height: 62px; margin: 14px auto 0; border: 2px solid #ffd77d; border-radius: 16px; background: linear-gradient(180deg, #e58361, #953e3b); box-shadow: inset 0 2px #ffe3a2, 0 5px 0 #5b3033, 0 11px 20px #17232388; color: #fff4ce; font-size: 20px; text-shadow: 0 2px #63302e; }.home-start-battle span { color: #ffe9a9; }.home-start-battle small { display: block; margin-top: 2px; color: #ffdb82; font-size: 9px; text-shadow: none; }.home-daily-reward { display: grid; grid-template-columns: 25px 1fr; width: min(100%, 380px); min-height: 45px; margin: 8px auto 0; padding: 5px 11px; border: 1px solid #efd180; border-radius: 13px; background: linear-gradient(135deg, #5d452f, #302f39); color: #ffeab1; text-align: left; }.home-daily-reward span { display: grid; width: 25px; height: 25px; grid-row: span 2; place-items: center; border: 1px solid #ffdf86; border-radius: 8px; background: #b2523f; color: #fff7ce; }.home-daily-reward b { padding-left: 8px; font-size: 12px; }.home-daily-reward small { padding-left: 8px; color: #bfe4b1; font-size: 9px; }.home-save-state { margin: 10px 0 0; color: #d9e8d7; text-align: center; font-size: 10px; }.home-toast { position: fixed; z-index: 15; top: max(58px, calc(env(safe-area-inset-top) + 48px)); left: 50%; display: grid; width: min(80vw, 330px); gap: 2px; padding: 9px 12px; transform: translateX(-50%); border: 1px solid #f1cf78; border-radius: 12px; background: rgba(25, 48, 55, .96); text-align: center; box-shadow: 0 8px 20px #0007; }.home-toast b { color: #ffe8a7; font-size: 12px; }.home-toast span { color: #d7e8e1; font-size: 10px; }
.daily-reward-panel { position: fixed; z-index: 21; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 14, 20, .75); }.daily-reward-card { position: relative; width: min(100%, 350px); padding: 28px 22px 20px; overflow: hidden; border: 1px solid #f2d780; border-radius: 22px; background: radial-gradient(circle at 50% -5%, #98704d 0, #493b40 38%, #1a3040 100%); box-shadow: 0 22px 60px #000b; color: #fff2c5; text-align: center; }.daily-reward-card::before { position: absolute; top: 0; left: 15%; width: 70%; height: 2px; content: ''; background: #ffe499; box-shadow: 0 3px 17px #ffcd74; }.daily-reward-close { position: absolute; top: 10px; right: 10px; min-width: 31px; min-height: 31px; padding: 0; border: 1px solid #a8bfad; border-radius: 50%; background: #254251; color: #e5f1d9; font-size: 20px; }.daily-reward-emblem { display: grid; width: 54px; height: 54px; margin: 0 auto 8px; place-items: center; border: 2px solid #ffdf8b; border-radius: 16px; background: linear-gradient(145deg, #ef9a52, #a33c3b); color: #fff7cc; font: 900 27px KaiTi, serif; box-shadow: 0 5px 0 #6e332f, 0 9px 22px #0006; }.daily-reward-card > p { margin: 5px 0; color: #c9dfd0; font-size: 11px; }.daily-reward-card h2 { margin: 8px 0 2px; color: #ffedb0; font-size: 20px; }.daily-reward-card > strong { display: block; margin: 6px 0 2px; color: #ffdb71; font-size: 31px; text-shadow: 0 3px #6b3d31; }.daily-reward-card > strong i { font-style: normal; }.daily-reward-card > small { color: #c6dfd1; font-size: 10px; }.daily-reward-actions { display: grid; gap: 8px; margin-top: 16px; }.daily-reward-actions button { min-height: 44px; color: #fff5d6; font-size: 13px; }.daily-reward-claim { border: 1px solid #ffe19a; background: linear-gradient(180deg, #e99260, #a9473f); }.daily-reward-triple { border: 1px solid #d9b8ff; background: linear-gradient(180deg, #9e7ae0, #59449d); }.daily-reward-card .daily-reward-note { margin-top: 13px; color: #a9c5c4; font-size: 9px; line-height: 1.5; }
.official-announcement-panel { position: fixed; z-index: 21; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 14, 20, .75); }.official-announcement-card { position: relative; width: min(100%, 350px); padding: 27px 23px 21px; border: 1px solid #d8ba70; border-radius: 21px; background: linear-gradient(150deg, #3c5d59, #172c3c); box-shadow: 0 22px 60px #000b; color: #eff3d9; text-align: center; }.official-announcement-emblem { display: grid; width: 48px; height: 48px; margin: 0 auto 8px; place-items: center; border: 1px solid #f7dd87; border-radius: 10px; background: linear-gradient(145deg, #b75b4c, #723137); color: #ffefb7; font: 900 24px KaiTi, serif; }.official-announcement-card > p { margin: 3px 0; color: #d5dfbc; font-size: 11px; letter-spacing: 2px; }.official-announcement-card h2 { margin: 7px 0 1px; color: #ffebaa; font-size: 20px; }.official-announcement-card time { color: #a6c6bd; font-size: 10px; }.official-announcement-content { margin: 15px 0; padding: 12px; border: 1px solid #8bb7a766; border-radius: 11px; background: #102d38aa; color: #dce9d7; text-align: left; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }.official-announcement-card > small { color: #9bc2bb; font-size: 9px; }
.app-brand { display: flex; align-items: center; gap: 8px; padding: 3px 5px; min-height: 38px; letter-spacing: .2px; border-bottom: 1px solid #93c8bd55; }
.brand-seal, .result-emblem { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #ffe7a1; border-radius: 50%; color: #fff3ca; background: linear-gradient(135deg, #bd5b49, #7b3036); font-size: 15px; box-shadow: 0 3px 8px #0005; }
.app-brand strong { color: #fff2c0; font-size: 17px; text-shadow: 0 2px 3px #0008; }
.brand-subtitle { margin-left: auto; color: #bed4e8; font-size: 10px; }
.settings-button { min-width: 34px; min-height: 34px; padding: 4px; border: 1px solid #597798; border-radius: 50%; background: #263c59; color: #e8f3fc; font-size: 17px; }
.return-home { min-width: 58px; min-height: 34px; margin-left: auto; padding: 3px 7px; border: 1px solid #91c4bd; border-radius: 9px; background: #263c59; color: #e8f3fc; font-size: 11px; }.return-home + .settings-button { margin-left: 2px; }
.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hud div, .battle-panel, .control-panel, .status, .feedback { border: 1px solid #7ca997; background: linear-gradient(145deg, rgba(33, 73, 79, .95), rgba(19, 42, 61, .94)); border-radius: 14px; box-shadow: inset 0 1px #c4e6d133, 0 7px 17px rgba(0, 0, 0, .25); }
.hud div { padding: 7px 8px; text-align: center; }
.hud span { display: block; color: #a9c4df; font-size: 11px; }
.hud b { color: var(--gold); font-size: 15px; letter-spacing: .3px; }
.battle-panel { padding: 4px; overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 8px; }
.panel-heading strong { color: var(--accent); font-size: 17px; }
.panel-heading span { color: #c3d8eb; font-size: 12px; }
#battle-canvas { display: block; width: calc(100% + 8px); max-width: none; height: auto; margin-inline: -4px; border: 2px solid #8dbda0; border-radius: 11px; background: #183b48; touch-action: none; user-select: none; }
#ai-battle-canvas { display: block; width: 100%; height: auto; border: 2px solid #a98fb6; border-radius: 11px; background: #2e243d; }
.opponent-panel, .ai-hud, .duel-divider { display: none; }
.ai-log { margin: 7px 3px 0; color: #bfc9e9; font-size: 11px; }
.ai-log summary { cursor: pointer; color: #d9b6ef; }
.ai-log ol { max-height: 100px; margin: 5px 0 0; overflow: auto; padding-left: 19px; }
.ai-log li { margin: 2px 0; }
.help { margin: 8px 3px 1px; color: #acc3d9; font-size: 12px; line-height: 1.45; }
.control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.primary-action { background: linear-gradient(180deg, #ffdf7f, #d99538); box-shadow: inset 0 1px #fff5b6, 0 3px 0 #93682e; }
.recruit-action { background: linear-gradient(180deg, #ec9270, #b9533e); color: #fff6e7; box-shadow: inset 0 1px #ffd0a5, 0 3px 0 #7d3a35; }
.speed-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: #acc3d9; font-size: 12px; }
.speed-controls span { margin-right: auto; }
.speed-button { min-height: 32px; min-width: 48px; padding: 5px 9px; border: 1px solid #6c86a2; background: #263c59; color: #dcecff; font-size: 13px; }
.speed-button.is-active { border-color: #ffe18b; background: var(--gold); color: #16243b; }
.reserve { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 49px; gap: 5px; }
.reserve-unit, .reserve-empty { display: grid; min-width: 0; place-items: center; border-radius: 10px; border: 1px solid #6c86a2; background: linear-gradient(145deg, #fff2be, #d6bf82); color: #192437; font-weight: 900; font-size: 21px; box-shadow: inset 0 1px #fffbe3; }
.reserve-unit { min-height: 48px; padding: 0; }
.reserve-unit.is-selected { outline: 3px solid #ffdf67; outline-offset: -2px; transform: translateY(-2px); }
.reserve-empty { background: #263c59; border-style: dashed; }
.status { margin: 0; min-height: 45px; padding: 10px; color: #c0d5e8; text-align: center; font-size: 12px; line-height: 1.4; }
.feedback { position: fixed; z-index: 8; left: 50%; top: max(52px, calc(env(safe-area-inset-top) + 42px)); width: min(72vw, 300px); transform: translateX(-50%); display: grid; gap: 1px; padding: 7px 11px; text-align: center; border-color: #e7b869; background: rgba(42, 34, 43, .94); animation: feedback-in .18s ease-out; pointer-events: none; }
.feedback b { color: #ffe5a0; font-size: 13px; }.feedback span { color: #d9e6f1; font-size: 11px; }.is-hidden { display: none !important; }
@keyframes feedback-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.tutorial { position: fixed; z-index: 9; left: 50%; top: max(56px, calc(env(safe-area-inset-top) + 48px)); display: flex; width: min(90vw, 410px); gap: 10px; padding: 12px; transform: translateX(-50%); border: 1px solid #ffe19a; border-radius: 14px; background: rgba(34, 43, 61, .96); box-shadow: 0 9px 25px #0009; color: #f9f1dd; pointer-events: none; }
.tutorial-step { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 50%; background: #e8a94c; color: #38263a; font-weight: 900; }.tutorial b { color: #ffe5a0; font-size: 13px; }.tutorial p { margin: 4px 0 0; color: #d7e6f1; font-size: 12px; line-height: 1.4; }
.result { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(4, 10, 20, .72); }
.result.is-hidden { display: none; }
.result-card { width: min(100%, 330px); border: 1px solid #c69f69; border-radius: 20px; background: linear-gradient(150deg, #3b597d, #17263e); box-shadow: 0 20px 60px #0009; padding: 24px; text-align: center; }.result-emblem { width: 44px; height: 44px; margin: -46px auto 12px; font-size: 21px; }
.result-card h1 { margin: 0 0 8px; color: var(--gold); }
.result-card p { margin: 0 0 18px; color: #d4e4f2; line-height: 1.6; }
.result-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0 0 18px; }.result-stats span { padding: 7px 5px; border: 1px solid #577498; border-radius: 8px; background: #13263e; color: #d4e4f2; font-size: 11px; }.result-stats b { display: block; margin-top: 2px; color: #ffe19a; font-size: 15px; }
.reward-actions { display: grid; gap: 7px; margin: 0 0 8px; }.reward-actions button { min-height: 39px; font-size: 13px; }.mock-reward { background: linear-gradient(180deg, #b88df2, #7954bd); color: #fff8e7; }.save-state { margin: 0 0 10px !important; color: #a9c9e5 !important; font-size: 10px; }
.result-home { width: 100%; min-height: 36px; margin-top: 8px; border: 1px solid #8ec4b6; background: #264959; color: #e6f0d9; font-size: 12px; }
.settings-panel { position: fixed; z-index: 12; inset: 0; display: grid; place-items: start center; padding: max(22px, env(safe-area-inset-top)) 18px; background: rgba(4, 10, 20, .72); }.settings-card { width: min(100%, 360px); margin-top: 8vh; padding: 18px; border: 1px solid #7cb7a5; border-radius: 16px; background: linear-gradient(145deg, #275b5c, #142640); box-shadow: 0 20px 50px #0009; }.settings-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: #ffe19a; }.settings-heading button { min-width: 32px; min-height: 32px; padding: 0; background: #35516f; color: #fff; font-size: 22px; }.settings-card label { display: grid; gap: 6px; margin: 13px 0; color: #d8e8f4; font-size: 13px; }.settings-card input[type="range"] { width: 100%; accent-color: #f2c65f; }.settings-card .checkbox-row { display: flex; align-items: center; gap: 8px; }.settings-card p { margin: 15px 0 0; color: #a9c4df; font-size: 11px; line-height: 1.5; }.settings-card .performance-state { padding: 8px; border: 1px solid #91c2af66; border-radius: 8px; background: #0f2839aa; color: #d8f4d7; }

@media (min-width: 600px) {
  #app { min-height: auto; margin-top: 16px; border-radius: 20px; }
}
@media (max-width: 800px) { #app { max-width: none; }.ai-log { display: none; }.hud div { padding: 5px 6px; }.battle-panel { padding: 2px; }.panel-heading { margin-bottom: 5px; }.help { display: none; }.control-panel { gap: 6px; padding: 6px; }.primary-action { display: none; }.recruit-action { grid-column: 1 / -1; }.speed-controls { min-height: 30px; }.speed-button { min-height: 29px; min-width: 43px; }.reserve { min-height: 46px; }.reserve-unit { min-height: 46px; }.status { min-height: 38px; padding: 7px; font-size: 11px; }.app-brand { min-height: 33px; }.brand-subtitle { font-size: 9px; }.return-home { min-height: 30px; }.settings-button { min-width: 30px; min-height: 30px; } }
@media (max-width: 380px) { #app { padding-left: 5px; padding-right: 5px; gap: 4px; }.battle-panel { padding: 4px; }.panel-heading strong { font-size: 14px; }.hud div { padding: 4px 3px; }.speed-controls { gap: 3px; } }

.stamina-panel { position: fixed; z-index: 22; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10, 16, 18, .74); }.stamina-card { position: relative; width: min(100%, 350px); padding: 26px 22px 20px; border: 3px solid #30251e; outline: 2px solid #d7aa6b; border-radius: 18px; background: linear-gradient(180deg, #f0e2bf, #d9c79f); box-shadow: 0 18px 0 #33251f, 0 28px 56px #000b; color: #412f25; text-align: center; }.stamina-card > p { margin: 5px 0; color: #77503a; font-size: 11px; font-weight: 800; }.stamina-card h2 { margin: 5px 0 4px; color: #2d2520; font: 900 25px KaiTi, STKaiti, serif; text-shadow: 0 2px #fff1c5; }.stamina-emblem { display: grid; width: 68px; height: 68px; margin: 0 auto 6px; place-items: center; border-width: 3px; font-size: 18px !important; }.stamina-card > strong { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 5px; color: #3a322b; font-size: 30px; }.stamina-card > strong i { display: grid; width: 34px; height: 34px; place-items: center; font-style: normal; }.stamina-card > small { display: block; color: #735b48; font-size: 10px; line-height: 1.45; }.stamina-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }.stamina-actions button { min-height: 55px; padding: 7px; color: #fff8dc; font-size: 13px; text-shadow: 0 1px #3d3024; }.stamina-video { border: 2px solid #613d25; background: linear-gradient(180deg, #f1c64d, #c8862c); box-shadow: 0 3px 0 #6d4227; }.stamina-share { border: 2px solid #3f6330; background: linear-gradient(180deg, #b1d768, #578d42); box-shadow: 0 3px 0 #31532e; }.stamina-limit-note { min-height: 16px; margin-top: 14px !important; color: #9a4938 !important; }.stamina-note { margin: 7px 0 0 !important; color: #826c5b !important; font-size: 9px !important; line-height: 1.5; }

/* Home: a compact left-side function rail and center-stage battle entry keep
   the hierarchy close to a phone game lobby instead of a uniform button grid. */
.home-topbar { grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 10px; }
.home-quick-rail { display: grid; gap: 7px; }
.home-profile { width: 62px; min-height: 62px; justify-content: center; padding: 4px; border-radius: 13px; background: linear-gradient(145deg, #52616a, #24333b); box-shadow: inset 0 2px #d9e0d3, 0 4px 0 #172227, 0 7px 12px #0007; }
.home-profile > span:last-child { display: none; }
.home-avatar { width: 51px; height: 51px; flex-basis: 51px; border-radius: 11px; }
.home-quick-rail .settings-button { width: 54px; min-width: 54px; min-height: 49px; margin: 0 auto; border: 2px solid #d2c38f; border-radius: 12px; background: linear-gradient(145deg, #76868b, #3b4b50); box-shadow: inset 0 2px #dce1d4, 0 3px 0 #263236, 0 6px 10px #0006; color: #263138; }
.home-quick-rail .home-official-announcement { display: grid; width: 54px; min-height: 56px; margin: 0 auto; padding: 3px; border: 2px solid #574337; border-radius: 9px; background: linear-gradient(145deg, #f2dd9c, #b98e50); box-shadow: inset 0 2px #fff0c2, 0 3px 0 #513b31, 0 6px 10px #0006; color: #302a25; text-align: center; }
.home-quick-rail .home-official-announcement span { width: 25px; height: 25px; margin: 0 auto; border-color: #56392d; background: #a14b3d; }
.home-quick-rail .home-official-announcement b { padding: 0; font: 900 13px KaiTi, STKaiti, serif; }
.home-quick-rail .home-official-announcement small, .home-quick-rail .home-official-announcement i { display: none; }
.home-resources { width: min(100%, 235px); justify-self: end; gap: 8px; }
.home-resources > span, .home-coins-button { min-height: 45px; border: 2px solid #715038; border-radius: 22px; background: linear-gradient(100deg, #2e2623, #5a382d 70%, #352722); box-shadow: inset 0 2px #c79561, 0 3px 0 #211917, 0 6px 11px #0006; }
.home-resources .home-stamina-resource { border-color: #4d6a38 !important; background: linear-gradient(100deg, #263126, #416037 70%, #263126) !important; }
.home-hero { min-height: 302px; margin-top: -1px; padding-top: 8px; }
.home-match-brief { margin-top: 8px; }
.home-start-battle { width: min(92%, 370px); min-height: 68px; margin-top: 10px; border: 3px solid #5b352e; outline: 2px solid #efc978; border-radius: 13px; background: linear-gradient(180deg, #d66f50 0 12%, #a9483c 15% 72%, #763633 74%); box-shadow: inset 0 3px #f6b47c, inset 0 -5px #74332f, 0 5px 0 #4e2c2d, 0 12px 20px #17232388; }
.home-actions { width: min(100%, 410px); margin: 5px auto 0; gap: 8px; }
.home-actions button { min-height: 66px; border: 2px solid #514137; border-radius: 11px; background: linear-gradient(145deg, #e2c87f, #a87a47); box-shadow: inset 0 2px #fff0b2, 0 3px 0 #5c4133, 0 7px 12px #0006; color: #342b28; }
.home-actions span { border-color: #5a3a30; background: linear-gradient(145deg, #bd5949, #753a35); color: #fff1b9; box-shadow: 0 2px 0 #59312f; }
.home-actions small { color: #5d4639; }
.home-daily-reward { width: min(100%, 410px); margin: 8px auto 0; border: 2px solid #6a5038; border-radius: 12px; background: linear-gradient(145deg, #49372e, #282b2b); box-shadow: inset 0 2px #c49a61, 0 3px 0 #1e2121; }

/* Battle controls: the five drawn units are the staging shelf immediately
   above the recruit control, so the player reads the loop bottom-up. */
.control-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'reserve reserve' 'recruit speed' 'start start'; align-items: center; gap: 9px; padding: 9px; }
.reserve { grid-area: reserve; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 0; gap: 7px; padding: 4px; border: 2px solid #5b4538; border-radius: 13px; background: linear-gradient(145deg, #534137, #2d3437); box-shadow: inset 0 2px #b9966b, inset 0 -3px #192326; touch-action: none; user-select: none; }
.reserve-unit, .reserve-empty, .reserve-ad-slot { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 2px solid #5e4634; border-radius: 11px; background: linear-gradient(145deg, #fff4cb 0 10%, #ddbd7a 56%, #a87449); box-shadow: inset 0 2px #fff9df, inset 0 -4px #a66f47, 0 2px 0 #20282a; }
.reserve.is-board-drop-active .reserve-empty { border-color: #9dddf4; border-style: solid; background: linear-gradient(145deg, #315b69, #1d3d4c); box-shadow: inset 0 0 0 2px #c7f3ff66, 0 0 10px #78d7f488; }
.reserve.is-board-drop-active .reserve-empty::before { display: grid; height: 100%; place-items: center; color: #dff9ff; content: '放回'; font: 900 10px KaiTi, STKaiti, serif; }
.reserve-unit.is-drag-hover,
.reserve-empty.is-drag-hover {
  border-color: #ffe08a;
  box-shadow: inset 0 0 0 2px #fff1b866, 0 0 10px #f5c96899;
}
.reserve-empty.is-drag-hover::before { content: '放回'; }
.reserve-unit::after { position: absolute; inset: 4px; border: 1px solid #fff5c755; border-radius: 7px; content: ''; pointer-events: none; }
.merge-ready-arrow { position: absolute; z-index: 3; top: 2px; right: 3px; display: none; width: 16px; height: 16px; place-items: center; border: 1px solid #e4ffd2; border-radius: 50%; background: linear-gradient(180deg, #65c765, #27834a); box-shadow: 0 1px 2px #173d25; color: #f3ffdf; font: 900 13px/15px system-ui; }
.reserve-unit.is-merge-ready .merge-ready-arrow { display: grid; animation: merge-arrow-bob .85s ease-in-out infinite alternate; }
@keyframes merge-arrow-bob { from { transform: translateY(1px); } to { transform: translateY(-2px); } }
.reserve-token { position: relative; z-index: 1; display: block; color: #252332; font: 900 27px KaiTi, STKaiti, serif; text-shadow: 0 1px #fff4ce; }
.reserve-art { position: relative; z-index: 1; display: block; width: 46px; height: 46px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 1px 1px #1b151044); }
.reserve-visual { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; place-items: center; }
.reserve-visual > .reserve-art, .reserve-visual > .reserve-art-fallback { grid-area: 1 / 1; }
.reserve-art-fallback { margin: 0; }
.reserve-art.is-loading { opacity: 1; }
.reserve-art.is-failed { display: none; }
.reserve-label { position: relative; z-index: 1; display: block; margin-top: -2px; color: #594032; font-size: 9px; font-weight: 900; }
.reserve-foot-stars { position: absolute; z-index: 4; right: 2px; bottom: 2px; left: 2px; display: block; color: #d48717; font: 900 10px/11px system-ui, sans-serif; letter-spacing: -1px; text-align: center; text-shadow: -1px -1px 0 #3b2112, 1px -1px 0 #3b2112, -1px 1px 0 #3b2112, 1px 1px 0 #3b2112, 0 1px 2px #fff0a888; pointer-events: none; }
.reserve-unit--shovel { border-color: #78602e; background: linear-gradient(145deg, #f8d66e, #bc842d); }
.reserve-tool-art { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; place-items: center; }
.shovel-icon { position: relative; display: block; width: 30px; height: 39px; transform: rotate(-24deg); filter: drop-shadow(0 2px 1px #3b2b1e88); }
.shovel-icon::before { position: absolute; top: 1px; left: 13px; width: 6px; height: 28px; border: 1px solid #4d2c1f; border-radius: 4px; background: linear-gradient(90deg, #6e351f, #d68b43 48%, #75391f); box-shadow: inset 1px 0 #f2bd6c; content: ''; }
.shovel-icon::after { position: absolute; bottom: 0; left: 4px; width: 23px; height: 16px; border: 2px solid #37444a; border-radius: 4px 4px 12px 12px; background: linear-gradient(135deg, #e5edf0, #78939d 62%, #40515a); box-shadow: inset 1px 1px #ffffffaa; content: ''; }
.reserve-ad-slot { display: grid; place-items: center; padding: 0; border-color: #795d2c; background: linear-gradient(145deg, #f6da73, #bf8132 68%, #7d4a2e); }
.reserve-ad-slot .shovel-icon { transform: rotate(-24deg) scale(.82) translateY(-4px); }
.reserve-ad-video-icon { position: absolute; z-index: 3; top: 3px; right: 3px; display: block; width: 17px; height: 14px; border: 1px solid #fff0b2; border-radius: 5px; background: linear-gradient(145deg, #b8503e, #73332e); box-shadow: 0 2px 0 #593025, 0 1px 3px #3b241c88; pointer-events: none; }
.reserve-ad-video-icon::before { position: absolute; top: 3px; left: 3px; width: 8px; height: 6px; border: 1px solid #fff5ce; border-radius: 2px; content: ''; }
.reserve-ad-video-icon::after { position: absolute; top: 5px; left: 6px; width: 3px; height: 3px; border: 1px solid #fff5ce; border-radius: 50%; content: ''; }
.reserve-ad-badge { position: absolute; right: 2px; bottom: 2px; min-width: 22px; padding: 1px 3px; border: 1px solid #fff1ab; border-radius: 8px; background: #9e4538; color: #fff5cf; font: 900 10px/13px system-ui, sans-serif; }
.unit-drag-preview { position: fixed; z-index: 40; top: 0; left: 0; display: none; width: 58px; height: 58px; place-items: center; pointer-events: none; border: 2px solid #ffeab2; border-radius: 13px; background: #3e3026dd; box-shadow: 0 7px 16px #0008; will-change: transform; }
.unit-drag-preview.is-visible { display: grid; }
.unit-drag-preview img { width: 52px; height: 52px; object-fit: contain; }
.unit-drag-preview .shovel-icon { transform: rotate(-24deg) scale(1.2); }
.recruit-action { grid-area: recruit; min-height: 54px; border: 2px solid #64352e; border-radius: 12px; background: linear-gradient(180deg, #ef9b6f, #bd523d 72%, #8b3d34); box-shadow: inset 0 2px #ffd2a5, inset 0 -4px #84362f, 0 4px 0 #57322f; color: #fff6e7; font-size: 18px; }
.speed-controls { grid-area: speed; grid-column: auto; min-height: 54px; gap: 3px; padding: 3px; border: 1px solid #617a78; border-radius: 11px; background: #172d38; }.speed-controls span { display: none; }.speed-button { min-width: 36px; min-height: 41px; padding: 4px 5px; font-size: 11px; }
.primary-action { grid-area: start; }

@media (max-width: 800px) { .control-panel { grid-template-areas: 'reserve reserve' 'recruit speed'; gap: 7px; padding: 7px; }.reserve { min-height: 0; gap: 5px; }.reserve-unit, .reserve-empty, .reserve-ad-slot { min-height: 0; }.reserve-art { width: min(46px, 13vw); height: min(46px, 13vw); }.reserve-token { font-size: 24px; }.recruit-action { min-height: 51px; }.speed-controls { min-height: 51px; }.speed-button { min-width: 33px; min-height: 38px; }.home-hero { min-height: 292px; } }

/* Final drag feedback overrides keep the live target visible after the
   compact/mobile reserve rules below the main reserve declarations. */
#app .reserve-unit.is-drag-hover,
#app .reserve-empty.is-drag-hover {
  border-color: #ffe08a;
  box-shadow: inset 0 0 0 2px #fff1b866, 0 0 10px #f5c96899;
}
#app .reserve-empty.is-drag-hover::before { display: grid; height: 100%; place-items: center; color: #fff4c6; content: '放回'; font: 900 10px KaiTi, STKaiti, serif; }
@media (max-width: 380px) { .home-topbar { grid-template-columns: 57px minmax(0, 1fr); gap: 7px; }.home-profile { width: 57px; min-height: 57px; }.home-avatar { width: 46px; height: 46px; flex-basis: 46px; }.home-quick-rail .settings-button, .home-quick-rail .home-official-announcement { width: 50px; min-width: 50px; }.home-resources > span, .home-coins-button { min-height: 42px; }.reserve { gap: 4px; padding: 3px; }.reserve-token { font-size: 21px; }.speed-button { min-width: 30px; }.recruit-action { font-size: 16px; } }

/* Lobby layout pass: the previous homepage left a tall empty hero area because
   the central tableau was hidden.  This is a phone-game lobby: a compact
   utility rail, an actual central arena, one dominant start action, and the
   three collection entries anchored together at the bottom. */
.home-screen { display: flex; flex-direction: column; max-width: 480px; padding: max(12px, env(safe-area-inset-top)) 14px max(13px, env(safe-area-inset-bottom)); background-position: 50% 50%; }
.home-topbar { position: relative; display: block; min-height: 103px; }
.home-quick-rail { position: absolute; z-index: 7; top: 0; left: 0; gap: 6px; }
.home-profile { width: 54px; min-height: 54px; border-radius: 11px; }
.home-avatar { width: 43px; height: 43px; flex-basis: 43px; }
.home-quick-rail .settings-button { width: 46px; min-width: 46px; min-height: 40px; font-size: 20px; }
.home-quick-rail .home-official-announcement { width: 46px; min-height: 45px; }
.home-quick-rail .home-official-announcement span { width: 21px; height: 21px; font-size: 13px; }
.home-quick-rail .home-official-announcement b { font-size: 11px; }
.home-resources { position: absolute; z-index: 7; top: 0; right: 0; width: min(100% - 67px, 242px); gap: 6px; }
.home-resources > span, .home-coins-button { min-height: 42px; padding: 3px 8px; }
.home-hero { min-height: clamp(318px, calc(100dvh - 418px), 390px); margin: -4px 0 0; padding-top: 0; flex: 1 1 auto; overflow: visible; }
.home-kicker { position: relative; z-index: 4; padding-left: 51px; font-size: 9px; letter-spacing: 2.5px; }
.home-hero h1 { position: relative; z-index: 4; margin-top: 4px; padding-left: 50px; font-size: clamp(28px, 8vw, 38px); }
.home-rank { position: relative; z-index: 5; margin-left: 50px; }
.home-tableau { display: block; z-index: 1; bottom: 69px; width: min(82vw, 342px); height: 200px; filter: drop-shadow(0 8px 8px #17232388); }
.home-wall { bottom: 35px; left: 69px; width: 190px; height: 97px; border-width: 3px; }
.home-wall::before { width: 192px; }
.home-wall b { top: 24px; left: 68px; }
.home-banner { bottom: 119px; left: 154px; }
.home-path { bottom: 0; height: 69px; }
.home-hill { height: 68px; }
.home-torch { bottom: 39px; }
.home-match-brief { position: absolute; z-index: 5; bottom: 75px; left: 50%; width: min(76%, 285px); margin: 0; padding: 5px 10px; transform: translateX(-50%); background: rgba(20, 35, 34, .88); }
.home-match-brief b { font-size: 13px; }
.home-start-battle { position: absolute; z-index: 6; bottom: 3px; left: 50%; width: min(87%, 350px); min-height: 62px; margin: 0; transform: translateX(-50%); font-size: 19px; }
.home-actions { width: min(94%, 406px); margin: 7px auto 0; gap: 7px; }
.home-actions button { min-height: 61px; border-radius: 10px; }
.home-daily-reward { width: min(94%, 406px); min-height: 42px; margin-top: 7px; }
.home-save-state { margin: 7px 0 0; }
@media (max-height: 700px) { .home-topbar { min-height: 92px; }.home-hero { min-height: 295px; }.home-tableau { bottom: 66px; transform: translateX(50%) scale(.88); transform-origin: bottom center; }.home-actions button { min-height: 55px; }.home-daily-reward { min-height: 38px; }.home-save-state { display: none; } }
@media (max-width: 380px) { .home-topbar { min-height: 91px; }.home-resources { width: calc(100% - 62px); }.home-hero h1 { font-size: 28px; }.home-tableau { transform: translateX(50%) scale(.9); }.home-actions button { min-height: 57px; } }

/* Home lobby refinement: utility information stays compact so the illustrated
   arena remains the visual focus.  Avoid card grids that cut the scene into
   large opaque blocks. */
.home-topbar { min-height: 86px; }
.home-resources {
  width: min(calc(100% - 66px), 194px);
  gap: 5px;
  box-sizing: border-box;
}
.home-resources > span,
.home-coins-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 35px;
  padding: 3px 7px;
  border-width: 1px;
  border-radius: 18px;
  box-shadow: inset 0 1px #d5a56b, 0 2px 0 #211917, 0 4px 8px #0005;
}
.home-resources .home-coins-button { justify-content: flex-start; }
.home-resources .resource-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  font-size: 10px;
  line-height: 26px;
  box-shadow: inset 0 1px #ffe4a0, 0 1px 0 #4c3120;
}
.home-resources .home-coins-button > span,
.home-resources .home-stamina-resource > span {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}
.home-resources b {
  color: #fff3b2;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}
.home-resources small {
  color: #e4d5a8;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.home-resources #home-stamina-add {
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  margin-left: auto;
  border-width: 1px;
  font-size: 20px;
  line-height: 19px;
}
.home-hero { min-height: clamp(306px, calc(100dvh - 391px), 375px); }
.home-match-brief {
  bottom: 67px;
  width: min(64%, 235px);
  padding: 4px 8px;
  border-width: 1px;
  border-radius: 12px;
  background: rgba(20, 35, 34, .76);
}
.home-match-brief b { font-size: 12px; }
.home-start-battle { bottom: 1px; min-height: 56px; font-size: 18px; }
.home-actions {
  display: flex;
  justify-content: space-between;
  width: min(90%, 332px);
  margin: 4px auto 0;
  gap: 0;
  background: transparent;
}
.home-actions button {
  display: grid;
  grid-template-rows: 42px auto;
  justify-items: center;
  width: 76px;
  min-height: 65px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff2c4;
}
.home-actions button:active { transform: translateY(2px); }
.home-actions span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid #ecd48b;
  border-radius: 50%;
  background: linear-gradient(145deg, #d97955 0%, #a64739 52%, #6c302e 100%);
  box-shadow: inset 0 2px #ffd8a0, inset 0 -3px #6b2e2c, 0 3px 0 #382726, 0 6px 9px #0006;
  color: #fff8d8;
  font-size: 20px;
}
.home-actions b {
  min-width: 62px;
  margin-top: -2px;
  padding: 2px 5px;
  border: 1px solid #9f8754;
  border-radius: 8px;
  background: rgba(27, 35, 33, .78);
  box-shadow: 0 1px 2px #0008;
  color: #fff0bd;
  font: 900 11px/1.2 KaiTi, STKaiti, serif;
  white-space: nowrap;
}
.home-actions small { display: none; }
.home-daily-reward {
  width: min(80%, 310px);
  min-height: 34px;
  margin: 3px auto 0;
  padding: 3px 8px;
  border-width: 1px;
  border-radius: 10px;
  background: rgba(40, 37, 33, .84);
  box-shadow: inset 0 1px #c49a61, 0 2px 0 #1e2121;
}
.home-daily-reward span {
  width: 23px;
  height: 23px;
  font-size: 12px;
}
.home-daily-reward b { font-size: 11px; }
.home-daily-reward small { font-size: 9px; }
@media (max-width: 380px) {
  .home-topbar { min-height: 81px; }
  .home-resources { width: min(calc(100% - 61px), 178px); }
  .home-resources b { font-size: 15px; }
  .home-actions { width: min(94%, 310px); }
  .home-actions button { width: 70px; }
}

/* Layout correction from portrait-device review: the resource rows must not
   cover the title, and the rank belongs immediately below the title instead
   of over the castle tableau. */
.home-topbar { min-height: 98px; }
.home-resources {
  top: 5px;
  width: min(calc(100% - 62px), 166px);
  gap: 5px;
}
.home-resources > span,
.home-resources .home-coins-button {
  min-height: 32px;
  height: 32px;
  padding: 2px 6px;
  border: 1px solid #d2a968;
  border-radius: 17px;
}
.home-resources .home-coins-button {
  background: linear-gradient(100deg, #2d2925 0%, #533a2c 57%, #302725 100%) !important;
  box-shadow: inset 0 1px #d4a16a, inset 0 -2px #2a1d1b, 0 2px 0 #181412, 0 4px 7px #0005;
}
.home-resources .home-stamina-resource {
  background: linear-gradient(100deg, #213229 0%, #486b3d 57%, #213229 100%) !important;
  box-shadow: inset 0 1px #bfdf88, inset 0 -2px #213622, 0 2px 0 #142016, 0 4px 7px #0005;
}
.home-resources .resource-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  font-size: 8px;
  line-height: 23px;
}
.home-resources b { font-size: 15px; }
.home-resources small { font-size: 9px; }
.home-resources #home-stamina-add {
  width: 23px;
  min-width: 23px;
  height: 23px;
  min-height: 23px;
  font-size: 18px;
  line-height: 17px;
}
.home-hero { min-height: clamp(302px, calc(100dvh - 398px), 370px); margin-top: -4px; }
.home-kicker { display: none; }
.home-hero h1 {
  width: calc(100% - 58px);
  margin: 0 0 4px 58px;
  padding: 0;
  color: #ffe9ad;
  font-size: clamp(25px, 7vw, 33px);
  line-height: 1.08;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.home-rank {
  min-height: 24px;
  margin: 0 0 0 58px;
  padding: 3px 11px;
  border-color: #e9ce84;
  border-radius: 13px;
  background: linear-gradient(180deg, #8b5140, #603631);
  box-shadow: inset 0 1px #f4bf82, 0 2px 0 #412728, 0 4px 7px #0007;
  font-size: 11px;
  line-height: 1.15;
}
@media (max-width: 380px) {
  .home-topbar { min-height: 91px; }
  .home-resources { width: min(calc(100% - 59px), 154px); }
  .home-hero h1 { width: calc(100% - 54px); margin-left: 54px; font-size: 24px; }
  .home-rank { margin-left: 54px; }
}

/* Final portrait lobby hierarchy: equal-height compact resources, a clear
   title lane, and a rank badge immediately below it. */
.home-resources {
  top: 7px;
  width: min(calc(100% - 64px), 158px);
  gap: 4px;
}
.home-resources > span,
.home-resources .home-coins-button {
  min-height: 30px;
  height: 30px;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 16px;
}
.home-resources .home-coins-button {
  display: flex;
  background-color: #332821 !important;
  background-image: linear-gradient(100deg, #292623 0%, #50382b 56%, #2c2624 100%) !important;
  color: #fff0b7;
}
.home-resources .home-stamina-resource {
  display: flex;
  background-color: #263a2a !important;
  background-image: linear-gradient(100deg, #203026 0%, #42633a 56%, #203027 100%) !important;
}
.home-resources .resource-icon {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
  line-height: 21px;
  font-size: 8px;
}
.home-resources b { font-size: 14px; }
.home-resources small { font-size: 8px; }
.home-resources #home-stamina-add { width: 21px; min-width: 21px; height: 21px; min-height: 21px; font-size: 16px; line-height: 15px; }
.home-topbar { min-height: 96px; }
.home-hero { min-height: clamp(304px, calc(100dvh - 400px), 372px); }
.home-hero h1 {
  width: calc(100% - 56px);
  margin-left: 56px;
  margin-bottom: 5px;
  font-size: clamp(24px, 6.8vw, 31px);
  letter-spacing: .5px;
  text-shadow: 0 2px 0 #3b3431, 0 5px 9px #10212a;
}
.home-rank {
  min-height: 22px;
  margin-left: 56px;
  padding: 3px 10px;
  font-size: 10px;
  box-shadow: inset 0 1px #f4bf82, 0 2px 0 #412728, 0 3px 6px #0007;
}
.home-toast { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 380px) {
  .home-resources { width: min(calc(100% - 60px), 149px); }
  .home-hero h1 { width: calc(100% - 52px); margin-left: 52px; font-size: 23px; }
  .home-rank { margin-left: 52px; }
}

/* Homepage reference rebuild — positions follow docs/homepage_layout_spec.md.
   This deliberately replaces the earlier stacked lobby with a portrait
   hand-drawn composition; all art below is original CSS geometry. */
body { min-height: 100dvh; margin: 0; background: #171a17; }
.home-screen {
  position: relative;
  width: min(100%, 543px);
  min-height: 100dvh;
  height: 100dvh;
  max-height: 939px;
  margin: 0 auto;
  padding: 0 !important;
  display: block !important;
  max-width: 543px !important;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, #fff7dc10 0%, transparent 24%, #1d281410 72%, #11190e2b 100%),
    url('./assets/home-lobby-background-no-flags.png') center center / cover no-repeat;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.home-screen.is-hidden { display: none !important; }
.home-screen::before,
.home-screen::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: '';
}
.home-screen::before {
  inset: 0;
  opacity: .12;
  background:
    radial-gradient(ellipse at -4% 19%, transparent 0 18%, #40504480 18.5% 25%, transparent 25.5%),
    radial-gradient(ellipse at 104% 20%, transparent 0 16%, #34453d66 16.5% 23%, transparent 23.5%),
    linear-gradient(116deg, transparent 0 29%, #7e846e3d 29.2% 30%, transparent 30.3% 100%),
    linear-gradient(68deg, transparent 0 77%, #5f695a3e 77.2% 78%, transparent 78.3% 100%);
}
.home-screen::after {
  inset: auto -6% -14% -6%;
  height: 18%;
  background: radial-gradient(ellipse at 50% 100%, #121a1888 0 41%, transparent 68%);
}
.home-topbar { position: absolute !important; z-index: 8; inset: 0; min-height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none; }
.home-topbar button { pointer-events: auto; }
.home-quick-rail { position: absolute !important; top: calc(env(safe-area-inset-top) + 3.2%); left: 9.8%; display: grid; width: 11.2%; gap: clamp(6px, 1.1vh, 10px); }
.home-profile {
  width: 100% !important; min-width: 0 !important; min-height: auto !important; aspect-ratio: 1 / 1;
  padding: 3px !important; border: 3px solid #3d332b !important; border-radius: 15px !important;
  background: linear-gradient(145deg, #f0d79a, #766747) !important;
  box-shadow: inset 0 0 0 2px #fff1be, 0 3px 0 #443328, 0 6px 10px #38261988 !important;
}
.home-profile > span:last-child { display: none !important; }
.home-avatar { width: 100% !important; height: 100% !important; flex-basis: auto !important; border: 2px solid #312c27; border-radius: 11px; box-shadow: inset 0 1px #fff5c8; }
.home-quick-rail .settings-button,
.home-quick-rail .home-official-announcement,
.home-quick-rail .home-review-button {
  display: grid; width: 100% !important; min-width: 0 !important; min-height: auto !important; aspect-ratio: 1 / .91;
  place-items: center; margin: 0 !important; padding: 2px !important; border: 2px solid #4b392c !important;
  border-radius: 11px !important; color: #342b24; box-shadow: inset 0 1px #fff0bd, 0 3px 0 #4a3429, 0 5px 8px #251b1588 !important;
}
.home-quick-rail .settings-button { background: linear-gradient(145deg, #a3b2a7, #5f736d) !important; color: #263430; font-size: clamp(18px, 5vw, 27px); }
.home-quick-rail .home-official-announcement,
.home-quick-rail .home-review-button { background: linear-gradient(145deg, #f5df9e, #bd9050) !important; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.home-quick-rail .home-official-announcement span,
.home-quick-rail .home-review-button span { display: grid; width: 23px; height: 23px; place-items: center; margin: 0 !important; border: 1px solid #623c31; border-radius: 7px; background: #a74a39; color: #fff0bd; font: 900 13px KaiTi, STKaiti, serif; }
.home-quick-rail .home-official-announcement b,
.home-quick-rail .home-review-button b { padding: 0 !important; font: 900 clamp(10px, 2.5vw, 13px) KaiTi, STKaiti, serif !important; }
.home-quick-rail .home-official-announcement small,
.home-quick-rail .home-official-announcement i,
.home-quick-rail .home-review-button small { display: none !important; }
.home-resources { position: absolute !important; top: calc(env(safe-area-inset-top) + 3.3%); right: 5.8% !important; left: auto !important; display: grid !important; width: 28.8% !important; gap: 1.75vh !important; }
.home-resources > span,
.home-resources > #home-coins-button {
  display: flex !important; width: 100% !important; min-height: 0 !important; height: 43px !important; aspect-ratio: auto !important;
  align-items: center; gap: 5px !important; padding: 2px 8px !important; border: 2px solid #5a382a !important; border-radius: 999px !important;
  box-sizing: border-box; color: #fff0b3; text-align: left; box-shadow: inset 0 2px #f5d291, inset 0 -3px #281b19, 0 3px 0 #35231e, 0 5px 9px #2c1b1688 !important;
}
.home-resources > #home-coins-button { background: linear-gradient(100deg, #34251f, #694631 55%, #34251f) !important; }
.home-resources .home-stamina-resource { background: linear-gradient(100deg, #253124, #4b703d 55%, #253124) !important; }
.home-resources .resource-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; line-height: 26px !important; border: 2px solid #805328; box-shadow: inset 0 1px #fff0b2, 0 1px 0 #2e261d; font-size: 10px !important; }
.home-resources b { font-size: clamp(14px, 3.8vw, 20px) !important; line-height: 1 !important; }
.home-resources small { margin-left: 2px; font-size: clamp(8px, 2.2vw, 11px) !important; }
.home-resources #home-stamina-add { width: 27px !important; min-width: 27px !important; height: 27px !important; min-height: 27px !important; border: 1px solid #e5efa5; border-radius: 50%; background: linear-gradient(#72a74b, #3d772d); color: white; font-size: 23px !important; line-height: 18px !important; box-shadow: inset 0 1px #dff6ac, 0 2px 0 #1f4a23; }
.home-hero { position: absolute !important; inset: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; text-align: center; }
.home-kicker, .home-mist { display: none !important; }
.home-hero h1 { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 14.8%); left: 18.5%; width: 63%; margin: 0 !important; padding: 0 !important; color: #a13e32 !important; font: 900 clamp(31px, 8.1vw, 47px) KaiTi, STKaiti, serif !important; line-height: 1.05 !important; letter-spacing: 3px !important; white-space: nowrap; text-shadow: 0 2px #fff0bf, 0 4px 0 #6e3d31, 0 6px 10px #4b382b66 !important; }
.home-subtitle { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 22.2%); left: 25%; width: 50%; margin: 0; color: #483226; font: 900 clamp(12px, 3.3vw, 17px) KaiTi, STKaiti, serif; letter-spacing: 1px; text-shadow: 0 1px #fff3c3; }
.home-rank { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 25.3%); left: 35%; width: 30%; min-height: 0 !important; margin: 0 !important; padding: 4px 8px !important; box-sizing: border-box; border: 2px solid #51362e !important; border-radius: 999px !important; background: linear-gradient(#9a5a41, #61342e) !important; color: #fff0bc !important; font-size: clamp(10px, 2.7vw, 14px) !important; line-height: 1.15; box-shadow: inset 0 1px #f4c284, 0 2px 0 #4b2928 !important; }
.home-tableau { position: absolute !important; z-index: 1; top: calc(env(safe-area-inset-top) + 31.2%); right: auto !important; bottom: auto !important; left: 19.5%; width: 61%; height: 29.7%; filter: none !important; transform: none !important; }
.home-tableau { display: none !important; }
.home-hill { bottom: 0 !important; width: 39% !important; height: 31% !important; background: linear-gradient(145deg, #71805d, #384735) !important; box-shadow: inset 0 10px #a0a97977, 0 7px 10px #30271966 !important; }
.hill-left { left: -9% !important; transform: skewY(-12deg) !important; }.hill-right { right: -9% !important; transform: scaleX(-1) skewY(-12deg) !important; }
.home-wall { bottom: 17% !important; left: 7% !important; width: 86% !important; height: 56% !important; border: 4px solid #6c5340 !important; border-radius: 10px !important; background: repeating-linear-gradient(90deg, #f4e5bb 0 23%, #d8bf88 24% 25%, #f2dfae 26% 48%, #b9996c 49% 51%) !important; box-shadow: 0 7px 0 #564033, inset 0 -17px #c6a672, inset 0 2px #fff4d0 !important; }
.home-wall::before { top: -14px !important; left: -5px !important; width: calc(100% + 10px) !important; height: 15px !important; background: repeating-linear-gradient(90deg, #f2d99a 0 12%, transparent 13% 18%) !important; }
.home-wall::after { position: absolute; inset: 14% 8%; content: ''; border: 2px solid #84694e; border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 24%, #7f674d 25% 26%), repeating-linear-gradient(0deg, transparent 0 31%, #7f674d 32% 33%); opacity: .75; }
.home-wall b { z-index: 2; top: 31% !important; left: 39% !important; padding: 6px 10px !important; border: 2px solid #f4d189; background: #a64a38 !important; color: #fff3c7 !important; font-size: clamp(18px, 5.3vw, 28px) !important; box-shadow: 0 3px 0 #64332d; }
.home-banner { z-index: 3; bottom: 69% !important; left: 46% !important; width: 15% !important; height: 35% !important; padding-top: 3px !important; border: 2px solid #f1d18c; border-radius: 4px 4px 12px 12px !important; background: linear-gradient(90deg, #bb5543, #81332f) !important; color: #fff0bd !important; font-size: clamp(13px, 3.7vw, 18px) !important; box-shadow: -3px 2px #5e382c; }
.home-path { bottom: 0 !important; left: 39% !important; width: 25% !important; height: 43% !important; background: repeating-linear-gradient(90deg, #cdb37d 0 24%, #e2ce9a 25% 48%) !important; box-shadow: inset 0 0 0 2px #7b634b; }
.home-torch { bottom: 22% !important; width: 5px !important; height: 24% !important; background: #443027 !important; box-shadow: 0 -9px 7px #f6bd5e !important; }.torch-one { left: 1% !important; }.torch-two { right: 1% !important; }
.home-spear { position: absolute; z-index: 4; bottom: 13%; left: 48%; width: 4px; height: 52%; border-radius: 3px; background: #382d27; transform: rotate(19deg); box-shadow: 1px 0 #f3dcaa; }.home-spear::before { position: absolute; top: -13px; left: -5px; width: 13px; height: 17px; content: ''; background: linear-gradient(130deg, #f4e6c2 0 47%, #6d7166 48%); clip-path: polygon(50% 0, 100% 100%, 50% 79%, 0 100%); }
.home-tableau-label { position: absolute; z-index: 5; bottom: 4%; left: 28%; width: 44%; padding: 3px 0; border: 1px solid #67503d; border-radius: 999px; background: #f3e3b9e6; color: #5c3b2d; font: 900 clamp(10px, 2.6vw, 13px) KaiTi, STKaiti, serif; }
.home-gate { position: absolute; z-index: 2; width: 941px; height: 1672px; pointer-events: none; transform-origin: top left; }
.home-gate img { position: absolute; display: block; width: 125px; height: 116px; max-width: none; user-select: none; }
.home-gate-mask { left: 409px; top: 1176px; z-index: 0; }
.home-gate-left { left: 409px; top: 1176px; z-index: 1; transform-origin: 65px 98px; }
.home-gate-right { left: 409px; top: 1176px; z-index: 1; transform-origin: 60px 98px; }
.home-gate.is-opening .home-gate-left,
.home-gate.is-open .home-gate-left { transform: translateX(-45px) rotate(-3deg); transition: transform 620ms cubic-bezier(.22,.75,.28,1); }
.home-gate.is-opening .home-gate-right,
.home-gate.is-open .home-gate-right { transform: translateX(45px) rotate(3deg); transition: transform 620ms cubic-bezier(.22,.75,.28,1); }
.home-gate.is-opening .home-gate-left,
.home-gate.is-opening .home-gate-right { will-change: transform; }
.home-match-brief { position: absolute !important; z-index: 3; top: calc(env(safe-area-inset-top) + 60.8%); right: auto !important; bottom: auto !important; left: 29%; display: block !important; width: 42%; max-width: none !important; margin: 0 !important; padding: 3px 7px !important; transform: none !important; border: 1px solid #796047 !important; border-radius: 11px !important; background: #433a30d9 !important; box-shadow: 0 2px 0 #f0cd8b44 !important; }
.home-match-brief span, .home-match-brief small { font-size: clamp(8px, 2vw, 10px) !important; }.home-match-brief b { font-size: clamp(12px, 3.1vw, 16px) !important; }
.home-start-battle { position: absolute !important; z-index: 4; top: calc(env(safe-area-inset-top) + 67.1%); right: auto !important; bottom: auto !important; left: 28.2%; width: 43.6% !important; min-height: 0 !important; height: 10.4%; margin: 0 !important; transform: none !important; display: grid !important; grid-template-columns: auto clamp(22px, 6vw, 31px) auto; grid-template-rows: 1fr auto; align-content: center; justify-content: center; align-items: center; column-gap: clamp(3px, 1vw, 7px); border: 3px solid #674333 !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(248, 232, 188, .9), rgba(185, 139, 91, .82)) !important; box-shadow: inset 0 3px rgba(255, 249, 216, .9), inset 0 -3px rgba(103, 65, 44, .55), 0 5px 0 rgba(79, 52, 39, .8), 0 10px 16px rgba(56, 32, 24, .35) !important; color: #4d3027 !important; font: 900 clamp(17px, 4.5vw, 24px) KaiTi, STKaiti, serif !important; white-space: nowrap; text-shadow: 0 1px rgba(255, 243, 202, .85) !important; }
.home-start-battle .home-start-label { display: block; color: #4d3027; font: inherit; }
.home-start-battle .home-crossed-swords { display: grid; width: auto; place-items: center; color: #7e3d2f; font: 900 clamp(20px, 5.2vw, 27px) "Microsoft YaHei", sans-serif; line-height: 1; transform: rotate(-7deg); text-shadow: 0 1px #fff0bf, 0 2px rgba(80, 48, 36, .4); }
.home-start-battle::before, .home-start-battle::after { position: absolute; top: -13px; width: 29px; height: 4px; border: 1px solid #372b28; border-radius: 3px; content: ''; background: linear-gradient(#eee4ce, #91b4bd); }.home-start-battle::before { left: 12%; transform: rotate(28deg); }.home-start-battle::after { right: 12%; transform: rotate(-28deg); }
.home-start-battle small { grid-column: 1 / -1; margin-top: 1px !important; color: #694637 !important; font: 900 clamp(9px, 2.3vw, 12px) "Microsoft YaHei", sans-serif !important; text-shadow: 0 1px rgba(255, 242, 198, .75) !important; }
.home-actions { position: absolute !important; z-index: 5; right: 0; bottom: max(10.5%, calc(env(safe-area-inset-bottom) + 5.5%)); left: 0; display: flex !important; height: 76px !important; justify-content: space-between; width: 82% !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; }
.home-actions button { display: grid !important; width: 17.7% !important; height: 76px !important; min-height: 0 !important; grid-template-rows: 50px 22px !important; align-content: start !important; aspect-ratio: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #432f25 !important; }
.home-actions button span { display: grid; width: 100%; height: 67%; place-items: center; border: 2px solid #57402e; border-radius: 50%; background: linear-gradient(145deg, #f2d28a, #a76e43); box-shadow: inset 0 2px #fff1bd, 0 3px 0 #563d2f, 0 5px 8px #2a1d1566; color: #fff2c0; font: 900 clamp(17px, 4.5vw, 24px) KaiTi, STKaiti, serif; text-shadow: 0 2px #75382e; }
.home-actions button b { margin-top: 4px; padding: 2px 0; border: 1px solid #d9bb6d; border-radius: 8px; background: #2d332ad9; color: #fff0b4; font: 900 clamp(9px, 2.3vw, 12px) KaiTi, STKaiti, serif; white-space: nowrap; }.home-actions button small { display: none; }
.home-daily-reward, .home-save-state { display: none !important; }
.home-toast { z-index: 30 !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; }
.home-library-panel { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 22px; background: #1e2119a8; backdrop-filter: blur(3px); }
.home-library-card { position: relative; width: min(86vw, 390px); max-height: min(75dvh, 650px); overflow: auto; padding: 25px 19px 17px; border: 3px solid #4e372b; border-radius: 17px; background: linear-gradient(145deg, #f5e6bd, #d8bd88); box-shadow: inset 0 0 0 3px #fff1c9, 0 10px 0 #513b2f, 0 19px 35px #19170f99; color: #422d24; text-align: center; }
.home-library-emblem { display: grid; width: 42px; height: 42px; place-items: center; margin: -5px auto 2px; border: 2px solid #614033; border-radius: 50%; background: linear-gradient(#c25c43, #84362e); color: #fff0ba; font: 900 22px KaiTi, STKaiti, serif; box-shadow: inset 0 2px #edb070, 0 2px 0 #653126; }.home-library-card > p { margin: 0; color: #8b4a35; font-size: 11px; font-weight: 900; }.home-library-card h2 { margin: 2px 0 12px; font: 900 25px KaiTi, STKaiti, serif; }.home-library-card > small { display: block; margin-top: 11px; color: #705443; font-size: 10px; line-height: 1.5; text-align: left; }
.home-library-content { display: grid; gap: 7px; }.home-library-content p { display: flex; justify-content: space-between; margin: 0; padding: 8px 10px; border: 1px solid #9b7a54; border-radius: 8px; background: #fff4d6a8; font-size: 13px; }.home-library-content p b { color: #933f32; }
.home-library-emblem--image { overflow: hidden; background: linear-gradient(145deg, #d8bc7e, #8e5b3f); }
.home-library-emblem--image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #3f2b2188); }
.home-library-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: left; }.home-library-list li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 7px; border: 1px solid #9b7a54; border-radius: 8px; background: #fff4d6a8; }.home-library-list li > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #9c4838; color: #fff0bb; font-weight: 900; }.home-library-list p { margin: 0; }.home-library-list b, .home-library-list small { display: block; }.home-library-list small { margin-top: 1px; color: #6b5544; font-size: 10px; }
.equipment-library-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid #9b7a54; border-radius: 8px; background: #fff4d6a8; text-align: left; }
.equipment-library-row > div { min-width: 0; }
.equipment-library-row b, .equipment-library-row small { display: block; }
.equipment-library-row b { color: #4d3427; font-size: 12px; line-height: 1.2; }
.equipment-library-row small { margin-top: 3px; color: #6b5544; font-size: 9px; line-height: 1.35; }
.equipment-status { flex: none; padding: 3px 6px; border: 1px solid #806042; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.equipment-status.is-owned { background: #6f874c; color: #fff6ce; }
.equipment-status.is-locked { background: #6e6254; color: #f9edca; }
.equipment-action { min-width: 48px; padding: 5px 7px; border: 1px solid #7d5139; border-radius: 6px; background: #c75d47; color: #fff4d8; font-size: 10px; font-weight: 900; }
.equipment-action:disabled { border-color: #9a876d; background: #b8a486; color: #f1e5c5; opacity: .82; }
.general-library-content { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; text-align: left; }.general-library-content article { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px; border: 1px solid #9b7a54; border-radius: 8px; background: #fff4d6a8; }.general-library-content article > span { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid #704334; border-radius: 7px; background: #9d513d; color: #fff0bc; font: 900 12px KaiTi, STKaiti, serif; }.general-library-content p { margin: 0; }.general-library-content b, .general-library-content small { display: block; }.general-library-content small { margin-top: 2px; color: #6b5544; font-size: 8px; line-height: 1.25; }
@media (max-height: 720px) {
  .home-quick-rail { top: calc(env(safe-area-inset-top) + 2%); gap: 4px; }.home-resources { top: calc(env(safe-area-inset-top) + 2%); gap: 1vh !important; }.home-hero h1 { top: calc(env(safe-area-inset-top) + 13.5%); }.home-subtitle { top: calc(env(safe-area-inset-top) + 20.6%); }.home-rank { top: calc(env(safe-area-inset-top) + 23.5%); }.home-tableau { top: calc(env(safe-area-inset-top) + 28.5%); height: 31%; }.home-match-brief { top: calc(env(safe-area-inset-top) + 59.5%); }.home-start-battle { top: calc(env(safe-area-inset-top) + 65%); }.home-actions { bottom: max(8.3%, calc(env(safe-area-inset-bottom) + 3.5%)); }
}

/* Confirmed collection artwork: keep the three bottom entries as icon-only
   controls while preserving their existing hit areas and accessible labels. */
#home-screen .home-actions button {
  position: relative;
  display: grid !important;
  width: 17.7% !important;
  height: 76px !important;
  min-height: 0 !important;
  place-items: center;
  grid-template-rows: 1fr !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#home-screen .home-actions button b { display: none !important; }
#home-screen .home-action-icon {
  display: block;
  width: 68px;
  height: 68px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px #241a1466) saturate(.96);
  transform-origin: 50% 78%;
  animation: home-action-breathe 2.8s ease-in-out infinite;
}
#home-screen .home-action-icon--generals { border-radius: 50%; }
#home-screen .home-actions button:focus-visible { outline: 2px solid #fff0ad; outline-offset: 4px; border-radius: 18px !important; }
@keyframes home-action-breathe {
  0%, 100% { filter: drop-shadow(0 4px 3px #241a1466) saturate(.96) brightness(.98); transform: translateY(1px) scale(.98); }
  50% { filter: drop-shadow(0 6px 7px #241a1488) saturate(1.05) brightness(1.04); transform: translateY(-1px) scale(1); }
}
@media (max-width: 390px) {
  #home-screen .home-action-icon { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-action-icon { animation: none; transform: none; }
}

/* One responsive home stage: the authored 941:1672 composition is the only
   layout baseline.  Every viewport scales that stage uniformly; desktop gets
   parchment gutters instead of a second stretched composition. */
body:has(> #home-screen:not(.is-hidden)) {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: #d8c39a;
}
#home-screen {
  width: min(100vw, calc(100svh * 941 / 1672), 543px) !important;
  height: min(100svh, calc(100vw * 1672 / 941), 965px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 941 / 1672;
  margin: 0 auto !important;
  background-size: cover;
}
#home-screen .home-actions {
  width: 82% !important;
  top: auto !important;
  bottom: max(1.5%, calc(env(safe-area-inset-bottom) + 1%)) !important;
}
#home-screen .home-resources {
  top: calc(env(safe-area-inset-top) + 3.3%) !important;
  right: 5.8% !important;
  width: 28.8% !important;
  gap: 1.75vh !important;
}

/* Short desktop windows must keep the same coordinates as the phone stage;
   only its uniform scale changes. */
@media (max-height: 720px) {
  #home-screen .home-quick-rail { top: calc(env(safe-area-inset-top) + 3.2%); gap: clamp(6px, 1.1vh, 10px); }
  #home-screen .home-resources { top: calc(env(safe-area-inset-top) + 3.3%) !important; gap: 1.75vh !important; }
  #home-screen .home-hero h1 { top: calc(env(safe-area-inset-top) + 14.8%); }
  #home-screen .home-subtitle { top: calc(env(safe-area-inset-top) + 22.2%); }
  #home-screen .home-rank { top: calc(env(safe-area-inset-top) + 25.3%); }
  #home-screen .home-tableau { top: calc(env(safe-area-inset-top) + 31.2%); height: 29.7%; }
  #home-screen .home-match-brief { top: calc(env(safe-area-inset-top) + 60.8%); }
  #home-screen .home-start-battle { top: calc(env(safe-area-inset-top) + 67.1%); }
  #home-screen .home-actions { bottom: max(1.5%, calc(env(safe-area-inset-bottom) + 1%)) !important; }
}

/* The smallest viewport keeps the same stage proportions and safe-area
   offsets; these are size caps only, not a second layout. */
@media (max-width: 390px) {
  #home-screen .home-resources { right: 5.8% !important; width: 28.8% !important; gap: 1.75vh !important; }
  #home-screen .home-actions { width: 82% !important; gap: 0; }
  #home-screen .home-action-icon { width: 68px; height: 68px; }
}

/* Home collection rail: three equal-width entry points, with the leaderboard
   kept in the left shortcut stack. Placeholder entries intentionally expose
   no weapon/item data until their rules are approved. */
#home-screen .home-quick-rail .home-leaderboard-button {
  display: grid;
  width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  aspect-ratio: 1 / .91;
  place-items: center;
  margin: 0 !important;
  padding: 2px !important;
  border: 2px solid #4b392c !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #f5df9e, #bd9050) !important;
  color: #342b24;
  box-shadow: inset 0 1px #fff0bd, 0 3px 0 #4a3429, 0 5px 8px #251b1588 !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
#home-screen .home-quick-rail #home-settings {
  display: grid;
  place-items: center;
  padding: 0 !important;
  line-height: 1;
  text-align: center;
}
#home-screen .home-settings-glyph {
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  margin: 0;
  line-height: 1;
  transform: translateY(-1px);
}
#home-screen .home-quick-rail .home-leaderboard-button b {
  padding: 0 !important;
  font: 900 clamp(10px, 2.5vw, 13px) KaiTi, STKaiti, serif !important;
}
#home-screen .home-quick-rail .home-leaderboard-button .home-rank-bars {
  display: flex;
  width: 28px;
  height: 23px;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#home-screen .home-quick-rail .home-rank-bars i {
  display: block;
  width: 5px;
  border: 1px solid #623c31;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #d9784f, #8c3c35);
  box-shadow: inset 0 1px #ffd79a;
}
#home-screen .home-quick-rail .home-rank-bars i:nth-child(1) { height: 11px; }
#home-screen .home-quick-rail .home-rank-bars i:nth-child(2) { height: 18px; }
#home-screen .home-quick-rail .home-rank-bars i:nth-child(3) { height: 14px; }
#home-screen .home-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 1.2vw, 9px);
  width: min(88%, 430px) !important;
  height: 76px !important;
  justify-content: stretch;
}
#home-screen .home-actions button {
  width: auto !important;
  min-width: 0 !important;
  height: 76px !important;
}
#home-screen .home-actions button b {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 380px) {
  #home-screen .home-actions { width: 90% !important; gap: 4px; }
  #home-screen .home-actions button { height: 70px !important; }
}

/* Entering battle waits for the first visible unit art.  This prevents a
   recruited unit from briefly appearing as an empty reserve slot. */
.battle-load { position: absolute; z-index: 70; inset: 0; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 24px; background: rgba(15, 26, 29, .78); backdrop-filter: blur(3px); color: #fff2c2; text-align: center; }.battle-load i { width: 37px; height: 37px; border: 4px solid #efd177; border-right-color: #7e3c37; border-radius: 50%; animation: battle-load-spin .75s linear infinite; box-shadow: 0 0 13px #f1cf7966; }.battle-load b { font: 900 21px KaiTi, STKaiti, serif; letter-spacing: 2px; text-shadow: 0 2px #3b2d28; }.battle-load span { color: #f5dfad; font-size: 12px; }.battle-load.is-hidden { display: none; } @keyframes battle-load-spin { to { transform: rotate(1turn); } }

/* Phase 1 UI optimization: stronger hierarchy, clearer state surfaces, and
   larger touch targets without changing combat data or character assets. */
:root {
  --ui-ink-soft: #cfe0de;
  --ui-surface: rgba(19, 48, 57, .94);
  --ui-surface-deep: rgba(12, 31, 42, .96);
  --ui-line: #9cc9b4;
  --ui-line-soft: #8ab19f66;
  --ui-shadow: 0 10px 24px rgba(4, 15, 22, .32);
}

body { background: radial-gradient(circle at 50% 0, #294957 0, #0b1824 48%, #050b12 100%); }
button:focus-visible { outline: 3px solid #fff0a8; outline-offset: 2px; }

.home-profile, .home-official-announcement, .home-review-button, .home-coins-button, .home-stamina-resource {
  box-shadow: inset 0 1px #fff4c455, 0 5px 13px #191b1680;
}
.home-profile:hover, .home-official-announcement:hover, .home-review-button:hover, .home-coins-button:hover, .home-start-battle:hover, .home-actions button:hover {
  filter: brightness(1.06) saturate(1.05);
}
.home-match-brief { box-shadow: inset 0 1px #fff4c433, 0 7px 18px #30221666; }
.home-start-battle { min-height: 56px; }
.home-start-battle:focus-visible { box-shadow: inset 0 3px #f7bf7c, inset 0 -3px #6c2d2c, 0 5px 0 #54302c, 0 10px 16px #38201877, 0 0 0 4px #fff0a899; }

#app { gap: 9px; padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 8% 0, #477181 0, transparent 25%), radial-gradient(circle at 92% 18%, #325d60 0, transparent 24%), linear-gradient(180deg, #1e4a58, #112d3b 62%, #091722); }
.app-brand { position: sticky; top: 0; z-index: 10; min-height: 46px; padding: 5px 7px; border: 1px solid var(--ui-line-soft); border-radius: 14px; background: linear-gradient(100deg, rgba(20, 62, 72, .97), rgba(17, 42, 57, .94)); box-shadow: inset 0 1px #d8f0d733, var(--ui-shadow); }
.app-brand strong { font-size: 18px; letter-spacing: .3px; }
.brand-subtitle { color: var(--ui-ink-soft); font-size: 10px; }
.return-home, .pause-button, .settings-button { min-width: 38px; min-height: 36px; height: 36px; padding: 5px 8px; border: 1px solid #a6c8b5; border-radius: 10px; background: linear-gradient(145deg, #2e5962, #1a3447); color: #eff8df; box-shadow: inset 0 1px #e2f4d933, 0 3px 0 #10232b; font-size: 12px; }
.return-home { min-width: 63px; }
.pause-button { min-width: 38px; font-weight: 900; font-size: 16px; }
.pause-button[aria-pressed='true'] { border-color: #ffdf7e; background: linear-gradient(145deg, #b8684c, #793832); color: #fff3c4; }
.settings-button { font-size: 18px; }

.hud { gap: 8px; }
.hud div { min-height: 58px; padding: 9px 8px 8px; border-color: var(--ui-line); background: linear-gradient(145deg, rgba(35, 82, 86, .98), var(--ui-surface-deep)); box-shadow: inset 0 1px #d8f0d733, var(--ui-shadow); }
.hud div:first-child { border-color: #d3b873; }
.hud div:nth-child(2) { border-color: #b8d38b; }
.hud div:last-child { border-color: #91c9df; }
.hud span { color: #c5dcdb; font-size: 11px; letter-spacing: .5px; }
.hud b { display: block; margin-top: 3px; color: #ffe28a; font-size: 18px; line-height: 1.05; text-shadow: 0 2px 0 #463528; }

.battle-panel { padding: 6px; border: 2px solid var(--ui-line); background: linear-gradient(145deg, rgba(31, 78, 82, .98), rgba(12, 35, 49, .98)); box-shadow: inset 0 1px #d8f0d733, var(--ui-shadow); }
.panel-heading { min-height: 34px; margin: 0 3px 6px; padding: 5px 7px; border-radius: 9px; background: rgba(8, 28, 39, .5); }
.panel-heading strong { color: #d5f1c5; font-size: 16px; letter-spacing: .3px; }
.panel-heading span { color: #ffdd89; font-weight: 800; }
#battle-canvas { width: calc(100% + 8px); margin-inline: -4px; border: 3px solid #a8d1b7; border-radius: 13px; background: #123744; box-shadow: inset 0 0 0 2px #254c5d, 0 5px 0 #0b2028, 0 10px 18px #07151b99; }
.help { margin: 7px 4px 2px; padding: 7px 8px; border-left: 3px solid #d6b76b; border-radius: 0 7px 7px 0; background: rgba(9, 27, 37, .38); color: #c9ded9; font-size: 11px; }

.control-panel { gap: 10px; padding: 10px; border: 2px solid #9fc7a7; background: linear-gradient(145deg, rgba(42, 67, 59, .98), rgba(22, 39, 43, .98)); box-shadow: inset 0 1px #f5e4ae44, var(--ui-shadow); }
.reserve { gap: 8px; padding: 7px; border: 2px solid #765a3e; border-radius: 15px; background: linear-gradient(145deg, #594637, #263439); box-shadow: inset 0 2px #d6b77a66, inset 0 -4px #162329, 0 4px 0 #182326; }
.reserve-unit, .reserve-empty, .reserve-ad-slot { border: 2px solid #7e6344; border-radius: 12px; box-shadow: inset 0 2px #fff9df, inset 0 -4px #a66f47, 0 3px 0 #1d2728; touch-action: none; }
.reserve-unit { cursor: grab; }
.reserve-unit:active { cursor: grabbing; }
.reserve-empty { background: linear-gradient(145deg, #f7e9bd, #c9a96f); }
.reserve-art { width: min(48px, 74%); height: min(48px, 74%); filter: drop-shadow(0 2px 2px #1b151055); }
.reserve-label { color: #49362c; font-size: 9px; text-shadow: 0 1px #fff4ce; }
.reserve-ad-slot { border-color: #c69e50; box-shadow: inset 0 2px #fff4b777, inset 0 -4px #8a552e, 0 3px 0 #33271d; }
.reserve-ad-badge { right: 3px; bottom: 3px; }
.primary-action, .recruit-action { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 12px; font-size: 16px; }
.primary-action { display: inline-flex; }
.recruit-action { border-color: #7c3a32; }
.speed-controls { min-height: 44px; padding: 3px 0 0 3px; }
.speed-controls span { color: #d4e4d2; font-weight: 800; }
.speed-button { min-width: 44px; min-height: 42px; border-radius: 10px; }
.speed-button.is-active { box-shadow: inset 0 1px #fff7bd, 0 3px 0 #8b5d2e; }
.status { min-height: 44px; padding: 10px 12px; border: 1px solid #9fc7a7; background: linear-gradient(100deg, rgba(24, 64, 70, .96), rgba(16, 39, 52, .96)); color: #e0eddb; box-shadow: inset 0 1px #d8f0d733, 0 6px 16px #07151b55; }

@media (max-width: 800px) {
  #app { gap: 7px; padding-inline: 7px; }
  .app-brand { min-height: 43px; }
  .app-brand strong { font-size: 16px; }
  .brand-subtitle { display: none; }
  .return-home { min-width: 56px; }
  .hud div { min-height: 52px; padding: 7px 5px; }
  .hud b { font-size: 16px; }
  .battle-panel { padding: 4px; }
  .panel-heading { min-height: 31px; margin-bottom: 4px; }
  .panel-heading strong { font-size: 14px; }
  .control-panel { gap: 7px; padding: 7px; }
  .reserve { gap: 5px; padding: 5px; }
  .reserve-art { width: min(46px, 70%); height: min(46px, 70%); }
  .primary-action { display: inline-flex; }
  .recruit-action, .primary-action { min-height: 48px; }
  .speed-button { min-width: 39px; min-height: 40px; }
  .status { min-height: 40px; padding: 8px; }
}

@media (max-width: 380px) {
  #app { padding-inline: 5px; }
  .app-brand { gap: 5px; padding-inline: 5px; }
  .app-brand strong { font-size: 14px; }
  .return-home { min-width: 50px; font-size: 10px; }
  .pause-button, .settings-button { min-width: 34px; width: 34px; padding-inline: 3px; }
  .hud { gap: 4px; }
  .hud div { min-height: 49px; padding-inline: 3px; }
  .hud span { font-size: 10px; }
  .hud b { font-size: 14px; }
  .panel-heading span { font-size: 10px; }
  .reserve { gap: 4px; padding: 4px; }
  .reserve-label { font-size: 8px; }
  .speed-controls { gap: 3px; }
  .speed-button { min-width: 33px; padding-inline: 4px; }
}

/* Phase 1 final direction: minimal, board-first battle presentation.  The
   canvas remains the existing APK-derived board; only its surrounding chrome
   is simplified for portrait phone viewports. */
#app {
  width: min(100%, 540px);
  gap: 5px;
  padding: max(7px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  color: #3c3028;
  background: linear-gradient(180deg, #e7d9bd 0, #d7c6a8 55%, #c8b28f 100%);
}
#app .app-brand {
  position: relative;
  min-height: 38px;
  padding: 2px 3px 4px;
  border: 0;
  border-bottom: 1px solid #806b5555;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#app .brand-seal { width: 28px; height: 28px; border-color: #8a5c43; background: #a4543f; box-shadow: 0 2px 0 #6d4938; }
#app .app-brand strong { color: #49372c; font-size: 16px; text-shadow: 0 1px #fff0c4; }
#app .brand-subtitle { display: none; }
#app .return-home, #app .pause-button, #app .settings-button {
  min-width: 34px;
  min-height: 32px;
  height: 32px;
  padding: 4px 7px;
  border: 1px solid #80664f;
  border-radius: 8px;
  background: #f0e4c6cc;
  color: #584335;
  box-shadow: inset 0 1px #fff8df, 0 2px 0 #947354;
}
#app .return-home { min-width: 58px; }
#app .pause-button { font-size: 14px; }
#app .pause-button[aria-pressed='true'] { border-color: #9b4938; background: #d56f54; color: #fff5d5; }
#app .settings-button { font-size: 16px; }

#app .hud { gap: 5px; padding: 0 2px; }
#app .hud div {
  min-height: 40px;
  padding: 4px 6px 3px;
  border: 1px solid #9a8367;
  border-radius: 8px;
  background: #f0e5cbbf;
  box-shadow: inset 0 1px #fff8df, 0 2px 0 #9a806255;
}
#app .hud div:first-child, #app .hud div:nth-child(2), #app .hud div:last-child { border-color: #9a8367; }
#app .hud span { color: #806a55; font-size: 9px; }
#app .hud b { margin-top: 1px; color: #4b3629; font-size: 15px; text-shadow: 0 1px #fff3c8; }

#app .battle-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#app .panel-heading {
  min-height: 28px;
  margin: 0 0 4px;
  padding: 4px 7px;
  border: 1px solid #9a806155;
  border-radius: 7px;
  background: #f0e5cba8;
}
#app .panel-heading strong { color: #5a3d2d; font-size: 13px; }
#app .panel-heading span { color: #86513e; font-size: 10px; }
#app #battle-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 2px solid #55483b;
  border-radius: 8px;
  background: #cdbd9d;
  box-shadow: inset 0 0 0 2px #eadcb9, 0 4px 0 #81694f, 0 7px 14px #604b3670;
  cursor: crosshair;
}
#app .help { display: none; }

#app .control-panel {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#app .reserve {
  gap: 5px;
  padding: 5px;
  border: 1px solid #80664f;
  border-radius: 10px;
  background: #715a45;
  box-shadow: inset 0 1px #ebd39a99, 0 3px 0 #674d3d;
}
#app .reserve-unit, #app .reserve-empty, #app .reserve-ad-slot {
  border: 1px solid #846b4d;
  border-radius: 8px;
  box-shadow: inset 0 1px #fff8df, inset 0 -3px #a6794e, 0 2px 0 #493b31;
}
#app .reserve-unit { background: linear-gradient(145deg, #fff5cf, #d9bc7d); }
#app .reserve-empty { background: linear-gradient(145deg, #f1e3bd, #c8aa71); }
#app .reserve-art { width: min(44px, 72%); height: min(44px, 72%); }
#app .reserve-label { color: #55402f; font-size: 8px; }
#app .reserve-ad-slot { border-color: #a27b3f; background: linear-gradient(145deg, #f1d26a, #b77932); }
#app .primary-action, #app .recruit-action {
  min-height: 46px;
  border-radius: 9px;
  font-size: 15px;
  box-shadow: inset 0 1px #fff4c677, 0 3px 0 #80543b;
}
#app .primary-action { display: inline-flex; background: #d97855; color: #fff4d8; }
#app .recruit-action { background: #c75d47; color: #fff4d8; }
#app .speed-controls { min-height: 40px; padding: 0; }
#app .speed-controls span { color: #715b49; font-size: 10px; }
#app .speed-button { min-width: 38px; min-height: 38px; border-color: #80664f; background: #f0e4c6; color: #574534; box-shadow: 0 2px 0 #967654; }
#app .speed-button.is-active { border-color: #9b6937; background: #e6b65a; color: #493226; }
#app .status {
  min-height: 28px;
  padding: 5px 7px;
  border: 0;
  border-top: 1px solid #9a806155;
  border-radius: 0;
  background: transparent;
  color: #695542;
  box-shadow: none;
  font-size: 10px;
}

@media (max-width: 800px) {
  #app { width: min(100%, 540px); gap: 4px; padding-inline: 5px; }
  #app .app-brand { min-height: 36px; }
  #app .app-brand strong { font-size: 15px; }
  #app .hud div { min-height: 38px; padding-inline: 4px; }
  #app .hud b { font-size: 14px; }
  #app .panel-heading { min-height: 26px; margin-bottom: 3px; }
  #app .control-panel { gap: 5px; }
  #app .reserve { gap: 4px; padding: 4px; }
  #app .reserve-art { width: min(42px, 70%); height: min(42px, 70%); }
  #app .primary-action, #app .recruit-action { min-height: 44px; }
  #app .speed-button { min-width: 36px; min-height: 36px; }
}

@media (max-width: 380px) {
  #app .app-brand strong { font-size: 14px; }
  #app .return-home { min-width: 50px; font-size: 10px; }
  #app .pause-button, #app .settings-button { min-width: 31px; width: 31px; padding-inline: 2px; }
  #app .hud { gap: 3px; }
  #app .hud div { min-height: 35px; padding-block: 3px; }
  #app .hud span { font-size: 8px; }
  #app .hud b { font-size: 13px; }
  #app .reserve { gap: 3px; padding: 3px; }
  #app .reserve-label { font-size: 7px; }
  #app .speed-button { min-width: 32px; padding-inline: 3px; }
}

/* Final battle chrome pass: reserve the top edge for status and pause only.
   The existing canvas and its board coordinates remain unchanged. */
#app { gap: 3px; padding-top: max(4px, env(safe-area-inset-top)); }
#app .app-brand {
  min-height: 27px;
  height: 27px;
  padding: 0 2px;
  border-bottom: 1px solid #806b5540;
  justify-content: flex-end;
}
#app .battle-mode-label {
  margin-right: auto;
  color: #806a55;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
#app .pause-button {
  min-width: 34px;
  min-height: 36px;
  height: 36px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 13px;
}
#app button,
#pause-panel button,
#result button,
#settings-panel button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#app > .hud:not(.ai-hud) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 0 2px;
}
#app > .hud:not(.ai-hud) div {
  min-height: 34px;
  padding: 3px 6px 2px;
  border-radius: 7px;
}
#app > .hud:not(.ai-hud) span { font-size: 8px; }
#app > .hud:not(.ai-hud) b { margin-top: 0; font-size: 13px; }
#app .battle-panel { margin-top: 0; }
#app .panel-heading {
  min-height: 22px;
  margin: 0 3px 3px;
  padding: 2px 6px;
  border-radius: 6px;
}
#app .panel-heading strong { font-size: 11px; }
#app .panel-heading span { font-size: 9px; }
#app .panel-battle-state { display: flex; align-items: center; gap: 5px; }
#app .panel-battle-state b { color: #86513e; font-size: 10px; }
#app .battle-health-data { display: none; }
#app #battle-canvas { border-width: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1px #eadcb9, 0 3px 0 #81694f, 0 5px 9px #604b364d; }
#app .control-panel { gap: 4px; }
#app .recruit-row {
  grid-area: recruit;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
#app .recruit-economy {
  display: grid;
  min-width: 42px;
  min-height: 40px;
  place-items: center;
  padding: 3px 5px;
  border: 1px solid #9a8061;
  border-radius: 8px;
  background: #f0e4c6;
  color: #6f5540;
  box-shadow: inset 0 1px #fff8df, 0 2px 0 #967654;
}
#app .recruit-economy span { font-size: 8px; line-height: 1; }
#app .recruit-economy b { color: #4b3629; font-size: 14px; line-height: 1; }
#app .recruit-action { min-height: 40px; border-radius: 8px; font-size: 14px; }
#app .speed-controls { min-height: 40px; }
#app .speed-button { min-width: 34px; min-height: 34px; padding-inline: 4px; }

#pause-panel {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #172630b8;
  backdrop-filter: blur(3px);
}
#pause-panel.is-hidden { display: none; }
#pause-panel .pause-card {
  width: min(100%, 320px);
  padding: 18px;
  border: 1px solid #a27a52;
  border-radius: 14px;
  background: linear-gradient(155deg, #f6eaca, #d8c09a);
  color: #49372c;
  box-shadow: 0 14px 35px #1d211e88, inset 0 1px #fff9df;
}
#pause-panel .pause-heading { display: flex; align-items: center; gap: 9px; }
#pause-panel .pause-emblem {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #9b4938;
  border-radius: 9px;
  background: #c9674e;
  color: #fff4d8;
  font-weight: 900;
}
#pause-panel .pause-heading b, #pause-panel .pause-heading small { display: block; }
#pause-panel .pause-heading b { font-size: 16px; }
#pause-panel .pause-heading small { margin-top: 2px; color: #80664f; font-size: 10px; }
#pause-panel .pause-card > p { margin: 14px 0; color: #6d5643; font-size: 11px; line-height: 1.5; }
#pause-panel .pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#pause-panel .pause-actions button { min-height: 40px; padding: 6px 8px; border-radius: 8px; font-size: 12px; }
#pause-panel .pause-continue { grid-column: 1 / -1; border: 1px solid #8f4535; background: #c65c46; color: #fff4d8; }
#pause-panel .return-home, #pause-panel .settings-button { min-width: 0; border: 1px solid #9a8061; background: #f0e4c6; color: #584335; box-shadow: inset 0 1px #fff8df, 0 2px 0 #967654; }

@media (max-width: 380px) {
  #app .recruit-economy { min-width: 38px; padding-inline: 3px; }
  #app .recruit-economy b { font-size: 13px; }
  #app .recruit-action { font-size: 13px; }
  #app .speed-button { min-width: 31px; }
  #pause-panel { padding: 14px; }
}

/* Final compact shelf pass: coins sit beside the reserve shelf, while the
   recruit action receives its own centered row below it. */
#app .panel-heading {
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: 1px;
}
#app .panel-heading strong { line-height: 1.1; }
#app .panel-battle-state { justify-content: space-between; width: 100%; }
#app .control-panel {
  grid-template-columns: 1fr;
  grid-template-areas: 'reserve-row' 'recruit' 'speed' 'start';
  gap: 5px;
  padding: 0;
}
#app .reserve-row {
  grid-area: reserve-row;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}
#app .recruit-economy {
  display: flex;
  min-width: 48px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6f5540;
  box-shadow: none;
}
#app .recruit-economy .resource-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
#app .recruit-economy span { display: grid; gap: 1px; line-height: 1; }
#app .recruit-economy span b { color: #4b3629; font-size: 14px; }
#app .recruit-economy span small { color: #80664f; font-size: 8px; }
#app .reserve-row .reserve { min-width: 0; }
#app .recruit-action {
  grid-area: recruit;
  justify-self: center;
  width: min(62%, 220px);
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
}
#app .speed-controls {
  grid-area: speed;
  justify-self: center;
  min-height: 35px;
}
#app .primary-action {
  grid-area: start;
  justify-self: center;
  width: min(62%, 220px);
  min-height: 38px;
  border-radius: 8px;
  font-size: 13px;
}
#pause-panel .pause-actions { grid-template-columns: 1fr 1fr; max-width: 280px; margin: 0 auto; }
#pause-panel .pause-continue { grid-column: auto; }
#pause-panel .settings-button { grid-column: 1 / -1; justify-self: center; width: min(54%, 150px); min-height: 32px; }

/* Pause controls: keep the two battle choices equal and give the modal a
   restrained Three-Kingdoms ink/seal treatment without changing behavior. */
#pause-panel .pause-card {
  border-width: 2px;
  border-color: #8b5a3c;
}
#pause-panel .pause-heading b,
#pause-panel .pause-actions button {
  font-family: KaiTi, STKaiti, "Noto Serif SC", "Microsoft YaHei", serif;
  font-weight: 800;
  letter-spacing: .5px;
}
#pause-panel .pause-heading b { color: #5a3328; }
#pause-panel .pause-actions {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#pause-panel .pause-actions button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-width: 2px;
  border-radius: 10px;
  box-shadow: inset 0 1px #fff8df, 0 3px 0 #967654;
}
#pause-panel .pause-continue {
  border-color: #8d3f30;
  background: linear-gradient(180deg, #d46b51, #b9503e);
  text-shadow: 0 1px #783528;
}
#pause-panel .return-home {
  border-color: #9a8061;
  background: linear-gradient(180deg, #f7ecd0, #e6d2ab);
}
#pause-panel .settings-button {
  width: min(54%, 150px);
  border-color: #8b7357;
  background: linear-gradient(180deg, #f7ecd0, #e3cda3);
}

@media (max-width: 380px) {
  #app .recruit-economy { min-width: 43px; }
  #app .recruit-economy .resource-icon { width: 25px; height: 25px; flex-basis: 25px; }
  #app .recruit-economy span b { font-size: 13px; }
  #app .recruit-action, #app .primary-action { width: min(68%, 210px); }
  #pause-panel .pause-actions { gap: 6px; }
}

/* Bottom alignment pass: center the staging shelf and keep recruit/speed on
   one compact, right-aligned action row. */
#app .control-panel {
  grid-template-columns: 1fr;
  grid-template-areas: 'reserve-row' 'action-row' 'start';
  gap: 4px;
}
#app .reserve-row {
  grid-template-columns: minmax(52px, 1fr) minmax(0, 430px) minmax(52px, 1fr);
  gap: 0;
}
#app .recruit-economy {
  grid-column: 1;
  justify-self: start;
}
#app .reserve-row .reserve {
  grid-column: 2;
  width: 100%;
}
#app .action-row {
  grid-area: action-row;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
#app .action-row .recruit-action {
  grid-area: auto;
  width: 150px;
  min-height: 38px;
  font-size: 14px;
  position: relative;
  z-index: 4;
  touch-action: manipulation;
  pointer-events: auto;
}
#app .action-row .speed-controls {
  grid-area: auto;
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 3px;
  padding: 2px 0 2px 4px;
  border: 0;
  background: transparent;
}
#app .action-row .speed-controls span {
  display: inline;
  margin-right: 1px;
  color: #715b49;
  font-size: 9px;
}
#app .action-row .speed-button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  font-size: 11px;
}
#app .primary-action {
  width: 150px;
  min-height: 36px;
  font-size: 13px;
}

@media (max-width: 380px) {
  #app .reserve-row { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #app .recruit-economy { min-width: 44px; }
  #app .recruit-economy .resource-icon { width: 24px; height: 24px; flex-basis: 24px; }
  #app .recruit-economy span small { display: none; }
  #app .action-row { gap: 4px; }
  #app .action-row .recruit-action { width: 124px; font-size: 13px; }
  #app .action-row .speed-controls { gap: 2px; padding-left: 0; }
  #app .action-row .speed-controls span { display: none; }
  #app .action-row .speed-button { min-width: 30px; min-height: 32px; padding-inline: 2px; }
  #app .primary-action { width: 124px; }
}

/* Top hierarchy pass: the current battlefield name owns the center of the
   top row, with pause pinned to the right; wave and combat state sit below. */
#app .app-brand {
  position: relative;
  min-height: 45px;
  height: 45px;
  justify-content: center;
  padding: 2px 44px 3px;
}
#app .battle-title {
  display: block;
  max-width: calc(100% - 8px);
  overflow: hidden;
  color: #8c3f32;
  font: 900 22px/1.1 KaiTi, STKaiti, serif;
  letter-spacing: 2px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px #fff0c4;
  white-space: nowrap;
}
#app .app-brand .pause-button {
  position: absolute;
  top: 6px;
  right: 2px;
  min-width: 34px;
  min-height: 32px;
  height: 32px;
  margin: 0;
}
#app .battle-panel > .panel-heading {
  position: relative;
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  margin: 0 3px 3px;
  padding: 2px 5px;
}
#app .panel-battle-state {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
#app .panel-battle-state b {
  color: #49372c;
  font: 900 12px/1.1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .3px;
}
#app .panel-battle-state span {
  position: absolute;
  right: 5px;
  max-width: 40%;
  overflow: hidden;
  color: #80664f;
  font: 500 9px/1.1 system-ui, "Microsoft YaHei", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .battle-health-data { display: none; }

@media (max-width: 380px) {
  #app .app-brand { min-height: 42px; height: 42px; padding-inline: 38px; }
  #app .battle-title { font-size: 19px; letter-spacing: 1px; }
  #app .app-brand .pause-button { top: 5px; right: 1px; min-width: 31px; width: 31px; min-height: 30px; height: 30px; }
  #app .panel-battle-state b { font-size: 11px; }
  #app .panel-battle-state span { right: 3px; max-width: 42%; font-size: 8px; }
}

/* Battle entry is launched from the lobby; keep the recruit action centered
   while the speed selector stays on the same row at the right edge. */
#app .action-row {
  position: relative;
  justify-content: center;
}
#app .action-row .recruit-action { margin-inline: auto; }
#app .action-row .speed-controls {
  position: absolute;
  right: 0;
}
#app #start { display: none !important; }

@media (max-width: 380px) {
  #app .action-row .speed-controls { right: 0; }
}

/* The reference board uses a deep teal field so cream cells, jade terrain and
   the warm marching road remain legible without a pale canvas wash. */
#home-screen {
  /* The image lives on a dedicated layer below the UI. The solid parchment
     base prevents a body-colour seam if a browser reports a transient image
     decode, while the layer itself always covers the whole home viewport. */
  background: #d8c39a;
  width: min(100%, 720px);
}
body:has(> #home-screen:not(.is-hidden)) {
  /* Home-only outer gutters stay warm paper; the battle shell keeps its own
     dark field because this selector stops applying once home is hidden. */
  background: #d8c39a;
}
#home-screen::before {
  /* Extend the layer above the viewport by 7%: this shifts the complete
     authored composition upward without changing its aspect ratio. */
  z-index: -2;
  top: -7%;
  right: 4%;
  bottom: 0;
  left: 4%;
  width: auto;
  height: auto;
  filter: none;
  border-radius: 0;
  /* Restrained torn-paper silhouette: deliberately uneven on both sides and
     at the top/bottom, while the 2%-5% edge notches stay outside the three
     authored focal areas. */
  clip-path: polygon(
    4% 0%, 18% 0.8%, 31% 0%, 45% 1%, 59% 0%, 74% 0.9%, 89% 0%, 98% 1.5%,
    96.5% 10%, 99% 19%, 96% 28%, 98.5% 37%, 95.5% 46%, 99% 56%, 96% 65%,
    98.5% 75%, 95% 84%, 99% 93%, 96% 100%, 82% 98.8%, 67% 100%, 52% 98.9%,
    38% 100%, 23% 98.7%, 9% 100%, 3% 97%, 5.5% 88%, 2% 79%, 5% 69%,
    1.5% 59%, 4.5% 49%, 2% 39%, 5% 29%, 2.5% 19%, 5% 10%
  );
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(22, 22, 20, .3) 0%, rgba(50, 35, 22, .03) 37%, rgba(30, 26, 22, .12) 67%, rgba(12, 18, 21, .71) 100%),
    url('./assets/home-lobby-background-no-flags.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  /* Contain the full authored image by height. This is the only mode that
     guarantees both castles survive on short desktop preview panels while
     preserving the source aspect ratio; parchment colour fills any side
     gutters instead of exposing body background. */
  background-size: auto 100%;
}
#home-screen .home-start-battle {
  /* Keep the action in the clear ground below the lower red castle. */
  top: calc(env(safe-area-inset-top) + 78%);
}
#home-screen .home-match-brief {
  /* The authored lower castle is the visual focus; this duplicate status
     card only obscures its roof and is intentionally deferred to battle UI. */
  display: none !important;
}
#home-screen .home-actions {
  /* Side entries stay below the castle without covering its gate. */
  bottom: max(1.5%, calc(env(safe-area-inset-bottom) + 1%));
}
#app #battle-canvas {
  background: #164653;
  box-shadow: inset 0 0 0 1px #245f69, 0 3px 0 #0a2f39, 0 6px 12px #061b2299;
}
#app #battle-canvas.is-dragging-board { cursor: grabbing; }

/* Phone battle board pass: the canvas keeps square logical tiles while the
   outer chrome stays compact enough for a 375px first viewport. Reserve art
   is intentionally 85–90% of the rendered battlefield tile. */
#app {
  overflow-x: hidden;
}
#app .reserve {
  width: min(100%, 430px);
  justify-self: center;
}
#app .reserve-unit,
#app .reserve-empty,
#app .reserve-ad-slot {
  min-height: clamp(42px, 12vw, 52px);
}
#app .reserve-art {
  width: clamp(32px, 9.4vw, 38px);
  height: clamp(32px, 9.4vw, 38px);
}
#app .action-row .recruit-action,
#app .action-row .speed-button {
  min-height: 40px;
}

@media (max-width: 390px) {
  #app .panel-heading { padding-inline: 4px; }
  #app .reserve { gap: 3px; padding: 3px; }
  #app .reserve-label { font-size: 7px; }
  #app .action-row { gap: 3px; }
}

/* Three equal visual breathing spaces: the centre gap lives inside the
   Canvas, while the top and bottom gaps use the same Canvas-scaled value.
   The 2px subtraction compensates for the frame's top inset; the shell-gap
   subtraction compensates for #app's existing flex gap below the Canvas. */
#app {
  --battle-whitespace: 20px;
  --battle-top-whitespace: 20px;
  --battle-frame-top-inset: 2px;
  --battle-shell-gap: 3px;
  gap: var(--battle-shell-gap);
}
#app .battle-panel > .panel-heading {
  margin-bottom: max(0px, calc(var(--battle-top-whitespace) - var(--battle-frame-top-inset)));
}
#app > .control-panel {
  /* Canvas keeps a 2px frame-safe bottom edge; this 7px pullback preserves
     the pre-adjustment A+B+C total after A and B are rebalanced. */
  margin-top: max(0px, calc(var(--battle-whitespace) - var(--battle-shell-gap) - 7px));
}

@media (max-width: 800px) {
  #app { --battle-shell-gap: 4px; }
}

/* Battlefield parchment presentation pass. These rules only skin the
   existing canvas/chrome; the canvas dimensions and hit-test coordinates stay
   governed by the TypeScript layout constants. */
html, body { background: #cdb58e; color: #4a382c; }
#app {
  background:
    radial-gradient(circle at 12% 8%, #f4e8c966 0, transparent 24%),
    radial-gradient(circle at 88% 82%, #a8845d22 0, transparent 27%),
    linear-gradient(180deg, #e3d0aa, #d0b88d 72%, #bea078);
  color: #4a382c;
}
#app .app-brand {
  border: 1px solid #8d7053;
  background: linear-gradient(180deg, #f0dfbcf2, #d6bd90e8);
  box-shadow: inset 0 1px #fff6d7, 0 3px 0 #92735466, 0 6px 14px #6b4d3522;
  min-height: 45px;
  height: 45px;
}
#app .battle-title { color: #8b3f32; text-shadow: 0 1px #fff0c4; }
#app .battle-top-actions { position: absolute; top: 7px; right: 8px; display: grid; gap: 3px; width: 36px; }
#app .battle-top-actions .pause-button,
#app .battle-top-actions .speed-cycle-button {
  position: static !important;
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid #765941;
  border-radius: 8px;
  background: linear-gradient(145deg, #f1dfb9, #b89468);
  box-shadow: inset 0 1px #fff6d9, 0 2px 0 #76563e;
  color: #513b2d;
}
#app .battle-top-actions .speed-cycle-button { min-height: 29px; height: 29px; font-size: 11px; }
#app .battle-top-actions .speed-cycle-button.is-active { border-color: #718263; background: #d6d0a4; color: #43513f; }
#app .battle-panel,
#app .control-panel,
#app .status {
  border-color: #967656;
  background: linear-gradient(145deg, #ead9b7f5, #cfb58adf);
  box-shadow: inset 0 1px #fff6d4, 0 5px 12px #6b4d3526;
}
#app .battle-panel { border-width: 1px; }
#app .panel-heading { background: #f0dfbccc; box-shadow: inset 0 1px #fff5d3, 0 2px 0 #9c7c5a55; }
#app .panel-battle-state b { color: #6b392e; }
#app .panel-battle-state span { color: #735943; }
#app .panel-battle-state { justify-content: flex-start; }
#app .panel-battle-state { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; gap: 5px; }
#app .panel-battle-state span { position: static; grid-column: 1; grid-row: 1; justify-self: start; order: initial; max-width: 100%; margin: 0; overflow: hidden; }
#app .panel-battle-state b { grid-column: 2; grid-row: 1; justify-self: center; }
#app .panel-battle-state .speed-cycle-button { position: static; grid-column: 3; grid-row: 1; justify-self: end; width: 36px; min-width: 36px; min-height: 32px; height: 32px; padding: 1px 2px 2px; display: grid; grid-template-rows: 16px 10px; align-content: center; justify-items: center; gap: 0; border: 1px solid #718263; border-radius: 8px; background: #d6d0a4; box-shadow: inset 0 1px #f5f0cc, 0 2px 0 #7e7254; color: #43513f; }
#app .panel-battle-state .speed-symbol { position: static; grid-column: auto; grid-row: auto; justify-self: center; max-width: none; margin: 0; overflow: visible; display: block; height: 16px; color: #4e5f49; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 900; line-height: 14px; letter-spacing: -4px; transform: translateX(-1px) scaleX(1.2); }
#app .panel-battle-state .speed-label { position: static; grid-column: auto; grid-row: auto; justify-self: center; max-width: none; margin: 0; overflow: visible; display: block; height: 10px; color: #43513f; font-size: 10px; font-weight: 900; line-height: 10px; }
#app #battle-canvas { background: #d8c39a; border-color: #8d7053; box-shadow: inset 0 0 0 1px #f5e6c6, 0 3px 0 #85654766, 0 6px 12px #6b4d3522; }
#app .help { border-left-color: #a47d51; background: #f0dfb899; color: #705742; }
#app .control-panel { padding: 8px; }
#app .reserve { background: linear-gradient(145deg, #a78661, #765a43); border-color: #76563e; box-shadow: inset 0 2px #f1d9a866, inset 0 -3px #604534, 0 3px 0 #6f503a66; }
#app .reserve-unit, #app .reserve-empty, #app .reserve-ad-slot { border-color: #8a6c4e; box-shadow: inset 0 2px #fff8df, inset 0 -3px #ad855d, 0 2px 0 #6f503a66; }
#app .reserve-unit, #app .reserve-empty { background: linear-gradient(145deg, #fff5d6, #dec798); }
#app .reserve-ad-slot { background: linear-gradient(145deg, #efd17a, #b8803d); }
#app .action-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
#app .action-row .recruit-action, #app .action-row .auto-merge-button { width: 100%; min-height: 44px; margin: 0; border-radius: 10px; }
#app .action-row .recruit-action { border-color: #713b31; background: linear-gradient(180deg, #d47759, #a64c3d); box-shadow: inset 0 2px #f7b38c, 0 3px 0 #71382f; color: #fff2d4; }
#app .action-row .auto-merge-button { border: 1px solid #617b6f; background: linear-gradient(180deg, #d9e0c2, #9dae91); box-shadow: inset 0 2px #f5f5d8, 0 3px 0 #5f705f; color: #3f4c3f; font-size: 14px; }
#app .action-row .auto-merge-button[aria-pressed='true'] { border-color: #4d6c58; background: linear-gradient(180deg, #a9c58d, #6e9b70); color: #fff8dd; box-shadow: inset 0 2px #dfefb8, 0 3px 0 #4d6c58; }
#app .status { color: #6f5540; }

@media (max-width: 390px) {
  #app .app-brand { min-height: 42px; height: 42px; }
  #app .battle-top-actions { top: 6px; right: 6px; width: 33px; }
  #app .battle-top-actions .pause-button, #app .battle-top-actions .speed-cycle-button { width: 33px; min-width: 33px; }
  #app .action-row { gap: 6px; }
  #app .action-row .recruit-action, #app .action-row .auto-merge-button { min-height: 41px; font-size: 13px; }
  #app .panel-battle-state { gap: 3px; }
  #app .battle-top-actions .pause-button { min-height: 30px; height: 30px; }
  #app .panel-battle-state .speed-cycle-button { width: 33px; min-width: 33px; min-height: 30px; height: 30px; }
}

#app .action-row .auto-merge-button.is-unavailable {
  border-color: #ad9d83;
  background: linear-gradient(180deg, #e0d6bd, #b9aa8f);
  box-shadow: inset 0 2px #f4ecd5, 0 3px 0 #8e7e67;
  color: #7f725f;
  filter: saturate(.55);
}

#app .action-row .active-item-action {
  position: absolute;
  left: calc(50% - 127px);
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 2px;
  place-content: center;
  border: 2px solid #a97936;
  border-radius: 11px;
  background: linear-gradient(145deg, #f2d57e, #bd813d);
  box-shadow: inset 0 1px #fff2b8, 0 3px 0 #805a32;
  color: #fff7d2;
  font: 900 10px/1.05 KaiTi, STKaiti, serif;
}
#app .action-row .active-item-action:disabled {
  border-color: #9a876d;
  background: linear-gradient(145deg, #d3c5a6, #a99a7c);
  box-shadow: inset 0 1px #f0e4c6, 0 3px 0 #796a56;
  color: #f7edcf;
  opacity: .82;
}
#app .action-row .active-item-action--beans {
  left: calc(50% + 127px);
}

/* The recruit action keeps the page centre; auto-merge is a compact seal
   attached to its right instead of a second full-width action. */
#app .action-row {
  position: relative;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
}
#app .action-row .recruit-action {
  width: 150px;
  min-width: 150px;
  flex: 0 0 150px;
}
#app .action-row .auto-merge-button {
  position: absolute;
  left: calc(50% + 83px);
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 2px;
  place-content: center;
  gap: 0;
  border: 2px solid #66816f;
  border-radius: 11px;
  background: linear-gradient(145deg, #d7dfc1, #9eaf92);
  box-shadow: inset 0 1px #f5f5d8, 0 3px 0 #617260;
  color: #3d5547;
  font: 900 11px/1.05 KaiTi, STKaiti, serif;
  letter-spacing: 0;
}
#app .action-row .auto-merge-button span { display: block; }
#app .action-row .auto-merge-button.is-unavailable {
  border-color: #ad9d83;
  background: linear-gradient(145deg, #e0d6bd, #b9aa8f);
  box-shadow: inset 0 1px #f4ecd5, 0 3px 0 #8e7e67;
  color: #7f725f;
  filter: saturate(.55);
}

@media (max-width: 390px) {
  #app .action-row .recruit-action { width: 138px; min-width: 138px; flex-basis: 138px; }
  #app .action-row .auto-merge-button { left: calc(50% + 76px); width: 40px; min-width: 40px; height: 40px; min-height: 40px; font-size: 10px; }
  #app .action-row .active-item-action { left: calc(50% - 116px); width: 40px; min-width: 40px; height: 40px; min-height: 40px; font-size: 9px; }
  #app .action-row .active-item-action--beans { left: calc(50% + 116px); }
}

/* Homepage resource polish: retain the existing slots and geometry while
   replacing text placeholders with restrained Three-Kingdoms line icons. */
#home-screen .home-resources > #home-coins-button,
#home-screen .home-resources > .home-stamina-resource {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  min-height: 43px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-width: 2px;
  border-radius: 22px;
}
#home-screen .home-resources .resource-icon.coin-icon {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  overflow: visible;
  border: 2px solid #9a6a35 !important;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f3ce78 0 14%, #c88b3b 33%, #835329 72%, #5e3926 100%) !important;
  box-shadow: inset 1px 1px 0 #f8e1a0, inset -2px -2px 0 #6a4028, 0 1px 0 #34251e !important;
  color: transparent !important;
  font-size: 0 !important;
}
#home-screen .home-resources .resource-icon.coin-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  content: '';
  box-sizing: border-box;
  border: 2px solid #6d4329;
  border-radius: 2px;
  background: #d2a050;
  box-shadow: inset 1px 1px 0 #e6bd68;
  transform: translate(-50%, -50%);
}
#home-screen .home-resources .resource-icon.coin-icon::after {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 10px;
  height: 35px;
  content: '';
  border-right: 1px solid #c69b5c;
  border-radius: 50%;
  opacity: .55;
  transform: rotate(22deg);
}
#home-screen .home-resources .home-stamina-resource .bun-icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #d1b45b !important;
  border-radius: 8px 8px 10px 10px;
  background: linear-gradient(145deg, #f8dc83, #c28332 70%, #80502c) !important;
  box-shadow: inset 1px 1px 0 #fff0b2, inset -2px -2px 0 #704329, 0 1px 0 #30251c !important;
  color: #fff2ad !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px !important;
  font-weight: 900;
  line-height: 18px;
  text-shadow: 1px 1px 0 #8b5626, 0 0 4px #fff0a6;
  transform: rotate(-5deg) scale(.78);
}
#home-screen .home-resources .home-stamina-resource > span {
  min-width: 0;
  white-space: nowrap;
}
#home-screen .home-resources .home-stamina-resource {
  gap: 5px;
  padding-inline: 7px;
}
#home-screen .home-resources .home-stamina-resource > span b {
  font-size: clamp(12px, 3.4vw, 18px) !important;
  letter-spacing: -.2px;
}
#home-screen .home-resources .home-stamina-resource > span small {
  font-size: clamp(7px, 1.9vw, 10px) !important;
}
#home-screen .home-resources #home-stamina-add {
  flex: 0 0 27px;
}

/* Feather the authored background into the parchment surround in several
   quiet stages. A radial veil avoids a hard rectangle without changing the
   image's scale, composition, or gate coordinates. */
#home-screen::before {
  clip-path: none;
  left: 4%;
  right: 4%;
  background-color: #d8c39a;
  background-image:
    linear-gradient(90deg, rgba(216, 195, 154, .92) 0%, rgba(216, 195, 154, .3) 2.2%, transparent 4.2%, transparent 95.8%, rgba(216, 195, 154, .3) 97.8%, rgba(216, 195, 154, .92) 100%),
    linear-gradient(180deg, rgba(22, 22, 20, .22) 0%, rgba(50, 35, 22, .025) 37%, rgba(30, 26, 22, .1) 67%, rgba(12, 18, 21, .68) 100%),
    url('./assets/home-lobby-background-no-flags.png');
  background-blend-mode: normal, multiply, normal;
  filter: saturate(.94) contrast(.98);
}

@media (max-width: 390px) {
  #home-screen .home-resources {
    right: 4.5% !important;
    width: 31% !important;
    gap: 1vh !important;
  }
  #home-screen .home-resources .resource-icon.coin-icon {
    flex-basis: 23px;
    width: 23px;
    height: 23px;
  }
  #home-screen .home-resources .home-stamina-resource .bun-icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 15px !important; line-height: 16px; }
  #home-screen .home-resources .resource-icon.coin-icon::before {
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
  }
  #home-screen .home-resources .home-stamina-resource > span b { font-size: 12px !important; }
  #home-screen .home-resources #home-stamina-add { flex-basis: 24px; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; font-size: 20px !important; }
}

/* Desktop battle fit: the logical board keeps its aspect ratio, but scales
   from the available viewport height so the reserve shelf reaches the first
   screen instead of being hidden below a full-height canvas. Mobile remains
   on the existing portrait sizing path. */
@media (min-width: 801px) and (max-height: 1200px) {
  #app #battle-canvas {
    width: min(calc(100% + 8px), calc(73.3dvh - 163px));
    max-width: calc(100% + 8px);
    margin-inline: auto;
  }
}

/* Speed icon repair: the old text glyph relied on a font-specific `»` plus
   negative tracking and scaling, which could clip or collapse on browsers
   with different Chinese/system font fallback. Draw two stable chevrons in
   CSS instead; the button text and speed-cycle behavior remain unchanged. */
#app .panel-battle-state .speed-symbol {
  position: relative !important;
  display: block !important;
  width: 20px !important;
  height: 14px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  color: #4e5f49 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  position: absolute;
  top: 1px;
  display: block;
  width: 9px;
  height: 9px;
  content: '';
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}
#app .panel-battle-state .speed-symbol::before { left: 0; }
#app .panel-battle-state .speed-symbol::after { left: 8px; }

/* Final speed-mark balance: keep the double arrow comfortably inside the
   button's upper cell instead of letting the mark visually fill the box. */
#app .panel-battle-state .speed-symbol {
  width: 16px !important;
  height: 11px !important;
  justify-self: center !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px;
  width: 6px;
  height: 6px;
  border-top-width: 2px;
  border-right-width: 2px;
}
#app .panel-battle-state .speed-symbol::before { left: 0; }
#app .panel-battle-state .speed-symbol::after { left: 6px; }

/* Final speed-button composition: icon and multiplier share one compact row.
   The chevrons occupy the centre area and the value is anchored to the right,
   so neither inherits the heading's old top/left span positioning. */
#app .panel-battle-state .speed-cycle-button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 2px 3px !important;
}
#app .panel-battle-state .speed-symbol {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: 14px !important;
  height: 10px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  max-width: none !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px;
  width: 5px;
  height: 5px;
  border-top-width: 2px;
  border-right-width: 2px;
}
#app .panel-battle-state .speed-symbol::before { left: 0; }
#app .panel-battle-state .speed-symbol::after { left: 5px; }
#app .panel-battle-state .speed-label {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Centre the mark on the button axis while reserving a separate right cell
   for the multiplier.  This avoids the previous left-biased icon caused by
   placing it in the flexible first column. */
#app .panel-battle-state .speed-cycle-button {
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) !important;
}
#app .panel-battle-state .speed-symbol {
  grid-column: 2 !important;
  width: 10px !important;
  height: 8px !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px;
  width: 4px;
  height: 4px;
  border-top-width: 2px;
  border-right-width: 2px;
}
#app .panel-battle-state .speed-symbol::before { left: 0; }
#app .panel-battle-state .speed-symbol::after { left: 4px; }
#app .panel-battle-state .speed-label {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Final top-bar alignment against the supplied 393px reference crop. */
#app .battle-panel:not(.opponent-panel) > .panel-heading {
  border: 1px solid rgba(143, 105, 66, .62) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ead4aa 0, #dec093 56%, #c9a776 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 245, 210, .82),
    inset 0 -2px rgba(126, 86, 50, .18),
    0 2px 0 rgba(112, 77, 47, .16) !important;
}
#app .panel-battle-state span {
  top: 9px !important;
  left: 7px !important;
  max-width: 30% !important;
  color: #4c3728 !important;
  font: 900 13px/1 KaiTi, STKaiti, serif !important;
  letter-spacing: .3px !important;
  text-shadow: 0 1px rgba(255, 239, 192, .78) !important;
}

/* Strict reference replica pass: the supplied battle capture is an open
   parchment composition. The board and shelf carry the depth; large outer
   cards would create a second visual system around them. */
#app .battle-panel,
#app .control-panel,
#app .status {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
#app .battle-panel {
  border-radius: 0 !important;
}
#app .battle-panel:not(.opponent-panel) > .panel-heading {
  background: transparent !important;
  box-shadow: none !important;
}
#app #battle-canvas {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 2px 0 rgba(101, 69, 43, .12),
    0 5px 10px rgba(101, 69, 43, .08) !important;
}
#app .control-panel {
  padding-top: 7px !important;
  padding-bottom: 6px !important;
}
#app .status {
  color: rgba(87, 67, 50, .82) !important;
  text-shadow: 0 1px rgba(255, 245, 214, .68) !important;
}
#app .panel-battle-state::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 251, 231, .18) 0 5%, transparent 17%),
    radial-gradient(ellipse at 73% 74%, rgba(32, 26, 22, .2) 0 7%, transparent 20%),
    rgba(67, 57, 48, .73) !important;
}
#app .app-brand::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 224, .9),
    inset 0 -3px rgba(123, 88, 54, .2),
    0 0 0 1px rgba(157, 119, 70, .28),
    0 3px 0 rgba(105, 75, 48, .32),
    0 5px 8px rgba(92, 68, 45, .12) !important;
}

/* Top reference chrome: one full parchment wave rail, with the black ink
   brush reserved for the centred wave label. The left spawn counter and the
   right speed control sit on this same rail instead of floating on bare page
   background. */
#app .battle-panel:not(.opponent-panel) > .panel-heading {
  border: 1px solid rgba(143, 105, 66, .62) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ead4aa 0, #dec093 56%, #c9a776 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 245, 210, .82),
    inset 0 -2px rgba(126, 86, 50, .18),
    0 2px 0 rgba(112, 77, 47, .16) !important;
}
#app .panel-battle-state span {
  top: 9px !important;
  left: 7px !important;
  max-width: 30% !important;
  color: #4c3728 !important;
  font: 900 13px/1 KaiTi, STKaiti, serif !important;
  letter-spacing: .3px !important;
  text-shadow: 0 1px rgba(255, 239, 192, .78) !important;
}

/* Clear two-weapon silhouette for the homepage entry button. Each sword is
   built from a pointed double-edged blade, guard, grip and pommel so it stays
   legible at narrow phone widths without becoming a text glyph or intercepting
   the button pointer area. */
#home-screen .home-start-battle .home-crossed-swords::before,
#home-screen .home-start-battle .home-crossed-swords::after { content: none !important; animation: none !important; }
#home-screen .home-start-battle .home-sword {
  position: absolute;
  top: -5px;
  z-index: 1;
  display: block;
  width: 15px;
  height: 56px;
  pointer-events: none;
  transform-origin: 50% 83%;
}
#home-screen .home-start-battle .home-sword::before {
  position: absolute;
  top: 0;
  left: 3px;
  width: 9px;
  height: 39px;
  content: '';
  border: 1px solid #37484b;
  clip-path: polygon(50% 0, 100% 12%, 72% 78%, 50% 100%, 28% 78%, 0 12%);
  background: linear-gradient(90deg, #506b70 0 18%, #e8e7cf 37% 63%, #829a98 80% 100%);
  box-shadow: 0 1px 0 #fff0b5;
}
#home-screen .home-start-battle .home-sword::after {
  position: absolute;
  top: 35px;
  left: -5px;
  width: 25px;
  height: 7px;
  content: '';
  border: 2px solid #4a302a;
  border-radius: 5px;
  background: linear-gradient(180deg, #dfc783, #9c613b);
  box-shadow: 0 2px 0 #56362d, 0 9px 0 -2px #68402f, 0 11px 0 -3px #d9bb72;
}
#home-screen .home-start-battle .home-sword-left {
  left: 3px;
  animation: home-sword-left-clash 1.6s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-right {
  right: 3px;
  animation: home-sword-right-clash 1.6s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-spark {
  z-index: 4;
  width: 7px;
  height: 7px;
}
@keyframes home-sword-left-clash {
  0%, 18%, 82%, 100% { transform: rotate(-42deg) translate3d(-9px, 5px, 0); }
  34%, 55% { transform: rotate(-27deg) translate3d(4px, -2px, 0); }
  64% { transform: rotate(-34deg) translate3d(1px, 0, 0); }
}
@keyframes home-sword-right-clash {
  0%, 18%, 82%, 100% { transform: rotate(42deg) translate3d(9px, 5px, 0); }
  34%, 55% { transform: rotate(27deg) translate3d(-4px, -2px, 0); }
  64% { transform: rotate(34deg) translate3d(-1px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-start-battle .home-sword-left { animation: none; transform: rotate(-34deg); }
  #home-screen .home-start-battle .home-sword-right { animation: none; transform: rotate(34deg); }
}

/* Reference-matched crossed swords: pointed silver blades open toward the
   upper corners, with the brown guards and grips crossing below the center. */
#home-screen .home-start-battle .home-crossed-swords {
  width: 50px;
  height: 48px;
  margin-inline: 0;
  overflow: visible;
  transform: translateY(2px);
}
#home-screen .home-start-battle .home-sword {
  top: -4px;
  width: 18px;
  height: 59px;
  background:
    linear-gradient(90deg, transparent 34%, #6b3f2e 36% 64%, transparent 66%) 50% 100% / 100% 19px no-repeat,
    radial-gradient(ellipse, #d4a15f 0 54%, transparent 57%) 50% 100% / 13px 8px no-repeat;
}
#home-screen .home-start-battle .home-sword::before {
  top: 0;
  left: 4px;
  width: 10px;
  height: 43px;
  border: 1px solid #38555b;
  clip-path: polygon(50% 0, 100% 13%, 69% 76%, 50% 100%, 31% 76%, 0 13%);
  background: linear-gradient(90deg, #55787f 0 18%, #edf0dc 38% 61%, #91adb0 82% 100%);
  box-shadow: inset 1px 0 #fff8d5, 0 1px 0 #fff0b2;
}
#home-screen .home-start-battle .home-sword::after {
  top: 38px;
  left: -6px;
  width: 30px;
  height: 8px;
  border: 2px solid #4b3028;
  border-radius: 5px;
  background: linear-gradient(180deg, #e0c47e, #945a38);
  box-shadow: 0 2px 0 #56352d;
}
#home-screen .home-start-battle .home-sword-left {
  left: 3px;
  animation: home-reference-sword-left 1.6s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-right {
  right: 3px;
  animation: home-reference-sword-right 1.6s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-spark {
  top: 14%;
  width: 8px;
  height: 8px;
  background: #f3c65d;
  box-shadow: 0 0 0 2px #ffe7a055, 0 0 7px #edab4dcc;
}
@keyframes home-reference-sword-left {
  0%, 18%, 82%, 100% { transform: rotate(-39deg) translate3d(-8px, 5px, 0); }
  34%, 52% { transform: rotate(-29deg) translate3d(3px, -1px, 0); }
  60% { transform: rotate(-34deg) translate3d(0, 1px, 0); }
}
@keyframes home-reference-sword-right {
  0%, 18%, 82%, 100% { transform: rotate(39deg) translate3d(8px, 5px, 0); }
  34%, 52% { transform: rotate(29deg) translate3d(-3px, -1px, 0); }
  60% { transform: rotate(34deg) translate3d(0, 1px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-start-battle .home-crossed-swords { transform: translateY(2px); }
  #home-screen .home-start-battle .home-sword-left { animation: none; transform: rotate(-34deg); }
  #home-screen .home-start-battle .home-sword-right { animation: none; transform: rotate(34deg); }
  #home-screen .home-start-battle .home-sword-spark { animation: none; opacity: .75; transform: translate(-50%, -50%) scale(.7); }
}

/* Homepage battle-entry polish: the button keeps its full hit area, while
   its visible paper plate is lighter and tighter around the copy. */
#home-screen .home-start-battle {
  border: 2px solid rgba(103, 67, 48, .76) !important;
  background: linear-gradient(180deg, rgba(248, 232, 188, .76), rgba(185, 139, 91, .58)) !important;
  box-shadow: inset 0 2px rgba(255, 249, 216, .72), inset 0 -2px rgba(103, 65, 44, .36), 0 3px 0 rgba(79, 52, 39, .58), 0 7px 12px rgba(56, 32, 24, .22) !important;
  font-size: clamp(20px, 5.2vw, 28px) !important;
  white-space: nowrap;
}
#home-screen .home-start-battle::before,
#home-screen .home-start-battle::after { content: none !important; }
#home-screen .home-start-battle .home-start-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  font: inherit;
  line-height: 1;
  letter-spacing: 1px;
}
#home-screen .home-start-battle .home-crossed-swords {
  position: relative;
  display: block;
  width: clamp(30px, 7vw, 42px);
  height: clamp(31px, 7vw, 43px);
  margin-inline: 2px;
  overflow: visible;
  color: transparent;
  font-size: 0;
  line-height: 1;
  transform: none;
  pointer-events: none;
}
#home-screen .home-start-battle .home-crossed-swords::before,
#home-screen .home-start-battle .home-crossed-swords::after {
  position: absolute;
  top: 1px;
  width: 7px;
  height: 36px;
  content: '';
  border: 1px solid #3e3029;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #637b7e 0 18%, #e4e3c9 34% 66%, #657c7e 82% 100%);
  box-shadow: 0 1px 0 #fff0bb, 0 2px 0 #56382f;
  transform-origin: 50% 85%;
}
#home-screen .home-start-battle .home-crossed-swords::before {
  left: 12px;
  transform: rotate(-39deg);
}
#home-screen .home-start-battle .home-crossed-swords::after {
  right: 12px;
  transform: rotate(39deg);
}
#home-screen .home-start-battle .home-sword-spark {
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2c565;
  box-shadow: 0 0 0 2px rgba(255, 235, 159, .58), 0 0 8px rgba(244, 179, 73, .8);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  pointer-events: none;
}
#home-screen:not(.is-hidden) .home-start-battle .home-crossed-swords::before {
  animation: home-sword-clash-left 1.6s ease-in-out infinite;
}
#home-screen:not(.is-hidden) .home-start-battle .home-crossed-swords::after {
  animation: home-sword-clash-right 1.6s ease-in-out infinite;
}
#home-screen:not(.is-hidden) .home-start-battle .home-sword-spark {
  animation: home-sword-spark 1.6s ease-in-out infinite;
}
@keyframes home-sword-clash-left {
  0%, 18%, 82%, 100% { transform: rotate(-39deg) translate3d(-4px, 2px, 0); }
  34%, 55% { transform: rotate(-26deg) translate3d(1px, -1px, 0); }
}
@keyframes home-sword-clash-right {
  0%, 18%, 82%, 100% { transform: rotate(39deg) translate3d(4px, 2px, 0); }
  34%, 55% { transform: rotate(26deg) translate3d(-1px, -1px, 0); }
}
@keyframes home-sword-spark {
  0%, 25%, 72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  35%, 54% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
  60% { opacity: .18; transform: translate(-50%, -50%) scale(.55); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen:not(.is-hidden) .home-start-battle .home-crossed-swords::before,
  #home-screen:not(.is-hidden) .home-start-battle .home-crossed-swords::after,
  #home-screen:not(.is-hidden) .home-start-battle .home-sword-spark { animation: none; }
  #home-screen .home-start-battle .home-crossed-swords::before { transform: rotate(-32deg); }
  #home-screen .home-start-battle .home-crossed-swords::after { transform: rotate(32deg); }
  #home-screen .home-start-battle .home-sword-spark { opacity: .45; transform: translate(-50%, -50%) scale(.65); }
}

/* Video reference: two broad silver-blue swords clash above the entry plate,
   flash at the center, sweep apart to the sides, then return to the clash.
   The spans are the only interactive-safe layers; all artwork ignores input. */
#home-screen .home-start-battle .home-crossed-swords {
  position: relative;
  display: block;
  width: clamp(43px, 10vw, 62px);
  height: clamp(40px, 9vw, 56px);
  margin-inline: 1px;
  overflow: visible;
  color: transparent;
  font-size: 0;
  line-height: 1;
  transform: translateY(1px);
  pointer-events: none;
}
#home-screen .home-start-battle .home-crossed-swords::before,
#home-screen .home-start-battle .home-crossed-swords::after {
  content: none !important;
  animation: none !important;
}
#home-screen .home-start-battle .home-sword {
  position: absolute;
  top: -1px;
  z-index: 1;
  display: block;
  width: 15px;
  height: 56px;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 82%;
  will-change: transform;
}
#home-screen .home-start-battle .home-sword::before {
  position: absolute;
  top: 0;
  left: 2px;
  width: 11px;
  height: 40px;
  content: '';
  border: 1.5px solid #27363c;
  clip-path: polygon(50% 0, 100% 12%, 76% 78%, 50% 100%, 24% 78%, 0 12%);
  background:
    linear-gradient(90deg, #63858d 0 17%, #edf1df 34% 61%, #a8c0c1 78% 100%);
  box-shadow: inset 1px 0 #fff7d0, 0 1px 0 #fff1b2;
}
#home-screen .home-start-battle .home-sword::after {
  position: absolute;
  top: 36px;
  left: -7px;
  width: 29px;
  height: 7px;
  content: '';
  border: 1.5px solid #26343a;
  border-radius: 5px;
  background: linear-gradient(180deg, #d8b76c, #74442f);
  box-shadow:
    0 2px 0 #3b2927,
    0 10px 0 -2px #3e2d2b,
    0 10px 0 -3px #7aa0a6;
}
#home-screen .home-start-battle .home-sword-left {
  left: calc(50% - 7px);
  animation: home-video-sword-left 1.4s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-right {
  right: calc(50% - 7px);
  animation: home-video-sword-right 1.4s ease-in-out infinite;
}
#home-screen .home-start-battle .home-sword-spark {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
  animation: home-video-sword-spark 1.4s ease-out infinite;
}
#home-screen .home-start-battle .home-sword-spark::before {
  position: absolute;
  inset: 1px;
  content: '';
  clip-path: polygon(50% 0, 62% 37%, 100% 14%, 73% 50%, 100% 76%, 61% 63%, 50% 100%, 38% 63%, 0 84%, 27% 50%, 0 20%, 39% 37%);
  background: #f6d369;
  filter: drop-shadow(0 0 2px #ffeeb0);
}
#home-screen .home-start-battle .home-sword-spark::after {
  position: absolute;
  top: -10px;
  left: -17px;
  width: 35px;
  height: 17px;
  content: '';
  border-top: 3px solid rgba(226, 241, 227, .9);
  border-radius: 50%;
  transform: rotate(-18deg);
  filter: blur(.2px);
}
@keyframes home-video-sword-left {
  0%, 7%, 88%, 100% { transform: translate3d(-1px, 1px, 0) rotate(39deg) scaleX(-1); }
  46% { transform: translate3d(-1px, 1px, 0) rotate(39deg) scaleX(-1); }
  64% { transform: translate3d(-6px, 4px, 0) rotate(-65deg) scaleX(-1); }
  74% { transform: translate3d(-10px, 5px, 0) rotate(-78deg) scaleX(-1); }
  84% { transform: translate3d(-5px, 3px, 0) rotate(-60deg) scaleX(-1); }
}
@keyframes home-video-sword-right {
  0%, 7%, 88%, 100% { transform: translate3d(1px, 1px, 0) rotate(-39deg) scaleX(-1); }
  46% { transform: translate3d(1px, 1px, 0) rotate(-39deg) scaleX(-1); }
  64% { transform: translate3d(6px, 4px, 0) rotate(65deg) scaleX(-1); }
  74% { transform: translate3d(10px, 5px, 0) rotate(78deg) scaleX(-1); }
  84% { transform: translate3d(5px, 3px, 0) rotate(60deg) scaleX(-1); }
}
@keyframes home-video-sword-spark {
  0%, 8%, 87%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  2%, 5%, 90%, 96% { opacity: .98; transform: translate(-50%, -50%) scale(1); }
  12%, 84% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-start-battle .home-sword-left,
  #home-screen .home-start-battle .home-sword-right,
  #home-screen .home-start-battle .home-sword-spark { animation: none; }
  #home-screen .home-start-battle .home-sword-left { transform: translate3d(-1px, 1px, 0) rotate(39deg) scaleX(-1); }
  #home-screen .home-start-battle .home-sword-right { transform: translate3d(1px, 1px, 0) rotate(-39deg) scaleX(-1); }
  #home-screen .home-start-battle .home-sword-spark { opacity: .35; transform: translate(-50%, -50%) scale(.55); }
}

/* The video places the clash above the plate, with the grips overlapping its
   upper edge; keep the copy in one clean row underneath the artwork. */
#home-screen .home-start-battle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.7vw, 12px);
  padding: 12px 18px 14px !important;
}
#home-screen .home-start-battle .home-crossed-swords {
  position: absolute;
  top: -68px;
  left: 50%;
  width: clamp(96px, 23vw, 120px);
  height: clamp(82px, 20vw, 112px);
  margin: 0;
  transform: translateX(-50%);
}
#home-screen .home-start-battle .home-sword {
  top: 0;
  width: 19px;
  height: 68px;
}
#home-screen .home-start-battle .home-sword::before {
  left: 3px;
  width: 13px;
  height: 49px;
}
#home-screen .home-start-battle .home-sword::after {
  top: 44px;
  left: -8px;
  width: 35px;
  height: 8px;
}
#home-screen .home-start-battle .home-sword-left {
  left: 0;
}
#home-screen .home-start-battle .home-sword-right {
  right: 0;
}
#home-screen .home-start-battle .home-sword-spark {
  top: 14px;
}
#home-screen .home-start-battle .home-start-label {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
#home-screen .home-start-battle small {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  margin: 0 !important;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-start-battle .home-crossed-swords { transform: translateX(-50%); }
}

/* Refined weapon pass: preserve the video pose while giving each blade a
   readable double edge, fuller highlight, metal guard, rivet and pommel. */
#home-screen .home-start-battle .home-sword {
  width: 21px;
  height: 70px;
  filter: drop-shadow(0 1px 0 rgba(35, 25, 23, .5));
}
#home-screen .home-start-battle .home-sword::before {
  top: 0;
  left: 2px;
  width: 17px;
  height: 51px;
  border: 1.5px solid #27343b;
  clip-path: polygon(50% 0, 96% 10%, 77% 22%, 64% 78%, 50% 100%, 36% 78%, 23% 22%, 4% 10%);
  background:
    linear-gradient(103deg, transparent 0 39%, rgba(255, 252, 220, .88) 40% 46%, transparent 47% 53%, rgba(81, 121, 132, .56) 54% 59%, transparent 60%),
    linear-gradient(90deg, #547781 0 15%, #b9d1d1 19% 33%, #eef3e4 39% 56%, #c4d9d6 63% 79%, #5e818b 85% 100%);
  box-shadow: inset 1px 0 #fff9d4, inset -1px 0 #496a73, 0 1px 0 #fff1b2;
}
#home-screen .home-start-battle .home-sword::after {
  top: 45px;
  left: -10px;
  width: 40px;
  height: 9px;
  border: 1.5px solid #29353a;
  border-radius: 6px;
  background:
    radial-gradient(circle at 7% 50%, #e5c875 0 2px, transparent 2.5px),
    radial-gradient(circle at 93% 50%, #e5c875 0 2px, transparent 2.5px),
    linear-gradient(180deg, #f0d991 0 18%, #8a5435 23% 68%, #3b2a2b 72% 100%);
  box-shadow:
    inset 0 1px #fff1b0,
    0 2px 0 #38282a,
    0 11px 0 -2px #252b31,
    0 11px 0 -3px #79a7ad,
    0 14px 0 -4px #d6b665;
}
#home-screen .home-start-battle .home-sword {
  width: 64px;
  height: 112px;
  background: transparent url('./assets/home-short-dao-left.png') center / contain no-repeat !important;
  filter: drop-shadow(0 2px 1px rgba(36, 24, 18, .56));
}
#home-screen .home-start-battle .home-sword-right {
  background-image: url('./assets/home-short-dao-right.png') !important;
}
#home-screen .home-start-battle .home-sword::before,
#home-screen .home-start-battle .home-sword::after {
  content: none !important;
}

/* The helper copy stays subordinate to the main entry label. */
#home-screen .home-start-battle small {
  right: auto;
  left: 50%;
  width: max-content;
  padding: 1px 6px 2px;
  border: 1px solid rgba(98, 63, 43, .22);
  border-radius: 5px;
  background: rgba(248, 232, 188, .3);
  opacity: .78;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Keep the battle-entry plate compact beneath the castle artwork. */
#home-screen .home-start-battle {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 39% !important;
  height: 9.2% !important;
  min-height: 0 !important;
  padding: 8px 12px 10px !important;
  font-size: clamp(16px, 4vw, 22px) !important;
}

/* The red lower-castle flags are baked into the authored background. These
   two small translucent cloth overlays add motion without moving the poles,
   castle, gate, or any interactive layer. Their positions follow the source
   image's lower-flag bounds (left about x262-321/y1111-1190; right about
   x615-692/y1110-1189 in the 941x1672 artwork). */
#home-screen .home-lobby-flags {
  position: absolute;
  z-index: 1;
  top: -7%;
  left: 50%;
  width: auto;
  height: 107%;
  aspect-ratio: 941 / 1672;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
#home-screen .home-lobby-flag {
  position: absolute;
  top: 63.9%;
  display: block;
  width: 5.9%;
  height: 6.4%;
  border: 0;
  background:
    linear-gradient(165deg, rgba(224, 102, 70, .22), rgba(116, 40, 35, .26)),
    repeating-linear-gradient(92deg, rgba(255, 220, 156, .08) 0 5%, transparent 6% 17%, rgba(74, 28, 28, .07) 18% 20%, transparent 21% 33%);
  opacity: .62;
  will-change: transform, clip-path;
}
#home-screen .home-lobby-flag::after {
  position: absolute;
  inset: 7% 9% 8% 12%;
  content: '';
  border-right: 1px solid rgba(255, 226, 175, .09);
  border-left: 1px solid rgba(78, 27, 28, .08);
  background: linear-gradient(104deg, transparent 0 38%, rgba(255, 221, 164, .08) 41% 47%, transparent 50% 100%);
  opacity: .62;
}
#home-screen .home-lobby-flag-left {
  left: 29.8%;
  transform-origin: 100% 4%;
  clip-path: polygon(100% 0, 81% 5%, 64% 2%, 47% 8%, 29% 4%, 11% 10%, 0 5%, 4% 26%, 1% 45%, 8% 63%, 2% 78%, 12% 91%, 4% 100%, 28% 94%, 49% 100%, 67% 93%, 84% 97%, 100% 90%);
  animation: home-lobby-flag-left-wave 2.7s ease-in-out infinite;
}
#home-screen .home-lobby-flag-right {
  left: 64.2%;
  transform-origin: 0 4%;
  clip-path: polygon(0 0, 19% 5%, 36% 2%, 53% 8%, 71% 4%, 89% 10%, 100% 5%, 96% 26%, 99% 45%, 92% 63%, 98% 78%, 88% 91%, 96% 100%, 72% 94%, 51% 100%, 33% 93%, 16% 97%, 0 90%);
  animation: home-lobby-flag-right-wave 3.1s ease-in-out -1.15s infinite;
}
@keyframes home-lobby-flag-left-wave {
  0%, 100% { transform: rotate(-1.2deg) skewY(-.6deg) scaleX(.98); }
  34% { transform: rotate(2.1deg) skewY(1.4deg) scaleX(1.03); }
  68% { transform: rotate(-2.2deg) skewY(-1.6deg) scaleX(.95); }
}
@keyframes home-lobby-flag-right-wave {
  0%, 100% { transform: rotate(1deg) skewY(.6deg) scaleX(.98); }
  38% { transform: rotate(-2.4deg) skewY(-1.5deg) scaleX(1.04); }
  73% { transform: rotate(1.8deg) skewY(1.7deg) scaleX(.94); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-lobby-flag-left,
  #home-screen .home-lobby-flag-right { animation: none; }
  #home-screen .home-lobby-flag-left { transform: rotate(0) skewY(0) scaleX(1); }
  #home-screen .home-lobby-flag-right { transform: rotate(0) skewY(0) scaleX(1); }
}

/* The cleaned background supplies the fixed poles. These two cloth-only
   overlays attach to those poles with visible tie bands and wave independently. */
#home-screen .home-lobby-flag-cover {
  position: absolute;
  z-index: 0;
  top: 63%;
  display: block;
  width: 9.8%;
  height: 7.8%;
  border-radius: 44% 16% 52% 22%;
  background:
    radial-gradient(ellipse at 35% 72%, rgba(61, 71, 47, .5) 0 19%, transparent 57%),
    linear-gradient(145deg, rgba(220, 194, 151, .95), rgba(178, 153, 111, .9));
  filter: blur(2.4px);
  opacity: .92;
  pointer-events: none;
}
#home-screen .home-lobby-flag-cover-left { left: 21.4%; }
#home-screen .home-lobby-flag-cover-right { left: 63.7%; transform: scaleX(-1); }
#home-screen .home-lobby-flag-cover { display: none; }
#home-screen .home-lobby-flag {
  z-index: 1;
  /* Source-space y=about 1068: lift the cloth to the upper tie point so the
     fixed pole does not show an empty section above the flag. */
  top: 63.8%;
  width: 10.4%;
  height: 7.2%;
  border: 0;
  border-radius: 0;
  background: transparent center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(49, 32, 23, .32));
  opacity: 1;
  clip-path: none;
}
#home-screen .home-lobby-flag::after { display: none; }
#home-screen .home-lobby-flag-left {
  /* Source-space positioning: the reinforced right edge lands on the fixed
     left pole at about x=323 in the 941px authored background. */
  left: 25.1%;
  transform-origin: 96% 10%;
  background-image: url('./assets/home-lobby-war-cloth-left.png');
  animation: home-lobby-war-cloth-left-wave 3.6s ease-in-out infinite;
}
#home-screen .home-lobby-flag-right {
  /* Source-space positioning: the reinforced left edge lands on the fixed
     right pole at about x=617 in the 941px authored background. */
  left: 64.5%;
  transform-origin: 4% 10%;
  background-image: url('./assets/home-lobby-war-cloth-right.png');
  animation: home-lobby-war-cloth-right-wave 4.1s ease-in-out -1.6s infinite;
}
@keyframes home-lobby-war-cloth-left-wave {
  0%, 100% { transform: rotate(-.8deg) skewY(-.2deg); }
  34% { transform: rotate(1.8deg) skewY(1deg) scaleX(.98); }
  68% { transform: rotate(-1.4deg) skewY(-.8deg) scaleX(1.015); }
}
@keyframes home-lobby-war-cloth-right-wave {
  0%, 100% { transform: rotate(.7deg) skewY(.2deg); }
  37% { transform: rotate(-1.7deg) skewY(-1deg) scaleX(.98); }
  73% { transform: rotate(1.4deg) skewY(.8deg) scaleX(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen .home-lobby-flag-left,
  #home-screen .home-lobby-flag-right { animation: none; }
  #home-screen .home-lobby-flag-left { transform: rotate(0) skewY(0); }
  #home-screen .home-lobby-flag-right { transform: rotate(0) skewY(0); }
}

/* Final responsive lock: later visual passes must not reintroduce a second
   phone-only rail geometry. All three entry points keep the same stage-space
   width, height and safe-area anchored position at every viewport. */
body:has(> #home-screen:not(.is-hidden)) {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}
#home-screen {
  width: min(100vw, calc(100svh * 941 / 1672), 543px) !important;
  height: min(100svh, calc(100vw * 1672 / 941), 965px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 941 / 1672;
  margin: 0 auto !important;
}
#home-screen .home-actions {
  top: auto !important;
  right: 0 !important;
  bottom: max(1.5%, calc(env(safe-area-inset-bottom) + 1%)) !important;
  left: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  width: 82% !important;
  height: 76px !important;
  margin: 0 auto !important;
}
#home-screen .home-actions button {
  width: auto !important;
  height: 76px !important;
  min-height: 0 !important;
}

/* Reserve alignment pass: every unit shares one square contain-fit box and
   one bottom baseline. Metadata stays in its own bottom strip, while the
   shovel/ad control keeps its independent art and layout. */
#app .reserve-unit:not(.reserve-unit--shovel) {
  display: block;
  padding: 0;
}
#app .reserve-visual {
  position: absolute;
  z-index: 1;
  inset: 4px 4px 13px;
  display: grid;
  place-items: end center;
  overflow: hidden;
}
#app .reserve-visual > .reserve-art,
#app .unit-drag-preview-visual > .reserve-art,
.unit-drag-preview-visual > .reserve-art {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
}
#app .reserve-label {
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 2px;
  left: 2px;
  margin: 0;
  line-height: 10px;
  text-align: center;
  pointer-events: none;
}
#app .reserve-foot-stars {
  bottom: 2px;
}
.unit-drag-preview {
  display: none;
  place-items: center;
  padding: 0;
}
.unit-drag-preview.is-visible {
  display: grid;
}
.unit-drag-preview-visual {
  position: absolute;
  inset: 4px 4px 7px;
  display: grid;
  place-items: center;
}

/* Reserve rework: the slot is divided into a visual safe box and a fixed
   metadata strip.  The art is centred in the safe box instead of being
   bottom-anchored, which was the cause of cropped horses and glyphs. */
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-visual {
  inset: 4px 4px 15px;
  place-items: center;
  overflow: hidden;
}
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-visual > .reserve-art {
  object-position: center center;
}
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-label,
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-foot-stars {
  bottom: 2px;
  line-height: 10px;
}
#app .reserve-unit--shovel .reserve-tool-art,
#app .reserve-ad-slot .reserve-tool-art {
  position: absolute;
  inset: 4px 4px 15px;
  display: grid;
  place-items: center;
}
#app .reserve-unit--shovel .shovel-icon,
#app .reserve-ad-slot .shovel-icon {
  transform: rotate(-24deg) scale(.88);
}
#app .unit-drag-preview-visual > .reserve-art {
  object-position: center center;
}

/* Reserve vertical alignment acceptance pass: all reserve content uses the
   same internal visual safe box. Card geometry and hit areas stay unchanged;
   only the art anchor moves away from the lower edge. */
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-visual,
#app .reserve-unit--shovel .reserve-tool-art,
#app .reserve-ad-slot .reserve-tool-art {
  inset: 4px 5px 11px;
  width: auto;
  height: auto;
  place-items: center;
  transform: none;
}
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-visual > .reserve-art {
  object-position: center center;
  transform: translateY(-2px);
}
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-label,
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-foot-stars {
  bottom: 3px;
}

/* Keep the hand-follow preview on the same visual baseline as the card.
   The preview frame is independent from the card hit area and never changes
   drag anchoring or the reserve slot geometry. */
#app .unit-drag-preview-visual,
.unit-drag-preview-visual {
  inset: 4px 5px 11px;
  width: auto;
  height: auto;
  place-items: center;
  transform: none;
}
#app .unit-drag-preview-visual > .reserve-art,
.unit-drag-preview-visual > .reserve-art {
  object-position: center center;
  transform: translateY(-2px);
}
#app .reserve-unit--shovel .shovel-icon,
#app .reserve-ad-slot .shovel-icon,
.unit-drag-preview .shovel-icon {
  transform: rotate(-24deg) scale(.88) translateY(-2px);
}

/* Alpha-bbox alignment pass. The authored troop idle frames keep their
   visible pixels around y=40..246 of a 256px frame, while the dual-v6 glyphs
   sit around y=85..414 of a 512px frame. Size each visual inside a real
   bottom metadata safe area, then apply the category-specific correction to
   the pixels rather than moving the reserve card or its hit target. */
#app .reserve-unit:not(.reserve-unit--shovel) .reserve-visual,
#app .reserve-unit--shovel .reserve-tool-art,
#app .reserve-ad-slot .reserve-tool-art {
  inset: 3px 4px 6px;
  width: auto;
  height: auto;
  overflow: visible;
  transform: none;
}
#app .reserve-unit--normal .reserve-visual > .reserve-art {
  object-position: center center;
  transform: translateY(-3px);
}
#app .reserve-unit--general-fragment .reserve-visual > .reserve-art {
  object-position: center center;
  transform: none;
}
#app .reserve-unit--shovel .shovel-icon,
#app .reserve-ad-slot .shovel-icon {
  transform: rotate(-24deg) scale(.84) translateY(-1px);
}

/* The drag preview creates a plain img without the reserve-art class. Give
   that exact node the same bounded frame and bbox correction so reserve ->
   board, board -> reserve, merge and swap all follow the same visual anchor. */
#app .unit-drag-preview-visual,
.unit-drag-preview-visual {
  inset: 3px 4px 6px;
  width: auto;
  height: auto;
  overflow: visible;
  place-items: center;
  transform: none;
}
#app .unit-drag-preview-visual > img,
.unit-drag-preview-visual > img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  transform: translateY(-3px);
}
.unit-drag-preview .shovel-icon {
  transform: rotate(-24deg) scale(.84) translateY(-1px);
}

/* Pointer-drag performance pass: the preview is a compositor-only layer and
   reserve hit targets must not hand the gesture back to browser scrolling or
   text selection. Position updates are frame-synchronised in app.ts. */
#app .reserve-unit,
#app .reserve-empty,
#app .reserve-ad-slot {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#app .unit-drag-preview {
  contain: layout paint;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* Muted lobby background pass. The approved 941x1672 artwork keeps the
   original stage-space composition, so the gate coordinate system and all
   interactive artwork remain unchanged. Only the page surround, veil and
   separately animated cloth colours are adapted to the lighter paper field. */
body:has(> #home-screen:not(.is-hidden)) {
  background: #f2ebdd;
}

/* Current-art troop sheets are square transparent canvases. Scale each
   reserve/drag image from its stable alpha envelope so the visible weapon and
   body use the same real square safely, instead of making narrow artwork look
   smaller. The percentage offsets recenter the union alpha box; they do not
   alter the reserve or drag hit area. */
#app .reserve-unit--normal .reserve-visual--troop-剑,
#app .reserve-unit--normal .reserve-visual--troop-射,
#app .reserve-unit--normal .reserve-visual--troop-矛,
#app .reserve-unit--normal .reserve-visual--troop-骑,
.unit-drag-preview .reserve-visual--troop-剑,
.unit-drag-preview .reserve-visual--troop-射,
.unit-drag-preview .reserve-visual--troop-矛,
.unit-drag-preview .reserve-visual--troop-骑 {
  overflow: hidden;
}
#app .reserve-unit--normal .reserve-visual--troop-剑 > .reserve-art,
.unit-drag-preview .reserve-visual--troop-剑 > .reserve-art {
  width: 109.45%;
  height: 109.45%;
  max-width: none;
  max-height: none;
  transform: translateY(-7.23%);
}
#app .reserve-unit--normal .reserve-visual--troop-射 > .reserve-art,
.unit-drag-preview .reserve-visual--troop-射 > .reserve-art {
  width: 111.9%;
  height: 111.9%;
  max-width: none;
  max-height: none;
  transform: translateY(-4.49%);
}
#app .reserve-unit--normal .reserve-visual--troop-矛 > .reserve-art,
.unit-drag-preview .reserve-visual--troop-矛 > .reserve-art {
  width: 109.45%;
  height: 109.45%;
  max-width: none;
  max-height: none;
  transform: translateY(-5.86%);
}
#app .reserve-unit--normal .reserve-visual--troop-骑 > .reserve-art,
.unit-drag-preview .reserve-visual--troop-骑 > .reserve-art {
  width: 109.45%;
  height: 109.45%;
  max-width: none;
  max-height: none;
  transform: translateY(-5.08%);
}
#home-screen {
  background:
    linear-gradient(180deg, rgba(255, 252, 239, .12) 0%, rgba(255, 252, 239, .02) 30%, rgba(100, 111, 94, .06) 72%, rgba(75, 84, 72, .14) 100%),
    url('./assets/home-lobby-background-muted-v1.png') center center / cover no-repeat;
}
#home-screen::before {
  inset: 0;
  z-index: -1;
  opacity: .86;
  background:
    linear-gradient(90deg, rgba(242, 235, 221, .22) 0%, transparent 8%, transparent 92%, rgba(242, 235, 221, .22) 100%),
    linear-gradient(180deg, rgba(220, 228, 219, .12), transparent 34%, rgba(201, 212, 202, .12) 100%);
}
#home-screen::after {
  inset: 0;
  z-index: -1;
  height: auto;
  background: radial-gradient(ellipse at 50% 48%, transparent 0 56%, rgba(201, 212, 202, .16) 84%, rgba(242, 235, 221, .4) 100%);
}
#home-screen .home-lobby-flag-left,
#home-screen .home-lobby-flag-right {
  opacity: .9;
  background-blend-mode: normal;
}
#home-screen .home-lobby-flag-left {
  background-image: url('./assets/home-lobby-war-cloth-left.png');
  filter: saturate(.42) sepia(.12) hue-rotate(330deg) brightness(.86) drop-shadow(0 1px 1px rgba(49, 45, 35, .25));
}
#home-screen .home-lobby-flag-right {
  background-image: url('./assets/home-lobby-war-cloth-right.png');
  filter: saturate(.42) sepia(.12) hue-rotate(330deg) brightness(.86) drop-shadow(0 1px 1px rgba(49, 45, 35, .25));
}

/* Final user-approved colour/scale adjustment: both cloths share the same
   restrained red-terracotta treatment, and the crossed short blades step down
   slightly without changing their collision animation or button hit area. */
#home-screen .home-lobby-flag-left,
#home-screen .home-lobby-flag-right {
  filter: saturate(.42) sepia(.32) brightness(1.3) contrast(.88) drop-shadow(0 1px 1px rgba(49, 45, 35, .25));
}
#home-screen .home-start-battle .home-sword {
  width: 58px;
  height: 102px;
}

/* Entry copy refinement: lower the two label spans just enough to clear the
   upper grip silhouette, while preserving the existing flex layout and hit
   target. The darker ink treatment keeps all four characters readable on the
   muted parchment plate. */
#home-screen .home-start-battle .home-start-label {
  top: 4px;
  color: #3d2821 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px rgba(255, 240, 196, .9), 0 1px 0 #694034 !important;
  -webkit-text-stroke: .25px #3d2821;
}

/* Compact the three lower collection entries without shrinking their
   accessible button hit areas.  The smaller artwork clears the battle entry
   above it while retaining the existing illustrated depth and breathing
   shadow. */
#home-screen .home-actions {
  height: 66px !important;
}
#home-screen .home-actions button {
  height: 66px !important;
}
#home-screen .home-action-icon {
  width: 60px;
  height: 60px;
}

/* Final homepage spacing pass: spread the lower collection shortcuts across
   the safe lower band and give the title block a little more breathing room.
   The controls keep their full button hit areas and authored depth effects. */
#home-screen .home-actions {
  width: 88% !important;
  height: 72px !important;
  bottom: max(.6%, calc(env(safe-area-inset-bottom) + .5%)) !important;
  column-gap: clamp(5px, 1.5vw, 12px);
}
#home-screen .home-actions button {
  height: 72px !important;
}
#home-screen .home-action-icon {
  width: clamp(50.4px, 13.44vw, 60px);
  height: clamp(50.4px, 13.44vw, 60px);
}
#home-screen .home-hero h1 {
  top: calc(env(safe-area-inset-top) + 15.1%);
  font-size: clamp(27px, 7.2vw, 42px) !important;
}
#home-screen .home-subtitle {
  top: calc(env(safe-area-inset-top) + 22.1%);
  font-size: clamp(11px, 2.8vw, 15px) !important;
}
#home-screen .home-rank {
  top: calc(env(safe-area-inset-top) + 25%);
  font-size: clamp(9px, 2.4vw, 12px) !important;
}

/* v6 homepage hierarchy: keep the two utility rails compact and aligned while
   making the battle CTA a smaller, readable visual group. */
#home-screen .home-quick-rail {
  top: calc(env(safe-area-inset-top) + 3.2%) !important;
  gap: clamp(7px, 1.1vh, 10px) !important;
}
#home-screen .home-quick-rail > button {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
#home-screen .home-resources {
  top: calc(env(safe-area-inset-top) + 3.3%) !important;
  gap: clamp(8px, 1.45vh, 13px) !important;
}
#home-screen .home-resources .home-stamina-resource {
  background: linear-gradient(100deg, #4f6449, #708360 55%, #4f6449) !important;
  border-color: #b8c895 !important;
}
#home-screen .home-resources .home-stamina-resource .bun-icon {
  width: 26px !important;
  height: 26px !important;
  flex-basis: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #d8ad42 !important;
  font: 900 26px/26px Arial, sans-serif !important;
  text-shadow: 0 1px #fff1a3, 0 2px 0 #79542c !important;
}
#home-screen .home-start-battle {
  width: 33.5% !important;
  height: 8.1% !important;
  min-height: 44px !important;
  padding: 6px 8px 8px !important;
  font-size: clamp(15px, 3.6vw, 20px) !important;
}
#home-screen .home-start-battle .home-crossed-swords {
  top: -62px;
  width: clamp(84px, 20vw, 104px);
  height: clamp(72px, 17.5vw, 96px);
}
#home-screen .home-start-battle .home-sword {
  width: 54px;
  height: 94px;
}

/* v6 horizontal anchors: the outer edges of the first and third visible
   icons align with the two sides of the upper utility rail; the middle icon
   remains the geometric center. */
#home-screen .home-actions {
  width: 80.4% !important;
}
#home-screen .home-actions button {
  align-items: center;
}
#home-screen .home-actions button:first-child {
  justify-items: start;
}
#home-screen .home-actions button:nth-child(2) {
  justify-items: center;
}
#home-screen .home-actions button:last-child {
  justify-items: end;
}

/* Battle theme v1: clean warm-earth field, ivory placement pads, and one
   unified deep-grass state. The board geometry remains authored by the existing
   canvas renderer; these rules only skin its surrounding UI and reserve shelf. */
#app {
  background:
    radial-gradient(circle at 12% 8%, rgba(241, 229, 198, .42) 0, transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(126, 149, 122, .12) 0, transparent 27%),
    linear-gradient(180deg, #e5d5b5, #d5bd91 72%, #c2a477) !important;
  color: #4b392d;
}
#app #battle-canvas {
  background: #d0b58a !important;
  border-color: #8e7457 !important;
  box-shadow: inset 0 0 0 1px #f5e7c9, 0 3px 0 rgba(119, 88, 58, .42), 0 6px 12px rgba(87, 61, 37, .16) !important;
}
#app .battle-panel,
#app .control-panel,
#app .status {
  border-color: #987654 !important;
  background: linear-gradient(145deg, rgba(237, 220, 185, .94), rgba(205, 177, 133, .9)) !important;
  box-shadow: inset 0 1px #fff5d5, 0 5px 12px rgba(100, 72, 43, .14) !important;
}
#app .panel-heading {
  background: rgba(244, 228, 194, .82) !important;
  box-shadow: inset 0 1px #fff7dc, 0 2px 0 rgba(146, 112, 77, .28) !important;
}
#app .battle-top-actions .pause-button,
#app .panel-battle-state .speed-cycle-button {
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 1px solid #806344 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #f3e4c2, #bd9a6b) !important;
  box-shadow: inset 0 1px #fff8df, 0 2px 0 #78563d !important;
  color: #513a2c !important;
}
#app .panel-battle-state .speed-cycle-button {
  display: grid !important;
  grid-template-rows: 16px 10px !important;
  align-content: center;
  justify-items: center;
  padding: 1px 2px 2px !important;
}
#app .panel-battle-state .speed-cycle-button.is-active {
  border-color: #7e8761 !important;
  background: linear-gradient(145deg, #e8e5c8, #b6b78f) !important;
  color: #4b5742 !important;
}
#app .reserve {
  background: linear-gradient(145deg, #a88762, #73563f) !important;
  border-color: #76573d !important;
  box-shadow: inset 0 2px rgba(246, 224, 180, .55), inset 0 -3px #5e4533, 0 3px 0 rgba(95, 66, 43, .48) !important;
}
#app .reserve-unit,
#app .reserve-empty {
  background: linear-gradient(145deg, #fffdf4, #f7f0e2 66%, #e7d9bd) !important;
  border-color: #9f886b !important;
  box-shadow: inset 0 2px #fffefa, inset 0 -3px #c7b18d, 0 2px 0 rgba(101, 75, 48, .48) !important;
}
#app .reserve-ad-slot {
  background: linear-gradient(145deg, #e7c875, #ba8740 68%, #8e5b32) !important;
  border-color: #977039 !important;
  box-shadow: inset 0 2px #fff1b1, inset 0 -3px #85572f, 0 2px 0 rgba(84, 55, 32, .55) !important;
}
#app .recruit-action {
  border-color: #803d32 !important;
  background: linear-gradient(180deg, #d27658, #ae4e40) !important;
  box-shadow: inset 0 2px #f7b38a, 0 3px 0 #71372e !important;
  color: #fff3d8 !important;
}
#app .action-row .auto-merge-button {
  border-color: #637968 !important;
  background: linear-gradient(180deg, #d7dfc1, #a3b394) !important;
  box-shadow: inset 0 2px #f5f7db, 0 3px 0 #5b705e !important;
  color: #3d4e3d !important;
}

/* The narrow-phone panel heading has a five-pixel inner inset; compensate it
   so the speed control shares the pause button's right edge and axis. */
@media (max-width: 380px) {
  #app .panel-battle-state .speed-cycle-button {
    position: relative;
    right: -5px;
  }
}

/* Battle reference match v2: a restrained ink-and-parchment frame around the
   existing board. This is a presentation layer only; canvas geometry, route
   data and all control behavior stay untouched. */
#app {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 2% 7%, rgba(154, 175, 161, .16) 0, transparent 20%),
    radial-gradient(ellipse at 98% 52%, rgba(151, 174, 159, .13) 0, transparent 19%),
    radial-gradient(ellipse at 5% 96%, rgba(158, 178, 166, .12) 0, transparent 22%),
    linear-gradient(180deg, #e7e3d1 0, #ddd8c5 12%, #d3ba91 33%, #ceb388 78%, #d3d9c9 100%) !important;
}
#app::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: .2;
  background:
    radial-gradient(ellipse at 18% 3%, transparent 0 15%, rgba(101, 130, 118, .1) 16% 18%, transparent 20%),
    radial-gradient(ellipse at 84% 98%, transparent 0 17%, rgba(101, 130, 118, .08) 18% 20%, transparent 22%);
  filter: blur(1px);
}
#app > * { position: relative; z-index: 1; }

#app .app-brand {
  min-height: 56px !important;
  height: 56px !important;
  padding: 2px 48px 3px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#app .app-brand::before {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 50%;
  width: min(23%, 120px);
  height: 30px;
  content: '';
  transform: translateX(-50%);
  border: 1px solid #876b4d;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff7de, #ead5a8 72%, #d2b27d);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 220, .72), inset 0 -3px rgba(123, 88, 54, .2), 0 3px 0 rgba(105, 75, 48, .4), 0 7px 12px rgba(92, 68, 45, .14);
}
#app .app-brand::after {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 50%;
  width: min(21%, 105px);
  height: 23px;
  content: '';
  transform: translateX(-50%);
  border: 1px solid rgba(137, 105, 71, .58);
  border-radius: 3px;
  pointer-events: none;
}
#app .battle-title {
  position: relative;
  z-index: 1;
  color: #3d3028 !important;
  font: 900 clamp(20px, 5vw, 28px)/1 KaiTi, STKaiti, serif !important;
  letter-spacing: 4px !important;
  text-shadow: 0 1px #fff7d5, 0 2px rgba(89, 60, 39, .2) !important;
}
#app .battle-top-actions { top: 8px !important; right: 7px !important; }
#app .battle-top-actions .pause-button,
#app .panel-battle-state .speed-cycle-button {
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 1px solid #84684b !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #fff1cf, #caa977) !important;
  box-shadow: inset 0 1px #fffbe9, 0 2px 0 #75543c, 0 4px 7px rgba(79, 53, 36, .18) !important;
  color: #4a372b !important;
}

#app .battle-panel {
  padding: 6px !important;
  border: 1px solid #927151 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(238, 222, 188, .72), rgba(199, 168, 122, .44)) !important;
  box-shadow: inset 0 1px rgba(255, 248, 218, .82), 0 5px 13px rgba(96, 68, 42, .14) !important;
}
#app .battle-panel:not(.opponent-panel) > .panel-heading {
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#app .panel-battle-state {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
}
#app .panel-battle-state::before {
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 35%;
  width: 30%;
  height: 29px;
  content: '';
  clip-path: polygon(3% 23%, 12% 10%, 30% 16%, 48% 5%, 67% 15%, 89% 8%, 98% 28%, 94% 78%, 70% 87%, 50% 76%, 28% 88%, 8% 77%);
  background: rgba(71, 62, 56, .54);
  filter: blur(.35px);
}
#app .panel-battle-state span {
  position: absolute !important;
  z-index: 1;
  top: 14px !important;
  left: 2px !important;
  right: auto !important;
  max-width: 27% !important;
  color: #5f4a39 !important;
  font: 700 9px/1.1 "Microsoft YaHei", sans-serif !important;
}
#app .panel-battle-state b {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff7e0 !important;
  font: 900 clamp(15px, 4vw, 21px)/1 KaiTi, STKaiti, serif !important;
  letter-spacing: 2px;
  text-shadow: 0 1px #3e342e, 0 2px 0 rgba(45, 38, 33, .4);
}
#app .panel-battle-state .speed-cycle-button {
  position: absolute !important;
  z-index: 2;
  top: 4px !important;
  right: -4px !important;
  display: grid !important;
  grid-template-rows: 16px 10px !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 1px 2px 2px !important;
}

#app #battle-canvas {
  border: 2px solid #806348 !important;
  border-radius: 9px !important;
  background: #d0b58a !important;
  box-shadow: inset 0 0 0 1px #fff1cf, 0 4px 0 rgba(102, 73, 47, .48), 0 8px 15px rgba(85, 59, 38, .15) !important;
}
#app .control-panel {
  padding: 7px 8px 8px !important;
  border: 1px solid #927151 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(240, 222, 185, .94), rgba(202, 171, 124, .9)) !important;
  box-shadow: inset 0 1px #fff6d7, 0 5px 12px rgba(96, 68, 42, .14) !important;
}
#app .reserve {
  padding: 6px !important;
  gap: 5px !important;
  border: 2px solid #76563e !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #9b7853, #6e503b) !important;
  box-shadow: inset 0 2px rgba(255, 231, 185, .58), inset 0 -3px #58402f, 0 3px 0 rgba(91, 63, 42, .52) !important;
}
#app .reserve-unit,
#app .reserve-empty {
  border: 1px solid #8e7759 !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #fffdf1, #f4ead2 67%, #ddcaaa) !important;
  box-shadow: inset 0 2px #fffefa, inset 0 -3px #c1a982, 0 2px 0 rgba(87, 61, 39, .5) !important;
}
#app .reserve-ad-slot {
  border: 1px solid #9a7135 !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #f1d37c, #c38d42 68%, #936033) !important;
  box-shadow: inset 0 2px #fff3b7, inset 0 -3px #80532f, 0 2px 0 rgba(84, 55, 32, .58) !important;
}
#app .action-row .recruit-action {
  border: 2px solid #7e3d32 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #d97959, #b34f40 70%, #913d36) !important;
  box-shadow: inset 0 2px #f6b28c, inset 0 -3px #84362f, 0 3px 0 #65362f !important;
  color: #fff4dc !important;
}
#app .action-row .auto-merge-button {
  border: 1px solid #637568 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #d9dfc6, #9daf97) !important;
  box-shadow: inset 0 2px #f5f6db, 0 3px 0 #5c705e !important;
  color: #3f4d3f !important;
}

@media (max-width: 380px) {
  #app .app-brand { min-height: 52px !important; height: 52px !important; }
  #app .app-brand::before { width: 48%; height: 40px; }
  #app .app-brand::after { width: 44%; height: 31px; }
  #app .battle-title { font-size: 19px !important; letter-spacing: 3px !important; }
  #app .panel-battle-state::before { left: 29%; width: 42%; }
  #app .panel-battle-state .speed-cycle-button { right: -7px !important; }
}

/* Battle reference match v2.1: the lower controls read as compact ink-and-
   bronze seals, not generic rectangular web buttons.  The DOM and hitboxes
   remain unchanged; only the battlefield presentation is re-skinned. */
#app .action-row {
  min-height: 46px !important;
  align-items: stretch !important;
  gap: 7px !important;
  padding-inline: 8px !important;
}
#app .action-row .recruit-action {
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 3px 14px !important;
  border: 2px solid #833d32 !important;
  border-radius: 7px 8px 6px 7px !important;
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(255, 203, 155, .12) 8px 10px, transparent 10px 100%),
    linear-gradient(180deg, #d67558 0, #bd5947 68%, #9c4439 100%) !important;
  box-shadow:
    inset 0 2px rgba(255, 220, 177, .64),
    inset 0 -3px #80352f,
    0 3px 0 #61352f,
    0 5px 8px rgba(83, 53, 39, .14) !important;
  color: #fff2d7 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  font: 900 17px/1 KaiTi, STKaiti, serif !important;
  letter-spacing: 2px !important;
  text-shadow: 0 1px #74342f, 0 2px rgba(100, 45, 35, .25) !important;
}
#app .action-row .recruit-action .recruit-label,
#app .action-row .recruit-action .recruit-cost {
  position: relative;
  z-index: 1;
}
#app .action-row .recruit-action .recruit-label {
  align-self: end;
  line-height: 1.05;
}
#app .action-row .recruit-action .recruit-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: start;
  margin-top: 1px;
  font: 900 12px/1 KaiTi, STKaiti, serif;
  letter-spacing: 1px;
}
#app .action-row .recruit-action .recruit-coin {
  display: inline-grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 1px solid #ffe6a6;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2a9 0 18%, #e2ad43 22% 62%, #a66b2e 66% 100%);
  color: #8d4b2f;
  font: 900 9px/1 system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow: none;
}
#app .action-row .recruit-action::before,
#app .action-row .recruit-action::after {
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  content: '';
  border-inline: 1px solid rgba(255, 207, 163, .45);
  pointer-events: none;
}
#app .action-row .recruit-action::before { top: 4px; border-top: 1px solid rgba(255, 232, 196, .48); }
#app .action-row .recruit-action::after { bottom: 4px; border-bottom: 1px solid rgba(100, 42, 36, .32); }

#app .action-row .auto-merge-button,
#app .action-row .active-item-action {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 3px 2px !important;
  border: 2px solid #647563 !important;
  border-radius: 7px 6px 8px 6px !important;
  background: linear-gradient(145deg, #d9ddc5 0, #b2c0a8 62%, #879a87 100%) !important;
  box-shadow: inset 0 2px rgba(250, 251, 222, .8), inset 0 -3px #728271, 0 3px 0 #526256 !important;
  color: #39493d !important;
  font: 900 12px/1.05 KaiTi, STKaiti, serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px #eef2d5 !important;
}
#app .action-row .auto-merge-button::before,
#app .action-row .active-item-action::before {
  position: absolute;
  inset: 4px 3px;
  content: '';
  border: 1px solid rgba(69, 87, 69, .38);
  border-radius: 4px;
  pointer-events: none;
}
#app .action-row .auto-merge-button span { position: relative; z-index: 1; }
#app .action-row .auto-merge-button.is-unavailable {
  border-color: #6a776b !important;
  background: linear-gradient(145deg, #d0d6c0 0, #aab7a3 62%, #829181 100%) !important;
  color: #435144 !important;
}
#app .action-row .active-item-action {
  border-color: #967345 !important;
  background: linear-gradient(145deg, #f0d79a 0, #c69d58 65%, #a4773f 100%) !important;
  box-shadow: inset 0 2px rgba(255, 244, 190, .75), inset 0 -3px #936737, 0 3px 0 #76512f !important;
  color: #553c2b !important;
}

/* Soft-disabled controls keep their hit area alive so an unavailable action
   can explain why it cannot run. This is especially important for gold,
   cooldown, and post-settlement states on touch screens. */
#app button.is-soft-disabled {
  cursor: not-allowed !important;
  filter: grayscale(.52) saturate(.62) !important;
  opacity: .64 !important;
}
#app button.is-soft-disabled:active {
  transform: translateY(1px) scale(.98);
}
#app .action-row .active-item-action.is-soft-disabled,
#app .action-row .auto-merge-button.is-soft-disabled,
#app .action-row .recruit-action.is-soft-disabled,
#app .reserve-ad-slot.is-soft-disabled {
  filter: grayscale(.62) saturate(.58) !important;
}

/* Keep the reference's quiet parchment frame: the outer wash is intentionally
   low-contrast and contains no separate scenic silhouettes. */
#app::before { opacity: .14; }

@media (max-width: 380px) {
  #app .action-row { gap: 5px !important; padding-inline: 4px !important; }
  #app .action-row .recruit-action {
    flex-basis: 90px !important;
    width: 90px !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  #app .action-row .recruit-action .recruit-cost { font-size: 11px; }
  #app .action-row .auto-merge-button,
  #app .action-row .active-item-action {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Battle reference match v2.2: keep the side field quiet.  The reference
   places its pale wash only around the title/wave rail and the bottom shelf;
   the long middle band is a single clean parchment tone. */
#app {
  background: #f3e8d2 !important;
}
#app::before {
  inset: 0 0 auto !important;
  height: 126px !important;
  z-index: 0 !important;
  opacity: .34 !important;
  clip-path: inset(0 0 0 0) !important;
  background:
    linear-gradient(180deg, rgba(235, 239, 226, .16), rgba(243, 232, 210, .08)),
    url('./assets/home-lobby-background-muted-v1.png') center 22% / 100% auto no-repeat !important;
  filter: grayscale(.3) saturate(.62) contrast(1.04) blur(.2px) !important;
}
#app::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 158px;
  content: '';
  pointer-events: none;
  z-index: 0;
  opacity: .34;
  clip-path: inset(0 0 0 0);
  background:
    linear-gradient(0deg, rgba(235, 239, 226, .15), rgba(243, 232, 210, .08)),
    url('./assets/home-lobby-background-muted-v1.png') center bottom / 100% auto no-repeat;
  filter: grayscale(.3) saturate(.62) contrast(1.04) blur(.2px);
}

/* The local surfaces keep the end-only ink visible through the parchment
   panels, while their own boxes prevent it from entering the battle middle. */
#app .app-brand {
  background: transparent !important;
}
#app .battle-panel:not(.opponent-panel) > .panel-heading {
  background: transparent !important;
}
#app .control-panel {
  background: linear-gradient(145deg, rgba(240, 222, 185, .76), rgba(202, 171, 124, .62)) !important;
}
#app .status {
  background: linear-gradient(180deg, rgba(244, 232, 210, .64), rgba(230, 215, 188, .56)) !important;
}

/* Locked reference-detail pass: add the small carved-plaque and seal cues
   without changing the already-approved background zoning. */
#app .app-brand::before {
  border: 2px solid #9a794e !important;
  border-radius: 5px !important;
  background:
    radial-gradient(circle at 7px 7px, #a27d4c 0 1.5px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 7px) 7px, #a27d4c 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 7px calc(100% - 7px), #a27d4c 0 1.5px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #a27d4c 0 1.5px, transparent 1.8px),
    linear-gradient(180deg, #fff8e1 0, #ead6aa 72%, #d1af79 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 224, .84),
    inset 0 -3px rgba(123, 88, 54, .2),
    0 0 0 2px rgba(157, 119, 70, .26),
    0 3px 0 rgba(105, 75, 48, .4),
    0 7px 12px rgba(92, 68, 45, .14) !important;
}
#app .app-brand::after {
  border-color: rgba(137, 105, 71, .72) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 204, .32) !important;
}
#app .panel-battle-state::before {
  background:
    radial-gradient(ellipse at 17% 30%, rgba(255, 250, 228, .12) 0 5%, transparent 16%),
    radial-gradient(ellipse at 71% 70%, rgba(30, 27, 24, .16) 0 7%, transparent 20%),
    rgba(71, 62, 56, .58) !important;
}
#app .action-row .recruit-action {
  border-radius: 7px 8px 6px 8px !important;
  background:
    radial-gradient(circle at 10px 8px, rgba(255, 224, 187, .34) 0 1px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 8px), rgba(103, 41, 35, .3) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent 0 8px, rgba(255, 203, 155, .12) 8px 10px, transparent 10px 100%),
    linear-gradient(180deg, #d67558 0, #bd5947 68%, #9c4439 100%) !important;
}
#app .action-row .auto-merge-button {
  background:
    radial-gradient(circle at 8px 8px, rgba(246, 248, 215, .34) 0 1px, transparent 1.6px),
    linear-gradient(145deg, #d9ddc5 0, #b2c0a8 62%, #879a87 100%) !important;
}

/* Reference-normalized mobile shell: the 393px composition has a short
   title/wave header and a taller parchment board.  This changes only the
   rendered canvas envelope; the logical 12x7 board and route stay intact. */
@media (max-width: 800px) {
  #app .app-brand {
    min-height: 38px !important;
    height: 38px !important;
    padding: 1px 42px 2px !important;
  }
  #app .app-brand::before {
    top: 2px;
    height: 30px;
  }
  #app .app-brand::after {
    top: 5px;
    height: 23px;
  }
  #app .battle-title {
    font-size: 18px !important;
    letter-spacing: 3px !important;
  }
  #app .battle-panel:not(.opponent-panel) > .panel-heading,
  #app .panel-battle-state {
    min-height: 30px !important;
    height: 30px !important;
  }
  #app .panel-battle-state::before {
    top: 3px;
    height: 23px;
  }
  #app .panel-battle-state b { top: 6px; font-size: 14px !important; }
  #app .panel-battle-state span { top: 10px !important; }
  #app .panel-battle-state .speed-cycle-button { top: -10px !important; }
  #app #battle-canvas {
    height: 149vw !important;
    margin-bottom: -15px !important;
    max-height: none !important;
  }
  #app .reserve-row { grid-template-columns: 40px minmax(0, 1fr) 40px !important; }
  #app .status { margin-top: 5px !important; }
}

@media (max-width: 380px) {
  #app .app-brand { min-height: 36px !important; height: 36px !important; }
  #app .app-brand::before { height: 28px; }
  #app .app-brand::after { height: 21px; }
  #app .battle-title { font-size: 17px !important; }
  #app .battle-panel:not(.opponent-panel) > .panel-heading,
  #app .panel-battle-state { min-height: 28px !important; height: 28px !important; }
  #app .panel-battle-state b { top: 5px; font-size: 13px !important; }
  #app #battle-canvas { height: 149vw !important; margin-bottom: -15px !important; }
}

@media (max-width: 800px) {
  #app .reserve {
    height: 54px !important;
    min-height: 54px !important;
  }
  #app .status {
    min-height: 20px !important;
    padding-block: 3px !important;
    line-height: 1.15 !important;
  }
}

/* Reference action order: tool, recruit seal, merge seal, tool.  Keep the
   controls in one centered cluster while preserving each original button id. */
#app .action-row {
  position: relative !important;
  justify-content: initial !important;
  transform: none !important;
}
#app .action-row .recruit-action,
#app .action-row .auto-merge-button,
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans {
  position: absolute !important;
  top: 0 !important;
  margin: 0 !important;
  order: initial !important;
}
#app .action-row #use-heavenly-craft { left: 25% !important; }
#app .action-row .recruit-action { left: 38.5% !important; }
#app .action-row .auto-merge-button { left: 64% !important; }
#app .action-row #use-summon-beans { left: 76.7% !important; }
@media (max-width: 380px) {
  #app .action-row #use-heavenly-craft { left: 25% !important; }
  #app .action-row .recruit-action { left: 38.5% !important; }
  #app .action-row .auto-merge-button { left: 64% !important; }
  #app .action-row #use-summon-beans { left: 76.7% !important; }
}

/* Desktop first-screen fit: retain the same board aspect ratio, but let a
   short wide viewport keep the reserve shelf and status inside the viewport. */
@media (min-width: 801px) and (max-height: 1200px) {
  #app #battle-canvas {
    width: min(calc(100% + 8px), calc(45dvh - 45px)) !important;
    max-width: calc(100% + 8px) !important;
    height: auto !important;
    margin-inline: auto !important;
    margin-bottom: 0 !important;
  }
}

/* Latest battle layout: preserve the canvas' native 720:1172 ratio so every
   logical board cell remains square on narrow desktop/mobile viewports.  The
   reserve shelf stays beside the coin display; each reserve card is a true
   square and keeps its own raised edge without a surrounding frame. */
@media (max-width: 800px) {
  #app #battle-canvas {
    height: auto !important;
    aspect-ratio: 720 / 1172 !important;
    margin-bottom: 0 !important;
    max-height: none !important;
  }

  #app .reserve-row {
    grid-template-columns: 48px minmax(0, 1fr) 0 !important;
    grid-template-rows: 54px !important;
    align-items: center !important;
    align-content: center !important;
    gap: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
  }
  #app .recruit-economy {
    grid-area: 1 / 1 / 2 / 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
    width: 48px !important;
    min-width: 48px !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  #app .recruit-economy .resource-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  #app .recruit-economy span b { font-size: 13px !important; }
  #app .reserve-row .reserve {
    grid-area: 1 / 2 / 2 / 3 !important;
    grid-column: 2 !important;
    align-self: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 3px !important;
  }
  #app .reserve-unit,
  #app .reserve-empty,
  #app .reserve-ad-slot {
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Recruit is the visual anchor.  The merge control follows it, while the
     two item actions form a compact right-hand cluster. */
  #app .action-row {
    height: 42px !important;
    min-height: 42px !important;
    overflow: visible !important;
  }
  #app .action-row .recruit-action {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  #app .action-row .auto-merge-button {
    left: calc(50% + 50px) !important;
  }
  #app .action-row #use-heavenly-craft {
    left: calc(50% - 126px) !important;
    width: 36px !important;
    min-width: 36px !important;
  }
  #app .action-row #use-summon-beans {
    left: calc(50% - 88px) !important;
    width: 36px !important;
    min-width: 36px !important;
  }
}

@media (max-width: 380px) {
  #app #battle-canvas {
    height: auto !important;
    aspect-ratio: 720 / 1172 !important;
  }
  #app .reserve-row {
    grid-template-columns: 46px minmax(0, 1fr) 0 !important;
    grid-template-rows: 53px !important;
    height: 58px !important;
    min-height: 58px !important;
  }
  #app .recruit-economy {
    width: 46px !important;
    min-width: 46px !important;
  }
  #app .reserve-row .reserve {
    height: 48px !important;
    min-height: 48px !important;
  }
  #app .reserve-unit,
  #app .reserve-empty,
  #app .reserve-ad-slot {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #app .action-row .recruit-action {
    left: 50% !important;
    width: 90px !important;
    min-width: 90px !important;
  }
  #app .action-row .auto-merge-button {
    left: calc(50% + 48px) !important;
    width: 38px !important;
    min-width: 38px !important;
  }
  #app .action-row #use-heavenly-craft {
    left: calc(50% - 121px) !important;
    width: 34px !important;
    min-width: 34px !important;
  }
  #app .action-row #use-summon-beans {
    left: calc(50% - 85px) !important;
    width: 34px !important;
    min-width: 34px !important;
  }
}

/* Insufficient-gold state: keep the button's footprint but make it quiet and
   visibly unavailable. It stays clickable only so the one-second translucent
   explanation can be shown on mouse/touch. */
#app .action-row .recruit-action.is-insufficient {
  border-color: #8c8b7d !important;
  background: linear-gradient(180deg, #c8c8b8, #9d9f98 70%, #7d817b) !important;
  box-shadow: inset 0 2px rgba(245, 244, 218, .64), inset 0 -3px #73776f, 0 3px 0 #62675f !important;
  color: #f3f0d8 !important;
  cursor: not-allowed;
  filter: saturate(.45);
  opacity: .82;
}
#app .action-row .recruit-action.is-insufficient:active {
  transform: translateY(1px) !important;
}

/* Active item controls use the same compact seal language as 自动合成.  Keep
   征兵 centred within one flex cluster, with both named tools to its left and
   自动合成 to its right.  Explicit ID selectors clear the older responsive
   absolute offsets so every viewport shares the same baseline. */
#app .action-row {
  position: relative !important;
  display: flex !important;
  min-height: 50px !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-inline: 4px !important;
  overflow: visible !important;
}
#app .action-row > button,
#app .action-row .recruit-action,
#app .action-row .auto-merge-button,
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  align-self: center !important;
  box-sizing: border-box !important;
}
#app .action-row #use-heavenly-craft[hidden],
#app .action-row #use-summon-beans[hidden] {
  display: none !important;
}
#app .action-row #use-heavenly-craft { order: 1 !important; }
#app .action-row #use-summon-beans { order: 2 !important; }
#app .action-row .recruit-action { order: 3 !important; }
#app .action-row .auto-merge-button { order: 4 !important; }

#app .action-row .auto-merge-button,
#app .action-row .active-item-action {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 4px 3px !important;
  border: 2px solid #647563 !important;
  border-radius: 7px 6px 8px 6px !important;
  background: linear-gradient(145deg, #d9ddc5 0, #b2c0a8 62%, #879a87 100%) !important;
  box-shadow: inset 0 2px rgba(250, 251, 222, .8), inset 0 -3px #728271, 0 3px 0 #526256 !important;
  color: #39493d !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  font: 900 11px/1.05 KaiTi, STKaiti, serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px #eef2d5 !important;
}
#app .action-row #use-summon-beans {
  flex-basis: 72px !important;
  width: 58px !important;
  min-width: 58px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
#app .action-row .active-item-action::before,
#app .action-row .auto-merge-button::before {
  position: absolute;
  inset: 4px 3px;
  content: '';
  border: 1px solid rgba(69, 87, 69, .38);
  border-radius: 4px;
  pointer-events: none;
}
#app .action-row .active-item-action:disabled {
  border-color: #8e927f !important;
  background: linear-gradient(145deg, #c7cbb9 0, #a3aa9a 62%, #818a7c 100%) !important;
  box-shadow: inset 0 2px rgba(250, 251, 222, .62), inset 0 -3px #707a6f, 0 3px 0 #566156 !important;
  color: #eef0d9 !important;
  opacity: .8;
}
#app .action-row .auto-merge-button.is-unavailable {
  border-color: #6a776b !important;
  background: linear-gradient(145deg, #d0d6c0 0, #aab7a3 62%, #829181 100%) !important;
  color: #435144 !important;
}
#app .action-row .recruit-action {
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 46px !important;
  min-height: 46px !important;
}

@media (max-width: 380px) {
  #app .action-row { gap: 4px !important; padding-inline: 2px !important; }
  #app .action-row .recruit-action {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
  }
  #app .action-row .auto-merge-button,
  #app .action-row #use-heavenly-craft {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
  }
  #app .action-row #use-summon-beans {
    flex-basis: 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    font-size: 9px !important;
  }
}
#app > .feedback.feedback--insufficient-gold {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: 50%;
  bottom: auto;
  width: max-content;
  min-width: 146px;
  padding: 13px 20px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(111, 78, 53, .78);
  border-radius: 12px 9px 13px 8px;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(116, 98, 70, .12), transparent 38%),
    radial-gradient(ellipse at 86% 78%, rgba(116, 98, 70, .1), transparent 40%),
    rgba(235, 222, 190, .9);
  box-shadow: 0 4px 0 rgba(103, 73, 51, .48), 0 12px 28px rgba(52, 38, 29, .3), inset 0 1px rgba(255, 250, 222, .85);
  backdrop-filter: blur(3px);
}
.feedback.feedback--insufficient-gold b { color: #4c342a; font: 900 16px/1.15 KaiTi, STKaiti, serif; letter-spacing: 2px; text-shadow: 0 1px rgba(255, 248, 218, .8); }
.feedback.feedback--insufficient-gold span { color: #725643; font: 900 12px/1.3 KaiTi, STKaiti, serif; }
@keyframes insufficient-gold-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#app > .feedback.feedback--insufficient-gold { animation: insufficient-gold-in .18s ease-out; }

/* Final speed-control alignment: older responsive passes positioned the
   selector with a negative top offset on narrow screens, which made the
   button look tilted and detached from the wave heading. Keep one stable
   centre line for every viewport while preserving the centre chevrons and
   right-aligned multiplier. */
#app .panel-battle-state .speed-cycle-button {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  transform: translateY(-50%) !important;
  rotate: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  padding: 2px 3px !important;
  border: 1px solid #806344 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #e8e5c8, #b6b78f) !important;
  box-shadow: inset 0 1px #fff8df, 0 2px 0 #78563d !important;
  color: #4b5742 !important;
}
#app .panel-battle-state .speed-symbol {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: 10px !important;
  height: 8px !important;
  margin: 0 !important;
  transform: none !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px !important;
  width: 4px !important;
  height: 4px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
}
#app .panel-battle-state .speed-symbol::before { left: 0 !important; }
#app .panel-battle-state .speed-symbol::after { left: 4px !important; }
#app .panel-battle-state .speed-label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 800px) {
  #app .panel-battle-state .speed-cycle-button {
    top: 50% !important;
    right: 0 !important;
  }
}
@media (max-width: 390px) {
  #app .panel-battle-state .speed-cycle-button {
    width: 33px !important;
    min-width: 33px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}
@media (max-width: 380px) {
  #app .panel-battle-state .speed-cycle-button {
    top: 50% !important;
    right: 0 !important;
  }
}

/* Give the centred fast-forward mark and the multiplier their own breathing
   room inside the compact 36px control. The button size stays matched to the
   pause control; only the inner composition is separated. */
#app .panel-battle-state .speed-cycle-button {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}
#app .panel-battle-state .speed-symbol {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px !important;
  width: 3px !important;
  height: 3px !important;
  border-top-width: 2px !important;
  border-right-width: 2px !important;
}
#app .panel-battle-state .speed-symbol::before { left: 0 !important; }
#app .panel-battle-state .speed-symbol::after { left: 4px !important; }
#app .panel-battle-state .speed-label {
  position: absolute !important;
  top: 50% !important;
  right: -1px !important;
  left: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Final vertical composition: action labels read as two balanced rows, while
   the speed mark sits above its smaller multiplier with a quiet gap. */
#app .panel-battle-state .speed-cycle-button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 2px 1px 3px !important;
}
#app .panel-battle-state .speed-symbol {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 12px !important;
  height: 10px !important;
  transform: none !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  top: 1px !important;
  width: 5px !important;
  height: 5px !important;
  border-top-width: 2px !important;
  border-right-width: 2px !important;
}
#app .panel-battle-state .speed-symbol::before { left: 0 !important; }
#app .panel-battle-state .speed-symbol::after { left: 6px !important; }
#app .panel-battle-state .speed-label {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 7px !important;
  line-height: 1 !important;
}
#app .action-row .active-item-action {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  align-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 1px !important;
  padding: 3px 2px !important;
  font: 900 10px/1 KaiTi, STKaiti, serif !important;
  white-space: nowrap !important;
}
#app .action-row .active-item-action > span {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Match the fast-forward control's outer right edge to the pause control and
   give its double-arrow the same visual weight as the pause glyph. */
#app .panel-battle-state .speed-cycle-button {
  right: -4px !important;
}
#app .panel-battle-state .speed-symbol {
  /* Match the visible fast-forward mark to the pause key's double-bar
     envelope instead of letting the two chevrons read oversized. */
  width: 14px !important;
  height: 11px !important;
}
#app .panel-battle-state .speed-symbol::before,
#app .panel-battle-state .speed-symbol::after {
  width: 6px !important;
  height: 6px !important;
}
#app .panel-battle-state .speed-symbol::before { left: 0 !important; }
#app .panel-battle-state .speed-symbol::after { left: 7px !important; }

/* Final action-row geometry: the recruit button is the single visual anchor.
   Side controls are positioned from its centre so their presence never
   shifts the recruit hit target left or right. */
#app .action-row {
  position: relative !important;
  display: block !important;
  height: 46px !important;
  min-height: 46px !important;
  overflow: visible !important;
}
#app .action-row > button {
  position: absolute !important;
  top: 0 !important;
  margin: 0 !important;
  transform: none !important;
  align-self: auto !important;
}
#app .action-row .recruit-action,
#app .action-row .auto-merge-button,
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}
#app .action-row .recruit-action {
  left: 50% !important;
  width: 96px !important;
  min-width: 96px !important;
  flex: none !important;
  transform: translateX(-50%) !important;
}
#app .action-row #use-heavenly-craft {
  left: var(--action-heavenly-left, calc(50% - 190px)) !important;
  width: 58px !important;
  min-width: 58px !important;
}
#app .action-row #use-summon-beans {
  left: var(--action-summon-left, calc(50% - 126px)) !important;
  width: 72px !important;
  min-width: 72px !important;
}
#app .action-row .auto-merge-button {
  left: var(--action-auto-left, calc(50% + 54px)) !important;
  width: 58px !important;
  min-width: 58px !important;
}

@media (max-width: 800px) {
  #app .action-row {
    height: 46px !important;
    min-height: 46px !important;
  }
  #app .action-row .recruit-action {
    width: 96px !important;
    min-width: 96px !important;
  }
  #app .action-row #use-heavenly-craft {
    left: var(--action-heavenly-left, calc(50% - 168px)) !important;
    width: 48px !important;
    min-width: 48px !important;
  }
  #app .action-row #use-summon-beans {
    left: var(--action-summon-left, calc(50% - 116px)) !important;
    width: 48px !important;
    min-width: 48px !important;
  }
  #app .action-row .auto-merge-button {
    left: var(--action-auto-left, calc(50% + 52px)) !important;
    width: 48px !important;
    min-width: 48px !important;
  }
}

@media (max-width: 380px) {
  #app .action-row {
    height: 42px !important;
    min-height: 42px !important;
  }
  #app .action-row .recruit-action {
    width: 88px !important;
    min-width: 88px !important;
  }
  #app .action-row #use-heavenly-craft {
    left: var(--action-heavenly-left, calc(50% - 156px)) !important;
    width: 44px !important;
    min-width: 44px !important;
  }
  #app .action-row #use-summon-beans {
    left: var(--action-summon-left, calc(50% - 108px)) !important;
    width: 44px !important;
    min-width: 44px !important;
  }
  #app .action-row .auto-merge-button {
    left: var(--action-auto-left, calc(50% + 48px)) !important;
    width: 44px !important;
    min-width: 44px !important;
  }
}

/* The two active-item actions use the same physical box as auto-merge at
   every breakpoint; their two-line labels scale inside that shared box. */
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans,
#app .action-row .auto-merge-button {
  box-sizing: border-box !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 46px !important;
  min-height: 46px !important;
}

@media (max-width: 800px) {
  #app .action-row #use-heavenly-craft,
  #app .action-row #use-summon-beans,
  #app .action-row .auto-merge-button {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (max-width: 380px) {
  #app .action-row #use-heavenly-craft,
  #app .action-row #use-summon-beans,
  #app .action-row .auto-merge-button {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* Runtime alignment owns the horizontal size so the two item buttons and
   自动合成 always share exactly the same footprint. The responsive defaults
   prevent a first-paint overflow before the measured reserve geometry lands. */
#app .action-row { --action-item-size: 58px; }
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans,
#app .action-row .auto-merge-button {
  flex-basis: var(--action-item-size) !important;
  width: var(--action-item-size) !important;
  min-width: var(--action-item-size) !important;
}
@media (max-width: 800px) {
  #app .action-row { --action-item-size: 48px; }
}
@media (max-width: 380px) {
  #app .action-row { --action-item-size: 44px; }
}

/* Stable H5 viewport: the document itself never grows/shrinks with the
   mobile browser toolbar or with reserve-card image loading. Scroll belongs
   to the app surface, so the battle frame and its controls keep one fixed
   scale while the taller board remains reachable. */
html,
body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
#app {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Do not let the fixed H5 viewport squeeze the board's intrinsic height. The
   canvas keeps its 720:1172 ratio, and the control shelf follows it in normal
   flow; only the app surface scrolls when the full battle exceeds the screen. */
#app .battle-panel:not(.opponent-panel),
#app #battle-canvas,
#app .control-panel {
  flex: 0 0 auto !important;
}
#app .battle-panel:not(.opponent-panel) {
  min-height: max-content !important;
}

/* D-17 interaction hierarchy: the recruit seal stays on the row centre;
   optional active tools occupy stable side anchors only while owned. */
#app .action-row {
  position: relative !important;
  display: block !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  overflow: visible !important;
}
#app .action-row > button {
  position: absolute !important;
  top: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#app .action-row .recruit-action,
#app .action-row .auto-merge-button,
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans {
  align-self: center !important;
  pointer-events: auto !important;
}
#app .action-row .recruit-action {
  left: 50% !important;
  width: 116px !important;
  min-width: 116px !important;
  height: 50px !important;
  min-height: 50px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}
#app .action-row #use-heavenly-craft,
#app .action-row #use-summon-beans,
#app .action-row .auto-merge-button {
  width: 54px !important;
  min-width: 54px !important;
  height: 46px !important;
  min-height: 46px !important;
  z-index: 4 !important;
}
#app .action-row #use-heavenly-craft { left: calc(50% - 178px) !important; }
#app .action-row #use-summon-beans { left: calc(50% - 118px) !important; }
#app .action-row .auto-merge-button { left: calc(50% + 66px) !important; }

/* A conic ring reads remaining time clockwise from 12 o'clock. The inner
   mask keeps the existing two-line label and seal artwork unobstructed. */
#app .action-row .active-item-cooldown-ring {
  position: absolute !important;
  inset: 2px !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: inherit;
  background: conic-gradient(from -90deg, #e5bd62 calc(var(--cooldown-progress, 0) * 100%), rgba(90, 104, 89, .30) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events: none;
}
#app .action-row .active-item-action > span:not(.active-item-cooldown-ring) {
  position: relative !important;
  z-index: 1 !important;
}
#app .action-row .active-item-action.is-cooling { color: #697261 !important; }
#app .action-row .active-item-action.is-ready {
  border-color: #76915d !important;
  background: linear-gradient(145deg, #e9edc8 0, #bad49a 62%, #779b69 100%) !important;
  box-shadow: inset 0 2px #fffbd8, inset 0 -3px #66845d, 0 3px 0 #526256, 0 0 8px rgba(230, 213, 112, .30) !important;
  color: #304934 !important;
}

/* Owned passive effects have a quiet bottom-right shelf. Empty inventory is
   truly absent, so it cannot create fake content or steal control space. */
#app .passive-item-strip {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 1px 4px 0;
  overflow: hidden;
}
#app .passive-item-strip.is-empty { display: none !important; }
#app .passive-item-badge {
  display: grid;
  min-width: 0;
  max-width: 132px;
  gap: 1px;
  padding: 3px 6px;
  border: 1px solid rgba(125, 104, 70, .62);
  border-radius: 6px 5px 7px 5px;
  background: rgba(245, 232, 194, .78);
  color: #5d4939;
  box-shadow: inset 0 1px rgba(255, 252, 218, .78), 0 1px 0 rgba(98, 72, 45, .28);
  white-space: nowrap;
}
#app .passive-item-badge b {
  overflow: hidden;
  font: 900 9px/1.1 KaiTi, STKaiti, serif;
  text-overflow: ellipsis;
}
#app .passive-item-badge small {
  overflow: hidden;
  color: #82694e;
  font: 700 7px/1.1 system-ui, sans-serif;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  #app .action-row { height: 48px !important; min-height: 48px !important; }
  #app .action-row .recruit-action {
    width: 104px !important;
    min-width: 104px !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }
  #app .action-row #use-heavenly-craft,
  #app .action-row #use-summon-beans,
  #app .action-row .auto-merge-button {
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  #app .action-row #use-heavenly-craft { left: calc(50% - 160px) !important; }
  #app .action-row #use-summon-beans { left: calc(50% - 106px) !important; }
  #app .action-row .auto-merge-button { left: calc(50% + 58px) !important; }
  #app .passive-item-strip { justify-content: center; }
}

@media (max-width: 360px) {
  #app .action-row .recruit-action {
    width: 94px !important;
    min-width: 94px !important;
    font-size: 13px !important;
  }
  #app .action-row #use-heavenly-craft,
  #app .action-row #use-summon-beans,
  #app .action-row .auto-merge-button {
    width: 42px !important;
    min-width: 42px !important;
  }
  #app .action-row #use-heavenly-craft { left: calc(50% - 139px) !important; }
  #app .action-row #use-summon-beans { left: calc(50% - 93px) !important; }
  #app .action-row .auto-merge-button { left: calc(50% + 52px) !important; }
}

/* Confirmed bottom layout: the two owned active tools flank the centered
   recruit seal, while speed and auto-merge form a compact vertical rail at
   the reserve shelf's right edge. */
#app .reserve-row {
  grid-template-columns: minmax(52px, 1fr) minmax(0, 430px) 50px !important;
  align-items: center !important;
  column-gap: 6px !important;
}
#app .reserve-row .reserve-side-controls {
  grid-column: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-direction: column;
}
#app .reserve-side-controls > button {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 3px !important;
  place-items: center !important;
  box-sizing: border-box !important;
  transform: none !important;
}
#app .reserve-side-controls .speed-button {
  grid-template-rows: 16px 10px !important;
  gap: 0 !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
#app .reserve-side-controls .speed-symbol {
  display: block !important;
  font-size: 18px !important;
  line-height: 14px !important;
}
#app .reserve-side-controls .speed-label {
  display: block !important;
  font-size: 9px !important;
  line-height: 10px !important;
}
#app .reserve-side-controls .auto-merge-button {
  grid-template-rows: 1fr 1fr !important;
  gap: 0 !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
#app .action-row #use-heavenly-craft { left: var(--action-heavenly-left, calc(50% - 178px)) !important; }
#app .action-row #use-summon-beans { left: var(--action-summon-left, calc(50% + 66px)) !important; }

@media (max-width: 520px) {
  #app .reserve-row { grid-template-columns: minmax(42px, 1fr) minmax(0, 430px) 46px !important; column-gap: 4px !important; }
  #app .reserve-side-controls > button { width: 40px !important; min-width: 40px !important; height: 29px !important; min-height: 29px !important; }
  #app .reserve-side-controls .speed-symbol { font-size: 17px !important; }
}

@media (max-width: 380px) {
  #app .reserve-row { grid-template-columns: 40px minmax(0, 1fr) 42px !important; column-gap: 3px !important; }
  #app .reserve-side-controls > button { width: 38px !important; min-width: 38px !important; height: 27px !important; min-height: 27px !important; padding-inline: 2px !important; }
  #app .reserve-side-controls .speed-symbol { font-size: 15px !important; }
  #app .reserve-side-controls .speed-label,
  #app .reserve-side-controls .auto-merge-button { font-size: 8px !important; }
}

/* Final confirmed rail: the shovel advertisement occupies the upper slot;
   speed sits directly below it. Auto-merge remains in the action row beside
   the right-hand active item, so every control keeps an independent hit box. */
#app .reserve-side-controls {
  gap: 4px !important;
}
#app .reserve-side-controls .reserve-ad-slot,
#app .reserve-side-controls .speed-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 30px !important;
  min-height: 30px !important;
}
#app .reserve-side-controls .reserve-ad-slot {
  display: grid !important;
  place-items: center !important;
  border: 2px solid #80664f !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #fff0c3, #d6ad68) !important;
  box-shadow: inset 0 1px #fffbe0, 0 2px 0 #72513a !important;
}
#app .reserve-side-controls .reserve-ad-slot .shovel-icon {
  transform: scale(.64) rotate(-24deg) !important;
}
#app .reserve-side-controls .reserve-ad-slot .reserve-ad-video-icon,
#app .reserve-side-controls .reserve-ad-slot .reserve-ad-badge {
  transform: scale(.72) !important;
}
#app .action-row .auto-merge-button {
  left: var(--action-auto-left, calc(50% + 126px)) !important;
  top: 0 !important;
  display: grid !important;
  position: absolute !important;
  width: var(--action-item-size, 54px) !important;
  min-width: var(--action-item-size, 54px) !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  transform: none !important;
}
@media (max-width: 520px) {
  #app .reserve-side-controls .reserve-ad-slot,
  #app .reserve-side-controls .speed-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 29px !important;
    min-height: 29px !important;
  }
  #app .action-row .auto-merge-button { height: 44px !important; min-height: 44px !important; }
}
@media (max-width: 380px) {
  #app .reserve-side-controls .reserve-ad-slot,
  #app .reserve-side-controls .speed-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 27px !important;
    min-height: 27px !important;
  }
  #app .action-row .auto-merge-button { height: 42px !important; min-height: 42px !important; }
}

/* Active item buttons are permanent layout anchors. Before purchase they keep
   the same hit box and two-line name, but use a quiet disabled parchment so
   the recruit seal never shifts when inventory ownership changes. */
#app .action-row #use-heavenly-craft[hidden],
#app .action-row #use-summon-beans[hidden] {
  display: grid !important;
  visibility: visible !important;
}
#app .action-row .active-item-action.is-unowned {
  border-color: #8d917e !important;
  background: linear-gradient(145deg, #d1d1bc 0, #afb3a0 62%, #8d9685 100%) !important;
  box-shadow: inset 0 2px rgba(250, 251, 222, .62), inset 0 -3px #7a8374, 0 3px 0 #606b5d !important;
  color: #eef0d9 !important;
  filter: grayscale(.24) saturate(.62) !important;
  opacity: .84 !important;
}
#app .reserve-side-controls {
  transform: translateX(3px) !important;
}
@media (max-width: 380px) {
  #app .reserve-side-controls {
    transform: translateX(2px) !important;
  }
}

/* Layout closure: the reserve shelf is five independent square cards.  The
   old six-column grid made the fifth card borrow a phantom sixth column and
   pushed the cards outside their 50px row.  Keep the shelf transparent and
   let the five-card group centre itself beside the economy readout. */
#app .reserve-row {
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  grid-template-rows: 94px !important;
  height: 94px !important;
  min-height: 94px !important;
  align-items: start !important;
  align-content: start !important;
  column-gap: 6px !important;
}
#app .reserve-row .recruit-economy {
  align-self: start !important;
  padding-top: 2px !important;
}
#app .reserve-row .reserve {
  display: grid !important;
  grid-template-columns: repeat(5, 58px) !important;
  grid-template-rows: 58px !important;
  justify-content: center !important;
  align-content: start !important;
  align-items: start !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  align-self: start !important;
  margin-top: 2px !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#app .reserve-row .reserve-unit,
#app .reserve-row .reserve-empty {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}
#app .reserve-row .reserve-side-controls {
  grid-column: 3 !important;
  align-self: start !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 94px !important;
  min-height: 94px !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  transform: none !important;
}
#app .reserve-row .reserve-side-controls > button,
#app .reserve-row .reserve-side-controls .reserve-ad-slot,
#app .reserve-row .reserve-side-controls .speed-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot .shovel-icon {
  transform: rotate(-24deg) scale(.78) !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-video-icon {
  display: none !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-badge {
  right: 2px !important;
  bottom: 2px !important;
  min-width: 20px !important;
  padding: 1px 3px !important;
  font-size: 10px !important;
}
#app .reserve-row .reserve-side-controls .speed-button {
  display: grid !important;
  grid-template-rows: 24px 11px !important;
  gap: 1px !important;
  padding: 3px 2px !important;
}
#app .reserve-row .reserve-side-controls .speed-symbol {
  font-size: 23px !important;
  line-height: 23px !important;
}
#app .reserve-row .reserve-side-controls .speed-label {
  font-size: 9px !important;
  line-height: 11px !important;
}

@media (max-width: 520px) {
  #app .reserve-row {
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    grid-template-rows: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    column-gap: 4px !important;
  }
  #app .reserve-row .reserve {
    grid-template-columns: repeat(5, 52px) !important;
    grid-template-rows: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin-top: 2px !important;
    gap: 3px !important;
  }
  #app .reserve-row .reserve-unit,
  #app .reserve-row .reserve-empty {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
  #app .reserve-row .reserve-side-controls {
    width: 48px !important;
    min-width: 48px !important;
    height: 88px !important;
    min-height: 88px !important;
  }
  #app .reserve-row .reserve-side-controls > button,
  #app .reserve-row .reserve-side-controls .reserve-ad-slot,
  #app .reserve-row .reserve-side-controls .speed-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-button {
    grid-template-rows: 21px 10px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-symbol {
    font-size: 20px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 380px) {
  #app .reserve-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    column-gap: 3px !important;
  }
  #app .reserve-row .reserve {
    grid-template-columns: repeat(5, 46px) !important;
    grid-template-rows: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin-top: 2px !important;
    gap: 2px !important;
  }
  #app .reserve-row .reserve-unit,
  #app .reserve-row .reserve-empty {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  #app .reserve-row .reserve-side-controls {
    width: 44px !important;
    min-width: 44px !important;
    height: 82px !important;
    min-height: 82px !important;
  }
  #app .reserve-row .reserve-side-controls > button,
  #app .reserve-row .reserve-side-controls .reserve-ad-slot,
  #app .reserve-row .reserve-side-controls .speed-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-button {
    grid-template-rows: 19px 9px !important;
    font-size: 8px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-symbol {
    font-size: 18px !important;
    line-height: 18px !important;
  }
}

/* Final spacing pass: both right-rail buttons share the same centre line.
   The previous ad rule inherited align-self:start while speed was centred,
   producing a visible four-pixel horizontal jog.  Reserve row height now
   follows the actual rail stack instead of leaving a large dead band before
   the recruit row. */
#app .reserve-row {
  grid-template-rows: 70px !important;
  height: 70px !important;
  min-height: 70px !important;
}
#app .reserve-row .reserve-side-controls {
  height: 70px !important;
  min-height: 70px !important;
  align-items: center !important;
  gap: 4px !important;
}
#app .reserve-row .reserve-side-controls > button,
  #app .reserve-row .reserve-side-controls .reserve-ad-slot,
  #app .reserve-row .reserve-side-controls .speed-button {
    align-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot .shovel-icon {
  transform: rotate(-24deg) scale(.62) !important;
}
#app .reserve-row .reserve-side-controls .speed-button {
  grid-template-rows: 17px 9px !important;
}
#app .reserve-row .reserve-side-controls .speed-symbol {
  font-size: 18px !important;
  line-height: 18px !important;
}

@media (max-width: 520px) {
  #app .reserve-row {
    grid-template-rows: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
  }
  #app .reserve-row .reserve-side-controls {
    height: 66px !important;
    min-height: 66px !important;
  }
  #app .reserve-row .reserve-side-controls > button,
  #app .reserve-row .reserve-side-controls .reserve-ad-slot,
  #app .reserve-row .reserve-side-controls .speed-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-button {
    grid-template-rows: 19px 9px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-symbol {
    font-size: 18px !important;
    line-height: 18px !important;
  }
}

@media (max-width: 380px) {
  #app .reserve-row {
    grid-template-rows: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  #app .reserve-row .reserve-side-controls {
    height: 60px !important;
    min-height: 60px !important;
  }
  #app .reserve-row .reserve-side-controls > button,
  #app .reserve-row .reserve-side-controls .reserve-ad-slot,
  #app .reserve-row .reserve-side-controls .speed-button {
    width: 32px !important;
    min-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-button {
    grid-template-rows: 18px 8px !important;
  }
  #app .reserve-row .reserve-side-controls .speed-symbol {
    font-size: 17px !important;
    line-height: 17px !important;
  }
}

/* Large-desktop grid hardening: bind each shelf row to its own explicit
   grid area.  Without this, legacy implicit placement can put action-row on
   the reserve-row track at wide browser widths, visually stacking the
   recruit/tool buttons over the reserve cards. */
#app .control-panel {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas: "reserve-row" "action-row" "start" !important;
  row-gap: 4px !important;
}
#app .control-panel .reserve-row {
  grid-area: reserve-row !important;
}
#app .control-panel .action-row {
  grid-area: action-row !important;
}
#app .control-panel #start {
  grid-area: start !important;
}
#app .reserve-row .recruit-economy {
  grid-area: 1 / 1 / 2 / 2 !important;
}
#app .reserve-row #reserve {
  grid-area: 1 / 2 / 2 / 3 !important;
}
#app .reserve-row .reserve-side-controls {
  grid-area: 1 / 3 / 2 / 4 !important;
}

/* The formal 6x7 canvas has a taller native canvas because its 96px square
   cells must remain square.  Keep this selector for the query-only preview
   and the formal route on the same intrinsic ratio. */
#app #battle-canvas.layout-preview-6x7 {
  aspect-ratio: 720 / 1172 !important;
}

/* Shovel reward: keep the complete tool visible and move the reward count
   into a compact bottom-right badge so it never masks the shovel head. */
#app .reserve-row .reserve-side-controls .reserve-ad-slot {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot .reserve-tool-art {
  position: absolute !important;
  inset: 1px 2px 3px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot .shovel-icon {
  width: 30px !important;
  height: 39px !important;
  transform: rotate(-24deg) scale(.48) translateY(-1px) !important;
  transform-origin: center center !important;
}
#app .reserve-row .reserve-side-controls .reserve-ad-slot .reserve-ad-badge {
  right: 1px !important;
  bottom: 1px !important;
  z-index: 3 !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 10px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 8px !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  #app .reserve-row .reserve-side-controls .reserve-ad-slot .shovel-icon {
    transform: rotate(-24deg) scale(.46) translateY(-1px) !important;
  }
}

@media (max-width: 380px) {
  #app .reserve-row .reserve-side-controls .reserve-ad-slot .shovel-icon {
    transform: rotate(-24deg) scale(.44) translateY(-1px) !important;
  }
}