/** * Card Details Modal — Newtype v2 * All classes prefixed with .cardModal- to avoid conflicts */ /* ─── Consolidated from the former dark-theme.css card block ─────── The light/dark toggle was removed (site is permanently dark); these .cardModal-* rules used to live in dark-theme.css (which loads before this file). Moved here so the modal is single-source. Kept at the TOP so this file's own later rules still win the same ties they did before — only the LIVE rules are kept; rules dark-theme.css duplicated and card-modal.css already overrode were dropped. See docs/planning/card-detail-css-unification-plan.md. */ .cardModal-link-card-info { background: transparent; } .cardModal-link-card-wrapper { background: var(--bg-section); border: 1px solid var(--border-color); border-radius: 10px; } .cardModal-header { background: rgba(44, 44, 44, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .cardModal-card-name { color: var(--text-primary); } .cardModal-pills-container .cardModal-pill { background: var(--bg-section); color: var(--text-primary); } .cardModal-price-container { border-color: var(--border-color); } .cardModal-price-sub { color: var(--text-secondary); } .cardModal-stat-item { background: var(--bg-section); } .cardModal-section-title { border-left-color: var(--color-primary); } /* ─── Accessibility ───────────────────────────────────────────── */ .cardModal-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ─── Overlay ─────────────────────────────────────────────────── */ .cardModal-overlay { position: fixed; inset: 0; z-index: var(--z-deck-modal-stacked); background: rgba(6, 8, 5, 0.88); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); display: none; align-items: center; justify-content: center; padding: 40px; } .cardModal-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(46, 255, 126, 0.05) 0%, transparent 70%); } .cardModal-overlay.cardModal-active { display: flex; } /* Lock the page behind the modal. CardModalManager adds `cardModal-open` to BOTH and on open and removes it on close. Locking only is insufficient when the SPA's scroll container is the document element, so both are targeted. */ html.cardModal-open, body.cardModal-open { overflow: hidden; } /* ─── Container ───────────────────────────────────────────────── */ .cardModal-container { position: relative; width: 1180px; max-width: 100%; max-height: calc(100vh - 80px); background: var(--modal-bg); border: 1px solid rgba(46, 255, 126, 0.5); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); display: grid; grid-template-rows: auto 1fr; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7); animation: cardModal-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; z-index: 2; overflow: hidden; } /* Corner accent brackets on container */ .cardModal-container::before, .cardModal-container::after { content: ''; position: absolute; width: 32px; height: 32px; z-index: 3; pointer-events: none; } .cardModal-container::before { top: -1px; left: -1px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); box-shadow: -1px -1px 0 rgba(46, 255, 126, 0.38); } .cardModal-container::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); box-shadow: 1px 1px 0 rgba(46, 255, 126, 0.38); } @keyframes cardModal-rise { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ─── Top Strip ───────────────────────────────────────────────── */ .cardModal-strip { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px; padding: 12px 24px; border-bottom: 1px solid rgba(46, 255, 126, 0.22); background: var(--bg-body); font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; flex-shrink: 0; } /* CARD ARCHIVE label with pulsing dot */ .cardModal-strip-label { color: var(--neon); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .cardModal-strip-label::before { content: ''; width: 8px; height: 8px; background: var(--neon); box-shadow: 0 0 8px var(--neon); border-radius: 50%; flex-shrink: 0; animation: cardModal-pulse 2s infinite; } @keyframes cardModal-pulse { 0%, 70% { opacity: 1; } 80%, 100% { opacity: 0.3; } } /* Breadcrumb */ .cardModal-strip-breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); min-width: 0; overflow: hidden; } .cardModal-strip-bc-block { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cardModal-strip-sep { color: var(--text-tertiary); flex-shrink: 0; } .cardModal-strip-bc-number { color: var(--neon); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .cardModal-strip-bc-type { color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } /* Rating (in strip, center area) */ .cardModal-rating-container { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .cardModal-rating-stars { display: flex; gap: 1px; font-size: 16px; line-height: 1; cursor: pointer; user-select: none; } .cardModal-star { color: rgba(46, 255, 126, 0.2); transition: color 0.15s ease, transform 0.1s ease; cursor: pointer; } .cardModal-star.filled { color: var(--neon); } .cardModal-star.half { background: linear-gradient(90deg, var(--neon) 50%, rgba(46, 255, 126, 0.2) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cardModal-star.preview { color: rgba(46, 255, 126, 0.6); } .cardModal-star:hover { transform: scale(1.15); } .cardModal-rating-text { font-family: var(--font-family-mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.1em; } .cardModal-rating-stars.disabled { cursor: default; opacity: 0.5; } .cardModal-rating-stars.disabled .cardModal-star { cursor: default; } .cardModal-rating-stars.disabled .cardModal-star:hover { transform: none; } /* Strip controls (nav + close) */ .cardModal-strip-controls { display: flex; align-items: center; gap: 6px; } .cardModal-strip-controls .cardModal-nav-btn { width: 32px; height: 26px; border: 1px solid rgba(46, 255, 126, 0.22); background: transparent; color: var(--text-secondary); /* flex + both-axis centering: a global button rule forces display:flex, under which place-items is ignored and the glyph drifts to the top-left. line-height:1 removes the small-triangle glyphs' vertical baseline gap. */ display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: 14px; cursor: pointer; transition: all 0.15s ease; border-radius: 0; user-select: none; } .cardModal-strip-controls .cardModal-nav-btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.06); } .cardModal-strip-controls .cardModal-nav-btn:disabled { opacity: 0.2; cursor: not-allowed; } .cardModal-strip-controls .cardModal-nav-btn:disabled:hover { border-color: rgba(46, 255, 126, 0.22); color: var(--text-secondary); background: transparent; } .cardModal-close { width: 32px; height: 26px; border: 1px solid rgba(46, 255, 126, 0.22); background: transparent; color: var(--text-secondary); display: grid; place-items: center; font-family: var(--font-family-display); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; border-radius: 0; } .cardModal-close:hover { border-color: var(--color-error); color: var(--color-error); background: rgba(255, 59, 59, 0.06); } /* ─── Body Grid ───────────────────────────────────────────────── */ .cardModal-body { display: grid; grid-template-columns: 460px 1fr; height: 100%; overflow: hidden; } /* ─── Art Panel (left) ────────────────────────────────────────── */ .cardModal-art-panel { padding: 28px; border-right: 1px solid rgba(46, 255, 126, 0.22); background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(46, 255, 126, 0.05), transparent 70%), linear-gradient(180deg, var(--modal-bg), var(--bg-body) 70%); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .cardModal-art-panel::-webkit-scrollbar { width: 4px; } .cardModal-art-panel::-webkit-scrollbar-thumb { background: rgba(46, 255, 126, 0.2); } /* Card display frame */ .cardModal-card-display { position: relative; aspect-ratio: 5 / 7; width: 100%; border: 1px solid rgba(46, 255, 126, 0.5); padding: 10px; background: var(--modal-bg); flex-shrink: 0; } /* Corner accents on display frame */ .cardModal-card-display::before, .cardModal-card-display::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; } .cardModal-card-display::before { top: -1px; left: -1px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); } .cardModal-card-display::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); } /* Card art inner container (holds image + overlays + corner brackets) */ .cardModal-card-art { height: 100%; position: relative; overflow: hidden; background: linear-gradient(165deg, #0d1a10, var(--bg-body) 80%); } /* Scan-line overlay */ .cardModal-card-art::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.08) 50%); background-size: 100% 4px; pointer-events: none; z-index: 2; } /* 4 corner bracket decorations inside art */ .cardModal-art-corner { position: absolute; width: 24px; height: 24px; z-index: 3; } .cardModal-art-corner-tl { top: 10px; left: 10px; border-top: 1px solid var(--neon); border-left: 1px solid var(--neon); } .cardModal-art-corner-tr { top: 10px; right: 10px; border-top: 1px solid var(--neon); border-right: 1px solid var(--neon); } .cardModal-art-corner-bl { bottom: 10px; left: 10px; border-bottom: 1px solid var(--neon); border-left: 1px solid var(--neon); } .cardModal-art-corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--neon); border-right: 1px solid var(--neon); } /* Art overlay: card ID (top-left) */ .cardModal-art-card-id { position: absolute; top: 16px; left: 16px; z-index: 4; font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--text-secondary); text-transform: uppercase; } /* Art overlay: rarity badge (top-right) */ .cardModal-art-rarity-badge { position: absolute; top: 16px; right: 16px; z-index: 4; font-family: var(--font-family-display); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: var(--neon); padding: 3px 8px; border: 1px solid var(--neon); background: rgba(46, 255, 126, 0.08); } /* Art overlay: cost badge (bottom-left, hexagon) */ .cardModal-art-cost-badge { position: absolute; bottom: 16px; left: 16px; z-index: 4; width: 44px; height: 44px; background: var(--neon); color: var(--bg-body); display: grid; place-items: center; font-family: var(--font-family-display); font-weight: 700; font-size: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 16px rgba(46, 255, 126, 0.38); } /* Main card image */ .cardModal-art-image { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; position: relative; z-index: 1; } /* Alt arts strip */ .cardModal-alt-arts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cardModal-alt-arts-label { font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-tertiary); text-transform: uppercase; min-width: 56px; flex-shrink: 0; } .cardModal-alt-arts-list { display: flex; gap: 8px; flex-wrap: wrap; } /* Individual alt-art thumbnail */ .cardModal-alt-thumb { position: relative; width: 54px; aspect-ratio: 5 / 7; border: 1px solid rgba(46, 255, 126, 0.22); background: var(--modal-bg); cursor: pointer; transition: all 0.15s ease; overflow: hidden; flex-shrink: 0; } .cardModal-alt-thumb:hover { border-color: var(--neon); transform: translateY(-2px); } .cardModal-alt-thumb.active { border-color: var(--neon); box-shadow: 0 0 10px rgba(46, 255, 126, 0.25); } .cardModal-alt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cardModal-alt-thumb-tag { position: absolute; bottom: 2px; right: 2px; z-index: 2; font-family: var(--font-family-mono); font-size: 7px; letter-spacing: 0.1em; color: var(--text-tertiary); background: rgba(0, 0, 0, 0.7); padding: 1px 3px; } .cardModal-alt-thumb.active .cardModal-alt-thumb-tag { color: var(--neon); } /* Left panel sections (collection, deck builder) */ .cardModal-left-section { border: 1px solid rgba(46, 255, 126, 0.15); background: rgba(46, 255, 126, 0.02); padding: 12px; } /* ─── Data Panel (right) ──────────────────────────────────────── */ .cardModal-data-panel { padding: 24px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .cardModal-data-panel::-webkit-scrollbar { width: 6px; } .cardModal-data-panel::-webkit-scrollbar-thumb { background: rgba(46, 255, 126, 0.25); } /* Card header */ .cardModal-card-header { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(46, 255, 126, 0.22); } .cardModal-card-source-line { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--text-tertiary); text-transform: uppercase; } .cardModal-card-source-line b { color: var(--neon); font-weight: 600; } .cardModal-data-card-name { font-family: var(--font-family-display); font-size: 34px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.05; text-transform: uppercase; color: var(--text-primary); text-shadow: 0 0 24px rgba(46, 255, 126, 0.1); margin: 0; } /* Alternate-language names shown under the main card name */ .cardModal-alt-names { font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: 400; letter-spacing: 0.04em; color: var(--text-tertiary); margin-top: 4px; margin-bottom: 2px; line-height: 1.4; } /* Card meta row (rarity, SP, price) */ .cardModal-card-meta-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cardModal-meta-tag { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(46, 255, 126, 0.22); color: var(--text-secondary); text-decoration: none; display: inline-block; } .cardModal-meta-rarity { color: var(--text-secondary); } .cardModal-meta-sp, .cardModal-top-badge.cardModal-top-sp { color: var(--color-warning); border-color: rgba(255, 184, 77, 0.4); font-weight: 700; } .cardModal-meta-price, .cardModal-top-badge.cardModal-top-price { color: var(--neon); border-color: rgba(46, 255, 126, 0.35); cursor: pointer; transition: border-color 0.15s ease; text-decoration: none; font-family: var(--font-family-mono); } .cardModal-meta-price:hover, .cardModal-top-badge.cardModal-top-price:hover { border-color: var(--neon); } /* Link-partner badge — passive visual marker in the same neon family as the price tag. Indicates that a declared link partner of this card is in the active deck. No click action. */ .cardModal-meta-link-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(46, 255, 126, 0.08); color: var(--neon); border-color: rgba(46, 255, 126, 0.35); font-family: var(--font-family-mono); } .cardModal-meta-link-badge svg { display: block; } .cardModal-meta-link-badge-text { line-height: 1; } /* Base tag used by JS className rewrites on rarity/SP/price spans */ .cardModal-top-badge { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(46, 255, 126, 0.22); color: var(--text-secondary); display: inline-block; } /* Rarity-specific meta tag colors */ .cardModal-top-badge.cardModal-top-rarity-C, .cardModal-meta-tag.cardModal-top-rarity-C { color: #7a8c7a; border-color: rgba(122, 140, 122, 0.4); } .cardModal-top-badge.cardModal-top-rarity-U, .cardModal-meta-tag.cardModal-top-rarity-U { color: #4ab3cf; border-color: rgba(74, 179, 207, 0.4); } .cardModal-top-badge.cardModal-top-rarity-R, .cardModal-meta-tag.cardModal-top-rarity-R { color: #6e9eef; border-color: rgba(110, 158, 239, 0.4); } .cardModal-top-badge.cardModal-top-rarity-RR, .cardModal-meta-tag.cardModal-top-rarity-RR { color: #b07fec; border-color: rgba(176, 127, 236, 0.4); } .cardModal-top-badge.cardModal-top-rarity-SR, .cardModal-meta-tag.cardModal-top-rarity-SR { color: #e09050; border-color: rgba(224, 144, 80, 0.4); } .cardModal-top-badge.cardModal-top-rarity-UR, .cardModal-meta-tag.cardModal-top-rarity-UR { color: #e05050; border-color: rgba(224, 80, 80, 0.4); } .cardModal-top-badge.cardModal-top-rarity-LR, .cardModal-meta-tag.cardModal-top-rarity-LR { color: #d4a017; border-color: rgba(212, 160, 23, 0.4); } .cardModal-top-badge.cardModal-top-rarity-P, .cardModal-meta-tag.cardModal-top-rarity-P { color: #e09050; border-color: rgba(224, 144, 80, 0.4); } /* Card type / color meta tags */ .cardModal-top-badge.cardModal-top-type-Red, .cardModal-meta-tag.cardModal-top-type-Red { border-color: var(--card-color-red); color: var(--card-color-red); } .cardModal-top-badge.cardModal-top-type-Blue, .cardModal-meta-tag.cardModal-top-type-Blue { border-color: var(--card-color-blue); color: var(--card-color-blue); } .cardModal-top-badge.cardModal-top-type-Green, .cardModal-meta-tag.cardModal-top-type-Green { border-color: var(--card-color-green); color: var(--card-color-green); } .cardModal-top-badge.cardModal-top-type-Yellow, .cardModal-meta-tag.cardModal-top-type-Yellow { border-color: var(--card-color-yellow); color: var(--card-color-yellow); } .cardModal-top-badge.cardModal-top-type-Purple, .cardModal-meta-tag.cardModal-top-type-Purple { border-color: var(--card-color-purple); color: var(--card-color-purple); } .cardModal-top-badge.cardModal-top-type-White, .cardModal-meta-tag.cardModal-top-type-White { border-color: #8aa898; color: #8aa898; } .cardModal-top-badge.cardModal-top-type-Black, .cardModal-meta-tag.cardModal-top-type-Black { border-color: #4a6060; color: #4a6060; } /* ─── Stats Grid ──────────────────────────────────────────────── */ .cardModal-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cardModal-stat-cell { position: relative; padding: 10px 8px; border: 1px solid rgba(46, 255, 126, 0.22); background: rgba(46, 255, 126, 0.03); text-align: center; } /* Corner brackets on stat cells */ .cardModal-stat-cell::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1.5px solid var(--neon); border-left: 1.5px solid var(--neon); } .cardModal-stat-cell::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1.5px solid var(--neon); border-right: 1.5px solid var(--neon); } .cardModal-stat-label { font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 4px; } .cardModal-stat-value { font-family: var(--font-family-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--text-primary); } /* ─── Effect Box ──────────────────────────────────────────────── */ .cardModal-effect-box { border: 1px solid rgba(46, 255, 126, 0.22); background: rgba(46, 255, 126, 0.03); position: relative; } .cardModal-effect-box::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); } .cardModal-effect-box::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); } .cardModal-effect-header { padding: 7px 14px; border-bottom: 1px solid rgba(46, 255, 126, 0.22); background: rgba(46, 255, 126, 0.04); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .cardModal-effect-title { color: var(--neon); } .cardModal-effect-meta { color: var(--text-tertiary); } .cardModal-effect-body { padding: 12px 14px; } .cardModal-section-content { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--text-primary); white-space: pre-line; } /* ─── Detail List ─────────────────────────────────────────────── */ .cardModal-detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .cardModal-detail { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border: 1px solid rgba(46, 255, 126, 0.22); background: rgba(46, 255, 126, 0.02); } .cardModal-detail-key { font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-tertiary); text-transform: uppercase; } .cardModal-detail-val { font-family: var(--font-family-display); font-size: 13px; color: var(--text-primary); font-weight: 500; } /* Pills inside detail val */ .cardModal-detail-val-pills { font-family: inherit; font-size: inherit; font-weight: inherit; } /* Full-row details (Traits, Where-to-Get, Zones) span both columns. */ .cardModal-detail-row-full { grid-column: 1 / -1; } /* Paired details (Link Req. + Artist). Default to one column each, but when Link Req. is hidden the Artist fills the row by itself so the layout doesn't leave a gap. */ .cardModal-detail-row-pair { grid-column: span 1; } .cardModal-detail-list:has(#cardModalLinkSection.hidden) #cardModalArtistSection.cardModal-detail-row-pair { grid-column: 1 / -1; } /* ─── Generic Sections ────────────────────────────────────────── */ .cardModal-section { display: flex; flex-direction: column; gap: 8px; } .cardModal-section-title { font-family: var(--font-family-display); font-size: 10px; font-weight: 600; color: var(--neon); text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: center; gap: 8px; margin: 0; } .cardModal-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(46, 255, 126, 0.22); } /* ─── Synergy Accordions ─────────────────────────────────────── */ .cardModal-synergy-accordion { border-top: 1px solid rgba(46, 255, 126, 0.1); } .cardModal-synergy-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-sm) 0; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; transition: color var(--transition-fast); } .cardModal-synergy-trigger:hover { color: var(--text-primary); } .cardModal-synergy-trigger[aria-expanded="true"] { color: var(--neon); } .cardModal-synergy-arrow { width: 12px; height: 8px; flex-shrink: 0; transition: transform var(--transition-fast); } .cardModal-synergy-trigger[aria-expanded="true"] .cardModal-synergy-arrow { transform: rotate(180deg); } .cardModal-synergy-body { display: none; padding-bottom: var(--spacing-sm); } .cardModal-synergy-accordion.is-open > .cardModal-synergy-body { display: block; } /* ─── Tournament Deck Rows ────────────────────────────────────── */ /* The rows container is also a synergy-body: keep it hidden when collapsed (don't let display:flex override .cardModal-synergy-body's display:none) — restore flex only when the accordion is open. */ .cardModal-tournament-rows { flex-direction: column; gap: var(--spacing-xs); } .cardModal-synergy-accordion.is-open > .cardModal-tournament-rows { display: flex; } .cardModal-tournament-row { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); background: rgba(46, 255, 126, 0.02); border: 1px solid rgba(46, 255, 126, 0.1); border-left: 3px solid rgba(46, 255, 126, 0.15); } .cardModal-tournament-placement { flex-shrink: 0; font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; min-width: 30px; text-align: center; color: var(--text-tertiary); } .cardModal-tournament-placement--gold { color: #c9a227; } .cardModal-tournament-placement--silver { color: #8c98a4; } .cardModal-tournament-placement--bronze { color: #b87333; } .cardModal-tournament-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cardModal-tournament-player { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cardModal-tournament-meta { font-family: var(--font-family-mono); font-size: 10px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } .cardModal-tournament-deck-name { color: var(--text-secondary); } .cardModal-tournament-record { flex-shrink: 0; font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text-tertiary); letter-spacing: 0.04em; } .cardModal-tournament-empty, .cardModal-tournament-loading { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text-tertiary); letter-spacing: 0.06em; padding: var(--spacing-xs) 0; text-align: center; } /* ─── Pills ───────────────────────────────────────────────────── */ .cardModal-pills-container { display: flex; flex-wrap: wrap; gap: 6px; } .cardModal-pill { padding: 4px 10px; background: transparent; border: 1px solid rgba(46, 255, 126, 0.2); font-family: var(--font-family-display); font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0; } .cardModal-effect-pill { cursor: help; transition: border-color 0.15s ease, color 0.15s ease; } .cardModal-effect-pill:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.06); } /* Floating effect tooltip */ .effect-tooltip { position: fixed; display: none; padding: 8px 12px; background: var(--modal-bg); color: var(--text-primary); border: 1px solid rgba(46, 255, 126, 0.3); font-size: 12px; white-space: nowrap; text-align: center; z-index: 10000; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); line-height: 1.4; } /* ─── Linkable Cards ──────────────────────────────────────────── */ .cardModal-linkable-cards { flex-direction: column; gap: 4px; /* Cap at ~5 rows; longer lists scroll within the category (a partial 6th row peeks through as a "there's more" affordance). */ max-height: 15rem; overflow-y: auto; } /* The list is a synergy-body — hidden until the accordion is open. The base .cardModal-synergy-body sets display:none; restore flex (not block) only when open so the rows lay out as a column. */ .cardModal-synergy-accordion.is-open > .cardModal-linkable-cards { display: flex; } .cardModal-linkable-cards::-webkit-scrollbar { width: 6px; } .cardModal-linkable-cards::-webkit-scrollbar-thumb { background: rgba(46, 255, 126, 0.25); } .cardModal-link-card-wrapper { overflow: hidden; transition: all 0.15s ease; /* Keep full height inside the scroll-capped list — don't let flexbox shrink rows to fit the max-height. */ flex-shrink: 0; } .cardModal-link-card { background: rgba(46, 255, 126, 0.02); border: 1px solid rgba(46, 255, 126, 0.12); border-left: 3px solid rgba(46, 255, 126, 0.2); padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all 0.15s ease; cursor: pointer; position: relative; } .cardModal-link-card:hover { background: rgba(46, 255, 126, 0.05); border-color: rgba(46, 255, 126, 0.3); } .cardModal-link-card.expanded { background: rgba(46, 255, 126, 0.06); border-color: rgba(46, 255, 126, 0.35); } .cardModal-link-card-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .cardModal-link-card-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: rgba(46, 255, 126, 0.4); } .cardModal-link-card-color-dot--Red { background-color: var(--color-error); } .cardModal-link-card-color-dot--Blue { background-color: var(--color-primary); } .cardModal-link-card-color-dot--Green { background-color: var(--color-success); } .cardModal-link-card-color-dot--Yellow { background-color: var(--color-warning); } .cardModal-link-card-color-dot--Purple { background-color: #9b59b6; } .cardModal-link-card-color-dot--White { background-color: #bdc3c7; border: 1px solid #95a5a6; } .cardModal-link-card-color-dot--Black { background-color: #2c3e50; } /* Colour-name badge inside the synergy row drawer's stats line. Renders the colour as a textual chip so colour-blind users get the information from the word, not just the hue. Inline so it tracks with the stats text. */ .cardModal-link-card-color-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px; font-family: var(--font-family-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; vertical-align: middle; } .cardModal-link-card-color-badge--Red { color: var(--color-error); background-color: rgba(255, 59, 59, 0.10); } .cardModal-link-card-color-badge--Blue { color: #4ea0e8; background-color: rgba(46, 255, 126, 0.12); } .cardModal-link-card-color-badge--Green { color: var(--neon); background-color: rgba(46, 255, 126, 0.10); } .cardModal-link-card-color-badge--Yellow { color: var(--color-warning); background-color: rgba(241, 196, 15, 0.10); } .cardModal-link-card-color-badge--Purple { color: #c87fff; background-color: rgba(168, 85, 247, 0.12); } .cardModal-link-card-color-badge--White { color: #f0f5ee; background-color: rgba(240, 245, 238, 0.08); } .cardModal-link-card-color-badge--Black { color: #d0d5cc; background-color: rgba(44, 62, 80, 0.30); } .cardModal-link-card-name { font-family: var(--font-family-display); font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; letter-spacing: 0.02em; } .cardModal-link-card-number { font-family: var(--font-family-mono); font-size: 10px; font-weight: 500; color: var(--neon); white-space: nowrap; opacity: 0.7; } .cardModal-link-card-add { width: 26px; height: 26px; background: transparent; border: 1px solid rgba(46, 255, 126, 0.3); color: var(--neon); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; } .cardModal-link-card-add svg { width: 15px; height: 15px; } .cardModal-link-card-add:hover { background: rgba(46, 255, 126, 0.12); border-color: var(--neon); transform: scale(1.08); } .cardModal-link-card-add:active { transform: scale(0.95); } /* Expandable drawer */ .cardModal-link-card-drawer { background: rgba(6, 8, 5, 0.8); border-top: 1px solid rgba(46, 255, 126, 0.1); padding: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease; } .cardModal-link-card-drawer.show { padding: 12px; max-height: 500px; } .cardModal-link-card-link-req { font-size: 12px; font-weight: 600; color: var(--neon); background: rgba(46, 255, 126, 0.05); padding: 6px 10px; margin-bottom: 8px; display: inline-block; border: 1px solid rgba(46, 255, 126, 0.15); } .cardModal-link-card-stats { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: rgba(46, 255, 126, 0.03); padding: 6px 10px; margin-bottom: 10px; display: inline-block; border: 1px solid rgba(46, 255, 126, 0.12); } .cardModal-link-card-description { font-size: 13px; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; } .cardModal-link-card-no-info { font-size: 13px; font-style: italic; color: var(--text-tertiary); } /* ─── Market Price Section ────────────────────────────────────── */ .cardModal-market { border: 1px solid rgba(46, 255, 126, 0.22); background: rgba(46, 255, 126, 0.02); position: relative; } .cardModal-market::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neon); box-shadow: 0 0 8px var(--neon); opacity: 0.6; } .cardModal-market-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; padding: 14px 18px; align-items: center; } .cardModal-market-price-col { display: flex; flex-direction: column; gap: 4px; } .cardModal-market-label { font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-tertiary); text-transform: uppercase; } .cardModal-market-value { font-family: var(--font-family-display); font-weight: 700; font-size: 26px; color: var(--neon); line-height: 1; } .cardModal-price-trend-delta { font-family: var(--font-family-mono); font-size: 11px; color: var(--text-secondary); } .cardModal-price-trend-delta.positive { color: var(--neon); } .cardModal-price-trend-delta.negative { color: var(--color-error); } .cardModal-market-chart-col { position: relative; height: 52px; min-width: 0; } .cardModal-market-chart-label { position: absolute; right: 0; top: 0; font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--text-tertiary); text-transform: uppercase; } .cardModal-price-trend-chart { width: 100%; height: 100%; position: relative; } .cardModal-price-trend-chart canvas { width: 100% !important; height: 100% !important; display: block; } .cardModal-market-meta-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 100px; border-left: 1px solid rgba(46, 255, 126, 0.15); padding-left: 18px; } .cardModal-market-tcg-link { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--neon); text-decoration: none; text-transform: uppercase; transition: opacity 0.15s ease; } .cardModal-market-tcg-link:hover { opacity: 0.7; } .cardModal-market-date { font-family: var(--font-family-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; } /* ─── Artist field ────────────────────────────────────────────── */ #cardModalCardArtist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #cardModalCardArtist a { color: var(--neon); text-decoration: underline; } #cardModalCardArtist a:hover { opacity: 0.8; } .cardModal-artist-display { flex: 1 1 auto; min-width: 0; color: var(--text-primary); font-family: var(--font-family-display); font-size: 13px; font-weight: 500; } /* Clickable artist name → opens the cards-by-artist grid. Button reset, styled like an inline link. */ .cardModal-artist-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--neon); cursor: pointer; text-decoration: none; transition: color 0.15s ease; } .cardModal-artist-link:hover, .cardModal-artist-link:focus-visible { color: var(--neon); text-decoration: underline; } .cardModal-artist-edit-btn { flex: 0 0 auto; background: transparent; border: 1px solid rgba(46, 255, 126, 0.22); color: var(--text-secondary); padding: 2px 8px; cursor: pointer; font-size: 12px; font-family: var(--font-family-mono); letter-spacing: 0.05em; transition: all 0.15s ease; } .cardModal-artist-edit-btn:hover { border-color: var(--neon); color: var(--neon); } .cardModal-artist-edit { width: 100%; display: flex; flex-direction: column; gap: 6px; } .cardModal-artist-pill-input { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; padding: var(--spacing-xs) var(--spacing-sm); background: rgba(46, 255, 126, 0.03); border: 1px solid rgba(46, 255, 126, 0.22); min-height: 32px; cursor: text; } .cardModal-artist-pill-input:focus-within { border-color: var(--neon); } .cardModal-artist-pill { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 2px 4px 2px 8px; background: rgba(46, 255, 126, 0.08); color: var(--text-primary); font-size: 12px; border: 1px solid rgba(46, 255, 126, 0.2); } .cardModal-artist-pill[data-primary="true"] { border-left: 3px solid var(--neon); padding-left: 6px; } .cardModal-artist-pill-remove { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; } .cardModal-artist-pill-remove:hover { color: var(--color-error); } .cardModal-artist-pill-typing { flex: 1 1 100px; min-width: 100px; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 13px; padding: 2px 0; } .cardModal-artist-pill-typing::placeholder { color: var(--text-tertiary); } .cardModal-artist-input { width: 100%; padding: 6px 10px; background: rgba(46, 255, 126, 0.03); color: var(--text-primary); border: 1px solid rgba(46, 255, 126, 0.22); font-size: 13px; outline: none; } .cardModal-artist-input:focus { border-color: var(--neon); } .cardModal-artist-edit-actions { display: flex; gap: 8px; } .cardModal-artist-save, .cardModal-artist-cancel { padding: 4px 12px; font-size: 12px; cursor: pointer; border: 1px solid rgba(46, 255, 126, 0.22); font-family: var(--font-family-display); letter-spacing: 0.05em; transition: all 0.15s ease; } .cardModal-artist-save { background: rgba(46, 255, 126, 0.1); color: var(--neon); border-color: rgba(46, 255, 126, 0.4); } .cardModal-artist-save:hover { background: rgba(46, 255, 126, 0.18); } .cardModal-artist-save:disabled, .cardModal-artist-cancel:disabled { opacity: 0.4; cursor: not-allowed; } .cardModal-artist-cancel { background: transparent; color: var(--text-secondary); } .cardModal-artist-cancel:hover { color: var(--text-primary); } /* ─── Collection Quantities ───────────────────────────────────── */ .cardModal-collection-quantities { display: flex; flex-direction: column; gap: 6px; } .cardModal-quantity-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: rgba(46, 255, 126, 0.02); border: 1px solid rgba(46, 255, 126, 0.12); } .cardModal-quantity-label { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-secondary); text-transform: uppercase; } .cardModal-quantity-controls { display: flex; align-items: center; gap: 8px; } .cardModal-quantity-btn { width: 26px; height: 26px; border: 1px solid rgba(46, 255, 126, 0.25); background: transparent; color: var(--neon); font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; user-select: none; } .cardModal-quantity-btn:hover { background: rgba(46, 255, 126, 0.1); border-color: var(--neon); } .cardModal-quantity-btn:active { transform: scale(0.92); } .cardModal-quantity-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cardModal-quantity-value { font-family: var(--font-family-display); font-size: 16px; font-weight: 700; color: var(--text-primary); min-width: 24px; text-align: center; } .cardModal-graded-row { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(46, 255, 126, 0.1); } .cardModal-graded-controls { display: flex; align-items: center; gap: 10px; } .cardModal-add-graded-btn { padding: 4px 10px; font-size: 11px; font-family: var(--font-family-display); letter-spacing: 0.05em; border: 1px solid rgba(46, 255, 126, 0.3); background: transparent; color: var(--neon); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; text-transform: uppercase; } .cardModal-add-graded-btn:hover { background: rgba(46, 255, 126, 0.1); border-color: var(--neon); } .collection-add-to-list-btn { padding: 6px 14px; width: 100%; font-family: var(--font-family-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(46, 255, 126, 0.3); background: transparent; color: var(--neon); cursor: pointer; transition: all 0.15s ease; } .collection-add-to-list-btn:hover { background: rgba(46, 255, 126, 0.08); border-color: var(--neon); } /* ─── Add to Deck Button ──────────────────────────────────────── */ .cardModal-add-to-deck-btn { width: 100%; padding: 12px 20px; background: rgba(46, 255, 126, 0.08); border: 1px solid rgba(46, 255, 126, 0.4); color: var(--neon); font-family: var(--font-family-display); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.1em; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .cardModal-add-to-deck-btn:hover { background: rgba(46, 255, 126, 0.14); border-color: var(--neon); box-shadow: 0 0 12px rgba(46, 255, 126, 0.2); } .cardModal-add-to-deck-btn:active { box-shadow: none; } .cardModal-add-icon { width: 20px; height: 20px; flex-shrink: 0; } /* ─── Errata & Notes ──────────────────────────────────────────── */ .cardModal-errata-notes-section { display: flex; flex-direction: column; gap: 10px; } .cardModal-errata-card { background: rgba(255, 193, 7, 0.06); border: 1px solid rgba(255, 193, 7, 0.3); padding: 14px 16px; } .cardModal-errata-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cardModal-errata-icon { font-size: 16px; line-height: 1; } .cardModal-errata-title { font-family: var(--font-family-display); font-size: 11px; font-weight: 700; color: var(--color-warning); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .cardModal-errata-content { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--text-primary); } .cardModal-notes-card { background: rgba(33, 150, 243, 0.06); border: 1px solid rgba(33, 150, 243, 0.3); padding: 14px 16px; } .cardModal-notes-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cardModal-notes-icon { font-size: 16px; line-height: 1; } .cardModal-notes-title { font-family: var(--font-family-display); font-size: 11px; font-weight: 700; color: #64b5f6; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .cardModal-notes-content { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--text-primary); } .cardModal-errata-content p, .cardModal-notes-content p { margin: 0 0 0.6rem 0; } .cardModal-errata-content p:last-child, .cardModal-notes-content p:last-child { margin-bottom: 0; } .cardModal-errata-content strong, .cardModal-notes-content strong { font-weight: 700; color: var(--text-primary); } .cardModal-errata-content em, .cardModal-notes-content em { font-style: italic; color: var(--text-secondary); } .cardModal-errata-content ul, .cardModal-notes-content ul, .cardModal-errata-content ol, .cardModal-notes-content ol { margin: 0.5rem 0 0.6rem 1.4rem; padding: 0; } .cardModal-errata-content li, .cardModal-notes-content li { margin-bottom: 0.2rem; } .cardModal-errata-content code, .cardModal-notes-content code { background: rgba(0, 0, 0, 0.25); padding: 0.1rem 0.35rem; font-family: var(--font-family-mono); font-size: 0.88em; color: var(--color-error); } /* ─── Admin Section ───────────────────────────────────────────── */ .cardModal-admin-section { background: rgba(255, 215, 0, 0.04); border: 1px solid rgba(255, 215, 0, 0.3); padding: 16px; margin-top: 4px; } .cardModal-admin-title { font-family: var(--font-family-display); font-size: 10px; font-weight: 700; color: #ffd700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; letter-spacing: 0.12em; text-transform: uppercase; } .cardModal-admin-title::before { content: "🔧"; font-size: 14px; } .cardModal-admin-title::after { content: ''; flex: 1; height: 1px; background: rgba(255, 215, 0, 0.2); } .cardModal-admin-fields { display: flex; flex-direction: column; gap: 12px; } .cardModal-admin-field { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); gap: 14px; } .cardModal-admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cardModal-admin-label { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-secondary); text-transform: uppercase; min-width: 90px; flex-shrink: 0; } .cardModal-admin-value { font-family: var(--font-family-mono); font-size: 13px; color: var(--text-primary); padding: 4px 10px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); min-width: 80px; text-align: center; flex: 1; } .cardModal-admin-editable { cursor: pointer; transition: all 0.15s ease; position: relative; } .cardModal-admin-editable:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 215, 0, 0.4); } .cardModal-admin-editable:hover::after { content: "Click to edit"; position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-tertiary); white-space: nowrap; pointer-events: none; font-family: var(--font-family-mono); } .cardModal-admin-link { text-decoration: none; color: var(--text-primary); display: inline-block; } .cardModal-admin-link:hover { text-decoration: underline; } .cardModal-admin-input { font-family: var(--font-family-mono); font-size: 13px; padding: 5px 10px; border: 1px solid rgba(255, 215, 0, 0.4); min-width: 100px; text-align: center; outline: none; background: rgba(0, 0, 0, 0.3); color: var(--text-primary); flex: 1; } .cardModal-admin-input:focus { border-color: #ffd700; } /* Checkbox row */ .cardModal-admin-checkbox-row { align-items: center; } .cardModal-admin-checkbox-group { display: flex; gap: 18px; flex-wrap: wrap; } .cardModal-admin-checkbox-item { display: flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-secondary); text-transform: uppercase; user-select: none; } .cardModal-admin-checkbox { width: 14px; height: 14px; cursor: pointer; accent-color: var(--neon); } /* Fetch price button */ .cardModal-admin-fetch-price-btn { margin-left: 8px; padding: 3px 8px; background: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.15); font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.08em; cursor: pointer; transition: all 0.15s ease; text-transform: uppercase; } .cardModal-admin-fetch-price-btn:hover:not(:disabled) { color: var(--neon); border-color: rgba(46, 255, 126, 0.4); } .cardModal-admin-fetch-price-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Errata / Tags collapsibles */ .cardModal-admin-errata-notes, .cardModal-admin-tags { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .cardModal-admin-errata-toggle, .cardModal-admin-tags-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid rgba(255, 255, 255, 0.1); padding: 9px 12px; color: var(--text-secondary); font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .cardModal-admin-errata-toggle:hover, .cardModal-admin-tags-toggle:hover { background: rgba(255, 255, 255, 0.04); } .cardModal-admin-errata-icon, .cardModal-admin-tags-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; } .cardModal-admin-errata-notes.is-open .cardModal-admin-errata-icon, .cardModal-admin-tags.is-open .cardModal-admin-tags-icon { transform: rotate(180deg); } .cardModal-admin-errata-body, .cardModal-admin-tags-body { padding-top: 14px; } .cardModal-admin-text-field { margin-bottom: 16px; } .cardModal-admin-text-label { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 6px; } .cardModal-admin-text-hint { font-size: 10px; font-weight: 400; color: var(--text-tertiary); font-style: italic; text-transform: none; letter-spacing: 0; } .cardModal-admin-textarea { width: 100%; padding: 10px 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-primary); font-family: var(--font-family-mono); font-size: 12px; line-height: 1.5; resize: vertical; outline: none; transition: border-color 0.15s ease; } .cardModal-admin-textarea:focus { border-color: rgba(46, 255, 126, 0.4); } .cardModal-admin-textarea::placeholder { color: var(--text-tertiary); font-style: italic; } .cardModal-admin-save-btn { margin-top: 6px; padding: 6px 14px; background: rgba(46, 255, 126, 0.08); color: var(--neon); border: 1px solid rgba(46, 255, 126, 0.3); font-family: var(--font-family-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.15s ease; } .cardModal-admin-save-btn:hover { background: rgba(46, 255, 126, 0.15); border-color: var(--neon); } .cardModal-admin-save-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Traits / Labels / Effects inside admin */ .cardModal-admin-traits, .cardModal-admin-labels, .cardModal-admin-effects { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .cardModal-admin-tags-body .cardModal-admin-traits { margin-top: 0; padding-top: 8px; border-top: none; } .cardModal-admin-traits-title, .cardModal-admin-labels-title, .cardModal-admin-effects-title { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; } .cardModal-admin-traits-current, .cardModal-admin-labels-current, .cardModal-admin-effects-current { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 28px; align-items: center; } .cardModal-admin-traits-empty, .cardModal-admin-labels-empty, .cardModal-admin-effects-empty { font-family: var(--font-family-mono); font-size: 11px; color: var(--text-tertiary); font-style: italic; } .cardModal-admin-trait-badge, .cardModal-admin-label-badge, .cardModal-admin-effect-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(46, 255, 126, 0.06); color: var(--text-secondary); border: 1px solid rgba(46, 255, 126, 0.2); font-family: var(--font-family-mono); font-size: 11px; transition: all 0.15s ease; } .cardModal-admin-effect-badge.inactive { opacity: 0.5; border-color: rgba(255, 255, 255, 0.1); background: rgba(128, 128, 128, 0.06); } .cardModal-admin-trait-remove, .cardModal-admin-label-remove, .cardModal-admin-effect-remove { cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; opacity: 0.6; transition: opacity 0.15s ease; background: none; border: none; color: inherit; } .cardModal-admin-trait-remove:hover, .cardModal-admin-label-remove:hover, .cardModal-admin-effect-remove:hover { opacity: 1; color: var(--color-error); } .cardModal-admin-effect-source { font-size: 12px; line-height: 1; cursor: help; } .cardModal-admin-effect-name { flex: 1; } .cardModal-admin-effect-toggle { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; color: inherit; opacity: 0.6; transition: all 0.15s ease; } .cardModal-admin-effect-toggle:hover { opacity: 1; transform: scale(1.15); } .cardModal-admin-effect-badge.active .cardModal-admin-effect-toggle { color: var(--neon); } .cardModal-admin-effect-badge.inactive .cardModal-admin-effect-toggle { color: var(--text-tertiary); } .cardModal-admin-traits-add, .cardModal-admin-labels-add, .cardModal-admin-effects-add { display: flex; gap: 6px; align-items: stretch; } .cardModal-admin-traits-input, .cardModal-admin-labels-input, .cardModal-admin-effects-input { flex: 1; padding: 7px 10px; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.2); color: var(--text-primary); outline: none; font-family: var(--font-family-mono); transition: border-color 0.15s ease; } .cardModal-admin-traits-input:focus, .cardModal-admin-labels-input:focus, .cardModal-admin-effects-input:focus { border-color: rgba(46, 255, 126, 0.4); } .cardModal-admin-traits-input::placeholder, .cardModal-admin-labels-input::placeholder, .cardModal-admin-effects-input::placeholder { color: var(--text-tertiary); } .cardModal-admin-traits-add-btn, .cardModal-admin-labels-add-btn, .cardModal-admin-effects-add-btn { width: 34px; height: 34px; background: rgba(46, 255, 126, 0.1); color: var(--neon); border: 1px solid rgba(46, 255, 126, 0.3); font-size: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; } .cardModal-admin-traits-add-btn:hover:not(:disabled), .cardModal-admin-labels-add-btn:hover:not(:disabled), .cardModal-admin-effects-add-btn:hover:not(:disabled) { background: rgba(46, 255, 126, 0.18); border-color: var(--neon); } .cardModal-admin-traits-add-btn:disabled, .cardModal-admin-labels-add-btn:disabled, .cardModal-admin-effects-add-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cardModal-admin-traits-suggestions, .cardModal-admin-labels-suggestions, .cardModal-admin-effects-suggestions { margin-top: 6px; max-height: 180px; overflow-y: auto; background: var(--modal-bg); border: 1px solid rgba(46, 255, 126, 0.2); } .cardModal-admin-traits-suggestion, .cardModal-admin-label-suggestion, .cardModal-admin-effect-suggestion { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.15s ease; font-size: 12px; display: flex; justify-content: space-between; align-items: center; } .cardModal-admin-traits-suggestion:last-child, .cardModal-admin-label-suggestion:last-child, .cardModal-admin-effect-suggestion:last-child { border-bottom: none; } .cardModal-admin-traits-suggestion:hover, .cardModal-admin-label-suggestion:hover, .cardModal-admin-effect-suggestion:hover { background: rgba(46, 255, 126, 0.06); } .cardModal-admin-traits-suggestion-name, .cardModal-admin-label-suggestion-name, .cardModal-admin-effect-suggestion-name { font-family: var(--font-family-mono); font-size: 11px; color: var(--text-primary); } .cardModal-admin-label-suggestion-count, .cardModal-admin-effect-suggestion-count { font-size: 10px; color: var(--text-tertiary); background: rgba(255, 255, 255, 0.06); padding: 2px 6px; font-family: var(--font-family-mono); } /* Create new forms */ .cardModal-admin-create-link { margin-top: 10px; text-align: center; } .cardModal-admin-create-link a { color: var(--neon); font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em; text-decoration: none; opacity: 0.7; transition: opacity 0.15s ease; text-transform: uppercase; } .cardModal-admin-create-link a:hover { opacity: 1; text-decoration: underline; } .cardModal-admin-create-form { margin-top: 12px; padding: 14px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } .cardModal-admin-create-form h4 { margin: 0 0 12px 0; font-family: var(--font-family-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); } .cardModal-admin-form-field { margin-bottom: 10px; } .cardModal-admin-form-field label { display: block; margin-bottom: 5px; font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; } .cardModal-admin-form-field input, .cardModal-admin-form-field textarea, .cardModal-admin-form-field select { width: 100%; padding: 7px 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); font-family: var(--font-family-mono); font-size: 12px; outline: none; transition: border-color 0.15s ease; } .cardModal-admin-form-field input:focus, .cardModal-admin-form-field textarea:focus, .cardModal-admin-form-field select:focus { border-color: rgba(46, 255, 126, 0.4); } .cardModal-admin-form-field textarea { min-height: 56px; resize: vertical; } .cardModal-admin-form-actions { display: flex; gap: 8px; margin-top: 12px; } .cardModal-admin-form-submit, .cardModal-admin-form-cancel { flex: 1; padding: 7px 14px; border: 1px solid rgba(46, 255, 126, 0.3); font-family: var(--font-family-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.15s ease; } .cardModal-admin-form-submit { background: rgba(46, 255, 126, 0.1); color: var(--neon); } .cardModal-admin-form-submit:hover { background: rgba(46, 255, 126, 0.18); } .cardModal-admin-form-cancel { background: transparent; color: var(--text-secondary); border-color: rgba(255, 255, 255, 0.12); } .cardModal-admin-form-cancel:hover { background: rgba(255, 255, 255, 0.04); } /* Edit Preview Card button */ .cardModal-admin-preview-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .cardModal-admin-preview-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(255, 184, 77, 0.12); color: var(--color-warning); border: 1px solid rgba(255, 184, 77, 0.4); font-family: var(--font-family-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.15s ease; } .cardModal-admin-preview-btn:hover { background: rgba(255, 184, 77, 0.2); border-color: var(--color-warning); } .cardModal-admin-preview-btn svg { width: 14px; height: 14px; } /* Pilot alias field */ #cardModalPilotAliasField { margin-top: 0; } /* ─── Pilot alias field (admin) ───────────────────────────────── */ /* (no extra needed — uses .cardModal-admin-field styles) */ /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { .cardModal-overlay { padding: 0; align-items: flex-end; } .cardModal-container { width: 100%; max-width: 100%; max-height: 92vh; clip-path: none; border-radius: 4px 4px 0 0; border-left: none; border-right: none; border-bottom: none; transform: translateY(100%); transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1); animation: none; } /* Mobile grabber */ .cardModal-container::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 2px; background: var(--neon); opacity: 0.25; pointer-events: none; border: none; z-index: 10; width: 32px; height: 3px; } .cardModal-container::after { display: none; } .cardModal-overlay.cardModal-active .cardModal-container { transform: translateY(0); } .cardModal-strip { grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px 16px; padding-top: 20px; } /* Hide breadcrumb middle section on mobile */ .cardModal-strip-breadcrumb { font-size: 10px; } /* Modal-only: the top strip is cramped on mobile. Scoped to the modal root so it doesn't hide the rating on the card PAGE (which shares this class). */ .cardModal-overlay .cardModal-rating-container { display: none; } /* Small screens: art panel stacks above the data panel and the WHOLE modal scrolls as one. The body is the single scroll container; neither panel scrolls independently (no nested scroll regions). */ .cardModal-body { grid-template-columns: 1fr; /* art on top, details below */ overflow-y: auto; /* the one and only scroll container */ overflow-x: hidden; height: auto; max-height: calc(92vh - 52px); -webkit-overflow-scrolling: touch; /* Clear the fixed mobile bottom tab bar (58px + safe area) plus a bit of breathing room, so the last bit of scrolled content isn't pinned against the screen edge / hidden behind the bar. */ padding-bottom: calc(58px + env(safe-area-inset-bottom) + 16px); } .cardModal-art-panel { border-right: none; border-bottom: 1px solid rgba(46, 255, 126, 0.22); padding: 12px; /* trimmed so the card image can fill ~95% */ overflow: visible; /* don't scroll on its own */ height: auto; } .cardModal-data-panel { overflow: visible; /* don't scroll on its own */ height: auto; } .cardModal-card-display { width: 95%; max-width: 95%; margin: 0 auto; aspect-ratio: 5 / 7; } .cardModal-data-card-name { font-size: 24px; } .cardModal-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .cardModal-stat-value { font-size: 18px; } .cardModal-detail-list { grid-template-columns: 1fr; } .cardModal-market-inner { grid-template-columns: auto 1fr; gap: 14px; } .cardModal-market-meta-col { display: none; } .cardModal-admin-field-row { grid-template-columns: 1fr; } .cardModal-admin-checkbox-group { flex-direction: column; gap: 8px; } } @media (max-width: 480px) { .cardModal-strip-label { font-size: 9px; } .cardModal-data-card-name { font-size: 20px; } .cardModal-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------------ Fix (BUG_footer-and-card-modal): the Newtype v2 redesign collapsed the modal into a single body (#cardModalAdvancedView / .cardModal-body), but the manager still ran the legacy card/advanced view toggle, which added `.hidden` (display:none !important) to the body whenever the default 'card' mode was active — leaving only the header strip visible on every environment. The toggle is retired in card-modal-manager.ts; this rule is belt-and-suspenders so a stale cached JS bundle can't re-hide the body. Single-column grid on small screens still applies (it stays display:grid). ------------------------------------------------------------------------ */ .cardModal-overlay .cardModal-body { display: grid !important; } /* Where-to-Get inline edit (admin) */ .cardModal-wtg-edit-btn { margin-left: 8px; background: transparent; border: 1px solid rgba(46, 255, 126, 0.22); color: var(--text-secondary); padding: 0 6px; cursor: pointer; font-size: 11px; transition: all 0.15s ease; } .cardModal-wtg-edit-btn:hover { border-color: var(--neon); color: var(--neon); } .cardModal-wtg-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cardModal-wtg-save, .cardModal-wtg-cancel { padding: 3px 10px; font-size: 11px; cursor: pointer; border: 1px solid rgba(46, 255, 126, 0.22); background: transparent; color: var(--text-secondary); transition: all 0.15s ease; } .cardModal-wtg-save { background: rgba(46, 255, 126, 0.1); color: var(--neon); border-color: rgba(46, 255, 126, 0.4); } .cardModal-wtg-save:disabled, .cardModal-wtg-cancel:disabled { opacity: 0.4; cursor: not-allowed; } /* Traits inline editor (admin; ✎ toggles it under the visible Traits row) */ .cardModal-traits-edit-btn { margin-left: 8px; background: transparent; border: 1px solid rgba(46, 255, 126, 0.22); color: var(--text-secondary); padding: 0 6px; cursor: pointer; font-size: 11px; transition: all 0.15s ease; } .cardModal-traits-edit-btn:hover { border-color: var(--neon); color: var(--neon); } .cardModal-traits-editor { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(46, 255, 126, 0.1); display: flex; flex-direction: column; gap: 8px; } /* Traits / Where-to-Get edit buttons: square-ish + right-aligned, like artist. */ .cardModal-traits-edit-btn, .cardModal-wtg-edit-btn { flex: 0 0 auto; margin-left: 0; padding: 2px 8px; font-size: 12px; font-family: var(--font-family-mono); letter-spacing: 0.05em; } /* Traits ✎ pushed to the right of the TRAITS key line. */ .cardModal-detail-traits .cardModal-detail-key { display: flex; align-items: center; justify-content: space-between; } /* Where-to-Get value: text grows, ✎ sits at the right (edit wrap spans full width). */ #cardModalWhereToGet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cardModal-wtg-text { flex: 1 1 auto; min-width: 0; } .cardModal-wtg-edit { flex: 1 1 100%; }