/* Combat compact — phone overlay only. Desktop combat_styles.css stays the source of truth. */

html.ui-compact-combat {
    --combat-compact-header: 38px;
    --combat-compact-tabs: 40px;
    --bar-air: 6px;
    --footer-safe: calc(8px + env(safe-area-inset-bottom, 0px));
    --actionbar-safe: calc((2 * var(--bar-slot)) + var(--bar-gap) + 16px);
}

html.ui-compact-combat #combat-overlay.combat-container,
html.ui-compact #combat-overlay.combat-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

html.ui-compact-combat .combat-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    height: auto;
    min-height: var(--combat-compact-header);
    padding: 4px 8px 6px;
    gap: 4px;
}

html.ui-compact-combat .combat-header .combat-info {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(8.25rem, 9.75rem) max-content minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    width: 100%;
    max-width: none;
    padding-right: 96px;
    min-width: 0;
    pointer-events: none;
}

html.ui-compact-combat .combat-header .combat-controls {
    grid-column: auto;
    position: absolute;
    top: 4px;
    right: 8px;
}

html.ui-compact-combat .combat-title-rotator {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 2.55em;
    place-items: start start;
    margin: 0;
}

html.ui-compact-combat .combat-title-rotator > .combat-title-line,
html.ui-compact-combat .combat-actions-status {
    display: block !important;
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: left;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

html.ui-compact-combat .combat-title-rotator > .combat-title-line:not(.is-active) {
    position: absolute;
    inset: 0;
    height: auto;
    pointer-events: none;
}

html.ui-compact-combat .round-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
    gap: 0;
    line-height: 1.15;
    min-width: 52px;
    margin-left: 0;
}

html.ui-compact-combat .round-info-time-label,
html.ui-compact-combat .round-info-time-unit {
    display: none;
}

html.ui-compact-combat .round-info #round-timer {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: rgba(255, 233, 181, 0.96);
}

html.ui-compact-combat .ui-compact-log-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 8px 6px;
    min-height: 44px;
    box-sizing: border-box;
}

html.ui-compact-combat .ui-compact-log-filters-toggle {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.72);
    color: rgba(255, 244, 216, 0.86);
    font-size: 13px;
}

html.ui-compact-combat .ui-compact-log-filters-toggle.is-filtered,
html.ui-compact-combat .ui-compact-log-toolbar.is-filters-open .ui-compact-log-filters-toggle {
    border-color: rgba(242, 210, 132, 0.6);
    color: rgba(255, 244, 216, 0.96);
}

html.ui-compact-combat #combat-overlay .combat-col-log > .combat-log-filters,
html.ui-compact-combat #combat-overlay .combat-log-filters .combat-anim-toggle {
    display: none !important;
}

html.ui-compact-combat #combat-overlay .ui-compact-log-toolbar .combat-log-filters {
    display: none !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact-combat #combat-overlay .ui-compact-log-toolbar.is-filters-open .combat-log-filters {
    display: flex !important;
    flex-wrap: nowrap;
}

html.ui-compact-combat .ui-compact-combat-anim-toggle {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.72);
    color: rgba(255, 244, 216, 0.78);
    font-size: 13px;
    line-height: 1;
}

html.ui-compact-combat .ui-compact-combat-anim-toggle.is-on {
    border-color: rgba(242, 210, 132, 0.6);
    color: rgba(255, 244, 216, 0.96);
    background: rgba(40, 32, 16, 0.88);
}

html.ui-compact-combat .ui-compact-combat-anim-toggle.is-off {
    border-color: rgba(190, 169, 121, 0.18);
    color: rgba(255, 244, 216, 0.58);
}

html.ui-compact-combat .ui-compact-log-toolbar .menu-buttons {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    width: auto !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    padding: 0 !important;
}

html.ui-compact-combat .ui-compact-log-toolbar.is-filters-open .menu-buttons {
    display: none !important;
}

html.ui-compact-combat .combat-footer-menu > .menu-buttons,
html.ui-compact-combat .combat-header > .menu-buttons {
    display: none !important;
}

html.ui-compact-combat .ui-compact-log-toolbar .footer-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 5px;
    flex: 0 0 36px;
    border-radius: 9px;
}

html.ui-compact-combat .ui-compact-log-toolbar .footer-button .button-text {
    display: none;
}

html.ui-compact-combat .ui-compact-log-toolbar .footer-button .button-icon {
    width: 18px;
    height: 18px;
}

