/* ============================================
   PLAYTEST MODE - PREMIUM THEME
   Playtesting interface styles
   ============================================ */

/* All zone icons use the theme accent color */
.goldfish-modal .zone-icon {
    color: var(--accent-color);
}

/* Modal Overlay - Integrated Absolute to Right Panel */
.goldfish-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 3000;
    animation: fadeIn 0.3s ease-out;
    cursor: pointer;
}

/* On a handheld: cover the full viewport (including the title bar above the
   panel).

   Keyed to the pointer as well as the width, because a phone turned sideways is
   ~870 CSS pixels across — past the 768px breakpoint — and the overlay was
   falling back to `position: absolute` inside the desktop right panel the
   instant the device was rotated. That is the whole of "landscape looks bad":
   the surface was being laid out inside a box that is not the screen. The width
   cap keeps desktops, where the overlay is meant to sit inside its panel, out
   of it. */
@media (max-width: 768px),
(pointer: coarse) and (max-width: 1024px) {

    /* Two viewports, two jobs. `dvh` tracks the browser's chrome and is what
       the *surface* is sized to, so the action bar never ends up under the
       address bar. But `dvh` is also what leaves a sliver of the app showing at
       the bottom when it lags a rotation or a toolbar animation, so the
       *backdrop* is floored at the layout viewport, which never shrinks, and
       painted opaque. Whatever the two disagree about is then a strip of
       Playtest's own background rather than a glimpse of the panel behind. */
    .goldfish-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 100vh;
        background: var(--bg-secondary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .goldfish-modal {
        height: 100dvh;
    }
}

@media (max-width: 768px) {

    /* On mobile, hide text labels in header toggle buttons to save space */
    .goldfish-header-toggle-btn .btn-text,
    .goldfish-undo-btn .btn-text {
        display: none;
    }

    .goldfish-header {
        padding: 6px 10px;
    }
}

/* Fullscreen is taken on the document, not on this element: only the fullscreen
   element and its descendants are painted above the UA backdrop, and Playtest's
   context menus and drag preview mount at the top of the document. So the
   overlay is stretched to the screen from here instead. */
:root:fullscreen .goldfish-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

:root:-webkit-full-screen .goldfish-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Main Modal Container - Fills the Right Panel Overlay */
.goldfish-modal {
    width: 100%;
    height: 100%;
    background: var(--bg-gradient);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    border: none;
    cursor: default;
}


/* Header */
.goldfish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: var(--glass-blur);
    flex-shrink: 0;
    gap: 8px;
}

.goldfish-title {
    display: flex;
    align-items: center;
}

.goldfish-title-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-color);
    text-transform: uppercase;
}

.goldfish-deck-name {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 400;
}

.goldfish-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Stats/Actions toggle buttons in header */
.goldfish-header-toggle-btn {
    padding: 5px 10px;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.goldfish-header-toggle-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent-color);
    color: var(--accent-light);
}

.goldfish-header-toggle-btn.active {
    background: var(--accent-bg);
    border-color: var(--accent-color);
    color: var(--accent-light);
}

.toggle-chevron {
    font-size: 0.65em;
    opacity: 0.7;
}

.goldfish-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goldfish-close-btn:hover {
    background: var(--entry-hover-bg);
    color: var(--danger-color);
}

.goldfish-close-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}

/* Stats Section */
.goldfish-stats-section {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.goldfish-stats-bar {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-quick-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.stat-item:hover {
    border-color: var(--accent-glow);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
}

.stat-value.turn-value {
    color: var(--accent-color);
    font-size: 1.25rem;
}

.next-turn-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.next-turn-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* HP Bar */
.tags-compact {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    flex: 1;
    height: 26px;
    overflow: hidden;
    align-items: center;
}

.goldfish-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.goldfish-label {
    font-weight: 600;
    color: var(--warning-color);

    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goldfish-hp-bar {
    width: 300px;
    height: 24px;
    background: var(--input-bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.goldfish-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--danger-color, #ef4444) 0%, var(--warning-color, #facc15) 50%, var(--success-color, #4ade80) 100%);
    /* Red -> Yellow -> Green */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.goldfish-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    letter-spacing: 0.5px;
}

/* Main Play Area */
.goldfish-play-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    overflow: hidden;
    position: relative;
    min-height: 0;
    /* Important: allow shrinking to fill space */
}

/* Unified Zone Styles */
.goldfish-zone {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.goldfish-zone:hover {
    background: var(--entry-hover-bg);
    border-color: var(--border-hover);
    box-shadow: var(--popup-shadow);
}

.goldfish-zone.drag-over {
    background: var(--accent-glow);
    /* fallback if rgb var exists, else use solid */
    background: rgba(100, 100, 255, 0.05);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Battlefield Zone */
.goldfish-zone.battlefield-zone {
    flex: 1;
    min-height: 100px;
    /* Allow shrinking further */
    position: relative;
    overflow: hidden;
}

.goldfish-zone.battlefield-zone .zone-cards.battlefield-cards {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Selection Box for Multi-Select */
.selection-box {
    position: absolute;
    background: rgba(100, 150, 255, 0.15);
    border: 2px dashed rgba(100, 150, 255, 0.6);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1000;
}

/* Selected Card Highlight */
.goldfish-card.selected {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    box-shadow: 0 0 20px var(--accent-glow);
}

.zone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    /* Keep this */
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.zone-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
}

.zone-count {
    background: var(--button-bg);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: auto;
}

.header-chevron {
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.2s;
    font-size: 0.7rem;
}

.zone-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    min-height: 10px;
    /* Reduced to allow collapse */
}

/* Battlefield */
.goldfish-battlefield-row {
    flex: 1;
    display: flex;
    gap: 12px;
    min-height: 200px;
    /* Give it more room than other widgets */
    overflow: hidden;
    /* Ensure it doesn't spill out */
}

.goldfish-battlefield-container {
    flex: 1;
    display: flex;
    min-width: 0;
    /* Enable flex shrinking */
}

.battlefield-zone {
    flex: 1;
    background: var(--bg-tertiary);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.battlefield-zone .zone-cards {
    flex: 1;
    /* Expand to fill available space */
    position: relative;
    /* Anchor for absolute positioned cards */
    height: 100%;
    min-height: 0;
}

/* Command Zone */
.goldfish-command-zone {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--widget-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 12px;
    height: 100%;
}

.command-zone-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

.command-zone-cards img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.goldfish-bottom-row {
    display: flex;
    gap: 8px;
    flex: 0 1 180px;
    min-height: 0;
    /* Crucial for nested flex scrolling */
}

.goldfish-hand-container {
    flex: 1;
    /* Should expand */
    min-width: 0;
    /* Allow shrinking if needed */
    display: flex;
    flex-direction: column;
}


.hand-zone {
    height: 100%;
    width: 100%;
    /* Remove teal background */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.goldfish-zone.hand-zone .zone-cards {
    height: 100%;
    flex: 1;
    align-content: flex-start;
    overflow-x: auto;
    /* Scroll horizontally if many cards */
    overflow-y: hidden;
    flex-wrap: nowrap;
    /* Single row usually preferred for hand */
    padding-bottom: 8px;
    /* Scrollbar space */
}

/* Prevent shrinking cards in hand to ensure scroll triggers */
.goldfish-zone.hand-zone .goldfish-card {
    flex-shrink: 0;
}

/* Library */
.goldfish-library-container {
    width: 140px;
    flex-shrink: 0;
}

.goldfish-library-stack {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: var(--bg-gradient);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.goldfish-library-stack:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

.library-count {
    margin-top: 12px;
    font-weight: 700;
    color: var(--text-color);
}

/* Actions Bar */
.goldfish-actions-section {
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    backdrop-filter: var(--glass-blur);
    padding: 6px 10px;
    flex-shrink: 0;
}

.goldfish-actions-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--button-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.actions-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 2px;
    white-space: nowrap;
}

.goldfish-action-btn {
    padding: 5px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.goldfish-action-btn:hover {
    background: var(--entry-hover-bg);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.goldfish-action-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Icons */
.goldfish-icon {
    display: inline-block;
    vertical-align: middle;
}

/* Card Styles - Minimal updates, reuse existing layout but clean up borders */
.goldfish-card {
    position: relative;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.goldfish-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 100;
}

.commander-card {
    position: relative;
}

.goldfish-card.tapped {
    transform: rotate(90deg);
}

/* Dashbord Grid Layout */
.stats-dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1.2fr;
    gap: 12px;
}

.dashboard-card {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
}

.primary-card {
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255, 100, 100, 0.05);
    /* Subtle red tint for opponent */
    border-color: rgba(255, 100, 100, 0.2);
}

.resources-card {
    justify-content: space-around;
    align-items: center;
}

.metrics-card {
    justify-content: space-around;
    align-items: center;
}

.stat-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.turn-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goldfish-status-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goldfish-status-compact .goldfish-hp-bar {
    width: 100%;
    /* Full width of card */
    height: 16px;
    /* Slightly thinner */
}

/* Resources */
.resource-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.resource-info {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.resource-val {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
}

.resource-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Metrics */
.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-val {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
}

.metric-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Log */
.stats-log-row {
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    gap: 8px;
}

.log-entries {
    display: flex;
    gap: 8px;
    overflow: hidden;
}

/* Missing "Legacy" Button Styles Replacement */

.goldfish-undo-btn,
.goldfish-sim-btn {
    padding: 6px 12px;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.goldfish-undo-btn:hover,
.goldfish-sim-btn:hover {
    background: var(--entry-hover-bg);
    border-color: var(--text-muted);
}

.goldfish-undo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Zone Toggle Badges (Graveyard/Exile) */
.goldfish-zones-split-row {
    display: flex;
    gap: 8px;
}

.goldfish-zone.collapsed {
    height: auto;
    min-height: 0;
    flex: 1;
    /* Share width even when collapsed */
    padding-bottom: 0;
}

/* Ensure expanded zones share width and provide anchor for overlays */
.goldfish-zone.graveyard-zone,
.goldfish-zone.exile-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    gap: 0;
}

/* Graveyard & Exile Specific Overrides for Split Pane */

/* Header flush with container */
.goldfish-zone.graveyard-zone .collapsible-header,
.goldfish-zone.exile-zone .collapsible-header {
    margin: 0;
    padding: 4px 10px !important;
    border-radius: 12px;
    /* Match container radius */
}

/* Flatten scroll corners when expanded */
.goldfish-zone.graveyard-zone:not(.collapsed) .collapsible-header,
.goldfish-zone.exile-zone:not(.collapsed) .collapsible-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid var(--border-color);
}

.goldfish-zone.graveyard-zone:not(.collapsed) .zone-cards,
.goldfish-zone.exile-zone:not(.collapsed) .zone-cards {
    position: absolute;
    bottom: 100%;
    left: -1px;
    /* Match outer border */
    right: -1px;
    height: auto;
    max-height: 400px;
    background: var(--bg-secondary);
    /* Explicit background for visibility */
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 1000;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    padding: 16px;
    overflow-y: auto;
    flex-direction: row;
    /* Keep cards in a row inside the scrollable area */
    flex-wrap: wrap;
    gap: 12px;
}

.collapsible-header:hover {
    background: var(--entry-hover-bg);
}

.goldfish-zone.collapsed .collapsible-header {
    margin-bottom: 0;
}


/* Fix Card Sizing in Zones */
.zone-cards .goldfish-card {
    width: 120px;
    /* Reduced width as requested */
    flex-shrink: 0;
}

.goldfish-card-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    /* Matches outer radius */
    display: block;
}

/* Modals (Library & Token Search) */
.goldfish-library-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}

.goldfish-library-modal {
    width: 90%;
    max-width: 1000px;
    height: 80%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--popup-shadow);
    animation: slideUp 0.3s ease-out;
}

.library-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--panel-bg);
}

.library-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.goldfish-library-modal .goldfish-close-btn {
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    color: var(--text-color);
}

.goldfish-library-modal .goldfish-close-btn:hover {
    color: var(--accent-light);
    background: transparent;
}

.library-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    background: var(--panel-bg);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Library Modal Content Grid */
.library-modal-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: var(--bg-color);
}

