/* 記憶牌局對決（UIUX 第 7 節）。 */
.md { --cw: 76px; --ratio: 5 / 7; --row-gap: 8px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); }

.md-opp { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s3); min-height: 48px; }
.md-opp-av { position: relative; }
.md-opp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-opp-name { font: var(--t-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-opp-status { font: var(--t-micro); letter-spacing: .04em; color: var(--muted); align-self: flex-start; padding: 2px 8px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); }
.md-opp-status[data-confirmed="true"] { color: var(--ok); border-color: var(--ok); }
.md-flash { animation: flash var(--d-slow) var(--ease) 2; }
@keyframes flash { 50% { background: rgba(74, 222, 128, .25); } }

.md-community { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s3); }
.md-label { font: var(--t-micro); letter-spacing: .04em; color: var(--muted); }
.md-community-cards { display: flex; align-items: center; gap: var(--s2); }
.md-community-cards .card[data-size="sm"] { width: 52px; }
.md-later { font: var(--t-micro); color: var(--dim); }
.md-comm { display: inline-flex; animation: flip-in 440ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }

.md-boardwrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.md-board {
  display: grid; grid-template-columns: repeat(4, min(var(--cw), calc((min(100vw, 560px) - 32px - 24px) / 4)));
  column-gap: 8px; row-gap: var(--row-gap); justify-content: center;
}
.md-board--pulse { animation: board-pulse 600ms var(--ease); }
@keyframes board-pulse { 50% { transform: scale(1.02); } }

.md-card { position: relative; display: block; width: 100%; padding: 0; border-radius: var(--r-sm); transition: transform var(--d-fast) var(--ease), opacity var(--d-base); perspective: 600px; }
.md-card .card { width: 100%; aspect-ratio: var(--ratio); display: flex; }
.md-card .card--back .card-slot { font: 700 18px/1 var(--font-num); color: var(--text); position: absolute; top: 6px; left: 7px; }
.md-card .card--back::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; pointer-events: none; }
.md-slot-tag { position: absolute; bottom: -7px; left: -5px; font: 700 14px/1 var(--font-num); background: var(--bg); color: var(--muted); padding: 2px 4px; border-radius: 4px; }
.md-card[data-state="selected"] { transform: translateY(-6px); }
.md-card[data-state="selected"] .card { box-shadow: 0 0 0 3px var(--accent); }
.md-order { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); font: 800 13px/22px var(--font-num); text-align: center; }
.md-card[data-state="taken"] { opacity: .35; filter: grayscale(1); }
.md-taken-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text); }
.md-taken-mark svg { width: 24px; height: 24px; }
.md-taken-av { position: absolute; right: 2px; bottom: 2px; transform: scale(.7); transform-origin: bottom right; }
.md-card[data-state="mine"] .card { box-shadow: 0 0 0 3px var(--info); }
.md[data-phase="memorize"] .md-card, .md[data-phase="flip"] .md-card { cursor: default; }

