/* APP-only overrides. The original WEB files are kept byte-for-byte in web/. */
body.duelApp {
  --app-left: env(safe-area-inset-left, 0px);
  --app-right: env(safe-area-inset-right, 0px);
  --app-top: env(safe-area-inset-top, 0px);
  --app-bottom: env(safe-area-inset-bottom, 0px);
  height: var(--app-height, 100dvh);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#appViewportProbe {
  position: fixed; top: 0; left: 0; width: 100vw;
  height: 100%; height: 100dvh; box-sizing: border-box;
  padding: var(--app-top) var(--app-right) var(--app-bottom) var(--app-left);
  visibility: hidden; pointer-events: none; contain: strict;
}

/* Only the two corner arrows remain visible over the APP arena. The panels
   contain the original controls, including undo/redo and spectator pause. */
body.duelApp .appMenuPanel[hidden] { display: none !important; }
body.duelApp.appCompactUI .appMenuToggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  max-width: 44px; max-height: 44px; aspect-ratio: 1; box-sizing: border-box;
  padding: 0 !important; border: 0; border-radius: 50%; overflow: hidden;
  background: transparent url('./menu-orb.svg') center / 100% 100% no-repeat;
  color: #e5d7ad; box-shadow: 0 2px 5px #0009;
  display: inline-flex; align-items: center; justify-content: center;
}
body.duelApp .appMenuArrow {
  width: 25px; height: 25px; pointer-events: none;
  transform-origin: center;
  fill: currentColor; stroke: #18231c; stroke-width: 1;
  filter: drop-shadow(0 1px 0 #050e10) drop-shadow(0 -1px 0 #f3e9c126);
}
body.duelApp .appMenuToggle[aria-expanded="true"] .appMenuArrow { transform: rotate(180deg); }
body.duelApp .appMenuToggle:active { filter: brightness(.82); }
body.duelApp .appMenuToggle:focus-visible { outline: 2px solid #f4eec6; outline-offset: 2px; }
body.duelApp.appCompactUI .top-bar {
  left: auto; right: calc(var(--app-right) + 6px); top: calc(var(--app-top) + 4px);
  width: 44px; height: 44px; min-height: 44px; padding: 0; background: transparent;
}
body.duelApp.appCompactUI .top-bar .brand { display: none; }
body.duelApp #appTopMenu {
  position: absolute; right: 50px; top: 0; flex: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, calc(var(--app-width, 100vw) - var(--app-left) - var(--app-right) - 68px));
  max-height: calc(var(--app-height, 100dvh) - var(--app-top) - var(--app-bottom) - 12px);
  box-sizing: border-box; min-width: 0; gap: 4px; padding: 6px;
  overflow: auto; overscroll-behavior: contain;
  background: #102332f5; border: 1px solid #96c7c280; border-radius: 5px;
}
body.duelApp #appTopMenu .historyControls { display: contents; }
body.duelApp #appTopMenu button,
body.duelApp #appBottomMenu button {
  min-height: 44px; width: 100%; margin: 0;
  font-size: 11px !important; padding: 6px 8px !important;
  white-space: normal; line-height: 1.35;
}
body.duelApp.appCompactUI .boardDock {
  display: block; right: calc(var(--app-right) + 6px); bottom: calc(var(--app-bottom) + 4px); width: 44px; height: 44px;
}
body.duelApp #appBottomMenu {
  position: absolute; right: 50px; bottom: 0;
  display: grid; grid-template-columns: 1fr; width: 150px; gap: 4px; padding: 6px;
  max-height: calc(var(--app-height, 100dvh) - 12px); overflow-y: auto;
  background: #102332f5; border: 1px solid #96c7c280; border-radius: 5px;
}
/* The phase text lives in the stage's left margin. Its width follows the real
   projected stone slab edge, so long COM phases wrap without covering it. */