/* Search Functionality in Modals */
.search-bar-container {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.search-input {
    width: 100%;
    padding: 10px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.search-helper-text {
    margin: 8px 0 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.search-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    grid-column: 1 / -1;
}

.library-card-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.library-card-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.lib-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.lib-action-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Fix SVG icons being shrunk to zero width in flex containers */
.lib-action-btn svg,
.lib-action-btn .ui-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
}

/* Hover card preview — pinned to top-right corner, out of the way of all zones */
.goldfish-hover-preview {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 4000;
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    animation: fadeIn 0.15s ease-out;
}

.goldfish-hover-preview img {
    max-width: 600px;
    max-height: 80vh;
    border-radius: 10px;
    display: block;
}

/* Secondary Stats Row */
.secondary-stats {
    grid-template-columns: 1fr 1fr;
}

.card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.probs-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prob-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prob-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 60px;
}

.prob-items {
    display: flex;
    gap: 8px;
    align-items: center;
}

.prob-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--input-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
}

.prob-badge.land {
    color: var(--type-land);
    border-color: var(--border-color);
}

.prob-badge.creature {
    color: var(--type-creature);
    border-color: var(--border-color);
}

.prob-badge.spell {
    color: var(--type-instant);
    border-color: var(--border-color);
}

.prob-text-item {
    display: flex;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.tag-name {
    color: var(--text-color);
}

.tag-pct {
    font-weight: 700;
    color: var(--accent-light);
}

/* Log Card */
.log-card {
    flex-direction: column;
    overflow: hidden;
}

.log-content_scroller {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 80px;
    padding-right: 4px;
}

.log-entry-row {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2px;
}

.log-turn {
    color: var(--accent-color);
    font-family: monospace;
    font-weight: 700;
    min-width: 24px;
}

.log-desc {
    color: var(--text-muted);
}

/* =============================================
   COMPACT STATS BAR STYLES
   ============================================= */

.goldfish-stats-bar.compact {
    padding: 8px 16px;
    gap: 8px;
}

.stats-compact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-compact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-compact-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.stat-compact-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
}

.stat-compact-value.accent {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.stat-compact-icon {
    color: var(--text-muted);
}

.turn-control-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.next-turn-btn-compact {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.next-turn-btn-compact:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px var(--accent-glow);
}

.stat-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
}

.probs-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.probs-compact-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.prob-badge-compact {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--input-bg);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.prob-badge-compact.land {
    color: var(--type-land);
}

.prob-badge-compact.creature {
    color: var(--type-creature);
}

.prob-badge-compact.spell {
    color: var(--type-instant);
}


.log-compact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    background: none;
    border: none;
    border-top: 1px solid var(--border-color);
    /* Keep this */
    width: 100%;
    cursor: pointer;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    appearance: none;
    -webkit-appearance: none;
}

.log-compact-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.log-entries-compact {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Mobile: Single row with horizontal scroll */
@media (max-width: 768px) {
    .log-entries-compact {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-color) transparent;
        padding-bottom: 4px;
    }

    .log-entries-compact::-webkit-scrollbar {
        height: 4px;
    }

    .log-entries-compact::-webkit-scrollbar-track {
        background: transparent;
    }

    .log-entries-compact::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 2px;
    }

    .log-entry-compact {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.log-entry-compact {
    display: flex;
    gap: 4px;
}

.log-turn-compact {
    color: var(--accent-color);
    font-weight: 700;
}

/* =============================================
   RIGHT PANEL STYLES (Command + Library)
   ============================================= */

.goldfish-main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.goldfish-left-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

/* Top Zones Bar - Horizontal bar above battlefield with Command Zone (left) and Library (right) */
.goldfish-top-zones-bar {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}

/* Individual top zone - Command Zone or Library */
.top-zone {
    flex: 1;
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--popup-shadow);
    min-width: 0;
    padding: 0 !important;
}

/* Top zone header - always visible */
.top-zone-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.top-zone-header:hover {
    background: var(--entry-hover-bg);
}

.top-zone-header .zone-icon {
    color: var(--accent-color);
}

.top-zone-header .zone-label {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.top-zone-header .zone-count {
    margin-left: auto;
    background: var(--button-bg);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.top-zone-header .header-chevron {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

/* Expanded overlay content - opens DOWNWARD */
.top-zone-content-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px;
    max-height: 350px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: var(--popup-shadow);
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* When expanded, adjust the header border radius */
.top-zone.expanded {
    border-radius: 8px 8px 0 0;
}

.top-zone.expanded .top-zone-header {
    border-radius: 8px 8px 0 0;
}

/* Command Zone specific styling */
.command-zone-top .zone-cards.command-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.command-zone-top .goldfish-card {
    width: 100px;
    height: auto;
    aspect-ratio: 5 / 7;
}

.command-zone-top .goldfish-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Library Zone specific styling */
.library-zone-top {
    min-width: 140px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.library-preview {
    padding: 12px;
}

.library-stack-clickable {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.library-stack-clickable:hover {
    background: var(--entry-hover-bg);
}

.library-stack-clickable .library-card-back {
    width: 80px;
    height: 112px;
    /* The image URL is set inline from the shared Scryfall constant so the
       card back has one definition across the app. */
    background-color: var(--bg-tertiary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.1),
        6px 6px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.library-stack-clickable:hover .library-card-back {
    transform: translateY(-4px);
    box-shadow:
        3px 7px 0 rgba(0, 0, 0, 0.1),
        6px 10px 0 rgba(0, 0, 0, 0.05);
}

.library-count-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.library-count-overlay .library-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
}

.library-count-overlay .library-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.library-search-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.library-stack-clickable:hover .library-search-hint {
    opacity: 1;
}

/* Hand and Zone Layout overrides - cleaned up duplicates */

/* Empty Zone States */
.zone-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    height: 100%;
    width: 100%;
    opacity: 0.1;
    pointer-events: none;
}

.zone-empty-state.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    /* opacity and pointer-events are now inherited from base class */
}

/* Sideboarding Modal */
.goldfish-sideboarding-modal {
    width: 90vw;
    height: 85vh;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--popup-shadow);
    animation: fadeIn 0.3s ease-out;
}

.sideboarding-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    background: var(--panel-bg);
}

.sideboarding-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
    flex: 1;
}

.sideboarding-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-right: 16px;
}

.sideboarding-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
}

.sideboarding-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--widget-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.column-header {
    padding: 12px 16px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}

.column-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sideboarding-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--button-bg);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sideboarding-card-item:hover {
    background: var(--entry-hover-bg);
    border-color: var(--accent-color);
    transform: translateX(2px);
}

.sideboarding-card-item.in-sideboard:hover {
    transform: translateX(-2px);
}

.sideboarding-card-item .card-name {
    flex: 1;
    color: var(--text-color);
    font-weight: 500;
}

.sideboarding-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
}

.sideboarding-footer {
    padding: 16px 24px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Stats Help Modal */
.stats-help-modal {
    width: 600px;
    max-width: 90%;
}

.stats-help-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.stat-help-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-help-item .stat-help-label {
    font-weight: 600;
    color: var(--accent-color);
    font-size: 1.1em;
}

.stat-help-item .stat-help-desc {
    color: var(--text-muted);
    font-size: 0.95em;
    line-height: 1.4;
}

.stat-help-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 8px 0;
    opacity: 0.5;
}

.stats-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.stats-help-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.stat-help-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
}

.stat-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    color: var(--accent-color);
}

/* ============================================
   MOBILE PORTRAIT STYLES
   ============================================ */

