/* Landscape command deck for Battle V3. All selectors are scoped to compact mode. */
body.v3-compact-mode { --mobile-header-height: clamp(42px, 12dvh, 58px); --mobile-top-inset: max(8px, env(safe-area-inset-top)); }
/* Body-mounted combat overlays must stay behind the portrait rotation screen. */
body.v3-compact-mode.v3-mobile-portrait > :not(.v3-compact-battle):not(.v3-settings-toggle):not(.v3-settings-panel) {
    visibility: hidden !important; pointer-events: none !important;
}
body.v3-compact-mode .v3-compact-battle {
    --mobile-blue: #72ceff;
    --mobile-gold: #ffd992;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(40px, 6vw, 86px) minmax(0, 1fr) 36px;
    grid-template-rows: var(--mobile-header-height) minmax(0, 1fr) clamp(104px, 30dvh, 140px);
    gap: 7px 10px;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    height: 100dvh; overflow: hidden; min-height: 0;
    background: radial-gradient(ellipse at 50% 45%, #684cc22b, transparent 52%),
        linear-gradient(180deg, #030c22b5, #090e2930 42%, #040b22e6),
        var(--mobile-arena-art, url('../image/backgrounds/battlev3_vs.webp')) center / cover;
}
body.v3-compact-mode .v3-compact-battle::before {
    position: absolute; inset: 4px; border: 1px solid #81a6fc45; border-radius: 16px;
    box-shadow: inset 0 0 40px #03051a9c, 0 0 15px #8190ff16;
}
/* Boss event panel must not cover the mobile battlefield. */
body.v3-compact-mode .bossfight-panel { display: none; }
body.v3-compact-mode .v3-compact-header {
    position: relative; grid-column: 1 / -1; grid-row: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; align-items: center;
    gap: 12px; padding: 0 44px 0 0; min-height: 0;
    border: 0; border-bottom: 1px solid #7b9ee84d;
    background: linear-gradient(90deg, #07172da6, #11173580 50%, #16102299);
}
body.v3-compact-mode .v3-mobile-profile { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.v3-compact-mode .v3-mobile-profile > img {
    flex: 0 0 auto; width: 38px; height: 38px; object-fit: cover; border-radius: 50%;
    border: 1px solid #7fceff; box-shadow: 0 0 0 2px #122645, 0 0 12px #54b8fa30;
}
body.v3-compact-mode .v3-mobile-profile > div { min-width: 0; }
body.v3-compact-mode .v3-mobile-profile strong { display: block; font-size: clamp(11px, 1.6vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v3-compact-mode .v3-mobile-profile small { display: block; color: #a4c0e5; font-size: 9px; }
body.v3-compact-mode .v3-mobile-profile--enemy { justify-content: flex-end; text-align: right; }
body.v3-compact-mode .v3-mobile-profile--enemy > img { border-color: #e884ad; box-shadow: 0 0 0 2px #34203c, 0 0 12px #e884ad30; }
body.v3-compact-mode .v3-mobile-round-frame {
    position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 9px; align-self: stretch;
    min-width: 106px; padding: 0 12px; border-bottom: 2px solid #98a7ff;
    border-radius: 0 0 20px 20px; background: linear-gradient(#101b43d9, #18236c99);
    box-shadow: 0 6px 20px #7971ff20;
}
body.v3-compact-mode .v3-mobile-round-frame > span { color: #88ccff; font-size: 10px; text-shadow: 0 0 7px #62b8ff; }
body.v3-compact-mode .v3-compact-round { border: 0; border-radius: 0; padding: 0; background: none; font-size: clamp(14px, 2vw, 23px) !important; color: #f3efff !important; }
body.v3-compact-mode .v3-mobile-fullscreen,
body.v3-compact-mode > .v3-settings-toggle {
    width: 36px; height: 36px; border: 1px solid #77bdf67d; border-radius: 8px;
    background: linear-gradient(#163663, #07172e); color: #bce2ff; box-shadow: inset 0 0 9px #609dff20;
}
body.v3-compact-mode .v3-mobile-fullscreen { font-size: 26px; line-height: 1; }
body.v3-compact-mode > .v3-settings-toggle { top: calc(var(--mobile-top-inset) + (var(--mobile-header-height) - 36px) / 2); right: max(12px, env(safe-area-inset-right)); opacity: 1; }
body.v3-compact-mode .v3-mobile-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.v3-compact-mode .v3-compact-team { grid-row: 2; min-height: 0; display: flex; flex-direction: column; justify-content: center; --team-color: #8edaff; }
body.v3-compact-mode .v3-compact-team--ally { grid-column: 1; }
body.v3-compact-mode .v3-compact-team--enemy { grid-column: 3; --team-color: #ff9aac; }
body.v3-compact-mode .v3-compact-team h2 { flex: 0 0 auto; font-size: 9px; letter-spacing: .08em; margin: 0 0 6px; line-height: 12px; }
body.v3-compact-mode .v3-compact-team h2 small { font-size: 9px; }
body.v3-compact-mode .v3-compact-roster { flex: 1; min-height: 0; max-height: calc(8vw + 76px); gap: clamp(4px, .8vw, 10px); }
body.v3-compact-mode .v3-compact-hero {
    height: 100%; min-height: 0; border-radius: 8px 8px 5px 5px; border-color: color-mix(in srgb, var(--rank-color) 68%, var(--team-color));
    background: #07132c; box-shadow: 0 4px 10px #0009, inset 0 0 0 2px #152747, 0 0 8px #7fbaff20;
}
body.v3-compact-mode .v3-compact-hero::after { inset: 2px; border-radius: 6px 6px 3px 3px; }
/* Leave room for Zofra's garden and Circus's fleet above the portraits. */
body.v3-compact-mode .v3-compact-battle:has(.v3-mobile-summons) .v3-compact-roster { padding-top: 36px; }
body.v3-compact-mode .v3-compact-hero:has(.v3-mobile-summons) { overflow: visible; }
body.v3-compact-mode .v3-mobile-summons {
    position: absolute; bottom: calc(100% + 3px); left: 0; width: 100%; height: 0;
    z-index: 20; pointer-events: none;
}
body.v3-compact-mode .v3-mobile-summons > :is(.zofra-plant-meter, .circus-fleet-bar) {
    bottom: 0; width: 260px; min-width: 0;
    transform: translateX(-50%) scale(var(--mobile-summon-scale, .2));
    transform-origin: bottom center; pointer-events: none;
}
body.v3-compact-mode .v3-compact-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 35%, #07132c70 58%, #07132ced 100%);
}
body.v3-compact-mode .v3-compact-rank-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
    z-index: 5; pointer-events: none; user-select: none;
}
body.v3-compact-mode .v3-compact-portrait { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; object-fit: cover; object-position: center 20%; filter: saturate(1.12); mask-image: none; border-radius: inherit; z-index: 0; }
body.v3-compact-mode .v3-compact-name { flex: 0 0 auto; padding: 3px 3px 4px; font-size: clamp(8px, 1.1vw, 13px); line-height: 1.2; }
body.v3-compact-mode .v3-compact-level {
    top: 6px; left: 2px; width: clamp(26px, 3.5vw, 34px); min-width: 0; height: auto; aspect-ratio: 1;
    padding: 0; border: 0; border-radius: 0; background: none; z-index: 6; pointer-events: none;
}
body.v3-compact-mode .v3-mobile-level-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body.v3-compact-mode .v3-mobile-level-value {
    position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 8%;
    color: var(--rank-glow, #fff); font-size: clamp(8px, 1.1vw, 11px); line-height: 1; font-weight: 800;
    font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
body.v3-compact-mode .v3-compact-vital { flex: 0 0 auto; order: 0; height: 13px; margin: 0 4px 3px; border: 1px solid #82e9c15e; border-radius: 3px; }
body.v3-compact-mode .v3-compact-vital-fill { background: linear-gradient(90deg, #098654, #2ddd83); }
body.v3-compact-mode .v3-compact-team--enemy .v3-compact-vital--hp .v3-compact-vital-fill { background: linear-gradient(90deg, #b72548, #f65e74); }
body.v3-compact-mode .v3-compact-vital--mana { height: 12px; border-color: #80baff70; margin-bottom: 4px; }
body.v3-compact-mode .v3-compact-vital--mana .v3-compact-vital-fill { background: linear-gradient(90deg, #1459c2, #229fff); }
body.v3-compact-mode .v3-compact-vital-value { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(7px, .9vw, 10px); font-weight: 700; line-height: 1; color: white; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
body.v3-compact-mode .v3-compact-hp-value { display: none; }
body.v3-compact-mode .v3-compact-effect-rail { position: relative; flex: 0 0 18px; inset: auto; margin: 0 4px 4px; flex-wrap: nowrap; gap: 2px; overflow: hidden; }
body.v3-compact-mode .v3-compact-effect, body.v3-compact-mode .v3-compact-effect-more { flex: 0 1 16px; min-width: 0; width: 16px; height: 16px; font-size: 7px; }
body.v3-compact-mode .v3-compact-hero.is-current,
body.v3-compact-mode .v3-compact-hero.is-selected { border-color: #99dfff; box-shadow: 0 0 0 1px #479dff, 0 0 16px #54a9ff70; }
body.v3-compact-mode .v3-compact-hero.is-current::after { border-color: #ddfaff; }
body.v3-compact-mode .v3-compact-hero.is-target { border-color: #ffab8e; }
body.v3-compact-mode .v3-compact-hero.is-ally-target { border-color: #7ae7bb; }
/* Combat cues reuse desktop timelines on the visible mobile portrait. */
body.v3-compact-mode .v3-compact-hero.v3-fx-cast::after { animation: v3-fx-cast-pulse .7s ease-out; }
body.v3-compact-mode .v3-compact-hero.v3-fx-hit .v3-compact-portrait { animation: v3-fx-hit-shake .42s ease-out; }
body.v3-compact-mode .v3-compact-hero.v3-fx-heal::after { animation: v3-fx-heal-pulse .72s ease-out; }
body.v3-compact-mode .v3-compact-hero.v3-fx-item::after { animation: v3-fx-item-pulse .72s ease-out; }
body.v3-compact-mode .v3-compact-hero.v3-fx-chosen-target { box-shadow: 0 0 12px #ffd37c; }
body.v3-compact-mode .v3-compact-hero.v3-fx-not-targeted .v3-compact-portrait { filter: brightness(.5); }
body.v3-compact-mode .v3-compact-hero > .v3-action-delta { font-size: 12px; }
body.v3-compact-mode > .v3-combat-feedback-overlay .v3-damage-number { font-size: clamp(18px, 3vw, 26px); }
body.v3-compact-mode > .v3-combat-feedback-overlay.v3-combat-feedback-crit .v3-damage-number { font-size: clamp(24px, 4vw, 34px); }
body.v3-compact-mode > .v3-combat-feedback-overlay strong { font-size: 12px; -webkit-text-stroke-width: 2px; margin-bottom: 2px; }
body.v3-compact-mode > .v3-combat-feedback-overlay small { font-size: 10px; -webkit-text-stroke-width: 1px; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
    body.v3-compact-mode .v3-compact-hero.v3-fx-cast::after,
    body.v3-compact-mode .v3-compact-hero.v3-fx-hit .v3-compact-portrait,
    body.v3-compact-mode .v3-compact-hero.v3-fx-heal::after,
    body.v3-compact-mode .v3-compact-hero.v3-fx-item::after { animation: none; }
}
body.v3-compact-mode .v3-mobile-versus { grid-column: 2; grid-row: 2; align-self: center; text-align: center; pointer-events: none; }
body.v3-compact-mode .v3-mobile-versus > span { display: block; color: #f4d6ff; font: italic 700 clamp(25px, 4.2vw, 54px)/1 Georgia, serif; text-shadow: 0 0 12px #fc8aff, 0 0 30px #a739ff; }
body.v3-compact-mode .v3-mobile-versus > small { display: block; margin-top: 10px; font-size: 6px; letter-spacing: .15em; color: #c7b7ee; }
body.v3-compact-mode .v3-mobile-tools { grid-column: 1; grid-row: 2; display: flex; gap: 4px; min-width: 0; }
body.v3-compact-mode .v3-mobile-tools button { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 0; min-height: 28px; padding: 3px; border: 1px solid #7eaeed48; border-radius: 4px; background: #192a4fa1; color: #bdd9fd !important; font-size: 8px !important; }
body.v3-compact-mode .v3-mobile-tools svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
body.v3-compact-mode .v3-mobile-tools span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v3-compact-mode .v3-compact-turn-order { grid-column: 4; grid-row: 2 / 4; display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 0; padding: 5px 2px; border: 1px solid #74a9f557; border-radius: 7px; background: linear-gradient(#0e2144ce, #080f2bd9); }
body.v3-compact-mode .v3-compact-turn-label { display: block; flex-shrink: 0; text-align: center; color: #a9cdff; font-size: 12px; margin: 0 0 5px; }
body.v3-compact-mode .v3-compact-turn-list { flex-direction: column; flex: 1; gap: 6px; padding: 2px 1px 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
body.v3-compact-mode .v3-compact-turn { flex: 0 0 32px; width: 27px; height: 32px; border-radius: 4px; }
body.v3-compact-mode .v3-compact-turn-empty { font-size: 8px; text-align: center; overflow-wrap: anywhere; }
body.v3-compact-mode .v3-compact-panel {
    grid-column: 1 / 4; grid-row: 3; display: grid; grid-template-columns: minmax(120px, 20%) minmax(0, 1fr) minmax(176px, 28%); grid-template-rows: minmax(0, 1fr) 28px;
    align-items: center; gap: 5px 10px; padding: 8px; overflow: visible; min-height: 0;
    border: 1px solid #85a3f76b; border-radius: 10px; background: linear-gradient(135deg, #182650e8, #07132aeb 48%, #0b1b3bec);
    box-shadow: inset 0 1px #b7c2ff25, 0 -4px 24px #7971ff12;
}
body.v3-compact-mode .v3-compact-panel-head { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; margin: 0; min-width: 0; }
body.v3-compact-mode .v3-compact-panel > .v3-compact-panel-head { grid-column: 1; grid-row: 1; }
body.v3-compact-mode .v3-mobile-ability-deck { grid-column: 2; grid-row: 1; display: flex; align-items: stretch; gap: 7px; min-width: 0; height: 100%; }
body.v3-compact-mode .v3-compact-panel > .v3-compact-command-bar { grid-column: 3; grid-row: 1; }
body.v3-compact-mode .v3-compact-feature-portrait { width: 44px; height: 44px; object-position: center; border: 1px solid #ffcf7f; border-radius: 5px; box-shadow: 0 0 9px #ffa35850; }
body.v3-compact-mode .v3-mobile-feature-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.v3-compact-mode .v3-mobile-feature-class { flex: 0 0 auto; width: 19px; height: 19px; object-fit: contain; }
body.v3-compact-mode .v3-compact-panel-head h2 { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 3px 0 5px; }
body.v3-compact-mode .v3-compact-selection { display: block; font-size: 7px !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v3-compact-mode .v3-compact-feature-vitals { display: block; }
body.v3-compact-mode .v3-compact-feature-vitals .v3-compact-vital { display: block; margin: 0 0 3px; height: 14px; }
body.v3-compact-mode .v3-mobile-ability-deck > .v3-compact-actions { display: flex; flex: 1; align-items: stretch; gap: clamp(4px, .8vw, 10px); min-width: 0; overflow-x: auto; padding: 0 2px; scrollbar-width: none; }
body.v3-compact-mode .v3-mobile-ability-deck > .v3-compact-actions > .v3-compact-action-wrap { flex: 1 0 36px; max-width: 84px; height: 100%; }
body.v3-compact-mode .v3-compact-spells { flex: 0 0 30px; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; }
body.v3-compact-mode .v3-compact-spells .v3-compact-action-info { width: 14px; height: 14px; font-size: 9px !important; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action { position: relative; min-height: 0; height: 100%; padding: 3px; gap: 0; border: 1px solid #a5aff1; border-radius: 8px; background: linear-gradient(135deg, #45456e, #14162e); box-shadow: inset 0 0 0 2px #090e28, 0 3px 8px #0007; overflow: hidden; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action > svg { width: 100%; height: 100%; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action > span { display: none; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action-cost { position: absolute; bottom: 3px; left: 3px; right: 3px; border-radius: 2px; padding: 1px; font-size: 8px; text-align: center; color: #ddf4ff; background: #071128cf; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action:not(:disabled) { border-color: #ffd996; box-shadow: 0 0 9px #ffba6650, inset 0 0 0 2px #322133; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action.is-selected { box-shadow: 0 0 0 2px #c8f5ff, 0 0 16px #78c9ff; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action:disabled { border-color: #667a9c; opacity: .65; }
body.v3-compact-mode .v3-compact-panel .v3-compact-action-info { z-index: 2; width: 24px; height: 24px; border-radius: 0 6px 0 6px; font-size: 12px !important; background: #091329b8; }
body.v3-compact-mode .v3-compact-panel .is-ultimate .v3-compact-action { border: 2px solid #ffd68d; box-shadow: 0 0 12px #fbaf7740; }
body.v3-compact-mode .v3-mobile-mechanics { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
body.v3-compact-mode .v3-mobile-mechanics .v3-compact-action-wrap { position: relative; flex: 0 0 28px; height: 28px; }
body.v3-compact-mode .v3-mobile-mechanics .v3-compact-action { flex: 0 0 28px; width: 28px; padding: 2px; border-radius: 5px; }
body.v3-compact-mode .v3-mobile-mechanics .v3-compact-action-info { position: absolute; top: 0; right: 0; width: 14px; height: 14px; font-size: 9px !important; border: 0; border-radius: 0 4px 0 4px; }
body.v3-compact-mode .v3-mobile-mechanic-fallback { color: #c5d9ff; font-size: 19px; }
body.v3-compact-mode .v3-compact-command-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; min-width: 0; height: 100%; padding-left: 8px; border-left: 1px solid #85a3f72b; }
body.v3-compact-mode .v3-compact-command-bar button { display: grid; place-items: center; justify-self: center; width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; min-height: 0; padding: 5px; border-color: #71b3f28c; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, #244b7b, #0a1a38 76%); box-shadow: inset 0 0 0 2px #08122c, 0 3px 8px #0006; }
body.v3-compact-mode .v3-compact-command-bar button > span { display: none; }
body.v3-compact-mode .v3-compact-command-bar svg, body.v3-compact-mode .v3-compact-command-bar > button > img { width: 100%; height: 100%; max-width: 40px; max-height: 40px; object-fit: contain; }
body.v3-compact-mode .v3-compact-panel > .v3-compact-auto-controls { grid-column: 3; grid-row: 2; display: flex; flex-direction: row; justify-content: flex-end; gap: 5px; align-items: center; min-width: 0; }
body.v3-compact-mode .v3-compact-auto-controls button { display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; min-height: 0; border: 1px solid #7eaeed48; border-radius: 4px; background: #192a4fa1; color: #bdd9fd; }
body.v3-compact-mode .v3-compact-auto-controls svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.v3-compact-mode .v3-compact-auto-controls button > span { display: none; }
body.v3-compact-mode .v3-compact-auto-controls [data-v3-compact-command="exit"] { color: #e3b3bd; }
body.v3-compact-mode .v3-compact-panel button.is-active { color: #91ffdf; border-color: #83e6c6; background: linear-gradient(#206066, #0c2837); }
body.v3-compact-mode .v3-mobile-drawer { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; background: #030818d9; backdrop-filter: blur(10px); }
body.v3-compact-mode .v3-mobile-drawer-panel { width: min(720px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid #84b1ed; border-radius: 12px; background: linear-gradient(135deg, #1c2b4c, #09142c); box-shadow: 0 20px 70px #000a; }
body.v3-compact-mode .v3-mobile-drawer-panel > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #101d38f5; border-bottom: 1px solid #759dce40; }
body.v3-compact-mode .v3-mobile-drawer-panel h2 { margin: 0; color: #e0e7ff; font-size: 17px; }
body.v3-compact-mode .v3-mobile-drawer-close { width: 38px; height: 38px; border: 1px solid #84b1ed66; border-radius: 6px; background: #162c51; font-size: 23px !important; }
body.v3-compact-mode .v3-mobile-drawer-content { padding: 0 16px 16px; }
body.v3-compact-mode .v3-mobile-drawer-content .v3-compact-actions { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
body.v3-compact-mode .v3-compact-info { z-index: 8; }
body.v3-compact-mode .v3-mobile-rotate { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; background: radial-gradient(ellipse at 50% 30%, #453c805e, transparent 65%), linear-gradient(#071127de, #080c22f5), var(--mobile-arena-art) center / cover; }
body.v3-compact-mode .v3-mobile-rotate-symbol { position: relative; color: #b9caff; font-size: 110px; line-height: 1; text-shadow: 0 0 25px #a784ff60; }
body.v3-compact-mode .v3-mobile-rotate-symbol > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #ffe0a5; }
body.v3-compact-mode .v3-mobile-rotate > small { color: #9fb2ed; font-size: 9px; letter-spacing: .22em; margin-top: 30px; }
body.v3-compact-mode .v3-mobile-rotate h1 { color: #f0eaff; font-size: 27px; margin: 14px 0 8px; line-height: 1.15; }
body.v3-compact-mode .v3-mobile-rotate p { max-width: 290px; color: #aab9d9; font-size: 14px; line-height: 1.6; }
body.v3-compact-mode .v3-mobile-rotate-start { min-height: 48px; margin-top: 18px; padding: 10px 24px; border: 1px solid #9cbbff; border-radius: 7px; color: #f4edff; background: linear-gradient(135deg, #414c90, #172c55); box-shadow: 0 0 25px #6e8fff25; }
@media (max-width: 760px) {
    body.v3-compact-mode .v3-compact-battle { gap: 5px 6px; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 31px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
    body.v3-compact-mode .v3-compact-header { gap: 6px; }
    body.v3-compact-mode .v3-mobile-profile { gap: 5px; }
    body.v3-compact-mode .v3-mobile-profile > img { width: 32px; height: 32px; }
    body.v3-compact-mode .v3-mobile-round-frame { min-width: 78px; gap: 5px; padding: 0 6px; }
    body.v3-compact-mode .v3-compact-panel { grid-template-columns: minmax(110px, 19%) minmax(0, 1fr) 168px; gap: 5px 6px; padding: 6px; }
    body.v3-compact-mode .v3-compact-panel-head { grid-template-columns: 32px minmax(0, 1fr); gap: 4px; }
    body.v3-compact-mode .v3-compact-feature-portrait { width: 32px; height: 32px; }
    body.v3-compact-mode .v3-compact-panel-head h2 { font-size: 11px; }
    body.v3-compact-mode .v3-mobile-feature-class { width: 16px; height: 16px; }
    body.v3-compact-mode .v3-mobile-tools span { display: none; }
    body.v3-compact-mode .v3-mobile-tools svg { width: 19px; height: 19px; }
    body.v3-compact-mode > .v3-settings-toggle { right: max(8px, env(safe-area-inset-right)); }
    body.v3-compact-mode .v3-compact-turn { width: 23px; height: 28px; flex-basis: 28px; }
    body.v3-compact-mode .v3-compact-name { font-size: 8px; }
    body.v3-compact-mode .v3-compact-vital { margin-inline: 3px; height: 12px; }
    body.v3-compact-mode .v3-compact-vital-value { font-size: 7px; }
    body.v3-compact-mode .v3-compact-effect, body.v3-compact-mode .v3-compact-effect-more { width: 12px; height: 14px; flex-basis: 12px; }
    body.v3-compact-mode .v3-mobile-versus > small { display: none; }
}
@media (max-height: 340px) and (orientation: landscape) {
    body.v3-compact-mode { --mobile-header-height: 36px; --mobile-top-inset: max(4px, env(safe-area-inset-top)); }
    body.v3-compact-mode .v3-compact-battle { grid-template-rows: var(--mobile-header-height) minmax(0, 1fr) 98px; gap: 4px 6px; padding-block: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-bottom)); }
    body.v3-compact-mode .v3-mobile-profile > img { width: 30px; height: 30px; }
    body.v3-compact-mode .v3-compact-team h2 { margin-bottom: 3px; font-size: 8px; }
    body.v3-compact-mode .v3-compact-panel-head { gap: 2px 4px; }
    body.v3-compact-mode .v3-compact-effect-rail { flex-basis: 14px; margin-bottom: 2px; }
}