/* Real-rules Magic board (MTG Arena-style). Builds on duel.css (palette, bar, status, end screen, hand cards):
   opponent's lands at the top, creatures meeting in the middle, yours below, hand fanned along the bottom.
   Gold = you can play it. Cyan = pick it. Red = attacking. Tapped cards turn sideways. */

.mduel { --mw: clamp(40px, calc((100vw - 24px) / 7.2), 70px); --mh: calc(var(--mw) * 1.396); }
.mduel::before { background: radial-gradient(60% 40% at 50% 50%, rgba(120, 90, 40, .12), transparent 70%); mask-image: none; opacity: 1; }
.md-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); text-align: center; padding: 20px; }

.md-field { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 0 6px; overflow: hidden; }
.md-side { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; justify-content: flex-end; }
.md-side.me { justify-content: flex-start; }
.md-row { display: flex; gap: 5px; overflow-x: auto; overflow-y: visible; padding: 4px 2px 8px; min-height: 0; scrollbar-width: none; justify-content: center; }
.md-row::-webkit-scrollbar { display: none; }
.md-row.empty { padding: 0; }
.md-side.opp > .md-row:first-child { margin-bottom: auto; }     /* opponent's lands at the top edge, creatures meet in the middle */
.md-side.me > .md-row:last-child { margin-top: auto; }          /* your lands at the bottom edge */
.md-row.lands .mc { --mw: clamp(32px, calc((100vw - 24px) / 9), 54px); }