@media (max-width: 768px) and (max-aspect-ratio: 1/1) {

    /* Full-screen modal */
    .goldfish-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        max-height: 100dvh;
    }

    /* Compact header */
    .goldfish-header {
        padding: 12px 16px 8px 16px;
    }

    .goldfish-title-text {
        font-size: 1rem;
    }

    .goldfish-deck-name {
        font-size: 0.8rem;
    }

    .goldfish-close-btn {
        width: 44px;
        height: 44px;
    }

    /* Compact stats bar */
    .goldfish-stats-bar {
        padding: 8px 12px;
    }

    .stats-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 8px;
    }

    .stat-value {
        font-size: 1.1em;
    }

    .stat-label {
        font-size: 0.7em;
    }

    /* Hide stats toggle text */
    .stats-toggle-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 0;
    }

    .stats-toggle-btn svg {
        font-size: 20px;
    }

    /* Play area - vertical layout */
    .goldfish-play-area {
        padding: 8px;
        gap: 8px;
        flex-direction: column;
    }

    /* Zones - collapsible drawers */
    .goldfish-zone {
        padding: 8px;
        min-height: auto;
    }

    .zone-header {
        padding: 6px 8px;
    }

    .zone-title {
        font-size: 0.75em;
    }

    .zone-cards {
        min-height: 40px;
        /* Reduced to stop excessive gaps */
        gap: 6px;
    }

    /* Cards smaller on mobile */
    .goldfish-card {
        width: 70px;
    }

    .goldfish-card img {
        width: 100%;
        border-radius: 4px;
    }

    /* Tapped cards still rotated but smaller */
    .goldfish-card.tapped {
        transform: rotate(90deg);
    }

    /* Hand zone at bottom with horizontal scroll */
    .goldfish-bottom-row {
        flex: none;
        /* Don't stretch or use desktop's 180px basis */
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .goldfish-hand-container {
        flex: none;
        /* Override desktop flex: 1 — hug content height on mobile */
        height: auto;
        max-height: 120px;
        min-height: 0;
    }

    .goldfish-zone.hand-zone {
        width: 100%;
    }

    .goldfish-zone.hand-zone .zone-cards {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding: 8px;
        -webkit-overflow-scrolling: touch;
    }

    /* Command zone as compact bar */
    .goldfish-command-zone {
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 8px;
        min-width: 0;
    }

    .command-zone-cards {
        flex-direction: row;
        gap: 8px;
    }

    .command-zone-cards img {
        width: 50px;
    }

    /* Library container compact */
    .goldfish-library-container {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
    }

    .library-pile,
    .graveyard-pile,
    .exile-pile {
        width: 70px;
    }

    /* Actions bar at bottom in flow (not fixed) to prevent overlap */
    .goldfish-actions-bar {
        position: relative;
        /* Reverted from fixed */
        background: var(--panel-bg);
        backdrop-filter: var(--glass-blur);
        padding: 12px 16px;
        z-index: 200;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        border-top: 1px solid var(--border-color);
        scrollbar-width: none;
    }

    .goldfish-actions-bar::-webkit-scrollbar {
        display: none;
    }

    .goldfish-action-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .goldfish-action-btn svg,
    .goldfish-action-btn .btn-icon {
        width: 20px;
        height: 20px;
        font-size: 20px !important;
    }

    /* Context menu mobile-friendly */
    .goldfish-context-menu {
        min-width: 200px;
    }

    .context-menu-item {
        padding: 12px;
        min-height: 44px;
    }

    /* Token/counter modals */
    .counter-modal,
    .token-modal {
        width: 90vw;
        max-width: 320px;
    }

    /* Modal adjust button sizes */
    .counter-adjust-btn {
        width: 44px;
        height: 44px;
    }

    /* Mulligan modal */
    .mulligan-modal-content {
        width: 95vw;
        max-height: 80vh;
        overflow-y: auto;
    }
}

@media (max-width: 768px) and (min-aspect-ratio: 1/1) {

    /* Landscape mode - use more horizontal space */
    .goldfish-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .goldfish-header {
        padding: 8px 16px;
    }

    .goldfish-title-text {
        font-size: 0.9rem;
    }

    .goldfish-play-area {
        flex-direction: row;
        padding: 8px;
    }

    .goldfish-card {
        width: 60px;
    }

    /* The action bar used to detach here and float as a fixed column against
       the right edge. That predates the Playtest surface, which keeps it in
       flow below the board on every viewport — and being `position: fixed` it
       did not merely look different, it left the flow entirely and planted
       itself over the side of the board on any short, wide screen. The surface
       layer now states the bar's geometry outright; this is removed so there is
       nothing left to state it against. */

    .goldfish-action-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Fix for shorter desktop windows - more aggressive shrinking */
@media (max-height: 800px) {
    .goldfish-header {
        padding: 8px 16px !important;
    }

    .goldfish-stats-bar {
        padding: 4px 16px !important;
    }

    .goldfish-play-area {
        padding: 6px !important;
        gap: 6px !important;
    }

    .goldfish-bottom-row {
        flex-basis: 140px !important;
    }

    .top-zone-header {
        padding: 2px 8px !important;
    }

    /* Actions bar gets more compact and scrollable instead of wrapping */
    .goldfish-actions-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .goldfish-actions-bar::-webkit-scrollbar {
        display: none;
    }

    .actions-group {
        padding: 2px 8px !important;
        flex-shrink: 0;
    }

    .actions-group-label {
        font-size: 0.6rem !important;
        margin-right: 2px !important;
    }

    .goldfish-action-btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    .goldfish-actions-section {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* Mobile Overrides */
@media (max-width: 768px) {
    .goldfish-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    /* Header: Icon-only buttons */
    .goldfish-header .btn-text {
        display: none;
    }

    .goldfish-title-text {
        font-size: 1rem;
    }

    .goldfish-deck-name {
        display: none;
        /* Hide deck name on mobile to save space */
    }

    .goldfish-header {
        padding: 12px 16px;
    }

    /* Ensure close button is visible */
    .goldfish-close-btn {
        display: flex !important;
        width: 32px;
        height: 32px;
        background: var(--button-bg);
        /* Make it stand out a bit */
    }

    /* Actions Bar: Horizontal Scroll */
    .goldfish-actions-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 8px;
        /* Space for scrollbar */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .goldfish-actions-bar::-webkit-scrollbar {
        display: none;
    }

    .actions-group {
        flex-shrink: 0;
    }

    /* Stats Bar: compact & scrollable */
    .stats-compact-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
        padding-bottom: 2px;
    }

    .stats-compact-row::-webkit-scrollbar {
        display: none;
    }

    /* Card Size: 50% smaller on mobile */
    .goldfish-card,
    .zone-cards .goldfish-card {
        width: 60px;
        /* 50% of desktop 120px */
    }

    .stat-compact-item,
    .probs-compact,
    .tags-compact {
        flex-shrink: 0;
    }

    /* Tag Stats: Part of the single scrollable row now */
    .tags-compact {
        flex-wrap: nowrap !important;
        height: auto !important;
        align-items: center !important;
        overflow: visible !important;
        flex-basis: auto !important;
        width: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        padding-bottom: 0 !important;
    }

    .stat-divider {
        display: block !important;
        opacity: 0.3;
        flex-shrink: 0;
    }
}

/* Drawers Container & Responsive Logic */
.drawers-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    z-index: 100;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: translateX(0);
}

.drawers-container.active {
    gap: 8px;
}

.drawers-container.mana-active {
    transform: translateX(70px);
}

.drawers-container.dice-active {
    transform: translateX(-70px);
}

@media (max-width: 768px) {
    .drawers-container {
        gap: 6px;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .drawers-container.active {
        gap: 0;
        transform: none !important;
        /* Disable shift on mobile */
        justify-content: center;
    }

    /* An open drawer used to be an in-flow panel that squeezed the row, so the
       narrow layout deleted whichever tab it was about to shove off. That cure
       was worse than the disease — Life vanished the moment Dice opened, with
       nothing to say where it had gone. An open drawer is a sheet out of flow
       now (see the surface layer), so the row never needs the room. */

    /* Ensure content inside doesn't overflow */
    .dice-drawer-content,
    .mana-drawer-content {
        max-width: 90vw;
    }

    /* Compact Tabs */
    .mana-drawer-toggle,
    .dice-drawer-toggle {
        padding: 4px 8px !important;
        font-size: 0.75em !important;
        gap: 4px !important;
        white-space: nowrap;
    }
}

/* Zoom Controls */
.battlefield-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding: 2px 8px;
    background: var(--input-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.zoom-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.2s;
    opacity: 0.8;
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-light);
    opacity: 1;
}

.zoom-btn svg,
.zoom-btn .ui-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.zoom-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.zoom-text:hover {
    color: var(--accent-color);
}


.battlefield-viewport {
    flex: 1;
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

.battlefield-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.battlefield-viewport::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

/* ============================================
   MULLIGAN SIMULATOR MODAL — PREMIUM UI
   ============================================ */

.mulligan-modal {
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.25s ease-out;
}

/* Header */
.mulligan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 18px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}

.mulligan-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    opacity: 0.6;
}

.mulligan-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mulligan-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    flex-shrink: 0;
    box-shadow: 0 0 12px var(--accent-glow);
}

.mulligan-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mulligan-subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Scrollable body */
.mulligan-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Config card */
.mulligan-config-card {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.mulligan-config-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.5fr);
    gap: 16px;
}

.mulligan-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mulligan-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.mulligan-input {
    background: var(--widget-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
    padding: 8px 12px;
    transition: border-color 0.2s;
    width: 100%;
}

.mulligan-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.mulligan-input--small {
    width: 64px;
    text-align: center;
    flex-shrink: 0;
}

.mulligan-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mulligan-range-sep {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.mulligan-requirements {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.mulligan-advanced-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 0;
    border-top: 0;
}

.mulligan-control-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--widget-bg);
}

.mulligan-sim-intro {
    gap: 7px;
    background: var(--widget-bg);
}

.mulligan-sim-intro .mulligan-analysis-note {
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.mulligan-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mulligan-field-help {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mulligan-progress {
    position: relative;
    min-height: 28px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--entry-bg);
}

.mulligan-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent-bg);
    transition: width 0.25s ease;
}

.mulligan-progress span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mulligan-requirements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mulligan-requirements-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.mulligan-add-rule-btn,
.mulligan-remove-rule-btn {
    border: 1px solid var(--border-color);
    background: var(--entry-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.mulligan-add-rule-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

.mulligan-add-rule-row {
    display: flex;
    justify-content: flex-start;
    padding-top: 2px;
}

.mulligan-add-rule-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    background: var(--accent-bg);
    transform: translateY(-1px);
}

.mulligan-add-rule-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mulligan-requirements-empty {
    padding: 11px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    background: var(--widget-bg);
    font-size: 0.78rem;
}

.mulligan-requirement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mulligan-requirement-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 9px;
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 9px;
}

.mulligan-land-requirement {
    background: var(--widget-bg);
    border-color: var(--border-color);
}

.mulligan-requirement-kind {
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 700;
}

.mulligan-tag-select {
    width: auto;
    min-width: 0;
    flex: 1;
}

.mulligan-goal-category {
    width: auto;
    min-width: 0;
    flex: 1;
    order: 1;
}

.mulligan-goal-option {
    min-width: 0;
    flex: 1 0 100%;
    order: 3;
}

.mulligan-custom-goal-builder {
    flex: 1 0 100%;
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--entry-bg);
}

.mulligan-custom-goal-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr);
    gap: 10px;
    align-items: end;
}