/* 翻牌：左上到右下依序，每張延遲 40 毫秒，共 440 毫秒 */
.md--flipping .md-card .card { animation: flip-in 440ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes flip-in { 0%, 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

/* 攤牌 */
.md-showdown { width: 100%; display: flex; flex-direction: column; gap: var(--s3); align-items: stretch; }
.md-sd-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.md-sd-side { display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-width: 0; }
.md-sd-who { font: var(--t-small); color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sd-cards { display: flex; gap: var(--s2); }
.md-sd-cards .md-sd-card { width: 56px; }
/* 440ms 與 src/ui/memduel/mount.js SD_FLIP_ANIM_MS 一致，改一邊要同步另一邊 */
.md-sd-card { display: inline-flex; border-radius: var(--r-sm); animation: flip-in 440ms var(--ease) both; }
.md-sd-card .card[data-size="md"] { width: 56px; }
.md-sd-card.is-lit .card { box-shadow: 0 0 0 3px var(--accent); }
.md-sd-hand { font: var(--t-head); }
.md-result { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--surface); font: var(--t-title); animation: pop var(--d-base) var(--ease) both; }
.md-result--win { background: var(--accent); color: var(--accent-ink); }
.md-result-score { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.md-tie { font: var(--t-small); color: var(--muted); text-align: center; }
.md-sd-comm { display: flex; align-items: center; justify-content: center; gap: var(--s2); }

/* 動作區 */
.md-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s3); }
.md-mine { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 44px; }
.md-mine-line { font: var(--t-body); }
.md-hint { text-align: center; font: var(--t-body); color: var(--muted); }
.md-hint[data-count]::after { content: attr(data-count); display: block; font: var(--t-display); color: var(--text); font-variant-numeric: tabular-nums; margin-top: var(--s1); }
.md[data-phase="pick"] .md-hint[data-count]::after, .md[data-phase="showdown"] .md-hint[data-count]::after { content: none; }
.md-wait { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.md-wait-line { display: flex; align-items: center; gap: var(--s2); font: var(--t-small); color: var(--muted); }
.md-ok { color: var(--ok); }
.md-help-scroll { overflow-y: auto; min-height: 0; }

/* 高度不足：牌比例改 4:5、列距 6；700 以下牌寬上限 64；620 以下公牌與對手列合併。牌寬不小於 56。 */
@media (max-height: 820px) {
  .md { --ratio: 4 / 5; --row-gap: 6px; }
}
@media (max-height: 700px) {
  .md { --cw: 64px; }
  .md-hint[data-count]::after { font-size: 28px; line-height: 32px; }
}
@media (max-height: 620px) {
  .md { --cw: 56px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: var(--s3); row-gap: var(--s2); }
  .md-opp { grid-column: 1; grid-row: 1; min-height: 40px; }
  .md-opp-name { font: var(--t-small); }
  .md-community { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: var(--s2); }
  .md-community .md-label, .md-later { display: none; }
  .md-community-cards .card[data-size="sm"] { width: 34px; }
  .md-boardwrap { grid-column: 1 / -1; grid-row: 2; }
  .md-actions { grid-column: 1 / -1; grid-row: 3; padding-bottom: var(--s2); }
  .md-hint[data-count]::after { display: inline; margin-left: var(--s2); font-size: 22px; }
}

/* 對手狀態膠囊：文字、三點與勾一行排好 */
.md-opp-status { display: inline-flex; align-items: center; gap: 6px; }
.md-opp-status svg { width: 14px; height: 14px; }
.md-opp-status .dots i { width: 4px; height: 4px; }
.md[data-phase="showdown"] .md-community { display: none; }

/* ? 說明：搶牌規則 */
.md-help-sub { font: var(--t-head); margin: var(--s2) 0; }
.md-rules { margin: 0 0 var(--s3); padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s2); font: var(--t-body); }

/* 好玩加碼（spec 六.5 第五節）：攤牌逐張翻後才出現的字、絕殺章、搶牌差一點 */
.md-after { animation: md-fade 260ms var(--ease) both; }
@keyframes md-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.md-result { position: relative; }
.md-stamp { position: absolute; right: 28px; top: -14px; padding: 4px 10px; border: 3px solid currentColor; border-radius: 6px; font: 900 20px/1 var(--font-num); letter-spacing: .1em; color: #C62828; background: rgba(255,255,255,.92); transform: rotate(-12deg); animation: md-stamp 360ms cubic-bezier(.2,1.6,.4,1) both; }
.md-stamp--lose { color: #555; background: rgba(255,255,255,.8); }
@keyframes md-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(1.4); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.md-boardwrap { position: relative; }
.md-close { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; padding: 14px 22px; border-radius: var(--r-md); background: rgba(10,10,14,.88); color: var(--accent); font: 900 26px/1.1 var(--font-num); white-space: nowrap; box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: pop var(--d-base) var(--ease) both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .md-after, .md-stamp { animation: none; } }