html.ui-compact-combat .ui-compact-combat-tabs {
    display: flex;
    gap: 6px;
    padding: 0 8px 6px;
    flex: 0 0 auto;
    align-items: center;
}

html.ui-compact-combat .combat-footer-menu > .ui-compact-combat-tabs {
    display: none;
}

html.ui-compact-combat .ui-compact-combat-tab {
    flex: 1 1 0;
    min-height: 36px;
    border: 1px solid rgba(190, 169, 121, 0.28);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.72);
    color: rgba(255, 244, 216, 0.78);
    font-size: 13px;
}

html.ui-compact-combat .ui-compact-combat-tab.is-active {
    border-color: rgba(242, 210, 132, 0.6);
    color: rgba(255, 244, 216, 0.96);
    background: rgba(40, 32, 16, 0.88);
}

html.ui-compact-combat #combat-overlay .combat-main-4col {
    display: flex !important;
    flex-direction: column;
    position: relative;
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none;
    margin-bottom: 0;
    /* Bar is viewport-fixed; keep only a slim air gap above it. */
    padding-bottom: calc(var(--footer-safe) + var(--actionbar-safe) + var(--bar-air, 6px));
    overflow: hidden;
}

html.ui-compact-combat .ui-compact-combat-pagers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

html.ui-compact-combat .ui-compact-combat-pager {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.42;
    cursor: pointer;
}

html.ui-compact-combat .ui-compact-combat-pager.is-prev {
    left: 2px;
}

html.ui-compact-combat .ui-compact-combat-pager.is-next {
    right: 2px;
}

html.ui-compact-combat .ui-compact-combat-pager::before {
    content: '';
    display: block;
    width: 10px;
    height: 18px;
    margin: 0 auto;
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 1.5 2 6l4 4.5'/></svg>");
}

html.ui-compact-combat .ui-compact-combat-pager.is-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path fill='none' stroke='%23e8d5a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 1.5 6 6 2 10.5'/></svg>");
}

html.ui-compact-combat .ui-compact-combat-pager:active {
    opacity: 0.85;
}

html.ui-compact-combat #combat-overlay.is-compact-combat-chat-open .ui-compact-combat-pagers {
    display: none;
}

html.ui-compact-combat #combat-overlay .combat-col-allies,
html.ui-compact-combat #combat-overlay .combat-col-enemies,
html.ui-compact-combat #combat-overlay .combat-col-log {
    display: none !important;
    width: 100% !important;
    height: auto;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
}

html.ui-compact-combat #combat-overlay[data-compact-combat="log"] .combat-col-log,
html.ui-compact-combat #combat-overlay[data-compact-combat="allies"] .combat-col-allies,
html.ui-compact-combat #combat-overlay[data-compact-combat="enemies"] .combat-col-enemies {
    display: flex !important;
    flex-direction: column;
}

html.ui-compact-combat #combat-overlay .combat-col-log .combat-log-shell,
html.ui-compact-combat #combat-overlay .combat-col-allies .combat-panel,
html.ui-compact-combat #combat-overlay .combat-col-enemies .combat-panel,
html.ui-compact-combat #combat-overlay .combat-col-chat .combat-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

html.ui-compact-combat #combat-overlay .combat-log-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 8px;
}

html.ui-compact-combat #combat-overlay .combat-log-filter-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
}

html.ui-compact-combat #combat-overlay .combat-log {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 13px;
}

html.ui-compact-combat #combat-overlay .combat-panel h3 {
    flex: 0 0 auto;
    font-size: 13px;
    margin: 4px 0 6px;
}

html.ui-compact-combat #combat-overlay .combatant-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

html.ui-compact-combat #combat-overlay .combatant-row,
html.ui-compact-combat #combat-overlay .combatant-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

html.ui-compact-combat #combat-overlay .combatant-card {
    padding: 8px 10px;
    margin-bottom: 6px;
}

html.ui-compact-combat #combat-overlay .combatant-tool-btn {
    width: 32px;
    height: 32px;
    opacity: 1;
}

html.ui-compact-combat #combat-overlay .combatant-tool-icon {
    width: 16px;
    height: 16px;
}

html.ui-compact-combat #combat-overlay .combatant-effect-icon-wrap,
html.ui-compact-combat #combat-overlay .combatant-effect-icon {
    width: 36px;
    height: 36px;
}

html.ui-compact-combat #combat-overlay .combatant-name {
    font-size: 14px;
}