.mulligan-custom-goal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mulligan-custom-goal-subhead {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mulligan-custom-exclude {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.mulligan-custom-exclude summary {
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 800;
}

.mulligan-custom-exclude[open] summary {
    margin-bottom: 10px;
}

.mulligan-custom-goal-toolbar--exclude {
    margin-bottom: 10px;
}

.mulligan-custom-goal-builder .deck-filter-bar {
    gap: 12px;
    padding: 0;
}

.mulligan-custom-goal-builder .deck-filter-section {
    flex-basis: 150px;
}

.mulligan-custom-goal-builder .deck-filter-section--color {
    flex-basis: 260px;
    min-width: 240px;
}

.mulligan-custom-goal-builder .deck-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.mulligan-custom-goal-builder .filter-mana-row,
.mulligan-custom-goal-builder .toggle-row.color-mode-toggle-row {
    max-width: 320px;
}

.mulligan-custom-goal-builder .deck-filter-clear {
    margin-top: 0;
}

.mulligan-requirement-heading-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mulligan-requirement-heading-row > .mulligan-remove-rule-btn {
    order: 2;
    margin-left: auto;
}

.mulligan-requirement-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.mulligan-requirement-copy {
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.mulligan-remove-rule-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.mulligan-remove-rule-btn:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    transform: translateY(-1px);
}

/* Run button */
.mulligan-run-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.mulligan-run-iterations {
    width: min(260px, 100%);
    margin-right: auto;
}

.mulligan-run-btn {
    width: auto;
    min-width: 190px;
    padding: 12px 20px;
    background: var(--accent-gradient);
    border: none;
    border-radius: 10px;
    color: var(--button-primary-text, white);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.mulligan-run-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.mulligan-run-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mulligan-run-btn.running {
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Placeholder */
.mulligan-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
    opacity: 0.5;
}

.mulligan-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
}

/* Results */
.mulligan-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn 0.3s ease-out;
}

.mulligan-results-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mulligan-results-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.mulligan-hand-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mulligan-hand-cards {
    display: grid;
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
}

.mulligan-hand-card {
    min-width: 82px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mulligan-hand-card-wrap {
    min-width: 82px;
}

.mulligan-hand-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.36);
}

.mulligan-breakdown-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mulligan-takeaways {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mulligan-takeaway-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mulligan-takeaway-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--widget-bg);
}

.mulligan-takeaway-card strong {
    color: var(--text-color);
    font-size: 0.88rem;
}

.mulligan-analysis-section {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--widget-bg);
}

.mulligan-analysis-section > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
    color: var(--text-color);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 0.2s;
}

.mulligan-analysis-section > summary::-webkit-details-marker {
    display: none;
}

.mulligan-analysis-section > summary::after {
    content: "⌄";
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.mulligan-analysis-section[open] > summary::after {
    transform: rotate(180deg);
}

.mulligan-analysis-section > summary:hover {
    background: var(--accent-bg);
}

.mulligan-analysis-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 15px 16px;
    border-top: 1px solid var(--border-color);
}

.mulligan-analysis-body h5 {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mulligan-analysis-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.mulligan-metric-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(120px, 1fr) 58px;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.mulligan-metric-row strong {
    text-align: right;
}

.mulligan-distribution-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(62px, 1fr));
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.mulligan-distribution-grid--four {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
}

.mulligan-bar-chart {
    display: grid;
    grid-template-columns: repeat(8, minmax(64px, 1fr));
    align-items: end;
    gap: 9px;
    min-height: 190px;
    overflow-x: auto;
    padding: 8px 4px 3px;
}

.mulligan-bar-chart--four {
    grid-template-columns: repeat(4, minmax(76px, 1fr));
}

.mulligan-bar-chart--turns {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.mulligan-bar-item {
    display: grid;
    grid-template-rows: 20px 130px 22px;
    align-items: end;
    gap: 5px;
    min-width: 64px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mulligan-bar-item > strong {
    align-self: center;
    color: var(--text-color);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.mulligan-bar-plot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 130px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 52%, transparent);
}

.mulligan-bar {
    width: min(46px, 68%);
    min-height: 2px;
    border-radius: 5px 5px 0 0;
    background: var(--accent-gradient);
    transition: height 0.35s ease, filter 0.2s ease;
}

.mulligan-bar:hover {
    filter: brightness(1.14);
}

.mulligan-bar.ideal {
    background: var(--accent-color);
}

.mulligan-bar.screw,
.mulligan-bar.flood {
    background: var(--danger-color);
}

.mulligan-grouped-plot {
    align-items: flex-end;
    gap: 5px;
}

.mulligan-grouped-plot .mulligan-bar {
    width: min(30px, 38%);
}

.mulligan-grouped-plot .play,
.mulligan-chart-legend .play::before {
    background: var(--accent-color);
}

.mulligan-grouped-plot .draw,
.mulligan-chart-legend .draw::before {
    background: var(--chart-cat-4, var(--warning-color));
}

.mulligan-chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mulligan-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mulligan-chart-legend span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.mulligan-delta-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mulligan-delta-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--widget-bg);
}

.mulligan-delta-group > h5 {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.mulligan-delta-group .mulligan-delta-row {
    grid-template-columns: 48px minmax(220px, 1.7fr) 72px minmax(210px, 1fr);
    padding-inline: 12px;
}

.mulligan-delta-group .mulligan-delta-row:last-child {
    border-bottom: 0;
}

.mulligan-delta-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.7fr) 72px minmax(210px, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 35px;
    padding: 5px 7px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.74rem;
}

.mulligan-delta-row > span:first-child {
    color: var(--text-color);
    font-weight: 600;
}

.mulligan-delta-track {
    position: relative;
    height: 14px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-secondary) 52%, transparent);
}

.mulligan-delta-track::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--text-muted);
    opacity: 0.65;
}

.mulligan-delta-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    min-width: 2px;
    border-radius: 3px;
    background: var(--text-muted);
}

.mulligan-delta-bar.positive {
    background: var(--accent-color);
}

.mulligan-delta-bar.negative {
    background: var(--danger-color);
}

.mulligan-distribution-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 62px;
    padding: 9px 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mulligan-distribution-cell strong {
    color: var(--text-color);
    font-size: 0.82rem;
}

.mulligan-distribution-cell.ideal {
    border-color: var(--border-color);
    background: var(--widget-bg);
}

.mulligan-distribution-cell.screw,
.mulligan-distribution-cell.flood {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
}

.mulligan-tag-distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mulligan-size-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 7px;
}

.mulligan-size-list > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    font-size: 0.76rem;
}

.mulligan-dual-table,
.mulligan-scenario-table {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.mulligan-dual-header,
.mulligan-dual-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 90px 90px;
    align-items: center;
    min-width: 350px;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.78rem;
}

.mulligan-dual-header,
.mulligan-scenario-header {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mulligan-dual-row strong,
.mulligan-dual-header span:not(:first-child) {
    text-align: right;
}

.mulligan-scenario-header,
.mulligan-scenario-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 85px 70px minmax(200px, 1fr);
    align-items: center;
    min-width: 620px;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.76rem;
}

.mulligan-scenario-row .positive {
    color: var(--accent-color);
}

.mulligan-delta-row .positive {
    color: var(--accent-color);
}

@media (max-width: 900px) and (min-width: 641px) {
    .mulligan-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mulligan-scenario-row .negative {
    color: var(--danger-color);
}

.mulligan-scenario-unavailable {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-style: italic;
}

/* Stat cards */
.mulligan-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mulligan-stat-card {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s;
}

.mulligan-stat-card:hover {
    border-color: var(--text-muted);
}

.mulligan-stat-card--accent {
    border-color: var(--border-color);
    background: var(--widget-bg);
}

.mulligan-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.mulligan-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.mulligan-stat-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Tag probability bars */
.mulligan-tags-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mulligan-tags-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.mulligan-tag-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mulligan-tag-row {
    display: grid;
    grid-template-columns: 140px 1fr 52px;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.mulligan-tag-name {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mulligan-tag-track {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.mulligan-tag-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.mulligan-tag-pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--bg-color) 80%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 48px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mulligan-modal {
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }

    .mulligan-config-row {
        grid-template-columns: 1fr;
    }

    .mulligan-advanced-controls,
    .mulligan-control-grid,
    .mulligan-takeaway-grid {
        grid-template-columns: 1fr;
    }

    .mulligan-metric-row {
        grid-template-columns: minmax(90px, 0.7fr) minmax(80px, 1fr) 50px;
    }

    .mulligan-delta-row {
        grid-template-columns: minmax(100px, 0.7fr) minmax(110px, 1.3fr) 62px;
        min-width: 0;
    }

    .mulligan-delta-group .mulligan-delta-row {
        grid-template-columns: 36px minmax(100px, 1.3fr) 62px;
        padding-inline: 8px;
    }

    .mulligan-delta-chart {
        overflow-x: visible;
    }

    .mulligan-delta-row > span:last-child {
        grid-column: 1 / -1;
        padding-bottom: 3px;
    }

    .mulligan-scenario-unavailable {
        grid-column: 2 / -1 !important;
    }

    .mulligan-analysis-body {
        padding-inline: 10px;
    }

    .mulligan-bar-chart {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 4px;
        overflow-x: visible;
    }

    .mulligan-bar-chart--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .mulligan-bar-chart--turns {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    }

    .mulligan-bar-item {
        grid-template-rows: 18px 105px 20px;
        min-width: 0;
        font-size: 0.64rem;
    }

    .mulligan-bar-item > strong {
        font-size: 0.62rem;
    }

    .mulligan-bar-plot {
        height: 105px;
    }

    .mulligan-dual-header,
    .mulligan-dual-row {
        grid-template-columns: minmax(0, 1fr) 52px 52px;
        min-width: 0;
        gap: 6px;
        padding-inline: 4px;
        font-size: 0.7rem;
    }

    .mulligan-hand-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        gap: 7px;
    }

    .mulligan-hand-card-wrap,
    .mulligan-hand-card {
        min-width: 0;
    }

    .mulligan-tag-select {
        min-width: 0;
    }

    .mulligan-run-btn {
        width: 100%;
    }

    .mulligan-run-row {
        align-items: stretch;
    }

    .mulligan-run-iterations {
        width: 100%;
    }

    .mulligan-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mulligan-tag-row {
        grid-template-columns: minmax(80px, 0.8fr) minmax(65px, 1fr) 44px;
        gap: 6px;
    }
}

/* ============================================
   MULLIGAN RULES FORM
   Shared by the Opening Hand Simulator and the
   Playtest pre-game setup.
   ============================================ */

.mulligan-rules-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mulligan-rule-picker {
    max-width: 420px;
}

.mulligan-rule-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.mulligan-rule-details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    padding: 8px 12px;
}

.mulligan-rule-details > summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mulligan-rule-details[open] > summary {
    margin-bottom: 10px;
}

.mulligan-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.mulligan-rule-field {
    min-width: 0;
}

/* ============================================
   OPENING HAND SETUP
   Pre-game keep/mulligan flow.
   ============================================ */

.opening-hand-overlay {
    position: absolute;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.opening-hand-panel {
    width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--panel-bg, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--popup-shadow, 0 12px 40px rgba(0, 0, 0, 0.55));
    overflow: hidden;
}

.opening-hand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.opening-hand-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-color);
    min-width: 0;
}

.opening-hand-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.opening-hand-subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-hand-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    overflow-y: auto;
    min-height: 0;
}

.opening-hand-prompt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.opening-hand-quick-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* Layout only: colour, hover, and the active/primary state come from the
   shared button contract in buttons.css. */
.opening-hand-quick-pick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 12px 14px;
    height: auto;
}

.opening-hand-quick-pick > strong {
    color: var(--text-color);
}

/* A quick pick is a card of text, not a toggle chip. The shared contract fills
   a pressed button with the accent gradient, which leaves the description
   unreadable, so the selected pick keeps its neutral surface and is marked with
   a ring instead. The specificity has to beat that contract, which loads last. */
.opening-hand-quick-picks .ui-button.opening-hand-quick-pick[aria-pressed="true"] {
    background: var(--ui-button-bg);
    color: var(--text-muted);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color), 0 4px 12px var(--accent-glow);
}

.opening-hand-quick-picks .ui-button.opening-hand-quick-pick[aria-pressed="true"] > strong {
    color: var(--accent-color);
}

.opening-hand-quick-pick > span {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.opening-hand-advanced {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--widget-bg, var(--bg-tertiary));
}

.opening-hand-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.opening-hand-advanced[open] > summary {
    margin-bottom: 12px;
}

.opening-hand-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opening-hand-stage-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.opening-hand-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.opening-hand-zone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 10px;
    padding: 14px;
    min-height: 220px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: var(--bg-tertiary);
    overflow-y: auto;
}

/* The card is a `<button>`; the flip control and the "Bottom" flag are its
   siblings, because a button may not contain another one. The slot is what
   carries the size and the positioning context they are placed against. */
.opening-hand-card-slot {
    position: relative;
    width: clamp(96px, 13vw, 170px);
    display: block;
}

.opening-hand-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: default;
    transition: transform 0.15s, border-color 0.15s;
}

/* A card that cannot be marked yet is inert, not greyed out: it is still the
   hand being read, and dimming all seven while deciding whether to keep would
   be wrong. */
.opening-hand-card[disabled] {
    opacity: 1;
    cursor: default;
}

/* The flip affordance is the point of showing a double-faced card here, so it
   does not wait for a hover that touch devices never send. */
.opening-hand-card .card-action-bar {
    opacity: 1;
}

.opening-hand-card.selectable {
    cursor: pointer;
}

.opening-hand-card.selectable:hover {
    transform: translateY(-4px);
}

.opening-hand-card.marked {
    border-color: var(--danger-color);
    opacity: 0.72;
}

.opening-hand-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.opening-hand-card-flag {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.opening-hand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.opening-hand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    font-weight: 600;
}

/* ============================================
   LIFE & COUNTER TRACKER DRAWER
   ============================================ */

.life-drawer-badge {
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent-color);
    color: var(--button-primary-text, #000);
    font-size: 0.9em;
}

.life-drawer-content {
    min-width: 280px;
}

.life-drawer-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 52px auto;
    align-items: center;
    gap: 10px;
}

.life-drawer-row.lethal .life-drawer-value {
    color: var(--danger-color);
    font-weight: 800;
}

