/* TCGDash Pack Simulator — homepage feature styles. Loads AFTER tcgd-base.css (tokens) and product-explorer.css (shared .tcgd-* components: buttons, segmented control, CTAs, states). This file adds only simulator-specific layout + the repo's first keyframe motion. Mobile-first: base rules target ~390px; ≥720px widens the stage. */ #tcgd-pack-sim { font-family: var(--tcgd-font); color: var(--tcgd-text); max-width: 560px; margin: 0 auto; padding: 8px 0 24px; } /* ========================= loading placeholder ====================== This stylesheet loads in , but the simulator's JS is deferred to the footer and then waits on the profile request — so the mount div would sit blank for that whole window. `:empty` matches only until render() appends its first child, so this placeholder paints with the page and clears itself with zero JS involvement. `.tcgd-ps-loading` is the JS-side state, styled identically so the handoff is seamless, and the shared min-height reserves the stage so nothing jumps. */ #tcgd-pack-sim:empty, .tcgd-ps-loading { display: flex; align-items: center; justify-content: center; min-height: 340px; margin: 0 16px; background: var(--tcgd-surface); border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius-lg); box-shadow: var(--tcgd-shadow); font: 600 14px/1.4 var(--tcgd-font); color: var(--tcgd-text-muted); } #tcgd-pack-sim:empty::before { content: "Loading packs…"; animation: tcgd-ps-pulse 1.4s ease-in-out infinite; } .tcgd-ps-loading { animation: tcgd-ps-pulse 1.4s ease-in-out infinite; } @keyframes tcgd-ps-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* The heading + intro copy live on the host page, not in this widget, so they render with the HTML rather than waiting for the script to boot. */ /* ============================= controls ============================= */ .tcgd-ps-controls { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 14px; } .tcgd-ps-select-wrap { position: relative; } .tcgd-ps-select { width: 100%; min-height: 44px; padding: 10px 38px 10px 12px; font: 600 14px/1.2 var(--tcgd-font); color: var(--tcgd-text); background: var(--tcgd-surface); border: 1px solid var(--tcgd-border-strong); border-radius: var(--tcgd-radius); appearance: none; -webkit-appearance: none; cursor: pointer; } .tcgd-ps-select:focus-visible { outline: 2px solid var(--tcgd-accent); outline-offset: 1px; } .tcgd-ps-select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; pointer-events: none; border-right: 2px solid var(--tcgd-text-muted); border-bottom: 2px solid var(--tcgd-text-muted); transform: translateY(-70%) rotate(45deg); } /* weight toggle: shared segmented control, full-width thirds + a hint line */ .tcgd-ps-weight .tcgd-segmented { display: flex; width: 100%; } .tcgd-ps-weight .tcgd-segmented-btn { flex: 1; min-height: 40px; } .tcgd-ps-weight-note { margin: 6px 2px 0; font-size: 12px; color: var(--tcgd-text-muted); line-height: 1.4; } /* ============================== stage =============================== */ .tcgd-ps-stage { position: relative; margin: 0 16px; padding: 18px 14px 20px; background: var(--tcgd-surface); border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius-lg); box-shadow: var(--tcgd-shadow); text-align: center; overflow: hidden; } /* --- idle / sealed pack --- */ .tcgd-ps-pack-btn { display: block; margin: 0 auto; padding: 0; background: none; border: none; cursor: pointer; border-radius: var(--tcgd-radius-lg); } .tcgd-ps-pack-btn:focus-visible { outline: 2px solid var(--tcgd-accent); outline-offset: 4px; } .tcgd-ps-pack-img { width: 168px; max-width: 60vw; display: block; margin: 0 auto; border-radius: var(--tcgd-radius-lg); filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.22)); transition: transform 160ms ease; } .tcgd-ps-pack-btn:hover .tcgd-ps-pack-img { transform: translateY(-3px) scale(1.02); } .tcgd-ps-pack-name { font-size: 16px; font-weight: 700; margin: 14px 0 2px; } .tcgd-ps-pack-price { font-size: 13.5px; color: var(--tcgd-text-soft); margin: 0 0 2px; } .tcgd-ps-sample { font-size: 12px; color: var(--tcgd-text-muted); margin: 8px 0 0; line-height: 1.45; } .tcgd-ps-rip { min-width: 220px; min-height: 48px; margin-top: 14px; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; } /* coming-soon veil on the idle stage */ .tcgd-ps-soon .tcgd-ps-pack-img { filter: grayscale(1) opacity(0.55); } .tcgd-ps-soon-tag { display: inline-block; margin-top: 12px; padding: 5px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--tcgd-text-soft); border: 1.5px dashed var(--tcgd-border-strong); border-radius: 999px; } .tcgd-ps-soon-progress { font-size: 12.5px; color: var(--tcgd-text-muted); margin-top: 8px; } .tcgd-ps-progressbar { width: 200px; height: 6px; margin: 8px auto 0; background: var(--tcgd-surface-3); border-radius: 999px; overflow: hidden; } .tcgd-ps-progressbar > span { display: block; height: 100%; background: var(--tcgd-accent); border-radius: 999px; } /* --- pack-opening burst --- */ @keyframes tcgd-ps-pack-open { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.04) rotate(-2.5deg); } 55% { transform: scale(1.06) rotate(2deg); } 80% { transform: scale(0.7) rotate(-1deg); opacity: 0.7; } 100% { transform: scale(0.35); opacity: 0; } } .tcgd-ps-opening .tcgd-ps-pack-img { animation: tcgd-ps-pack-open 620ms cubic-bezier(0.45, 0, 0.4, 1) forwards; } /* --- reveal --- */ .tcgd-ps-cardstage { perspective: 1000px; } .tcgd-ps-flip { position: relative; width: 216px; height: 302px; margin: 4px auto 0; display: block; padding: 0; border: none; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 340ms cubic-bezier(0.3, 0.7, 0.3, 1); border-radius: var(--tcgd-radius-lg); } .tcgd-ps-flip:focus-visible { outline: 2px solid var(--tcgd-accent); outline-offset: 4px; } .tcgd-ps-flip.tcgd-ps-facedown { transform: rotateY(180deg); } .tcgd-ps-flip.tcgd-ps-hitflip { transition-duration: 620ms; } .tcgd-ps-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--tcgd-radius-lg); overflow: hidden; box-shadow: var(--tcgd-shadow-hover); } .tcgd-ps-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .tcgd-ps-face .tcgd-noimage { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--tcgd-surface-2); color: var(--tcgd-text-muted); font-size: 13px; } .tcgd-ps-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--tcgd-accent) 26%, var(--tcgd-surface-2)), var(--tcgd-surface-2) 70%); border: 1px solid var(--tcgd-border-strong); color: var(--tcgd-text-soft); } .tcgd-ps-back strong { font-size: 15px; letter-spacing: 0.06em; color: var(--tcgd-text); } .tcgd-ps-back span { font-size: 12px; } /* subtle glow on the hit-slot face-down card — anticipation, not a spoiler (every hit-slot card gets it regardless of what's underneath) */ .tcgd-ps-hitflip .tcgd-ps-back { border-color: color-mix(in oklab, var(--tcgd-violet) 55%, var(--tcgd-border-strong)); box-shadow: var(--tcgd-shadow-hover), 0 0 18px color-mix(in oklab, var(--tcgd-violet) 30%, transparent); } .tcgd-ps-cardmeta { margin-top: 12px; min-height: 66px; } .tcgd-ps-cardname { font-size: 15px; font-weight: 700; margin: 0; } .tcgd-ps-cardsub { font-size: 12.5px; color: var(--tcgd-text-soft); margin: 2px 0 0; } .tcgd-ps-cardvalue { font-size: 14px; font-weight: 700; margin: 4px 0 0; } .tcgd-ps-cardvalue.tcgd-ps-pos { color: var(--tcgd-positive); } .tcgd-ps-cardvalue.tcgd-ps-nop { color: var(--tcgd-text-muted); font-weight: 500; } .tcgd-ps-slotdots { display: flex; gap: 5px; justify-content: center; margin-top: 12px; } .tcgd-ps-slotdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--tcgd-surface-3); border: 1px solid var(--tcgd-border); } .tcgd-ps-slotdots i.tcgd-ps-done { background: var(--tcgd-accent); border-color: var(--tcgd-accent); } .tcgd-ps-slotdots i.tcgd-ps-hitdot { border-color: var(--tcgd-violet); } .tcgd-ps-slotdots i.tcgd-ps-hitdot.tcgd-ps-done { background: var(--tcgd-violet); } .tcgd-ps-taphint { font-size: 12px; color: var(--tcgd-text-muted); margin-top: 10px; } /* --- running totals stripe (reveal + done) --- */ .tcgd-ps-totals { display: flex; justify-content: center; gap: 18px; margin: 14px 16px 0; padding: 10px 12px; background: var(--tcgd-surface); border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius); font-variant-numeric: tabular-nums; } .tcgd-ps-totals div { text-align: center; } .tcgd-ps-totals dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tcgd-text-muted); margin: 0 0 1px; } .tcgd-ps-totals dd { font-size: 14.5px; font-weight: 700; margin: 0; } .tcgd-ps-neg { color: var(--tcgd-negative); } .tcgd-ps-posv { color: var(--tcgd-positive); } /* --- completion --- */ .tcgd-ps-result-head { font-size: 16px; font-weight: 800; margin: 2px 0 10px; } .tcgd-ps-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; margin: 0 0 12px; } .tcgd-ps-result-cell { padding: 8px 10px; background: var(--tcgd-surface-2); border-radius: var(--tcgd-radius); border: 1px solid var(--tcgd-border); } .tcgd-ps-result-cell dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tcgd-text-muted); margin: 0; } .tcgd-ps-result-cell dd { font-size: 15px; font-weight: 700; margin: 1px 0 0; font-variant-numeric: tabular-nums; } .tcgd-ps-best { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; margin-bottom: 12px; background: var(--tcgd-surface-2); border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius); } .tcgd-ps-best img { width: 44px; border-radius: var(--tcgd-radius-sm); display: block; } .tcgd-ps-best-name { font-size: 13.5px; font-weight: 700; } .tcgd-ps-best-sub { font-size: 12px; color: var(--tcgd-text-soft); } .tcgd-ps-ctas { display: flex; flex-direction: column; gap: 8px; } .tcgd-ps-ctas .tcgd-btn { width: 100%; min-height: 44px; justify-content: center; } .tcgd-ps-ctas a.tcgd-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; box-sizing: border-box; } /* RIP ANOTHER spans the widget; the explore/share buttons share rows. */ .tcgd-ps-rip-full { width: 100%; } .tcgd-ps-cta-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .tcgd-ps-finenote { font-size: 11.5px; color: var(--tcgd-text-muted); margin-top: 10px; line-height: 1.45; } /* ============================== session ============================= */ .tcgd-ps-session { margin: 14px 16px 0; } .tcgd-ps-session-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tcgd-text-muted); margin: 0 0 6px; } .tcgd-ps-session-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .tcgd-ps-session-grid .tcgd-ps-result-cell dd { font-size: 13px; } /* Best pulls: one row of small linked thumbs that fills the width and clips — the session may remember more cards than fit. */ .tcgd-ps-session-best { display: flex; gap: 6px; margin-top: 8px; flex-wrap: nowrap; overflow: hidden; } .tcgd-ps-bestthumb { flex: 0 0 auto; border-radius: var(--tcgd-radius-sm); display: block; } .tcgd-ps-bestthumb:focus-visible { outline: 2px solid var(--tcgd-accent); outline-offset: 2px; } .tcgd-ps-session-best img { width: 40px; border-radius: var(--tcgd-radius-sm); display: block; } /* Hover-to-zoom popup (.tcgd-ps-thumb-popup) is the shared component in product-explorer.css — one definition serves Research + Pack Sim. */ /* ============================= confetti ============================= */ .tcgd-ps-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .tcgd-ps-confetti i { position: absolute; top: 30%; left: 50%; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: tcgd-ps-confetti-fall 950ms ease-out forwards; } @keyframes tcgd-ps-confetti-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0turn); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); } } /* ============================ states etc ============================ */ .tcgd-ps-error { margin: 0 16px; } .tcgd-ps-notrans { transition: none !important; } /* =========================== reduced motion ========================= */ @media (prefers-reduced-motion: reduce) { #tcgd-pack-sim:empty::before, .tcgd-ps-loading { animation: none; opacity: 1; } .tcgd-ps-flip { transition: none; } .tcgd-ps-opening .tcgd-ps-pack-img { animation: none; opacity: 0; } .tcgd-ps-pack-btn:hover .tcgd-ps-pack-img { transform: none; } .tcgd-ps-confetti i { animation: none; opacity: 0; } } /* ============================== desktop ============================= */ @media (min-width: 720px) { #tcgd-pack-sim { max-width: 920px; } #tcgd-pack-sim:empty, .tcgd-ps-loading { max-width: 720px; margin: 0 auto; } .tcgd-ps-controls { flex-direction: row; align-items: flex-start; max-width: 720px; margin: 0 auto; } .tcgd-ps-select-wrap { flex: 1.2; } .tcgd-ps-weight { flex: 1; } .tcgd-ps-stage { max-width: 720px; margin: 0 auto; padding: 24px; } .tcgd-ps-totals, .tcgd-ps-session { max-width: 720px; margin-left: auto; margin-right: auto; } .tcgd-ps-flip { width: 240px; height: 336px; } .tcgd-ps-cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }