/* My Decks: card backs, generated faces, flip animation, editors */
.dk-back { position: relative; box-sizing: border-box; width: 100%; height: 100%; aspect-ratio: 2 / 3; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  --b1: #2a2156; --b2: #120d2b; --ink: rgba(216,180,106,.55);
  background-color: var(--b2); box-shadow: inset 0 0 0 3px var(--b2), inset 0 0 0 4px var(--ink), 0 4px 14px rgba(0,0,0,.35); }
.dk-back > span { position: relative; z-index: 1; font-size: 1.6rem; color: #e9cf8f; text-shadow: 0 0 10px rgba(233,207,143,.5); }
.dk-back::before { content: ""; position: absolute; inset: 7px; border-radius: 6px; border: 1px solid var(--ink); }
.bk-midnight { --b1: #2a2156; --b2: #120d2b; }
.bk-plum { --b1: #5a2559; --b2: #2a0f2c; }
.bk-forest { --b1: #245238; --b2: #0f2619; }
.bk-ocean { --b1: #1d4a6b; --b2: #0b2034; }
.bk-ember { --b1: #7a3020; --b2: #33110b; }
.bk-bone { --b1: #f1e6cc; --b2: #b8a37c; --ink: rgba(90,60,20,.55); }
.bk-bone > span { color: #5a3c14; text-shadow: none; }
.pat-plain { background-image: radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%); }
.pat-stars { background-image: radial-gradient(circle, rgba(255,240,200,.75) 1px, transparent 1.5px), radial-gradient(circle, rgba(255,240,200,.4) 1px, transparent 1.5px), radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%);
  background-size: 22px 22px, 13px 13px, 100% 100%; background-position: 0 0, 6px 9px, 0 0; }
.pat-moons { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M16 7a7 7 0 1 0 0 14a5.5 5.5 0 1 1 0-14z' fill='rgba(233,207,143,.35)'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%); background-size: 28px 28px, 100% 100%; }
.pat-lattice { background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(233,207,143,.28) 9px 10px), repeating-linear-gradient(-45deg, transparent 0 9px, rgba(233,207,143,.28) 9px 10px), radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%); }
.bk-bone.pat-stars { background-image: radial-gradient(circle, rgba(90,60,20,.45) 1px, transparent 1.5px), radial-gradient(circle, rgba(90,60,20,.25) 1px, transparent 1.5px), radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%); }
.bk-bone.pat-lattice { background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(90,60,20,.25) 9px 10px), repeating-linear-gradient(-45deg, transparent 0 9px, rgba(90,60,20,.25) 9px 10px), radial-gradient(circle at 50% 40%, var(--b1), var(--b2) 75%); }
.dk-mini { width: 40px; height: 60px; flex: none; border-radius: 6px; }
.dk-mini > span { font-size: .9rem; }
.dk-mini::before { inset: 4px; border-radius: 3px; }

/* Card faces */
.dk-face { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; display: grid; background: #000; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.dk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-gen { background: radial-gradient(circle at 50% 38%, var(--c1), var(--c2) 80%); place-items: center; grid-template-rows: 1fr auto; color: #f8efd9; }
.dk-gen::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(248,239,217,.55); border-radius: 6px; pointer-events: none; }
.dk-gen::after { content: "✦  ✦  ✦"; position: absolute; top: 9%; left: 0; right: 0; text-align: center; font-size: .5em; letter-spacing: .3em; opacity: .55; }
.dk-sym { font-size: 2.6em; line-height: 1; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(248,239,217,.4), 0 0 24px rgba(255,240,200,.25); margin-top: 14%; }
.dk-title { font-family: var(--display); font-size: .7em; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 0 8px 12%; line-height: 1.2; overflow-wrap: anywhere; }
.dk-photo .dk-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 9px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.dk-photo::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; z-index: 1; pointer-events: none; }
.dk-rws { background: #f3e7c9; }
.dk-rws img { object-fit: contain; }
.dk-thumb { width: 40px; flex: none; font-size: 7px; }
.dk-thumb .dk-face { border-radius: 4px; box-shadow: none; }
.dk-thumb .dk-face::before, .dk-thumb .dk-gen::after, .dk-thumb .dk-title { display: none; }
.dk-thumb .dk-gen { grid-template-rows: 1fr; }
.dk-thumb .dk-sym { margin-top: 0; }

.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.dk-tile { font-size: 9px; }

/* Draw table + flip */
.dk-table { display: grid; gap: 12px; justify-content: center; margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 120px)); font-size: 12px; }
.dk-table.dk-n1 { grid-template-columns: minmax(0, 200px); font-size: 17px; }
.dk-table.dk-n2 { grid-template-columns: repeat(2, minmax(0, 150px)); font-size: 14px; }
.dk-pos { display: grid; gap: 4px; text-align: center; align-content: start; }
.dk-pos > small { color: var(--accent); font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .65rem; }
.dk-slot { all: unset; box-sizing: border-box; display: block; width: 100%; aspect-ratio: 2 / 3; perspective: 900px; cursor: pointer; font-size: inherit; }
.dk-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.dk-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.dk-slot:not(.open):hover .dk-inner { transform: translateY(-4px); }
.dk-slot.open .dk-inner { transform: rotateY(180deg); }
.dk-side { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dk-front { transform: rotateY(180deg); }
.dk-front.rev { transform: rotateY(180deg) rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .dk-inner { transition: none; } }

.dk-mynote { border-left: 3px solid var(--accent); padding: 6px 0 6px 10px; background: rgba(212,173,98,.07); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.dk-notelabel { display: grid; gap: 6px; color: var(--accent); font-size: .9rem; margin-top: 8px; }
.dk-notelabel textarea { font: inherit; color: var(--text); background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; resize: vertical; }
:root[data-theme="light"] .dk-notelabel textarea { background: #fffaf0; }
.dk-saved { display: block; min-height: 1.2em; margin-top: 4px; }

/* Editors */
.dk-backprev, .dk-cardprev { width: 120px; margin: 0 auto 4px; font-size: 13px; }
.dk-fs { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.dk-fs legend { padding: 0 6px; color: var(--muted); font-size: .9rem; }
.dk-fs .chips { margin: 0; }
.dk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-sw { display: grid !important; justify-items: center; gap: 2px !important; cursor: pointer; font-size: .7rem !important; text-transform: capitalize; position: relative; }
.dk-sw input, .dk-chip input, .dk-symopt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dk-sw span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); }
.dk-sw input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,173,98,.35); }
.dk-sw input:focus-visible + span, .dk-chip input:focus-visible + span, .dk-symopt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dk-chip { display: inline-flex !important; cursor: pointer; position: relative; }
.dk-chip span { font-size: .85rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.dk-chip input:checked + span { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dk-syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.dk-symopt { display: block !important; cursor: pointer; position: relative; }
.dk-symopt span { display: grid; place-items: center; height: 40px; font-size: 1.3rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.dk-symopt input:checked + span { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 2px rgba(212,173,98,.35); }
.dk-nform { margin-top: 14px; }
.dk-edlist { display: grid; gap: 8px; }
.dk-edrow { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.dk-edname { flex: 1; min-width: 0; color: var(--text); }
.dk-edname strong { display: block; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-edname small { color: var(--muted); font-size: .8rem; }
.dk-edbtns { display: flex; gap: 4px; flex: none; }
.dk-edbtns button { font: inherit; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.dk-edbtns button:disabled { opacity: .3; cursor: default; }
.dk-edbtns button:last-child { color: var(--danger); }
.dk-linkbtn { display: block; text-align: center; box-sizing: border-box; }
.dk-danger { color: var(--danger) !important; border-color: var(--danger-border) !important; background: transparent; margin-top: 24px; }