/**
 * Deck Editor View (DEV) — mobile-only (html.layout-mobile #deckEditorModal).
 * Complements public/css/mobile-layout.css and STYLE_GUIDE.md tokens.
 */

/* Less dead space above the header (index.css uses 20px modal margin + 20px header padding-top) */
.layout-mobile #deckEditorModal .modal-content.deck-editor-modal {
    margin: 8px auto 8px auto;
    /* .modal sets overflow:hidden — allow MV header search dropdown to extend over modal-body */
    overflow: visible !important;
}

/* #deckEditorModal uses global .modal (overflow:hidden); MV search results sit in header and paint downward */
.layout-mobile #deckEditorModal.modal {
    overflow: visible !important;
}

.layout-mobile body.deck-editor-active {
    padding: 4px;
}

.layout-desktop #deckEditorModal .dev-mobile-deck-chrome {
    display: none !important;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-chrome {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

.layout-desktop #deckEditorModal .dev-mobile-deck-mv-search-row {
    display: none !important;
}

/* MV: toolbar row = search pill + subtle collapse control (expanded); collapsed uses display:contents for 3-col grid */
.layout-mobile #deckEditorModal .dev-mobile-deck-mv-search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed .dev-mobile-deck-mv-search-row {
    display: contents;
}

/* MV: header is a grid so title row, stats, then search toolbar; hamburger stays visible when collapsed */
.layout-mobile #deckEditorModal .modal-header {
    display: grid;
    /* minmax(0, 1fr) so the title column can shrink below its min-content width and */
    /* allow the title's overflow:hidden + ellipsis to kick in on long deck names.    */
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    overflow: visible;
    /* index .modal-header is 20px 20px 5px — too airy on small screens */
    padding: 8px 12px 4px 12px;
}

.layout-mobile #deckEditorModal .deck-editor-top-row {
    display: contents;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-expandable {
    display: contents;
}

.layout-mobile #deckEditorModal .deck-editor-title-section {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.layout-mobile #deckEditorModal .modal-header .deck-editor-right-controls {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    /* Expanded: pin menu to top of row 1 (aligns with deck title line) */
    align-self: start;
}

.layout-mobile #deckEditorModal #devMobileDeckHeaderStats {
    grid-column: 1 / -1;
    grid-row: 2;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-mv-search-row #devMobileDeckChrome {
    flex: 1 1 auto;
    min-width: 0;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-collapse-toggle {
    flex-shrink: 0;
    align-self: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(148, 163, 184, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 5;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(78, 205, 196, 0.28);
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-collapse-toggle:focus-visible {
    outline: 1px solid rgba(78, 205, 196, 0.5);
    outline-offset: 2px;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-collapse-icon {
    display: block;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 5px solid rgba(148, 163, 184, 0.65);
    border-top: 0;
    transition: transform 0.2s ease, border-bottom-color 0.15s ease;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-collapse-toggle:hover .dev-mobile-deck-header-collapse-icon {
    border-bottom-color: rgba(78, 205, 196, 0.75);
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed .dev-mobile-deck-header-collapse-icon {
    transform: rotate(180deg);
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed #devMobileDeckHeaderExpandableRegion,
.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed #devMobileDeckHeaderStats {
    display: none !important;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed {
    grid-template-rows: auto;
    row-gap: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    /* Toolbar uses display:contents — restore seam spacing before modal body */
    margin-bottom: 8px;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed #devMobileDeckChrome {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed .deck-editor-right-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed .dev-mobile-deck-header-collapse-toggle {
    grid-column: 3;
    grid-row: 1;
}

.layout-mobile #deckEditorModal .modal-header.dev-mobile-deck-header-collapsed .dev-mobile-deck-search-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.layout-desktop #deckEditorModal .dev-mobile-deck-header-collapse-toggle {
    display: none !important;
}

/*
 * Header hamburger: `position: absolute` + percentage `left` is relative to the narrow ~48px menu shell,
 * so the panel clipped. When open, use `position: fixed`; horizontal + vertical placement is set in
 * deck-editor-core.js `positionDeckEditorControlsMenuPanel` (align to toggle, clamp to viewport).
 */
.layout-mobile #deckEditorModal .deck-editor-controls-menu.deck-editor-controls-menu-open > .deck-editor-controls-menu-panel:not(.dev-mobile-deck-row-menu-panel) {
    position: fixed !important;
    right: auto !important;
    transform: none !important;
    width: min(280px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    z-index: 10051;
}

.layout-mobile #deckEditorModal #deckEditorDescription {
    display: none !important;
}

/* Summary hidden on MV: let title use remaining width so meta row is not clipped by .deck-editor-modal overflow */
.layout-mobile #deckEditorModal .modal-header .deck-editor-title-section,
.layout-mobile #deckEditorModal .deck-editor-title-section {
    /* width: 100% + min-width: 0 so the title section follows its minmax(0,1fr) grid    */
    /* track width instead of growing to its intrinsic (nowrap) content width and        */
    /* pushing the deck title past the hamburger / off the modal.                        */
    max-width: 100%;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    margin-right: 10px;
    padding: 4px 0 6px 2px;
    overflow: hidden;
}

.layout-mobile #deckEditorModal .deck-title-with-validation {
    gap: 6px;
}

/* Legality / warning reasons: no hover on phones; list under meta row, matches badge colors */
.layout-mobile #deckEditorModal .deck-validation-reasons-mv:not([hidden]) {
    display: block !important;
    list-style: disc;
    margin: 4px 0 0;
    padding: 0 0 0 1.15rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: var(--font-2xs);
    line-height: 1.35;
    font-weight: 500;
    color: #ff4444;
}

.layout-mobile #deckEditorModal .deck-validation-reasons-mv[data-variant="warning"]:not([hidden]) {
    color: #ffd93d;
}