.life-drawer-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-drawer-value {
    text-align: right;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.life-drawer-value--large {
    font-size: 1.25rem;
    color: var(--accent-light, var(--accent-color));
}

.life-drawer-buttons {
    display: flex;
    gap: 4px;
}

.life-drawer-btn {
    min-width: 34px;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 0.8rem;
}

.life-drawer-divider {
    height: 1px;
    background: var(--border-color);
}

.life-drawer-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.drawers-container.life-active {
    transform: translateX(0);
}

/* ============================================
   PLAYTEST INSIGHTS MODAL
   ============================================ */

.playtest-insights-modal {
    width: min(860px, 94vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color, #1e1e1e);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.playtest-insights-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.playtest-insights-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.playtest-insights-header p {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.playtest-insights-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.playtest-insights-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playtest-insight-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-left: 3px solid var(--text-muted);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.04);
}

.playtest-insight-note > span {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.playtest-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.playtest-insight-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
}

.playtest-insight-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.playtest-insight-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.playtest-insight-stat-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.playtest-insights-footnote {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ============================================
   MOBILE PLAYTEST LAYOUT
   Every zone stays reachable and every card stays
   visible: the hand wraps and scrolls vertically
   instead of hiding cards off the right edge, and
   the board keeps a guaranteed share of the screen.
   ============================================ */

@media (max-width: 768px) {
    .goldfish-play-area {
        padding: 6px;
        gap: 6px;
    }

    /* Board keeps a floor so it never collapses to a sliver, but yields to
       the hand when the hand grows. */
    .goldfish-battlefield-row {
        flex: 1 1 auto;
        min-height: 32vh;
    }

    .goldfish-bottom-row {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
    }

    .goldfish-hand-container {
        flex: none;
        height: auto;
        max-height: 34vh;
        min-height: 0;
    }

    /* Graveyard and exile share one compact row of tap targets. */
    .goldfish-zones-split-row {
        gap: 4px;
    }

    .goldfish-zones-split-row .collapsible-header,
    .goldfish-zones-split-row .zone-header {
        min-height: 40px;
    }

    /* Drawers stack across the bottom without shoving each other off-screen. */
    .drawers-container {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .drawers-container.mana-active,
    .drawers-container.dice-active,
    .drawers-container.life-active {
        transform: translateX(0);
    }

    .life-drawer-content {
        min-width: min(320px, 92vw);
    }

    .dice-drawer-content,
    .mana-drawer-content {
        max-width: 96vw;
    }

    /* Setup takes the whole screen on a phone. */
    .opening-hand-overlay {
        position: fixed;
        padding: 0;
    }

    .opening-hand-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    .opening-hand-zone {
        min-height: 0;
        gap: 6px;
        padding: 8px;
    }

    .opening-hand-card-slot {
        width: calc(33.333% - 6px);
    }

    .opening-hand-actions {
        position: sticky;
        bottom: 0;
        padding: 10px 0 4px;
        background: var(--panel-bg, var(--bg-secondary));
    }

    .opening-hand-btn {
        flex: 1 1 45%;
    }

    .playtest-insights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Landscape phones: the board is wide and short, so the hand's single row gets
   smaller cards rather than more height. */
@media (max-width: 900px) and (min-aspect-ratio: 1/1) {
    .goldfish-zone.hand-zone .zone-cards .goldfish-card {
        width: 62px;
    }

    .opening-hand-card-slot {
        width: clamp(72px, 11vw, 120px);
    }
}

/* ============================================
   CARD OVERLAYS ON THE ART BOX

   Counters and the TOKEN badge used to sit over the type line and rules text,
   which is exactly where the information you are trying to read lives. Both now
   land on the art window instead: counters centred in it, the token badge in its
   bottom-left corner. Percentages track the modern card frame, so they hold at
   every card size.
   ============================================ */

.goldfish-card {
    position: relative;
}

.card-counters-overlay,
.goldfish-card .card-counters {
    position: absolute;
    top: 27%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    pointer-events: none;
    z-index: 10;
}

.counter-badge-overlay,
.goldfish-card .counter-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.counter-badge-overlay .counter-count,
.goldfish-card .counter-badge .counter-count {
    font-weight: bold;
}

.counter-badge-overlay .counter-name,
.goldfish-card .counter-badge .counter-name {
    margin-left: 3px;
    opacity: 0.8;
    font-size: 0.9em;
}

.token-tag-overlay,
.goldfish-card .token-tag {
    position: absolute;
    /* Bottom-left of the art window, clear of the type line below it. */
    top: 42%;
    left: 9%;
    transform: translateY(-100%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.65em;
    font-weight: bold;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 9;
}

/* Playtest cards are small and often touched rather than hovered, so their
   flip button stays visible instead of waiting for a pointer. */
.goldfish-card .card-action-bar {
    opacity: 1;
}

/* ============================================
   INSIGHTS: MIGRATED STATS SECTIONS
   ============================================ */

.playtest-insights-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playtest-insights-section > h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.playtest-insights-probs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.playtest-insight-prob {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.playtest-insight-prob strong {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.playtest-insight-prob.land {
    border-color: var(--success-color);
}

.playtest-insight-prob.creature {
    border-color: var(--accent-color);
}

.playtest-insight-prob.spell {
    border-color: var(--warning-color);
}

.playtest-insights-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.playtest-insight-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.playtest-insight-tag strong {
    color: var(--accent-color);
    font-size: 0.9em;
}

.playtest-insights-actions {
    display: flex;
    justify-content: flex-start;
}

.playtest-insights-log-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

/* ============================================
   CARD ORIENTATION

   Some cards are printed to be read sideways (Battles, split cards, Rooms) and
   some to be read both ways up (Kamigawa flip cards, aftermath halves). The
   rotate control shares the flip button's shape and position so the two read as
   one pair of image controls.
   ============================================ */

.card-rotate-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.card-rotate-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: scale(1.1);
}

/* Matches the action bar's square treatment for the flip button beside it. */
.card-action-bar .card-rotate-btn {
    border-radius: 4px !important;
    width: 26px !important;
    height: 26px !important;
}

/* A quarter-turned card overflows its portrait layout box on both sides.
   Letting it paint outside is what keeps the whole card visible on the board. */
.goldfish-card.sideways {
    overflow: visible;
}

.goldfish-card.sideways .goldfish-card-image {
    overflow: visible;
}

.goldfish-hover-preview img {
    transform-origin: center center;
}

/* A rotated image still occupies its original layout box, so the popup has to
   be given the turned card's footprint explicitly — otherwise it either clips
   at the screen edge or drifts out of the top-right corner every other card
   previews in. The image is sized to what becomes the popup's height, and the
   popup is sized to the landscape result. */
.goldfish-hover-preview.sideways {
    --sideways-preview: min(560px, 80vw, 78vh);
    width: var(--sideways-preview);
    /* A card is 488x680, so the turned image is that ratio the other way up. */
    height: calc(var(--sideways-preview) * 0.7176);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.goldfish-hover-preview.sideways img {
    width: calc(var(--sideways-preview) * 0.7176);
    height: auto;
    max-width: none;
    max-height: none;
}

/* ============================================
   LIBRARY MODAL: TOP CARD BADGE

   Unstyled text was overlapping the card's title. It sits on the art window
   like the token badge, using the same frame percentages.
   ============================================ */

.library-card-item .goldfish-card {
    position: relative;
}

.top-card-badge {
    position: absolute;
    top: 14%;
    left: 9%;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--accent-color);
    color: var(--button-primary-text, #000);
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 9;
}

/* ============================================
   CONTEXT MENU VALUE ENTRY

   Replaces window.prompt for "draw how many", "deal how much", and custom
   counters. The field sits where the question is being asked.
   ============================================ */

.context-menu-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    white-space: nowrap;
}

.context-menu-entry .menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-menu-entry-input {
    width: 56px;
    min-width: 0;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--input-bg, var(--bg-tertiary));
    color: var(--text-color);
    font-size: 0.82rem;
    text-align: center;
}

.context-menu-entry-input--name {
    flex: 1;
    width: auto;
    text-align: left;
}

.context-menu-entry-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.context-menu-entry-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--input-bg, var(--bg-tertiary));
    color: var(--accent-color);
    cursor: pointer;
}

.context-menu-entry-go:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--button-primary-text, #000);
}

.context-menu-entry--counter {
    gap: 4px;
}

/* ============================================
   BATTLEFIELD GRID

   The lattice gives zoom and pan something to be measured against — without it
   an empty board reads as the cards resizing rather than the view moving. Line
   colours live here; the cell size and offset are set inline from the zoom and
   pan, because only the component knows them.
   ============================================ */

.battlefield-viewport {
    --battlefield-grid-line: color-mix(in srgb, var(--text-muted) 12%, transparent);
    --battlefield-grid-major: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.battlefield-viewport.gridded {
    background-image:
        linear-gradient(to right, var(--battlefield-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--battlefield-grid-line) 1px, transparent 1px),
        linear-gradient(to right, var(--battlefield-grid-major) 1px, transparent 1px),
        linear-gradient(to bottom, var(--battlefield-grid-major) 1px, transparent 1px);
    /* Lines stay hairline at every zoom, so the grid reads as a ruled surface
       rather than as thickening bars. */
    background-repeat: repeat;
}

/* Browsers without color-mix still get a visible, if flatter, lattice. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .battlefield-viewport {
        --battlefield-grid-line: rgba(148, 163, 184, 0.12);
        --battlefield-grid-major: rgba(148, 163, 184, 0.2);
    }
}

/* ============================================
   MOBILE PLAYTEST: SPACE FOR THE BOARD

   Loaded after the earlier mobile block so these win. Every rule here buys
   vertical room for the battlefield, which is the only part of the screen that
   benefits from having more of it.
   ============================================ */

@media (max-width: 768px) {
    /* A compact action bar. The buttons stay 40px tall for touch, but the
       chrome around them does not. */
    .goldfish-actions-section {
        padding: 3px 6px;
    }

    .goldfish-actions-bar {
        gap: 4px;
        padding-bottom: 2px;
    }

    .actions-group {
        gap: 2px;
        padding: 2px 6px;
    }

    /* Group captions cost a whole line for words the icons already say. */
    .actions-group-label {
        display: none;
    }

    .goldfish-action-btn {
        width: 38px;
        height: 38px;
        padding: 4px;
    }

    /* The hand is one scrolling row. Wrapping it to a second row was buying
       readability with the board's space, which is the wrong trade on a phone:
       a hand scrolls naturally, a battlefield does not. */
    .goldfish-hand-container {
        max-height: none;
        height: auto;
    }

    .goldfish-zone.hand-zone .zone-cards {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        max-height: none;
        align-items: flex-start;
        gap: 6px;
        padding: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* A vertical drag lifts a card out; the browser must not claim it for
           a scroll it cannot perform. */
        touch-action: pan-x;
    }

    .goldfish-zone.hand-zone .zone-cards .goldfish-card {
        width: 78px;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* With the hand no longer wrapping, the board gets the rest. */
    .goldfish-battlefield-row {
        min-height: 38vh;
    }
}

/* ============================================
   DRAWER TABS AT EVERY WIDTH

   Life, Mana, and Dice must all stay reachable. The base layout spreads them
   apart; on a narrow screen that pushed a tab off the edge entirely.

   Anchoring an open panel to the row rather than to its own tab, and stopping
   the row sliding, are now unconditional — see the surface layer at the end of
   this file. What is left here is the narrow-screen sizing.
   ============================================ */

@media (max-width: 640px) {
    .drawers-container {
        gap: 0;
        padding: 0 2px;
        justify-content: space-evenly;
    }

    .mana-drawer-toggle,
    .dice-drawer-toggle,
    .life-drawer-toggle {
        padding: 4px 8px !important;
        font-size: 0.7em !important;
        gap: 3px !important;
    }

    .dice-drawer-content {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    .mana-drawer-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
    }

    /* The toggle row sits above the open panel and must stay reachable: it is
       the only way to close the drawer again. */
    .drawers-container {
        z-index: 150;
    }

    .mana-drawer-toggle,
    .dice-drawer-toggle,
    .life-drawer-toggle {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }
}

/* Very narrow phones: the tab labels go, the icons stay. All three must remain
   tappable, so nothing is allowed to shrink out of reach. */
@media (max-width: 420px) {
    .mana-drawer-toggle > span:not([class]),
    .dice-drawer-toggle > span:not([class]),
    .life-drawer-toggle > span:not([class]) {
        display: none;
    }

    .mana-drawer-toggle,
    .dice-drawer-toggle,
    .life-drawer-toggle {
        min-width: 52px;
        justify-content: center;
    }
}

/* ============================================
   INSIGHTS ON MOBILE

   A modal at 94vw with a 16px gutter reads as a mistake rather than a choice.
   On a phone it takes the screen.
   ============================================ */

@media (max-width: 768px) {
    .playtest-insights-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }

    .playtest-insights-body {
        padding: 12px 14px 24px;
    }

    .playtest-insights-header {
        padding: 12px 14px;
    }
}

/* ============================================
   HAND REORDER PREVIEW

   The gap the card would land in, shown while dragging. Reordering by feel and
   hoping was the old experience.
   ============================================ */

.hand-drop-indicator {
    flex: 0 0 0px;
    width: 0;
    align-self: stretch;
    min-height: 40px;
    border-radius: 2px;
    background: transparent;
    transition: width 0.12s ease, background 0.12s ease, margin 0.12s ease;
    pointer-events: none;
}

.hand-drop-indicator.active {
    width: 4px;
    flex-basis: 4px;
    margin: 0 2px;
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-glow, var(--accent-color));
}

/* ============================================
   MILLED CARDS

   A mill into a collapsed graveyard is otherwise just a number changing. The
   zone opens briefly and the cards that landed are outlined.
   ============================================ */

.goldfish-card.just-milled {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
    border-radius: 6px;
    animation: just-milled-pulse 0.5s ease-in-out 2;
}

@keyframes just-milled-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(96, 165, 250, 0.6)); }
    50% { box-shadow: 0 0 14px 3px var(--accent-glow, rgba(96, 165, 250, 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
    .goldfish-card.just-milled {
        animation: none;
    }
}

/* ============================================
   INSIGHTS: COMMANDER CASTS
   ============================================ */

.playtest-insights-commanders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.playtest-insight-commander {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.playtest-insight-commander-name {
    color: var(--text-color);
    font-weight: 600;
}

.playtest-insight-commander strong {
    color: var(--accent-color);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.playtest-insight-commander-sub {
    font-size: 0.72rem;
}

/* ============================================
   BOARD PLACEMENT TOGGLE (Free / Snap)

   Reuses the app-wide `.advanced-toggle-group` / `.toggle-btn` pair so it reads
   as the same control as every other either/or toggle. Only the metrics are
   overridden: the search-panel sizing is built for a filter column and dwarfs
   the 28px icon buttons it sits beside in the action bar.
   ============================================ */
.actions-group .advanced-toggle-group.playtest-placement-toggle,
.actions-group .advanced-toggle-group.playtest-orientation-toggle {
    height: 28px;
    padding: 2px;
    border-radius: 6px;
}

.playtest-placement-toggle .toggle-btn,
.playtest-orientation-toggle .toggle-btn {
    min-width: 44px;
    padding: 0 8px;
    font-size: 0.7rem;
    height: 100%;
}

/* "Landscape" is a longer word than "Snap"; let it have the room rather than
   truncating the one caption that says what the mode is. */
.playtest-orientation-toggle .toggle-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {

    .actions-group .advanced-toggle-group.playtest-placement-toggle,
    .actions-group .advanced-toggle-group.playtest-orientation-toggle {
        height: 40px;
    }

    .playtest-placement-toggle .toggle-btn {
        min-width: 48px;
    }

    /* Group captions are hidden at this width, so these two words are the only
       label the orientation toggle has. They stay full size. */
    .playtest-orientation-toggle .toggle-btn {
        min-width: 0;
        padding: 0 10px;
    }
}

/* ============================================
   MANUAL-ROTATE HINT

   Shown only when the browser turned an orientation lock down — iOS Safari has
   none. It sits in the action bar's strip rather than over the board: this is a
   footnote about the device, not something happening in the game.
   ============================================ */

.playtest-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: var(--panel-bg);
    border: none;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
}

.playtest-rotate-hint:hover {
    color: var(--text-color);
}

.playtest-rotate-hint .ui-icon,
.playtest-rotate-hint svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

/* ============================================
   THE PLAYTEST SURFACE — ARENA-STYLE BOARD PRIORITY

   This layer is the Playtest surface. It applies unconditionally: there is one
   arrangement now, on every viewport. The boxed, stacked rules earlier in this
   file are the base it overrides — kept because this layer is written as a set
   of overrides on them, not because a second arrangement is still reachable.

   The idea is Magic Arena's phone client: the battlefield is the screen, and
   every other zone is an overlay on top of it. Concretely —

     * the play area's rows come out of flow, so the battlefield is the only
       thing left in it and fills it edge to edge;
     * Command / Sideboard / Library become a rail down the left edge, Graveyard
       and Exile a rail down the right, each zone a tile that opens a flyout
       *sideways* into the board instead of downward into more layout;
     * the hand fans across the full width of the bottom of the board rather
       than sitting in a box beneath it, its overlap set from the card count by
       `goldfish::layout`;
     * zone headers, borders and panel chrome go away — the only furniture left
       floating over the board is the zoom pill (top centre) and the drawer tabs
       (bottom centre, over the bottom edge of the hand).

   The rails and the hand are pinned in the same two custom properties, so the
   board's usable rectangle is defined once and everything that must stay clear
   of it reads it from there.

   Note the toggle in the action bar is *not* about this layout — it forces the
   device's screen orientation, and only appears on touch devices. See
   `goldfish::layout::PlaytestOrientation`.
   ============================================ */

.goldfish-modal {
    /* Both scale with the viewport: a landscape phone and a desktop window are
       an order of magnitude apart, and a rail sized for one is unusable on the
       other. */
    --pt-rail-w: clamp(64px, 9vw, 104px);
    --pt-hand-h: clamp(118px, 28vh, 196px);
    /* The hand card is as tall as the strip allows, minus its breathing room,
       and as wide as that height permits at printed-card proportions. */
    --pt-hand-card-w: calc((var(--pt-hand-h) - 30px) / 1.397);
    /* How far a hovered hand card rises out of the fan. Always less than the
       strip's top padding, so the lift never becomes overflow. */
    --pt-hand-lift: 14px;
}

/* ── Long press belongs to the game, not to the browser ──────────────────── */

/* Holding a card is how a phone reaches the context menu. iOS answers the same
   gesture over an `<img>` with its own sheet — Share / Save to Photos / Copy —
   which appeared on top of ours and stole the press. Suppressing the callout
   and the native image drag leaves the hold to the long-press timer.

   On the whole surface rather than only on card images: the same sheet appears
   over any image, and a text selection dragged out of a zone label is no more
   wanted mid-game than a saved PNG. Inputs are exempted below — the menus have
   number and counter entries that have to stay selectable. */
.goldfish-modal-overlay,
.goldfish-modal-overlay img,
.card-zone-context-menu,
.playtest-touch-ghost,
.playtest-touch-ghost img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.goldfish-modal-overlay input,
.goldfish-modal-overlay textarea,
.card-zone-context-menu input {
    -webkit-user-select: text;
    user-select: text;
}

/* The card that follows a finger during a touch drag. Mounted at the top of the
   document by `ui::goldfish::touch_ghost` so nothing between it and the
   viewport can capture its `position: fixed` or clip it; everything about where
   it sits is written inline. Inert by construction — it must never be what
   `elementFromPoint` finds under the finger on release. */
.playtest-touch-ghost,
.playtest-touch-ghost * {
    pointer-events: none !important;
}

/* Chrome shrinks to what it needs; the board takes the rest. */
.goldfish-modal .goldfish-header {
    padding: 4px 12px !important;
}

.goldfish-modal .goldfish-title-text {
    font-size: 0.8rem;
}

.goldfish-modal .goldfish-play-area {
    padding: 0 !important;
    gap: 0 !important;
}

.goldfish-modal .goldfish-main-content {
    gap: 0;
}

/* ── The board is the screen ─────────────────────────────────────────────── */

.goldfish-modal .goldfish-battlefield-row {
    min-height: 0;
    gap: 0;
}

.goldfish-modal .goldfish-zone.battlefield-zone {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* A hovered zone lighting up is fine for a boxed panel and wrong for a
   full-bleed board: there is nothing left for the highlight to outline. */
.goldfish-modal .goldfish-zone.battlefield-zone:hover {
    background: var(--bg-tertiary);
    border-color: transparent;
    box-shadow: none;
}

/* The battlefield's header is dropped except for the zoom control, which is
   lifted out of the layout and floated over the top of the board.

   Centred, not corner-pinned: both top corners are now a rail tile, and a pill
   tucked behind Command or Exile is a readout nobody can read. The centre
   column between the rails is the one strip of the board that is always clear. */
.goldfish-modal .battlefield-zone>.zone-header {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    z-index: 60;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    gap: 0;
    justify-content: center;
    /* Only the pill itself is clickable; the rest of the header's box would
       otherwise sit across the top of the board swallowing pans. */
    pointer-events: none;
}

.goldfish-modal .battlefield-zone>.zone-header>.zone-icon,
.goldfish-modal .battlefield-zone>.zone-header>.zone-label,
.goldfish-modal .battlefield-zone>.zone-header>.zone-count {
    display: none;
}

.goldfish-modal .battlefield-zone .battlefield-zoom-controls {
    margin-left: 0;
    pointer-events: auto;
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--popup-shadow);
}

/* Life, mana and dice sit on the very bottom edge of the board, overlapping the
   bottom of the fanned hand. The hand's bottom sliver carries no information —
   the cards are read from their tops — so it is the cheapest strip on the
   screen to spend, and putting the tabs anywhere else costs board height.
   Spanning the full width, since the rails stop above the hand. */
.goldfish-modal .battlefield-zone .drawers-container {
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the hand (130). None of `.drawers-container`'s ancestors establish
       a stacking context, so this competes with the hand's z-index directly. */
    z-index: 135;
    /* This layer wins over every width-gated rule for the row, so it sets the
       whole of the row's spacing rather than leaving half of it to a media
       query that can no longer take effect. The gap scales with the viewport:
       three tabs need to stay apart enough to hit with a thumb and close
       enough to read as one row. */
    justify-content: center;
    gap: clamp(4px, 3vw, 32px);
    padding: 0 6px;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

/* No tab is ever squeezed to nothing to make the row fit — all three have to
   stay clickable, which is the whole point of the row. */
.goldfish-modal .battlefield-zone .drawers-container>div {
    flex: 0 0 auto;
}

/* The row never slides. Nudging it sideways to make room for an open panel is a
   desktop affordance that, at these widths, walks a tab off the screen edge —
   and a tab you cannot reach is a drawer you cannot close. */
.goldfish-modal .drawers-container,
.goldfish-modal .drawers-container.active,
.goldfish-modal .drawers-container.mana-active,
.goldfish-modal .drawers-container.dice-active,
.goldfish-modal .drawers-container.life-active {
    transform: none;
}

/* An OPEN drawer leaves the tab row and becomes a sheet across the bottom of
   the board.

   The whole drawer moves, not just its panel: the component lays a drawer out
   as a column of [tab, panel] and styles the open tab to weld to the panel
   below it — no bottom border, a one-pixel overlap, the caret flipped to point
   down. Hoisting the panel on its own broke that weld and left the tab stranded
   under a floating box. Positioning the *drawer* keeps the handle on the
   drawer, which is what a drawer being pulled out looks like.

   Out of flow, because in flow an open panel is as wide as its content and
   shoves the other two tabs off the row. */
.goldfish-modal .floating-mana-drawer.open,
.goldfish-modal .dice-roller-drawer.open,
.goldfish-modal .life-tracker-drawer.open {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Over the two closed tabs still sitting in the row beneath it. */
    z-index: 10;
}

.goldfish-modal .floating-mana-drawer.open .mana-drawer-content,
.goldfish-modal .dice-roller-drawer.open .dice-drawer-content,
.goldfish-modal .life-tracker-drawer.open .life-drawer-content {
    width: 100%;
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: none !important;
    /* Deep enough to bury the hand and the other two tabs rather than hovering
       over them half-transparently — an open drawer is the thing you are
       looking at, and a fanned hand behind a translucent panel is noise. The
       hand strip's own height is exactly the depth that takes. */
    min-height: var(--pt-hand-h);
    /* ...and capped, so there is always board left above it. */
    max-height: 56vh !important;
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
}

/* A closed panel takes no room and cannot be hit.

   A drawer is closed by an inline `max-height: 0`, which zeroes its height and
   nothing else. The Life panel carries a 280–320px `min-width`, so a *closed*
   Life drawer was still a 320px-wide invisible box sitting in the tab row —
   enough to push Dice clean off a phone screen. Its horizontal padding counts
   too, which is why that goes as well. `opacity: 0` likewise hides a panel
   without stopping it swallowing taps. */
.goldfish-modal .floating-mana-drawer.closed .mana-drawer-content,
.goldfish-modal .dice-roller-drawer.closed .dice-drawer-content,
.goldfish-modal .life-tracker-drawer.closed .life-drawer-content {
    width: 0;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

/* ── Edge rails ──────────────────────────────────────────────────────────── */

/* Both rails are absolute against the play area, stop above the hand fan, and
   are transparent to the pointer except where a tile actually is — the board
   underneath stays pannable in the gaps. */
.goldfish-modal .goldfish-top-zones-bar,
.goldfish-modal .goldfish-zones-split-row {
    position: absolute;
    top: 0;
    bottom: var(--pt-hand-h);
    width: var(--pt-rail-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px;
    box-sizing: border-box;
    /* Above the hand, because a flyout opened from a rail tile can hang down
       past the rail's own bottom edge and must not be painted over by it. */
    z-index: 140;
    pointer-events: none;
}

.goldfish-modal .goldfish-top-zones-bar {
    left: 0;
}

.goldfish-modal .goldfish-zones-split-row {
    right: 0;
}

.goldfish-modal .goldfish-top-zones-bar>.top-zone,
.goldfish-modal .goldfish-zones-split-row>.goldfish-zone {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--popup-shadow);
    backdrop-filter: var(--glass-blur);
    pointer-events: auto;
}

/* Each tile is icon over caption over count. The caption stays — five icons in
   a column is a memory test, and the rail has room for one small word. */
.goldfish-modal .goldfish-top-zones-bar .top-zone-header,
.goldfish-modal .goldfish-zones-split-row .collapsible-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 7px 3px !important;
    margin: 0;
    border: none;
    border-radius: 10px;
}

.goldfish-modal .goldfish-top-zones-bar .zone-label,
.goldfish-modal .goldfish-zones-split-row .zone-label {
    font-size: 0.55rem;
    letter-spacing: 0.2px;
    line-height: 1.1;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goldfish-modal .goldfish-top-zones-bar .zone-count,
.goldfish-modal .goldfish-zones-split-row .zone-count {
    margin-left: 0;
    padding: 0 6px;
    font-size: 0.72rem;
}

/* The chevron was a direction cue for a drawer that opened downward. These open
   sideways, and the caret cost a whole line of a tile this small. */
.goldfish-modal .goldfish-top-zones-bar .header-chevron,
.goldfish-modal .goldfish-zones-split-row .header-chevron {
    display: none;
}

/* ── Rail flyouts ────────────────────────────────────────────────────────── */

/* Left rail opens rightwards, right rail leftwards; both from the tile's own
   top edge, so the tile you pressed stays visible next to what it opened. */
.goldfish-modal .goldfish-top-zones-bar .top-zone-content-overlay {
    top: 0;
    left: calc(100% + 6px);
    right: auto;
    width: min(58vw, 440px);
    max-height: min(64vh, 440px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.goldfish-modal .goldfish-zones-split-row .goldfish-zone:not(.collapsed) .zone-cards {
    top: 0;
    bottom: auto;
    right: calc(100% + 6px);
    left: auto;
    width: min(58vw, 440px);
    max-height: min(64vh, 440px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
}

/* Both tiles keep their full radius while open: the flyout is beside them now,
   not welded to their bottom edge. */
.goldfish-modal .goldfish-top-zones-bar .top-zone.expanded,
.goldfish-modal .goldfish-top-zones-bar .top-zone.expanded .top-zone-header,
.goldfish-modal .goldfish-zones-split-row .goldfish-zone:not(.collapsed) .collapsible-header {
    border-radius: 10px;
    border-top: none;
}

/* A flyout is a browsing surface, not a shelf: smaller cards, more of them. */
.goldfish-modal .goldfish-top-zones-bar .zone-cards .goldfish-card,
.goldfish-modal .goldfish-zones-split-row .zone-cards .goldfish-card {
    width: 88px;
}

.goldfish-modal .goldfish-top-zones-bar .library-stack-clickable .library-card-back {
    width: 64px;
    height: 90px;
}

/* ── The hand, fanned over the board ─────────────────────────────────────── */

/* Pinned to the bottom of the board between the rails. It stays hit-testable
   across its whole strip: the hand is a drop target, and both the desktop drag
   and the touch drag find it by hit-testing this element. */
.goldfish-modal .goldfish-bottom-row {
    position: absolute;
    /* Full width, not inset by the rails: the rails stop at the top of this
       strip, so insetting bought nothing and cost two rail-widths of hand — on
       a phone that is most of the hand, cut off at both ends. */
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pt-hand-h);
    flex: none !important;
    min-height: 0;
    z-index: 130;
}

.goldfish-modal .goldfish-hand-container {
    flex: 1;
    min-width: 0;
    max-height: none;
    height: 100%;
}

/* No panel, just a scrim so card edges read against whatever is on the board
   behind them. */
.goldfish-modal .goldfish-zone.hand-zone {
    background: linear-gradient(to top, var(--panel-bg) 30%, transparent);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.goldfish-modal .goldfish-zone.hand-zone:hover {
    background: linear-gradient(to top, var(--panel-bg) 30%, transparent);
    border-color: transparent;
    box-shadow: none;
}

/* The label shrinks to a corner chip. Arena shows nothing at all here, but the
   count is the one number worth keeping and it costs almost no space. */
.goldfish-modal .hand-zone>.zone-header {
    position: absolute;
    top: 2px;
    left: 8px;
    z-index: 2;
    width: auto;
    margin: 0;
    padding: 0 !important;
    border: none;
    gap: 5px;
    opacity: 0.7;
    pointer-events: none;
}

.goldfish-modal .hand-zone>.zone-header .zone-label {
    font-size: 0.6rem;
}

.goldfish-modal .hand-zone>.zone-header .zone-count {
    margin-left: 0;
    padding: 0 6px;
    font-size: 0.65rem;
}

.goldfish-modal .goldfish-zone.hand-zone .zone-cards {
    height: 100%;
    align-items: flex-end;
    /* `safe` so a hand wide enough to scroll does not centre its first cards
       off the left edge, where no scroll position can reach them. */
    justify-content: center;
    justify-content: safe center;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    /* A lifted card rises into the top padding, which is inside the scroll box
       and therefore not overflow. Nothing is ever clipped by this. */
    overflow-y: hidden;
    padding: calc(var(--pt-hand-lift) + 6px) 8px 6px;
    gap: 4px;
    touch-action: pan-x;
}

.goldfish-modal .goldfish-zone.hand-zone .zone-cards .goldfish-card {
    width: var(--pt-hand-card-w) !important;
    flex: 0 0 auto;
    transform-origin: bottom center;
    transition: transform 0.16s ease;
}

/* Every card but the first tucks behind the one before it. `--hand-fan-overlap`
   is written inline on the row by `goldfish::layout::hand_fan_style`, because
   how far to tuck depends on how many cards there are and only Rust counts
   them. The first card is `:nth-child(2)` — a drop indicator precedes each
   card — and it must not be pulled left or the fan stops being centred. */
.goldfish-modal .goldfish-zone.hand-zone .zone-cards>.goldfish-card:not(:nth-child(2)) {
    margin-left: calc(var(--pt-hand-card-w) * var(--hand-fan-overlap, 0) * -1);
}

/* Lift whichever card is under the pointer clear of its neighbours, so a fanned
   hand can still be read one card at a time. */
.goldfish-modal .goldfish-zone.hand-zone .zone-cards>.goldfish-card:hover,
.goldfish-modal .goldfish-zone.hand-zone .zone-cards>.goldfish-card:focus-within {
    transform: translateY(calc(var(--pt-hand-lift) * -1));
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {

    .goldfish-modal .goldfish-zone.hand-zone .zone-cards .goldfish-card {
        transition: none;
    }
}

/* ── Action bar ──────────────────────────────────────────────────────────── */

/* Left in place below the board rather than floated over it: it is the only
   route back to the Default layout, and a control that hides itself behind a
   gesture is a control people cannot find again. */
.goldfish-modal .goldfish-actions-section {
    padding: 4px 8px !important;
}

/* Authoritative about the bar's own geometry, not just its spacing. An older
   landscape rule floats it as a fixed column against the right edge
   (`position: fixed; right: 0; top: 50%`), and the surface layer used to
   override only `flex-wrap` and `justify-content` — so on a short, wide screen
   the row detached and stuck itself to the side of the board. There is one
   arrangement now, and this is where it is decided.

   `safe center` rather than `center`: in a scroll container, centred overflow
   puts the first items in a region no scroll position can reach. Safe centring
   falls back to `flex-start` exactly when that would happen. */
.goldfish-modal .goldfish-actions-bar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    justify-content: safe center !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.goldfish-modal .goldfish-actions-bar::-webkit-scrollbar {
    display: none;
}

.goldfish-modal .actions-group {
    flex-shrink: 0;
}

/* ── Very short viewports ────────────────────────────────────────────────── */

/* A phone held sideways is ~350-400px tall. The rail captions and the hand's
   corner chip are the first things that stop earning their pixels. */
@media (max-height: 560px) {

    .goldfish-modal .goldfish-top-zones-bar .zone-label,
    .goldfish-modal .goldfish-zones-split-row .zone-label,
    .goldfish-modal .hand-zone>.zone-header .zone-label {
        display: none;
    }

    .goldfish-modal .goldfish-top-zones-bar .top-zone-header,
    .goldfish-modal .goldfish-zones-split-row .collapsible-header {
        padding: 5px 3px !important;
    }

    .goldfish-modal .goldfish-header {
        padding: 2px 10px !important;
    }
}

/* ── A handheld held sideways ────────────────────────────────────────────── */

/* Turning the phone trades height for width, and the surface has to spend that
   trade the other way round from portrait: the rails and the hand are sized as
   fractions of the *viewport*, so at 400px tall a hand strip of `28vh` is still
   118px — nearly a third of the screen — while the rails, sized off `9vw`, grow
   just as the board can least afford them.
   Everything here is that rebalance, plus dropping the chrome that a landscape
   phone has no room for at all. */
@media (pointer: coarse) and (max-height: 560px) and (orientation: landscape) {
    .goldfish-modal {
        /* Narrower rails and a shallower hand: the board is what the extra
           width was for. Both keep a floor big enough to hit with a thumb. */
        --pt-rail-w: clamp(50px, 7vw, 74px);
        --pt-hand-h: clamp(86px, 30vh, 132px);
        --pt-hand-lift: 8px;
    }

    /* The deck name is the header's whole second half and says nothing the
       player does not already know. */
    .goldfish-modal .goldfish-deck-name {
        display: none;
    }

    .goldfish-modal .goldfish-header {
        padding: 2px 8px !important;
    }

    .goldfish-modal .goldfish-title-text {
        font-size: 0.7rem;
    }

    /* The action bar is a strip across the bottom that the board cannot spare.
       It stays reachable — one row, scrolling sideways — but at the smallest
       size its controls still read at. */
    .goldfish-modal .goldfish-actions-section {
        padding: 2px 4px !important;
    }

    .goldfish-modal .goldfish-actions-bar {
        gap: 4px;
    }

    .goldfish-modal .actions-group-label {
        display: none;
    }

    .goldfish-modal .goldfish-action-btn {
        padding: 4px 7px;
    }

    /* Both footnotes float over the bottom of the board instead of taking a row
       of their own. On a screen this short a dismissible sentence in the layout
       costs more than the board can give. */
    .goldfish-modal .playtest-rotate-hint {
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100% - 16px);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        box-shadow: var(--popup-shadow);
        z-index: 150;
    }

    /* A flyout that opens to two-thirds of a 400px-tall screen leaves nothing
       of the board behind it. */
    .goldfish-modal .goldfish-top-zones-bar .top-zone-content-overlay,
    .goldfish-modal .goldfish-zones-split-row .goldfish-zone:not(.collapsed) .zone-cards {
        width: min(52vw, 380px);
        max-height: min(72vh, 300px);
    }
}

/* ── Playtest dialogs on the BaseModal shell ────────────────────────────────
   The sideboarding dialog migrated onto the app-wide BaseModal shell, which
   sizes its body to the content. The two columns are meant to scroll
   independently rather than turning the body into one long page, so the split
   row keeps an explicit height inside the shell. */
.base-modal-body > .sideboarding-body {
    height: 68vh;
    padding: 0;
}

/* The shell's body supplies the outer padding for migrated dialog content, so
   the old section paddings would double up inside it. */
.base-modal-body > .playtest-insights-body {
    padding: 0;
}

.base-modal-body > .search-bar-container {
    padding: 0 0 12px;
    background: transparent;
    border-bottom: none;
}

.base-modal-body > .library-modal-content {
    padding: 0;
    background: transparent;
}

/* Opening-hand setup on the BaseModal shell: the body sections keep their own
   flex/gap but drop the padding and nested scroll the shell now provides. */
.opening-hand-modal .opening-hand-body {
    padding: 0;
    overflow-y: visible;
}

.opening-hand-modal .opening-hand-subtitle {
    margin: 0;
}