.dialog { padding: 0; border: 1px solid var(--line-2); border-radius: 28px; background: var(--bg-2); color: var(--text); width: min(520px, calc(100vw - 24px)); max-height: min(92dvh, 760px); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(121, 233, 164, 0.06); }
.dialog:not([open]) { display: none; }
.dialog[open] { animation: dialog-in 0.4s var(--ease) both; display: flex; flex-direction: column; }
.dialog::backdrop { background: rgba(4, 8, 6, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.3s both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cd__art { position: relative; height: 260px; flex: none; display: grid; place-items: center; background: var(--tone-bg); }
.cd[data-tone="mint"] .cd__art { --tone-bg: linear-gradient(160deg, #e1f7e9, #bfe9d1); }
.cd[data-tone="lavender"] .cd__art { --tone-bg: linear-gradient(160deg, #d9d2fa, #b9aff0); }
.cd[data-tone="peach"] .cd__art { --tone-bg: linear-gradient(160deg, #fde7d6, #f4c6a6); }
.cd__art::before { content: ""; position: absolute; width: 5px; height: 5px; left: 16%; top: 24%; background: rgba(255, 255, 255, 0.9); box-shadow: 230px 50px 0 rgba(255, 255, 255, 0.7), 60px 140px 0 rgba(255, 255, 255, 0.6), 270px 150px 0 rgba(255, 255, 255, 0.85), 130px -10px 0 rgba(255, 255, 255, 0.6); }
.cd__art img { position: relative; width: calc(var(--sw) * 5px); image-rendering: pixelated; max-width: none; animation: ghost-bob 4s steps(1, end) infinite; filter: drop-shadow(0 8px 0 rgba(30, 40, 30, 0.12)); }
.cd__close, .cd__nav { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(12, 18, 14, 0.8); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.2s var(--ease), background 0.2s; }
.cd__close { right: 12px; top: 12px; }
.cd__nav { top: 50%; margin-top: -22px; }
.cd__nav--prev { left: 12px; } .cd__nav--next { right: 12px; }
.cd__close:active, .cd__nav:active { transform: scale(0.92); }
@media (hover: hover) { .cd__close:hover, .cd__nav:hover { background: #0c120e; } }
.cd__body { padding: 20px 22px 22px; display: grid; gap: 12px; overflow-y: auto; }
.cd__count { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.cd__name { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.cd__tag { color: var(--mint); font-weight: 600; }
.cd__lore { color: var(--text-2); line-height: 1.6; }
.cd__traits { display: flex; flex-wrap: wrap; gap: 8px; }
.cd__actions { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 560px) { .cd__art { height: 300px; } .cd__art img { width: calc(var(--sw) * 6px); } .cd__actions { grid-template-columns: 1fr; } }