.mobile-only { display: none; }
body.mobile-ui { overflow: hidden; overscroll-behavior: none; }
.mobile-ui .mobile-only { display: block; }
.mobile-ui .app { position: relative; width: 100%; height: 100dvh; min-height: 0; padding: 0; max-width: none; overflow: hidden; background: #293829; }
.mobile-ui .topbar, .mobile-ui .field-toolbar { display: none; }
.mobile-ui .game-layout, .mobile-ui .battlefield, .mobile-ui .board-shell { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-image: none; border-radius: 0; box-shadow: none; display: block; }
.mobile-ui .game-layout::before, .mobile-ui .game-layout::after, .mobile-ui .battlefield::before, .mobile-ui .battlefield::after, .mobile-ui .board-shell::before, .mobile-ui .board-shell::after { display: none; }
.mobile-ui #battle-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.mobile-ui .view-controls, .mobile-ui .army-total, .mobile-ui .squad-total, .mobile-ui .strength, .mobile-ui #phase-name { display: none; }
.mobile-ui .scoreboard { position: absolute; top: calc(env(safe-area-inset-top) + 9px); left: calc(env(safe-area-inset-left) + 61px); right: calc(env(safe-area-inset-right) + 61px); width: auto; max-width: 320px; margin: 0 auto; height: 38px; padding: 4px 10px; border: 1px solid #947d50; border-image: none; border-radius: 9px; background: #282320ef; box-shadow: 0 2px 8px #0005; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-ui .scoreboard::before, .mobile-ui .scoreboard::after { display: none; }
.mobile-ui .army-score { display: flex; align-items: center; gap: 3px; padding: 0; min-width: 0; }
.mobile-ui .army-score strong { font-size: 18px; line-height: 1; }
.mobile-ui .team-mark { font-size: 11px; }
.mobile-ui .clock { position: static; transform: none; min-width: 0; padding: 0; }
.mobile-ui .clock b { font-size: 15px; line-height: 1; }
.mobile-ui .mobile-top { position: absolute; top: calc(env(safe-area-inset-top) + 6px); left: calc(env(safe-area-inset-left) + 7px); right: calc(env(safe-area-inset-right) + 7px); display: flex; justify-content: space-between; pointer-events: none; z-index: 21; }
.mobile-ui .mobile-top button { pointer-events: auto; min-width: 44px; padding: 6px; }
.mobile-ui .mobile-only button, .mobile-ui button.mobile-only, .mobile-ui .army-dock button, .mobile-ui .command-dock button { min-height: 44px; border: 1px solid #8b744f; border-image: none; border-radius: 8px; background: #2d2926; box-shadow: none; padding: 8px 10px; font-size: 14px; line-height: 1.25; color: #eee1c8; text-shadow: none; }
.mobile-ui .mobile-only button:hover:not(:disabled), .mobile-ui .army-dock button:hover:not(:disabled) { background: #40382e; }
.mobile-ui .mobile-only button[aria-pressed="true"] { background: #4c4932; border-color: #e1bf72; }
.mobile-ui .mobile-dock { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 7px); left: calc(env(safe-area-inset-left) + 8px); right: calc(env(safe-area-inset-right) + 8px); display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px 62px; gap: 5px; max-width: 510px; margin: 0 auto; z-index: 35; }
.mobile-ui .mobile-dock button { height: 52px; min-width: 0; padding: 5px; background: #282320f5; box-shadow: 0 2px 8px #0005; }
.mobile-ui #mobile-selection { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 5px 9px; }
.mobile-ui #mobile-selection strong, .mobile-ui #mobile-selection small { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mobile-ui #mobile-selection strong { font-size: 13px; font-weight: 500; }
.mobile-ui #mobile-selection small { margin-top: 3px; font-size: 11px; color: #c6bca7; }
.mobile-ui #mobile-start { background: #315f6b; border-color: #9caf9e; }
.mobile-ui .mobile-minimap { position: absolute; left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 70px); width: 98px; height: 55px; min-height: 0; border: 1px solid #b3a071; border-radius: 5px; padding: 0; z-index: 20; overflow: hidden; box-shadow: 0 2px 8px #0006; }
.mobile-ui .mobile-minimap canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.mobile-ui .mobile-tutorial { position: absolute; inset: 0; z-index: 200; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px); background: #45484cc9; backdrop-filter: grayscale(1) blur(2px); }
.mobile-ui .mobile-tutorial-card { width: min(100%,380px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid #a6a6a1; border-radius: 14px; color: #f1eee6; background: #292d30; box-shadow: 0 12px 32px #0005; }
.mobile-ui .mobile-tutorial-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #d5d7d5; }
.mobile-ui #mobile-hint-close { border: 0; background: transparent; font-size: 12px; }
.mobile-ui #mobile-tutorial-gesture { display: flex; align-items: center; justify-content: center; min-height: 62px; margin: 12px 0; padding: 8px; border: 1px dashed #8a979d; border-radius: 8px; background: #3b4347; color: #c2e3ec; font-size: 17px; text-align: center; }
.mobile-ui #mobile-tutorial-title { font-size: 20px; margin: 10px 0; color: #fff2d0; }
.mobile-ui #mobile-tutorial-text { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.mobile-ui #mobile-tutorial-note { margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: #c9d0cf; }
.mobile-ui .mobile-tutorial-actions { display: flex; gap: 8px; }
.mobile-ui .mobile-tutorial-actions button { flex: 1; min-height: 44px; }
.mobile-ui #mobile-tutorial-next { background: #3d6c79; border-color: #99bac1; }
.mobile-ui .mobile-tutorial-preference { display: flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 4px; font-size: 13px; }
.mobile-ui #mobile-hint-never { width: 18px; height: 18px; margin: 0; accent-color: #9dbcb0; }
.mobile-ui .mobile-shade { position: absolute; inset: 0; background: #0003; z-index: 80; border: 0; border-radius: 0; }
.mobile-ui button.mobile-shade { background: #0003; border: 0; border-radius: 0; padding: 0; }
.mobile-ui .mobile-sheet, .mobile-ui .army-dock { position: absolute; display: none; top: auto; bottom: calc(env(safe-area-inset-bottom) + 69px); left: calc(env(safe-area-inset-left) + 8px); right: calc(env(safe-area-inset-right) + 8px); width: auto; height: auto; min-height: 0; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 135px); padding: 12px; border: 1px solid #aa8c56; border-image: none; border-radius: 13px; background: #282320; box-shadow: 0 8px 25px #0009; z-index: 90; overflow: auto; overscroll-behavior: contain; }
.mobile-ui .army-dock::before, .mobile-ui .army-dock::after { display: none; }
.mobile-ui[data-mobile-panel="roster"] .army-dock, .mobile-ui[data-mobile-panel="selection"] .army-dock, .mobile-ui .mobile-menu:not([hidden]) { display: flex; flex-direction: column; }
.mobile-ui .mobile-sheet-heading { display: flex; gap: 8px; align-items: center; flex: none; margin-bottom: 8px; }
.mobile-ui .mobile-sheet-heading strong { margin-right: auto; font-size: 15px; font-weight: 500; }
.mobile-ui .mobile-sheet-heading button:last-child { min-width: 44px; font-size: 22px; padding: 0; }
.mobile-ui .army-dock .roster-label { display: none; }
.mobile-ui .roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; min-height: 0; max-height: none; flex: 1; padding: 2px; overflow: auto; }
.mobile-ui .roster .squad-card { height: auto; min-height: 59px; padding: 6px; gap: 6px; grid-template-columns: 30px minmax(0,1fr) auto; border: 1px solid #75664b; border-radius: 7px; }
.mobile-ui .roster .squad-card[aria-pressed="true"] { background: #384c50; border-color: #d9c08b; }
.mobile-ui .squad-symbol { width: 30px; height: 30px; border: 0; padding: 0; }
.mobile-ui .squad-symbol svg { width: 28px; height: 28px; }
.mobile-ui .squad-copy strong { font-size: 12px; }
.mobile-ui .squad-copy small { display: block; font-size: 10px; }
.mobile-ui .squad-count b { font-size: 13px; }
.mobile-ui .squad-count small { display: none; }
.mobile-ui[data-mobile-panel="roster"] .sidebar-command, .mobile-ui[data-mobile-panel="roster"] #order-state { display: none; }
.mobile-ui[data-mobile-panel="selection"] .roster { display: none; }
.mobile-ui .sidebar-command { margin: 0; padding: 0; border: 0; }
.mobile-ui .sidebar-command #orders-open { display: none; }
.mobile-ui .mobile-selection-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 10px; }
.mobile-ui .sidebar-selection { margin: 7px 0; }
.mobile-ui #sidebar-order { font-size: 12px; margin: 6px 0; }
.mobile-ui .sidebar-command .pursuit-toggle { min-height: 44px; margin: 8px 0 0; width: 100%; font-size: 14px; }
.mobile-ui .morale-summary, .mobile-ui .battle-order { font-size: 12px; line-height: 1.5; }
.mobile-ui .mobile-menu label { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mobile-ui #mobile-scenario { min-width: 0; flex: 1; min-height: 44px; padding: 8px; border: 1px solid #8b744f; border-radius: 7px; color: #eee1c8; background: #342e29; font-size: 16px; }
.mobile-ui .mobile-menu-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mobile-ui .mobile-modebar { position: absolute; top: calc(env(safe-area-inset-top) + 60px); left: calc(env(safe-area-inset-left) + 8px); right: calc(env(safe-area-inset-right) + 8px); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid #a18b57; border-radius: 8px; background: #282320ee; font-size: 13px; }
.mobile-ui .formation-warning { position: absolute; top: calc(env(safe-area-inset-top) + 56px); left: 50%; transform: translateX(-50%); z-index: 22; margin: 0; padding: 5px 8px; background: #3f2925ec; border-radius: 5px; font-size: 12px; max-width: calc(100% - 24px); }
.mobile-ui #map-hint { bottom: calc(env(safe-area-inset-bottom) + 73px); top: auto; left: 116px; right: 8px; width: auto; max-width: none; transform: none; font-size: 11px; padding: 5px 7px; }
.mobile-ui #cancel-target { top: calc(env(safe-area-inset-top) + 58px); bottom: auto; right: calc(env(safe-area-inset-right) + 8px); min-height: 44px; z-index: 40; }
.mobile-ui .toast { top: auto; height: auto; max-width: calc(100% - 32px); bottom: calc(env(safe-area-inset-bottom) + 76px); padding: 7px 11px; border: 1px solid #a28c57; border-image: none; border-radius: 7px; background: #282320f5; font-size: 12px; z-index: 150; pointer-events: none; }
.mobile-ui .toast.error { border-color: #d99276; }
.mobile-ui .pause-curtain { background: #17191644; padding: 12px; pointer-events: none; }
.mobile-ui .pause-curtain button { min-height: 44px; pointer-events: auto; }
.mobile-ui .command-stage { position: absolute; inset: 0; padding: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.mobile-ui .cards-backdrop { position: absolute; inset: 0; background: #0005; backdrop-filter: none; }
.mobile-ui .command-dock { position: relative; left: auto; bottom: auto; transform: none; pointer-events: auto; margin: 8px 8px calc(env(safe-area-inset-bottom) + 8px); width: calc(100% - 16px); max-width: 540px; height: auto; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 25px); overflow: auto; padding: 12px; background: #282320; border: 1px solid #aa8c56; border-radius: 13px; box-shadow: 0 8px 30px #0009; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.mobile-ui .command-dock::before, .mobile-ui .command-dock::after, .mobile-ui .command-dock > *::before, .mobile-ui .command-dock > *::after { display: none; }
.mobile-ui .dock-heading { height: auto; min-height: 44px; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; display: flex; flex-wrap: wrap; gap: 7px; }
.mobile-ui .selection-label { flex: 1; min-width: 100px; }
.mobile-ui .selection-label strong { font-size: 14px; }
.mobile-ui .selection-label span { font-size: 11px; }
.mobile-ui .card-navigation { margin: 0; }
.mobile-ui #cards-heading { display: none; }
.mobile-ui .timing-panel { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px; border: 1px solid #635740; border-image: none; border-radius: 7px; box-shadow: none; background: #312b24; }
.mobile-ui .timing-title { flex: 1; min-width: 110px; }
.mobile-ui .timing-title svg, .mobile-ui .timing-title strong, .mobile-ui #delay-hint, .mobile-ui .delay-presets { display: none; }
.mobile-ui #delay-summary { font-size: 12px; }
.mobile-ui .delay-control { margin: 0; gap: 5px; font-size: 12px; }
.mobile-ui .delay-control input, .mobile-ui #retreat-duration { height: 44px; min-height: 44px; width: 58px; font-size: 16px; }
.mobile-ui #order-fields { min-width: 0; padding: 0; margin: 0; overflow: visible; }
.mobile-ui .order-cards, .mobile-ui .main-cards, .mobile-ui .has-subcards #order-cards { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: auto; height: auto; min-height: 0; gap: 8px; padding: 0; margin: 0; transform: none; perspective: none; filter: none; }
.mobile-ui .has-subcards .main-cards { display: none; }
.mobile-ui .order-card, .mobile-ui .order-card:hover:not(:disabled), .mobile-ui .order-card[aria-pressed="true"], .mobile-ui #order-cards .order-card { position: static; width: auto; height: auto; min-height: 72px; min-width: 0; transform: none; rotate: none; filter: none; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #8b744f; border-image: none; border-radius: 8px; background: #37312a; box-shadow: none; }
.mobile-ui .order-card[aria-pressed="true"] { background: #425049; border-color: #d3bb80; }
.mobile-ui .order-card::before, .mobile-ui .order-card::after { display: none; }
.mobile-ui .order-card svg { flex: none; width: 28px; height: 28px; }
.mobile-ui .order-card strong, .mobile-ui #order-cards strong { font-size: 14px; letter-spacing: 0; line-height: 1.4; }
.mobile-ui .order-card small { font-size: 10px; line-height: 1.4; }
.mobile-ui .card-copy { min-width: 0; text-align: left; }
.mobile-ui .retreat-timing { padding: 7px; flex-wrap: wrap; font-size: 12px; }
.mobile-ui .retreat-timing span { display: none; }
.mobile-ui .order-meta { position: static; padding: 0; gap: 8px; display: flex; flex-wrap: wrap; font-size: 12px; }
.mobile-ui .order-meta span { flex: 1; }
.mobile-ui .help-controls { display: none; }
.mobile-ui .mobile-help { line-height: 1.8; }
@media (orientation: portrait) {
  .mobile-ui .army-dock { max-height: min(62dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 135px)); }
}
.mobile-ui #cards-close { margin-left: auto; }
.mobile-ui .command-dock > * { flex-shrink: 0; }
.mobile-ui .timing-panel { margin: 0; }
.mobile-ui #order-fields { height: auto; }
.mobile-ui .order-cards, .mobile-ui .main-cards { align-items: stretch; max-height: none; grid-auto-rows: minmax(64px,auto); animation: none; }
.mobile-ui .has-subcards #order-cards { animation: none; }
.mobile-ui .order-card, .mobile-ui .order-card:hover:not(:disabled), .mobile-ui .order-card[aria-pressed="true"], .mobile-ui #order-cards .order-card { margin: 0; flex-direction: row; }
.mobile-ui .card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; }
.mobile-ui .order-card strong, .mobile-ui #order-cards strong { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; max-width: 100%; }
@media (orientation: landscape) {
  .mobile-ui .mobile-tutorial-card { width: min(100%,680px); display: grid; grid-template-columns: 155px minmax(0,1fr); column-gap: 18px; padding: 12px 16px; }
  .mobile-ui .mobile-tutorial-head { grid-column: 1/-1; }
  .mobile-ui #mobile-tutorial-gesture { grid-column: 1; grid-row: 2/5; margin: 8px 0; }
  .mobile-ui #mobile-tutorial-title, .mobile-ui #mobile-tutorial-text, .mobile-ui #mobile-tutorial-note, .mobile-ui .mobile-tutorial-actions { grid-column: 2; }
  .mobile-ui #mobile-tutorial-title { font-size: 18px; margin: 6px 0; }
  .mobile-ui #mobile-tutorial-text { font-size: 13px; margin-bottom: 6px; }
  .mobile-ui #mobile-tutorial-note { margin-bottom: 8px; }
  .mobile-ui .mobile-tutorial-preference { grid-column: 1; grid-row: 5; margin: 0; }
  .mobile-ui .mobile-sheet, .mobile-ui .army-dock { left: auto; width: 340px; max-width: calc(100% - 24px); bottom: calc(env(safe-area-inset-bottom) + 8px); top: calc(env(safe-area-inset-top) + 8px); max-height: none; }
  .mobile-ui .command-stage { justify-content: flex-end; }
  .mobile-ui .command-dock { max-width: 420px; margin-right: calc(env(safe-area-inset-right) + 8px); }
  .mobile-ui .mobile-dock { grid-template-columns: 64px minmax(0,1fr) 64px 70px; }
  .mobile-ui .mobile-dock button { height: 46px; }
  .mobile-ui .main-cards, .mobile-ui .has-subcards #order-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mobile-ui .order-card small { display: none; }
  .mobile-ui .order-card, .mobile-ui .order-card:hover:not(:disabled), .mobile-ui .order-card[aria-pressed="true"], .mobile-ui #order-cards .order-card { min-height: 64px; padding: 7px; gap: 5px; }
}