:root { --deck-header-color: #242424; --shop-button-color: #0a75d4; --copy-button-color: #242424; --toolbar-color: #e5e5e5; --deck-background-color: #eeeeee; --color-white: #ffffff; --color-text: #111827; --color-muted: #6b7280; } /* Deck */ .scg-deck { font-family: inherit; border-radius: 6px; overflow: hidden; container-type: inline-size; box-shadow: 0 1px 8px #d0d0d0; } /* Header */ .scg-deck__header { background-color: var(--deck-header-color); min-height: 80px; padding: 16px; display: flex; justify-content: space-between; gap: 16px; flex-direction: column; } /* scg-deck is the container */ @container (min-width: 640px) { .scg-deck__header { padding: 24px; flex-direction: row; } } .scg-deck__title { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 700; color: white; } .scg-deck__shop-btn-wrapper { text-align: right; } .scg-deck__bullet-sep { color: #b6bdcf80; font-size: 18px; line-height: 0; } .scg-deck__title-sep { color: #b6bdcf80; margin-inline: 6px; } .scg-deck__player { color: var(--color-white); } .scg-deck__title-wrapper { overflow: hidden; } .scg-deck__bullets { list-style: none; color: #b6bdcf; font-size: 14px; display: flex; flex-flow: row wrap; gap: 8px; align-items: center; margin-left: -12px; padding: 0; } .scg-deck__bullet--bold { font-weight: 700; } @media (max-width: 639px) { .scg-deck__title { display: flex; flex-direction: column; gap: 4px; } .scg-deck__title-sep { display: none; } } /* Toolbar */ .scg-deck__toolbar { background-color: var(--toolbar-color); min-height: 80px; display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; } .scg-deck__copy-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } /* Buttons */ .scg-deck-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 24px; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; } .scg-deck-btn--shop, .scg-deck-btn--find { background-color: var(--shop-button-color); color: var(--color-white); } .scg-deck-btn--copy { background-color: var(--copy-button-color); color: var(--color-white); } .scg-deck-btn--shop:hover, .scg-deck-btn--shop:visited, .scg-deck-btn--find:hover, .scg-deck-btn--find:visited, .scg-deck-btn--find:focus-visible, .scg-deck-btn--find:active { color: var(--color-white); } .scg-deck-btn--find { margin-top: 16px; font-size: 16px; text-align: center; } .scg-deck-btn__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; object-fit: contain; } .scg-deck-btn__content { display: inline-flex; align-items: center; gap: 8px; } .scg-deck-btn__chevron { font-size: 12px; } /* Copy dropdown — a single shared menu portaled to (positioned below-left of whichever copy button opened it), listing the per-game decklist formats. Only rendered for games with more than one format; other games fall back to a single plain-text copy button. */ .scg-deck-copy-menu { position: fixed; z-index: 1002; top: -9999px; left: -9999px; display: flex; flex-direction: column; gap: 4px; min-width: 192px; background-color: var(--color-white); border-radius: 8px; box-shadow: 0 4px 12px #0000001f, 0 1px 3px #0000001a; box-sizing: border-box; outline: 1px solid #0000001a; outline-offset: -1px; padding: 6px; visibility: hidden; opacity: 0; transform: scale(0.95); transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s; } .scg-deck-copy-menu.is-open { visibility: visible; opacity: 1; transform: scale(1); } .scg-deck-copy-menu__item { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 4px; padding: 8px 10px; font-size: 14px; font-weight: 400; text-transform: none; text-align: left; color: var(--color-text); cursor: pointer; white-space: nowrap; } .scg-deck-copy-menu__item:hover, .scg-deck-copy-menu__item:focus-visible { background-color: #f3f4f6; } .scg-deck-copy-menu__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 16px; object-fit: contain; } /* Copied! popover — portaled to (like the card hover preview and touch modal below) so it's never clipped by .scg-deck's overflow:hidden, however tall or short the deck happens to render. */ .scg-deck-copied-popover { position: fixed; z-index: 1002; top: -9999px; left: -9999px; background-color: var(--color-white); color: var(--color-text); font-size: 14px; font-weight: 400; text-transform: none; padding: 10px; border-radius: 8px; box-shadow: 0 4px 12px #0000001f, 0 1px 3px #0000001a; box-sizing: border-box; outline: 1px solid #0000001a; outline-offset: -1px; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; transform: scale(0.95); transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s; } .scg-deck-copied-popover.is-open { visibility: visible; opacity: 1; transform: scale(1); } /* Grid */ .scg-deck__grid { column-count: 1; column-gap: 16px; padding: 16px; } /* scg-deck is the container */ @container (min-width: 640px) { .scg-deck__grid { column-count: 2; } } @container (min-width: 900px) { .scg-deck__grid { column-count: 3; } } @container (min-width: 1200px) { .scg-deck__grid { column-count: 4; } } /* Section */ .scg-deck-section { position: relative; background-color: var(--color-white); border-radius: 4px; overflow: hidden; padding: 16px 16px 16px 20px; margin-bottom: 16px; break-inside: avoid; /*box-shadow: 0 1px 2px #00000014;*/ } .scg-deck-section__title { margin-bottom: 4px; font-size: 18px; font-weight: 700; color: #000000; } .scg-deck-section__title--has-count { color: #052b49; } .scg-deck-section__count { color: var(--color-muted); font-weight: 400; } /* Cards */ .scg-deck-card { display: flex; gap: 8px; } .scg-deck-card__count { color: #1f2937; flex-basis: 32px; flex-shrink: 0; word-break: initial; } .scg-deck-card__name { color: var(--color-text); } .scg-deck-card__name--trigger { color: #005585; text-decoration: none; cursor: pointer; } .scg-deck-card__name--trigger:hover, .scg-deck-card__name--trigger:focus-visible { text-decoration: underline; } /* Hover preview (hover-capable devices) — a single floating preview that follows the cursor; the card name itself is a real link, so this is purely a preview and never intercepts the click. */ .scg-deck-card__preview { position: fixed; z-index: 1002; top: -9999px; left: -9999px; width: 256px; pointer-events: none; background: var(--color-white); border-radius: 8px; box-shadow: 0 4px 12px #0000001f, 0 1px 3px #0000001a; box-sizing: border-box; outline: 1px solid #0000001a; outline-offset: -1px; padding: 10px; visibility: hidden; opacity: 0; transform: scale(0.95); transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s; } .scg-deck-card__preview.is-open { visibility: visible; opacity: 1; transform: scale(1); } .scg-deck-card__preview-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 4px; } /* Touch modal — tapping a card opens a centered modal instead of navigating straight away. */ .scg-deck-card__modal { visibility: hidden; transition: visibility 0.1s; } .scg-deck-card__modal.is-open { visibility: visible; } .scg-deck-card__modal-backdrop { position: fixed; inset: 0; z-index: 1000; background-color: #0000001a; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.1s ease; } .scg-deck-card__modal.is-open .scg-deck-card__modal-backdrop { opacity: 1; } .scg-deck-card__modal-content { position: fixed; z-index: 1001; top: 50%; left: 50%; width: min(300px, calc(100vw - 32px)); background: var(--color-white); border-radius: 8px; box-shadow: 0 4px 12px #0000001f, 0 1px 3px #0000001a; box-sizing: border-box; outline: 1px solid #0000001a; outline-offset: -1px; padding: 16px; text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(0.95); transition: opacity 0.1s ease, transform 0.1s ease; } .scg-deck-card__modal.is-open .scg-deck-card__modal-content { opacity: 1; transform: translate(-50%, -50%) scale(1); } .scg-deck-card__modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; text-align: left; } .scg-deck-card__modal-title { font-size: 16px; font-weight: 700; color: var(--color-text); } .scg-deck-card__modal-close { display: inline-flex; align-items: center; background: none; border: 0; color: var(--color-muted); cursor: pointer; padding: 4px; font-size: 18px; } .scg-deck-card__modal-image { width: 100%; object-fit: cover; border-radius: 4px; }