.layout-mobile #deckEditorModal .deck-validation-reasons-mv li {
    margin: 0 0 2px;
    padding: 0;
}

/* MV: hide " / {min}" after card count — legality badge still shows deck status; saves header space */
.layout-mobile #deckEditorModal #deckHeaderCardMinPart {
    display: none !important;
}

/* MV: deck-stack icon instead of "Cards" label (group keeps aria-label="Deck card count") */
.layout-mobile #deckEditorModal .deck-editor-header-cards-label-text {
    display: none !important;
}

.layout-mobile #deckEditorModal .deck-editor-header-cards-icon {
    display: inline-block !important;
    vertical-align: middle;
}

.layout-mobile #deckEditorModal .deck-summary-section {
    display: none !important;
}

.layout-mobile #deckEditorModal .deck-editor-utility-actions #listViewBtn {
    display: none !important;
}

.layout-mobile #deckEditorModal .card-selector-pane {
    display: none !important;
}

.layout-mobile #deckEditorModal #resizableDivider {
    display: none !important;
}

/* MAX / TOTAL stats: in modal header on mobile (desktop keeps hidden) */
.dev-mobile-deck-header-stats {
    display: none;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-stats {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.layout-mobile #deckEditorModal .deck-editor-top-row {
    margin-bottom: 0;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-header-stats .dev-mobile-deck-stats-inner {
    padding: 4px 4px 6px;
    background: transparent;
}

.dev-mobile-deck-stats-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}

/* Fixed 2×2 per column — avoids uneven wrap on longer TOTAL labels */
.dev-mobile-deck-stats-block {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    align-items: start;
    justify-items: center;
}

.dev-mobile-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.dev-mobile-stat-label {
    font-size: var(--font-3xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    line-height: 1.15;
}

.dev-mobile-stat-value {
    font-size: var(--font-sm);
    font-weight: 400;
    color: #4ecdc4;
    margin-top: 2px;
    line-height: 1.1;
}

.dev-mobile-deck-stats-vrule {
    width: 1px;
    align-self: stretch;
    min-height: 0;
    background: rgba(78, 205, 196, 0.35);
    flex-shrink: 0;
}

/* Search: pill fills space left of collapse control in `.dev-mobile-deck-mv-search-row` */
.layout-mobile #deckEditorModal .dev-mobile-deck-mv-search-row .dev-mobile-deck-search-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    overflow: visible !important;
    box-sizing: border-box;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: var(--font-sm);
}

.layout-mobile #deckEditorModal .dev-mobile-deck-search-input:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 10px rgba(78, 205, 196, 0.25);
}

