/* ============================================================================= Deck Details Modal — Newtype v2 HUD frame + corner brackets · left intel panel · right card list ============================================================================= */ /* Lock the page behind the modal. DeckModalManager adds `deckModal-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 (mirrors the card modal's cardModal-open lock). */ html.deckModal-open, body.deckModal-open { overflow: hidden; } /* ── Modal frame ── */ #deckModal { background-color: rgba(6, 8, 5, 0.86); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); align-items: center; justify-content: center; padding: 32px 40px; } #deckModal .modal-content.deck-modal-content { position: relative; width: 1120px; max-width: calc(100vw - 80px); max-height: calc(100vh - 80px); margin: 0; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 0; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); display: grid; grid-template-rows: auto 1fr; overflow: hidden; animation: deckModal-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes deckModal-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Corner brackets */ #deckModal .modal-content.deck-modal-content::before, #deckModal .modal-content.deck-modal-content::after { content: ''; position: absolute; width: 28px; height: 28px; z-index: 4; pointer-events: none; } #deckModal .modal-content.deck-modal-content::before { top: -1px; left: -1px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); box-shadow: -1px -1px 0 var(--neon-glow); } #deckModal .modal-content.deck-modal-content::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); box-shadow: 1px 1px 0 var(--neon-glow); } /* ── HUD strip header ── */ .deck-detail-surface .deck-modal-strip { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: rgba(6, 8, 5, 0.6); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; flex-shrink: 0; z-index: 2; } .deck-detail-surface .dms-status { display: flex; align-items: center; gap: 8px; color: var(--neon); font-weight: 600; padding-right: 16px; border-right: 1px solid var(--border); flex-shrink: 0; } .deck-detail-surface .dms-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: dms-pulse 2.2s ease-in-out infinite; } @keyframes dms-pulse { 0%, 70% { opacity: 1; } 85%, 100% { opacity: 0.25; } } .deck-detail-surface .dms-breadcrumb { color: var(--text-3); display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; } .deck-detail-surface .dms-breadcrumb b { color: var(--text-2); font-weight: 500; text-transform: none; letter-spacing: 0.04em; font-size: 11px; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .deck-detail-surface .dms-sep { color: var(--border-strong); } .deck-detail-surface .dms-right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .deck-detail-surface .dms-icon-btn, .deck-detail-surface .dms-btn { height: 28px; border: 1px solid var(--border); color: var(--text-2); background: transparent; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; padding: 0 10px; } .deck-detail-surface .dms-icon-btn { width: 28px; padding: 0; font-size: 14px; line-height: 1; } .deck-detail-surface .dms-nav-btn { font-size: 18px; font-weight: 600; } .deck-detail-surface .dms-divider { width: 1px; height: 18px; background: var(--border); margin: 0 2px; } .deck-detail-surface .dms-btn:hover, .deck-detail-surface .dms-icon-btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.04); } .deck-detail-surface .dms-icon-btn.dms-close-btn:hover, .deck-detail-surface .dms-btn.close:hover { border-color: var(--red); color: var(--red); background: rgba(255, 59, 59, 0.08); box-shadow: 0 0 8px rgba(255, 59, 59, 0.25); } .deck-detail-surface .dms-icon-btn.dms-nav-btn[disabled], .deck-detail-surface .dms-icon-btn.dms-nav-btn.disabled { opacity: 0.3; pointer-events: none; } .deck-detail-surface .dms-icon-btn.favorite-btn.favorited { color: var(--amber); border-color: var(--amber); background: rgba(255, 184, 77, 0.08); } .deck-detail-surface .dms-icon-btn.favorite-btn .favorite-icon { font-size: 13px; line-height: 1; } /* ── Strip stats cluster (rating + view + favorite count) ── */ .deck-detail-surface .dms-stats { display: inline-flex; align-items: center; gap: 14px; padding-right: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; } .deck-detail-surface .dms-stats.hidden { display: none; } .deck-detail-surface .dms-rating { display: inline-flex; align-items: center; gap: 5px; } .deck-detail-surface .dms-rating-stars { display: inline-flex; gap: 1px; line-height: 1; } .deck-detail-surface .dms-rating-stars .star { font-size: 11px; line-height: 1; color: var(--text-3); } .deck-detail-surface .dms-rating-stars .star.filled { color: var(--amber); text-shadow: 0 0 4px var(--amber-glow); } .deck-detail-surface .dms-rating-text { color: var(--text-2); white-space: nowrap; text-transform: none; letter-spacing: 0.04em; } .deck-detail-surface .dms-views, .deck-detail-surface .dms-fav-count { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .deck-detail-surface .dms-views-icon, .deck-detail-surface .dms-fav-count-icon { font-size: 10px; line-height: 1; color: var(--text-3); } .deck-detail-surface .dms-fav-count-icon { color: var(--amber); } /* ── User rating input (left panel section) ── */ /* When the existing render() adds .show-flex (display: flex), keep the label above the star row by going column-direction. */ .deck-detail-surface .dm-user-rating { flex-direction: column; align-items: stretch; gap: 10px; } .deck-detail-surface .dm-rating-input { display: flex; gap: 4px; } .deck-detail-surface .dm-rating-input .star-btn { width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s, text-shadow 0.12s; display: flex; align-items: center; justify-content: center; padding: 0; } .deck-detail-surface .dm-rating-input .star-btn:hover { border-color: var(--amber); color: var(--amber); background: rgba(255, 184, 77, 0.06); text-shadow: 0 0 6px var(--amber-glow); } .deck-detail-surface .dm-rating-input .star-btn.active { border-color: var(--amber); color: var(--amber); background: rgba(255, 184, 77, 0.1); text-shadow: 0 0 6px var(--amber-glow); } /* On small viewports, drop the view/fav numbers but keep the stars. */ @media (max-width: 720px) { .deck-detail-surface .dms-views, .deck-detail-surface .dms-fav-count { display: none; } .deck-detail-surface .dms-stats { gap: 8px; } } /* ── Body grid ── */ .deck-detail-surface .modal-body.deck-modal-body { display: grid; grid-template-columns: 360px 1fr; /* Unified scroll: the BODY is the single scroll container on desktop too (parity with the /deck page and the mobile modal). The two columns flow at natural height, top-aligned, and the body scrolls as one unit — so a wheel/trackpad gesture anywhere inside it scrolls, instead of the old two-independent-scroll-zones design where the cursor had to be over the specific pane that could scroll. */ align-items: start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0; background: transparent; min-height: 0; } /* Custom scrollbar for the unified-scroll body — wider thumb so users notice the area is scrollable (macOS hides overlay scrollbars by default). */ .deck-detail-surface .modal-body.deck-modal-body::-webkit-scrollbar { width: 8px; } .deck-detail-surface .modal-body.deck-modal-body::-webkit-scrollbar-track { background: rgba(46, 255, 126, 0.04); } .deck-detail-surface .modal-body.deck-modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border: 1px solid var(--bg-2); } .deck-detail-surface .modal-body.deck-modal-body::-webkit-scrollbar-thumb:hover { background: var(--neon); } /* ── LEFT — Deck Intel ── */ .deck-detail-surface .deck-modal-left { border-right: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 20px; /* No internal scroll — the body scrolls as one unit (see .deck-modal-body). */ overflow: visible; background: linear-gradient(180deg, rgba(46, 255, 126, 0.02) 0%, transparent 40%); min-height: 0; } .deck-detail-surface .dm-identity { display: flex; flex-direction: column; gap: 6px; } .deck-detail-surface .dm-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); text-shadow: 0 0 20px var(--neon-glow); margin: 0; } .deck-detail-surface .dm-meta-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-3); margin-top: 4px; text-transform: uppercase; } .deck-detail-surface .dm-pilot { color: var(--text-2); font-weight: 500; } .deck-detail-surface .dm-sep { color: var(--border-strong); } .deck-detail-surface .dm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .deck-detail-surface .dm-tag { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border); color: var(--text-3); } .deck-detail-surface .dm-tag.public { color: var(--neon); border-color: rgba(46, 255, 126, 0.35); background: rgba(46, 255, 126, 0.06); } .deck-detail-surface .dm-tag.private { color: var(--text-3); border-color: var(--border); } .deck-detail-surface .dm-tag.standard { color: var(--amber); border-color: rgba(255, 184, 77, 0.35); } .deck-detail-surface .dm-tag.locked { color: var(--color-warning); border-color: rgba(255, 215, 0, 0.35); background: rgba(255, 215, 0, 0.06); } .deck-detail-surface .dm-colors { display: flex; gap: 6px; align-items: center; } .deck-detail-surface .dm-colors-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; margin-right: 4px; } .deck-detail-surface .dm-color-pip { width: 22px; height: 22px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .deck-detail-surface .dm-color-pip.red { background: rgba(180, 30, 30, 0.3); border-color: rgba(180, 30, 30, 0.6); color: #e05a5a; } .deck-detail-surface .dm-color-pip.blue { background: rgba(30, 70, 180, 0.3); border-color: rgba(60, 110, 220, 0.6); color: #6ea8ff; } .deck-detail-surface .dm-color-pip.green { background: rgba(20, 100, 40, 0.3); border-color: rgba(40, 160, 80, 0.6); color: #4dbd7a; } .deck-detail-surface .dm-color-pip.purple { background: rgba(120, 40, 180, 0.3); border-color: rgba(160, 80, 220, 0.6); color: #c084fc; } .deck-detail-surface .dm-color-pip.white { background: rgba(150, 160, 155, 0.2); border-color: rgba(200, 210, 205, 0.5); color: #c8d5cc; } /* Section divider */ .deck-detail-surface .dm-divider { height: 1px; background: linear-gradient(90deg, var(--neon) 0%, transparent 100%); opacity: 0.25; flex-shrink: 0; } .deck-detail-surface .dm-section { flex-shrink: 0; } .deck-detail-surface .dm-section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } /* Formation bars */ /* Formation bars, cost curve, and trait/effect badges moved to the shared `components/deck-analytics.css` (single source of truth for the deck-analytics renderer's output — modal, page, and deck-builder all consume it). Only the modal-specific empty-state placeholder stays here. */ .deck-detail-surface .dm-traits-breakdown:empty::after { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); font-style: italic; } /* Card-cell styles (type sections, .dm-card-cell grid, link badges, ×N slabs, highlight states) are shared with the deck page — moved to styles/components/deck-card-list.css, scoped to .deck-card-list. */ /* Actions */ .deck-detail-surface .dm-actions { display: flex; flex-direction: column; gap: 6px; } .deck-detail-surface .dm-action-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .deck-detail-surface .dm-action-wrap { position: relative; } .deck-detail-surface .dm-action-btn { display: flex; align-items: center; gap: 10px; padding: 9px 14px; width: 100%; border: 1px solid var(--border); background: transparent; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .deck-detail-surface .dm-action-btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.04); } .deck-detail-surface .dm-action-primary { background: rgba(46, 255, 126, 0.08); border-color: var(--border-strong); color: var(--neon); } .deck-detail-surface .dm-action-primary:hover { background: rgba(46, 255, 126, 0.14); box-shadow: 0 0 14px var(--neon-glow); } .deck-detail-surface .dm-action-danger { color: var(--text-3); } .deck-detail-surface .dm-action-danger:hover { border-color: var(--red); color: var(--red); background: rgba(255, 59, 59, 0.05); } .deck-detail-surface .dm-action-icon { font-size: 12px; opacity: 0.85; line-height: 1; } .deck-detail-surface .dm-action-caret { margin-left: auto; font-size: 9px; opacity: 0.7; } .deck-detail-surface .dm-action-meta { margin-left: auto; margin-right: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); } /* Submenu popover */ .deck-detail-surface .dm-submenu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; padding: 4px; } .deck-detail-surface .dm-submenu.hidden { display: none; } .deck-detail-surface .dm-submenu-item { text-align: left; padding: 8px 12px; background: transparent; border: none; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.12s, color 0.12s; } .deck-detail-surface .dm-submenu-item:hover { background: rgba(46, 255, 126, 0.06); color: var(--neon); } .deck-detail-surface .dm-submenu-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ── Pilot Notes (description) ── */ .deck-detail-surface .dm-description { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.02em; color: var(--text-2); margin: 0; padding: 10px 12px; background: rgba(46, 255, 126, 0.03); border-left: 2px solid var(--border-strong); white-space: pre-wrap; word-wrap: break-word; } /* ── YouTube briefing ── */ .deck-detail-surface .dm-youtube-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); background: var(--bg); overflow: hidden; } .deck-detail-surface .dm-youtube-wrap::before, .deck-detail-surface .dm-youtube-wrap::after { content: ''; position: absolute; width: 10px; height: 10px; z-index: 2; pointer-events: none; } .deck-detail-surface .dm-youtube-wrap::before { top: -1px; left: -1px; border-top: 1px solid var(--neon); border-left: 1px solid var(--neon); opacity: 0.6; } .deck-detail-surface .dm-youtube-wrap::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--neon); border-right: 1px solid var(--neon); opacity: 0.6; } .deck-detail-surface .dm-youtube-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── RIGHT — Card list ── */ .deck-detail-surface .deck-modal-right { display: grid; /* header + card list at natural heights; the body owns the scroll. */ grid-template-rows: auto auto; min-height: 0; } .deck-detail-surface .dm-right-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; flex-shrink: 0; } .deck-detail-surface .dm-count { color: var(--neon); font-weight: 700; font-size: 14px; font-family: var(--font-display); letter-spacing: 0.02em; } .deck-detail-surface .dm-right-meta { color: var(--text-3); } .deck-detail-surface .dm-completeness { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-3); } .deck-detail-surface .dm-completeness-label { text-transform: uppercase; } .deck-detail-surface .dm-completeness-bar { width: 80px; height: 3px; background: rgba(46, 255, 126, 0.1); position: relative; } .deck-detail-surface .dm-completeness-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--neon); box-shadow: 0 0 6px var(--neon); width: 0%; transition: width 0.4s ease; } .deck-detail-surface .dm-completeness-value { color: var(--neon); font-weight: 700; } .deck-detail-surface .dm-card-list { /* No internal scroll — the body scrolls as one unit. */ overflow: visible; padding: 12px 16px 16px; min-height: 0; } /* ── Responsive ── */ @media (max-width: 980px) { /* Stack the panels and make the BODY the single scroll container, so the whole modal scrolls as one unit — left intel panel above the card list — instead of the left being pinned (capped at 360px) with only the card list scrolling. The body is the constrained 1fr row of modal-content; the panels flow at natural height and never scroll on their own. IMPORTANT: use `display: block`, NOT a grid. The body has a *definite* height (the 1fr row of modal-content). A grid with `grid-template-rows: auto auto` over a definite height squishes the two flex-column panels to fit the visible area (resolved e.g. 345px / 312px) instead of letting them grow to content — their content then overflows the short track box (overflow is visible) and the left panel's lower sections (Traits/Effects/ Acquisition) visually overlap the right panel's header + card list. A block container imposes no track sizing, so each panel takes its natural content height and the body simply scrolls. */ .deck-detail-surface .modal-body.deck-modal-body { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Keep touch scroll inside the modal body instead of chaining to the overflow:hidden page behind it (a common cause of "stuck" modal scrolling on mobile). */ overscroll-behavior: contain; touch-action: pan-y; } .deck-detail-surface .deck-modal-left { border-right: none; border-bottom: 1px solid var(--border); max-height: none; overflow: visible; height: auto; } .deck-detail-surface .deck-modal-right { display: block; overflow: visible; height: auto; } .deck-detail-surface .dm-card-list { overflow: visible; height: auto; } #deckModal .modal-content.deck-modal-content { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } } @media (max-width: 640px) { #deckModal { padding: 16px; } #deckModal .modal-content.deck-modal-content { max-width: 100%; max-height: calc(100vh - 32px); } .deck-detail-surface .deck-modal-strip { padding: 8px 14px; gap: 10px; } .deck-detail-surface .dms-breadcrumb { font-size: 9px; gap: 6px; } .deck-detail-surface .deck-modal-left { padding: 16px; gap: 14px; } .deck-detail-surface .dm-action-row { grid-template-columns: 1fr; } } /* ============================================================================= Deck Sub-modals — Newtype v2 Clone · Delete · MSA · GDSim · Export Image · Proxy Export · Submit Tournament ============================================================================= */ #cloneDeckModal, #deleteDeckModal, #msaInstructionsModal, #gdSimInstructionsModal, #exportImageOptionsModal, #proxyExportOptionsModal, #submitTournamentFromDeckModal { background-color: rgba(6, 8, 5, 0.86); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); align-items: center; justify-content: center; padding: 32px 24px; } #cloneDeckModal .modal-content, #deleteDeckModal .modal-content, #msaInstructionsModal .modal-content, #gdSimInstructionsModal .modal-content, #exportImageOptionsModal .modal-content, #proxyExportOptionsModal .modal-content, #submitTournamentFromDeckModal .modal-content { position: relative; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); color: var(--text); overflow: hidden; animation: deckModal-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* Corner brackets on every sub-modal */ #cloneDeckModal .modal-content::before, #cloneDeckModal .modal-content::after, #deleteDeckModal .modal-content::before, #deleteDeckModal .modal-content::after, #msaInstructionsModal .modal-content::before, #msaInstructionsModal .modal-content::after, #gdSimInstructionsModal .modal-content::before, #gdSimInstructionsModal .modal-content::after, #exportImageOptionsModal .modal-content::before, #exportImageOptionsModal .modal-content::after, #proxyExportOptionsModal .modal-content::before, #proxyExportOptionsModal .modal-content::after, #submitTournamentFromDeckModal .modal-content::before, #submitTournamentFromDeckModal .modal-content::after { content: ''; position: absolute; width: 22px; height: 22px; z-index: 4; pointer-events: none; } #cloneDeckModal .modal-content::before, #deleteDeckModal .modal-content::before, #msaInstructionsModal .modal-content::before, #gdSimInstructionsModal .modal-content::before, #exportImageOptionsModal .modal-content::before, #proxyExportOptionsModal .modal-content::before, #submitTournamentFromDeckModal .modal-content::before { top: -1px; left: -1px; border-top: 2px solid var(--neon); border-left: 2px solid var(--neon); box-shadow: -1px -1px 0 var(--neon-glow); } #cloneDeckModal .modal-content::after, #deleteDeckModal .modal-content::after, #msaInstructionsModal .modal-content::after, #gdSimInstructionsModal .modal-content::after, #exportImageOptionsModal .modal-content::after, #proxyExportOptionsModal .modal-content::after, #submitTournamentFromDeckModal .modal-content::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon); border-right: 2px solid var(--neon); box-shadow: 1px 1px 0 var(--neon-glow); } /* ── Sub-modal header (mono uppercase title + close X) ── */ #cloneDeckModal .modal-header, #deleteDeckModal .modal-header, #msaInstructionsModal .modal-header, #gdSimInstructionsModal .modal-header, #exportImageOptionsModal .modal-header, #proxyExportOptionsModal .modal-header, #submitTournamentFromDeckModal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); background: rgba(6, 8, 5, 0.4); margin: 0; } #cloneDeckModal .modal-header h2, #cloneDeckModal .modal-header h3, #deleteDeckModal .modal-header h2, #deleteDeckModal .modal-header h3, #msaInstructionsModal .modal-header h2, #msaInstructionsModal .modal-header h3, #gdSimInstructionsModal .modal-header h2, #gdSimInstructionsModal .modal-header h3, #exportImageOptionsModal .modal-header h2, #exportImageOptionsModal .modal-header h3, #proxyExportOptionsModal .modal-header h2, #proxyExportOptionsModal .modal-header h3, #submitTournamentFromDeckModal .modal-header h2, #submitTournamentFromDeckModal .modal-header h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin: 0; } /* Close button (× and ✕) */ #cloneDeckModal .modal-header .close, #deleteDeckModal .modal-header .close, #msaInstructionsModal .modal-header .close, #gdSimInstructionsModal .modal-header .close, #exportImageOptionsModal .modal-header .close, #proxyExportOptionsModal .modal-header .close, #submitTournamentFromDeckModal .modal-header .close, #submitTournamentFromDeckModal .modal-header .modal-close { width: 26px; height: 26px; border: 1px solid var(--border); color: var(--text-2); background: transparent; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; padding: 0; line-height: 1; } #cloneDeckModal .modal-header .close:hover, #deleteDeckModal .modal-header .close:hover, #msaInstructionsModal .modal-header .close:hover, #gdSimInstructionsModal .modal-header .close:hover, #exportImageOptionsModal .modal-header .close:hover, #proxyExportOptionsModal .modal-header .close:hover, #submitTournamentFromDeckModal .modal-header .close:hover, #submitTournamentFromDeckModal .modal-header .modal-close:hover { border-color: var(--red); color: var(--red); background: rgba(255, 59, 59, 0.06); } /* ── Body padding ── */ #cloneDeckModal .modal-body, #deleteDeckModal .modal-body, #msaInstructionsModal .modal-body, #gdSimInstructionsModal .modal-body, #exportImageOptionsModal .modal-body, #proxyExportOptionsModal .modal-body, #submitTournamentFromDeckModal .modal-body { padding: 18px 20px; background: transparent; } /* ── Form inputs (mono labels + neon-focus inputs) ── */ #cloneDeckModal .form-group, #exportImageOptionsModal .form-group, #proxyExportOptionsModal .form-group, #submitTournamentFromDeckModal .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } #cloneDeckModal .form-group label, #exportImageOptionsModal .form-group label, #proxyExportOptionsModal .form-group label, #submitTournamentFromDeckModal .form-group label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } #cloneDeckModal .form-input, #exportImageOptionsModal .form-input, #proxyExportOptionsModal .form-input, #submitTournamentFromDeckModal .form-input, #cloneDeckModal .form-select, #exportImageOptionsModal .form-select, #proxyExportOptionsModal .form-select, #submitTournamentFromDeckModal .form-select, #submitTournamentFromDeckModal .form-textarea { padding: 9px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; box-shadow: none; transition: border-color 0.12s, box-shadow 0.12s; width: 100%; box-sizing: border-box; } #cloneDeckModal .form-input:focus, #exportImageOptionsModal .form-input:focus, #proxyExportOptionsModal .form-input:focus, #submitTournamentFromDeckModal .form-input:focus, #cloneDeckModal .form-select:focus, #exportImageOptionsModal .form-select:focus, #proxyExportOptionsModal .form-select:focus, #submitTournamentFromDeckModal .form-select:focus, #submitTournamentFromDeckModal .form-textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 8px var(--neon-glow); } #submitTournamentFromDeckModal .form-help, #submitTournamentFromDeckModal small.form-help { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.02em; } #submitTournamentFromDeckModal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #submitTournamentFromDeckModal .form-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; } #submitTournamentFromDeckModal .step-description { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); letter-spacing: 0.02em; margin-bottom: 14px; } #submitTournamentFromDeckModal .prefilled-deck-info { padding: 9px 12px; background: rgba(46, 255, 126, 0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } #submitTournamentFromDeckModal .prefilled-value { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 12px; letter-spacing: 0.04em; } #submitTournamentFromDeckModal .prefilled-count { font-family: var(--font-mono); font-size: 10px; color: var(--neon); letter-spacing: 0.1em; text-transform: uppercase; } /* ── Toggle button group (Group By / Design / Paper Size) ── */ #exportImageOptionsModal .export-toggle-group, #proxyExportOptionsModal .export-toggle-group { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 0; overflow: hidden; } #exportImageOptionsModal .export-toggle-btn, #proxyExportOptionsModal .export-toggle-btn { flex: 1; padding: 8px 12px; background: transparent; color: var(--text-3); border: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.12s, color 0.12s; } #exportImageOptionsModal .export-toggle-btn:not(:last-child), #proxyExportOptionsModal .export-toggle-btn:not(:last-child) { border-right: 1px solid var(--border); } #exportImageOptionsModal .export-toggle-btn:hover, #proxyExportOptionsModal .export-toggle-btn:hover { background: rgba(46, 255, 126, 0.04); color: var(--text-2); } #exportImageOptionsModal .export-toggle-btn.active, #proxyExportOptionsModal .export-toggle-btn.active { background: rgba(46, 255, 126, 0.1); color: var(--neon); } /* ── Form actions row (Cancel / Confirm buttons) ── */ #cloneDeckModal .form-actions, #deleteDeckModal .form-actions, #exportImageOptionsModal .form-actions, #proxyExportOptionsModal .form-actions, #submitTournamentFromDeckModal .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } #cloneDeckModal .btn-primary, #cloneDeckModal .btn-secondary, #cloneDeckModal .btn-danger, #deleteDeckModal .btn-primary, #deleteDeckModal .btn-secondary, #deleteDeckModal .btn-danger, #msaInstructionsModal .btn-secondary, #msaInstructionsModal .btn-action, #gdSimInstructionsModal .btn-secondary, #gdSimInstructionsModal .btn-action, #exportImageOptionsModal .btn-primary, #exportImageOptionsModal .btn-secondary, #proxyExportOptionsModal .btn-primary, #proxyExportOptionsModal .btn-secondary, #submitTournamentFromDeckModal .btn-primary, #submitTournamentFromDeckModal .btn-secondary { padding: 9px 18px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; border-radius: 0; } #cloneDeckModal .btn-primary, #exportImageOptionsModal .btn-primary, #proxyExportOptionsModal .btn-primary, #submitTournamentFromDeckModal .btn-primary { background: rgba(46, 255, 126, 0.08); border-color: var(--border-strong); color: var(--neon); } #cloneDeckModal .btn-primary:hover, #exportImageOptionsModal .btn-primary:hover, #proxyExportOptionsModal .btn-primary:hover, #submitTournamentFromDeckModal .btn-primary:hover { background: rgba(46, 255, 126, 0.14); box-shadow: 0 0 12px var(--neon-glow); } #cloneDeckModal .btn-secondary:hover, #deleteDeckModal .btn-secondary:hover, #exportImageOptionsModal .btn-secondary:hover, #proxyExportOptionsModal .btn-secondary:hover, #submitTournamentFromDeckModal .btn-secondary:hover, #msaInstructionsModal .btn-secondary:hover, #gdSimInstructionsModal .btn-secondary:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.04); } #cloneDeckModal .btn-danger, #deleteDeckModal .btn-danger { color: #ff8b8b; border-color: rgba(255, 59, 59, 0.4); } #cloneDeckModal .btn-danger:hover, #deleteDeckModal .btn-danger:hover { border-color: var(--red); color: var(--red); background: rgba(255, 59, 59, 0.08); } #msaInstructionsModal .btn-action, #gdSimInstructionsModal .btn-action { background: rgba(46, 255, 126, 0.08); border-color: var(--border-strong); color: var(--neon); } #msaInstructionsModal .btn-action:hover, #gdSimInstructionsModal .btn-action:hover { background: rgba(46, 255, 126, 0.14); box-shadow: 0 0 12px var(--neon-glow); } /* ── Delete-deck warnings ── */ #deleteDeckModal .delete-warning { font-family: var(--font-mono); font-size: 12px; color: var(--text); letter-spacing: 0.02em; margin-bottom: 8px; } #deleteDeckModal .delete-deck-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); padding: 8px 12px; background: rgba(255, 59, 59, 0.08); border-left: 2px solid var(--red); margin: 8px 0; } #deleteDeckModal .delete-notice { font-family: var(--font-mono); font-size: 11px; color: #ff8b8b; letter-spacing: 0.04em; margin-bottom: 8px; } /* ── MSA / GDSim Instructions ── */ #msaInstructionsModal .msa-instructions h3, #gdSimInstructionsModal .msa-instructions h3 { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon); margin: 0 0 12px; } #msaInstructionsModal .msa-steps, #gdSimInstructionsModal .msa-steps { list-style: none; counter-reset: msa-step; margin: 0; padding: 0; } #msaInstructionsModal .msa-steps li, #gdSimInstructionsModal .msa-steps li { counter-increment: msa-step; position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--border); } #msaInstructionsModal .msa-steps li:last-child, #gdSimInstructionsModal .msa-steps li:last-child { border-bottom: none; } #msaInstructionsModal .msa-steps li::before, #gdSimInstructionsModal .msa-steps li::before { content: counter(msa-step); position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border: 1px solid var(--border); color: var(--neon); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: rgba(46, 255, 126, 0.04); } #msaInstructionsModal .msa-steps strong, #gdSimInstructionsModal .msa-steps strong { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); display: block; margin-bottom: 4px; } #msaInstructionsModal .msa-steps p, #gdSimInstructionsModal .msa-steps p { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); letter-spacing: 0.02em; margin: 4px 0; line-height: 1.5; } #msaInstructionsModal .msa-steps a, #gdSimInstructionsModal .msa-steps a { color: var(--neon); text-decoration: none; } #msaInstructionsModal .msa-steps a:hover, #gdSimInstructionsModal .msa-steps a:hover { text-shadow: 0 0 6px var(--neon-glow); } #msaInstructionsModal .copy-feedback, #gdSimInstructionsModal .copy-feedback { margin-top: 6px; color: var(--neon); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } /* ── Proxy Export specifics ── */ #proxyExportOptionsModal .proxy-card-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); background: var(--bg); padding: 4px; } #proxyExportOptionsModal .proxy-card-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; gap: 10px; border-bottom: 1px solid var(--border); } #proxyExportOptionsModal .proxy-card-row:last-child { border-bottom: none; } #proxyExportOptionsModal .proxy-card-name { font-family: var(--font-display); color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } #proxyExportOptionsModal .proxy-card-number, #proxyExportOptionsModal .proxy-card-deck-qty { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; } #proxyExportOptionsModal .proxy-qty-btn { width: 22px; height: 22px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-family: var(--font-mono); } #proxyExportOptionsModal .proxy-qty-btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(46, 255, 126, 0.06); } #proxyExportOptionsModal .proxy-qty-input { width: 36px; height: 22px; text-align: center; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); } #proxyExportOptionsModal .proxy-preview-info { margin-top: 12px; padding: 10px 12px; background: rgba(46, 255, 126, 0.04); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } #proxyExportOptionsModal .proxy-preview-info strong { color: var(--neon); font-weight: 600; } /* ── Modal footer (close button row) ── */ #msaInstructionsModal .modal-footer, #gdSimInstructionsModal .modal-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--border); background: transparent; margin-top: 0; } /* ── Sizing ── */ #cloneDeckModal .modal-content.small-modal, #deleteDeckModal .modal-content.small-modal, #exportImageOptionsModal .modal-content.small-modal { max-width: 420px; width: 92%; } #proxyExportOptionsModal .modal-content.proxy-export-modal { max-width: 540px; width: 92%; } #msaInstructionsModal .modal-content.msa-modal-content, #gdSimInstructionsModal .modal-content.msa-modal-content { max-width: 600px; width: 92%; max-height: 80vh; overflow-y: auto; } #submitTournamentFromDeckModal .modal-content.submit-result-modal { max-width: 620px; width: 92%; max-height: 88vh; overflow-y: auto; } /* ── Mobile cleanup (<=768px) ────────────────────────────────────────────── Hide the HUD strip's flashing status dot, "DECK-INTEL" label, and breadcrumbs (the deck name + author show in the body). Keep the modal clear of the global bottom tab bar so its lower content isn't cut off. Appended last so it wins over the earlier responsive blocks. */ @media (max-width: 768px) { .deck-detail-surface .dms-status, .deck-detail-surface .dms-breadcrumb { display: none; } #deckModal { align-items: center; padding: 12px 12px calc(58px + env(safe-area-inset-bottom) + 12px); } /* Match the id-scoped base rule's specificity so this height wins. */ #deckModal .modal-content.deck-modal-content { max-height: calc(100dvh - 58px - env(safe-area-inset-bottom) - 36px); } }