/** * Mobile / narrow layout — scoped under .layout-mobile on . * Desktop (.layout-desktop) is unchanged. See /MOBILE_DESIGN.md * * DBV section index: search for dashed section banners (lines starting with many hyphens in * block comments). Card database M2c shell ~L56; per-tab blocks include Characters, Special, * All grid, Aspects, Missions, Events, Teamwork, Ally, Training, Basic, Power, Locations. * Deck editor mobile rules precede the first Card database banner. */ :root { --layout-mobile-max: 900px; } /* -------------------------------------------------------------------------- */ /* Mobile fluid typography tokens */ /* -------------------------------------------------------------------------- */ /* Scale pattern: clamp(MIN, rem + small vw slope, MAX). */ /* - `rem` component preserves WCAG 1.4.4 (respects user/OS font preference). */ /* - `vw` slope gives modest fluid growth across ~320–900px phones. */ /* - MIN/MAX caps prevent extreme overflow when OS "Large text" is enabled. */ /* All mobile font-size rules should reference these tokens; do not */ /* re-introduce inline rem/px values. */ html.layout-mobile { /* Text tokens */ --font-3xs: clamp(0.5625rem, 0.50rem + 0.20vw, 0.6875rem); /* ~9-11px — tiny uppercase labels */ --font-2xs: clamp(0.6875rem, 0.625rem + 0.20vw, 0.8125rem); /* ~11-13px — chips, toggles, qty */ --font-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); /* ~12-14px — badges, meta, nav tabs */ --font-sm: clamp(0.8125rem, 0.75rem + 0.30vw, 0.9375rem); /* ~13-15px — row name, body, search */ --font-md: clamp(0.9375rem, 0.85rem + 0.40vw, 1.0625rem); /* ~15-17px — section hdr, caption name */ --font-lg: clamp(1.0625rem, 0.95rem + 0.50vw, 1.25rem); /* ~17-20px — subtitles, select, tile stat */ --font-xl: clamp(1.20rem, 0.90rem + 1.20vw, 1.60rem); /* ~19-26px — deck title, tile title */ --font-2xl: clamp(1.50rem, 1.10rem + 1.80vw, 2.25rem); /* ~24-36px — collection/login title */ /* Icon-sized control tokens (non-text buttons where size acts like typography) */ --icon-sm: clamp(0.875rem, 0.80rem + 0.35vw, 1.00rem); /* ~14-16px — small icons inside rows */ --icon-md: clamp(1.125rem, 1.00rem + 0.60vw, 1.375rem); /* ~18-22px — ⋯ tile overflow */ --icon-lg: clamp(1.375rem, 1.20rem + 0.80vw, 1.625rem); /* ~22-26px — × close */ } /* -------------------------------------------------------------------------- */ /* Touch utility (apply to interactive controls where missing) */ /* -------------------------------------------------------------------------- */ .layout-mobile .touch-target-min { min-height: 44px; min-width: 44px; box-sizing: border-box; } /* -------------------------------------------------------------------------- */ /* Deck editor: stacked panes, no side-by-side squeeze */ /* -------------------------------------------------------------------------- */ .layout-mobile .deck-editor-layout { flex-direction: column !important; overflow-x: hidden; } .layout-mobile .deck-pane, .layout-mobile .card-selector-pane { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } .layout-mobile #resizableDivider { display: none !important; } .layout-mobile .deck-editor-layout.preview-read-only-mode .card-selector-pane, .layout-mobile body.preview-read-only-mode .deck-editor-layout .card-selector-pane { /* preview already hides selector on desktop; ensure full width deck */ width: 100% !important; } /* List view: stack the two deck columns vertically */ .layout-mobile .deck-cards-editor.list-view { flex-direction: column !important; gap: 16px !important; } .layout-mobile .deck-cards-editor.list-view .deck-column { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } /* -------------------------------------------------------------------------- */ /* Card database (#database-view) — M2c touch-first shell, filters, tables */ /* -------------------------------------------------------------------------- */ .layout-mobile #missions-table .column-filters, .layout-mobile .column-filters { min-width: 0 !important; max-width: 100%; flex-wrap: wrap; } .layout-mobile .database-section .filter-row, .layout-mobile .database-view .filter-row { flex-wrap: wrap; } .layout-mobile .database-section .data-table-wrapper, .layout-mobile #database-view .table-scroll, .layout-mobile .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } /* Disable hover effects — touch devices don't benefit from hover previews */ .layout-mobile #database-view tr:hover { background: transparent; } .layout-mobile #database-view td img:hover { transform: none; box-shadow: none; } .layout-mobile #database-view .all-cards-cell:hover { background: inherit; } .layout-mobile .card-hover-modal { display: none !important; } /* Shell: use horizontal space on phones */ .layout-mobile #database-view.database-section, .layout-mobile .database-section.database-view-adjust { padding-left: 10px; padding-right: 10px; padding-bottom: 16px; } /* * DBV single-column tiles (All + Characters + Special tbody): desktop All tab caps art at 200px in database-view.css. * On phones that reads tiny; use nearly full row width so both tabs stay matched and legible. * Horizontal art sizing uses % of the row / container (and cqw for landscape max-height), not 100vw — avoids clip vs shell padding and horizontal scroll inside .table-container. Special tab still overrides on #special-cards-table: --dbv-mobile-special-*. * Unit tests: tests/unit/layout-mode-and-viewport.test.ts — describe "mobile-layout.css (DBV Characters tab)". */ .layout-mobile #database-view { container-type: inline-size; --dbv-mobile-tile-img-max: 100%; --dbv-mobile-tile-img-landscape-max-h: min(56cqw, 480px); /* Shared by Locations/Events tbody portrait width; Characters MV uses flex-grow + cqw caps (see #characters-table tbody rules). */ --dbv-mobile-table-portrait-img: min(100%, 580px); --dbv-mobile-table-portrait-img-with-nav: min(calc(100% - 96px), 520px); } .layout-mobile #database-view #all-cards-grid-container .all-cards-img-wrap { max-width: var(--dbv-mobile-tile-img-max); } .layout-mobile #database-view #all-cards-grid-container .all-cards-cell img { max-width: var(--dbv-mobile-tile-img-max); } /* All-tab grid: match portrait tile width (desktop .horizontal-card uses width:auto + max-height, which shrinks landscape art). Characters tab still uses --dbv-mobile-tile-img-landscape-max-h on tbody img.horizontal-card. */ .layout-mobile #database-view #all-cards-grid-container .all-cards-cell img.horizontal-card { width: 100%; max-width: var(--dbv-mobile-tile-img-max); height: auto; max-height: none; } .layout-mobile #database-view .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .layout-mobile #database-view .stat-card { padding: 14px 12px; } /* Cap tab strip to ~768px-viewport inner width (768 − mainContainer 16px − db section 20px) so 769–900px doesn’t stretch .tab-button wider than on a true narrow phone. */ .layout-mobile #database-view .tab-container { padding-left: 0; padding-right: 0; max-width: 732px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; /* .tab-container defaults to align-items: center — shrink-wraps each .tab-row to content, so the two .tab-row bands (7 vs 6 tabs) got different widths and mismatched two-column button sizes. */ align-items: stretch; } .layout-mobile #database-view .tab-row { width: 100%; justify-content: flex-start; gap: 8px; } .layout-mobile #database-view .tab-button { min-height: 44px; min-width: 0; flex: 1 1 calc(50% - 4px); max-width: 100%; box-sizing: border-box; padding: 10px 12px; } /* "All" alone on first row (full width); remaining first-row tabs wrap two per row. */ .layout-mobile #database-view .tab-button[data-tab="all-cards"] { flex: 0 0 100%; max-width: 100%; width: 100%; box-sizing: border-box; } /* All tab: one card tile per row under client mobile layout. */ .layout-mobile #database-view #all-cards-grid-container { grid-template-columns: minmax(0, 1fr); } /* All tab filter+search bar: keep the 12 type checkboxes wrapped tightly so they take ~3 rows max, and use a 16px search field so iOS doesn't auto-zoom. */ .layout-mobile #database-view #all-cards-filter-container { padding: 8px; gap: 6px; } .layout-mobile #database-view .all-cards-search-input { min-height: 40px; font-size: 16px; } .layout-mobile #database-view #all-cards-type-filters { gap: 4px 6px; } .layout-mobile #database-view .card-type-filter { padding: 5px 7px; font-size: 11px; } /* All tab cell actions: row 1 = +Deck full width; row 2 = -Collection | +Collection (visual order). */ .layout-mobile #database-view #all-cards-grid-container .all-cards-cell .card-content-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; width: 100%; } .layout-mobile #database-view #all-cards-grid-container .all-cards-cell .card-content-bottom > div:first-child { grid-column: 1 / -1; margin-bottom: 0; } .layout-mobile #database-view #all-cards-grid-container .all-cards-cell .card-content-bottom .add-to-deck-btn { grid-column: 1 / -1; grid-row: 2; width: 100% !important; margin-bottom: 0 !important; margin-top: 0; } .layout-mobile #database-view #all-cards-grid-container .all-cards-cell .card-content-bottom .remove-from-collection-btn { grid-column: 1; grid-row: 3; width: 100% !important; margin-top: 0 !important; } .layout-mobile #database-view #all-cards-grid-container .all-cards-cell .card-content-bottom .add-to-collection-btn { grid-column: 2; grid-row: 3; width: 100% !important; margin-top: 0 !important; } .layout-mobile #database-view .search-input, .layout-mobile #database-view .header-filter, .layout-mobile #database-view .filter-input { min-height: 44px; box-sizing: border-box; } .layout-mobile #database-view .clear-filters-btn { min-height: 44px; padding: 10px 14px; box-sizing: border-box; } .layout-mobile #database-view .add-to-deck-btn, .layout-mobile #database-view .add-to-collection-btn, .layout-mobile #database-view .remove-from-collection-btn { min-height: 44px; min-width: 44px; padding: 10px 12px; box-sizing: border-box; } .layout-mobile #database-view .power-type-filter-toggle, .layout-mobile #database-view .function-filter-toggle { min-width: 44px; min-height: 44px; box-sizing: border-box; } .layout-mobile #database-view .ability-toggle { width: 44px; height: 44px; flex-shrink: 0; } .layout-mobile #database-view .toggle-label { min-height: 44px; display: flex; align-items: center; gap: 8px; } /* Wide header filters (card-tables.css) — fluid on narrow layout */ .layout-mobile #advanced-universe-table .header-filter[data-column="card_effect"], .layout-mobile #locations-table .header-filter[data-column="special_ability"], .layout-mobile #locations-table .header-filter[data-column="name"], .layout-mobile #events-table .header-filter[data-column="game_effect"] { width: 100% !important; max-width: 100% !important; } /* Missions: relax desktop min-widths on mobile (tbody card layout uses full width) */ .layout-mobile #missions-table thead tr:first-child th:nth-child(2), .layout-mobile #missions-table tbody td:nth-child(2), .layout-mobile #missions-table thead tr:first-child th:nth-child(4), .layout-mobile #missions-table tbody td:nth-child(4), .layout-mobile #missions-table thead tr:first-child th:nth-child(5), .layout-mobile #missions-table tbody td:nth-child(5) { min-width: 0 !important; } .layout-mobile #events-table th, .layout-mobile #events-table td { min-width: 0 !important; } /* Special cards: Add-to-deck column (desktop table widths; mobile tbody overrides below) */ .layout-mobile #special-cards-table th:nth-child(2), .layout-mobile #special-cards-table td:nth-child(2) { min-width: 0 !important; } .layout-mobile #advanced-universe-table th:nth-child(2), .layout-mobile #advanced-universe-table td:nth-child(2) { min-width: 0 !important; } /* -------------------------------------------------------------------------- */ /* Special Cards tab — filter shell + card rows (layout-mobile only) */ /* -------------------------------------------------------------------------- */ /* Beat database-view.css #special-cards-table th:nth-child(n) width:% !important (otherwise stacked filter cells stay a narrow left rail). */ .layout-mobile #special-cards-table thead { display: block; width: 100%; } .layout-mobile #special-cards-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row { --specials-header-shell-bg: rgba(10, 28, 32, 0.96); --specials-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--specials-header-shell-border); border-radius: 12px; background: var(--specials-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-clear-th { display: none !important; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-spacer-th { display: none !important; } /* Full-width rows (flex-basis 100% so they wrap to their own line after the icon strip) */ .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-character-th, .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-name-th, .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-effect-th, .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-value-th { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Mobile visual order: function row (toggles); power type + No Icon; value; then character, name, effect */ .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-function-th { order: 1; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 10px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 12px 14px; align-self: stretch; box-sizing: border-box; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-icon-th { order: 2; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; padding: 0 0 12px 0; margin: 0; align-self: stretch; box-sizing: border-box; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-value-th { order: 3; padding: 0 0 10px 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-character-th { order: 4; padding: 0 0 10px 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-name-th { order: 5; padding: 0 0 10px 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row > th.special-filter-effect-th { order: 6; padding: 0 0 12px 0; } /* Full-bleed vs card-tables.css 85% centered desktop rule (!important) */ .layout-mobile #special-cards-table thead tr.special-cards-filter-row .header-filter { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .icon-filter-container { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .special-power-filter-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .special-no-icon-toggle-label { flex: 1 1 0; min-width: 0; max-width: 50px; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; min-height: 0; box-sizing: border-box; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .special-no-icon-toggle-label .special-no-icon-toggle-face { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 50px; max-height: 50px; margin: 0 auto; padding: 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .special-no-icon-toggle-label .special-no-icon-svg { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* Value filters sheet: no horizontal padding so row edges match .header-filter below */ .layout-mobile #special-cards-table .special-value-inputs-and-clear { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 0 12px; margin: 0; } .layout-mobile #special-cards-table .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } /* 1% buffers (4fr each); freed 5% split +1.25% per filter → 21.25/31.25/31.25/11.25% (×4: 4 85 4 125 4 125 4 45 4); cols 2,4,6,8 */ .layout-mobile #special-cards-table .special-value-filters-inner .column-filters { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .special-no-value-toggle-label { grid-column: 8; display: flex; justify-content: center; align-items: center; min-width: 0; width: 100%; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .special-no-value-toggle-label .special-no-value-toggle-face { width: 100%; max-width: min(100%, 3rem); aspect-ratio: 1; min-width: 0; min-height: 36px; height: auto; padding: 4px; box-sizing: border-box; } .layout-mobile #special-cards-table .special-value-filters-inner .column-filters .special-no-value-svg { width: 24px; height: 24px; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .special-function-filter-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; flex: 0 1 auto; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .function-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #special-cards-table thead tr.special-cards-filter-row .function-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #special-cards-table { /* * Special-only art scale (~1.5x vs shared --dbv-mobile-table-portrait-img* / tile tokens). * Portrait width uses % of the card cell (not 100vw) so art is not clipped by tbody/td overflow:hidden * from desktop height locks. See also @media (max-width: 900px) mirror below when layout-desktop. */ --dbv-mobile-special-portrait-img: min(100%, 870px); --dbv-mobile-special-tile-img-max: 100%; --dbv-mobile-special-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #special-cards-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #special-cards-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #special-cards-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #special-cards-table tbody td:first-child::before { display: none; } .layout-mobile #special-cards-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #special-cards-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #special-cards-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #special-cards-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #special-cards-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #special-cards-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #special-cards-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #special-cards-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-special-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #special-cards-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* Landscape / wide special art: grow between arrows, cap height (Special-scaled tile tokens). */ .layout-mobile #special-cards-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-special-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-special-tile-img-landscape-max-h) !important; object-fit: contain !important; } /* Avoid clipping full-width special art when desktop row height locks leave overflow:hidden on td/tr. */ .layout-mobile #special-cards-table tbody tr[data-height-locked='true'], .layout-mobile #special-cards-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.88); line-height: 1.3; } .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__character { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* OPD / Cataclysm / Assist / Ambush — one line each when present */ .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__opd, .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__cataclysm, .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__assist, .layout-mobile #special-cards-table tbody td:first-child .characters-mobile-card-caption__ambush { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Aspects tab — filter shell + card rows (Special-style, no function toggles) */ /* Spec: MOBILE_DESIGN.md §10.5, docs/current/DBV_ASPECTS_MOBILE.md */ /* Tests: tests/unit/dbv-aspects-mobile.test.ts */ /* -------------------------------------------------------------------------- */ .layout-mobile #aspects-table th:nth-child(2), .layout-mobile #aspects-table td:nth-child(2) { min-width: 0 !important; } .layout-mobile #aspects-table thead { display: block; width: 100%; } .layout-mobile #aspects-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row { --aspects-header-shell-bg: rgba(10, 28, 32, 0.96); --aspects-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--aspects-header-shell-border); border-radius: 12px; background: var(--aspects-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-clear-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-spacer-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-fort-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-opd-th { display: none !important; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-location-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-name-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-effect-th, .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-value-th { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Mobile order: power icons row; value; location; name; effect (full-tab clear hidden on MV — end-of-file DBV block) */ .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-icon-th { order: 1; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block; padding: 0 0 12px 0; margin: 0; align-self: stretch; box-sizing: border-box; } .layout-mobile #aspects-table thead tr.aspects-filter-row .aspect-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #aspects-table thead tr.aspects-filter-row .aspect-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-value-th { order: 2; padding: 0 0 10px 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-location-th { order: 3; padding: 0 0 10px 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-name-th { order: 4; padding: 0 0 10px 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row > th.aspect-filter-effect-th { order: 5; padding: 0 0 12px 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row .header-filter { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; } .layout-mobile #aspects-table thead tr.aspects-filter-row .aspect-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #aspects-table thead tr.aspects-filter-row .aspect-filter-icon-row .special-power-filter-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #aspects-table thead tr.aspects-filter-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #aspects-table thead tr.aspects-filter-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #aspects-table thead tr.aspects-filter-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #aspects-table thead tr.aspects-filter-row .special-no-icon-toggle-label { flex: 1 1 0; min-width: 0; max-width: 50px; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; min-height: 0; box-sizing: border-box; } .layout-mobile #aspects-table thead tr.aspects-filter-row .special-no-icon-toggle-label .special-no-icon-toggle-face { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 50px; max-height: 50px; margin: 0 auto; padding: 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .layout-mobile #aspects-table thead tr.aspects-filter-row .special-no-icon-toggle-label .special-no-icon-svg { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #aspects-table .aspects-value-inputs-and-clear.special-value-inputs-and-clear { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } .layout-mobile #aspects-table .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .special-no-value-toggle-label { grid-column: 8; display: flex; justify-content: center; align-items: center; min-width: 0; width: 100%; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .special-no-value-toggle-label .special-no-value-toggle-face { width: 100%; max-width: min(100%, 3rem); aspect-ratio: 1; min-width: 0; min-height: 36px; height: auto; padding: 4px; box-sizing: border-box; } .layout-mobile #aspects-table .special-value-filters-inner .column-filters .special-no-value-svg { width: 24px; height: 24px; } .layout-mobile #aspects-table #clear-aspects-filters-mobile.clear-filters-btn--aspects-mobile-inline { width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #aspects-table { --dbv-mobile-aspects-portrait-img: min(100%, 870px); --dbv-mobile-aspects-tile-img-max: 100%; --dbv-mobile-aspects-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #aspects-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #aspects-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #aspects-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #aspects-table tbody td:first-child::before { display: none; } .layout-mobile #aspects-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #aspects-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #aspects-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #aspects-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #aspects-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #aspects-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #aspects-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #aspects-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-aspects-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #aspects-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #aspects-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-aspects-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-aspects-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #aspects-table tbody tr[data-height-locked='true'], .layout-mobile #aspects-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption__location { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption__fortification { font-size: var(--font-xs); font-weight: 700; color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #aspects-table tbody td:first-child .characters-mobile-card-caption__opd { font-size: var(--font-xs); font-weight: 700; color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Missions tab — mobile filter shell (set dropdown) + vertical card rows */ /* Spec: MOBILE_DESIGN.md M2c; docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #missions-table thead { display: block; width: 100%; } .layout-mobile #missions-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #missions-table thead tr.missions-filter-row { --missions-header-shell-bg: rgba(10, 28, 32, 0.96); --missions-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--missions-header-shell-border); border-radius: 12px; background: var(--missions-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #missions-table thead tr.missions-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #missions-table thead tr.missions-filter-row > th.missions-filter-leading-th, .layout-mobile #missions-table thead tr.missions-filter-row > th.missions-filter-card-name-th { display: none !important; } .layout-mobile #missions-table thead tr.missions-filter-row > th.missions-filter-sets-th { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #missions-table .missions-column-filters { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .layout-mobile #missions-table .missions-mobile-set-row, .layout-mobile #missions-table .missions-mobile-card-name-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } /* Half a line below mission-set control (matches select line-height 1.2 @ 1rem) */ .layout-mobile #missions-table .missions-mobile-card-name-row { margin-top: calc(0.5 * 1.2 * 1rem); } .layout-mobile #missions-table .missions-mobile-set-label { flex: 1 1 100%; font-size: var(--font-2xs); font-weight: 600; color: #4ecdc4; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .layout-mobile #missions-table .missions-mobile-set-row > .missions-mobile-set-label { display: block; } .layout-mobile #missions-table .missions-mission-set-filter, .layout-mobile #missions-table .missions-mobile-card-name-filter { flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; border: 1px solid rgba(78, 205, 196, 0.35); background: rgba(18, 44, 50, 0.98); color: #fff; box-sizing: border-box; } .layout-mobile #missions-table .missions-mobile-card-name-filter::placeholder { color: rgba(255, 255, 255, 0.45); } .layout-mobile #missions-table { --dbv-mobile-missions-portrait-img: min(100%, 870px); --dbv-mobile-missions-tile-img-max: 100%; --dbv-mobile-missions-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #missions-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #missions-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #missions-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #missions-table tbody td:first-child::before { display: none; } .layout-mobile #missions-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #missions-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #missions-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #missions-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #missions-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #missions-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #missions-table tbody tr[data-height-locked='true'], .layout-mobile #missions-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #missions-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #missions-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-missions-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #missions-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #missions-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-missions-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-missions-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #missions-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #missions-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } .layout-mobile #missions-table tbody td:first-child .characters-mobile-card-caption__mission-set { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #missions-table tbody td:first-child .characters-mobile-card-caption__set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Teamwork tab — mobile To Use filters + vertical card rows */ /* Spec: MOBILE_DESIGN.md M2c; docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #teamwork-table thead { display: block; width: 100%; } .layout-mobile #teamwork-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #teamwork-table thead tr.teamwork-desktop-filter-row { display: none !important; } .layout-mobile #teamwork-table thead tr.teamwork-filter-row { --teamwork-header-shell-bg: rgba(10, 28, 32, 0.96); --teamwork-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--teamwork-header-shell-border); border-radius: 12px; background: var(--teamwork-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #teamwork-table thead tr.teamwork-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-clear-th, .layout-mobile #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-spacer-th { display: none !important; } .layout-mobile #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #teamwork-table .teamwork-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #teamwork-table .teamwork-to-use-power-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #teamwork-table .teamwork-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #teamwork-table .teamwork-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #teamwork-table .teamwork-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #teamwork-table .teamwork-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #teamwork-table #clear-teamwork-filters-mobile-inline.clear-filters-btn--teamwork-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #teamwork-table .teamwork-filter-value-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } .layout-mobile #teamwork-table .teamwork-filter-value-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-value-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-value-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-value-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-value-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-to-use-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } .layout-mobile #teamwork-table .teamwork-to-use-value-clear-btn:hover { color: #4ecdc4; } .layout-mobile #teamwork-table .teamwork-to-use-value-clear-svg { width: 24px; height: 24px; } .layout-mobile #teamwork-table { --dbv-mobile-teamwork-portrait-img: min(100%, 870px); --dbv-mobile-teamwork-tile-img-max: 100%; --dbv-mobile-teamwork-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #teamwork-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #teamwork-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #teamwork-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #teamwork-table tbody td:first-child::before { display: none; } .layout-mobile #teamwork-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #teamwork-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #teamwork-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #teamwork-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #teamwork-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #teamwork-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #teamwork-table tbody tr[data-height-locked='true'], .layout-mobile #teamwork-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #teamwork-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #teamwork-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-teamwork-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #teamwork-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #teamwork-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-teamwork-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-teamwork-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption--teamwork { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-line1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-sep { color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-line2 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-sm); line-height: 1.35; color: rgba(255, 255, 255, 0.88); max-width: 100%; } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-bonuses { font-weight: 600; color: rgba(255, 255, 255, 0.92); } .layout-mobile #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Ally tab — mobile stat type filter + vertical card rows */ /* Spec: MOBILE_DESIGN.md M2c; docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #ally-universe-table thead { display: block; width: 100%; } .layout-mobile #ally-universe-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #ally-universe-table thead tr.ally-desktop-filter-row { display: none !important; } .layout-mobile #ally-universe-table thead tr.ally-filter-row { --ally-header-shell-bg: rgba(10, 28, 32, 0.96); --ally-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--ally-header-shell-border); border-radius: 12px; background: var(--ally-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #ally-universe-table thead tr.ally-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #ally-universe-table thead tr.ally-filter-row > th.ally-filter-clear-th, .layout-mobile #ally-universe-table thead tr.ally-filter-row > th.ally-filter-spacer-th { display: none !important; } .layout-mobile #ally-universe-table thead tr.ally-filter-row > th.ally-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #ally-universe-table .ally-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #ally-universe-table .ally-mobile-name-row { width: 100%; } .layout-mobile #ally-universe-table .ally-mobile-name-row .header-filter { width: 100%; box-sizing: border-box; } .layout-mobile #ally-universe-table .ally-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #ally-universe-table .ally-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #ally-universe-table .ally-stat-type-to-use-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #ally-universe-table .ally-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #ally-universe-table .ally-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #ally-universe-table .ally-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #ally-universe-table .ally-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #ally-universe-table #clear-ally-filters-mobile-inline.clear-filters-btn--ally-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #ally-universe-table { --dbv-mobile-ally-portrait-img: min(100%, 870px); --dbv-mobile-ally-tile-img-max: 100%; --dbv-mobile-ally-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #ally-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #ally-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #ally-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #ally-universe-table tbody td:first-child::before { display: none; } .layout-mobile #ally-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #ally-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #ally-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #ally-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #ally-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #ally-universe-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #ally-universe-table tbody tr[data-height-locked='true'], .layout-mobile #ally-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #ally-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #ally-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-ally-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #ally-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #ally-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-ally-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-ally-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption--ally { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-stat-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-stat-sep { color: #fff; flex: 0 0 auto; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-text { font-size: var(--font-sm); font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.9); max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Training tab — mobile stat type filter + vertical card rows */ /* Spec: MOBILE_DESIGN.md M2c; docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #training-table thead { display: block; width: 100%; } .layout-mobile #training-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #training-table thead tr.training-desktop-filter-row { display: none !important; } .layout-mobile #training-table thead tr.training-filter-row { --training-header-shell-bg: rgba(10, 28, 32, 0.96); --training-header-shell-border: rgba(78, 205, 196, 0.38); display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--training-header-shell-border); border-radius: 12px; background: var(--training-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #training-table thead tr.training-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #training-table thead tr.training-filter-row > th.training-filter-clear-th, .layout-mobile #training-table thead tr.training-filter-row > th.training-filter-spacer-th { display: none !important; } .layout-mobile #training-table thead tr.training-filter-row > th.training-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #training-table .training-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #training-table .training-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #training-table .training-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #training-table .training-stat-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #training-table .training-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #training-table .training-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #training-table .training-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #training-table .training-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #training-table #clear-training-filters-mobile-inline.clear-filters-btn--training-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #training-table { --dbv-mobile-training-portrait-img: min(100%, 870px); --dbv-mobile-training-tile-img-max: 100%; --dbv-mobile-training-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #training-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #training-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #training-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #training-table tbody td:first-child::before { display: none; } .layout-mobile #training-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #training-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #training-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #training-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #training-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #training-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #training-table tbody tr[data-height-locked='true'], .layout-mobile #training-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #training-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #training-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-training-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #training-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #training-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-training-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-training-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption--training { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-name { font-weight: 700; font-size: var(--font-lg); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-value-bonus { margin: 0 2px; } .layout-mobile #training-table tbody td:first-child .characters-mobile-card-caption__training-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Basic Universe tab — mobile filters (type + To Use + Bonus) + card rows */ /* Spec: docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #basic-universe-table thead { display: block; width: 100%; } .layout-mobile #basic-universe-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #basic-universe-table thead tr.basic-universe-desktop-filter-row { display: none !important; } .layout-mobile #basic-universe-table thead tr.basic-universe-filter-row { --basic-universe-header-shell-bg: rgba(10, 28, 32, 0.96); --basic-universe-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--basic-universe-header-shell-border); border-radius: 12px; background: var(--basic-universe-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #basic-universe-table thead tr.basic-universe-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-clear-th, .layout-mobile #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-spacer-th { display: none !important; } .layout-mobile #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #basic-universe-table .basic-universe-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #basic-universe-table .basic-universe-stat-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #basic-universe-table .basic-universe-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #basic-universe-table #clear-basic-universe-filters-mobile-inline.clear-filters-btn--basic-universe-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #basic-universe-table .basic-universe-filter-to-use-shell, .layout-mobile #basic-universe-table .basic-universe-filter-bonus-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } .layout-mobile #basic-universe-table .basic-universe-filter-to-use-shell .special-value-filters-inner, .layout-mobile #basic-universe-table .basic-universe-filter-bonus-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-filters-inner, .layout-mobile #basic-universe-table .basic-universe-bonus-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.equals, .layout-mobile #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.min, .layout-mobile #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.max, .layout-mobile #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-value-clear-btn, .layout-mobile #basic-universe-table .basic-universe-bonus-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } .layout-mobile #basic-universe-table .basic-universe-to-use-value-clear-btn:hover, .layout-mobile #basic-universe-table .basic-universe-bonus-value-clear-btn:hover { color: #4ecdc4; } .layout-mobile #basic-universe-table .basic-universe-to-use-value-clear-svg, .layout-mobile #basic-universe-table .basic-universe-bonus-value-clear-svg { width: 24px; height: 24px; } .layout-mobile #basic-universe-table { --dbv-mobile-basic-universe-portrait-img: min(100%, 870px); --dbv-mobile-basic-universe-tile-img-max: 100%; --dbv-mobile-basic-universe-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #basic-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #basic-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #basic-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #basic-universe-table tbody td:first-child::before { display: none; } .layout-mobile #basic-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #basic-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #basic-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #basic-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #basic-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #basic-universe-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #basic-universe-table tbody tr[data-height-locked='true'], .layout-mobile #basic-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #basic-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #basic-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-basic-universe-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #basic-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #basic-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-basic-universe-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-basic-universe-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption--basic-universe { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-name { font-weight: 700; font-size: var(--font-lg); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-type { font-weight: 600; color: rgba(255, 255, 255, 0.95); } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-value-bonus { margin: 0 2px; } .layout-mobile #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Mobile-only override of the desktop 0.85rem !important rule in card-tables.css */ .layout-mobile #basic-universe-table .checkbox-group label { font-size: var(--font-sm) !important; } /* -------------------------------------------------------------------------- */ /* Power Cards tab — mobile type + value filters + vertical card rows */ /* Spec: docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #power-cards-table thead { display: block; width: 100%; } .layout-mobile #power-cards-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #power-cards-table thead tr.power-cards-desktop-filter-row { display: none !important; } .layout-mobile #power-cards-table thead tr.power-cards-filter-row { --power-header-shell-bg: rgba(10, 28, 32, 0.96); --power-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--power-header-shell-border); border-radius: 12px; background: var(--power-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #power-cards-table thead tr.power-cards-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-clear-th, .layout-mobile #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-spacer-th { display: none !important; } .layout-mobile #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #power-cards-table .power-cards-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #power-cards-table .power-cards-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } .layout-mobile #power-cards-table .power-cards-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .layout-mobile #power-cards-table .power-cards-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .layout-mobile #power-cards-table .power-cards-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } .layout-mobile #power-cards-table .power-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } .layout-mobile #power-cards-table #clear-power-filters-mobile-inline.clear-filters-btn--power-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } .layout-mobile #power-cards-table .power-cards-filter-value-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } .layout-mobile #power-cards-table .power-cards-filter-value-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-value-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-value-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-value-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #power-cards-table .power-cards-value-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .layout-mobile #power-cards-table .power-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } .layout-mobile #power-cards-table .power-value-clear-btn:hover { color: #4ecdc4; } .layout-mobile #power-cards-table .power-value-clear-svg { width: 24px; height: 24px; } .layout-mobile #power-cards-table { --dbv-mobile-power-portrait-img: min(100%, 870px); --dbv-mobile-power-tile-img-max: 100%; --dbv-mobile-power-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #power-cards-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #power-cards-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #power-cards-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #power-cards-table tbody td:first-child::before { display: none; } .layout-mobile #power-cards-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #power-cards-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #power-cards-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #power-cards-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #power-cards-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #power-cards-table tbody tr[data-height-locked='true'], .layout-mobile #power-cards-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #power-cards-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #power-cards-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-power-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #power-cards-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #power-cards-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-power-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-power-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #power-cards-table tbody td:first-child .characters-mobile-card-caption--power { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: var(--font-md); line-height: 1.35; color: #fff; max-width: 100%; } .layout-mobile #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } .layout-mobile #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } .layout-mobile #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Events tab — mobile filter shell (mission set + game effect) + card rows */ /* Spec: MOBILE_DESIGN.md M2c; docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ .layout-mobile #events-table thead { display: block; width: 100%; } .layout-mobile #events-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #events-table thead tr.events-filter-row { --events-header-shell-bg: rgba(10, 28, 32, 0.96); --events-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--events-header-shell-border); border-radius: 12px; background: var(--events-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #events-table thead tr.events-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-clear-th, .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-spacer-th, .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-name-th, .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-flavor-th { display: none !important; } .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-sets-th { order: 1; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 10px 0; } .layout-mobile #events-table thead tr.events-filter-row > th.events-filter-effect-th { order: 2; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0; } .layout-mobile #events-table .events-column-filters { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .layout-mobile #events-table .events-mobile-set-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } .layout-mobile #events-table .events-mobile-set-label { flex: 1 1 100%; font-size: var(--font-2xs); font-weight: 600; color: #4ecdc4; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .layout-mobile #events-table .events-mobile-set-select-clear-row { display: grid; grid-template-columns: 8fr 2fr; gap: 8px; align-items: stretch; width: 100%; flex: 1 1 100%; min-width: 0; box-sizing: border-box; } .layout-mobile #events-table .events-mission-set-filter { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; border: 1px solid rgba(78, 205, 196, 0.35); background: rgba(18, 44, 50, 0.98); color: #fff; box-sizing: border-box; } .layout-mobile #events-table thead tr.events-filter-row .header-filter[data-column='game_effect'] { width: 100% !important; max-width: 100% !important; min-height: 44px; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; } .layout-mobile #events-table #clear-events-filters-mobile.clear-filters-btn--events-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin-top: 0; padding: 8px 6px; font-size: var(--font-sm); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; } .layout-mobile #events-table { table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #events-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #events-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #events-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #events-table tbody td:first-child::before { display: none; } .layout-mobile #events-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #events-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #events-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #events-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #events-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #events-table tbody td:nth-child(n + 3) { display: none !important; } .layout-mobile #events-table tbody tr[data-height-locked='true'], .layout-mobile #events-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #events-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #events-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #events-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img-with-nav) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #events-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__flavor { margin-top: 10px; font-size: var(--font-sm); font-style: italic; color: rgba(255, 255, 255, 0.78); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__flavor::before { content: ''; display: block; width: 20%; margin: 0 auto 10px; border-top: 1px solid rgba(78, 205, 196, 0.35); } .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__set-line { margin-top: 10px; font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__set-line::before { content: ''; display: block; width: 20%; margin: 0 auto 10px; border-top: 1px solid rgba(78, 205, 196, 0.35); } /* -------------------------------------------------------------------------- */ /* Universe: Advanced — filter shell + card rows (match Special, layout-mobile) */ /* -------------------------------------------------------------------------- */ /* Beat database-view.css th width:% !important (same rationale as Special). */ .layout-mobile #advanced-universe-table thead { display: block; width: 100%; } .layout-mobile #advanced-universe-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row { --specials-header-shell-bg: rgba(10, 28, 32, 0.96); --specials-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--specials-header-shell-border); border-radius: 12px; background: var(--specials-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-spacer-th, .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-opd-th, .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-clear-th { display: none !important; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-character-th, .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-effect-th { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-character-th { order: 1; padding: 0 0 10px 0; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row > th.advanced-filter-effect-th { order: 2; padding: 0 0 12px 0; } .layout-mobile #advanced-universe-table thead tr.advanced-universe-filter-row .header-filter { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- */ /* Locations — filter shell (layout-mobile) */ /* -------------------------------------------------------------------------- */ .layout-mobile #locations-table thead { display: block; width: 100%; } .layout-mobile #locations-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .layout-mobile #locations-table thead tr.locations-filter-row { --specials-header-shell-bg: rgba(10, 28, 32, 0.96); --specials-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--specials-header-shell-border); border-radius: 12px; background: var(--specials-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } .layout-mobile #locations-table thead tr.locations-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #locations-table thead tr.locations-filter-row > th.locations-filter-clear-th, .layout-mobile #locations-table thead tr.locations-filter-row > th.locations-filter-spacer-th { display: none !important; } .layout-mobile #locations-table thead tr.locations-filter-row > th.locations-filter-threat-th { order: 1; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 10px 0; } .layout-mobile #locations-table thead tr.locations-filter-row > th.locations-filter-ability-th { order: 2; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 10px 0; } .layout-mobile #locations-table thead tr.locations-filter-row > th.locations-filter-name-th { order: 3; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0; } .layout-mobile #locations-table .locations-threat-inputs-and-clear { display: flex; flex-direction: row; align-items: stretch; gap: 8px; width: 100%; box-sizing: border-box; } .layout-mobile #locations-table .locations-threat-inputs-and-clear #location-threat-min { flex: 4 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #locations-table .locations-threat-inputs-and-clear #location-threat-max { flex: 4 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #locations-table #clear-location-filters-mobile.clear-filters-btn--locations-mobile-inline { display: inline-flex; align-items: center; justify-content: center; flex: 2 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; } .layout-mobile #locations-table thead tr.locations-filter-row .header-filter { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; } .layout-mobile #advanced-universe-table { --dbv-mobile-special-portrait-img: min(100%, 870px); --dbv-mobile-special-tile-img-max: 100%; --dbv-mobile-special-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #advanced-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #advanced-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #advanced-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #advanced-universe-table tbody td:first-child::before { display: none; } .layout-mobile #advanced-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #advanced-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #advanced-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #advanced-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #advanced-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #advanced-universe-table tbody td:nth-child(n + 3) { display: none !important; } .layout-mobile #advanced-universe-table tbody tr[data-height-locked='true'], .layout-mobile #advanced-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } .layout-mobile #advanced-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #advanced-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-special-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #advanced-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #advanced-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-special-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-special-tile-img-landscape-max-h) !important; object-fit: contain !important; } .layout-mobile #advanced-universe-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } .layout-mobile #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__character { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } .layout-mobile #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* -------------------------------------------------------------------------- */ /* Characters tab — card rows (M2c); tbody only; filters stay in thead */ /* Character art, caption, action grid, hidden stats: same test file as --dbv-mobile-tile-* above. */ /* -------------------------------------------------------------------------- */ .layout-mobile #characters-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Filter header: one unified card (mobile); internal dividers only; file-folder stat block inside */ .layout-mobile #characters-table thead tr.characters-filter-row { --chars-header-shell-bg: rgba(10, 28, 32, 0.96); --chars-header-shell-border: rgba(78, 205, 196, 0.38); display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; margin: 0 0 4px; border: 1px solid var(--chars-header-shell-border); border-radius: 12px; background: var(--chars-header-shell-bg); padding: 12px; box-sizing: border-box; } .layout-mobile #characters-table thead tr.characters-filter-row > th { display: block; min-width: 0; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-spacer-th { display: none !important; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-stat-filters-th { grid-column: 1 / -1; grid-row: 1; width: 100%; padding-bottom: 14px; } /* Desktop clear lives in first th; DOM keeps #clear-filters-mobile in stat row (hidden on MV — end-of-file DBV block) */ .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-clear-th { display: none !important; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-abilities-th { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; padding: 0 0 14px 0; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-name-th { grid-column: 1 / -1; grid-row: 3; width: 100%; padding: 0; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-name-th .header-filter { width: 100%; max-width: 100%; } /* Abilities cell: search only — inherent-ability checkboxes hidden on mobile (DOM kept for filter/clear) */ .layout-mobile #characters-table .inherent-abilities-filters { display: block; } .layout-mobile #characters-table .inherent-abilities-filters .toggle-label { display: none !important; } .layout-mobile #characters-table .inherent-abilities-filters .header-filter { width: 100%; max-width: 100%; } .layout-mobile #characters-table thead tr.characters-filter-row > th.characters-filter-abilities-th .header-filter { width: 100%; max-width: 100%; box-sizing: border-box; } /* Stat row: = / Min / Max (flex 3) + Clear (flex 1) — same row, quarter-width clear vs inputs */ .layout-mobile #characters-table .characters-stat-inputs-and-clear { display: flex; flex-direction: row; align-items: stretch; gap: 8px; width: 100%; box-sizing: border-box; background: var(--chars-stat-content-bg); border-radius: 0 0 8px 8px; padding: 10px 10px 12px; margin: 0; } .layout-mobile #characters-table .characters-stat-panels { flex: 3 1 0; min-width: 0; width: auto; margin: 0; padding: 0; box-sizing: border-box; background: transparent; border-radius: 0; border-top: none; } .layout-mobile #characters-table .characters-filter-clear-inline { display: flex; flex: 1 1 0; min-width: 0; align-items: stretch; align-self: stretch; } .layout-mobile #characters-table .characters-filter-clear-inline .clear-filters-btn { width: 100%; max-width: none; flex: 1 1 auto; min-height: 44px; align-self: stretch; white-space: normal; line-height: 1.2; padding-left: 8px; padding-right: 8px; } /* Stat filters: file-folder tabs (no outer box — unified header shell provides border) */ .layout-mobile #characters-table .characters-stat-filters { --chars-stat-rail-bg: rgba(0, 0, 0, 0.38); --chars-stat-content-bg: rgba(18, 44, 50, 0.98); --chars-stat-divider: rgba(78, 205, 196, 0.26); display: flex; flex-direction: column; width: 100%; border: none; border-radius: 0; overflow: visible; box-sizing: border-box; background: transparent; } .layout-mobile #characters-table .characters-stat-tablist { display: flex; flex-direction: row; width: 100%; margin: 0; padding: 0; border: none; border-radius: 8px 8px 0 0; overflow: visible; background: var(--chars-stat-rail-bg); border-bottom: 1px solid var(--chars-stat-divider); box-sizing: border-box; } .layout-mobile #characters-table .characters-stat-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 4px 10px; margin: 0; border: none; border-right: 1px solid var(--chars-stat-divider); background: transparent; color: inherit; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; opacity: 0.82; transition: opacity 0.15s ease, background 0.15s ease; } .layout-mobile #characters-table .characters-stat-tab:last-child { border-right: none; } /* Inactive: stay on the “folder rail”, separated from the sheet below */ .layout-mobile #characters-table .characters-stat-tab[aria-selected="false"] { border-radius: 0; } .layout-mobile #characters-table .characters-stat-tab[aria-selected="false"]:hover, .layout-mobile #characters-table .characters-stat-tab[aria-selected="false"]:focus-visible { opacity: 1; background: rgba(78, 205, 196, 0.06); } .layout-mobile #characters-table .characters-stat-tab[aria-selected="false"]:focus-visible { outline: 2px solid rgba(78, 205, 196, 0.5); outline-offset: -2px; } /* Active: same plane as filter row — covers rail bottom border (file-folder tab) */ .layout-mobile #characters-table .characters-stat-tab[aria-selected="true"] { opacity: 1; z-index: 3; background: var(--chars-stat-content-bg); border-bottom: 2px solid var(--chars-stat-content-bg); margin-bottom: -2px; padding-bottom: 11px; border-radius: 8px 8px 0 0; box-shadow: 0 1px 0 0 var(--chars-stat-content-bg); } /* Align active tab top corners with tablist inner radius */ .layout-mobile #characters-table .characters-stat-tab[aria-selected="true"]:first-child { border-top-left-radius: 7px; } .layout-mobile #characters-table .characters-stat-tab[aria-selected="true"]:last-child { border-top-right-radius: 7px; } .layout-mobile #characters-table .characters-stat-tab .column-header-icon { width: 22px; height: 22px; object-fit: contain; } .layout-mobile #characters-table .characters-stat-panels .characters-stat-panel:not(.is-active) { display: none !important; } .layout-mobile #characters-table .characters-stat-panels .characters-stat-panel.is-active { display: flex !important; } /* Active stat row: = / Min / Max horizontal (same as previous per-column mobile rules) */ .layout-mobile #characters-table thead .characters-stat-panels .column-filters { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; } .layout-mobile #characters-table thead .characters-stat-panels .column-filters .filter-input.equals, .layout-mobile #characters-table thead .characters-stat-panels .column-filters .filter-input.min, .layout-mobile #characters-table thead .characters-stat-panels .column-filters .filter-input.max { flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .layout-mobile #characters-table { table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #characters-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #characters-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #characters-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #characters-table tbody td:first-child::before { display: none; } .layout-mobile #characters-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } /* Characters row actions: +Deck full width; -Collection | +Collection (same pattern as All tab). */ .layout-mobile #characters-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #characters-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #characters-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #characters-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } /* Stats columns (name, energy, combat, …) hidden on mobile — card art + actions only. */ .layout-mobile #characters-table tbody td:nth-child(n+3) { display: none !important; } /* Character art: same max dimensions as All tab on mobile (see --dbv-mobile-tile-* on #database-view). */ .layout-mobile #characters-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } /* * Characters MV row art: alternate vs primary must share one visual frame. * With-nav: flex-grow between arrows (DTV parity) — avoids tiny portrait/alternate imgs on flex: 0 0 auto + width var. * Without nav: full row width up to cap. Single max-height for portrait + landscape (horizontal-card class unused for sizing). */ .layout-mobile #characters-table tbody td:first-child .card-image-container.card-image-container--with-nav img { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: min(95cqw, 560px) !important; object-fit: contain !important; } .layout-mobile #characters-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img { flex: 0 1 auto !important; width: min(100%, 580px) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: min(95cqw, 560px) !important; object-fit: contain !important; } /* -------------------------------------------------------------------------- */ /* Locations tab — card rows (layout-mobile); mirrors Characters tbody */ /* -------------------------------------------------------------------------- */ .layout-mobile #locations-table { table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } .layout-mobile #locations-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } .layout-mobile #locations-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } .layout-mobile #locations-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } .layout-mobile #locations-table tbody td:first-child::before { display: none; } .layout-mobile #locations-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } .layout-mobile #locations-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } .layout-mobile #locations-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } .layout-mobile #locations-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #locations-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } .layout-mobile #locations-table tbody td:nth-child(n+3) { display: none !important; } .layout-mobile #locations-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .layout-mobile #locations-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #locations-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img-with-nav) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } .layout-mobile #locations-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-tile-img-landscape-max-h) !important; object-fit: contain !important; } /* Character / Special / Locations / Advanced Universe mobile caption (hidden on desktop via rule below). */ #characters-table .characters-mobile-card-caption, #special-cards-table .characters-mobile-card-caption, #locations-table .characters-mobile-card-caption, #aspects-table .characters-mobile-card-caption, #events-table .characters-mobile-card-caption, #advanced-universe-table .characters-mobile-card-caption { display: none; } .layout-mobile #characters-table tbody td:first-child .characters-mobile-card-caption, .layout-mobile #locations-table tbody td:first-child .characters-mobile-card-caption, .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(444px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } .layout-mobile #characters-table tbody td:first-child .characters-mobile-card-caption__name, .layout-mobile #locations-table tbody td:first-child .characters-mobile-card-caption__name, .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } .layout-mobile #characters-table tbody td:first-child .characters-mobile-card-caption__set, .layout-mobile #locations-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.88); line-height: 1.3; } /* Events: mission set one step larger than location set line for readability */ .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.88); line-height: 1.3; } .layout-mobile #characters-table tbody td:first-child .characters-mobile-card-caption__ability, .layout-mobile #locations-table tbody td:first-child .characters-mobile-card-caption__ability, .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__game-effect { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Events: breathing room between mission set and game effect (half a line at game-effect line-height) */ .layout-mobile #events-table tbody td:first-child .characters-mobile-card-caption__game-effect { margin-top: calc(0.5 * 1.35em); font-size: var(--font-sm); } .layout-mobile #characters-table tbody .card-nav-arrow, .layout-mobile #special-cards-table tbody .card-nav-arrow, .layout-mobile #locations-table tbody .card-nav-arrow { min-width: 44px; min-height: 44px; padding: 8px; box-sizing: border-box; } /* -------------------------------------------------------------------------- */ /* Collection */ /* -------------------------------------------------------------------------- */ .layout-mobile .collection-checkbox, .layout-mobile .collection-view input[type="checkbox"] { min-width: 44px; min-height: 44px; width: auto; height: auto; transform: scale(1.15); transform-origin: center; } .layout-mobile .collection-card-row, .layout-mobile .collection-grid .collection-item { padding: 8px 4px; } /* -------------------------------------------------------------------------- */ /* Deck list (deck builder home tiles) */ /* -------------------------------------------------------------------------- */ .layout-mobile .deck-list { grid-template-columns: 1fr !important; gap: 12px !important; } .layout-mobile .deck-card.deck-tile { max-width: 100%; } /* ── Deck tile MV: hero-banner + avatar row + stats strip ─────────────────── */ /* Override the 2-column desktop grid with a stacked flex layout */ .layout-mobile .deck-card.deck-tile.deck-tile--compact { display: flex !important; flex-direction: column; padding: 0; min-height: auto; overflow: hidden; cursor: pointer; } /* Hero section: title at top, character cards fill below */ .layout-mobile .deck-tile-main { min-height: 160px; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; position: relative; z-index: 1; } /* Top-heavy gradient: title sits at top, card art below should be unobscured */ .layout-mobile .deck-card.deck-tile.deck-tile--compact.deck-tile--has-bg::after { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.05) 100% ); } /* Title: reserve space for legality + ⋯ (absolute top-right on MV) */ .layout-mobile .deck-tile-header { padding: 10px 120px 6px 14px; } /* Title: at top of hero, strong shadow for readability against bright art */ .layout-mobile .deck-tile-title { font-size: var(--font-xl); text-shadow: 0 2px 12px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.8); margin-bottom: 2px; } /* Deck selection tiles: mobile-scoped typography overrides (desktop unchanged) */ .layout-mobile .deck-tile-preview-card--empty { font-size: var(--font-3xs); } .layout-mobile .deck-tile-side-label { font-size: var(--font-xs); } .layout-mobile .deck-tile-side-value { font-size: var(--font-md); } .layout-mobile .deck-tile-menu-button { font-size: var(--icon-md); } .layout-mobile .deck-tile-menu-item { font-size: var(--font-sm); } /* Character cards: 2x2 grid on mobile so each card shows its full art */ .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-tile-previews { display: block; /* block so .deck-tile-characters takes full width naturally */ width: 100%; /* Air below the absolute legality + ⋯ cluster; air above the tile bottom border */ padding: 8px 0 10px; } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-tile-characters { width: 100%; } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-display { flex: 1 1 auto; width: 100%; height: auto; padding: 0; /* override base padding: 0 0 0 5px */ } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-cards-row { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 8px; width: 100%; height: auto; /* was 180px flex row */ overflow: visible; /* was hidden */ align-items: stretch; justify-content: stretch; perspective: none; /* Match .deck-tile-header horizontal inset */ padding-left: 14px; padding-right: 14px; box-sizing: border-box; } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display { width: 100% !important; min-width: 0; height: auto; /* Matches PRESET_CHARACTER (380x280) so the full thumbnail fits with no crop */ aspect-ratio: 380 / 280; margin: 0; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 10px; border-width: 1px; border-color: rgba(78, 205, 196, 0.2); transition: none; cursor: default; -webkit-tap-highlight-color: transparent; } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display.empty { display: flex; align-items: center; justify-content: center; } /* Remove all 3D rotations — flat fill on mobile */ .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:nth-child(1), .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:nth-child(2), .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:nth-child(3), .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:nth-child(4) { transform: none; } .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:first-child { margin: 0; } /* MV: no hover / touch “lift” — desktop row hover rules must not apply */ .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-card-display:hover, .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-cards-row:hover .deck-character-card-display, .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-character-cards-row:hover .deck-character-card-display:not(:hover) { transform: none; z-index: 1; opacity: 1; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); border-color: rgba(78, 205, 196, 0.2); } /* Hide location and mission preview images — not enough room on mobile */ .layout-mobile .deck-tile-location, .layout-mobile .deck-tile-mission { display: none; } /* MV: hide stats panel; float legality + ⋯ above the hero (sibling of .deck-tile-main) */ .layout-mobile .deck-card.deck-tile.deck-tile--compact .deck-tile-side { display: flex !important; flex-direction: column; align-items: flex-end; position: absolute; top: 6px; right: 8px; left: auto; width: auto; max-width: min(280px, calc(100% - 24px)); z-index: 6; gap: 0; pointer-events: auto; } .layout-mobile .deck-tile-side-meta { display: none !important; } .layout-mobile .deck-tile-top-actions { width: auto; gap: 6px; } /* Compact ⋯ target still meets ~44px touch area */ .layout-mobile .deck-tile-menu-button { width: 44px; height: 44px; } /* -------------------------------------------------------------------------- */ /* Global nav MV: grid (logo | 1fr tabs | user); tabs centered in middle column */ /* (+ Deck hidden — use user menu “+ Create Deck”) */ /* Overrides globalNav.css @media (max-width: 900px/600px) column rules */ /* -------------------------------------------------------------------------- */ /* Three-column grid: logo | centered tabs | user — cluster uses display:contents so .header-center / .header-right are grid items */ .layout-mobile .unified-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 6px; min-height: 56px; height: auto; padding: 6px 8px; margin-bottom: 12px; box-sizing: border-box; text-align: start; } .layout-mobile .header-nav-cluster { display: contents; } .layout-mobile .header-center { grid-column: 2; min-width: 0; position: static; left: auto; transform: none; display: flex; justify-content: center; align-items: center; } .layout-mobile .header-app-actions { display: flex; justify-content: center; width: 100%; max-width: 100%; min-width: 0; } .layout-mobile .header-nav-cluster .app-tabs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: stretch; gap: 6px; width: 100%; max-width: 100%; min-width: 0; /* Slight inset; account icon-only on the right frees width for tabs */ padding-left: 2%; padding-right: 2%; box-sizing: border-box; } .layout-mobile .header-right { grid-column: 3; justify-self: end; display: flex; flex-direction: row; flex-shrink: 0; align-items: center; gap: 4px; min-width: 0; } .layout-mobile .header-left { grid-column: 1; justify-self: start; flex-shrink: 0; max-width: 105px; width: auto; display: flex; align-items: center; justify-content: flex-start; } .layout-mobile .header-logo { margin-top: 0; max-height: 52px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } .layout-mobile #newDeckBtn { display: none !important; } /* Logged-in: three equal flex tabs (fluid token; min-height/padding unchanged) */ .layout-mobile .header-nav-cluster .app-tab-button, .layout-mobile .header-nav-cluster .new-deck-btn { flex: 1 1 0; min-width: 0; width: auto; min-height: 35px; margin: 0; padding: 6px 8px; box-sizing: border-box; font-size: var(--font-xs); line-height: 1.15; font-weight: 600; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* Logged-out: Collection hidden — Database | Deck Builder (wider) */ .layout-mobile .header-nav-cluster.collection-tab-hidden #databaseViewBtn { flex: 1 1 0; } .layout-mobile .header-nav-cluster.collection-tab-hidden #deckBuilderBtn { flex: 2 1 0; } .layout-mobile #userMenu { flex-shrink: 0; min-width: 0; max-width: none; } .layout-mobile .user-menu { width: auto; max-width: 100%; } /* Icon-only account control — frees center column for Database / Decks / Collection */ .layout-mobile .user-menu-toggle { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; max-width: none; padding: 0; box-sizing: border-box; } .layout-mobile .user-menu-dropdown-header .user-greeting-copy { font-size: var(--font-sm); justify-content: flex-end; text-align: right; } .layout-mobile .user-menu-dropdown-header #currentUsername { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; } /* Do not set display here — `.layout-mobile` beats `.user-menu-dropdown` specificity and would override `display: none`, leaving the panel always visible. Grid only when `.show`. */ .layout-mobile .user-menu-dropdown { left: auto; right: 0; width: max-content; min-width: 0; max-width: min(260px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px; align-items: stretch; } .layout-mobile .user-menu-dropdown.show { display: flex; flex-direction: column; align-items: stretch; } /* Same width for every action (grid column = widest label) */ .layout-mobile .user-menu-dropdown .user-menu-item { display: block; white-space: nowrap; width: 100%; max-width: 100%; padding: 7px 12px; margin: 5px 0; font-size: var(--font-sm); line-height: 1.2; min-height: 0; box-sizing: border-box; } .layout-mobile .user-menu-dropdown-items { display: grid; grid-template-columns: 1fr; width: 100%; min-width: 0; justify-items: stretch; } /* Create-user form (admin) inside the global nav dropdown — fluid tokens on mobile */ .layout-mobile .create-user-dropdown label { font-size: var(--font-xs); } .layout-mobile .create-user-dropdown input { font-size: var(--font-sm); } .layout-mobile .create-user-dropdown .save-btn, .layout-mobile .create-user-dropdown .cancel-btn { font-size: var(--font-xs); } /* -------------------------------------------------------------------------- */ /* Global shell / container */ /* -------------------------------------------------------------------------- */ .layout-mobile .container, .layout-mobile #mainContainer { max-width: 100% !important; padding-left: 8px; padding-right: 8px; } .layout-mobile .modal-content { max-width: calc(100vw - 24px) !important; margin: 12px auto !important; } /* Image preview lightbox: shrink-wrap teal frame; scale art to viewport (full-res src from openModal). */ .layout-mobile #imageModal .modal-content { width: fit-content !important; width: -moz-fit-content !important; max-width: calc(100vw - 20px) !important; margin: 8px auto !important; } .layout-mobile #imageModal #modalImage { max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 160px) !important; max-height: calc(100dvh - 160px) !important; width: auto !important; height: auto !important; object-fit: contain !important; } .layout-mobile #imageModal #modalCaption { width: auto !important; max-width: calc(100vw - 32px) !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } /* DBV Special (layout-mobile): larger hover preview (~1.5× portrait caps), tighter padding */ .layout-mobile .card-hover-modal[data-card-type='special'] { padding: 6px; } .layout-mobile .card-hover-modal[data-card-type='special'] .card-hover-image, .layout-mobile .card-hover-modal[data-card-type='special'] .card-hover-image-full { max-width: min(518px, calc(100vw - 24px)); max-height: min(725px, calc(100dvh - 100px)); } /* DBV Special lightbox: fit modal frame width first so portrait art is not letterboxed/cropped oddly. */ .layout-mobile #imageModal[data-open-context='special'] #modalImage { width: min(600px, calc(100vw - 32px)) !important; max-width: min(600px, calc(100vw - 32px)) !important; height: auto !important; max-height: min(1350px, calc(100dvh - 120px)) !important; object-fit: contain !important; } .layout-mobile #imageModal[data-open-context='special'] #modalCaption { max-width: min(600px, calc(100vw - 32px)) !important; } /* * Special Cards — same tbody/art/hover/lightbox as .layout-mobile rules above, but gated by viewport only. * When preferDesktopLayout forces layout-desktop on a phone, .layout-mobile selectors never match; without this * block the list stays on the 120px desktop path inside a full-width card row. */ @media (max-width: 900px) { #database-view #special-cards-table { --dbv-mobile-special-portrait-img: min(100%, 870px); --dbv-mobile-special-tile-img-max: 100%; --dbv-mobile-special-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #special-cards-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #special-cards-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #special-cards-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #special-cards-table tbody td:first-child::before { display: none; } #database-view #special-cards-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #special-cards-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #special-cards-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #special-cards-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #special-cards-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #special-cards-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #special-cards-table tbody tr[data-height-locked='true'], #database-view #special-cards-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #special-cards-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #special-cards-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-special-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #special-cards-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #special-cards-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-special-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-special-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.88); line-height: 1.3; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__character { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__opd, #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__cataclysm, #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__assist, #database-view #special-cards-table tbody td:first-child .characters-mobile-card-caption__ambush { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } /* Aspects — viewport mirror (narrow + layout-desktop), same rationale as Special */ #database-view #aspects-table { --dbv-mobile-aspects-portrait-img: min(100%, 870px); --dbv-mobile-aspects-tile-img-max: 100%; --dbv-mobile-aspects-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #aspects-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #aspects-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #aspects-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #aspects-table tbody td:first-child::before { display: none; } #database-view #aspects-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #aspects-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #aspects-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #aspects-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #aspects-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #aspects-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #aspects-table tbody tr[data-height-locked='true'], #database-view #aspects-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #aspects-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #aspects-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-aspects-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #aspects-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #aspects-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-aspects-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-aspects-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption__location { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption__fortification { font-size: var(--font-xs); font-weight: 700; color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #aspects-table tbody td:first-child .characters-mobile-card-caption__opd { font-size: var(--font-xs); font-weight: 700; color: rgba(255, 255, 255, 0.78); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } /* Missions — viewport mirror (narrow + layout-desktop) */ #database-view #missions-table thead { display: block; width: 100%; } #database-view #missions-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #missions-table thead tr.missions-filter-row { --missions-header-shell-bg: rgba(10, 28, 32, 0.96); --missions-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--missions-header-shell-border); border-radius: 12px; background: var(--missions-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #missions-table thead tr.missions-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #missions-table thead tr.missions-filter-row > th.missions-filter-leading-th, #database-view #missions-table thead tr.missions-filter-row > th.missions-filter-card-name-th { display: none !important; } #database-view #missions-table thead tr.missions-filter-row > th.missions-filter-sets-th { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #missions-table .missions-column-filters { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #database-view #missions-table .missions-mobile-set-row, #database-view #missions-table .missions-mobile-card-name-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #missions-table .missions-mobile-card-name-row { margin-top: calc(0.5 * 1.2 * 1rem); } #database-view #missions-table .missions-mobile-set-label { flex: 1 1 100%; font-size: var(--font-2xs); font-weight: 600; color: #4ecdc4; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } #database-view #missions-table .missions-mobile-set-row > .missions-mobile-set-label { display: block; } #database-view #missions-table .missions-mission-set-filter, #database-view #missions-table .missions-mobile-card-name-filter { flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; border: 1px solid rgba(78, 205, 196, 0.35); background: rgba(18, 44, 50, 0.98); color: #fff; box-sizing: border-box; } #database-view #missions-table .missions-mobile-card-name-filter::placeholder { color: rgba(255, 255, 255, 0.45); } #database-view #missions-table { --dbv-mobile-missions-portrait-img: min(100%, 870px); --dbv-mobile-missions-tile-img-max: 100%; --dbv-mobile-missions-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #missions-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #missions-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #missions-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #missions-table tbody td:first-child::before { display: none; } #database-view #missions-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #missions-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #missions-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #missions-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #missions-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #missions-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #missions-table tbody tr[data-height-locked='true'], #database-view #missions-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #missions-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #missions-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-missions-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #missions-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #missions-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-missions-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-missions-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #missions-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #missions-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #missions-table tbody td:first-child .characters-mobile-card-caption__mission-set { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #missions-table tbody td:first-child .characters-mobile-card-caption__set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Teamwork — viewport mirror (narrow + layout-desktop) */ #database-view #teamwork-table thead { display: block; width: 100%; } #database-view #teamwork-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #teamwork-table thead tr.teamwork-desktop-filter-row { display: none !important; } #database-view #teamwork-table thead tr.teamwork-filter-row { --teamwork-header-shell-bg: rgba(10, 28, 32, 0.96); --teamwork-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--teamwork-header-shell-border); border-radius: 12px; background: var(--teamwork-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #teamwork-table thead tr.teamwork-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-clear-th, #database-view #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-spacer-th { display: none !important; } #database-view #teamwork-table thead tr.teamwork-filter-row > th.teamwork-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #teamwork-table .teamwork-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #teamwork-table .teamwork-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } #database-view #teamwork-table .teamwork-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } #database-view #teamwork-table .teamwork-to-use-power-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } #database-view #teamwork-table .teamwork-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #database-view #teamwork-table .teamwork-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #database-view #teamwork-table .teamwork-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } #database-view #teamwork-table .teamwork-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } #database-view #teamwork-table #clear-teamwork-filters-mobile-inline.clear-filters-btn--teamwork-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } #database-view #teamwork-table .teamwork-filter-value-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } #database-view #teamwork-table .teamwork-filter-value-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } #database-view #teamwork-table .teamwork-value-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } #database-view #teamwork-table .teamwork-value-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #teamwork-table .teamwork-value-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #teamwork-table .teamwork-value-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #teamwork-table .teamwork-to-use-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } #database-view #teamwork-table .teamwork-to-use-value-clear-svg { width: 24px; height: 24px; } #database-view #teamwork-table { --dbv-mobile-teamwork-portrait-img: min(100%, 870px); --dbv-mobile-teamwork-tile-img-max: 100%; --dbv-mobile-teamwork-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #teamwork-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #teamwork-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #teamwork-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #teamwork-table tbody td:first-child::before { display: none; } #database-view #teamwork-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #teamwork-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #teamwork-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #teamwork-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #teamwork-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #teamwork-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #teamwork-table tbody tr[data-height-locked='true'], #database-view #teamwork-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #teamwork-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #teamwork-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-teamwork-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #teamwork-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #teamwork-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-teamwork-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-teamwork-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption--teamwork { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-line1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-sep { color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-line2 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-sm); line-height: 1.35; color: rgba(255, 255, 255, 0.88); max-width: 100%; } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-bonuses { font-weight: 600; color: rgba(255, 255, 255, 0.92); } #database-view #teamwork-table tbody td:first-child .characters-mobile-card-caption__teamwork-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Ally — viewport mirror (narrow + layout-desktop) */ #database-view #ally-universe-table thead { display: block; width: 100%; } #database-view #ally-universe-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #ally-universe-table thead tr.ally-desktop-filter-row { display: none !important; } #database-view #ally-universe-table thead tr.ally-filter-row { --ally-header-shell-bg: rgba(10, 28, 32, 0.96); --ally-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--ally-header-shell-border); border-radius: 12px; background: var(--ally-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #ally-universe-table thead tr.ally-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #ally-universe-table thead tr.ally-filter-row > th.ally-filter-clear-th, #database-view #ally-universe-table thead tr.ally-filter-row > th.ally-filter-spacer-th { display: none !important; } #database-view #ally-universe-table thead tr.ally-filter-row > th.ally-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #ally-universe-table .ally-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #ally-universe-table .ally-mobile-filter-shell > .ally-filter-icon-row:not(.ally-filter-attack-icon-row) { order: 1; } #database-view #ally-universe-table .ally-mobile-name-row { order: 2; width: 100%; } #database-view #ally-universe-table .ally-mobile-filter-shell > .ally-filter-attack-icon-row { order: 3; } #database-view #ally-universe-table .ally-mobile-name-row .header-filter { width: 100%; box-sizing: border-box; } #database-view #ally-universe-table .ally-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } #database-view #ally-universe-table .ally-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } #database-view #ally-universe-table .ally-stat-type-to-use-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } #database-view #ally-universe-table .ally-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #database-view #ally-universe-table .ally-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #database-view #ally-universe-table .ally-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } #database-view #ally-universe-table .ally-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } #database-view #ally-universe-table #clear-ally-filters-mobile-inline.clear-filters-btn--ally-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } #database-view #ally-universe-table { --dbv-mobile-ally-portrait-img: min(100%, 870px); --dbv-mobile-ally-tile-img-max: 100%; --dbv-mobile-ally-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #ally-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #ally-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #ally-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #ally-universe-table tbody td:first-child::before { display: none; } #database-view #ally-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #ally-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #ally-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #ally-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #ally-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #ally-universe-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #ally-universe-table tbody tr[data-height-locked='true'], #database-view #ally-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #ally-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #ally-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-ally-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #ally-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #ally-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-ally-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-ally-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption--ally { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-stat-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-stat-sep { color: #fff; flex: 0 0 auto; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-text { font-size: var(--font-sm); font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.9); max-width: 100%; white-space: normal; word-break: break-word; } #database-view #ally-universe-table tbody td:first-child .characters-mobile-card-caption__ally-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Training — viewport mirror (narrow + layout-desktop) */ #database-view #training-table thead { display: block; width: 100%; } #database-view #training-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #training-table thead tr.training-desktop-filter-row { display: none !important; } #database-view #training-table thead tr.training-filter-row { --training-header-shell-bg: rgba(10, 28, 32, 0.96); --training-header-shell-border: rgba(78, 205, 196, 0.38); display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--training-header-shell-border); border-radius: 12px; background: var(--training-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #training-table thead tr.training-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #training-table thead tr.training-filter-row > th.training-filter-clear-th, #database-view #training-table thead tr.training-filter-row > th.training-filter-spacer-th { display: none !important; } #database-view #training-table thead tr.training-filter-row > th.training-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #training-table .training-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #training-table .training-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } #database-view #training-table .training-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } #database-view #training-table .training-stat-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } #database-view #training-table .training-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #database-view #training-table .training-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #database-view #training-table .training-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } #database-view #training-table .training-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } #database-view #training-table #clear-training-filters-mobile-inline.clear-filters-btn--training-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } #database-view #training-table { --dbv-mobile-training-portrait-img: min(100%, 870px); --dbv-mobile-training-tile-img-max: 100%; --dbv-mobile-training-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #training-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #training-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #training-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #training-table tbody td:first-child::before { display: none; } #database-view #training-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #training-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #training-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #training-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #training-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #training-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #training-table tbody tr[data-height-locked='true'], #database-view #training-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #training-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #training-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-training-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #training-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #training-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-training-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-training-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption--training { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-name { font-weight: 700; font-size: var(--font-lg); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-type-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-value-bonus { margin: 0 2px; } #database-view #training-table tbody td:first-child .characters-mobile-card-caption__training-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Basic Universe — viewport mirror (narrow + layout-desktop) */ /* Basic Universe tab — mobile filters (type + To Use + Bonus) + card rows */ /* Spec: docs/current/MOBILE_DBV_TD_IMG_MAX_HEIGHT_FIX.md */ /* -------------------------------------------------------------------------- */ #database-view #basic-universe-table thead { display: block; width: 100%; } #database-view #basic-universe-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #basic-universe-table thead tr.basic-universe-desktop-filter-row { display: none !important; } #database-view #basic-universe-table thead tr.basic-universe-filter-row { --basic-universe-header-shell-bg: rgba(10, 28, 32, 0.96); --basic-universe-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--basic-universe-header-shell-border); border-radius: 12px; background: var(--basic-universe-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #basic-universe-table thead tr.basic-universe-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-clear-th, #database-view #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-spacer-th { display: none !important; } #database-view #basic-universe-table thead tr.basic-universe-filter-row > th.basic-universe-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #basic-universe-table .basic-universe-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } #database-view #basic-universe-table .basic-universe-stat-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } #database-view #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #database-view #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #database-view #basic-universe-table .basic-universe-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } #database-view #basic-universe-table .basic-universe-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } #database-view #basic-universe-table #clear-basic-universe-filters-mobile-inline.clear-filters-btn--basic-universe-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } #database-view #basic-universe-table .basic-universe-filter-to-use-shell, #database-view #basic-universe-table .basic-universe-filter-bonus-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } #database-view #basic-universe-table .basic-universe-filter-to-use-shell .special-value-filters-inner, #database-view #basic-universe-table .basic-universe-filter-bonus-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-filters-inner, #database-view #basic-universe-table .basic-universe-bonus-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.equals, #database-view #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.min, #database-view #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-filters-inner .filter-input.max, #database-view #basic-universe-table .basic-universe-bonus-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-value-clear-btn, #database-view #basic-universe-table .basic-universe-bonus-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } #database-view #basic-universe-table .basic-universe-to-use-value-clear-btn:hover, #database-view #basic-universe-table .basic-universe-bonus-value-clear-btn:hover { color: #4ecdc4; } #database-view #basic-universe-table .basic-universe-to-use-value-clear-svg, #database-view #basic-universe-table .basic-universe-bonus-value-clear-svg { width: 24px; height: 24px; } #database-view #basic-universe-table { --dbv-mobile-basic-universe-portrait-img: min(100%, 870px); --dbv-mobile-basic-universe-tile-img-max: 100%; --dbv-mobile-basic-universe-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #basic-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #basic-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #basic-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #basic-universe-table tbody td:first-child::before { display: none; } #database-view #basic-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #basic-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #basic-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #basic-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #basic-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #basic-universe-table tbody td:nth-child(n+3) { display: none !important; } #database-view #basic-universe-table tbody tr[data-height-locked='true'], #database-view #basic-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #basic-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #basic-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-basic-universe-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #basic-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #basic-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-basic-universe-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-basic-universe-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption--basic-universe { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-name { font-weight: 700; font-size: var(--font-lg); color: #fff; line-height: 1.25; max-width: 100%; word-break: break-word; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: var(--font-sm); line-height: 1.35; color: #fff; max-width: 100%; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-stat-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-type { font-weight: 600; color: rgba(255, 255, 255, 0.95); } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-value-bonus { margin: 0 2px; } #database-view #basic-universe-table tbody td:first-child .characters-mobile-card-caption__basic-universe-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Power Cards — viewport mirror (narrow + layout-desktop) */ #database-view #power-cards-table thead { display: block; width: 100%; } #database-view #power-cards-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #power-cards-table thead tr.power-cards-desktop-filter-row { display: none !important; } #database-view #power-cards-table thead tr.power-cards-filter-row { --power-header-shell-bg: rgba(10, 28, 32, 0.96); --power-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--power-header-shell-border); border-radius: 12px; background: var(--power-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #power-cards-table thead tr.power-cards-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-clear-th, #database-view #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-spacer-th { display: none !important; } #database-view #power-cards-table thead tr.power-cards-filter-row > th.power-cards-filter-controls-th { display: block !important; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #database-view #power-cards-table .power-cards-mobile-filter-shell { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #power-cards-table .power-cards-filter-icon-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; gap: 10px; box-sizing: border-box; } #database-view #power-cards-table .power-cards-filter-icon-row .icon-filter-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 0; min-width: 0; width: auto; max-width: none; } #database-view #power-cards-table .power-cards-type-toggles { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 100%; min-width: 0; } #database-view #power-cards-table .power-cards-filter-icon-row .power-type-filter-toggle { flex: 1 1 0; min-width: 0; max-width: 50px; max-height: 50px; aspect-ratio: 1; padding: 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #database-view #power-cards-table .power-cards-filter-icon-row .power-type-filter-toggle img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #database-view #power-cards-table .power-cards-filter-icon-row .power-type-filter-text { font-size: var(--font-3xs); } #database-view #power-cards-table .power-icon-mobile-trailing { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; margin-left: auto; min-width: 0; } #database-view #power-cards-table #clear-power-filters-mobile-inline.clear-filters-btn--power-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(11.5rem, 46vw); min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--font-xs); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; flex: 0 0 auto; } #database-view #power-cards-table .power-cards-filter-value-shell { display: block; width: 100%; box-sizing: border-box; background: rgba(18, 44, 50, 0.98); border-radius: 8px; padding: 10px 12px 12px; margin: 0; } #database-view #power-cards-table .power-cards-filter-value-shell .special-value-filters-inner { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } #database-view #power-cards-table .power-cards-value-filters-inner { display: grid; grid-template-columns: 4fr 85fr 4fr 125fr 4fr 125fr 4fr 45fr 4fr; align-items: center; width: 100%; box-sizing: border-box; } #database-view #power-cards-table .power-cards-value-filters-inner .filter-input.equals { grid-column: 2; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #power-cards-table .power-cards-value-filters-inner .filter-input.min { grid-column: 4; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #power-cards-table .power-cards-value-filters-inner .filter-input.max { grid-column: 6; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } #database-view #power-cards-table .power-value-clear-btn { grid-column: 8; display: inline-flex; justify-content: center; align-items: center; min-width: 0; width: 100%; padding: 4px; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; box-sizing: border-box; } #database-view #power-cards-table .power-value-clear-btn:hover { color: #4ecdc4; } #database-view #power-cards-table .power-value-clear-svg { width: 24px; height: 24px; } #database-view #power-cards-table { --dbv-mobile-power-portrait-img: min(100%, 870px); --dbv-mobile-power-tile-img-max: 100%; --dbv-mobile-power-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #power-cards-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #power-cards-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #power-cards-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #power-cards-table tbody td:first-child::before { display: none; } #database-view #power-cards-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #power-cards-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #power-cards-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #power-cards-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #power-cards-table tbody td:nth-child(n+3) { display: none !important; } #database-view #power-cards-table tbody tr[data-height-locked='true'], #database-view #power-cards-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #power-cards-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #power-cards-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-power-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #power-cards-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #power-cards-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-power-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-power-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #power-cards-table tbody td:first-child .characters-mobile-card-caption--power { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: var(--font-md); line-height: 1.35; color: #fff; max-width: 100%; } #database-view #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line .special-power-type-icon { width: 28px; height: 28px; object-fit: contain; } #database-view #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-type-value-line .special-power-icons-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; } #database-view #power-cards-table tbody td:first-child .characters-mobile-card-caption__power-set-line { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Events — viewport mirror (narrow + layout-desktop) */ #database-view #events-table thead { display: block; width: 100%; } #database-view #events-table thead tr:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #database-view #events-table thead tr.events-filter-row { --events-header-shell-bg: rgba(10, 28, 32, 0.96); --events-header-shell-border: rgba(78, 205, 196, 0.38); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; justify-content: center; width: 100%; max-width: 100%; margin: 0 0 4px; border: 1px solid var(--events-header-shell-border); border-radius: 12px; background: var(--events-header-shell-bg); padding: 12px; box-sizing: border-box; gap: 0; } #database-view #events-table thead tr.events-filter-row > th { display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; } #database-view #events-table thead tr.events-filter-row > th.events-filter-clear-th, #database-view #events-table thead tr.events-filter-row > th.events-filter-spacer-th, #database-view #events-table thead tr.events-filter-row > th.events-filter-name-th, #database-view #events-table thead tr.events-filter-row > th.events-filter-flavor-th { display: none !important; } #database-view #events-table thead tr.events-filter-row > th.events-filter-sets-th { order: 1; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 10px 0; } #database-view #events-table thead tr.events-filter-row > th.events-filter-effect-th { order: 2; flex: 1 1 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0; } #database-view #events-table .events-column-filters { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #database-view #events-table .events-mobile-set-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } #database-view #events-table .events-mobile-set-label { flex: 1 1 100%; font-size: var(--font-2xs); font-weight: 600; color: #4ecdc4; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } #database-view #events-table .events-mobile-set-select-clear-row { display: grid; grid-template-columns: 8fr 2fr; gap: 8px; align-items: stretch; width: 100%; flex: 1 1 100%; min-width: 0; box-sizing: border-box; } #database-view #events-table .events-mission-set-filter { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; border: 1px solid rgba(78, 205, 196, 0.35); background: rgba(18, 44, 50, 0.98); color: #fff; box-sizing: border-box; } #database-view #events-table thead tr.events-filter-row .header-filter[data-column='game_effect'] { width: 100% !important; max-width: 100% !important; min-height: 44px; margin: 0 !important; margin-inline: 0 !important; display: block !important; box-sizing: border-box !important; padding: 8px 10px; font-size: var(--font-sm); line-height: 1.2; border-radius: 8px; } #database-view #events-table #clear-events-filters-mobile.clear-filters-btn--events-mobile-inline { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin-top: 0; padding: 8px 6px; font-size: var(--font-sm); font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; box-sizing: border-box; } #database-view #events-table { table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #events-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #events-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #events-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #events-table tbody td:first-child::before { display: none; } #database-view #events-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #events-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #events-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #events-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #events-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #events-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #events-table tbody tr[data-height-locked='true'], #database-view #events-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #events-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #events-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #events-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img-with-nav) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #events-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(444px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.88); line-height: 1.3; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__game-effect { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; margin-top: calc(0.5 * 1.35em); } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__flavor { margin-top: 10px; font-size: var(--font-sm); font-style: italic; color: rgba(255, 255, 255, 0.78); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__flavor::before { content: ''; display: block; width: 20%; margin: 0 auto 10px; border-top: 1px solid rgba(78, 205, 196, 0.35); } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__set-line { margin-top: 10px; font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #events-table tbody td:first-child .characters-mobile-card-caption__set-line::before { content: ''; display: block; width: 20%; margin: 0 auto 10px; border-top: 1px solid rgba(78, 205, 196, 0.35); } /* Universe: Advanced — viewport mirror (narrow + layout-desktop), same as Special rationale */ #database-view #advanced-universe-table { --dbv-mobile-special-portrait-img: min(100%, 870px); --dbv-mobile-special-tile-img-max: 100%; --dbv-mobile-special-tile-img-landscape-max-h: min(84vw, 720px); table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #advanced-universe-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #advanced-universe-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #advanced-universe-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #advanced-universe-table tbody td:first-child::before { display: none; } #database-view #advanced-universe-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #advanced-universe-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #advanced-universe-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #advanced-universe-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #advanced-universe-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #advanced-universe-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #advanced-universe-table tbody tr[data-height-locked='true'], #database-view #advanced-universe-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #advanced-universe-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #advanced-universe-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-special-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #advanced-universe-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #advanced-universe-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-special-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-special-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #advanced-universe-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(666px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__character { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.85); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #advanced-universe-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } /* Locations — viewport mirror (narrow + layout-desktop); same rationale as Special / UA */ #database-view #locations-table { table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; } #database-view #locations-table tbody tr { display: block; margin-bottom: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-sizing: border-box; } #database-view #locations-table tbody td { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 0; border: none; text-align: right; box-sizing: border-box; word-break: break-word; } #database-view #locations-table tbody td:first-child { flex-direction: column; align-items: center; padding-top: 0; } #database-view #locations-table tbody td:first-child::before { display: none; } #database-view #locations-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: #4ecdc4; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; text-align: left; flex: 0 0 auto; padding-top: 3px; max-width: 45%; } #database-view #locations-table tbody td:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; justify-content: stretch; } #database-view #locations-table tbody td:nth-child(2) .add-to-deck-btn { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; } #database-view #locations-table tbody td:nth-child(2) .remove-from-collection-btn { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #locations-table tbody td:nth-child(2) .add-to-collection-btn { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 100%; margin-top: 0 !important; } #database-view #locations-table tbody td:nth-child(n + 3) { display: none !important; } #database-view #locations-table tbody tr[data-height-locked='true'], #database-view #locations-table tbody td:nth-child(1)[data-height-locked='true'] { overflow: visible !important; } #database-view #locations-table tbody td:first-child .card-image-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } #database-view #locations-table tbody td:first-child .card-image-container:not(.card-image-container--with-nav) img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #locations-table tbody td:first-child .card-image-container.card-image-container--with-nav img:not(.horizontal-card) { flex: 0 0 auto !important; width: var(--dbv-mobile-table-portrait-img-with-nav) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; object-fit: contain !important; } #database-view #locations-table tbody td:first-child .card-image-container img.horizontal-card { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; max-width: var(--dbv-mobile-tile-img-max) !important; height: auto !important; max-height: var(--dbv-mobile-tile-img-landscape-max-h) !important; object-fit: contain !important; } #database-view #locations-table tbody td:first-child .characters-mobile-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; max-width: min(444px, 100%); margin: 10px auto 0; padding: 0 4px; box-sizing: border-box; } #database-view #locations-table tbody td:first-child .characters-mobile-card-caption__name { font-weight: 700; font-size: var(--font-md); color: #fff; line-height: 1.25; } #database-view #locations-table tbody td:first-child .characters-mobile-card-caption__set { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.88); line-height: 1.3; } #database-view #locations-table tbody td:first-child .characters-mobile-card-caption__ability { font-size: var(--font-sm); color: rgba(255, 255, 255, 0.82); line-height: 1.35; max-width: 100%; white-space: normal; word-break: break-word; } #database-view #special-cards-table tbody .card-nav-arrow, #database-view #locations-table tbody .card-nav-arrow { min-width: 44px; min-height: 44px; padding: 8px; box-sizing: border-box; } .card-hover-modal[data-card-type='special'] { padding: 6px; } .card-hover-modal[data-card-type='special'] .card-hover-image, .card-hover-modal[data-card-type='special'] .card-hover-image-full { max-width: min(518px, calc(100vw - 24px)); max-height: min(725px, calc(100dvh - 100px)); } #imageModal[data-open-context='special'] #modalImage { width: min(600px, calc(100vw - 32px)) !important; max-width: min(600px, calc(100vw - 32px)) !important; height: auto !important; max-height: min(1350px, calc(100dvh - 120px)) !important; object-fit: contain !important; } #imageModal[data-open-context='special'] #modalCaption { max-width: min(600px, calc(100vw - 32px)) !important; } } /* -------------------------------------------------------------------------- */ /* DBV MV: hide full-tab "Clear filters" controls (DTV + @media mirror unchanged) */ /* -------------------------------------------------------------------------- */ .layout-mobile #database-view #clear-filters-mobile, .layout-mobile #database-view #clear-aspects-filters-mobile, .layout-mobile #database-view #clear-events-filters-mobile, .layout-mobile #database-view #clear-location-filters-mobile, .layout-mobile #database-view #clear-teamwork-filters-mobile-inline, .layout-mobile #database-view #clear-ally-filters-mobile-inline, .layout-mobile #database-view #clear-training-filters-mobile-inline, .layout-mobile #database-view #clear-basic-universe-filters-mobile-inline, .layout-mobile #database-view #clear-power-filters-mobile-inline { display: none !important; } /* Icon-row trailing slot held only the full-tab clear — collapse on MV */ .layout-mobile #database-view .aspect-icon-mobile-trailing, .layout-mobile #database-view .teamwork-icon-mobile-trailing, .layout-mobile #database-view .ally-icon-mobile-trailing, .layout-mobile #database-view .training-icon-mobile-trailing, .layout-mobile #database-view .basic-universe-icon-mobile-trailing, .layout-mobile #database-view .power-icon-mobile-trailing { display: none !important; } .layout-mobile #database-view #characters-table .characters-filter-clear-inline { display: none !important; } .layout-mobile #database-view #characters-table .characters-stat-panels { flex: 1 1 0; } .layout-mobile #database-view #events-table .events-mobile-set-select-clear-row { grid-template-columns: 1fr; } .layout-mobile #database-view #locations-table .locations-threat-inputs-and-clear #location-threat-min, .layout-mobile #database-view #locations-table .locations-threat-inputs-and-clear #location-threat-max { flex: 1 1 0; } /* Ally MV: second power-type strip was attack-type (same six icons, wrapped grid) — hide; DTV keeps both columns */ .layout-mobile #database-view #ally-universe-table .ally-filter-icon-row.ally-filter-attack-icon-row { display: none !important; } /* Ally MV: icon strip above name search (flex order; DOM order unchanged for DTV / a11y baseline) */ .layout-mobile #database-view #ally-universe-table .ally-mobile-filter-shell > .ally-filter-icon-row:not(.ally-filter-attack-icon-row) { order: 1; } .layout-mobile #database-view #ally-universe-table .ally-mobile-filter-shell > .ally-mobile-name-row { order: 2; } .layout-mobile #database-view #ally-universe-table .ally-mobile-filter-shell > .ally-filter-attack-icon-row { order: 3; }