.layout-mobile #deckEditorModal .dev-mobile-deck-search-results.deck-editor-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 10050;
    max-height: min(360px, 50vh);
    overflow-y: auto;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-search-results .deck-editor-search-result {
    gap: 0;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-search-results .deck-editor-search-result.is-selected {
    background: rgba(78, 205, 196, 0.16);
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    margin-left: 4px;
    cursor: pointer;
    touch-action: manipulation;
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(78, 205, 196, 0.75);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check input:focus-visible + .deck-editor-search-result-check-box {
    outline: 2px solid rgba(78, 205, 196, 0.55);
    outline-offset: 3px;
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check input:checked + .deck-editor-search-result-check-box {
    background: linear-gradient(135deg, #4ecdc4, #2cb1a6);
    border-color: #4ecdc4;
}

.layout-mobile #deckEditorModal .deck-editor-search-result-check input:checked + .deck-editor-search-result-check-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #0b1418;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.layout-mobile #deckEditorModal .deck-editor-search-batch-action {
    position: sticky;
    bottom: 0;
    padding: 8px;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.72), rgba(20, 20, 20, 0.98) 42%);
    border-top: 1px solid rgba(78, 205, 196, 0.24);
}

.layout-mobile #deckEditorModal .deck-editor-search-batch-add-btn {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(78, 205, 196, 0.5);
    border-radius: 12px;
    background: linear-gradient(135deg, #4ecdc4, #2cb1a6);
    color: #0b1418;
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.layout-mobile #deckEditorModal .deck-editor-search-batch-add-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

/* Card list — same outer chrome as DTV .deck-type-section */
.layout-mobile #deckEditorModal .deck-pane {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(26, 26, 42, 0.6);
    padding: 8px 10px 12px;
    overflow-x: hidden;
}

/* Full-width MV list: beat DTV two-column inline flex + .deck-cards-editor.two-column */
.layout-mobile #deckEditorModal #deckCardsEditor.deck-cards-editor {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.dev-mobile-deck-list-root {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dev-mobile-deck-type-section {
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Align with DTV .deck-type-header (index.css) */
.dev-mobile-deck-type-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(78, 205, 196, 0.1);
    color: #4ecdc4;
    font-size: var(--font-md);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-type-header:hover {
    background: rgba(78, 205, 196, 0.2);
}

.dev-mobile-deck-type-name {
    flex: 1;
}

.dev-mobile-deck-type-count {
    font-size: var(--font-xs);
    color: #bdc3c7;
    font-weight: 500;
}

.dev-mobile-deck-type-toggle {
    color: #4ecdc4;
    font-size: var(--font-2xs);
    font-weight: bold;
}

.dev-mobile-deck-type-body {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
    padding-top: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dev-mobile-deck-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dev-mobile-deck-row:last-child {
    border-bottom: none;
}

.dev-mobile-deck-row-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.dev-mobile-deck-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dev-mobile-deck-row-name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-sm);
    font-weight: 400;
    color: #f8fafc;
    line-height: 1.35;
}

.dev-mobile-deck-row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

/* 30×30 = 75% of prior 40×40; override .touch-target-min (44px) from mobile-layout.css */
.layout-mobile #deckEditorModal .dev-mobile-deck-qty-btn.touch-target-min,
.layout-mobile #deckEditorModal .dev-mobile-deck-overflow-btn.touch-target-min {
    min-width: 30px;
    min-height: 30px;
}

.dev-mobile-deck-qty-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(78, 205, 196, 0.65);
    background: rgba(15, 45, 50, 0.85);
    color: #e0fffb;
    font-size: var(--font-sm);
    line-height: 1;
    cursor: pointer;
}

.dev-mobile-deck-overflow-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.9);
    color: #e2e8f0;
    font-size: var(--font-xs);
    line-height: 1;
    cursor: pointer;
}

.dev-mobile-deck-row.ko-dimmed,
.dev-mobile-deck-row .ko-dimmed {
    opacity: 0.55;
}

/* Row card-actions menu: same visual language as .deck-editor-controls-menu-panel, fixed under ⋯ */
#devMobileDeckActionsSheet {
    position: fixed;
    inset: 0;
    z-index: 10052;
    pointer-events: none;
    visibility: hidden;
}

#devMobileDeckActionsSheet.is-open {
    pointer-events: auto;
    visibility: visible;
}

#devMobileDeckActionsSheet[hidden]:not(.is-open) {
    display: none !important;
}

.dev-mobile-deck-row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10052;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0;
    margin: 0;
}

