/* 쿼카 듀얼 — docs/quokka-duel.md §11. 영상 영역(.video-wrap) 안에서만 그린다(framework §18.1).
   덱 선택·코인은 client가, 대결 화면(.qd-v …)은 quokka_duel_view.js가 그린다. 카드 크기는 --cw(카드 가로 px)를 따른다. */
#quokkaDuelRoot {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  z-index: 40; display: none; overflow: hidden;
  color: #e8edf5; font-family: inherit; font-size: 13px;
  background: radial-gradient(circle at 20% 10%, rgba(99, 102, 241, .18), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(14, 165, 233, .14), transparent 38%), #0b1020;
}
#quokkaDuelRoot.qd-visible { display: block; }
#quokkaDuelRoot * { box-sizing: border-box; }
#quokkaDuelRoot [hidden] { display: none !important; }
#quokkaDuelRoot button { font: inherit; color: inherit; cursor: pointer; }
#quokkaDuelRoot button:disabled { opacity: .45; cursor: default; }
#quokkaDuelRoot button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
.qd-body { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* CSS 확대만 쓴다. requestFullscreen 계열 금지(framework §18.3). */
#quokkaDuelRoot.qd-expanded {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 10000;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* 확대 중에는 머리 오른쪽을 비워 전용 축소 버튼이 항복·확대 버튼을 가리지 않게 한다. */
#quokkaDuelRoot.qd-expanded .qd-body > .qd-head { padding-right: 72px; }   /* .qd-narrow의 padding보다 우선 */
.qd-collapse { position: absolute; top: 6px; right: 6px; z-index: 50; display: none; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #334155; background: #111827; color: #e2e8f0; font-weight: 700; font-size: 12px; }
/* 영상 영역 **아래**의 외부 확대 버튼(framework §18.3) */
#quokkaDuelExpand { display: none; margin: 5px auto; padding: 9px 16px; border-radius: 9px; border: 1px solid #334155; background: none; color: #cbd5e1; font: inherit; cursor: pointer; }
@media (pointer: coarse), (max-width: 900px) { #quokkaDuelExpand.qd-show { display: block; } }

/* 머리(덱 선택·코인) */
.qd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid #1e293b; background: rgba(2, 6, 23, .6); }
.qd-title { font-size: 14px; }
.qd-stage { padding: 2px 8px; border-radius: 999px; background: #312e81; font-size: 11px; font-weight: 700; }
.qd-reason { flex: 1 1 160px; min-width: 0; color: #a5b4fc; font-size: 12px; overflow-wrap: anywhere; }
.qd-head-btns { display: flex; gap: 6px; margin-left: auto; }
.qd-mini { padding: 4px 10px; border-radius: 999px; border: 1px solid #334155; background: #111827; font-size: 11px; font-weight: 700; }
.qd-warn { color: #fca5a5; border-color: #7f1d1d !important; }
.qd-btn { padding: 6px 12px; border-radius: 9px; border: 1px solid #334155; background: #1e293b; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.qd-btn.qd-primary { background: #6366f1; border-color: #6366f1; color: #fff; }
.qd-btn.qd-on { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.qd-btn.qd-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.qd-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.qd-between { justify-content: space-between; }
.qd-timer { color: #fbbf24; font-weight: 700; font-variant-numeric: tabular-nums; }
.qd-ok { color: #86efac; }
.qd-center-note { margin: auto; color: #94a3b8; }

/* 덱 선택 */
/* 덱 목록만 내부 스크롤(도감처럼 여는 목록 — framework §18.2). 안내·타이머·확정 버튼은 늘 보인다. */
.qd-deckselect { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 10px; overflow: hidden; }
.qd-deck-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); align-content: start; gap: 10px; margin: 4px 0; }
.qd-deck { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 6px; border-radius: 10px; border: 2px solid #1e293b; background: #0f172a; text-align: center; }   /* 대표 카드 + 이름만 */
.qd-deck img { width: 92px; aspect-ratio: 421 / 614; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.qd-deck-dice { width: 92px; aspect-ratio: 421 / 614; display: flex; align-items: center; justify-content: center; font-size: 46px; border-radius: 4px; background: linear-gradient(160deg, #312e81, #1e1b4b 60%, #0f172a); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }   /* 「무작위」 타일: 대표 카드 자리 */
.qd-deck.qd-picked { border-color: #818cf8; background: #1e1b4b; }
.qd-deck-name { font-weight: 800; font-size: 14px; line-height: 1.25; word-break: keep-all; }
.qd-deck-name em { white-space: nowrap; font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: #78350f; color: #fde68a; }

/* 코인 */
.qd-coinview { margin: auto; text-align: center; padding: 12px; }
.qd-coinview .qd-row { justify-content: center; }   /* 선공·후공 버튼을 글자와 같은 가운데로 */
.qd-decks { color: #cbd5e1; }
.qd-coin { font-size: 48px; line-height: 1.2; }
.qd-spin { animation: qd-spin .6s linear infinite; }
@keyframes qd-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* 결과(대결 화면 위) */
.qd-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, .66); z-index: 30; animation: qd-fade-in .4s ease; }
.qd-result-card { max-width: min(92%, 520px); max-height: 92%; overflow: auto; padding: 16px 22px; border-radius: 16px; border: 1px solid #6366f1; background: linear-gradient(180deg, #111c36, #0b1224); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .7); }
.qd-result-card h3 { margin: 0 0 6px; font-size: clamp(26px, 6vmin, 44px); font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(180deg, #fff7d6, #fbbf24 55%, #b45309); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(251, 191, 36, .5)); }
.qd-result-card.qd-lose h3 { background-image: linear-gradient(180deg, #e0e7ff, #93c5fd 55%, #1e3a8a); filter: drop-shadow(0 0 10px rgba(96, 165, 250, .45)); }

/* 신청·혼자하기 팝업(사이트 공통 모달처럼 화면 위) */
.qd-challenge { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, .55); }
.qd-challenge-card { min-width: 260px; max-width: 92vw; padding: 16px 18px; border-radius: 14px; border: 1px solid #4f46e5; background: #0f172a; color: #e2e8f0; text-align: center; }
.qd-challenge-card h3 { margin: 0 0 6px; }
.qd-challenge-card label { display: block; margin: 8px 0; text-align: left; }
.qd-challenge-card select { width: 100%; margin-top: 4px; padding: 6px; border-radius: 8px; border: 1px solid #334155; background: #111827; color: #e2e8f0; font: inherit; }
.qd-challenge-time { margin: 6px 0 10px; color: #fbbf24; font-weight: 700; }
.qd-challenge .qd-btn { padding: 8px 16px; }
.qd-confirm p { margin: 4px 0 14px; color: #cbd5e1; font-size: 14px; }

/* 좁은 영상 영역(폰 세로 기본): 머리를 한 줄로 줄이고 안내 문구는 아래 한 줄로 */
#quokkaDuelRoot.qd-narrow .qd-head { gap: 4px 6px; padding: 4px 6px; }
#quokkaDuelRoot.qd-narrow .qd-title-text { display: none; }
#quokkaDuelRoot.qd-narrow .qd-reason { order: 9; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
#quokkaDuelRoot.qd-narrow .qd-deck-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; }
#quokkaDuelRoot.qd-narrow .qd-deck { padding: 5px 3px 4px; gap: 3px; }
#quokkaDuelRoot.qd-narrow .qd-deck img { width: 48px; }
#quokkaDuelRoot.qd-narrow .qd-deck-dice { width: 48px; font-size: 24px; }
#quokkaDuelRoot.qd-narrow .qd-deck-name { font-size: 11px; }

/* ═══════════════════ 대결 화면 (quokka_duel_view.js) ═══════════════════ */
.qd-v, .qd-v * { box-sizing: border-box; }   /* 대결 화면은 #quokkaDuelRoot 밖(화면 fixture 테스트)에서도 같은 상자 규칙을 쓴다 — 고르기 막대 폭 상한이 여백만큼 넘쳤다 */
.qd-v {
  --cw: 60px; --hw: 66px;
  position: absolute; inset: 0; overflow: hidden; font-size: calc(12px * var(--ui, 1)); color: #e8edf5;   /* --ui: HUD 배율(view가 영역 크기로 정한다) */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(ellipse 70% 42% at 50% 72%, rgba(37, 99, 235, .24), transparent 72%),
    radial-gradient(ellipse 70% 42% at 50% 26%, rgba(220, 38, 38, .16), transparent 72%),
    linear-gradient(180deg, #0b1122, #070b16 50%, #0a1226);
}
.qd-v img { -webkit-user-drag: none; user-select: none; }
.qd-v [hidden] { display: none !important; }   /* 대결 화면 층(오버레이·대화상자)은 hidden이면 입력을 가로채지 않는다(framework §18) */
.qd-v-mat, .qd-v-cards, .qd-v-ovl, .qd-v-hud, .qd-v-fx { position: absolute; inset: 0; }
.qd-v-mat { z-index: 1; }
.qd-v-cards { z-index: 2; pointer-events: none; }
.qd-v-ovl { z-index: 3; pointer-events: none; }
.qd-v-hud { z-index: 4; pointer-events: none; }
.qd-v-fx { z-index: 5; pointer-events: none; overflow: hidden; }
.qd-v-bar { z-index: 6; }
.qd-v-menu { z-index: 8; }
.qd-v-dialog { z-index: 9; }
.qd-v-over { z-index: 10; }
.qd-v-ghost { z-index: 11; }
.qd-v-toast { z-index: 7; }   /* 알림은 메뉴·대화상자 아래(누를 것을 가리지 않는다) */

/* 필드 판: 칸 틀 */
.qd-v-half { position: absolute; border-radius: calc(var(--cw) * .16); pointer-events: none; overflow: hidden; isolation: isolate; }
/* 색 띠·테두리는 ::after로 원화 위에 둔다 */
.qd-v-half::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.qd-v-half-mine::after { background: linear-gradient(180deg, rgba(30, 64, 175, .14), rgba(30, 64, 175, .05)); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .14); }
.qd-v-half-opp::after { background: linear-gradient(0deg, rgba(153, 27, 27, .14), rgba(153, 27, 27, .05)); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .12); }
/* 필드 마법 매트: 앞면 필드 마법 원화(자기 쪽 절반만). 위치·크기는 view가 정한다 */
.qd-v-fieldart { position: absolute; left: 0; top: 0; z-index: 0; max-width: none; opacity: 0; transition: opacity .7s ease; pointer-events: none; user-select: none; }
.qd-v-fieldart:not([src]) { display: none; }
.qd-v-fieldart.qd-on { opacity: .32; }
.qd-v-midline { position: absolute; height: 2px; transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .55), rgba(253, 230, 138, .5), rgba(125, 211, 252, .55), transparent); }
.qd-slot { position: absolute; left: 0; top: 0; display: grid; place-items: center; border-radius: calc(var(--cw) * .07);
  border: 1px solid rgba(125, 170, 255, .32); background: linear-gradient(180deg, rgba(59, 130, 246, .12), rgba(30, 58, 138, .05));
  transition: box-shadow .15s, background .15s, border-color .15s; }
.qd-slot i { font-style: normal; font-weight: 800; font-size: max(8px, calc(var(--cw) * .17)); color: rgba(191, 219, 254, .42); pointer-events: none; }
.qd-slot-s { border-color: rgba(94, 234, 212, .3); background: linear-gradient(180deg, rgba(20, 184, 166, .12), rgba(15, 118, 110, .05)); }
.qd-slot-e { border-color: rgba(196, 181, 253, .45); background: rgba(139, 92, 246, .1); }
.qd-slot-g, .qd-slot-d, .qd-slot-x, .qd-slot-r, .qd-slot-f { border-style: dashed; background: rgba(148, 163, 184, .06); }
.qd-slot.qd-slot-opp { border-color: rgba(248, 150, 150, .3); }
.qd-slot.qd-pick { border: 2px solid #facc15; box-shadow: 0 0 14px rgba(250, 204, 21, .8), inset 0 0 12px rgba(250, 204, 21, .35); animation: qd-pulse 1.1s ease-in-out infinite; cursor: pointer; }
.qd-slot.qd-drop { border: 2px solid #22d3ee; box-shadow: inset 0 0 14px rgba(34, 211, 238, .45); }
.qd-slot.qd-drop-hot { background: rgba(34, 211, 238, .3); box-shadow: 0 0 18px rgba(34, 211, 238, .9), inset 0 0 18px rgba(34, 211, 238, .6); }
.qd-slot.qd-can { box-shadow: 0 0 10px rgba(56, 189, 248, .75); cursor: pointer; }

/* 카드 */
.qd-c { position: absolute; left: 0; top: 0; pointer-events: auto; border-radius: calc(var(--cw) * .05); overflow: hidden; cursor: pointer;
  background: #1f2937; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), width .34s, height .34s, box-shadow .18s, filter .18s, opacity .18s; }
.qd-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.qd-c-noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 2px; text-align: center; font-size: 9px; background: #334155; overflow-wrap: anywhere; }
/* 카드 뒷면(자체 도안) */
.qd-c-art { position: absolute; inset: 0; border: max(1px, 4%) solid #5b3417; border-radius: inherit;
  background: radial-gradient(ellipse 30% 22% at 50% 50%, #fbbf24 0 26%, #9a3412 30% 56%, transparent 60%),
    radial-gradient(ellipse 58% 42% at 50% 50%, transparent 0 60%, rgba(251, 191, 36, .75) 62% 66%, transparent 68%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .04) 0 3%, transparent 3% 7%),
    linear-gradient(135deg, #43200d, #1c0f08 50%, #43200d); }
.qd-c-fd img { filter: brightness(.48) saturate(.55); }
.qd-c-fdmark { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .0) 0 7%, rgba(15, 23, 42, .45) 7% 10%); }
.qd-c-count { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 5px; background: rgba(2, 6, 23, .86); color: #e2e8f0; font-size: max(9px, calc(var(--cw) * .2)); font-weight: 800; line-height: 1.4; }
.qd-c-pile { box-shadow: 1px 1px 0 #111827, 2px 2px 0 #1f2937, 3px 3px 5px rgba(0, 0, 0, .55); }
.qd-c.qd-can { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px 3px rgba(56, 189, 248, .75); animation: qd-can 1.4s ease-in-out infinite; }
.qd-c.qd-pick { box-shadow: 0 0 0 2px #facc15, 0 0 14px 3px rgba(250, 204, 21, .8); animation: qd-pulse 1.1s ease-in-out infinite; }
.qd-c.qd-picked { box-shadow: 0 0 0 3px #f59e0b, 0 0 18px 4px rgba(245, 158, 11, .9); filter: brightness(1.12); }
.qd-c.qd-target { box-shadow: 0 0 0 2px #f87171, 0 0 12px rgba(248, 113, 113, .7); }
.qd-c.qd-target-hot { box-shadow: 0 0 0 3px #ef4444, 0 0 22px 6px rgba(239, 68, 68, .95); filter: brightness(1.15); }
.qd-c.qd-dragging { opacity: .3; }
.qd-c.qd-drag { touch-action: none; }
.qd-c-hand { box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.qd-c-hand.qd-lifted { --dy: var(--lift); z-index: 60 !important; }
@media (hover: hover) { .qd-c-hand:hover { --dy: var(--lift); z-index: 60 !important; } }
.qd-c-appear { animation: qd-appear .4s ease-out; }
.qd-v-dragging .qd-c { transition: box-shadow .18s, filter .18s, opacity .18s; }
.qd-v-dragging .qd-c.qd-c-hand:hover { --dy: 0px; }

/* 칸 위에 얹는 표시(회전하지 않는다) */
.qd-o { position: absolute; left: 0; top: 0; pointer-events: none; }
.qd-o-stat { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 55%); display: flex; gap: 2px; align-items: baseline; white-space: nowrap;
  padding: 0 5px; border-radius: 5px; background: rgba(2, 6, 23, .86); border: 1px solid rgba(148, 163, 184, .3);
  font-size: max(10px, calc(var(--cw) * .185)); line-height: 1.35; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.qd-o-stat i { font-style: normal; color: #64748b; }
/* 마스터 듀얼식: 표시 형식에 맞는 수치(공격 표시 = 공격력, 수비 표시 = 수비력)만 크고 흰색, 다른 쪽은 작고 회색.
   색은 수치 변화만 뜻한다 — 올라가면 파랑, 내려가면 빨강(강조 여부와 따로). 마스터 듀얼 화면 대조(2026-09-24) */
.qd-o-stat .qd-dim { color: #94a3b8; font-weight: 600; font-size: .82em; }
.qd-o-lv { position: absolute; left: 3%; top: 3%; padding: 0 3px; border-radius: 4px; background: rgba(2, 6, 23, .78); color: #fbbf24; font-style: normal; font-weight: 900;
  font-size: max(8px, calc(var(--cw) * .13)); line-height: 1.3; }
.qd-v-tiny .qd-o-lv { display: none; }
.qd-o-stat .qd-up { color: #38bdf8; }
.qd-o-stat .qd-down { color: #f87171; }
.qd-o-lv.qd-up { color: #38bdf8; }
.qd-o-lv.qd-down { color: #f87171; }
.qd-o-fd { opacity: .75; }
.qd-o-counter, .qd-o-chain, .qd-o-pick { position: absolute; display: grid; place-items: center; min-width: max(16px, calc(var(--cw) * .32)); height: max(16px, calc(var(--cw) * .32));
  padding: 0 3px; border-radius: 999px; font-size: max(9px, calc(var(--cw) * .2)); font-weight: 900; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.qd-o-counter { left: -4px; top: -4px; background: #0e7490; color: #ecfeff; }
.qd-o-chain { right: -5px; top: -5px; background: linear-gradient(#fb923c, #c2410c); color: #fff; border: 1px solid #fed7aa; }
.qd-o-pick { left: 50%; top: 50%; transform: translate(-50%, -50%); background: #f59e0b; color: #111827; }

/* HUD: 이름·LP, 조작 버튼, 페이즈, 체인, 설명 */
.qd-v-hud > * { position: absolute; pointer-events: auto; }
.qd-v-topbar, .qd-v-botbar { pointer-events: none !important; background: rgba(6, 10, 20, .94); box-shadow: 0 0 12px rgba(0, 0, 0, .5); }
.qd-v-info { padding: 5px 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(15, 23, 42, .8));
  border: 1px solid rgba(148, 163, 184, .28); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.qd-v-info[data-side="bottom"] { border-color: rgba(56, 189, 248, .5); }
.qd-v-info[data-side="top"] { border-color: rgba(248, 113, 113, .5); }
.qd-v-info.qd-target { box-shadow: 0 0 0 2px #f87171, 0 0 14px rgba(248, 113, 113, .7); }
.qd-v-info.qd-target-hot { box-shadow: 0 0 0 3px #ef4444, 0 0 24px 6px rgba(239, 68, 68, .9); }
/* 이름 줄은 한 줄이고, 칸보다 넓으면 view fitLine이 줄 전체를 zoom으로 줄인다(framework §18.6 — 예전에는 글자 단위로 꺾여 폰에서 2~3줄, 「(A / I)」까지 쪼개졌다) */
.qd-v-name { display: flex; align-items: center; gap: 6px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.qd-v-name > span { min-width: 0; }
/* 이름 옆 프로필 사진. 없으면 사이트 색 원 + 첫 글자, AI는 로봇 */
.qd-v-av { flex: none; width: calc(22px * var(--ui, 1)); height: calc(22px * var(--ui, 1)); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
.qd-v-av-fb { display: grid; place-items: center; font-style: normal; font-size: calc(11px * var(--ui, 1)); font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.qd-v-portrait .qd-v-av, .qd-v-tiny .qd-v-av { width: 18px; height: 18px; font-size: 9px; }
.qd-v-name small { color: #7dd3fc; font-weight: 700; }
.qd-v-name small.qd-v-aitag { color: #94a3b8; }   /* 혼자하기 AI: 이름 옆 회색 (AI) */
.qd-v-lp { display: flex; align-items: baseline; gap: 4px; }
.qd-v-lp > span { font-size: calc(10px * var(--ui, 1)); font-weight: 900; color: #94a3b8; }
.qd-v-lpnum { font-size: calc(20px * var(--ui, 1)); font-weight: 900; color: #fde68a; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(251, 191, 36, .35); }
.qd-v-lp.qd-thinking::after { content: ''; width: 7px; height: 7px; margin-left: auto; align-self: center; border-radius: 50%; background: #38bdf8; animation: qd-blink 1s ease-in-out infinite; }
.qd-v-flags { font-size: calc(10px * var(--ui, 1)); }
.qd-v-flags em { font-style: normal; padding: 0 5px; border-radius: 5px; background: #1e293b; color: #cbd5e1; }
.qd-v-flags .qd-v-warn { background: #7f1d1d; color: #fecaca; }
.qd-shake { animation: qd-shake .5s ease; }
.qd-v-ctrl { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-content: flex-start; }
.qd-v-cbtn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; border: 1px solid #334155; background: rgba(17, 24, 39, .92); font-size: calc(11px * var(--ui, 1)); font-weight: 700; line-height: 1.4; }
.qd-v-cbtn:hover { border-color: #64748b; }
.qd-v-cbtn[aria-pressed="true"] { border-color: #818cf8; background: rgba(79, 70, 229, .35); }
.qd-v-cbtn small { font-size: calc(11px * var(--ui, 1)); }
/* 버튼이 두 줄로 밀리면(항복만 아래로) 좁히고, 그래도 넘치면 아이콘만 — view fitCtrl() */
.qd-v-ctrl.qd-v-ctrl-tight { gap: 2px; }
/* 아이콘만으로도 두 줄이면 한 줄로 두고 버튼을 칸 폭에 맞게 줄인다(view fitCtrl, framework §18.6) */
.qd-v-ctrl > .qd-v-cbtn { zoom: var(--qd-ctrl-z, 1); white-space: nowrap; }
.qd-v-ctrl.qd-v-ctrl-zoom { flex-wrap: nowrap; }
.qd-v-ctrl.qd-v-ctrl-zoom > .qd-v-cbtn { flex: none; }
.qd-v-ctrl-tight .qd-v-cbtn { padding: 3px 5px; gap: 2px; letter-spacing: -.02em; }
.qd-v-ctrl-icons .qd-v-cbtn:not([data-act="surrender"]):not([data-act="chain"]) small, .qd-v-ctrl-bare .qd-v-cbtn:not([data-act="chain"]) small { display: none; }
/* 체인 버튼: 좁아지면 「체인」은 빼고 모드 글자만 남긴다. 모드별 색 — 항상(주황), 끔(회색·흐린 아이콘) */
.qd-v-ctrl-icons [data-act="chain"] .qd-v-cl, .qd-v-ctrl-bare [data-act="chain"] .qd-v-cl, .qd-v-portrait [data-act="chain"] .qd-v-cl, .qd-v-tiny [data-act="chain"] .qd-v-cl { display: none; }
.qd-v-cbtn[data-chain="always"] { border-color: #f59e0b; background: rgba(245, 158, 11, .22); color: #fde68a; }
.qd-v-cbtn[data-chain="off"] { border-color: #475569; color: #94a3b8; }
.qd-v-cbtn[data-chain="off"] > span { opacity: .4; filter: grayscale(1); }
.qd-v-warnbtn { color: #fca5a5; border-color: #7f1d1d; }
.qd-v-phase { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(15, 23, 42, .82); border: 1px solid rgba(99, 102, 241, .35); }
.qd-v-turn { font-weight: 700; line-height: 1.3; }
/* 경기 HUD 줄(이름·턴·페이즈 칩·누가 고르는 중·페이즈 버튼): 한 줄로 재고(qd-fit-measure) 칸보다 넓으면 view fitLine이 zoom으로 줄인다.
   최소 배율(0.55)로도 안 들어가면 qd-fit-wrap — 그 크기에서 단어 단위로 꺾는다(한 단어가 줄보다 길 때만 단어 안에서) */
.qd-fit { white-space: nowrap; }
.qd-v-phases.qd-fit, .qd-v-pbtns.qd-fit { flex-wrap: nowrap; }
.qd-fit-measure { width: max-content !important; }
.qd-fit.qd-fit-wrap, .qd-v-name.qd-fit-wrap { white-space: normal; flex-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; }
.qd-v-turn b { color: #c7d2fe; }
.qd-v-owner { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(148, 163, 184, .18); }
.qd-v-owner.qd-mine { background: rgba(59, 130, 246, .3); color: #dbeafe; }
.qd-v-owner.qd-opp { background: rgba(239, 68, 68, .28); color: #fee2e2; }
.qd-v-phases { display: flex; flex-wrap: wrap; gap: 2px; }
.qd-v-phases span { padding: 1px 5px; border-radius: 5px; background: rgba(30, 41, 59, .85); color: #64748b; font-size: calc(10px * var(--ui, 1)); font-weight: 800; }
.qd-v-phases .qd-on { background: linear-gradient(#6366f1, #4338ca); color: #fff; box-shadow: 0 0 8px rgba(99, 102, 241, .8); }
.qd-v-wait, .qd-v-mytime { font-size: calc(11px * var(--ui, 1)); color: #94a3b8; }
.qd-v-mytime { color: #bae6fd; }
.qd-v-pbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.qd-v-pbtn { flex: 1 1 auto; min-height: calc(32px * var(--ui, 1)); padding: 6px 10px; border-radius: 10px; border: 1px solid #4f46e5; font-weight: 800; color: #fff;
  background: linear-gradient(#4338ca, #312e81); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.qd-v-pbtn.qd-v-go { border-color: #f59e0b; background: linear-gradient(#d97706, #92400e); }
.qd-v-pbtn.qd-v-end { border-color: #818cf8; }
.qd-v-pbtn:not(:disabled):hover { filter: brightness(1.15); }
.qd-v-chain { display: flex; flex-direction: column; gap: 3px; overflow: auto; padding: 5px; border-radius: 10px; background: rgba(67, 20, 7, .55); border: 1px solid rgba(251, 146, 60, .45); }
.qd-v-chain-title { font-size: calc(10px * var(--ui, 1)); font-weight: 900; color: #fdba74; letter-spacing: .08em; }
.qd-v-link { display: flex; align-items: center; gap: 5px; font-size: calc(11px * var(--ui, 1)); cursor: pointer; }
.qd-v-link b { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #ea580c; color: #fff; font-size: calc(10px * var(--ui, 1)); }
.qd-v-link img { width: 20px; height: 29px; object-fit: cover; border-radius: 2px; flex: none; }
.qd-v-link span { overflow-wrap: anywhere; }
/* 가로 배치 오른쪽 진행 기록(체인 칸 아래 ~ 페이즈 칸 위) */
.qd-v-feed { display: flex; flex-direction: column; min-height: 0; padding: 5px 6px; border-radius: 10px; background: rgba(15, 23, 42, .72); border: 1px solid rgba(99, 102, 241, .25); }
.qd-v-feed-title { flex: none; font-size: calc(12px * var(--ui, 1)); font-weight: 900; color: #a5b4fc; letter-spacing: .08em; margin-bottom: 3px; }
.qd-v-feed ol { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.qd-v-feed li { font-size: calc(13px * var(--ui, 1)); line-height: 1.4; overflow-wrap: anywhere; }
.qd-v-feed li[data-code], .qd-v-log li[data-code] { cursor: pointer; }
.qd-v-feed li[data-code]:hover, .qd-v-log li[data-code]:hover { text-decoration: underline; }
.qd-f-me { color: #bae6fd; }
.qd-f-opp { color: #fecaca; }
.qd-f-sys { color: #94a3b8; }
.qd-f-turn { margin-top: 4px; color: #a5b4fc; font-weight: 800; text-align: center; }
.qd-v-feed li:first-child.qd-f-turn { margin-top: 0; }
.qd-v-detail { display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 8px; border-radius: 12px; background: rgba(8, 13, 28, .9); border: 1px solid rgba(148, 163, 184, .22); }
.qd-v-dimg { flex: none; display: flex; justify-content: center; }
.qd-v-dimg img { width: auto; max-width: 100%; max-height: min(calc(var(--dh, 520px) * .5), 300px); aspect-ratio: 421 / 614; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
.qd-v-dimg[data-v="zoom"] { cursor: zoom-in; }
/* 크게 보기: 영상 영역 높이의 거의 전부(파일 폭 600 = 높이 875를 넘지 않게) */
.qd-v-zoom { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-out; }
.qd-v-zoom img { height: min(94%, 875px); width: auto; max-width: 94%; aspect-ratio: 421 / 614; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, .7); animation: qd-fade-in .15s ease; }
.qd-v-dtext { flex: 1; min-height: 0; overflow: auto; }
/* 설명 칸(마스터 듀얼식): 이름 막대 → 그림 + ★·ATK·DEF → 종류 → 효과문(남는 높이 전부) */
.qd-v-dname { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #8a5a2b; border: 1px solid rgba(0, 0, 0, .45);
  color: #fff; font-size: calc(16px * var(--ui, 1)); line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.qd-v-dname b { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; font-weight: 900; }   /* 한 줄에 들어갈 때까지 fitDetailName이 글자를 줄이고, 두 줄이면 단어 단위로 고르게 나눈다 */
.qd-v-dname.qd-dk-normal { background: #a88a2e; } .qd-v-dname.qd-dk-effect { background: #b3622a; } .qd-v-dname.qd-dk-ritual { background: #3d62b3; }
.qd-v-dname.qd-dk-fusion { background: #7a4aa8; } .qd-v-dname.qd-dk-spell { background: #178a78; } .qd-v-dname.qd-dk-trap { background: #a8337a; } .qd-v-dname.qd-dk-token { background: #6b7280; }
.qd-v-dname.qd-dk-synchro { background: #e5e7eb; color: #111827; text-shadow: none; } .qd-v-dname.qd-dk-synchro .qd-v-dattr, .qd-v-dname.qd-dk-synchro .qd-v-dtag { color: #fff; }
.qd-v-dattr { flex: none; padding: 0 7px; border-radius: 999px; background: rgba(0, 0, 0, .38); font-size: calc(12px * var(--ui, 1)); font-weight: 800; }
.qd-v-dmid { flex: none; display: flex; gap: 10px; align-items: center; }
.qd-v-dmid .qd-v-dimg { flex: none; width: clamp(60px, 38%, calc(150px * var(--ui, 1))); cursor: zoom-in; }
.qd-v-dmid .qd-v-dimg img { display: block; width: 100%; height: auto; max-height: calc(var(--dh, 520px) * .42); object-fit: contain; }
.qd-v-dstat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: calc(19px * var(--ui, 1)); font-weight: 900; color: #f8fafc; font-variant-numeric: tabular-nums; line-height: 1.2; }
.qd-v-dstat span { display: flex; align-items: baseline; gap: 6px; }
.qd-v-dstat i { flex: none; min-width: 2.3em; font-style: normal; font-size: .6em; font-weight: 800; color: #94a3b8; letter-spacing: .04em; }
.qd-v-dstat span:first-child i { color: #fbbf24; font-size: .8em; min-width: 1.73em; }
.qd-v-dstat .qd-up { color: #38bdf8; } .qd-v-dstat .qd-down { color: #f87171; }
.qd-v-dstat-st { font-size: calc(15px * var(--ui, 1)); color: #e2e8f0; }
.qd-v-dmid + .qd-v-dtype { margin: 0; }
.qd-v-detail > .qd-v-ddesc { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 6px 9px; border-radius: 8px; background: rgba(2, 6, 23, .5); border: 1px solid rgba(148, 163, 184, .14); font-size: calc(15px * var(--ui, 1)); }
.qd-v-dhead { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: calc(16px * var(--ui, 1)); }
.qd-v-dtag { padding: 0 5px; border-radius: 5px; background: #334155; font-size: calc(11px * var(--ui, 1)); }
.qd-v-dtype { color: #a5b4fc; font-size: calc(13px * var(--ui, 1)); margin: 3px 0; }
.qd-v-dstats { color: #fde68a; font-size: calc(13px * var(--ui, 1)); margin: 3px 0; }
.qd-v-dstats .qd-up { color: #38bdf8; } .qd-v-dstats .qd-down { color: #f87171; }
.qd-v-ddesc { margin: 6px 0 0; white-space: pre-wrap; font-size: calc(14px * var(--ui, 1)); line-height: 1.6; color: #e8eef7; }
/* 세로(폰) 설명 칸은 낮아서 한 단계 작게 — 그래도 예전(11.5px)보다 크다 */
.qd-v-portrait .qd-v-dhead { font-size: calc(14px * var(--ui, 1)); }
.qd-v-portrait .qd-v-dtype, .qd-v-portrait .qd-v-dstats { font-size: calc(12px * var(--ui, 1)); }
.qd-v-portrait .qd-v-ddesc { font-size: calc(13px * var(--ui, 1)); line-height: 1.5; }
.qd-v-dhint, .qd-v-dempty { margin: auto; color: #64748b; font-size: calc(11px * var(--ui, 1)); text-align: center; }
/* 세로(폰) 설명 칸: 왼쪽에 그림, 오른쪽에 이름·수치·종류·효과문 */
.qd-v-portrait .qd-v-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 8px; row-gap: 3px; }
.qd-v-portrait .qd-v-dmid { display: contents; }
.qd-v-portrait .qd-v-dmid .qd-v-dimg { grid-column: 1; grid-row: 1 / -1; width: auto; height: 100%; min-height: 0; }
.qd-v-portrait .qd-v-dmid .qd-v-dimg img { height: 100%; width: auto; max-height: 100%; max-width: 34vw; }
.qd-v-portrait .qd-v-dname { grid-column: 2; grid-row: 1; font-size: calc(14px * var(--ui, 1)); padding: 2px 6px; }
.qd-v-portrait .qd-v-dstat { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 2px 12px; font-size: calc(15px * var(--ui, 1)); }
.qd-v-portrait .qd-v-dtype { grid-column: 2; grid-row: 3; }
.qd-v-portrait .qd-v-detail > .qd-v-ddesc { grid-column: 2; grid-row: 4; font-size: calc(13px * var(--ui, 1)); padding: 4px 6px; }
.qd-v-portrait .qd-v-dhint { grid-column: 1 / -1; }

/* 선택 안내 막대 */
.qd-v-bar { position: absolute; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; padding: 4px 8px;
  border-radius: 12px; background: rgba(15, 23, 42, .95); border: 1px solid #facc15; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); font-size: calc(12px * var(--ui, 1)); }
.qd-v-bar-text { font-weight: 800; color: #fef3c7; }
.qd-v-bar-count { padding: 0 6px; border-radius: 6px; background: #422006; color: #fde68a; font-weight: 800; font-variant-numeric: tabular-nums; }
.qd-v-bar-err { flex-basis: 100%; text-align: center; color: #fca5a5; font-weight: 800; }
.qd-v-btn { min-height: calc(28px * var(--ui, 1)); padding: 4px 12px; border-radius: 9px; border: 1px solid #334155; background: #1e293b; color: inherit; font-weight: 800; }
.qd-v-btn.qd-v-primary { border-color: #6366f1; background: linear-gradient(#6366f1, #4338ca); color: #fff; }
.qd-v-btn.qd-v-ghostbtn { background: transparent; font-weight: 600; font-size: calc(11px * var(--ui, 1)); }
.qd-v-btn.qd-on { border-color: #0ea5e9; background: #0369a1; color: #fff; }
.qd-v-btn.qd-v-undo { border-color: #f59e0b; background: rgba(120, 53, 15, .85); color: #fde68a; }   /* 발동 취소 */

/* 카드 메뉴 */
.qd-v-menu { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 3px; min-width: calc(118px * var(--ui, 1)); max-width: calc(230px * var(--ui, 1)); padding: 5px;
  border-radius: 12px; background: rgba(12, 20, 40, .97); border: 1px solid #38bdf8; box-shadow: 0 8px 26px rgba(0, 0, 0, .65), 0 0 16px rgba(56, 189, 248, .3); animation: qd-pop .14s ease-out; }
.qd-v-mtitle { padding: 1px 4px 3px; font-size: calc(11px * var(--ui, 1)); font-weight: 800; color: #bae6fd; border-bottom: 1px solid rgba(56, 189, 248, .3); overflow-wrap: anywhere; }
.qd-v-mbtn { min-height: calc(32px * var(--ui, 1)); padding: 6px 10px; border-radius: 8px; border: 1px solid #1d4ed8; background: linear-gradient(#2563eb, #1e3a8a); color: #fff; font-weight: 800; text-align: left; }
.qd-v-mbtn small { display: block; margin-top: 1px; font-size: calc(10px * var(--ui, 1)); font-weight: 500; color: #bfdbfe; line-height: 1.3; }
.qd-v-mbtn:hover { filter: brightness(1.15); }
.qd-v-mbtn.qd-v-minfo { border-color: #334155; background: #1e293b; }

/* 대화상자(체인·예/아니오·목록 고르기 …) */
.qd-v-dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.qd-v-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .5); }
.qd-v-dlg { position: relative; display: flex; flex-direction: column; gap: 6px; width: max-content; min-width: min(calc(260px * var(--ui, 1)), 92%); max-width: min(94%, calc(640px * var(--ui, 1))); max-height: 94%;
  padding: 9px 12px; overflow-y: auto; border-radius: 14px; background: linear-gradient(180deg, #121e3b, #0a1226); border: 1px solid #6366f1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .75), 0 0 24px rgba(99, 102, 241, .25); animation: qd-pop .16s ease-out; }
.qd-v-dlg-chain { border-color: #fb923c; box-shadow: 0 12px 40px rgba(0, 0, 0, .75), 0 0 24px rgba(251, 146, 60, .3); }
.qd-v-dhd { display: flex; align-items: center; gap: 8px; }
.qd-v-dhd b { flex: 1; font-size: calc(13px * var(--ui, 1)); }
/* 체인 창의 체인 번호(「체인 2」) — 내 링크에 이어 묻는 창을 첫 창과 구분(docs §11.1) */
.qd-v-dbadge { flex: none; padding: 1px 8px; border-radius: 8px; background: #fb923c; color: #1c1206; font-weight: 800; font-size: calc(16px * var(--ui, 1)); line-height: 1.3; }
.qd-v-dlg-own { border-color: #60a5fa; box-shadow: 0 12px 40px rgba(0, 0, 0, .75), 0 0 24px rgba(96, 165, 250, .3); }
.qd-v-dlg-own .qd-v-dbadge { background: #60a5fa; color: #0a1226; }
.qd-v-dsub { margin: 0; font-size: calc(11px * var(--ui, 1)); color: #a5b4fc; }
.qd-v-dq { margin: 0; line-height: 1.5; }
.qd-v-drow { display: flex; gap: 10px; align-items: center; }
.qd-v-dft { position: sticky; bottom: -9px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 4px 0 2px; background: #0a1226; }
.qd-v-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px; touch-action: pan-x; scrollbar-width: thin; }
.qd-v-lcard { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(calc(62px * var(--ui, 1)), calc(var(--cw) * 1.35), calc(118px * var(--ui, 1)));
  padding: 3px; border-radius: 8px; border: 1px solid #1e293b; background: #0f172a; text-align: center; }
.qd-v-lcard img, .qd-v-lcard .qd-c-art { position: relative; display: block; width: 100%; aspect-ratio: 421 / 614; object-fit: cover; border-radius: 4px; }
.qd-v-lname { font-size: calc(10px * var(--ui, 1)); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.qd-v-ltext { font-size: calc(9.5px * var(--ui, 1)); line-height: 1.3; color: #fdba74; }
.qd-v-lwhere { font-size: calc(9px * var(--ui, 1)); color: #94a3b8; }
.qd-v-lcard.qd-can { border-color: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, .6); }
.qd-v-lcard.qd-picked { border-color: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, .8); }
.qd-v-lcard .qd-o-pick { top: 38%; }
.qd-v-opts { display: flex; flex-direction: column; gap: 5px; }
.qd-v-opts.qd-v-grid { flex-direction: row; flex-wrap: wrap; }
.qd-v-opt { text-align: left; min-height: calc(34px * var(--ui, 1)); }
.qd-v-posrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qd-v-pos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid #334155; background: #0f172a; }
.qd-v-pos:hover { border-color: #818cf8; }
.qd-v-posimg { position: relative; display: grid; place-items: center; width: calc(64px * var(--ui, 1)); height: calc(64px * var(--ui, 1)); }
.qd-v-posimg img, .qd-v-posimg .qd-c-art { width: calc(44px * var(--ui, 1)); height: calc(64px * var(--ui, 1)); object-fit: cover; border-radius: 4px; position: relative; }
.qd-v-posimg.qd-def img, .qd-v-posimg.qd-def .qd-c-art { transform: rotate(90deg); }
.qd-v-counters { display: flex; flex-direction: column; gap: 4px; }
.qd-v-crow { display: flex; align-items: center; gap: 6px; }
.qd-v-filter { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font: inherit; }

/* 큰 설명·더미 목록·기록 */
.qd-v-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, .72); animation: qd-fade-in .15s ease; container-type: size; }
/* 큰 설명 창(길게 누르기·우클릭·작은 화면 누르기): 그림은 창 높이에 맞춰 줄고, 효과문이 길면 글 칸(.qd-v-oscroll)만 스크롤한다. 닫기 버튼은 늘 보인다. */
.qd-v-ocard { display: flex; gap: 12px; align-items: flex-start; width: min(94cqw, 780px); max-height: 94cqh; padding: 10px; border-radius: 14px; background: #0b1224; border: 1px solid #475569; overflow: hidden; }
.qd-v-ocard > img { width: min(42cqw, 280px, calc((94cqh - 22px) * 421 / 614)); height: auto; flex: none; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }
.qd-v-otext { flex: 1; min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qd-v-oscroll { flex: 0 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.qd-v-otext .qd-v-btn { flex: none; margin-top: 6px; }
.qd-v-portrait .qd-v-ocard { flex-direction: column; align-items: center; }
.qd-v-portrait .qd-v-ocard > img { width: min(62cqw, 260px, calc(44cqh * 421 / 614)); }
.qd-v-portrait .qd-v-otext { flex: 0 1 auto; align-self: stretch; }
.qd-v-log ol { margin: 0; padding-left: 20px; max-height: 60vh; overflow: auto; font-size: calc(13px * var(--ui, 1)); line-height: 1.6; color: #cbd5e1; }

/* 드래그 유령·알림 */
.qd-v-ghost { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 6px; overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6), 0 0 20px rgba(56, 189, 248, .7); }
.qd-v-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qd-v-ghost .qd-c-art { position: absolute; inset: 0; }
.qd-v-toast { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); max-width: 88%; padding: 5px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(15, 23, 42, .95); border: 1px solid #a5b4fc; font-size: calc(12px * var(--ui, 1)); font-weight: 700; text-align: center; animation: qd-fade-in .2s ease; }
.qd-v-toast.qd-v-toast-err { border-color: #f87171; color: #fecaca; }

/* 연출 */
.qd-fx-ring { position: absolute; border-radius: 50%; border: 3px solid #fde68a; box-shadow: 0 0 18px #f59e0b, inset 0 0 14px #f59e0b; animation: qd-ring .9s ease-out forwards; }
.qd-fx-ring.qd-fx-sp { border-color: #ddd6fe; box-shadow: 0 0 22px #8b5cf6, inset 0 0 16px #8b5cf6; }
.qd-fx-ring.qd-fx-flip { border-color: #bfdbfe; box-shadow: 0 0 16px #3b82f6, inset 0 0 12px #3b82f6; }
.qd-fx-show { position: absolute; animation: qd-show 1.1s ease forwards; }
.qd-fx-show img { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 34px 8px rgba(56, 189, 248, .8); }
.qd-fx-show.qd-fx-opp img { box-shadow: 0 0 34px 8px rgba(248, 113, 113, .85); }
.qd-fx-show b { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); padding: 2px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(#0ea5e9, #1d4ed8); color: #fff; font-weight: 900; letter-spacing: .12em; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.qd-fx-show.qd-fx-opp b { background: linear-gradient(#f87171, #b91c1c); }
.qd-fx-banner { position: absolute; width: 100%; text-align: center; animation: qd-banner 1.3s ease forwards; }
.qd-fx-banner span { display: inline-block; padding: 6px 30px; font-size: clamp(15px, calc(var(--cw) * .42), 34px); font-weight: 900; letter-spacing: .08em; color: #fff;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .9) 18%, rgba(30, 64, 175, .9) 82%, transparent); text-shadow: 0 0 10px #60a5fa; }
.qd-fx-banner.qd-fx-turn span { background: linear-gradient(90deg, transparent, rgba(146, 64, 14, .92) 18%, rgba(146, 64, 14, .92) 82%, transparent); text-shadow: 0 0 10px #fbbf24; }
.qd-fx-banner.qd-fx-negate span { background: linear-gradient(90deg, transparent, rgba(127, 29, 29, .92) 18%, rgba(127, 29, 29, .92) 82%, transparent); text-shadow: 0 0 10px #f87171; }
.qd-fx-cutin { position: absolute; width: 100%; height: 36%; overflow: hidden; animation: qd-cutin 1.7s ease forwards;
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); background: linear-gradient(90deg, rgba(30, 58, 138, .95), rgba(15, 23, 42, .95)); }
.qd-fx-cutin.qd-fx-opp { background: linear-gradient(90deg, rgba(127, 29, 29, .95), rgba(15, 23, 42, .95)); }
.qd-fx-cutin-art { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 120% auto; background-position: 50% 30%; opacity: .9; animation: qd-cutin-pan 1.7s linear forwards; }
.qd-fx-cutin b { position: absolute; right: 6%; bottom: 14%; font-size: clamp(16px, calc(var(--cw) * .5), 40px); font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000, 0 0 14px #fbbf24; }
.qd-fx-num { position: absolute; transform: translate(-50%, -50%); font-size: clamp(16px, calc(var(--cw) * .42), 38px); font-weight: 900; white-space: nowrap;
  color: #f87171; text-shadow: 0 2px 0 #000, 0 0 10px #ef4444; animation: qd-num 1.3s ease-out forwards; }
/* 데미지·회복: 필드 가운데 큰 숫자(마스터 듀얼식) */
.qd-fx-big { position: absolute; z-index: 6; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-size: clamp(34px, calc(var(--cw) * 1.05), 112px);
  font-weight: 900; font-style: italic; letter-spacing: -.03em; color: #ef4444; -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  text-shadow: 0 5px 0 #7f1d1d, 0 0 26px rgba(239, 68, 68, .85); animation: qd-big 1.25s cubic-bezier(.2, .9, .3, 1) forwards; }
.qd-fx-big.qd-fx-big-heal { color: #22c55e; text-shadow: 0 5px 0 #14532d, 0 0 26px rgba(34, 197, 94, .85); }
@keyframes qd-big { 0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(.92); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1.06); } 28% { transform: translate(-50%, -50%) scale(1); } 78% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -64%) scale(.96); opacity: 0; } }
.qd-fx-num.qd-fx-heal { color: #4ade80; text-shadow: 0 2px 0 #000, 0 0 10px #22c55e; }
.qd-fx-num.qd-fx-cost { color: #fb923c; text-shadow: 0 2px 0 #000, 0 0 10px #f97316; }
.qd-fx-reticle { position: absolute; border-radius: 50%; border: 2px dashed #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, .7); animation: qd-reticle .9s ease-out forwards; }
.qd-fx-aim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.qd-fx-aim-line { fill: none; stroke: #f87171; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 7; filter: drop-shadow(0 0 5px #ef4444); animation: qd-dash .5s linear infinite; }
.qd-fx-aim-head { fill: #f87171; }
/* 공격(마스터 듀얼식 돌진): 카드 복제본이 날아가 부딪치고 돌아온다. 타격 불꽃·화면 흔들림·직접 공격 붉은 번쩍임 */
.qd-fx-atk { position: absolute; transform: translate(-50%, -50%); z-index: 3; overflow: hidden; border-radius: calc(var(--cw) * .05); background: #1f2937; will-change: transform;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .65), 0 0 0 2px rgba(254, 215, 170, .9), 0 0 24px 6px rgba(251, 146, 60, .7); }
.qd-fx-atk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qd-fx-impact { position: absolute; z-index: 4; width: calc(var(--cw) * 2.4); height: calc(var(--cw) * 2.4); transform: translate(-50%, -50%); }
.qd-fx-impact.qd-fx-direct { width: calc(var(--cw) * 3.6); height: calc(var(--cw) * 3.6); }
.qd-fx-impact b { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 14%, #fef08a 26%, #fb923c 44%, rgba(239, 68, 68, .5) 58%, transparent 72%); animation: qd-impact .42s cubic-bezier(.2, .9, .3, 1) forwards; }
.qd-fx-impact i { position: absolute; left: 50%; top: 50%; width: 48%; height: 5%; margin-top: -2.5%; transform-origin: 0 50%; border-radius: 3px;
  background: linear-gradient(90deg, #fff, #fde047 40%, transparent); animation: qd-spark .4s ease-out forwards; }
.qd-fx-impact i:nth-child(2) { --r: -70deg; } .qd-fx-impact i:nth-child(3) { --r: -40deg; } .qd-fx-impact i:nth-child(4) { --r: -15deg; } .qd-fx-impact i:nth-child(5) { --r: 15deg; }
.qd-fx-impact i:nth-child(6) { --r: 40deg; } .qd-fx-impact i:nth-child(7) { --r: 70deg; } .qd-fx-impact i:nth-child(8) { --r: 150deg; } .qd-fx-impact i:nth-child(9) { --r: 210deg; }
/* 소환(마스터 듀얼식): 복제본이 떠올랐다 내리꽂히거나(일반), 마법진·빛기둥 속에서 나타난다(특수) */
.qd-fx-sum { position: absolute; z-index: 3; transform: translate(-50%, -50%); overflow: hidden; border-radius: calc(var(--cw) * .05); background: #1f2937; will-change: transform, opacity;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(253, 230, 138, .85), 0 0 22px 4px rgba(250, 204, 21, .55); }
.qd-fx-sum img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qd-fx-sum.qd-fx-sum-sp { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 0 30px 8px rgba(255, 255, 255, .55); }
.qd-fx-slam { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; }
.qd-fx-slam b { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(254, 240, 138, .95); box-shadow: 0 0 16px rgba(250, 204, 21, .9), inset 0 0 12px rgba(250, 204, 21, .6);
  transform: scaleY(.42) scale(.25); animation: qd-slam-wave .55s cubic-bezier(.15, .8, .3, 1) forwards; }
.qd-fx-slam i { position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; margin: -5% 0 0 -5%; border-radius: 50%; background: rgba(226, 232, 240, .75); filter: blur(2px);
  animation: qd-dust .6s ease-out forwards; }
.qd-fx-slam i:nth-child(2) { --dx: -120%; --dy: -40%; } .qd-fx-slam i:nth-child(3) { --dx: 120%; --dy: -40%; } .qd-fx-slam i:nth-child(4) { --dx: -170%; --dy: 10%; }
.qd-fx-slam i:nth-child(5) { --dx: 170%; --dy: 10%; } .qd-fx-slam i:nth-child(6) { --dx: -90%; --dy: 50%; } .qd-fx-slam i:nth-child(7) { --dx: 90%; --dy: 50%; }
.qd-fx-slam i:nth-child(8) { --dx: -40%; --dy: -80%; } .qd-fx-slam i:nth-child(9) { --dx: 40%; --dy: -80%; }
.qd-fx-sp { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; --c: #fbbf24; }
.qd-fx-sp.qd-fx-sp-fusion { --c: #c084fc; }
.qd-fx-sp.qd-fx-sp-ritual { --c: #60a5fa; }
.qd-fx-sp.qd-fx-sp-synchro { --c: #bae6fd; }
.qd-fx-sp i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 18px var(--c), inset 0 0 18px var(--c);
  transform: scaleY(.5) scale(.2) rotate(0deg); animation: qd-sp-circle .9s ease-out forwards; }
.qd-fx-sp i:nth-child(3) { inset: 16%; border-style: dashed; border-width: 2px; animation-name: qd-sp-circle2; }
.qd-fx-sp b { position: absolute; left: 50%; bottom: 50%; width: 46%; height: 0; transform: translateX(-50%); border-radius: 50% 50% 0 0; filter: blur(3px);
  background: linear-gradient(to top, var(--c), rgba(255, 255, 255, .85) 35%, transparent); animation: qd-sp-pillar .8s ease-out forwards; }
.qd-fx-phantom.qd-fx-release { animation: qd-release .56s ease-in forwards; }
/* 파괴·제외(마스터 듀얼식): 제자리 복제본 → 번쩍 → 카드 그림 조각이 흩어진다 / 보랏빛으로 사라진다 */
.qd-fx-phantom { position: absolute; z-index: 2; transform: translate(-50%, -50%); overflow: hidden; border-radius: calc(var(--cw) * .05); background: #1f2937; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.qd-fx-phantom img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 드로우·덱으로 돌아가기: 앞·뒷면 두 장을 겹쳐 rotateY로 뒤집는다(view drawFx·returnFx) */
.qd-fx-fly { position: absolute; z-index: 4; transform: translate(-50%, -50%); perspective: 700px; will-change: transform; }
.qd-fx-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.qd-fx-face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cw) * .05); background: #1f2937; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.qd-fx-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qd-fx-rear { transform: rotateY(180deg); }
.qd-fx-decklabel { position: absolute; z-index: 5; transform: translateX(-50%); padding: 3px 7px; border-radius: 5px; background: rgba(15,23,42,.94); color: #fff; font-size: clamp(9px, calc(var(--cw) * .2), 15px); text-align: center; }
/* 세트 착지: 칸 둘레로 옅은 먼지 고리 */
.qd-fx-setland { position: absolute; z-index: 3; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; border: 2px solid rgba(226, 232, 240, .55); box-shadow: 0 0 12px rgba(148, 163, 184, .5); animation: qd-setland .4s ease-out forwards; pointer-events: none; }
@keyframes qd-setland { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.qd-fx-phantom.qd-fx-vanish { animation: qd-vanish .56s ease-in forwards; }
.qd-fx-shatter { position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.qd-fx-shatter i { position: absolute; background-repeat: no-repeat; background-color: #1f2937; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7));
  animation: qd-shard-fly .78s cubic-bezier(.15, .7, .35, 1) forwards; }
.qd-fx-shatter i.qd-fx-shard-back { background: radial-gradient(circle at 50% 50%, #fbbf24 0 14%, #9a3412 16% 40%, #3b1d0e 42%); }
.qd-fx-shatter b { position: absolute; inset: -8%; border-radius: 10px; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(254, 202, 202, .55) 50%, transparent 76%); animation: qd-shatter-flash .34s ease-out forwards; }
.qd-fx-dmgflash { position: absolute; width: 100%; height: 100%; z-index: 4; background: radial-gradient(ellipse at center, transparent 42%, rgba(239, 68, 68, .6) 100%); animation: qd-dmgflash .48s ease-out forwards; }
.qd-v-quake .qd-v-mat, .qd-v-quake .qd-v-cards, .qd-v-quake .qd-v-ovl { animation: qd-quake .32s linear; }
.qd-v-quake-big .qd-v-mat, .qd-v-quake-big .qd-v-cards, .qd-v-quake-big .qd-v-ovl { animation: qd-quake-big .42s linear; }
@media (prefers-reduced-motion: reduce) { .qd-v-quake .qd-v-mat, .qd-v-quake .qd-v-cards, .qd-v-quake .qd-v-ovl, .qd-v-quake-big .qd-v-mat, .qd-v-quake-big .qd-v-cards, .qd-v-quake-big .qd-v-ovl { animation: none; } }
.qd-fx-burst { position: absolute; transform: translate(-50%, -50%); }
.qd-fx-burst i { position: absolute; left: 50%; top: 50%; width: 34%; height: 22%; border-radius: 2px; background: linear-gradient(#fff, #f87171);
  box-shadow: 0 0 8px #ef4444; animation: qd-shard .8s ease-out forwards; }
.qd-fx-burst.qd-fx-banish i { background: linear-gradient(#f5f3ff, #8b5cf6); box-shadow: 0 0 8px #8b5cf6; }
.qd-fx-burst i:nth-child(1) { --a: 0deg; } .qd-fx-burst i:nth-child(2) { --a: 60deg; } .qd-fx-burst i:nth-child(3) { --a: 120deg; }
.qd-fx-burst i:nth-child(4) { --a: 180deg; } .qd-fx-burst i:nth-child(5) { --a: 240deg; } .qd-fx-burst i:nth-child(6) { --a: 300deg; }
.qd-fx-coin, .qd-fx-reveal { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 14px;
  background: rgba(15, 23, 42, .92); border: 1px solid #fbbf24; animation: qd-show 1.5s ease forwards; }
.qd-fx-coin span { font-size: 40px; animation: qd-spin .5s linear 2; }
.qd-fx-reveal { flex-direction: row; }
.qd-fx-reveal img { width: calc(var(--cw) * 1.1); border-radius: 4px; }

/* 작은 화면(폰 기본 영상 영역): 글자·버튼을 줄인다. 확대하면 풀린다. */
.qd-v-tiny { font-size: 10px; }
.qd-v-tiny .qd-v-info { padding: 3px 4px; border-radius: 7px; }
.qd-v-lp > .qd-v-av { align-self: center; }   /* 폰 기본 영상 영역: 사진은 LP 줄 앞(이름 줄은 이름만 — view infoHTML) */
.qd-v-tiny .qd-v-lpnum { font-size: 14px; }
.qd-v-tiny .qd-v-cbtn { padding: 2px 5px; }
.qd-v-tiny .qd-v-cbtn:not([data-act="chain"]) small { display: none; }
.qd-v-tiny .qd-v-phase { padding: 3px; gap: 2px; border-radius: 8px; }
.qd-v-tiny .qd-v-phases { display: none; }
.qd-v-tiny .qd-v-pbtn { min-height: 26px; padding: 3px 6px; font-size: 10px; border-radius: 7px; }
.qd-v-tiny .qd-v-bar { font-size: 10px; padding: 2px 5px; }
.qd-v-tiny .qd-v-btn { min-height: 24px; padding: 2px 8px; }
.qd-v-tiny .qd-v-dlg { padding: 5px 7px; gap: 3px; }
.qd-v-tiny .qd-v-lcard { width: 54px; }
.qd-v-tiny .qd-v-ltext, .qd-v-tiny .qd-v-lwhere { display: none; }
.qd-v-tiny .qd-v-mbtn { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.qd-v-tiny .qd-o-stat { font-size: 8px; padding: 0 2px; }
.qd-v-tiny .qd-v-toast { max-width: 64%; padding: 2px 8px; font-size: 10px; }
.qd-v-portrait .qd-v-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.qd-v-portrait .qd-v-cbtn { padding: 3px 7px; }
.qd-v-portrait .qd-v-cbtn:not([data-act="chain"]) small { display: none; }
/* 세로 위 막대의 버튼이 넘치면(fitCtrl) 아이콘 둘레를 줄인다: tight → icons → bare */
.qd-v-portrait .qd-v-ctrl-tight .qd-v-cbtn, .qd-v-tiny .qd-v-ctrl-tight .qd-v-cbtn { padding: 3px 4px; }
.qd-v-portrait .qd-v-ctrl-icons .qd-v-cbtn, .qd-v-tiny .qd-v-ctrl-icons .qd-v-cbtn { padding: 2px 3px; }
.qd-v-portrait .qd-v-ctrl-bare .qd-v-cbtn, .qd-v-tiny .qd-v-ctrl-bare .qd-v-cbtn { padding: 1px 2px; font-size: calc(10px * var(--ui, 1)); }
.qd-v-portrait .qd-v-ctrl-icons .qd-v-cbtn:not([data-act="chain"]) small, .qd-v-tiny .qd-v-ctrl-icons .qd-v-cbtn:not([data-act="chain"]) small { display: none; }
.qd-v-portrait .qd-v-phase { flex-direction: column; }
.qd-v-curphase { color: #c7d2fe; font-weight: 800; }

@keyframes qd-pulse { 50% { filter: brightness(1.25); } }
@keyframes qd-can { 50% { box-shadow: 0 0 0 2px #7dd3fc, 0 0 20px 5px rgba(56, 189, 248, .95); } }
@keyframes qd-appear { from { opacity: 0; filter: brightness(2.4); } to { opacity: 1; filter: none; } }
@keyframes qd-blink { 50% { opacity: .2; } }
@keyframes qd-impact { from { transform: scale(.2); opacity: 1; } 55% { opacity: .95; } to { transform: scale(1.25); opacity: 0; } }
@keyframes qd-spark { from { transform: rotate(calc(var(--ang, 0rad) + var(--r, 0deg))) translateX(6%) scaleX(.25); opacity: 1; }
  to { transform: rotate(calc(var(--ang, 0rad) + var(--r, 0deg))) translateX(58%) scaleX(1); opacity: 0; } }
@keyframes qd-slam-wave { to { transform: scaleY(.42) scale(1.25); opacity: 0; } }
@keyframes qd-dust { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(var(--dx), var(--dy)) scale(1.8); opacity: 0; } }
@keyframes qd-sp-circle { 40% { opacity: 1; } to { transform: scaleY(.5) scale(1) rotate(160deg); opacity: 0; } }
@keyframes qd-sp-circle2 { 40% { opacity: 1; } to { transform: scaleY(.5) scale(1.05) rotate(-200deg); opacity: 0; } }
@keyframes qd-sp-pillar { 35% { height: 240%; opacity: 1; } to { height: 280%; opacity: 0; } }
@keyframes qd-release { 30% { filter: brightness(1.8) drop-shadow(0 0 12px #fde047); } to { opacity: 0; filter: brightness(2.4) sepia(1) drop-shadow(0 0 18px #facc15); transform: translate(-50%, -75%) scale(.6); } }
@keyframes qd-shard-fly { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.55); opacity: 0; } }
@keyframes qd-shatter-flash { from { opacity: 0; transform: scale(.9); } 25% { opacity: 1; transform: scale(1.08); } to { opacity: 0; transform: scale(1.3); } }
@keyframes qd-vanish { 30% { filter: brightness(1.8) drop-shadow(0 0 12px #a78bfa); } to { opacity: 0; filter: brightness(2.2) hue-rotate(40deg) drop-shadow(0 0 18px #8b5cf6); transform: translate(-50%, -60%) scale(.5); } }
@keyframes qd-dmgflash { from { opacity: 0; } 15% { opacity: 1; } to { opacity: 0; } }
@keyframes qd-quake { 15% { transform: translate(-5px, 3px); } 30% { transform: translate(4px, -4px); } 45% { transform: translate(-3px, 2px); } 60% { transform: translate(3px, -1px); } 80% { transform: translate(-1px, 1px); } }
@keyframes qd-quake-big { 12% { transform: translate(-9px, 6px); } 26% { transform: translate(8px, -7px); } 40% { transform: translate(-6px, 4px); } 55% { transform: translate(5px, -3px); } 72% { transform: translate(-2px, 2px); } }
@keyframes qd-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes qd-pop { from { transform-origin: 50% 100%; opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes qd-fade-in { from { opacity: 0; } }
@keyframes qd-fade-out { to { opacity: 0; } }
@keyframes qd-ring { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
@keyframes qd-show { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  78% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.94); opacity: 0; } }
@keyframes qd-banner { 0% { transform: translate(-40%, -50%); opacity: 0; } 16% { transform: translate(0, -50%); opacity: 1; }
  80% { transform: translate(0, -50%); opacity: 1; } 100% { transform: translate(30%, -50%); opacity: 0; } }
@keyframes qd-cutin { 0% { transform: translate(-100%, -50%); } 14% { transform: translate(0, -50%); } 84% { transform: translate(0, -50%); opacity: 1; } 100% { transform: translate(40%, -50%); opacity: 0; } }
@keyframes qd-cutin-pan { from { background-position: 44% 30%; } to { background-position: 56% 30%; } }
@keyframes qd-num { 0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; } 18% { transform: translate(-50%, -80%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -110%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }
@keyframes qd-reticle { from { transform: translate(-50%, -50%) scale(1.6) rotate(0); opacity: 0; } 40% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1) rotate(90deg); opacity: 0; } }
@keyframes qd-line { to { stroke-dashoffset: 0; } }
@keyframes qd-dash { to { stroke-dashoffset: -17; } }
@keyframes qd-hit { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
@keyframes qd-shard { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150%) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qd-c, .qd-v-fieldart { transition: none; }
  .qd-c.qd-can, .qd-c.qd-pick, .qd-slot.qd-pick { animation: none; }
}