html.ui-compact-combat #combat-overlay .combat-col-chat {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: auto;
    top: var(--drawer-top, 72px);
    bottom: calc(var(--footer-safe) + var(--actionbar-safe));
    width: min(86vw, 360px);
    height: auto;
    min-height: 0;
    z-index: 2400;
    padding: 8px;
    box-sizing: border-box;
    pointer-events: none;
    transform: translateX(calc(-100% - 16px));
    transition: transform 0.22s ease;
    background: rgba(8, 11, 18, 0.94);
    border: 1px solid rgba(190, 169, 121, 0.32);
    border-left: 0;
    border-radius: 0 14px 14px 0;
}

html.ui-compact-combat #combat-overlay.is-compact-combat-chat-open .combat-col-chat {
    pointer-events: auto;
    transform: translateX(0);
}

html.ui-compact-combat #combat-overlay .combat-col-chat .chat-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
    display: flex;
    flex-direction: column;
}

html.ui-compact-combat #combat-overlay .combat-col-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact-combat #combat-overlay .combat-col-chat .chat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html.ui-compact-combat #combat-overlay .combat-col-chat .chat-input input {
    min-height: 40px;
    font-size: 16px;
}

html.ui-compact-combat .combat-footer-menu {
    flex: 0 0 0;
    height: 0 !important;
    min-height: 0 !important;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    pointer-events: none;
}

html.ui-compact-combat .combat-footer-menu .action-bar-wrapper {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

html.ui-compact-combat .combat-footer-menu .shield-icons-container,
html.ui-compact-combat #combat-shield-icon,
html.ui-compact-combat .combat-footer-menu .action-bar-side-tools:empty {
    display: none !important;
}

html.ui-compact-combat .ui-compact-combat-tabs .summon-toggle-button,
html.ui-compact-combat .ui-compact-combat-tabs .puppet-toggle-button,
html.ui-compact-combat .ui-compact-log-toolbar .summon-toggle-button,
html.ui-compact-combat .ui-compact-log-toolbar .puppet-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid rgba(210, 184, 122, 0.62);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 232, 176, 0.22), transparent 46%),
        linear-gradient(180deg, rgba(58, 44, 22, 0.96), rgba(22, 16, 10, 0.96));
    color: rgba(248, 228, 176, 0.96);
    box-shadow:
        inset 0 0 0 1px rgba(224, 192, 128, 0.22),
        0 0 0 1px rgba(40, 28, 12, 0.55);
}

html.ui-compact-combat .ui-compact-combat-tabs.has-two-actor-tools .ui-compact-combat-tab,
html.ui-compact-combat .ui-compact-log-toolbar.has-two-actor-tools .ui-compact-combat-tab {
    min-height: 32px;
    font-size: 12px;
    padding: 0 6px;
}

html.ui-compact-combat .ui-compact-combat-tabs.has-two-actor-tools .summon-toggle-button,
html.ui-compact-combat .ui-compact-combat-tabs.has-two-actor-tools .puppet-toggle-button,
html.ui-compact-combat .ui-compact-log-toolbar.has-two-actor-tools .summon-toggle-button,
html.ui-compact-combat .ui-compact-log-toolbar.has-two-actor-tools .puppet-toggle-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    font-size: 15px;
}

@keyframes compact-actor-pending {
    0%, 100% {
        border-color: rgba(176, 104, 72, 0.62);
        background:
            radial-gradient(circle at 32% 28%, rgba(255, 196, 140, 0.2), transparent 48%),
            linear-gradient(180deg, rgba(78, 38, 22, 0.96), rgba(32, 16, 10, 0.96));
        box-shadow: 0 0 0 1px rgba(160, 88, 56, 0.35), 0 0 10px rgba(140, 72, 40, 0.28);
    }
    50% {
        border-color: rgba(210, 148, 104, 0.92);
        background:
            radial-gradient(circle at 32% 28%, rgba(255, 210, 160, 0.34), transparent 50%),
            linear-gradient(180deg, rgba(96, 48, 26, 0.98), rgba(40, 20, 12, 0.96));
        box-shadow: 0 0 0 2px rgba(186, 110, 70, 0.48), 0 0 14px rgba(168, 96, 56, 0.4);
    }
}