.mc { position: relative; flex: none; width: var(--mw); height: var(--mh); border-radius: 5px; background: #121633; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); cursor: pointer; transition: transform .25s, box-shadow .2s; }
.mc img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.mc.tapped { transform: rotate(90deg) scale(.86); margin: 0 calc(var(--mh) * .14); }
.mc.sick img { filter: saturate(.75); }
.mc.can { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(242, 197, 92, .55); animation: d-glow 1.6s ease-in-out infinite; }
.mc.pickable { box-shadow: 0 0 0 2px var(--cyan), 0 0 16px rgba(95, 225, 255, .5); animation: d-glow-c 1.3s ease-in-out infinite; }
.mc.attacking { box-shadow: 0 0 0 2px #ff6a4a, 0 0 18px rgba(255, 106, 74, .6); }
.side-me .mc.attacking, .md-side.me .mc.attacking { transform: translateY(-10px); }
.md-side.opp .mc.attacking { transform: translateY(10px); }
.mc.blocking { box-shadow: 0 0 0 2px #7fb4ff, 0 0 14px rgba(127, 180, 255, .55); }
.mc.arrive { animation: d-arrive .5s cubic-bezier(.2, .9, .3, 1.2); }
.mc-back { display: block; width: 100%; height: 100%; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, #c8a46a 0 18%, transparent 19%), radial-gradient(ellipse at 50% 50%, #5b3a1c 0 40%, #2a1a0c 41%);
  box-shadow: inset 0 0 0 3px #1b1007, inset 0 0 0 5px #8a6a3a; }
.mc-name { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; padding: 3px; font-size: 9px; font-weight: 700; line-height: 1.15; background: linear-gradient(160deg, #3a3020, #1d170e); color: #f4ead6; border-radius: inherit; }
.mc-pt { position: absolute; right: -4px; bottom: -5px; font: 800 11px var(--mono); background: #f4ead6; color: #1a1408; padding: 1px 5px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); z-index: 2; }
.mc-pt.hurt { background: #ffb4a6; }
.mc-pt.loy { background: #2a2140; color: #fff; }
.mc-count { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #0b0e22; border: 1px solid rgba(255, 255, 255, .3); font: 800 11px var(--mono); display: flex; align-items: center; justify-content: center; z-index: 2; }
.mc-ctrs { position: absolute; left: 2px; top: 2px; display: grid; gap: 2px; z-index: 2; }
.mc-ctr { font: 700 9px var(--body); background: rgba(8, 10, 24, .88); color: #ffe7a6; padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
.mc-tag { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font: 800 8.5px var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; white-space: nowrap; z-index: 3; }
.mc-tag.atk { background: #ff6a4a; color: #fff; }
.mc-tag.blk { background: #7fb4ff; color: #071226; }
.mc-tag.tok { top: auto; bottom: 3px; background: rgba(0, 0, 0, .65); color: #ddd; }

/* players */
.md-seat { display: flex; align-items: center; gap: 7px; padding: 2px 4px; min-height: 42px; flex: none; }
.md-seat .opp-hand { flex: 1; }
.md-mana { display: flex; gap: 3px; flex: 1; }
.mana { width: 20px; height: 20px; border-radius: 50%; font: 800 11px var(--mono); display: flex; align-items: center; justify-content: center; color: #111; }
.m-W { background: #f8f2d8; } .m-U { background: #7cc0ff; } .m-B { background: #a99bb3; } .m-R { background: #ff8a6a; } .m-G { background: #79d39a; } .m-C { background: #cfc8bd; }
.md-pile { border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--ink-2); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.md-lib { font: 700 11px var(--mono); color: var(--ink-2); padding: 3px 6px; border-radius: 4px; background: linear-gradient(135deg, #5b3a1c, #2a1a0c); border: 1px solid #8a6a3a; }
.md-life { position: relative; border: 2px solid rgba(242, 197, 92, .55); background: radial-gradient(circle at 40% 35%, #2b2350, #120f26); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: default; flex: none; }
.md-life b { font: 800 19px var(--mono); }
.md-life.target { cursor: pointer; border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(95, 225, 255, .55); animation: d-glow-c 1.3s ease-in-out infinite; }
.md-life .poison { position: absolute; top: -6px; right: -6px; font: 800 10px var(--mono); font-style: normal; background: #3c8a2e; color: #fff; border-radius: 8px; padding: 1px 5px; }
.md-life.hit b { animation: d-shake .45s; color: var(--red); }

/* middle: phase strip */
.md-mid { flex: none; display: flex; justify-content: center; position: relative; }
.md-mid::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 197, 92, .45), transparent); }
.md-phases { position: relative; display: flex; align-items: center; gap: 2px; background: rgba(8, 11, 26, .92); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 4px; }
.md-phases span { font-size: 10px; font-weight: 700; color: var(--ink-2); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.md-phases span.on { background: rgba(127, 180, 255, .2); color: #fff; }
.md-phases.mine span.on { background: rgba(242, 197, 92, .25); color: var(--gold-2); }
.md-phases small { font-size: 9.5px; color: var(--ink-2); padding: 0 6px 0 4px; white-space: nowrap; }

/* the stack */
.md-stack { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 5px; width: min(62vw, 260px); }
.md-stack-item { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px; border-radius: 12px; background: rgba(8, 11, 26, .95); border: 1px solid rgba(255, 106, 74, .5); color: var(--ink); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.md-stack-item.mine { border-color: rgba(242, 197, 92, .6); }
.md-stack-item.top { animation: d-arrive .4s; }
.md-stack-item:not(.top) { opacity: .8; transform: scale(.94); transform-origin: right; }
.msi-art { width: 40px; height: 56px; border-radius: 4px; overflow: hidden; flex: none; }
.msi-art img { width: 100%; height: 100%; object-fit: cover; }
.msi-t { min-width: 0; display: grid; }
.msi-t b { font-size: 12.5px; }
.msi-t small { font-size: 11px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-stack-more { text-align: right; color: var(--ink-2); }

/* hand + status */
.md-hand { position: relative; z-index: 2; flex: none; height: calc(min(19vw, 80px) * 1.4 + 14px); display: flex; justify-content: center; align-items: flex-end; padding: 0 12px 4px; }
.md-hand .hc { margin: 0 calc(var(--ov, 14px) * -1); }
.md-hand .hc img { border-radius: 7px; }
.md-status { flex-wrap: wrap; }
.md-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.md-btns .btn[disabled] { opacity: .4; }
.md-qcard { width: 74px; float: right; margin: 0 0 8px 10px; border-radius: 6px; overflow: hidden; }
.md-qcard img { width: 100%; display: block; }
.md-num { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 14px; }
.md-num b { font: 800 30px var(--mono); min-width: 50px; text-align: center; }
.dsh-pick.on { border-color: var(--cyan, #12a9d1); box-shadow: 0 0 0 2px var(--cyan, #12a9d1); }
.dsh-pick[data-order]::after { content: attr(data-order); margin-left: auto; font: 800 14px var(--mono); color: var(--cyan, #12a9d1); padding: 0 6px; }

@media (min-width: 700px) {
  .mduel { --mw: clamp(48px, calc((100vw - 40px) / 9), 86px); }
}
@media (prefers-reduced-motion: reduce) {
  .mc.can, .mc.pickable, .md-life.target { animation: none; }
  .mc.arrive, .md-stack-item.top { animation: none; }
}