/* ============================================================================= CommunityHub — card-system.css All card system pages: Draw, Backpack, Gallery, Shop, Tasks ============================================================================= */ /* ============================================================================= Unified card tile — every card-system surface should use this so the visual presentation stays consistent. Uses --ch-card-aspect (default 4/3) and --ch-card-back from the runtime CSS variables in . ============================================================================= */ .ch-card-tile { width: 100%; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-xs); transition: transform 0.18s ease, box-shadow 0.18s ease; } .ch-card-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .ch-card-tile-face { width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); background-size: cover; background-position: center; background-color: var(--color-border-light); display: flex; align-items: center; justify-content: center; position: relative; } .ch-card-tile-emoji { font-size: 56px; opacity: 0.6; filter: grayscale(0.2); } .ch-card-tile-label { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; border-top: 1px solid var(--color-border-light); background: #fff; } .ch-card-tile-name { flex: 1; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Card back (used for unflipped cards / hidden gallery slots) ---- */ .ch-card-back-tile, .ch-card-tile.is-flipped .ch-card-tile-face { width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); border-radius: var(--radius-md); background-image: var(--ch-card-back, linear-gradient(135deg,#1f2a44,#2c3e64)); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } /* Card surface effects intentionally disabled: cards should show the artwork/back plainly. */ .ch-card-back-tile::after { content: none; display: none; } .ch-card-back-tile:hover::after { transform: none; } /* Rarity tints applied to the face background when no image */ .ch-rarity-common .ch-card-tile-face:not([style*="background-image"]) { background-color: #e5e7eb; } .ch-rarity-rare .ch-card-tile-face:not([style*="background-image"]) { background-color: #dbeafe; } .ch-rarity-epic .ch-card-tile-face:not([style*="background-image"]) { background-color: #ede9fe; } .ch-rarity-legend .ch-card-tile-face:not([style*="background-image"]) { background-color: #fef3c7; } /* ============================================================================= Achievements grid ============================================================================= */ .ch-achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-lg) 0; } .ch-achievement { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); position: relative; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .ch-achievement.is-unlocked { border-color: #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff 60%); box-shadow: 0 0 0 1px #f59e0b inset, 0 4px 14px rgba(245, 158, 11, 0.15); } .ch-achievement.is-locked { opacity: 0.78; } .ch-achievement:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .ch-achievement-icon { font-size: 36px; line-height: 1; width: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; flex-shrink: 0; filter: grayscale(0.6); transition: filter 0.2s ease; } .ch-achievement-icon .ch-icon { width: 1em; height: 1em; } .ch-achievement-reward { display: inline-flex; align-items: center; gap: 4px; } .ch-achievement.is-unlocked .ch-achievement-icon { filter: grayscale(0); } .ch-achievement-body { flex: 1; min-width: 0; } .ch-achievement-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); } .ch-achievement-desc { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 8px; } .ch-achievement-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ch-achievement-bar { flex: 1; height: 6px; background: var(--color-border-light); border-radius: 999px; overflow: hidden; } .ch-achievement-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 999px; transition: width 0.3s ease; } .ch-achievement.is-unlocked .ch-achievement-bar > span { background: linear-gradient(90deg, #16a34a, #4ade80); } .ch-achievement-progress-text { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .ch-achievement-reward { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .ch-achievement-badge { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 700; font-size: 12px; } /* Page headline */ .ch-page-headline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-3xl); font-weight: 800; color: var(--color-text-primary); margin: var(--spacing-lg) 0 var(--spacing-xl); line-height: 1.15; } .ch-page-headline .ch-icon { display: inline-block; flex: 0 0 auto; } /* ============================================================================= Lucky Draw Page ============================================================================= */ .ch-draw-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-draw-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; min-width: 0; } .ch-draw-arena { min-width: 0; max-width: 100%; } /* Currency bar */ .ch-draw-currency-bar { display: flex; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-md) var(--spacing-xl); margin-bottom: var(--spacing-md); } .ch-currency-item { display: flex; align-items: center; gap: var(--spacing-xs); } .ch-currency-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; } .ch-currency-icon .ch-icon, .ch-page-headline .ch-icon, .ch-section-title .ch-icon, .ch-task-icon .ch-icon, .ch-furnace-slot-empty .ch-icon, .ch-shop-back-link .ch-icon { width: 1em; height: 1em; } .ch-currency-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .ch-currency-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); } .ch-draw-stage-currency { position: absolute; left: 16px; top: 14px; z-index: 7; display: flex; align-items: center; gap: 14px; padding: 9px 13px; border: 1px solid rgba(255, 244, 196, 0.24); border-radius: 999px; background: rgba(7, 10, 28, 0.56); color: rgba(255, 249, 235, 0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(2, 6, 23, 0.2); } .ch-draw-stage-currency .ch-currency-label { color: rgba(226, 232, 240, 0.82); } .ch-draw-stage-currency .ch-currency-value { color: #fff8dc; } /* Draw stage */ .ch-draw-stage { background: radial-gradient(circle at 50% 72%, rgba(255, 246, 196, 0.34), transparent 23%), radial-gradient(circle at 50% 12%, rgba(124, 58, 237, 0.28), transparent 48%), linear-gradient(135deg, #08091d, #16113d 48%, #07142d); border-radius: var(--radius-lg); aspect-ratio: 16 / 7; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: var(--spacing-md); position: relative; border: 1px solid rgba(199, 210, 254, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -42px 90px rgba(2, 6, 23, 0.62), 0 24px 60px rgba(15, 23, 42, 0.18); isolation: isolate; } .ch-draw-stage::before { content: ''; position: absolute; inset: -12%; z-index: 2; pointer-events: none; background: radial-gradient(circle at 49% 74%, rgba(255, 246, 190, 0.22), transparent 18%), radial-gradient(circle at 74% 41%, rgba(255, 226, 144, 0.12), transparent 12%), radial-gradient(circle at 18% 66%, rgba(255, 226, 144, 0.1), transparent 11%); mix-blend-mode: screen; opacity: 0.36; transform: scale(1); animation: ch-draw-ambient-glow 7.2s ease-in-out infinite; } .ch-draw-stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 52% 67%, transparent 0 23%, rgba(6, 10, 28, 0.08) 52%, rgba(2, 4, 17, 0.5) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)); opacity: 1; transition: opacity 0.56s ease, filter 0.56s ease; } .ch-draw-art, .ch-draw-video { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; filter: saturate(1.12) contrast(1.06); pointer-events: none; transition: opacity 0.86s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.86s cubic-bezier(0.22, 0.61, 0.36, 1); } .ch-draw-video { z-index: 1; opacity: 0; transform: translateZ(0); transition: opacity 0.86s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.86s cubic-bezier(0.22, 0.61, 0.36, 1); background: #050816; } .ch-draw-stage.is-video-loading .ch-draw-art { opacity: 1; filter: saturate(1.2) contrast(1.08) brightness(1.08); } .ch-draw-stage.is-video-loading::after { opacity: 0.9; filter: brightness(1.16); } .ch-draw-stage.is-video-ready .ch-draw-video { opacity: 1; } .ch-draw-stage.is-video-ready .ch-draw-art { opacity: 0; filter: saturate(1.1) contrast(1.04) brightness(1.16); } .ch-draw-stage.is-drawing .ch-draw-art { opacity: 1; filter: saturate(1.22) contrast(1.1) brightness(1.04); } .ch-draw-stage.is-drawing::before { opacity: 0.56; animation-duration: 3.8s; } .ch-draw-stage.is-video-ready::before { opacity: 0.08; animation-duration: 8s; } .ch-draw-stage.is-video-crossfade::after { animation: ch-draw-video-join 1.04s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-art { opacity: 1; animation: ch-draw-art-exposure 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-art { opacity: 0; animation: none; filter: saturate(0.96) contrast(1.02) brightness(1.42); } .ch-draw-stage.is-video-bridge .ch-draw-sfx-float { opacity: 1; transform: none; } .ch-draw-sfx-float { position: absolute; right: 14px; top: 14px; z-index: 12; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid rgba(255, 244, 196, 0.24); border-radius: 999px; background: rgba(7, 10, 28, 0.58); color: rgba(255, 249, 235, 0.88); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; pointer-events: auto; backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(2, 6, 23, 0.2); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .ch-draw-stage.is-drawing .ch-draw-sfx-float, .ch-draw-stage.is-video-loading .ch-draw-sfx-float, .ch-draw-stage.is-video-ready .ch-draw-sfx-float, .ch-draw-stage.is-video-bridge .ch-draw-sfx-float { visibility: visible; opacity: 1; pointer-events: auto; } .ch-draw-sfx-float:hover { border-color: rgba(255, 244, 196, 0.48); background: rgba(11, 15, 38, 0.72); color: #fff8dc; transform: translateY(-1px); } .ch-draw-sfx-float[aria-pressed="false"] { color: rgba(226, 232, 240, 0.72); border-color: rgba(226, 232, 240, 0.18); background: rgba(7, 10, 28, 0.42); } .ch-draw-sfx-float .ch-icon { width: 16px; height: 16px; } .ch-draw-idle-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 1; transition: opacity 0.24s ease; } .ch-draw-stage.is-video-ready .ch-draw-idle-fx { opacity: 0; } .ch-draw-stage.is-video-loading .ch-draw-idle-fx { opacity: 0.16; } .ch-draw-idle-halo, .ch-draw-idle-particle { position: absolute; pointer-events: none; } .ch-draw-idle-halo { left: 50%; top: 74.5%; width: 32%; height: 14%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 50%, rgba(255, 242, 188, 0.42) 0 8%, rgba(250, 204, 21, 0.14) 30%, rgba(168, 85, 247, 0.07) 58%, transparent 78%); filter: blur(14px); animation: ch-draw-idle-halo 4.4s ease-in-out infinite; } .ch-draw-idle-particle { --x: 0px; --y: -8px; --size: 1; width: calc(4px * var(--size)); height: calc(4px * var(--size)); border-radius: 999px; background: rgba(255, 248, 205, 0.98); box-shadow: 0 0 7px rgba(255, 244, 196, 0.9), 0 0 16px rgba(250, 204, 21, 0.38), 0 0 26px rgba(168, 85, 247, 0.22); opacity: 0; transform: translate3d(0, 0, 0) scale(0.45); animation: ch-draw-idle-particle 3.8s ease-in-out infinite; } .ch-draw-idle-particle::before, .ch-draw-idle-particle::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255, 249, 218, 0.85); border-radius: 999px; transform: translate(-50%, -50%); } .ch-draw-idle-particle::before { width: calc(12px * var(--size)); height: 1px; } .ch-draw-idle-particle::after { width: 1px; height: calc(12px * var(--size)); } .ch-card-particle-1 { left: 16%; top: 64%; --x: -5px; --y: -10px; --size: 1.15; animation-delay: -0.1s; } .ch-card-particle-2 { left: 18.5%; top: 58%; --x: 7px; --y: -13px; --size: 0.72; animation-delay: -1.4s; } .ch-card-particle-3 { left: 32.5%; top: 53%; --x: -6px; --y: -11px; --size: 0.82; animation-delay: -2.6s; } .ch-card-particle-4 { left: 72.8%; top: 41.5%; --x: 8px; --y: -10px; --size: 0.95; animation-delay: -1.9s; } .ch-star-particle-1 { left: 42.3%; top: 48%; --x: -4px; --y: -14px; --size: 0.62; animation-delay: -0.8s; } .ch-star-particle-2 { left: 57.4%; top: 29%; --x: 5px; --y: -12px; --size: 0.78; animation-delay: -2.2s; } .ch-star-particle-3 { left: 63.5%; top: 21%; --x: 8px; --y: -16px; --size: 1; animation-delay: -1.2s; } .ch-star-particle-4 { left: 79.4%; top: 36.5%; --x: -6px; --y: -12px; --size: 0.7; animation-delay: -3s; } .ch-orbit-particle-1 { left: 45.5%; top: 67%; --x: -10px; --y: -8px; --size: 0.56; animation-delay: -1.7s; } .ch-orbit-particle-2 { left: 49%; top: 62.5%; --x: 7px; --y: -13px; --size: 0.68; animation-delay: -0.5s; } .ch-orbit-particle-3 { left: 54.4%; top: 70%; --x: 10px; --y: -7px; --size: 0.6; animation-delay: -2.9s; } .ch-orbit-particle-4 { left: 66.5%; top: 59%; --x: 9px; --y: -10px; --size: 0.52; animation-delay: -2.1s; } .ch-draw-burst-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: screen; opacity: 0; will-change: opacity; overflow: hidden; } .ch-draw-burst-fx::before, .ch-draw-burst-fx::after { content: ''; position: absolute; left: 50%; top: 74%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); will-change: opacity, transform, filter; } .ch-draw-burst-fx::before { width: 86%; height: 28%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 33%, rgba(255, 255, 255, 0.98) 50%, rgba(255, 255, 255, 0.22) 67%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.12) 60%, transparent 100%); background-size: 100% 1px, 54% 1px; background-position: center 50%, center calc(50% + 6px); background-repeat: no-repeat; filter: blur(0.2px); } .ch-draw-burst-fx::after { width: 46%; height: 44%; background: radial-gradient(circle at 38% 42%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px), radial-gradient(circle at 58% 32%, rgba(255, 255, 255, 0.66) 0 1px, transparent 2px), radial-gradient(circle at 64% 58%, rgba(255, 255, 255, 0.54) 0 1px, transparent 2px), radial-gradient(circle at 44% 68%, rgba(255, 255, 255, 0.46) 0 1px, transparent 2px); filter: blur(0.1px); } .ch-draw-stage.is-drawing .ch-draw-burst-fx { animation: ch-draw-burst-layer 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-draw-stage.is-video-ready .ch-draw-burst-fx { opacity: 0; animation: none; transition: opacity 0.54s ease; } .ch-draw-stage.is-video-bridge .ch-draw-burst-fx { opacity: 1; animation: none; } .ch-draw-stage.is-video-bridge .ch-draw-burst-fx::before { animation: ch-draw-bridge-flare-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-fx::after { animation: ch-draw-bridge-motes 1.02s ease-out both; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-fx::before, .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-fx::after { animation: ch-draw-bridge-flare-out 0.64s ease-out forwards; } .ch-draw-burst-core, .ch-draw-burst-bloom, .ch-draw-burst-wash, .ch-draw-burst-column, .ch-draw-burst-ring, .ch-draw-burst-ray, .ch-draw-burst-spark { position: absolute; pointer-events: none; will-change: opacity, transform, filter; } .ch-draw-burst-core { left: 50%; top: 74%; width: min(36%, 420px); height: min(24%, 180px); border-radius: 999px; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 1) 0 5%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0.44) 32%, rgba(255, 255, 255, 0.14) 54%, transparent 76%); box-shadow: 0 0 28px rgba(255, 255, 255, 0.72), 0 0 90px rgba(255, 255, 255, 0.44); filter: blur(7px); transform: translate(-50%, -50%) scale(0.34); opacity: 0; } .ch-draw-burst-core::before, .ch-draw-burst-core::after { content: ''; position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); } .ch-draw-burst-core::before { width: 16%; height: 8%; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 34px rgba(255, 255, 255, 0.86); filter: blur(1px); } .ch-draw-burst-core::after { width: 82%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent); filter: blur(0.2px); } .ch-draw-stage.is-drawing .ch-draw-burst-core { animation: ch-draw-burst-core 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-core { animation: ch-draw-bridge-core 0.86s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-core::before, .ch-draw-stage.is-video-bridge .ch-draw-burst-core::after { animation: ch-draw-bridge-core-detail 0.82s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-core { animation: none; opacity: 0; } .ch-draw-burst-bloom { inset: -6%; background: radial-gradient(ellipse at 50% 74%, rgba(255, 255, 255, 0.92) 0 4%, rgba(255, 255, 255, 0.58) 14%, rgba(255, 255, 255, 0.26) 30%, rgba(255, 255, 255, 0.08) 48%, transparent 68%), radial-gradient(ellipse at 50% 86%, rgba(255, 255, 255, 0.42) 0 10%, rgba(255, 255, 255, 0.14) 32%, transparent 62%); filter: blur(9px); transform: scale(0.82); opacity: 0; } .ch-draw-stage.is-drawing .ch-draw-burst-bloom { animation: ch-draw-burst-panel 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-bloom { animation: ch-draw-bridge-panel-in 0.88s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-bloom { animation: ch-draw-bridge-panel-out 0.76s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .ch-draw-burst-wash { inset: -12%; background: radial-gradient(ellipse at 50% 74%, rgba(255, 255, 255, 0.78) 0 4%, rgba(255, 255, 255, 0.44) 16%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.06) 54%, transparent 76%); filter: blur(18px); transform: scale(0.82); opacity: 0; } .ch-draw-stage.is-drawing .ch-draw-burst-wash { animation: ch-draw-burst-wash 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-wash { animation: ch-draw-bridge-wash 0.86s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-wash { animation: ch-draw-bridge-wash-out 0.7s ease-out forwards; } .ch-draw-burst-column, .ch-draw-burst-ring, .ch-draw-burst-ray, .ch-draw-burst-spark { opacity: 0; } .ch-draw-burst-column { left: 50%; bottom: 22%; width: 12%; height: 72%; transform: translateX(-50%) scaleY(0.08); transform-origin: 50% 100%; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.5) 76%, transparent 100%); clip-path: polygon(47% 0, 53% 0, 78% 100%, 22% 100%); filter: blur(9px); } .ch-draw-burst-ring { left: 50%; top: 74%; width: 34%; height: 13%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); transform: translate(-50%, -50%) scale(0.7); filter: blur(0.2px); } .ch-draw-burst-ring-2 { width: 24%; height: 9%; border-color: rgba(255, 255, 255, 0.3); } .ch-draw-burst-ray { left: 50%; top: 74%; width: 44%; height: 1px; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleX(0.2); transform-origin: 50% 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent); filter: blur(0.2px); } .ch-draw-burst-ray-1 { --ray-rotate: -8deg; } .ch-draw-burst-ray-2 { --ray-rotate: 12deg; width: 30%; } .ch-draw-burst-ray-3 { --ray-rotate: 90deg; width: 12%; } .ch-draw-burst-spark { left: 50%; top: 74%; width: 3px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 10px rgba(255, 255, 255, 0.88); filter: blur(0.1px); transform: translate(-50%, -50%) scale(0.45); } .ch-draw-burst-spark-1 { --x: -76px; --y: -28px; --s: 0.75; } .ch-draw-burst-spark-2 { --x: 62px; --y: -36px; --s: 0.6; } .ch-draw-burst-spark-3 { --x: -28px; --y: 22px; --s: 0.52; } .ch-draw-burst-spark-4 { --x: 82px; --y: 18px; --s: 0.66; } .ch-draw-stage.is-video-bridge .ch-draw-burst-ring { animation: ch-draw-bridge-ring 0.92s ease-out both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-column { animation: ch-draw-bridge-column 0.94s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-ring-2 { animation-delay: 0.08s; } .ch-draw-stage.is-video-bridge .ch-draw-burst-ray { animation: ch-draw-bridge-ray 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-ray-2 { animation-delay: 0.04s; } .ch-draw-stage.is-video-bridge .ch-draw-burst-ray-3 { animation-delay: 0.1s; } .ch-draw-stage.is-video-bridge .ch-draw-burst-spark { animation: ch-draw-bridge-spark 0.82s ease-out both; } .ch-draw-stage.is-video-bridge .ch-draw-burst-spark-2 { animation-delay: 0.04s; } .ch-draw-stage.is-video-bridge .ch-draw-burst-spark-3 { animation-delay: 0.08s; } .ch-draw-stage.is-video-bridge .ch-draw-burst-spark-4 { animation-delay: 0.12s; } .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-ring, .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-column, .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-ray, .ch-draw-stage.is-video-bridge-releasing .ch-draw-burst-spark { animation: ch-draw-bridge-flare-out 0.46s ease-out forwards; } .ch-draw-summon-fx { position: absolute; left: 50%; top: 76%; z-index: 5; width: min(54%, 540px); aspect-ratio: 2.6 / 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 0.24s ease; } .ch-draw-stage.is-drawing:not(.is-video-ready) .ch-draw-summon-fx { opacity: 0; } .ch-draw-stage.is-video-loading .ch-draw-summon-fx { opacity: 0; } .ch-draw-stage.is-video-ready .ch-draw-summon-fx { opacity: 0; } .ch-draw-summon-core, .ch-draw-summon-ring, .ch-draw-summon-beam, .ch-draw-summon-spark { position: absolute; pointer-events: none; } .ch-draw-summon-core { left: 50%; top: 50%; width: 42%; height: 48%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 50%, rgba(255, 244, 196, 0.88) 0 10%, rgba(236, 211, 255, 0.56) 22%, rgba(129, 140, 248, 0.22) 52%, transparent 74%); filter: blur(8px); animation: ch-draw-core-pulse 2.6s ease-in-out infinite; } .ch-draw-summon-beam { left: 50%; bottom: 34%; width: 18%; height: 112%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(244, 214, 255, 0.24) 24%, rgba(255, 248, 210, 0.46) 72%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(12px); opacity: 0.72; animation: ch-draw-beam-breathe 3.2s ease-in-out infinite; } .ch-draw-summon-ring { left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 236, 179, 0.72); transform: translate(-50%, -50%); box-shadow: 0 0 16px rgba(251, 191, 36, 0.28), inset 0 0 18px rgba(168, 85, 247, 0.18); } .ch-draw-summon-ring-1 { width: 82%; height: 52%; animation: ch-draw-ring-drift 6s linear infinite; } .ch-draw-summon-ring-2 { width: 58%; height: 34%; opacity: 0.74; animation: ch-draw-ring-drift 4.8s linear reverse infinite; } .ch-draw-summon-ring-3 { width: 36%; height: 22%; opacity: 0.62; animation: ch-draw-ring-pulse 2.8s ease-in-out infinite; } .ch-draw-summon-spark { --x: 0px; --y: -40px; --s: 1; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 999px; background: #fff7c2; box-shadow: 0 0 8px rgba(255, 244, 196, 0.9), 0 0 18px rgba(168, 85, 247, 0.42); opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)); animation: ch-draw-spark-float 3.4s ease-in-out infinite; } .ch-draw-summon-spark-1 { left: 34%; top: 50%; --x: -42px; --y: -46px; --s: 0.9; animation-delay: -0.4s; } .ch-draw-summon-spark-2 { left: 45%; top: 42%; --x: -18px; --y: -62px; --s: 0.66; animation-delay: -1.2s; } .ch-draw-summon-spark-3 { left: 56%; top: 45%; --x: 22px; --y: -56px; --s: 1.05; animation-delay: -2s; } .ch-draw-summon-spark-4 { left: 66%; top: 54%; --x: 46px; --y: -34px; --s: 0.74; animation-delay: -2.7s; } .ch-draw-summon-spark-5 { left: 42%; top: 64%; --x: -24px; --y: 22px; --s: 0.82; animation-delay: -1.7s; } .ch-draw-summon-spark-6 { left: 59%; top: 62%; --x: 30px; --y: 14px; --s: 0.68; animation-delay: -0.8s; } .ch-draw-stage.is-drawing .ch-draw-summon-core { animation-duration: 0.9s; } .ch-draw-stage.is-drawing .ch-draw-summon-beam { opacity: 0.95; animation-duration: 1.2s; } .ch-draw-stage.is-drawing .ch-draw-summon-ring { border-color: rgba(255, 247, 210, 0.9); } .ch-draw-cards-container { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; } .ch-draw-stage-results { display: grid; width: min(88%, 620px); max-height: min(82%, calc(100% - 112px)); gap: 10px; align-items: center; justify-content: center; margin-top: 0; } .ch-draw-stage-results.is-single { width: min(24%, 180px); min-width: 132px; grid-template-columns: 1fr; } .ch-draw-stage-results.is-multi { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ch-draw-stage-results .ch-result-card { width: 100%; max-width: none; border-width: 1px; background: transparent; box-shadow: 0 14px 26px rgba(2, 6, 23, 0.24); } .ch-draw-stage-results .ch-result-card-inner, .ch-draw-stage-results .ch-result-card-img { height: 100%; } .ch-draw-stage-results .ch-result-card-img { background: transparent; } @keyframes ch-draw-ambient-glow { 0%, 100% { opacity: 0.28; transform: scale(0.98); } 50% { opacity: 0.44; transform: scale(1.03); } } @keyframes ch-draw-video-join { 0% { opacity: 0.98; filter: brightness(1.62) saturate(1.02); } 38% { opacity: 0.9; filter: brightness(1.34) saturate(1.01); } 72% { opacity: 0.72; filter: brightness(1.12) saturate(1); } 100% { opacity: 1; filter: brightness(1) saturate(1); } } @keyframes ch-draw-art-exposure { 0% { filter: saturate(1.16) contrast(1.08) brightness(1.05); } 42% { filter: saturate(1.08) contrast(1.06) brightness(1.34); } 100% { filter: saturate(0.96) contrast(1.02) brightness(1.68); } } @keyframes ch-draw-burst-layer { 0% { opacity: 0; } 3% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes ch-draw-burst-core { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 34% { opacity: 1; transform: translate(-50%, -50%) scale(38); } 58% { opacity: 0.56; transform: translate(-50%, -50%) scale(62); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(74); } } @keyframes ch-draw-burst-panel { 0% { opacity: 0; } 24% { opacity: 0; } 38% { opacity: 0.9; } 54% { opacity: 1; } 68% { opacity: 0.92; } 100% { opacity: 0; } } @keyframes ch-draw-burst-wash { 0% { opacity: 0; filter: blur(6px); transform: scale(0.32); } 18% { opacity: 0.62; filter: blur(8px); transform: scale(0.62); } 42% { opacity: 1; filter: blur(10px); transform: scale(1); } 68% { opacity: 0.62; filter: blur(14px); transform: scale(1.12); } 100% { opacity: 0; filter: blur(16px); transform: scale(1.18); } } @keyframes ch-draw-bridge-core { 0% { opacity: 0; filter: blur(10px); transform: translate(-50%, -50%) scale(0.32); } 18% { opacity: 0.74; filter: blur(8px); transform: translate(-50%, -50%) scale(0.54); } 64% { opacity: 0.95; filter: blur(11px); transform: translate(-50%, -50%) scale(1.02); } 100% { opacity: 0.72; filter: blur(15px); transform: translate(-50%, -50%) scale(1.2); } } @keyframes ch-draw-bridge-core-detail { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.32); } 22% { opacity: 0.9; transform: translate(-50%, -50%) scaleX(0.74); } 66% { opacity: 0.72; transform: translate(-50%, -50%) scaleX(1.08); } 100% { opacity: 0.18; transform: translate(-50%, -50%) scaleX(1.18); } } @keyframes ch-draw-bridge-panel-in { 0% { opacity: 0; filter: blur(12px); transform: scale(0.74); } 34% { opacity: 0.28; filter: blur(10px); transform: scale(0.86); } 74% { opacity: 0.62; filter: blur(12px); transform: scale(1.04); } 100% { opacity: 0.7; filter: blur(16px); transform: scale(1.12); } } @keyframes ch-draw-bridge-panel-out { 0% { opacity: 0.7; filter: blur(16px); transform: scale(1.12); } 28% { opacity: 0.5; filter: blur(18px); transform: scale(1.18); } 100% { opacity: 0; filter: blur(22px); transform: scale(1.32); } } @keyframes ch-draw-bridge-wash { 0% { opacity: 0; filter: blur(18px); transform: scale(0.76); } 42% { opacity: 0.24; filter: blur(20px); transform: scale(0.9); } 100% { opacity: 0.42; filter: blur(24px); transform: scale(1.12); } } @keyframes ch-draw-bridge-wash-out { 0% { opacity: 0.34; filter: blur(24px); transform: scale(1.12); } 100% { opacity: 0; filter: blur(28px); transform: scale(1.28); } } @keyframes ch-draw-bridge-flare-line { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.32); } 30% { opacity: 0.8; transform: translate(-50%, -50%) scaleX(0.78); } 100% { opacity: 0.3; transform: translate(-50%, -50%) scaleX(1.08); } } @keyframes ch-draw-bridge-motes { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); } 38% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.18; transform: translate(-50%, -58%) scale(1.1); } } @keyframes ch-draw-bridge-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58); } 32% { opacity: 0.52; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); } } @keyframes ch-draw-bridge-column { 0% { opacity: 0; transform: translateX(-50%) scaleY(0.08); } 28% { opacity: 0.44; transform: translateX(-50%) scaleY(0.58); } 66% { opacity: 0.58; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0.2; transform: translateX(-50%) scaleY(1.08); } } @keyframes ch-draw-bridge-ray { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleX(0.16); } 28% { opacity: 0.86; } 100% { opacity: 0.22; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleX(1); } } @keyframes ch-draw-bridge-spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); } 32% { opacity: 0.82; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)); } } @keyframes ch-draw-bridge-flare-out { to { opacity: 0; } } @keyframes ch-draw-burst-column { 0% { opacity: 0; transform: translateX(-50%) scaleY(0.08); } 22% { opacity: 0.98; transform: translateX(-50%) scaleY(1); } 68% { opacity: 0.46; transform: translateX(-50%) scaleY(1.08); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.18); } } @keyframes ch-draw-burst-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); } 16% { opacity: 0.94; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } } @keyframes ch-draw-burst-ray { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleY(0.14); } 24% { opacity: 0.88; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleY(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-rotate, 0deg)) scaleY(1.14); } } @keyframes ch-draw-burst-spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(var(--s)); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.22); } } @keyframes ch-draw-core-pulse { 0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } } @keyframes ch-draw-beam-breathe { 0%, 100% { opacity: 0.42; transform: translateX(-50%) scaleX(0.86); } 50% { opacity: 0.86; transform: translateX(-50%) scaleX(1.08); } } @keyframes ch-draw-ring-drift { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes ch-draw-ring-pulse { 0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 0.84; transform: translate(-50%, -50%) scale(1.08); } } @keyframes ch-draw-spark-float { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)); } 18% { opacity: 0.95; } 72% { opacity: 0.74; } 100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(0.22); } } @keyframes ch-draw-idle-halo { 0%, 100% { opacity: 0.48; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.08); } } @keyframes ch-draw-idle-particle { 0%, 100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0) scale(0.42); } 18% { opacity: 0.86; transform: translate3d(calc(var(--x) * 0.28), calc(var(--y) * 0.28), 0) scale(calc(var(--size) * 0.92)); } 46% { opacity: 0.56; filter: blur(0.2px); transform: translate3d(calc(var(--x) * 0.68), calc(var(--y) * 0.68), 0) scale(calc(var(--size) * 1.08)); } 78% { opacity: 0.2; transform: translate3d(var(--x), var(--y), 0) scale(0.5); } } /* ============================================================================= Animation stage — single mode centers one card; multi mode is a strict 2×5 grid so 10-pulls always read as two rows of five, regardless of viewport. ============================================================================= */ .ch-draw-anim-stage { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--spacing-xl); width: 100%; } .ch-draw-anim-stage.ch-anim-single { display: flex; justify-content: center; } .ch-draw-anim-stage.ch-anim-single .ch-draw-anim-card { width: 140px; } .ch-draw-anim-stage.ch-anim-multi { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, auto); gap: 10px; max-width: 600px; margin: 0 auto; justify-items: stretch; } .ch-draw-anim-card { width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); height: auto; border-radius: var(--radius-md); perspective: 600px; animation: ch-card-flip 0.6s ease both; } .ch-draw-anim-card-inner { width: 100%; height: 100%; transform-style: preserve-3d; animation: ch-card-spin 1.5s ease-in-out infinite alternate; } .ch-draw-anim-card-back { width: 100%; height: 100%; background: var(--ch-card-back, linear-gradient(135deg, #4f46e5, #7c3aed)); background-size: cover; background-position: center; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,0.85); text-shadow: 0 2px 6px rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.3); box-shadow: 0 0 18px rgba(139,92,246,0.45), inset 0 0 30px rgba(0,0,0,0.15); position: relative; overflow: hidden; } /* Card-back sweep effect disabled so uploaded backs render plainly. */ .ch-draw-anim-card-back::after { content: none; display: none; } /* Hide the emoji symbol when the back image is present */ .ch-card-back-symbol { opacity: 0.55; } @keyframes ch-card-flip { from { transform: rotateY(-180deg) scale(0.5); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } } @keyframes ch-card-spin { from { transform: rotateY(0deg); } to { transform: rotateY(20deg); } } /* Draw controls */ .ch-draw-controls { padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .ch-draw-stage-actions { position: static; width: 100%; margin-top: var(--spacing-sm); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .ch-draw-stage.is-drawing + .ch-draw-stage-actions, .ch-draw-stage.is-video-loading + .ch-draw-stage-actions, .ch-draw-stage.is-video-ready + .ch-draw-stage-actions, .ch-draw-stage.is-video-bridge + .ch-draw-stage-actions { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); } .ch-draw-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 16px); } .ch-draw-mode-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 68px; padding: 12px 14px; border: 1px solid rgba(255, 244, 196, 0.26); border-radius: var(--radius-md); background: rgba(7, 10, 28, 0.56); color: rgba(255, 249, 235, 0.92); cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); } .ch-draw-mode-btn:hover { border-color: rgba(255, 244, 196, 0.52); background: rgba(11, 15, 38, 0.76); transform: translateY(-1px); } .ch-draw-mode-btn.is-active { border-color: rgba(255, 114, 74, 0.92); background: rgba(255, 255, 255, 0.9); color: #111827; } .ch-draw-mode-btn.is-drawing { opacity: 0.82; cursor: wait; animation: ch-pulse 1s ease infinite; } .ch-draw-mode-title { font-weight: 800; font-size: var(--font-size-md); } .ch-draw-mode-cost { font-size: var(--font-size-xs); color: currentColor; opacity: 0.72; } .ch-draw-pay-selector { display: flex; gap: var(--spacing-xl); } .ch-pay-opt { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); cursor: pointer; } .ch-draw-main-btn { height: 52px; font-size: var(--font-size-lg); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); transition: all var(--transition-base); } .ch-draw-main-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,102,204,0.4); } .ch-draw-main-btn.is-drawing { animation: ch-pulse 1s ease infinite; } .ch-draw-notice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: calc(var(--spacing-sm) * -1); padding: 11px 14px; border: 1px solid rgba(245, 158, 11, 0.32); border-radius: var(--radius-md); background: rgba(255, 247, 237, 0.94); color: #7c2d12; font-size: var(--font-size-sm); font-weight: 700; line-height: 1.35; } .ch-draw-notice .ch-icon { width: 18px; height: 18px; flex: 0 0 auto; } html[data-theme="dark"] .ch-draw-notice { border-color: rgba(251, 191, 36, 0.34); background: rgba(69, 45, 12, 0.52); color: #fde68a; } @keyframes ch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Pity bar */ .ch-pity-bar { display: flex; flex-direction: column; gap: 4px; } .ch-pity-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); } .ch-pity-track { height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .ch-pity-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-rarity-epic)); border-radius: var(--radius-pill); transition: width var(--transition-slow); } .ch-pity-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } /* Draw results panel */ .ch-draw-results { padding: var(--spacing-xl); } .ch-draw-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lg); } .ch-draw-results-title { font-size: var(--font-size-2xl); font-weight: 800; } #ch-draw-result-summary { font-size: var(--font-size-sm); color: var(--color-text-muted); } .ch-draw-results-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: auto; width: 100%; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); justify-items: stretch; } /* 10-draw: force exactly 2 rows × 5 columns */ .ch-draw-results-grid.is-multi { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, auto); } /* Single draw: center one big card instead of 1/5 column */ .ch-draw-results-grid.is-single { grid-template-columns: minmax(160px, 220px) !important; grid-template-rows: auto; justify-content: center; } .ch-draw-results-grid.is-single .ch-result-card { width: 100%; max-width: none; } .ch-draw-results-grid.is-single .ch-result-card-img { aspect-ratio: var(--ch-card-aspect, 9/16); height: auto; } .ch-draw-results-grid.is-single .ch-result-card-title { font-size: var(--font-size-md); } .ch-draw-results-grid .ch-result-card { width: 100%; max-width: 130px; } .ch-result-card { border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--rarity-color, var(--color-border)); background: var(--color-card); animation: ch-result-appear 0.4s ease both; cursor: default; } .ch-result-card-flat { display: block; width: 100%; padding: 0; appearance: none; text-align: left; cursor: pointer; } .ch-draw-stage-results .ch-result-card-flat { background: var(--color-card); border-color: var(--rarity-color, var(--color-border)); } .ch-result-card-flat:hover { filter: brightness(1.04); } .ch-result-card-flat:focus-visible { outline: 3px solid rgba(255, 244, 196, 0.72); outline-offset: 3px; } @keyframes ch-result-appear { from { transform: scale(0.5) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .ch-result-card-inner { display: flex; flex-direction: column; } .ch-result-card-img { width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); overflow: hidden; background: var(--color-bg); background-size: cover; background-position: center; } .ch-result-card-img img { width: 100%; height: 100%; object-fit: cover; } .ch-result-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--color-bg); } .ch-result-card-info { padding: 6px; display: flex; flex-direction: column; gap: 3px; } .ch-result-card-title { font-size: 11px; font-weight: 600; color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* Rarity glow animation */ .ch-rarity-glow-anim { animation: ch-glow 1.5s ease-in-out 3; } @keyframes ch-glow { 0%, 100% { box-shadow: 0 0 6px var(--rarity-color, transparent); } 50% { box-shadow: 0 0 20px var(--rarity-color, transparent), 0 0 40px var(--rarity-color, transparent); } } .ch-draw-results-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } /* Probability rows */ .ch-prob-row { display: flex; align-items: center; gap: var(--spacing-sm); padding: 6px 0; border-bottom: 1px solid var(--color-border-light); } .ch-prob-row:last-child { border-bottom: none; } .ch-prob-bar-track { flex: 1; height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .ch-prob-bar-fill { height: 100%; border-radius: var(--radius-pill); } .ch-prob-pct { font-size: var(--font-size-xs); font-weight: 700; width: 32px; text-align: right; } /* Draw history */ .ch-history-row { display: flex; align-items: center; gap: var(--spacing-sm); padding: 6px 0; border-bottom: 1px solid var(--color-border-light); flex-wrap: wrap; } .ch-history-row:last-child { border-bottom: none; } .ch-history-cards { display: flex; gap: 3px; margin-left: auto; } .ch-history-dot { width: 10px; height: 10px; border-radius: 50%; } .ch-rarity-dot-legend { background: var(--color-rarity-legend); } .ch-rarity-dot-epic { background: var(--color-rarity-epic); } .ch-rarity-dot-rare { background: var(--color-rarity-rare); } .ch-rarity-dot-common { background: var(--color-rarity-common); } /* Draw sidebar */ .ch-draw-sidebar { display: flex; flex-direction: column; gap: var(--spacing-md); position: sticky; top: calc(var(--nav-height) + 16px); } /* ============================================================================= Card grid (shared by backpack + gallery) ============================================================================= */ .ch-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; margin-top: var(--spacing-lg); } .ch-card-item-card { border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid rgba(148, 163, 184, 0.28); overflow: hidden; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast); cursor: default; } .ch-card-item-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .ch-card-item-inner { display: flex; flex-direction: column; } .ch-card-item-img-wrap { position: relative; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); overflow: hidden; background: var(--color-bg); } .ch-card-item-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .ch-card-item-card:hover .ch-card-item-img-wrap img { transform: scale(1.05); } .ch-card-item-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; } .ch-rarity-bg-legend { background: linear-gradient(135deg,#78350f,#92400e); } .ch-rarity-bg-epic { background: linear-gradient(135deg,#4c1d95,#6d28d9); } .ch-rarity-bg-rare { background: linear-gradient(135deg,#1e3a5f,#1d4ed8); } .ch-rarity-bg-common { background: linear-gradient(135deg,#374151,#4b5563); } .ch-card-unknown-bg { background: var(--color-bg); } .ch-card-qty-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill); } .ch-card-owned-checkmark { position: absolute; top: 6px; left: 6px; background: var(--color-success); color: #fff; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ch-card-item-info { padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 4px; } .ch-card-item-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); line-height: 1.3; margin: 0; } .ch-card-no { font-size: var(--font-size-xs); color: var(--color-text-muted); } .ch-card-item-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 10px 10px; } .ch-card-item-actions .ch-btn { flex: 1 1 auto; min-width: 0; } /* Rarity glow borders */ .ch-rarity-glow-legend { border-color: rgba(245,158,11,0.85); box-shadow: 0 10px 26px rgba(245,158,11,0.18), 0 0 0 1px rgba(245,158,11,0.26); } .ch-rarity-glow-epic { border-color: rgba(139,92,246,0.78); box-shadow: 0 10px 26px rgba(139,92,246,0.16), 0 0 0 1px rgba(139,92,246,0.22); } .ch-rarity-glow-rare { border-color: rgba(59,130,246,0.62); box-shadow: 0 10px 24px rgba(59,130,246,0.10); } .ch-rarity-glow-common { border-color: var(--color-border); } /* Unowned card overlay (gallery) */ .is-unowned { opacity: 0.68; filter: grayscale(45%); } .is-unowned:hover { opacity: 0.9; filter: grayscale(20%); } .ch-card-unowned-img { filter: brightness(0.3) blur(1px); } /* ============================================================================= Backpack page ============================================================================= */ .ch-backpack-page { padding: var(--spacing-xl) 0 var(--spacing-3xl); } .ch-backpack-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); padding: 22px 24px; margin-bottom: var(--spacing-lg); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)), linear-gradient(90deg, rgba(0,102,204,0.08), rgba(16,185,129,0.08)); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06); } .ch-backpack-summary { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .ch-album-subtitle { max-width: 720px; margin: -12px 0 0; } .ch-backpack-filters { padding: var(--spacing-md) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); } .ch-filter-group { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; } .ch-filter-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: var(--spacing-xs); } .ch-filter-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-xs); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .ch-filter-chip:hover, .ch-filter-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ============================================================================= Card Gallery page ============================================================================= */ .ch-gallery-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-gallery-header { margin-bottom: var(--spacing-lg); } .ch-gallery-progress { padding: var(--spacing-lg) var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-md); border: 1px solid rgba(148, 163, 184, 0.22); } .ch-gallery-progress-main { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .ch-gallery-progress-stat { display: flex; align-items: baseline; gap: var(--spacing-xs); } .ch-gallery-progress-bar-wrap { flex: 1; display: flex; align-items: center; gap: var(--spacing-sm); min-width: 160px; } .ch-gallery-progress-bar { flex: 1; height: 10px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .ch-gallery-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-rarity-legend)); border-radius: var(--radius-pill); transition: width 0.5s ease; } .ch-gallery-progress-pct { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); } .ch-series-progress-row { display: flex; gap: var(--spacing-sm); overflow-x: auto; padding-bottom: 4px; } .ch-series-prog-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; } .ch-series-prog-bar { width: 8px; height: 40px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; display: flex; align-items: flex-end; } .ch-series-prog-fill { width: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: height 0.5s ease; } .ch-series-prog-label { font-size: 10px; color: var(--color-text-muted); text-align: center; word-break: break-all; } .ch-gallery-controls { padding: var(--spacing-md) var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); } .ch-gallery-search { display: flex; gap: var(--spacing-sm); align-items: center; } .ch-gallery-grid .ch-card-item-card { cursor: pointer; } .ch-album-grid .ch-card-item-card.is-owned, .ch-album-grid .ch-card-item-card.is-unowned { cursor: pointer; } .ch-album-grid .is-unowned .ch-card-item-title { color: var(--color-text-primary); } .ch-album-grid .is-unowned .ch-card-back-tile { filter: grayscale(1) brightness(0.82); } .ch-gallery-page.ch-backpack-page { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .ch-backpack-page .ch-backpack-header { padding: 6px 0 10px; margin-bottom: var(--spacing-md); border: 0; border-radius: 0; background: transparent; box-shadow: none; } .ch-backpack-page .ch-page-headline { margin-bottom: 6px; } .ch-backpack-page .ch-gallery-progress, .ch-backpack-page .ch-gallery-controls { background: rgba(255, 255, 255, 0.86); border-color: rgba(203, 213, 225, 0.64); border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04); } .ch-album-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 112px)); gap: 12px; align-items: start; justify-content: start; padding: 0 0 var(--spacing-md); margin-top: 0; } .ch-album-card { appearance: none; width: 100%; padding: 0; border-width: 1px; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: inherit; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); } .ch-album-card:hover, .ch-album-card:focus-visible { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 24px rgba(15, 23, 42, 0.1); outline: none; } .ch-album-card:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 14px 24px rgba(15, 23, 42, 0.1); } .ch-album-card .ch-card-item-inner, .ch-album-card .ch-card-item-img-wrap { border-radius: 6px; overflow: hidden; background: #f8fafc; } .ch-backpack-rarity-rows { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .ch-backpack-rarity-row { padding-top: 2px; } .ch-backpack-rarity-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.28); } .ch-backpack-rarity-head h2 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-lg); font-weight: 800; } .ch-backpack-rarity-head span { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; } .ch-album-card .ch-card-item-img-wrap img { display: block; transform: none; } .ch-album-card:hover .ch-card-item-img-wrap img { transform: scale(1.025); } .ch-card-rarity-border-common { border-color: #d1d5db; } .ch-card-rarity-border-rare { border-color: #3b82f6; } .ch-card-rarity-border-epic { border-color: #8b5cf6; } .ch-card-rarity-border-legend { border-color: #f59e0b; } .ch-album-card.is-unowned { opacity: 1; filter: none; background: #f8fafc; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035); } .ch-album-card.is-unowned img { filter: grayscale(1) saturate(0) contrast(0.82) brightness(1.16); opacity: 0.34; } .ch-album-card.is-unowned .ch-card-item-placeholder { filter: grayscale(1) saturate(0) contrast(0.82) brightness(1.16); opacity: 0.34; } .ch-album-card.is-unowned .ch-card-item-img-wrap::after, .ch-card-focus-card.is-unowned .ch-card-item-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.64)), repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 9px); pointer-events: none; } .ch-album-card.is-unowned .ch-card-back-tile { display: flex; align-items: center; justify-content: center; filter: none; color: rgba(100, 116, 139, 0.36); } .ch-album-card.is-unowned .ch-card-back-tile.has-card-back .ch-card-placeholder-icon { opacity: 0; } .ch-album-card.is-unowned.ch-card-rarity-border-common { border-color: rgba(209, 213, 219, 0.86); } .ch-album-card.is-unowned.ch-card-rarity-border-rare { border-color: rgba(59, 130, 246, 0.48); } .ch-album-card.is-unowned.ch-card-rarity-border-epic { border-color: rgba(139, 92, 246, 0.48); } .ch-album-card.is-unowned.ch-card-rarity-border-legend { border-color: rgba(245, 158, 11, 0.54); } .ch-card-focus-overlay { padding: clamp(18px, 5vw, 48px); background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(14px) saturate(0.96); } .ch-card-focus-stage { --ch-focus-stage-width: min(94vw, 560px); --ch-focus-card-width: min(68vw, 260px, calc((100vh - 310px) * 9 / 16)); position: relative; width: var(--ch-focus-stage-width); min-height: min(82vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .ch-card-focus-meta { width: min(88vw, 420px); min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42); animation: ch-card-focus-actions-in 0.28s ease both; } .ch-card-focus-title, .ch-card-focus-no { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-card-focus-title { font-size: clamp(18px, 4vw, 25px); line-height: 1.18; font-weight: 900; } .ch-card-focus-no { min-height: 1.2em; color: rgba(255, 255, 255, 0.78); font-size: clamp(12px, 2.8vw, 14px); line-height: 1.2; font-weight: 800; letter-spacing: 0; } .ch-card-focus-overlay:not(.has-card-no) .ch-card-focus-no { display: none; } .ch-card-focus-card { position: relative; width: var(--ch-focus-card-width); max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; } .ch-card-focus-card.is-unowned { opacity: 1; filter: none; } .ch-card-focus-card.is-unowned .ch-card-item-front img, .ch-card-focus-card.is-unowned .ch-card-item-placeholder { filter: grayscale(1) saturate(0) contrast(0.82) brightness(1.16); opacity: 0.38; } .ch-card-focus-card .ch-card-item-inner { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36); animation: ch-card-focus-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .ch-card-focus-card.ch-card-rarity-border-common .ch-card-item-inner { border-color: #d1d5db; } .ch-card-focus-card.ch-card-rarity-border-rare .ch-card-item-inner { border-color: #3b82f6; } .ch-card-focus-card.ch-card-rarity-border-epic .ch-card-item-inner { border-color: #8b5cf6; } .ch-card-focus-card.ch-card-rarity-border-legend .ch-card-item-inner { border-color: #f59e0b; } .ch-card-focus-card .ch-card-item-img-wrap { border-radius: 18px; } .ch-card-focus-card img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; } .ch-card-focus-actions { position: relative; z-index: 8; width: var(--ch-focus-stage-width); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; animation: ch-card-focus-actions-in 0.32s ease 0.08s both; } .ch-card-focus-actions .ch-btn { position: relative; z-index: 9; min-width: 0; min-height: 56px; justify-content: center; border-radius: var(--radius-pill); font-size: var(--font-size-base); font-weight: 800; gap: 10px; pointer-events: auto; touch-action: manipulation; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .ch-card-focus-actions .ch-btn .ch-icon { width: 21px; height: 21px; } .ch-card-focus-actions .ch-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; } .ch-card-focus-actions .ch-btn-outline { background: rgba(15, 23, 42, 0.24); border-color: #3b82f6; color: #dbeafe; } .ch-card-focus-actions .ch-btn-ghost { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; } .ch-card-focus-actions .ch-btn:disabled { opacity: 0.42; color: rgba(255, 255, 255, 0.78); cursor: not-allowed; transform: none; } .ch-card-focus-actions .ch-btn:not(:disabled):hover { transform: translateY(-1px); } .ch-card-focus-actions .ch-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 0 7px rgba(59, 130, 246, 0.34), 0 16px 36px rgba(0, 0, 0, 0.3); } .ch-card-focus-overlay.is-open .ch-card-focus-stage { animation: ch-focus-stage-in 0.18s ease both; } .ch-card-friend-empty { margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-md); padding: 10px 12px; border: 1px solid rgba(245, 158, 11, 0.28); border-radius: var(--radius-sm); background: #fffbeb; color: #92400e; font-size: var(--font-size-sm); line-height: 1.55; } @keyframes ch-focus-stage-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ch-card-focus-in { from { opacity: 0; transform: translateY(22px) scale(0.86) rotateX(7deg); } to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); } } @keyframes ch-card-focus-actions-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ch-card-detail-modal-inner { width: min(96vw, 820px); max-width: 820px; } #ch-card-detail-modal { z-index: calc(var(--z-modal) + 40); } body.ch-card-detail-open { overflow: hidden; } #ch-card-gift-modal, #ch-card-request-modal, #ch-decompose-modal { z-index: calc(var(--z-modal) + 60); } #ch-card-detail-modal .ch-modal-header { position: sticky; top: 0; z-index: 5; background: var(--color-card); } #ch-card-detail-modal .ch-modal-close { position: relative; z-index: 6; flex: 0 0 46px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; touch-action: manipulation; border: 1px solid var(--color-border); } .ch-card-detail-modal-content { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; } .ch-card-detail-flip { width: 100%; max-width: 240px; justify-self: center; contain: layout; perspective: 1000px; cursor: grab; touch-action: none; user-select: none; } .ch-card-detail-flip-inner { position: relative; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(.2,.7,.2,1); } .ch-card-detail-flip.is-flipped .ch-card-detail-flip-inner { transform: rotateY(180deg); } .ch-card-detail-face { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-md); backface-visibility: hidden; border: 1px solid var(--color-border); background: var(--color-bg); } .ch-card-detail-front img, .ch-card-detail-front .ch-card-item-placeholder { width: 100%; height: 100%; object-fit: cover; } .ch-card-detail-back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; opacity: 0; -webkit-backface-visibility: visible; backface-visibility: visible; background-image: var(--ch-card-back, linear-gradient(135deg,#1f2a44,#2c3e64)); background-size: cover; background-position: center; color: rgba(255, 255, 255, 0.7); font-size: 28px; } .ch-card-detail-back-panel { width: 100%; margin: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); } .ch-card-detail-back-panel h3, .ch-card-detail-info h3 { margin: var(--spacing-sm) 0; color: var(--color-text-primary); font-size: var(--font-size-xl); } .ch-card-detail-back-panel p, .ch-card-detail-info p { color: var(--color-text-secondary); line-height: 1.65; font-size: var(--font-size-sm); } .ch-card-detail-info { display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; min-width: 0; align-self: start; } .ch-card-detail-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: 4px; } .ch-card-detail-badges { display: flex; gap: var(--spacing-xs); align-items: center; flex-wrap: wrap; } .ch-card-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); } .ch-card-detail-facts div { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); } .ch-card-detail-facts span { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); } .ch-card-detail-facts strong { color: var(--color-text-primary); font-size: var(--font-size-sm); } .ch-card-detail-hint { margin: 0; color: var(--color-text-muted) !important; font-size: var(--font-size-xs) !important; } .ch-modal-loading { padding: 40px 0; text-align: center; color: var(--color-text-muted); } .ch-card-action-modal { max-width: 520px; } .ch-card-action-copy { margin: 0 0 var(--spacing-md); color: var(--color-text-secondary); } .ch-card-action-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-md); color: var(--color-text-primary); font-weight: 700; } .ch-card-action-field span { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .ch-card-action-buttons { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .ch-card-action-buttons .ch-btn { flex: 1 1 160px; } .ch-card-action-buttons .ch-btn:disabled, .ch-card-action-field .ch-input:disabled { border-color: var(--color-border); background: #f1f5f9; color: var(--color-text-muted); cursor: not-allowed; opacity: 0.72; box-shadow: none; } /* ============================================================================= Shop page ============================================================================= */ .ch-shop-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-shop-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .ch-shop-currency { display: flex; align-items: center; gap: var(--spacing-md); } .ch-shop-tabs { margin-bottom: var(--spacing-lg); } .ch-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-lg); } .ch-shop-item { display: flex; flex-direction: column; gap: var(--spacing-sm); overflow: hidden; transition: box-shadow var(--transition-fast), transform var(--transition-fast); color: inherit; text-decoration: none; } .ch-shop-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .ch-shop-item-img { position: relative; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); overflow: hidden; background: var(--color-bg); } .ch-shop-item-img img { width: 100%; height: 100%; object-fit: cover; } .ch-shop-item-info { padding: var(--spacing-sm) var(--spacing-md); display: flex; flex-direction: column; gap: 4px; flex: 1; } .ch-shop-item-title { font-size: var(--font-size-sm); font-weight: 700; } .ch-shop-item-meta { display: flex; align-items: center; gap: var(--spacing-sm); } .ch-shop-cost { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-warning); } .ch-shop-item .ch-btn { margin: 0 var(--spacing-md) var(--spacing-md); } .ch-shop-subtitle { margin: -12px 0 0; max-width: 620px; } .ch-shop-product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f8fafc; color: var(--color-text-muted); font-size: 42px; } .ch-shop-ready-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 11px; font-weight: 700; } .ch-shop-ready-badge.is-ready { background: var(--color-success); } .ch-shop-mini-progress { display: flex; align-items: center; gap: 8px; } .ch-shop-mini-progress span { flex: 1; height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-border); } .ch-shop-mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); } .ch-shop-mini-progress b { color: var(--color-text-muted); font-size: var(--font-size-xs); } .ch-shop-back-link { display: inline-flex; margin-bottom: var(--spacing-md); color: var(--color-primary); font-weight: 700; text-decoration: none; } .ch-shop-detail { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: var(--spacing-xl); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .ch-shop-detail-media { aspect-ratio: var(--ch-card-aspect, 9 / 16); overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg); } .ch-shop-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ch-shop-detail-body { display: flex; flex-direction: column; gap: var(--spacing-md); min-width: 0; } .ch-shop-detail-body h2 { margin: 0; font-size: var(--font-size-2xl); } .ch-shop-detail-body p { margin: 0; color: var(--color-text-secondary); line-height: 1.65; } .ch-shop-progress-line, .ch-shop-limit-row { display: flex; justify-content: space-between; gap: var(--spacing-sm); flex-wrap: wrap; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .ch-shop-progress-line strong { color: var(--color-primary); } .ch-shop-progress-track { height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-border); } .ch-shop-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-success)); } .ch-shop-required-grid { margin-top: var(--spacing-md); } .ch-shop-required-card { appearance: none; padding: 0; border-width: 1px; border-radius: 7px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ch-shop-required-card .ch-card-item-inner, .ch-shop-required-card .ch-card-item-img-wrap { border-radius: 6px; overflow: hidden; } .ch-shop-required-card.is-unowned .ch-card-back-tile { filter: grayscale(1) brightness(0.82); } .ch-shop-required-card .ch-card-qty-badge { font-size: 10px; } .ch-shop-redemption-modal { max-width: 720px; } .ch-shop-shipping-form { display: flex; flex-direction: column; gap: var(--spacing-md); } .ch-shop-shipping-form p { margin: 0; color: var(--color-text-secondary); line-height: 1.6; } .ch-shop-shipping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); } .ch-shop-shipping-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: 700; } .ch-shop-shipping-grid label.is-wide { grid-column: 1 / -1; } .ch-shop-shipping-grid b { color: var(--color-danger); } .ch-shop-shipping-grid input, .ch-shop-shipping-grid textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text-primary); font: inherit; font-weight: 500; } .ch-shop-shipping-grid textarea { resize: vertical; } .ch-shop-shipping-note { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.55; } .ch-shop-modal-actions { display: flex; gap: var(--spacing-sm); } .ch-shop-modal-actions .ch-btn { flex: 1; } /* Shop history table */ .ch-history-table { width: 100%; border-collapse: collapse; } .ch-history-table th, .ch-history-table td { padding: 10px var(--spacing-md); text-align: left; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); } .ch-history-table th { font-weight: 700; color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; } .ch-shop-history { padding: 0; } /* ============================================================================= Tasks page ============================================================================= */ .ch-tasks-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-tasks-section { margin-bottom: var(--spacing-2xl); } .ch-tasks-section-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--color-text-primary); } .ch-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-md); } .ch-task-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); transition: all var(--transition-fast); } .ch-task-card:hover { box-shadow: var(--shadow-md); } .ch-task-card.is-completable { border: 2px solid var(--color-success); background: #F0FDF4; } .ch-task-card.is-claimed { opacity: 0.65; } .ch-task-icon { font-size: 32px; flex-shrink: 0; width: 48px; text-align: center; } .ch-task-info { flex: 1; min-width: 0; } .ch-task-title { font-size: var(--font-size-md); font-weight: 700; margin-bottom: 4px; } .ch-task-desc { margin-bottom: var(--spacing-sm); } .ch-task-progress-row { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .ch-task-prog-bar-track { flex: 1; height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .ch-task-prog-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width var(--transition-slow); } .ch-task-card.is-completable .ch-task-prog-bar-fill { background: var(--color-success); } .ch-task-prog-label { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .ch-task-reward { display: flex; align-items: center; gap: var(--spacing-xs); } .ch-task-reward-badge { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-warning); background: #FFFBEB; padding: 2px 8px; border-radius: var(--radius-pill); } .ch-task-action { flex-shrink: 0; } /* ============================================================================= Card trade page ============================================================================= */ .ch-trade-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-trade-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; } .ch-trade-form-card, .ch-trade-list-card { padding: var(--spacing-lg); } .ch-trade-form { display: flex; flex-direction: column; gap: var(--spacing-md); } .ch-trade-form label { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 700; } .ch-trade-lists { display: flex; flex-direction: column; gap: var(--spacing-lg); } .ch-trade-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; gap: var(--spacing-md); align-items: center; padding: var(--spacing-md) 0; border-top: 1px solid var(--color-border-light); } .ch-trade-row:first-of-type { border-top: 0; } .ch-trade-peer { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; flex-wrap: wrap; } .ch-trade-cards { display: grid; gap: 4px; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .ch-trade-cards strong { color: var(--color-text-primary); } .ch-trade-actions { display: flex; gap: var(--spacing-xs); } /* ============================================================================= Author sidebar stats ============================================================================= */ .ch-author-stats { display: flex; justify-content: center; gap: var(--spacing-xl); } .ch-author-stat { text-align: center; } .ch-author-stat .ch-stat-number { font-size: var(--font-size-xl); } /* ============================================================================= Related posts grid ============================================================================= */ .ch-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-md); } .ch-related-item { display: flex; flex-direction: column; gap: 4px; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); } .ch-related-item:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .ch-related-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); line-height: 1.3; } /* ============================================================================= Forum single — action bar ============================================================================= */ .ch-forum-action-bar { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } /* ============================================================================= Synthesis page ============================================================================= */ .ch-synthesis-page { padding: var(--spacing-lg) 0 var(--spacing-3xl); } .ch-synthesis-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; margin-bottom: var(--spacing-lg); } .ch-synthesis-head .ch-page-headline { margin-bottom: var(--spacing-sm); } .ch-synthesis-prob-card { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 1px; min-width: 300px; padding: 0; overflow: hidden; background: var(--color-border); } .ch-synthesis-prob-card span { display: flex; justify-content: space-between; gap: var(--spacing-sm); padding: 10px 12px; background: #fff; color: var(--color-text-muted); font-size: var(--font-size-xs); } .ch-synthesis-prob-card strong { color: var(--color-text-primary); } .ch-furnace-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; } .ch-furnace-stage.ch-card { position: relative; width: 100%; max-width: none; aspect-ratio: 16 / 8.4; min-height: 560px; padding: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 72%, rgba(255, 246, 196, 0.18), transparent 24%), radial-gradient(circle at 50% 18%, rgba(245, 158, 11, 0.2), transparent 48%), linear-gradient(135deg, #08091d, #1f1309 50%, #07142d); border: 1px solid rgba(251, 191, 36, 0.16); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -42px 90px rgba(2, 6, 23, 0.62), 0 24px 60px rgba(15, 23, 42, 0.18); color: #fff; } .ch-furnace-core { position: absolute; inset: 0; z-index: 0; height: 100%; pointer-events: none; border-radius: inherit; overflow: hidden; background: #0f172a; box-shadow: none; } .ch-furnace-art, .ch-furnace-video { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.96; filter: saturate(1.16) contrast(1.08) brightness(1.08); pointer-events: none; } .ch-furnace-video { z-index: 1; opacity: 0; background: #050816; transform: translateZ(0); transition: opacity 0.86s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.86s cubic-bezier(0.22, 0.61, 0.36, 1); } .ch-furnace-core::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 52%, transparent 0 18%, rgba(5, 10, 22, 0.02) 44%, rgba(5, 10, 22, 0.38) 100%), linear-gradient(180deg, rgba(3, 7, 18, 0.02), rgba(3, 7, 18, 0.02) 42%, rgba(3, 7, 18, 0.28)); } .ch-furnace-fire-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; mix-blend-mode: screen; } .ch-furnace-ring { position: absolute; z-index: 3; left: 50%; top: 38%; width: min(28vw, 420px); height: min(12vw, 176px); transform: translateX(-50%); border: 2px solid rgba(251, 191, 36, 0.38); border-radius: 50%; box-shadow: 0 0 34px rgba(245, 158, 11, 0.2), inset 0 0 26px rgba(251, 191, 36, 0.14); opacity: 0.72; } .ch-furnace-light { position: absolute; z-index: 2; left: 50%; top: 54%; width: min(42%, 720px); height: 38%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 48%, rgba(255, 247, 190, 0.7) 0 12%, rgba(251, 146, 60, 0.44) 28%, rgba(194, 65, 12, 0.18) 54%, transparent 74%); filter: blur(8px); opacity: 0.78; mix-blend-mode: screen; animation: ch-furnace-light-pulse 2.4s ease-in-out infinite; } .ch-furnace-heat { position: absolute; left: 50%; border-radius: 50%; filter: blur(14px); opacity: 0.46; transform-origin: center bottom; } .ch-furnace-heat-main { top: 20%; width: min(28%, 520px); height: 48%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 72%, rgba(255, 237, 213, 0.5), transparent 42%), linear-gradient(180deg, transparent 0%, rgba(251, 146, 60, 0.42) 42%, rgba(220, 38, 38, 0.2) 100%); animation: ch-furnace-heat-rise 2.9s ease-in-out infinite; } .ch-furnace-heat-mouth { top: 66%; width: min(20%, 360px); height: 20%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 50%, rgba(255, 244, 178, 0.64), rgba(249, 115, 22, 0.36) 42%, transparent 70%); animation: ch-furnace-mouth-pulse 1.8s ease-in-out infinite; } .ch-furnace-ember { --x: 0px; --y: -120px; --s: 1; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 999px; background: #fed7aa; box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 18px rgba(249, 115, 22, 0.48); opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)); animation: ch-furnace-ember-rise 3.2s linear infinite; } .ch-furnace-ember-1 { left: 42%; top: 45%; --x: -44px; --y: -122px; --s: 0.9; animation-delay: -0.2s; } .ch-furnace-ember-2 { left: 48%; top: 43%; --x: -16px; --y: -154px; --s: 0.7; animation-delay: -1.4s; } .ch-furnace-ember-3 { left: 54%; top: 44%; --x: 28px; --y: -136px; --s: 1.05; animation-delay: -0.8s; } .ch-furnace-ember-4 { left: 59%; top: 48%; --x: 54px; --y: -112px; --s: 0.72; animation-delay: -2.1s; } .ch-furnace-ember-5 { left: 46%; top: 57%; --x: -38px; --y: -92px; --s: 1.2; animation-delay: -2.8s; } .ch-furnace-ember-6 { left: 53%; top: 58%; --x: 18px; --y: -108px; --s: 0.82; animation-delay: -1.1s; } .ch-furnace-ember-7 { left: 39%; top: 52%; --x: -64px; --y: -96px; --s: 0.62; animation-delay: -1.9s; } .ch-furnace-ember-8 { left: 62%; top: 54%; --x: 72px; --y: -118px; --s: 0.74; animation-delay: -0.5s; } .ch-furnace-stage.is-burning .ch-furnace-art { opacity: 1; filter: saturate(1.16) contrast(1.1) brightness(1.02); } .ch-furnace-stage.is-burning .ch-furnace-light { opacity: 1; animation-duration: 1.05s; } .ch-furnace-stage.is-burning .ch-furnace-heat-main, .ch-furnace-stage.is-burning .ch-furnace-heat-mouth { animation-duration: 1.2s; } .ch-furnace-stage.is-burning .ch-furnace-ember { animation-duration: 1.7s; } .ch-furnace-stage.is-video-loading .ch-furnace-art { opacity: 1; filter: saturate(1.24) contrast(1.08) brightness(1.12); } .ch-furnace-stage.is-video-ready .ch-furnace-video { opacity: 1; } .ch-furnace-stage.is-video-ready .ch-furnace-art { opacity: 0; filter: saturate(1.05) contrast(1.04) brightness(1.18); } .ch-furnace-stage.is-video-crossfade .ch-furnace-core::after { animation: ch-draw-video-join 1.04s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-furnace-stage.is-video-bridge .ch-furnace-art { opacity: 1; animation: ch-draw-art-exposure 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge-releasing .ch-furnace-art { opacity: 0; animation: none; filter: saturate(0.98) contrast(1.02) brightness(1.5); } .ch-furnace-stage.is-synthesizing .ch-furnace-slots, .ch-furnace-stage.is-synthesizing .ch-furnace-actions { opacity: 0; visibility: hidden; pointer-events: none; } .ch-furnace-stage .ch-furnace-burst-fx { z-index: 6; } .ch-furnace-stage .ch-furnace-burst-fx::before, .ch-furnace-stage .ch-furnace-burst-fx::after, .ch-furnace-stage .ch-draw-burst-core, .ch-furnace-stage .ch-draw-burst-ring, .ch-furnace-stage .ch-draw-burst-ray, .ch-furnace-stage .ch-draw-burst-spark { top: 52%; } .ch-furnace-stage .ch-draw-burst-column { bottom: 38%; } .ch-furnace-stage.is-synthesizing .ch-furnace-burst-fx { animation: ch-draw-burst-layer 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-furnace-stage.is-synthesizing .ch-draw-burst-core { animation: ch-draw-burst-core 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-furnace-stage.is-synthesizing .ch-draw-burst-bloom { animation: ch-draw-burst-panel 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-furnace-stage.is-synthesizing .ch-draw-burst-wash { animation: ch-draw-burst-wash 1.48s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .ch-furnace-stage.is-video-ready .ch-furnace-burst-fx { opacity: 0; animation: none; transition: opacity 0.54s ease; } .ch-furnace-stage.is-video-bridge .ch-furnace-burst-fx { opacity: 1; animation: none; } .ch-furnace-stage.is-video-bridge .ch-furnace-burst-fx::before { animation: ch-draw-bridge-flare-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge .ch-furnace-burst-fx::after { animation: ch-draw-bridge-motes 1.02s ease-out both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-core { animation: ch-draw-bridge-core 0.86s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-core::before, .ch-furnace-stage.is-video-bridge .ch-draw-burst-core::after { animation: ch-draw-bridge-core-detail 0.82s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-bloom { animation: ch-draw-bridge-panel-in 0.88s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-wash { animation: ch-draw-bridge-wash 0.86s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-ring { animation: ch-draw-bridge-ring 0.92s ease-out both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-column { animation: ch-draw-bridge-column 0.94s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-ring-2 { animation-delay: 0.08s; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-ray { animation: ch-draw-bridge-ray 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-ray-2 { animation-delay: 0.04s; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-ray-3 { animation-delay: 0.1s; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-spark { animation: ch-draw-bridge-spark 0.82s ease-out both; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-spark-2 { animation-delay: 0.04s; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-spark-3 { animation-delay: 0.08s; } .ch-furnace-stage.is-video-bridge .ch-draw-burst-spark-4 { animation-delay: 0.12s; } .ch-furnace-stage.is-video-bridge-releasing .ch-furnace-burst-fx::before, .ch-furnace-stage.is-video-bridge-releasing .ch-furnace-burst-fx::after, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-ring, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-column, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-ray, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-spark { animation: ch-draw-bridge-flare-out 0.46s ease-out forwards; } .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-core, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-bloom, .ch-furnace-stage.is-video-bridge-releasing .ch-draw-burst-wash { opacity: 0; } .ch-furnace-slots { --ch-furnace-slot-width: clamp(88px, 10vw, 132px); position: absolute; z-index: 2; left: 50%; right: auto; top: 47%; bottom: auto; width: fit-content; max-width: 88%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, var(--ch-furnace-slot-width)); justify-content: center; gap: 14px 18px; margin: 0; transition: opacity 0.22s ease, transform 0.22s ease; } .ch-furnace-slot { width: var(--ch-furnace-slot-width); min-width: 0; aspect-ratio: 9 / 16; border: 1px dashed rgba(255,255,255,0.42); border-radius: var(--radius-md); background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(3px); color: #fff; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; box-shadow: inset 0 0 32px rgba(2, 6, 23, 0.22); } .ch-furnace-slot:first-child { grid-column: 1 / -1; justify-self: center; } .ch-furnace-stage.has-furnace-result .ch-furnace-slots { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); } .ch-furnace-slot.is-drop-target { border-color: rgba(255, 244, 196, 0.92); background: rgba(255, 244, 196, 0.16); box-shadow: 0 0 0 3px rgba(255, 244, 196, 0.18), 0 12px 28px rgba(2, 6, 23, 0.28); } .ch-furnace-slot-empty { margin: auto; font-size: 34px; opacity: 0.7; } .ch-furnace-slot img, .ch-furnace-slot .ch-card-item-placeholder { width: 100%; height: 100%; object-fit: cover; } .ch-furnace-slot b { display: block; padding: 6px; background: rgba(15, 23, 42, 0.78); font-size: 11px; line-height: 1.25; } .ch-furnace-actions { position: absolute; z-index: 2; left: 50%; right: auto; bottom: 26px; width: min(52%, 500px); transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 8px; align-items: center; margin: 0; } .ch-furnace-actions .ch-btn { backdrop-filter: blur(4px); } .ch-furnace-actions .ch-btn { min-height: 30px; justify-content: center; } .ch-furnace-actions #ch-furnace-clear { width: 38px; min-width: 38px; padding: 0; } .ch-furnace-actions #ch-furnace-clear span:not(.ch-icon) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .ch-furnace-result { position: absolute; z-index: 4; left: 50%; top: 47%; width: clamp(136px, 16vw, 220px); min-width: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; transform: translate(-50%, -50%); pointer-events: auto; } .ch-furnace-result-card { display: block; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 0 32px rgba(251, 191, 36, 0.32), 0 24px 46px rgba(2, 6, 23, 0.38); animation: ch-furnace-result-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .ch-furnace-result-card img, .ch-furnace-result-card .ch-card-item-placeholder { display: block; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); object-fit: cover; } .ch-furnace-result-card strong { color: #fff; } .ch-furnace-result p { margin: var(--spacing-sm) 0 0; color: rgba(255,255,255,0.72); } .ch-furnace-stage.is-burning .ch-furnace-ring { animation: ch-furnace-spin 1s linear infinite; } .ch-furnace-inventory { min-width: 0; min-height: 226px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); box-shadow: none; } .ch-furnace-inventory .ch-section-header { align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-right: 28px; } .ch-furnace-inventory .ch-section-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--font-size-lg); line-height: 1.15; } .ch-furnace-inventory > .ch-empty-state { min-height: 152px; margin: 0; padding: 22px 16px; border: 1px dashed color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 46%), var(--reddit-hover, var(--color-bg)); border-radius: var(--radius-md); box-shadow: none; } .ch-furnace-inventory > .ch-empty-state .ch-empty-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 10px; color: var(--color-primary); font-size: 24px; } .ch-furnace-inventory > .ch-empty-state .ch-empty-title { margin-bottom: 12px; font-size: var(--font-size-base); } .ch-furnace-guest-stage.ch-card { min-height: min(560px, calc(100svh - 160px)); } .ch-furnace-guest-panel { position: absolute; z-index: 5; left: 24px; right: 24px; bottom: 24px; max-width: 460px; padding: 20px; border: 1px solid rgba(255, 244, 196, 0.24); border-radius: var(--radius-md); background: rgba(7, 10, 28, 0.7); color: #fff; backdrop-filter: blur(14px); box-shadow: 0 18px 42px rgba(2, 6, 23, 0.34); } .ch-furnace-guest-panel .ch-page-headline { margin: 0 0 8px; color: #fff; } .ch-furnace-guest-panel p { max-width: 38rem; margin: 0 0 16px; color: rgba(255, 255, 255, 0.78); line-height: 1.45; } .ch-furnace-guest-actions { display: flex; flex-wrap: wrap; gap: 10px; } @keyframes ch-furnace-light-pulse { 0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.08); } } @keyframes ch-furnace-heat-rise { 0%, 100% { opacity: 0.28; transform: translateX(-50%) translateY(8px) scaleX(0.9) scaleY(0.86); } 50% { opacity: 0.58; transform: translateX(-50%) translateY(-8px) scaleX(1.06) scaleY(1.12); } } @keyframes ch-furnace-mouth-pulse { 0%, 100% { opacity: 0.44; transform: translateX(-50%) scale(0.92); } 50% { opacity: 0.78; transform: translateX(-50%) scale(1.08); } } @keyframes ch-furnace-ember-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)) rotate(0deg); } 12% { opacity: 0.95; } 62% { opacity: 0.82; } 100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(0.18) rotate(210deg); } } @keyframes ch-furnace-spin { to { transform: translateX(-50%) rotate(360deg); } } @keyframes ch-furnace-result-rise { from { opacity: 0; transform: translateY(22px) scale(0.82) rotateY(-18deg); } to { opacity: 1; transform: translateY(0) scale(1) rotateY(0); } } .ch-synthesis-pool { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(88px, 112px); grid-template-columns: none; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; scroll-snap-type: x proximity; } .ch-synth-pick { display: block; min-height: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 4px; background: #fff; text-align: center; cursor: pointer; overflow: hidden; scroll-snap-align: start; transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } .ch-synth-pick:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18); } .ch-synth-pick.is-dragging { opacity: 0.58; } .ch-synth-pick.is-maxed { opacity: 0.44; pointer-events: none; } .ch-synth-drag-ghost { position: fixed; z-index: calc(var(--z-modal) + 20); width: 94px; max-width: 20vw; pointer-events: none; border-radius: var(--radius-md); box-shadow: 0 18px 36px rgba(2, 6, 23, 0.36); opacity: 0.92; transform: translate(-50%, -50%) rotate(-2deg) scale(0.96); } .ch-synth-pick-img { position: relative; display: block; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); overflow: hidden; border-radius: 4px; background: var(--color-bg); } .ch-synth-pick-img img, .ch-synth-pick-img .ch-card-item-placeholder { width: 100%; height: 100%; object-fit: cover; } .ch-synth-pick-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ch-synth-pick-meta strong { color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: 1.3; } .ch-synth-pick-meta small { color: var(--color-text-muted); font-size: var(--font-size-xs); } .ch-synthesis-recipes { padding: var(--spacing-lg); margin-bottom: var(--spacing-2xl); } .ch-recipe-list { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin-top: var(--spacing-md); } .ch-recipe-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); } .ch-recipe-arrow { color: var(--color-text-muted); font-weight: 600; } .ch-synthesis-tier { margin-bottom: var(--spacing-2xl); } .ch-synthesis-tier-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--color-border); } .ch-synthesis-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-md); } .ch-synth-card { padding: var(--spacing-md); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--spacing-sm); transition: all var(--transition-fast); opacity: 0.6; } .ch-synth-card.is-synthable { opacity: 1; border: 2px solid var(--color-primary); } .ch-synth-card:hover { box-shadow: var(--shadow-md); } .ch-synth-card-img { position: relative; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg); } .ch-synth-card-img img { width: 100%; height: 100%; object-fit: cover; } .ch-synth-card-info { display: flex; flex-direction: column; gap: 4px; } .ch-synth-card-title { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-synth-card-action { margin-top: auto; } .ch-synth-result { padding: var(--spacing-lg); text-align: center; } .ch-synth-result-inner h3 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); color: var(--color-primary); } .ch-synth-result-item { padding: var(--spacing-sm) 0; font-size: var(--font-size-sm); } .ch-empty-state-sm { padding: var(--spacing-xl); text-align: center; } /* ============================================================================= Draw — header row & SFX toggle ============================================================================= */ .ch-draw-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin: var(--spacing-lg) 0 var(--spacing-xl); } .ch-draw-page-head .ch-page-headline { margin: 0; } #ch-sfx-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--color-card); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 999px; font-size: var(--font-size-xs); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } #ch-sfx-toggle .ch-icon { width: 16px; height: 16px; } #ch-sfx-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } #ch-sfx-toggle[aria-pressed="false"] { opacity: 0.6; } /* ============================================================================= Draw FX — sparkles, flash, rarity banner, legendary shine ============================================================================= */ /* Sparkle particles around a revealed rare card */ .ch-fx-sparkle-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .ch-result-card { position: relative; } .ch-fx-sparkle { position: absolute; left: 50%; top: 50%; font-size: 14px; opacity: 0; transform: translate(-50%, -50%); animation: ch-fx-sparkle-burst 1.4s ease-out forwards; animation-delay: var(--delay, 0s); text-shadow: 0 0 6px currentColor; } @keyframes ch-fx-sparkle-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0)), calc(-50% + var(--ty, 0))) scale(0.6) rotate(200deg); } } /* Legendary card sweep effect disabled. */ .ch-card-legendary-shine { position: relative; overflow: hidden; } .ch-card-legendary-shine::before { content: none; display: none; } .ch-card-legendary-shine { animation: none; } /* Full-screen flash */ .ch-fx-flash { position: fixed; inset: 0; z-index: 9998; pointer-events: none; animation: ch-fx-flash-fade 0.9s ease-out forwards; } .ch-fx-flash-gold { background: radial-gradient(circle at 50% 50%, rgba(253,224,71,0.85), rgba(245,158,11,0.35) 40%, transparent 70%); } .ch-fx-flash-purple { background: radial-gradient(circle at 50% 50%, rgba(196,181,253,0.7), rgba(139,92,246,0.3) 40%, transparent 70%); } @keyframes ch-fx-flash-fade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } .ch-draw-white-bridge { position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: #fff; opacity: 0; animation: ch-draw-white-bridge-in 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .ch-draw-white-bridge span { position: absolute; left: 50%; top: 50%; width: min(58vw, 640px); aspect-ratio: 1; border-radius: 999px; transform: translate(-50%, -50%) scale(0.3); background: #fff; box-shadow: 0 0 80px rgba(255, 255, 255, 1), 0 0 180px rgba(255, 255, 255, 0.88); filter: blur(2px); animation: ch-draw-white-core 0.94s ease-out forwards; } .ch-draw-white-bridge.is-out { animation: ch-draw-white-bridge-out 0.46s ease-in forwards; } @keyframes ch-draw-white-bridge-in { 0% { opacity: 0; filter: brightness(1); } 38% { opacity: 1; filter: brightness(1.18); } 100% { opacity: 0.98; filter: brightness(1); } } @keyframes ch-draw-white-bridge-out { to { opacity: 0; } } @keyframes ch-draw-white-core { to { transform: translate(-50%, -50%) scale(1.42); opacity: 0; } } /* Rarity banner */ .ch-fx-banner { position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(0.5); z-index: 9999; pointer-events: none; padding: 18px 48px; border-radius: 14px; font-size: 44px; font-weight: 900; letter-spacing: 0.08em; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.4); animation: ch-fx-banner-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; white-space: nowrap; } .ch-fx-banner.is-out { animation: ch-fx-banner-out 0.5s ease-in forwards; } .ch-fx-banner-legend { background: linear-gradient(135deg, #f59e0b, #fde047, #f59e0b); background-size: 200% 200%; box-shadow: 0 10px 40px rgba(245,158,11,0.6), 0 0 60px rgba(253,224,71,0.4); animation: ch-fx-banner-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, ch-banner-gradient 2s ease-in-out infinite 0.5s; } .ch-fx-banner-epic { background: linear-gradient(135deg, #8b5cf6, #c4b5fd, #8b5cf6); box-shadow: 0 10px 40px rgba(139,92,246,0.6); } .ch-fx-banner-rare { background: linear-gradient(135deg, #3b82f6, #60a5fa); font-size: 28px; box-shadow: 0 6px 24px rgba(59,130,246,0.5); } @keyframes ch-fx-banner-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } } @keyframes ch-fx-banner-out { to { opacity: 0; transform: translate(-50%, -120%) scale(0.8); } } @keyframes ch-banner-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================================= Physical 3D card treatment ============================================================================= */ .ch-card-rarity-border-common, .ch-rarity-glow-common { --ch-foil-color: 156, 163, 175; } .ch-card-rarity-border-rare, .ch-rarity-glow-rare { --ch-foil-color: 59, 130, 246; } .ch-card-rarity-border-epic, .ch-rarity-glow-epic { --ch-foil-color: 139, 92, 246; } .ch-card-rarity-border-legend, .ch-rarity-glow-legend { --ch-foil-color: 245, 158, 11; } .ch-card-item-card, .ch-card-focus-card, .ch-card-detail-flip, .ch-result-card, .ch-furnace-result-card { perspective: 920px; transform-style: preserve-3d; } .ch-card-item-card { overflow: visible; } .ch-card-item-inner, .ch-card-detail-flip-inner, .ch-result-card-3d .ch-result-card-inner, .ch-furnace-result-inner { --ch-card-foil-color: var(--ch-foil-color, 148, 163, 184); position: relative; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); box-sizing: border-box; border-radius: 16px; transform-style: preserve-3d; transform-origin: center center; background: #0f172a; box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18), 0 2px 0 rgba(15, 23, 42, 0.22), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -4px 0 9px rgba(15, 23, 42, 0.18); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease; } .ch-card-item-inner::before, .ch-card-detail-flip-inner::before, .ch-result-card-3d .ch-result-card-inner::before, .ch-furnace-result-inner::before { content: none; display: none; } .ch-card-item-inner::after, .ch-card-detail-flip-inner::after, .ch-result-card-3d .ch-result-card-inner::after, .ch-furnace-result-inner::after { content: ''; position: absolute; top: 6px; right: -4px; bottom: 7px; width: 4px; z-index: 1; border-radius: 0 9px 9px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(15, 23, 42, 0.5)); box-shadow: 2px 3px 6px rgba(15, 23, 42, 0.16); transform: rotateY(82deg) translateZ(-1px); transform-origin: left center; pointer-events: none; } .ch-card-focus-card .ch-card-item-inner::after { top: 6px; right: -3px; bottom: 7px; width: 3px; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(15, 23, 42, 0.42)); box-shadow: 1px 2px 5px rgba(15, 23, 42, 0.14); transform: rotateY(84deg) translateZ(-1px); } .ch-card-item-face, .ch-card-item-img-wrap, .ch-card-detail-face, .ch-result-card-face, .ch-furnace-result-face { border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .ch-card-item-face, .ch-card-item-img-wrap, .ch-card-item-front, .ch-card-detail-front, .ch-result-card-front, .ch-furnace-result-front { transform: rotateY(0deg) translateZ(1px); } .ch-card-item-face { position: absolute; inset: 0; overflow: hidden; } .ch-card-item-front .ch-card-back-tile { height: 100%; } .ch-card-item-back { display: flex; align-items: center; justify-content: center; opacity: 0; -webkit-backface-visibility: visible; backface-visibility: visible; transform: rotateY(180deg) translateZ(1px); background-image: var(--ch-card-back, linear-gradient(135deg, #111827, #312e81 52%, #0f172a)); background-size: cover; background-position: center; color: rgba(255, 255, 255, 0.7); font-size: 28px; } .ch-card-focus-card .ch-card-item-face, .ch-card-focus-card .ch-card-item-img-wrap, .ch-card-focus-card .ch-card-item-front { transform: rotateY(0deg) translateZ(1px); } .ch-card-focus-card .ch-card-item-back { transform: rotateY(180deg) translateZ(1px); } .ch-card-focus-card.is-showing-back .ch-card-item-front, .ch-card-item-card.is-showing-back .ch-card-item-front, .ch-card-detail-flip.is-showing-back .ch-card-detail-front, .ch-card-detail-flip.is-flipped .ch-card-detail-front, .ch-result-card-3d.is-showing-back .ch-result-card-front, .ch-furnace-result-card.is-showing-back .ch-furnace-result-front { opacity: 0; } .ch-card-focus-card.is-showing-back .ch-card-item-back, .ch-card-item-card.is-showing-back .ch-card-item-back, .ch-card-detail-flip.is-showing-back .ch-card-detail-back, .ch-card-detail-flip.is-flipped .ch-card-detail-back, .ch-result-card-3d.is-showing-back .ch-result-card-back, .ch-furnace-result-card.is-showing-back .ch-furnace-result-back { opacity: 1; } .ch-card-item-card:hover .ch-card-item-inner, .ch-result-card-3d:hover .ch-result-card-inner { box-shadow: 0 20px 34px rgba(15, 23, 42, 0.22), 0 3px 0 rgba(15, 23, 42, 0.22), inset 1px 0 1px rgba(255, 255, 255, 0.64), inset -4px 0 9px rgba(15, 23, 42, 0.22); } .ch-card-focus-card .ch-card-item-inner { overflow: visible; animation: ch-card-focus-in-3d 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .ch-card-focus-card { cursor: grab; pointer-events: auto; touch-action: none; user-select: none; } .ch-card-detail-flip:not(.is-flipped) .ch-card-detail-flip-inner { transform: rotateX(4deg) rotateY(-8deg); } .ch-card-detail-flip.is-flipped .ch-card-detail-flip-inner { transform: rotateY(180deg) rotateX(4deg); } .ch-card-focus-card.is-rotating-manual, .ch-card-detail-flip.is-rotating-manual, .ch-result-card-3d.is-rotating-manual, .ch-furnace-result-card.is-rotating-manual { cursor: grabbing; } .ch-card-focus-card.is-rotating-manual .ch-card-item-inner, .ch-card-detail-flip.is-rotating-manual .ch-card-detail-flip-inner, .ch-result-card-3d.is-rotating-manual .ch-result-card-inner, .ch-furnace-result-card.is-rotating-manual .ch-furnace-result-inner { animation: none !important; transition: none; } .ch-card-detail-face, .ch-result-card-face, .ch-furnace-result-face { border: 1px solid rgba(var(--ch-card-foil-color), 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .ch-result-card-3d { overflow: visible; border: 0; background: transparent; box-shadow: none; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; } .ch-result-card-3d * { pointer-events: auto; } .ch-result-card-3d .ch-result-card-inner, .ch-furnace-result-inner { display: block; width: 100%; aspect-ratio: var(--ch-card-aspect, 9 / 16); animation: ch-card-result-3d-reveal 0.92s cubic-bezier(0.16, 1, 0.3, 1) both; } .ch-result-card-3d .ch-result-card-inner { animation-delay: inherit; } .ch-result-card-face, .ch-furnace-result-face { position: absolute; inset: 0; overflow: hidden; } .ch-result-card-front, .ch-furnace-result-front { background: #0f172a; } .ch-result-card-back, .ch-furnace-result-back { display: flex; align-items: center; justify-content: center; opacity: 0; -webkit-backface-visibility: visible; backface-visibility: visible; transform: rotateY(180deg) translateZ(1px); background-image: var(--ch-card-back, linear-gradient(135deg, #111827, #312e81 52%, #0f172a)); background-size: cover; background-position: center; color: rgba(255, 255, 255, 0.7); font-size: 28px; } .ch-card-item-back.has-card-back .ch-card-back-symbol, .ch-card-detail-back.has-card-back .ch-card-back-symbol, .ch-result-card-back.has-card-back .ch-card-back-symbol, .ch-furnace-result-back.has-card-back .ch-card-back-symbol { opacity: 0; } .ch-result-card-3d .ch-result-card-img, .ch-result-card-3d .ch-result-card-img img, .ch-furnace-result-front img, .ch-furnace-result-front .ch-card-item-placeholder { width: 100%; height: 100%; } .ch-result-card-3d .ch-result-card-img, .ch-furnace-result-front .ch-card-item-placeholder { aspect-ratio: auto; } .ch-result-card-3d .ch-result-card-img img, .ch-furnace-result-front img { display: block; object-fit: cover; } .ch-furnace-result-card { overflow: visible; background: transparent; border: 0; box-shadow: none; cursor: pointer; touch-action: none; user-select: none; } .ch-furnace-result-card:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.86); outline-offset: 8px; } .ch-furnace-result-card img, .ch-furnace-result-card .ch-card-item-placeholder { aspect-ratio: auto; } @keyframes ch-card-focus-in-3d { from { opacity: 0; transform: translateY(26px) scale(0.84) rotateX(18deg) rotateY(-368deg); } 72% { opacity: 1; transform: translateY(-4px) scale(1.03) rotateX(8deg) rotateY(24deg); } to { opacity: 1; transform: translateY(0) scale(1) rotateX(5deg) rotateY(-8deg); } } @keyframes ch-card-result-3d-reveal { 0% { opacity: 0; transform: rotateY(-540deg) rotateX(12deg) scale(0.62); } 54% { opacity: 1; transform: rotateY(-190deg) rotateX(6deg) scale(1.06); } 100% { opacity: 1; transform: rotateY(-8deg) rotateX(4deg) scale(1); } } @keyframes ch-card-horizontal-spin-360 { from { transform: rotateX(4deg) rotateY(-8deg) scale(1); } 52% { transform: rotateX(7deg) rotateY(180deg) scale(1.04); } to { transform: rotateX(4deg) rotateY(352deg) scale(1); } } @keyframes ch-card-detail-spin-360 { from { transform: var(--ch-spin-from, rotateX(4deg) rotateY(-8deg)); } 52% { transform: var(--ch-spin-mid, rotateX(7deg) rotateY(180deg) scale(1.04)); } to { transform: var(--ch-spin-to, rotateY(540deg) rotateX(4deg)); } } /* ============================================================================= Responsive ============================================================================= */ @media (max-width: 900px) { .ch-draw-layout { grid-template-columns: 1fr; } .ch-draw-sidebar { position: static; } .ch-furnace-layout { grid-template-columns: 1fr; } .ch-furnace-stage.ch-card { position: relative; top: auto; max-width: none; min-height: 520px; margin: 0; } .ch-furnace-slots { --ch-furnace-slot-width: clamp(82px, 15vw, 118px); top: 47%; } .ch-furnace-actions { width: min(68%, 440px); bottom: 24px; } .ch-shop-detail { grid-template-columns: 1fr; } .ch-shop-detail-media { max-width: 260px; } .ch-trade-layout { grid-template-columns: 1fr; } .ch-trade-row { grid-template-columns: 1fr; } .ch-trade-actions { justify-content: flex-start; } } @media (min-width: 901px) and (max-height: 700px) { .ch-synthesis-page { padding-top: var(--spacing-md); } .ch-synthesis-head { margin-bottom: 14px; } .ch-furnace-stage.ch-card { min-height: 500px; } .ch-furnace-slots { --ch-furnace-slot-width: clamp(80px, 9vw, 112px); top: 46%; gap: 12px 16px; } .ch-furnace-actions { width: min(48%, 460px); bottom: 22px; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); } .ch-furnace-actions .ch-btn { min-height: 30px; padding-inline: 8px; font-size: 11px; } .ch-furnace-actions #ch-furnace-clear { width: 34px; min-width: 34px; } .ch-furnace-inventory { min-height: 214px; } .ch-synthesis-pool { grid-auto-columns: minmax(74px, 90px); } } @media (max-width: 768px) { .ch-backpack-page { padding-inline: 12px; } .ch-card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .ch-album-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 96px)); gap: 9px; } .ch-album-card { padding: 0; background: transparent; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045); } .ch-album-card.is-unowned { background: #f9fafb; } .ch-album-card.is-unowned img { opacity: 0.26; filter: grayscale(1) saturate(0) contrast(0.72) brightness(1.2); } .ch-backpack-page .ch-gallery-controls { align-items: stretch; gap: var(--spacing-sm); } .ch-gallery-search { width: 100%; } .ch-gallery-search .ch-input { flex: 1; width: auto !important; min-width: 0; } .ch-card-focus-stage { --ch-focus-card-width: min(70vw, 240px, calc((100vh - 230px) * 9 / 16)); min-height: min(84vh, 680px); gap: 14px; } .ch-card-focus-actions { gap: 10px; } .ch-card-focus-actions .ch-btn { min-height: 50px; font-size: var(--font-size-sm); padding-inline: 10px; } .ch-draw-results-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-sm); } .ch-draw-results-grid.is-single { grid-template-columns: minmax(150px, 200px); } .ch-draw-results-grid.is-single .ch-result-card-img { aspect-ratio: var(--ch-card-aspect, 9/16); height: auto; max-height: 240px; } .ch-result-card-img { aspect-ratio: var(--ch-card-aspect, 9/16); height: auto; } .ch-draw-anim-stage.ch-anim-multi { gap: 8px; padding: var(--spacing-md); } .ch-result-card-title { font-size: 10px; } .ch-draw-page { width: min(100%, 430px); padding: var(--spacing-md) 0 var(--spacing-2xl); } .ch-draw-page-head { margin: 6px 0 12px; } .ch-draw-stage { aspect-ratio: 4 / 5; min-height: 430px; margin-bottom: 10px; } .ch-draw-art, .ch-draw-video { object-position: center center; } .ch-draw-stage-currency { left: 10px; right: 10px; top: 10px; justify-content: center; gap: 10px; border-radius: var(--radius-md); } .ch-draw-stage-results { width: 88%; gap: 7px; margin-top: 0; } .ch-draw-stage-results.is-single { width: min(34%, 150px); min-width: 112px; } .ch-shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .ch-shop-shipping-grid { grid-template-columns: 1fr; } .ch-shop-modal-actions { flex-direction: column; } .ch-card-detail-modal-content { grid-template-columns: 1fr; } .ch-card-detail-flip { max-width: 220px; margin: 0 auto; } .ch-card-detail-facts { grid-template-columns: 1fr; } .ch-synthesis-head { align-items: stretch; } .ch-synthesis-prob-card { min-width: 0; width: 100%; } .ch-synthesis-pool { grid-auto-columns: minmax(74px, 96px); grid-template-columns: none; } .ch-furnace-stage.ch-card { width: 100%; aspect-ratio: 4 / 5; min-height: 460px; padding: 0; } .ch-furnace-core { inset: 0; height: 100%; } .ch-furnace-slots { --ch-furnace-slot-width: clamp(66px, 18vw, 82px); left: 50%; right: auto; top: 56%; width: fit-content; bottom: auto; transform: translate(-50%, -50%); grid-template-columns: repeat(3, var(--ch-furnace-slot-width)); gap: 8px; margin: 0; } .ch-furnace-slot:first-child { grid-column: auto; } .ch-furnace-actions { left: 50%; right: auto; width: min(78%, 360px); bottom: 24px; transform: translateX(-50%); } .ch-tasks-grid { grid-template-columns: 1fr; } .ch-synthesis-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .ch-recipe-list { flex-direction: column; } } @media (max-width: 480px) { .ch-draw-arena, .ch-draw-stage, .ch-draw-stage-actions, .ch-draw-mode-tabs { width: 100%; max-width: 100%; box-sizing: border-box; } .ch-draw-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ch-draw-mode-btn { min-height: 64px; padding: 10px 8px; } .ch-draw-mode-btn.is-active { border-color: rgba(255, 122, 69, 0.9); background: linear-gradient(135deg, #ff7a45, #ff4d1a); color: #fff; box-shadow: 0 14px 30px rgba(255, 69, 0, 0.22); } .ch-draw-mode-title { font-size: 14px; line-height: 1.15; } .ch-draw-mode-cost { max-width: 100%; font-size: 11px; line-height: 1.25; text-align: center; } .ch-draw-mode-cost .ch-badge { display: none; } .ch-page-headline { font-size: var(--font-size-xl); } .ch-album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .ch-card-focus-stage { --ch-focus-stage-width: min(96vw, 380px); --ch-focus-card-width: min(68vw, 230px); gap: 12px; } .ch-card-focus-actions { width: min(94vw, 350px); gap: 8px; } .ch-card-focus-actions .ch-btn { min-height: 48px; gap: 6px; padding-inline: 8px; } .ch-card-focus-actions .ch-btn .ch-icon { width: 18px; height: 18px; } .ch-draw-page { width: 100%; padding-top: 10px; } .ch-draw-stage { min-height: min(456px, calc(100svh - 232px)); border-radius: var(--radius-md); } .ch-draw-stage-currency { right: 54px; justify-content: flex-start; gap: 8px; overflow: hidden; padding: 8px 10px; } .ch-draw-stage-currency .ch-currency-item { min-width: 0; } .ch-draw-stage-currency .ch-currency-value { font-size: 14px; line-height: 1; } .ch-draw-sfx-float { width: 34px; min-width: 34px; padding: 7px; justify-content: center; } .ch-draw-sfx-float span { display: none; } .ch-furnace-actions .ch-btn { flex-basis: auto; } .ch-furnace-stage.ch-card { aspect-ratio: 3 / 4; min-height: 430px; } .ch-furnace-guest-stage.ch-card { min-height: min(510px, calc(100svh - 152px)); } .ch-furnace-guest-panel { left: 14px; right: 14px; bottom: 14px; padding: 16px; } .ch-furnace-guest-actions { display: grid; grid-template-columns: 1fr 1fr; } .ch-furnace-guest-actions .ch-btn { justify-content: center; min-width: 0; padding-inline: 10px; } .ch-furnace-slots { --ch-furnace-slot-width: clamp(60px, 18vw, 72px); left: 50%; right: auto; top: 56%; width: fit-content; bottom: auto; transform: translate(-50%, -50%); grid-template-columns: repeat(3, var(--ch-furnace-slot-width)); gap: 8px; } .ch-furnace-actions { left: 50%; right: auto; width: min(88%, 340px); bottom: 18px; transform: translateX(-50%); grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); } .ch-furnace-actions .ch-btn { min-height: 34px; padding-inline: 8px; font-size: 11px; } .ch-furnace-actions #ch-furnace-clear { width: 36px; min-width: 36px; } .ch-furnace-inventory { padding: 10px; } .ch-furnace-inventory .ch-section-header { margin-bottom: 10px; padding-right: 0; } .ch-furnace-inventory > .ch-empty-state { min-height: 118px; padding: 16px 12px; } .ch-draw-stage-currency { font-size: 11px; } .ch-draw-stage-currency .ch-currency-label { display: none; } .ch-draw-stage-results.is-multi { gap: 6px; } .ch-shop-detail { padding: var(--spacing-md); } } @media (max-width: 560px) { .ch-shop-page { padding: var(--spacing-md) 0 var(--spacing-2xl); } .ch-shop-header { align-items: stretch; gap: var(--spacing-md); } .ch-shop-header > div:first-child { min-width: 0; } .ch-shop-subtitle { max-width: none; margin: 6px 0 0; line-height: 1.45; } .ch-shop-currency { width: 100%; flex-wrap: wrap; gap: var(--spacing-sm); } .ch-shop-currency > .ch-btn { flex: 1 1 100%; } .ch-shop-tabs { margin-bottom: var(--spacing-md); } .ch-shop-tabs .ch-tab { flex: 1 1 0; justify-content: center; min-width: 0; } .ch-shop-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .ch-shop-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0; min-height: 164px; } .ch-shop-item:hover { transform: none; } .ch-shop-item-img { height: 100%; min-height: 164px; aspect-ratio: auto; border-right: 1px solid var(--color-border-light); } .ch-shop-ready-badge { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-shop-item-info { min-width: 0; justify-content: center; gap: var(--spacing-sm); padding: 14px; } .ch-shop-item-title { font-size: var(--font-size-base); line-height: 1.35; overflow-wrap: anywhere; } .ch-shop-mini-progress { gap: var(--spacing-sm); } .ch-shop-item-info > .ch-text-xs { width: max-content; max-width: 100%; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary) !important; font-weight: 800; line-height: 1; white-space: nowrap; } .ch-shop-item-info > .ch-text-xs .ch-icon { flex: 0 0 auto; width: 14px; height: 14px; } .ch-shop-detail { gap: var(--spacing-lg); padding: var(--spacing-lg); } .ch-shop-detail-media { width: min(220px, 72vw); max-width: none; margin-inline: auto; } .ch-shop-detail-body h2 { font-size: var(--font-size-xl); line-height: 1.25; } .ch-shop-progress-line, .ch-shop-limit-row { align-items: center; } .ch-shop-required-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ch-shop-redemption-modal { max-height: calc(100vh - 24px); } } @media (prefers-reduced-motion: reduce) { .ch-furnace-heat, .ch-furnace-light, .ch-furnace-ember, .ch-furnace-ring, .ch-draw-stage::before, .ch-draw-idle-halo, .ch-draw-idle-particle, .ch-draw-burst-fx, .ch-draw-burst-core, .ch-draw-burst-bloom, .ch-draw-burst-wash, .ch-draw-burst-column, .ch-draw-burst-ring, .ch-draw-burst-ray, .ch-draw-burst-spark, .ch-draw-summon-core, .ch-draw-summon-beam, .ch-draw-summon-ring, .ch-draw-summon-spark, .ch-card-focus-card .ch-card-item-inner, .ch-result-card-3d .ch-result-card-inner, .ch-furnace-result-inner, .ch-card-focus-card.is-spin-360 .ch-card-item-inner, .ch-result-card-3d.is-spin-360 .ch-result-card-inner, .ch-furnace-result-card.is-spin-360 .ch-furnace-result-inner, .ch-card-detail-flip.is-spinning-360 .ch-card-detail-flip-inner { animation: none; } .ch-card-item-card:hover .ch-card-item-inner, .ch-result-card-3d:hover .ch-result-card-inner, .ch-card-detail-flip:not(.is-flipped):hover .ch-card-detail-flip-inner { transform: none; } .ch-card-detail-flip.is-flipped:hover .ch-card-detail-flip-inner { transform: rotateY(180deg); } .ch-furnace-ember { opacity: 0.35; } .ch-draw-idle-particle { opacity: 0.36; } .ch-draw-summon-spark { opacity: 0.45; } }