@keyframes compact-actor-accepted {
    0%, 100% {
        border-color: rgba(168, 156, 96, 0.58);
        background:
            radial-gradient(circle at 32% 28%, rgba(220, 214, 140, 0.2), transparent 48%),
            linear-gradient(180deg, rgba(48, 50, 24, 0.96), rgba(20, 20, 12, 0.96));
        box-shadow: 0 0 0 1px rgba(140, 148, 80, 0.28), 0 0 8px rgba(120, 132, 72, 0.2);
    }
    50% {
        border-color: rgba(204, 190, 124, 0.88);
        background:
            radial-gradient(circle at 32% 28%, rgba(236, 226, 160, 0.32), transparent 50%),
            linear-gradient(180deg, rgba(62, 64, 30, 0.98), rgba(24, 24, 14, 0.96));
        box-shadow: 0 0 0 2px rgba(168, 164, 96, 0.42), 0 0 12px rgba(140, 150, 88, 0.3);
    }
}

html.ui-compact-combat .summon-toggle-button.is-turn-pending,
html.ui-compact-combat .puppet-toggle-button.is-turn-pending {
    animation: compact-actor-pending 1.35s ease-in-out infinite;
}

html.ui-compact-combat .summon-toggle-button.is-turn-accepted,
html.ui-compact-combat .puppet-toggle-button.is-turn-accepted {
    animation: compact-actor-accepted 1.8s ease-in-out infinite;
}

html.ui-compact-combat .ui-compact-combat-tabs .summon-toggle-button:not(.available),
html.ui-compact-combat .ui-compact-combat-tabs .puppet-toggle-button:not(.available),
html.ui-compact-combat .ui-compact-log-toolbar .summon-toggle-button:not(.available),
html.ui-compact-combat .ui-compact-log-toolbar .puppet-toggle-button:not(.available) {
    display: none;
}

html.ui-compact-combat .combatant-card.self .aura-shield-icon,
html.ui-compact-combat .combatant-card.self .transform-indicator {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    position: relative;
    overflow: visible;
}

html.ui-compact-combat .combatant-card.self .aura-shield-icon.inactive,
html.ui-compact-combat .combatant-card.self .transform-indicator.transform_inactive {
    display: none;
}

html.ui-compact-combat .combatant-card.self .aura-badge,
html.ui-compact-combat .combatant-card.self .transform-indicator__bonus {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(8, 10, 14, 0.88);
    color: #f2ddb1;
    font-size: 9px;
    line-height: 12px;
    z-index: 2;
}

html.ui-compact-combat #combat-overlay > #uiCompactChatBtn,
html.ui-compact-combat #uiCompactChatBtn {
    display: grid !important;
    position: fixed;
    left: auto;
    top: auto;
    right: 6px;
    bottom: calc(var(--footer-safe) + var(--actionbar-safe) + 12px);
    z-index: 3500;
}

html.ui-compact-combat #combat-overlay #combat-action-bar,
html.ui-compact-combat .combat-footer-menu .action-bar-wrapper #combat-action-bar.action-bar-container,
html.ui-compact-combat .combat-footer-menu .action-bar-wrapper #combat-action-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 !important;
    justify-self: stretch !important;
    bottom: var(--footer-safe) !important;
    display: grid !important;
    flex-direction: unset !important;
    align-items: center !important;
    justify-content: start !important;
    grid-template-rows: var(--bar-slot) var(--bar-slot) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--bar-slot) !important;
    gap: var(--bar-gap);
    padding: 8px var(--bar-pad);
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    pointer-events: auto;
}

/* World bar is moved inside #combat-action-bar with width:max-content.
   Unwrap it, or the 3 desktop rows become 2 grid columns. */
html.ui-compact-combat #combat-action-bar > .action-bar-container,
html.ui-compact-combat #combat-action-bar > .combat-embedded-bar {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: none !important;
}

html.ui-compact-combat #combat-action-bar .action-bar-row,
html.ui-compact-combat .combat-footer-menu .action-bar-row {
    display: contents !important;
}

html.ui-compact-combat #combat-action-bar.can-scroll-left::before {
    left: 0;
}

html.ui-compact-combat #combat-action-bar.can-scroll-right::after {
    right: 0;
}

html.ui-compact-combat #combat-action-bar::before,
html.ui-compact-combat #combat-action-bar::after {
    bottom: var(--footer-safe) !important;
}

html.ui-compact-combat body.combat-mode #cast-bar-container,
html.ui-compact-combat #cast-bar-container {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    bottom: calc(var(--footer-safe) + var(--actionbar-safe) + 8px) !important;
    max-height: min(46vh, 360px);
    overflow: visible;
}