/* [hidden] must win over display:flex from shared panel rule */
#deckEditorModal .dev-mobile-deck-row-menu-panel[hidden] {
    display: none !important;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel.deck-editor-controls-menu-panel {
    position: fixed !important;
    top: 0;
    left: 0;
    right: auto;
    transform: none !important;
    z-index: 10053;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-width: min(168px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(52vh, 400px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-panel-btn {
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    color: #4ecdc4 !important;
    border: 1px solid rgba(78, 205, 196, 0.45) !important;
    border-radius: 8px !important;
    background: rgba(78, 205, 196, 0.12) !important;
    box-shadow: none;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-panel-btn:hover {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: rgba(78, 205, 196, 0.65) !important;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-item-label {
    color: #4ecdc4;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-item-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: #4ecdc4;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-item-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.layout-mobile #deckEditorModal .dev-mobile-deck-row-menu-panel .deck-editor-menu-item-icon--foil-active svg path {
    fill: #ffd700 !important;
    stroke: #b8860b !important;
}

.dev-mobile-deck-row-menu-custom {
    width: 100%;
    min-width: 0;
}

.dev-mobile-deck-row-menu-custom .ko-btn,
.dev-mobile-deck-row-menu-custom .reserve-character-btn,
.dev-mobile-deck-row-menu-custom button {
    width: 100%;
    margin-top: 4px;
}

.dev-mobile-deck-row-menu-empty {
    color: #94a3b8;
    font-size: var(--font-sm);
    margin: 0;
    padding: 6px 4px;
    text-align: center;
}

.dev-mobile-empty-deck {
    text-align: center;
    padding: 24px 12px;
    color: #cbd5e1;
}

/* ── Draw Hand (vertical fan) when active on mobile ─────────────────────── */
/* Contain overscroll / reduce pull-to-refresh reaching the document (Chrome Android). */
.layout-mobile #deckEditorModal.draw-hand-active {
    overscroll-behavior: none;
}

.layout-mobile #deckEditorModal.draw-hand-active .deck-editor-modal {
    min-height: 0;
    /* Let scaled / translated fan cards paint outside the content box (like deck tile character fan) */
    overflow: visible;
}

.layout-mobile #deckEditorModal.draw-hand-active .deck-editor-modal > .modal-body {
    display: none !important;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandSection {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 8px 0 10px;
    padding: 10px 8px 12px;
    display: flex !important;
    flex-direction: column;
    overflow: visible;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    touch-action: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4px 8px;
    box-sizing: border-box;
    --draw-hand-card-scale: 1;
    --draw-hand-stack-overlap: 0px;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card {
    flex-shrink: 0;
    box-sizing: border-box;
    /* Single column: full strip width (scale from JS = clientWidth / 132); cap at 100% */
    width: min(100%, calc(132px * var(--draw-hand-card-scale, 1)));
    max-width: 100%;
    height: calc(185px * var(--draw-hand-card-scale, 1));
    margin-top: calc(-1 * var(--draw-hand-stack-overlap, 0px));
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 0;
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card:first-child {
    margin-top: 0;
}

/* Recede non-focused cards first; focus rules below override for the hovered / peeked / :active card. */
@media (hover: hover) and (pointer: fine) {
    .layout-mobile #deckEditorModal.draw-hand-active #drawHandContent:has(.drawn-card:hover) .drawn-card:not(:hover):not(.dragging) {
        transform: translateY(6px) scale(0.85);
        opacity: 1;
    }
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent:has(.draw-hand-peek-active) .drawn-card:not(.draw-hand-peek-active):not(.dragging) {
    transform: translateY(6px) scale(0.85);
    opacity: 1;
}

/* Thumb-drag fan uses .draw-hand-peek-active only (:active caused stuck magnify on touch). */
.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.draw-hand-peek-active {
    z-index: 60 !important;
    transform: translateY(-12px) scale(1.35);
    box-shadow: 0 12px 24px rgba(78, 205, 196, 0.4);
    border-color: rgba(78, 205, 196, 0.8);
    border-width: 3px;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent.draw-hand-fan-dragging .drawn-card {
    transition: transform 0s, box-shadow 0s, border-color 0s, opacity 0s;
}

@media (hover: hover) and (pointer: fine) {
    .layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card:hover {
        z-index: 60 !important;
        transform: translateY(-12px) scale(1.35);
        box-shadow: 0 12px 24px rgba(78, 205, 196, 0.4);
        border-color: rgba(78, 205, 196, 0.8);
        border-width: 3px;
    }
}

/* Drag reorder beats fan focus (draw-hand.css .dragging loses z-index to fan :hover without this) */
.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.dragging,
.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.dragging:hover,
.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.dragging:active {
    transform: rotate(5deg) scale(1.1) !important;
    z-index: 1000 !important;
    opacity: 0.5;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-width: 2px;
    border-color: rgba(78, 205, 196, 0.3);
    transition: none;
}

/* Event cards: portrait slot + rotated face (same rules as desktop non-mobile use .drawn-card-face fill) */
.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.event-card {
    overflow: hidden;
    background-image: none !important;
}

.layout-mobile #deckEditorModal.draw-hand-active #drawHandContent .drawn-card.event-card .drawn-card-face {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(185px * var(--draw-hand-card-scale, 1));
    height: calc(132px * var(--draw-hand-card-scale, 1));
    margin-left: calc(-92.5px * var(--draw-hand-card-scale, 1));
    margin-top: calc(-66px * var(--draw-hand-card-scale, 1));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    transform-origin: center center;
    pointer-events: none;
}

.layout-mobile #deckEditorModal.draw-hand-active .draw-hand-header {
    margin-bottom: 8px;
}

.layout-mobile #deckEditorModal.draw-hand-active .draw-hand-footer {
    padding-top: 4px;
    padding-bottom: 2px;
}

.layout-mobile #deckEditorModal.draw-hand-active .draw-hand-redraw-btn {
    font-size: var(--font-sm);
    padding: 6px 10px;
}

/* -------------------------------------------------------------------------- */
/* Mobile header typography overrides (apply tokens to shared deck editor    */
/* header rules in index.css; desktop values are preserved there).           */
/* See html.layout-mobile tokens in public/css/mobile-layout.css.            */
/* -------------------------------------------------------------------------- */
.layout-mobile #deckEditorModal .deck-title-with-validation .deck-editor-deck-name.editable-title {
    font-size: var(--font-xl);
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.layout-mobile #deckEditorModal .deck-title-with-validation {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}

.layout-mobile #deckEditorModal .modal-header h3 {
    font-size: var(--font-lg);
}

.layout-mobile #deckEditorModal .deck-editor-title-meta-row {
    font-size: var(--font-xs);
}

.layout-mobile #deckEditorModal .deck-editor-header-cards-label-text {
    font-size: var(--font-xs);
}

.layout-mobile #deckEditorModal .deck-editor-header-cards-value,
.layout-mobile #deckEditorModal .deck-editor-header-cards-min,
.layout-mobile #deckEditorModal .deck-editor-header-threat-value {
    font-size: var(--font-sm);
}

.layout-mobile #deckEditorModal .deck-validation-badge {
    font-size: var(--font-xs);
}

.layout-mobile #deckEditorModal .validation-icon {
    font-size: var(--icon-sm);
}

/* Mobile-only override of the fixed 12px utility button from index.css */
.layout-mobile #deckEditorModal .deck-editor-utility-actions .remove-all-btn {
    font-size: var(--font-xs);
}

/* -------------------------------------------------------------------------- */
/* Draw Hand: mobile-scoped typography overrides (desktop rules in draw-hand.css)
/* -------------------------------------------------------------------------- */
.layout-mobile #deckEditorModal.draw-hand-active .draw-hand-close {
    font-size: var(--icon-lg);
}

.layout-mobile #deckEditorModal.draw-hand-active .draw-training-btn {
    font-size: var(--font-2xs);
}

/* -------------------------------------------------------------------------- */
/* Deck Editor Card View: mobile-scoped typography overrides                  */
/* (desktop rules live in deck-editor-card-view.css)                          */
/* -------------------------------------------------------------------------- */
.layout-mobile #deckEditorModal .card-view-btn {
    font-size: var(--font-3xs);
}

.layout-mobile #deckEditorModal .card-view-btn.alternate-art-btn {
    font-size: var(--font-3xs);
}

.layout-mobile #deckEditorModal .card-view-btn.remove-one-btn,
.layout-mobile #deckEditorModal .card-view-btn.add-one-btn,
.layout-mobile #deckEditorModal .card-view-btn.quantity-btn {
    font-size: var(--font-2xs);
}

.layout-mobile #deckEditorModal .card-view-remove-unusables-btn {
    font-size: var(--font-3xs);
}

.layout-mobile #deckEditorModal .card-view-category-toggle {
    font-size: var(--icon-md) !important;
}

.layout-mobile #deckEditorModal .card-view-category-name {
    font-size: var(--font-sm);
}

.layout-mobile #deckEditorModal .collapse-icon {
    font-size: var(--icon-sm);
}