/* Android WebView layout restored from the proven 3.6 APK structure.
 * The outer document is fixed to the physical viewport; each gameplay pane
 * owns its own touch scroll so Android never has to paint a multi-screen page. */

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) {
  --jjk-safe-top: env(safe-area-inset-top, 0px);
  --jjk-safe-right: env(safe-area-inset-right, 0px);
  --jjk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jjk-safe-left: env(safe-area-inset-left, 0px);
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-display-cutout="full"] {
  --jjk-safe-top: 0px;
  --jjk-safe-right: 0px;
  --jjk-safe-bottom: 0px;
  --jjk-safe-left: 0px;
}

/* Startup surfaces must stay inside the physical WebView. Long content scrolls
 * inside the card instead of increasing the document or pushing actions away. */
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-card-gate,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-tutorial-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .update-modal {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0;
  min-height: 0;
  max-height: 100dvh;
  padding:
    max(8px, var(--jjk-safe-top))
    max(8px, var(--jjk-safe-right))
    max(8px, var(--jjk-safe-bottom))
    max(8px, var(--jjk-safe-left)) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-card-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-tutorial-card,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .update-modal-card {
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - var(--jjk-safe-top) - var(--jjk-safe-bottom) - 16px) !important;
  max-height: calc(100dvh - var(--jjk-safe-top) - var(--jjk-safe-bottom) - 16px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-card-panel {
  width: min(100%, 560px);
}

@media (orientation: landscape) and (max-height: 600px) {
  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .login-card-panel {
    width: min(820px, 100%) !important;
    max-height: calc(100dvh - var(--jjk-safe-top) - var(--jjk-safe-bottom) - 8px) !important;
    gap: 7px !important;
    padding: 8px 12px !important;
  }
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) #loginCardStatus {
  margin: 0;
}

.jjk-native-update-status { position: fixed; left: max(10px, var(--jjk-safe-left, 0px)); right: max(10px, var(--jjk-safe-right, 0px)); bottom: max(10px, var(--jjk-safe-bottom, 0px)); z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 180px) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(231,189,98,.52); border-radius: 10px; color: #fff4d8; background: rgba(17,17,20,.96); box-shadow: 0 16px 40px rgba(0,0,0,.34); font-size: .8rem; }
.jjk-native-update-status[hidden] { display: none !important; }
.jjk-native-update-status progress { width: 100%; accent-color: #e7bd62; }
.jjk-native-update-status button { min-height: 34px; padding: 6px 10px; }
@media (max-width: 560px) { .jjk-native-update-status { grid-template-columns: 1fr auto; } .jjk-native-update-status progress { grid-column: 1 / -1; } }

.online-alpha-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.online-help-dialog {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  overscroll-behavior: none;
}

.online-help-dialog[hidden] { display: none !important; }
.online-help-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; background: rgba(5, 8, 13, .72) !important; }
.online-help-card { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(720px, 100%); min-height: 0; max-height: calc(100dvh - 24px); overflow: hidden; border: 1px solid rgba(148, 163, 184, .5); border-radius: 18px; color: #172033; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .34); }
.online-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(148, 163, 184, .28); }
.online-help-head h2 { margin: 5px 0 0; font-size: 1.3rem; }
.online-help-body { min-height: 0; padding: 12px 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.online-help-body section + section { margin-top: 14px; }
.online-help-body h3 { margin: 0 0 7px; font-size: 1rem; }
.online-help-body ol { margin: 0; padding-left: 1.35rem; }
.online-help-body li { margin: 6px 0; line-height: 1.55; }
.online-help-note { margin: 14px 0 0; padding: 9px 11px; border-left: 3px solid #2f6f68; background: rgba(47, 111, 104, .08); line-height: 1.5; }
.online-help-actions { display: flex; justify-content: flex-end; padding: 10px 16px 14px; border-top: 1px solid rgba(148, 163, 184, .28); background: #fff; }

html[data-jjk-phone-layout="true"] .online-help-dialog {
  height: var(--jjk-viewport-height, 100dvh);
  padding: max(6px, var(--jjk-safe-top)) max(6px, var(--jjk-safe-right)) max(6px, var(--jjk-safe-bottom)) max(6px, var(--jjk-safe-left));
}

html[data-jjk-phone-layout="true"] .online-help-card {
  max-height: calc(var(--jjk-viewport-height, 100dvh) - var(--jjk-safe-top) - var(--jjk-safe-bottom) - 12px);
  border-radius: 14px;
}

html[data-jjk-phone-layout="true"] .online-help-head,
html[data-jjk-phone-layout="true"] .online-help-actions { padding: 8px 10px; }
html[data-jjk-phone-layout="true"] .online-help-body { padding: 8px 12px; }
html[data-jjk-phone-layout="true"] .online-help-head button,
html[data-jjk-phone-layout="true"] .online-help-actions button { min-height: 44px !important; }

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) body.jjk-native-stable-render *,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) body.jjk-native-stable-render *::before,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) body.jjk-native-stable-render *::after {
  text-rendering: optimizeSpeed;
}

/* Active battle: current-version mobile shell. Every current combat surface is
 * reachable from the in-battle view switcher; no runtime feature is removed. */
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"],
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #eef1f7;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body > .topbar,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .topbar,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .tabs,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel > .duel-panel > .panel-heading,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel > .duel-panel > .jjk-battle-tabs,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel .jjk-battle-page,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel #duelSummary,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel #duelCards,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel .jjk-battle-active-surface > .jjk-battle-section-head {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .app-shell,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] main,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel > .duel-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel .jjk-battle-active-surface,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel .duel-battle {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0 !important;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  contain: none;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--jjk-safe-top) var(--jjk-safe-right) var(--jjk-safe-bottom) var(--jjk-safe-left) !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] #duel > .duel-panel {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-battle-stage:not(.resolved) {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 64fr) minmax(250px, 36fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 5px !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0 !important;
  padding: 5px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  contain: none;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-battle-support-grid {
  min-width: 0;
  min-height: 0 !important;
  height: calc(100% - 8px) !important;
  max-height: calc(100% - 8px) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  contain: none;
  content-visibility: visible;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 5px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-battle-support-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 5px;
  padding: 0 2px 0 0;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-battle-head {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 42px;
  margin: 0 0 4px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, .96);
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-head {
  margin-bottom: 4px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-head p.muted,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-pool-hint,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-meta .duel-chip:not([data-duel-action-meta="current-ce"]):not([data-duel-action-meta="selected-ce"]) {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-choices,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-domain-hand-choices {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 5px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-card,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-action-choice {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-execute-control {
  position: sticky !important;
  z-index: 20;
  right: 0;
  bottom: 0;
  display: flex !important;
  justify-content: flex-end;
  min-height: 0 !important;
  margin: 4px 0 0 auto !important;
  padding: 4px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-execute-control .duel-action-hint {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] .duel-hand-execute-control .primary {
  width: auto !important;
  min-width: 104px;
  min-height: 34px !important;
  padding: 6px 12px !important;
}

/* The runtime's body class is the authoritative focus flag. This keeps the
 * exit/return buttons functional even while an unfinished battle is retained. */
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage:not(.resolved) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: 0 !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 8px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head h3 {
  margin: 1px 0 0;
  font-size: .82rem;
  line-height: 1.1;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head p,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duelResetBtn {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head-actions,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duelExitFocusBtn {
  display: flex !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duelExitFocusBtn {
  min-height: 30px;
  padding: 4px 9px;
  font-size: .7rem;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-status {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(120px, 1.5fr) minmax(0, .8fr) !important;
  gap: 6px;
  min-height: 30px;
  margin: 0 !important;
  padding: 4px 7px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score.right {
  justify-content: flex-end;
  text-align: right;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score strong,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score span {
  overflow: hidden;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-score-track {
  height: 10px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-height: 32px;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button {
  min-width: 0;
  min-height: 28px;
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 7px;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button.active {
  border-color: #b42318;
  color: #fff;
  background: #b42318;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-support-grid,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-interaction,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-report-pane {
  grid-column: 1 !important;
  grid-row: 4 !important;
  display: none !important;
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="hand"] body.battle-focus-mode .duel-action-panel {
  display: flex !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="status"] body.battle-focus-mode .duel-battle-support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 5px;
  padding: 2px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  align-items: start;
  gap: 6px;
  padding: 2px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="report"] body.battle-focus-mode .duel-native-report-pane {
  display: block !important;
  padding: 2px 4px 8px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-panel {
  padding: 5px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-head {
  flex: 0 0 auto;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-control {
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  margin: 0 0 5px;
  padding: 6px 8px;
  border-width: 2px;
  background: linear-gradient(100deg, rgba(180, 35, 24, .14), rgba(255, 253, 247, .98));
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-control p {
  display: none;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-selection {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 4px 7px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-options {
  flex-wrap: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-option {
  min-height: 28px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* Shibuya route: same viewport discipline, with an operation/status pane and
 * an event-tree pane that scroll independently instead of elongating the page. */
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"],
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #07070a;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .topbar,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .tabs,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel > .duel-panel > .panel-heading,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel > .duel-panel > .jjk-battle-tabs {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .app-shell,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] main,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel > .duel-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .jjk-battle-page.shibuya-incident-page.active {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0 !important;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .app-shell,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #duel > .duel-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #07070a !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--jjk-safe-top) var(--jjk-safe-right) var(--jjk-safe-bottom) var(--jjk-safe-left) !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-incident-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 5px 7px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-incident-page.has-active-run {
  overflow: hidden !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  margin: 0 0 5px;
  padding: 3px 5px 5px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-page-head > div:first-child {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-kicker {
  font-size: .58rem;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-page-head h3 {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #shibuyaAccessStatus {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-head-actions {
  flex-wrap: nowrap;
  gap: 5px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-head-actions > button {
  width: auto;
  min-height: 32px;
  padding: 5px 10px;
  font-size: .72rem;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 5px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud > div {
  min-height: 42px;
  padding: 5px 8px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud span,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud small {
  font-size: .56rem;
  line-height: 1.15;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud strong {
  font-size: .9rem;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-operation-strip {
  grid-template-columns: 58px minmax(0, 1fr) minmax(126px, .42fr);
  min-height: 48px;
  margin: 0;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-sigil {
  min-width: 58px;
  padding: 7px 5px;
  font-size: .86rem;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-copy,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-progress {
  padding: 5px 9px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-copy strong {
  margin-top: 2px;
  font-size: .8rem;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-copy p {
  margin-top: 2px;
  overflow: hidden;
  font-size: .62rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-mission-message {
  min-height: 30px;
  max-height: 36px;
  margin: 0;
  padding: 6px 9px;
  overflow: auto;
  font-size: .65rem;
  line-height: 1.35;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-layout {
  display: grid;
  grid-template-columns: minmax(190px, 36fr) minmax(0, 64fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-party-panel,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
  min-height: 0;
  height: 100%;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-section-title,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-branch-overview,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-map-legend {
  margin-bottom: 5px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-event-tree-viewport {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) ~ .shibuya-rankings {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-no-run-surface,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-rankings {
  margin-top: 6px;
}

@media (orientation: portrait) and (max-width: 760px) {
  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-page-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-page-head > div:first-child {
    grid-template-columns: auto 1fr;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] #shibuyaAccessStatus {
    display: none;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-head-actions > button {
    flex: 0 0 auto;
    width: auto;
    padding-inline: 8px;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-operation-strip {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-route-progress {
    display: none;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
    grid-row: 1;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-shibuya-focus="true"] .shibuya-party-panel {
    grid-row: 2;
  }
}

/* Web-document escape hatch --------------------------------------------------
 * `data-jjk-phone-layout` is also used for responsive Web CSS.  When the
 * document is a normal Web page (rather than the Capacitor/fixed shell), the
 * battle-focus viewport must remain a regular document so the browser owns
 * vertical scrolling.  This late override neutralises only the fixed-shell
 * geometry; it does not alter V3 battle state or action projection. */
html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"],
html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] :where(
  .app-shell,
  main,
  #duel,
  #duel > .duel-panel,
  #duel .jjk-battle-active-surface,
  #duel .duel-battle,
  #duel .duel-battle-stage
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-block: 0 !important;
  overflow: visible !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body.battle-focus-mode #duel .duel-battle-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 10px !important;
  padding: 10px !important;
  contain: none !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-action-panel,
  .duel-battle-support-grid,
  .duel-interaction,
  .duel-native-report-pane,
  .duel-action-scroll,
  .duel-tactic-panel,
  .duel-log-panel
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  contain: none !important;
  content-visibility: visible !important;
  touch-action: auto !important;
}

/* Mobile interaction shell v4 -------------------------------------------------
 * Phone browsers and the Android wrapper share one viewport profile. Landscape
 * restores the proven dual-scroll battle: hand/actions on the left, one
 * independently scrolling information pane on the right. Portrait keeps the
 * four reachable single-pane views. Rules live at EOF so the retired single-
 * pane Capacitor patch cannot override the dual layout again. */

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) {
  --jjk-safe-top: env(safe-area-inset-top, 0px);
  --jjk-safe-right: env(safe-area-inset-right, 0px);
  --jjk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jjk-safe-left: env(safe-area-inset-left, 0px);
}

html[data-jjk-phone-layout="true"] body {
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html[data-jjk-phone-layout="true"] .app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

html[data-jjk-phone-layout="true"] :where(
  button,
  .tab,
  .jjk-battle-tab,
  .login-acquisition-option,
  details > summary
) {
  min-height: 44px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html[data-jjk-phone-layout="true"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  min-height: 44px;
  font-size: 16px;
}

html[data-jjk-phone-layout="true"] :where(.tabs, .jjk-battle-tabs) {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

/* The title controls are part of the document flow, not a horizontal tab
 * viewport. Allow a vertical page gesture to start over this large mobile
 * header while retaining horizontal access to any genuinely overflowing
 * controls. */
html[data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"] .top-actions {
  overflow: visible;
  overscroll-behavior: auto;
  scroll-snap-type: none;
  touch-action: pan-y;
}

html[data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-landscape"] .top-actions {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-jjk-phone-layout="true"] :where(.tabs, .jjk-battle-tabs) {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

html[data-jjk-phone-layout="true"] :where(.tabs .tab, .jjk-battle-tabs .jjk-battle-tab, .top-actions > *) {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

html[data-jjk-phone-layout="true"] :where(.update-modal, .shibuya-modal) {
  width: 100%;
  height: var(--jjk-viewport-height, 100dvh);
  max-height: var(--jjk-viewport-height, 100dvh);
  padding: max(6px, var(--jjk-safe-top)) max(6px, var(--jjk-safe-right)) max(6px, var(--jjk-safe-bottom)) max(6px, var(--jjk-safe-left));
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-jjk-phone-layout="true"] .shibuya-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, 100%);
  min-height: 0;
  max-height: calc(var(--jjk-viewport-height, 100dvh) - var(--jjk-safe-top) - var(--jjk-safe-bottom) - 12px);
  padding: 12px;
  overflow: hidden;
}

html[data-jjk-phone-layout="true"] .shibuya-modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-jjk-phone-layout="true"] :where(.shibuya-modal-head, .shibuya-modal-actions) {
  position: relative;
  z-index: 2;
  background: #111014;
}

html[data-jjk-phone-layout="true"] #v224UpdateModalClose {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.duel-action-scroll {
  display: contents;
}

html[data-jjk-viewport-profile="phone-landscape"]:not([data-jjk-battle-focus="true"]):not([data-jjk-shibuya-focus="true"]) .topbar {
  display: grid !important;
  grid-template-columns: minmax(178px, .34fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 62px;
  margin: 0 !important;
  padding: max(5px, var(--jjk-safe-top)) max(7px, var(--jjk-safe-right)) 5px max(7px, var(--jjk-safe-left)) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

html[data-jjk-viewport-profile="phone-landscape"] .topbar > div:first-child {
  min-width: 0;
}

html[data-jjk-viewport-profile="phone-landscape"] .topbar h1 {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(.9rem, 3.8vh, 1.12rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-jjk-viewport-profile="phone-landscape"] .topbar h1::before {
  flex: 0 0 auto;
}

html[data-jjk-viewport-profile="phone-landscape"] .topbar :where(#modeHint, .feedback-contact, .top-actions small) {
  display: none !important;
}

html[data-jjk-viewport-profile="phone-landscape"] .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0;
  padding: 1px 2px 3px;
}

html[data-jjk-viewport-profile="phone-landscape"] .top-actions :where(.play-mode-control, .ai-free-toggle, button) {
  width: auto;
  min-width: max-content;
  min-height: 44px;
  margin: 0;
}

html[data-jjk-viewport-profile="phone-landscape"] .top-actions .play-mode-control {
  padding: 2px 5px;
}

html[data-jjk-viewport-profile="phone-landscape"] .tabs {
  top: 0;
  gap: 4px;
  min-height: 50px;
  width: 100% !important;
  margin: 0 !important;
  padding: 3px max(7px, var(--jjk-safe-right)) 3px max(7px, var(--jjk-safe-left));
  border-radius: 0 !important;
}

html[data-jjk-viewport-profile="phone-landscape"] main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 7px max(7px, var(--jjk-safe-right)) max(10px, var(--jjk-safe-bottom)) max(7px, var(--jjk-safe-left));
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"],
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body {
  width: 100%;
  height: var(--jjk-viewport-height, 100dvh);
  min-height: 0;
  max-height: var(--jjk-viewport-height, 100dvh);
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #eef1f7;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] :where(
  body > .topbar,
  .topbar,
  .tabs,
  #duel > .duel-panel > .panel-heading,
  #duel > .duel-panel > .jjk-battle-tabs,
  #duel .jjk-battle-page,
  #duel #duelSummary,
  #duel #duelCards,
  #duel .jjk-battle-active-surface > .jjk-battle-section-head
) {
  display: none !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] :where(
  .app-shell,
  main,
  #duel,
  #duel > .duel-panel,
  #duel .jjk-battle-active-surface,
  #duel .duel-battle
) {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: var(--jjk-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--jjk-viewport-height, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] main {
  padding: var(--jjk-safe-top) var(--jjk-safe-right) var(--jjk-safe-bottom) var(--jjk-safe-left) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0 !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  contain: none;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 44px;
  margin: 0 !important;
  padding: 3px 6px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 7px;
  min-width: 0;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head p,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duelResetBtn {
  display: none !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duelExitFocusBtn {
  display: inline-flex !important;
  align-items: center;
  min-width: max-content;
  min-height: 44px;
  padding: 5px 9px;
  font-size: .68rem;
  white-space: nowrap;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-status {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(100px, 1.5fr) minmax(0, .8fr) !important;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  margin: 0 !important;
  padding: 3px 6px !important;
  overflow: hidden;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score.right {
  justify-content: flex-end;
  text-align: right;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-side-score :where(strong, span) {
  min-width: 0;
  overflow: hidden;
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-score-track {
  height: 10px;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 9px;
  background: rgba(255, 255, 255, .95);
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button {
  min-width: 0;
  min-height: 44px !important;
  padding: 4px 5px;
  overflow: hidden;
  border-radius: 7px;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button.active {
  border-color: #b42318 !important;
  color: #fff !important;
  background: #b42318 !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-mobile-mode-toggle.is-dual {
  border-color: #2f6f68 !important;
  color: #164b46 !important;
  background: rgba(47, 111, 104, .12) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-action-panel,
  .duel-battle-support-grid,
  .duel-interaction,
  .duel-native-report-pane
) {
  grid-row: 4 !important;
  display: none !important;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  content-visibility: visible;
  contain: none;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-panel {
  overflow: hidden !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-scroll {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* One vertical owner per hand pane. Boss mechanic cards expand naturally and
 * the hand scroller moves them together with the cards and fixed action bar. */
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-scroll :where(
  .duel-haruta-interaction,
  .duel-tower-interaction,
  .duel-dagon-interaction,
  .duel-choso-interaction,
  .duel-megumi-toji-interaction,
  .duel-jogo-flashover-interaction,
  .duel-sukuna-jogo-interaction,
  .duel-sukuna-mahoraga-interaction,
  .duel-mahito-interaction
) {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"] body.battle-focus-mode .duel-battle-stage {
  grid-template-columns: minmax(0, 63fr) minmax(270px, 37fr) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"] body.battle-focus-mode .duel-native-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"] body.battle-focus-mode .duel-action-panel {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column;
  padding: 5px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"] body.battle-focus-mode :where(
  .duel-battle-support-grid,
  .duel-interaction,
  .duel-native-report-pane
) {
  grid-column: 2 !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"][data-jjk-native-battle-view="status"] body.battle-focus-mode .duel-battle-support-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 5px;
  padding: 2px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"][data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 6px;
  padding: 2px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="dual"][data-jjk-native-battle-view="report"] body.battle-focus-mode .duel-native-report-pane {
  display: block !important;
  padding: 2px 4px 8px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="compact-single"][data-jjk-native-battle-view="hand"] body.battle-focus-mode .duel-action-panel,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="focused"][data-jjk-native-battle-view="hand"] body.battle-focus-mode .duel-action-panel {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column;
  padding: 5px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="compact-single"][data-jjk-native-battle-view="status"] body.battle-focus-mode .duel-battle-support-grid,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="focused"][data-jjk-native-battle-view="status"] body.battle-focus-mode .duel-battle-support-grid {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 5px;
  padding: 2px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="compact-single"][data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="focused"][data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 6px;
  padding: 2px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="compact-single"][data-jjk-native-battle-view="report"] body.battle-focus-mode .duel-native-report-pane,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"][data-jjk-battle-pane-mode="focused"][data-jjk-native-battle-view="report"] body.battle-focus-mode .duel-native-report-pane {
  grid-column: 1 !important;
  display: block !important;
  padding: 2px 4px 8px !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-battle-support-grid,
  .duel-interaction
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-resource-panel,
  .duel-domain-profile-grid
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-head p.muted,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-pool-hint,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-meta .duel-chip:not([data-duel-action-meta="current-ce"]):not([data-duel-action-meta="selected-ce"]) {
  display: none !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-hand-choices,
  .duel-domain-hand-choices
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
  gap: 5px !important;
}

/* Mobile defaults to decision-dense card fronts without enabling lite mode.
 * Selected cards and the explicit details disclosure still expose full copy. */
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-card:not(.active) .duel-action-choice {
  min-height: 74px !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 10px;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-card:not(.active) :where(
  .duel-action-subtitle,
  .duel-action-card-meta,
  .duel-action-numeric-brief,
  .duel-summon-preview,
  .duel-action-effect,
  .duel-action-tags,
  .duel-hand-detail
) {
  display: none !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-card:not(.active) .duel-action-status {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  white-space: normal;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-option {
  min-height: 44px !important;
  padding: 5px 8px;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-execute-control {
  position: relative !important;
  flex: 0 0 auto;
  z-index: 20;
  right: auto;
  bottom: auto;
  display: flex !important;
  justify-content: flex-end;
  min-height: 52px !important;
  margin: 5px 0 0 !important;
  padding: 4px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .97) !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-execute-control .primary {
  width: auto !important;
  min-width: 118px;
  min-height: 44px !important;
  padding: 7px 13px !important;
}

/* Spectators keep both hands and the center report visible in landscape.
 * Portrait falls back to one clear vertical owner instead of clipped columns. */
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-spectator-stage {
  display: grid;
  grid-template-rows: minmax(54px, auto) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-spectator-top {
  min-height: 0;
  max-height: 92px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"] body.battle-focus-mode .duel-spectator-layout {
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) minmax(240px, 1.35fr) minmax(170px, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 5px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="landscape-dual"] body.battle-focus-mode :where(
  .duel-spectator-hand,
  .duel-spectator-center
) {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-layout="compact-single"] body.battle-focus-mode .duel-spectator-layout {
  display: block !important;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (orientation: portrait), (max-width: 679px) {
  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head {
    min-height: 48px;
  }

  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-mobile-mode-toggle {
    display: none !important;
  }

  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
    .duel-hand-choices,
    .duel-domain-hand-choices
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone-browser Shibuya route: the activity remains inside the visual
 * viewport, while portrait uses an internally scrolling page plus a bounded
 * event-tree scroller.  Do not divide a short screen into fractional rows:
 * browser chrome can otherwise collapse the actual tree viewport to 0px. */
html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"],
html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] body {
  width: 100%;
  height: var(--jjk-viewport-height, 100dvh);
  min-height: 0;
  max-height: var(--jjk-viewport-height, 100dvh);
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #07070a;
}

/* Web phone portrait battle focus r2: keep one compact control row at the
 * top, remove the duplicate bottom action overlay, and let the selected-hand
 * summary remain part of the normal scrolling hand flow.  This is scoped to
 * the Android browser phone layout so desktop, Capacitor, and landscape retain their existing
 * battle presentation. */
@media (orientation: portrait) {
  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head {
    display: none !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-status {
    grid-row: 2 !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav::-webkit-scrollbar {
    display: none;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button {
    flex: 0 0 auto;
    min-width: 58px !important;
    min-height: 42px !important;
    height: 42px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-native-lock-button {
    flex-basis: 92px;
    min-width: 92px !important;
    order: 3;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode :where(
    .duel-action-panel,
    .duel-battle-support-grid,
    .duel-interaction,
    .duel-native-report-pane
  ) {
    grid-row: 3 !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-execute-control {
    display: none !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-toolbar {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-selected-hand-summary {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final Web-document override: keep normal Web pages document-scrollable. */
html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"],
html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] :where(
  .app-shell, main, #duel, #duel > .duel-panel,
  #duel .jjk-battle-active-surface, #duel .duel-battle,
  #duel .duel-battle-stage
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-block: 0 !important;
  overflow: visible !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body.battle-focus-mode #duel .duel-battle-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 10px !important;
  padding: 10px !important;
  contain: none !important;
}

html[data-jjk-layout-mode="web-document"][data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-action-panel, .duel-battle-support-grid, .duel-interaction,
  .duel-native-report-pane, .duel-action-scroll, .duel-tactic-panel,
  .duel-log-panel
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  contain: none !important;
  content-visibility: visible !important;
  touch-action: auto !important;
}

/* Web portrait battle row: reserve the center grid cell for the only lock
 * action so hand/status controls cannot overlap it. */
@media (orientation: portrait) and (max-width: 760px) {
  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-native-lock-button {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    order: initial !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-mobile-mode-toggle[hidden] {
    display: none !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"] body.battle-focus-mode :is(.duel-interaction, .duel-tactic-panel, .duel-round-panel) {
    position: static !important;
    z-index: auto !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"][data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
    align-content: start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-jjk-web-frontend="android"][data-jjk-phone-layout="true"][data-jjk-viewport-profile="phone-portrait"][data-jjk-battle-focus="true"][data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-tactic-panel {
    display: block !important;
    max-height: min(44dvh, 420px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"]) .douna-damage-broadcasts {
    max-height: 46px !important;
    overflow-y: auto !important;
  }
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] :where(.topbar, .tabs, #duel > .duel-panel > .panel-heading, #duel > .duel-panel > .jjk-battle-tabs) {
  display: none !important;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] :where(.app-shell, main, #duel, #duel > .duel-panel, .jjk-battle-page.shibuya-incident-page.active) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] main {
  padding: var(--jjk-safe-top) var(--jjk-safe-right) var(--jjk-safe-bottom) var(--jjk-safe-left) !important;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-incident-page:not(.has-active-run) {
  display: block !important;
  padding: 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-incident-page.has-active-run {
  display: block !important;
  padding: 5px 7px 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-incident-page.has-active-run > :where(.shibuya-no-run-surface, .shibuya-rankings) {
  display: none !important;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 5px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-layout {
  display: grid;
  grid-template-columns: minmax(190px, 36fr) minmax(0, 64fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-party-panel,
html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-event-tree-viewport {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.shibuya-mobile-view-switch {
  display: none;
}

@media (orientation: portrait) and (max-width: 760px) {
  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-incident-page.has-active-run {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px;
    min-height: 0;
    margin: 0 0 5px;
    padding: 3px 4px 5px;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-page-head > div:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-kicker {
    font-size: .56rem;
    white-space: nowrap;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-page-head h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] #shibuyaAccessStatus {
    display: none;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-head-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-head-actions:has(#shibuyaAbandonBtn[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-head-actions > button {
    flex: none;
    width: auto !important;
    min-width: 0;
    min-height: 34px;
    padding: 4px 5px;
    font-size: .66rem;
    line-height: 1.2;
    white-space: normal;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-hud {
    display: grid;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(124px, 42vw);
    gap: 5px;
    margin: 0;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-hud > div {
    min-height: 48px;
    padding: 5px 8px;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-hud span,
  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-hud small {
    font-size: .54rem;
    line-height: 1.12;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-hud strong {
    font-size: .88rem;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-operation-strip {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 46px;
    margin: 0;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-route-sigil {
    min-width: 52px;
    padding: 6px 4px;
    font-size: .8rem;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-route-copy {
    min-width: 0;
    padding: 5px 8px;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-route-copy strong {
    margin-top: 2px;
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-route-copy p {
    margin-top: 2px;
    overflow: hidden;
    font-size: .6rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-route-progress {
    display: none;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-mission-message {
    min-height: 28px;
    max-height: 34px;
    margin: 0;
    padding: 5px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: .62rem;
    line-height: 1.3;
    touch-action: pan-y;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    min-height: 0;
    height: 100% !important;
    overflow: hidden;
    contain: layout style;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
    grid-row: 1;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0 !important;
    height: 100% !important;
    padding: 6px;
    overflow: hidden !important;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-party-panel {
    grid-row: 1;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 6px;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-event-tree-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch,
  :is(
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-height: 36px;
    padding: 2px;
    border: 1px solid rgba(231, 189, 98, .28);
    border-radius: 9px;
    background: rgba(7, 7, 10, .94);
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch > button,
  :is(
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch > button {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid transparent;
    color: #aaa39d;
    background: transparent;
    font-size: .72rem;
    touch-action: manipulation;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch > button.active,
  :is(
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch > button.active {
    border-color: rgba(231, 189, 98, .72);
    color: #fff1c8;
    background: linear-gradient(135deg, rgba(108, 76, 22, .78), rgba(41, 17, 19, .94));
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-incident-page[data-shibuya-mobile-pane="map"] .shibuya-party-panel,
  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-incident-page[data-shibuya-mobile-pane="party"] .shibuya-tree-panel {
    display: none !important;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-section-title {
    margin-bottom: 4px;
    font-size: .72rem;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-section-title small {
    display: none;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-branch-overview {
    min-height: 40px;
    margin-bottom: 4px;
    padding-bottom: 2px;
    touch-action: pan-x pan-y;
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-history-chain {
    display: none !important;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-branch-chip {
    min-width: 102px;
    padding: 6px 8px 7px;
  }

  html[data-jjk-phone-layout="true"][data-jjk-shibuya-focus="true"] .shibuya-map-legend {
    display: none;
  }

  /* Keep the Android wrapper on the same single-scroll-owner contract as the
   * phone browser. Earlier native portrait rules split this row in two even
   * when one pane was hidden, leaving the event tree with only a fraction of
   * the usable height. */
  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
    grid-row: 1 !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-party-panel {
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  :is(
    html[data-jjk-phone-layout="true"],
    html[data-jjk-app-runtime="capacitor"],
    html[data-jjk-app-runtime-hint="capacitor"]
  )[data-jjk-shibuya-focus="true"] .shibuya-event-tree-viewport {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

/* Some Android browsers update their CSS orientation query one frame later
 * than the visual viewport.  The app-shell geometry profile is authoritative
 * for layout, so this fallback keeps the portrait activity playable during
 * that disagreement instead of leaving every outer container locked. */
@media (max-width: 760px) {
  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-incident-page.has-active-run {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-run-surface:not([hidden]) {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-tree-panel {
    grid-row: 1 !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] :where(.shibuya-party-panel, .shibuya-event-tree-viewport) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-mobile-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-incident-page[data-shibuya-mobile-pane="map"] .shibuya-party-panel,
  html[data-jjk-viewport-orientation="portrait"][data-jjk-shibuya-focus="true"] .shibuya-incident-page[data-shibuya-mobile-pane="party"] .shibuya-tree-panel {
    display: none !important;
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage:not(.resolved) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-status {
    grid-template-columns: minmax(0, .7fr) minmax(80px, 1.2fr) minmax(0, .7fr) !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="status"] body.battle-focus-mode .duel-battle-support-grid,
  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-native-battle-view="tactics"] body.battle-focus-mode .duel-interaction {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-control {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-initiative-options {
    justify-content: flex-start;
  }
}

/* Android battle focus r4: the viewport belongs to the active interaction.
 * Round metadata and the score strip remain available in the status pane and
 * report, so they must not permanently consume scarce landscape height. */
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage:not(.resolved) {
  grid-template-rows: minmax(38px, auto) minmax(0, 1fr) !important;
  gap: 3px !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-head,
:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-status {
  display: none !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.16fr) repeat(4, minmax(0, 1fr)) !important;
  gap: 3px;
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 2px;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav button {
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px;
  padding: 3px 4px !important;
  font-size: clamp(.56rem, 1.8vw, .66rem) !important;
  line-height: 1.05;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-native-lock-button {
  min-height: 35px !important;
  height: 35px;
  margin-block: -1px;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 118, 110, .24);
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(
  .duel-action-panel,
  .duel-battle-support-grid,
  .duel-interaction,
  .duel-native-report-pane
) {
  grid-row: 2 !important;
}

:is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-hand-execute-control {
  display: none !important;
}

@media (orientation: portrait), (max-width: 679px) {
  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.16fr) repeat(3, minmax(0, 1fr)) !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-action-toolbar {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    flex: 0 0 auto;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  :is(html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-selected-hand-summary {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* Keep battle panes independently touch-scrollable on Android/WebView. */
.duel-battle-support-grid,.duel-interaction,.duel-native-report-pane,.duel-action-scroll{overflow-y:auto !important;touch-action:pan-y;min-height:0;-webkit-overflow-scrolling:touch}

/* Mobile battle final pass: every secondary pane owns its vertical scroll,
 * while the single lock action stays centered in the top control row. */
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-battle-stage,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duel,
:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode #duel .duel-panel {
  min-height: 0 !important;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(.duel-action-scroll, .duel-battle-support-grid, .duel-interaction, .duel-native-report-pane) {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y pinch-zoom !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode :where(.duel-battle-status, .duel-tactic-panel, .duel-log-panel) {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
}

@media (orientation: portrait) {
  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(92px, 1.2fr) repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 4px !important;
    padding-inline: 2px !important;
    overflow-x: hidden !important;
  }

  :is(html[data-jjk-phone-layout="true"], html[data-jjk-app-runtime="capacitor"], html[data-jjk-app-runtime-hint="capacitor"])[data-jjk-battle-focus="true"] body.battle-focus-mode .duel-native-nav .duel-native-lock-button {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    z-index: auto !important;
    order: initial !important;
  }
}