html.ui-compact-combat .combat-preparation-timer,
html.ui-compact-combat #post-combat-countdown {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    white-space: normal;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

html.ui-compact-combat .combat-preparation-timer {
    transform: translateY(-50%) !important;
    font-size: 22px;
    line-height: 1.15;
    padding: 12px 14px;
}

html.ui-compact-combat #post-combat-countdown {
    top: auto !important;
    bottom: calc(var(--footer-safe) + var(--actionbar-safe) + 12px) !important;
    transform: none !important;
    align-items: stretch;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 1.3;
    padding: 10px 12px 12px;
    max-height: min(
        38dvh,
        calc(100dvh - var(--header-safe) - var(--footer-safe) - var(--actionbar-safe) - 24px)
    );
    overflow-x: hidden;
    overflow-y: auto;
}

html.ui-compact-combat #post-combat-results-btn {
    display: grid !important;
    position: fixed;
    left: auto;
    top: auto;
    right: 6px;
    bottom: calc(var(--footer-safe) + var(--actionbar-safe) + 60px);
    z-index: 3500;
}

html.ui-compact-combat #post-combat-results-btn[hidden],
html.ui-compact-combat #post-combat-countdown.is-minimized {
    display: none !important;
}

html.ui-compact-combat #post-combat-countdown .post-combat-countdown__min {
    width: 36px;
    height: 36px;
    top: -4px;
    right: -6px;
}

/* Unfolded Fold / tablet portrait: three combat panes at once.
   Phone portrait and landscape stay on the single-pane tab shell. */
@media (min-width: 600px) and (min-height: 600px) {
    html.ui-compact-combat {
        --combat-col-chat: 0%;
        --combat-col-allies: 26%;
        --combat-col-enemies: 26%;
    }

    html.ui-compact-combat .ui-compact-combat-tabs,
    html.ui-compact-combat .ui-compact-combat-pagers {
        display: none !important;
    }

    html.ui-compact-combat .combat-header {
        display: grid;
        grid-template-columns: minmax(168px, 0.3fr) minmax(0, 1fr) minmax(168px, 0.3fr);
        align-items: start;
        column-gap: 8px;
        padding: 4px 8px 6px;
    }

    html.ui-compact-combat .combat-header .combat-info {
        display: contents;
        padding-right: 0;
        max-width: none;
    }

    html.ui-compact-combat .combat-title-rotator {
        grid-column: 1;
        min-width: 0;
    }

    html.ui-compact-combat .round-info {
        grid-column: 2;
        justify-self: center;
        align-items: center;
        text-align: center;
        min-width: 0;
    }

    html.ui-compact-combat .combat-header .combat-controls {
        grid-column: 3;
        position: static;
        top: auto;
        right: auto;
        justify-self: end;
        align-self: start;
    }

    html.ui-compact-combat #combat-overlay .combat-main-4col {
        display: grid !important;
        grid-template-columns: minmax(168px, 0.3fr) minmax(0, 1fr) minmax(168px, 0.3fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    html.ui-compact-combat #combat-overlay .ui-compact-log-toolbar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    html.ui-compact-combat #combat-overlay .combat-col-allies,
    html.ui-compact-combat #combat-overlay .combat-col-log,
    html.ui-compact-combat #combat-overlay .combat-col-enemies {
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        min-width: 0;
        height: auto;
        max-height: none;
        grid-row: 2;
    }

    html.ui-compact-combat #combat-overlay .combat-col-allies {
        grid-column: 1;
    }

    html.ui-compact-combat #combat-overlay .combat-col-log {
        grid-column: 2;
    }

    html.ui-compact-combat #combat-overlay .combat-col-enemies {
        grid-column: 3;
    }

    html.ui-compact-combat .combat-log-shell .combat-preparation-timer {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        width: max-content !important;
        max-width: calc(100% - 24px) !important;
        transform: translate(-50%, -50%) !important;
    }

    html.ui-compact-combat .combat-log-shell #post-combat-countdown {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 12px !important;
        width: min(420px, calc(100% - 16px)) !important;
        max-width: calc(100% - 16px) !important;
        max-height: min(42vh, calc(100% - 24px)) !important;
        transform: translateX(-50%) !important;
    }

    html.ui-compact-combat body.combat-mode #cast-bar-container,
    html.ui-compact-combat #cast-bar-container {
        left: calc(var(--combat-log-inset-left) + 12px) !important;
        right: calc(var(--combat-log-inset-right) + 12px) !important;
    }
}