body.duelApp.appCompactUI .metaBar {
  position: absolute; top: calc(var(--app-top) + 6px); left: calc(var(--app-left) + 6px); right: auto;
  width: max(0px, calc(var(--field-left-edge, 25%) - var(--app-left) - 12px));
  height: auto; min-height: 0; padding: 0; pointer-events: auto;
}
body.duelApp.appCompactUI #phaseBanner {
  width: 100%; max-width: 100%; box-sizing: border-box;
  white-space: normal; overflow-wrap: anywhere; font-size: 10px; line-height: 1.45;
  max-height: min(150px, 35vh); overflow-y: auto;
}
@media (orientation: landscape) and (max-height: 650px) {
  body.duelApp.appCompactUI #oppHand { top: calc(var(--app-top) + 4px); }
  /* Keep the cards in the same place without an invisible hand padding area
     intercepting taps on the enlarged lower tactic row. */
  body.duelApp.appCompactUI #ownHand { height: 60px !important; padding: 2px 4px; bottom: calc(var(--app-bottom) + 2px); }
}
body.duelApp .battleLayout,
body.duelApp.historyCollapsed .battleLayout {
  inset: 0;
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
}
body.duelApp .top-bar {
  left: var(--app-left);
  right: var(--app-right);
  top: var(--app-top);
}
body.duelApp .metaBar { left: calc(var(--app-left) + 8px); }
body.duelApp button { touch-action: manipulation; }
body.duelApp img { -webkit-touch-callout: none; }
body.duelApp .handRow,
body.duelApp .decisionBody,
body.duelApp .selectionPanelContent,
body.duelApp .boardCardText,
body.duelApp .rulesBody,
body.duelApp .cardCatalogBody,
body.duelApp .log { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.duelApp #boardCardPreview .boardCardText { pointer-events: auto; touch-action: pan-y; }
@media (orientation: landscape) and (max-height: 650px) {
  body.duelApp .top-bar { height: 44px; min-height: 44px; padding: 0 6px; flex-wrap: nowrap; }
  body.duelApp .brand { display: inline-flex; flex: 0 0 auto; font-size: 11px; }
  body.duelApp .top-bar > div { min-width: 0; width: auto; flex: 1; overflow-x: auto; overflow-y: hidden; gap: 4px; scrollbar-width: none; }
  body.duelApp .top-bar > div::-webkit-scrollbar { display: none; }
  body.duelApp .top-bar button { flex: 0 0 auto; min-height: 40px; font-size: 10px !important; padding: 6px 8px !important; white-space: nowrap; }
  body.duelApp .historyControls { flex: 0 0 auto; }
  body.duelApp #scoreText { flex: 0 0 auto; font-size: 10px; }
  body.duelApp .metaBar { top: calc(var(--app-top) + 44px); height: 16px; right: auto; }
  body.duelApp #phaseBanner { max-width: 28vw; font-size: 9px; line-height: 1.35; white-space: normal; }
  body.duelApp #ownHand,
  body.duelApp #oppHand {
    box-sizing: border-box;
    left: max(16%, calc(var(--field-left-edge, 25%) - 16px));
    width: calc(var(--field-right-edge, 75%) - var(--field-left-edge, 25%) + 32px) !important;
    gap: 4px; justify-content: safe center; touch-action: pan-x;
  }
  body.duelApp #ownHand { bottom: 2px; height: 78px !important; padding: 18px 4px 4px; }
  body.duelApp #ownHand .card,
  body.duelApp #ownHand .cardBack[data-shared-back="true"] { width: 40px !important; min-width: 40px !important; height: 56px !important; }
  body.duelApp #oppHand { top: 44px; height: 44px !important; padding: 3px 4px; }
  body.duelApp #oppHand .card,
  body.duelApp #oppHand .cardBack { width: 26px !important; min-width: 26px !important; height: 37px !important; }
  body.duelApp #ownHandLabel,
  body.duelApp #oppHandLabel { display: none; }
  body.duelApp #chainHistoryShell {
    display: flex; left: 6px; top: 64px; bottom: 46px;
    width: max(88px, calc(var(--field-left-edge, 25%) - 12px));
    padding: 6px; font-size: 10px;
  }
  body.duelApp #chainHistoryShell.collapsed { display: none !important; }
  body.duelApp .chainPanelHeading { font-size: 11px; }
  body.duelApp .chainHistoryPanel #chainPanel .chainItem { min-height: 0 !important; padding: 6px !important; margin-bottom: 6px; font-size: 10px; line-height: 1.4; }
  body.duelApp .chainHistoryPanel #chainPanel .activeChainItem::before { display: none; }
  body.duelApp .chainHistoryPanel #chainPanel .chainCardName { font-size: 11px; margin-top: 4px; }
  body.duelApp .chainHistoryPanel #chainPanel .chainTarget { font-size: 10px; padding: 4px; }
  body.duelApp #decisionPanel,
  body.duelApp #selectionPanel,
  body.duelApp #pilePanel {
    position: absolute; left: 6px; top: 64px; bottom: 46px;
    width: max(88px, calc(var(--field-left-edge, 25%) - 12px));
    height: auto; max-height: none; transform: none;
  }
  body.duelApp #decisionPanel { overflow: hidden; }
  body.duelApp .decisionBody { overflow-y: auto; min-height: 0; padding: 4px; }
  body.duelApp .decisionPanelHeader { gap: 4px; padding: 4px; }
  body.duelApp .decisionPeekButton { min-height: 36px; font-size: 10px; padding: 4px; }
  body.duelApp #decisionPanel.peeked { bottom: auto; }
  body.duelApp #decisionPanel button[data-action] { min-height: 44px; font-size: 11px; overflow-wrap: anywhere; }
  body.duelApp #decisionPanel .activeActionGrid { grid-template-columns: 1fr; }
  body.duelApp #selectionPanel .selectionCardGrid,
  body.duelApp #pilePanel .pileCardGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  body.duelApp .selectionCard { min-height: 44px; }
  body.duelApp #boardCardPreview {
    top: 62px; bottom: 50px; height: auto; max-height: none;
    left: calc(var(--field-right-edge, 75%) + 6px); right: 6px;
    width: auto; padding: 6px; gap: 5px;
  }
  body.duelApp #boardCardPreview img { width: min(80%, 120px); max-height: 48%; flex: 0 1 auto; }
  body.duelApp #boardCardPreview .boardCardText { font-size: 11px; line-height: 1.45; min-height: 42px; overflow-y: auto; }
  body.duelApp #boardCardPreview .boardCardText strong { font-size: 12px; }
  body.duelApp .boardDock { right: 6px; bottom: 2px; gap: 4px; }
  body.duelApp .boardDock button { min-height: 44px; min-width: 44px; font-size: 10px; padding: 5px; }
  body.duelApp .sideColumn { right: 6px; bottom: 50px; width: min(46%, 330px); max-height: 70%; }
  body.duelApp .sideColumn .controls { max-height: 56vh; }
  body.duelApp .historyArea { right: 6px; bottom: 50px; width: min(46%, 330px); height: 68%; }
  body.duelApp #deckActions .deckOrb { min-width: 44px; min-height: 44px; font-size: 10px !important; padding: 3px; }
  body.duelApp #ownSelectedTacticPreview { left: 18%; bottom: 80px; width: 64%; max-height: 60%; }
  body.duelApp .rulesOverlay,
  body.duelApp .settingsOverlay,
  body.duelApp .cardCatalogOverlay { padding: calc(var(--app-top) + 6px) calc(var(--app-right) + 6px) calc(var(--app-bottom) + 6px) calc(var(--app-left) + 6px); }
  body.duelApp .rulesDialog,
  body.duelApp .settingsDialog,
  body.duelApp .cardCatalogDialog { height: auto; max-height: 100%; }
  body.duelApp .rulesBody,
  body.duelApp .settingsBody { min-height: 0; overflow-y: auto; }
  body.duelApp .cardCatalogGrid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
  body.duelApp .rulesHeader button,
  body.duelApp .settingsHeader button,
  body.duelApp .cardCatalogHeader button { min-height: 44px; }
}

/* Keep the APP board clear of the top-left phase caption. */
body.duelApp #phaseBanner { display: none !important; }