/* Cards move; their positions remain part of the board. */
.field-slot .slot-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;z-index:0}
.field-slot>.battle-card,.field-slot>.concealed-card{position:relative;z-index:1}
.field-slot.position-in-motion{visibility:visible!important;opacity:1!important;filter:none!important;border:1px dashed #b9bc8270;background:#13221bc9}
.field-slot.position-in-motion>.battle-card,.field-slot.position-in-motion>.concealed-card,.field-slot.position-in-motion>.card-status,.field-slot.position-in-motion>.arena-voice{visibility:hidden!important}
.field-slot .slot-owner-number{z-index:3}
.field-slot.drag-attacker{opacity:1!important}
.field-slot.drag-attacker>.battle-card{opacity:.18}
.hand-entry{position:relative}
.hand-entry::before{content:attr(data-hand-position);position:absolute;inset:0;display:grid;place-items:center;border:1px dashed #b8bc8255;border-radius:5px;background:linear-gradient(135deg,#203b2e88,#10201bbb);color:#b4bea071;font:18px var(--serif);pointer-events:none}
.hand-entry>.hand-card{position:relative}
.hand-card.drag-summon-source{opacity:.15!important;visibility:visible!important}
.hand-entry.hand-reorder-target{outline:2px solid #e5cf87;outline-offset:3px;border-radius:5px}
.hand-entry.draw-receiving>.hand-card,.hand-entry.draw-receiving>.hand-actions{visibility:hidden}
.hand-entry.hand-entry-new>.hand-card{animation:new-card-arrival 1s ease-out}
.hand-actions{position:absolute;left:2px;right:2px;bottom:4px;z-index:6;display:flex;justify-content:center;gap:3px;flex-wrap:wrap}
.hand-actions button{min-height:25px;padding:4px 7px;border:1px solid #c6b37680;border-radius:4px;color:#f0e4bf;background:#172d25f5;font:600 10px var(--sans);cursor:pointer}
.hand-actions .hand-card-action{position:static;transform:none;margin:0;width:auto}
.hand-actions [data-reorder-hand][aria-pressed="true"]{background:#d8bd78;color:#16251b;border-color:#f0d892}
.hand-reorder-choice>.hand-card{outline:2px dashed #e5ca7b;outline-offset:4px;animation:hand-reorder-invite 1.35s ease-in-out infinite}
.hand-actions button:focus-visible{outline:2px solid #f4dfa4;outline-offset:2px}
.concealed-card{width:100%;height:100%;border:1px solid #bfb17f;border-radius:5px;background:repeating-linear-gradient(45deg,transparent,transparent 6px,#bfaa6514 7px,#bfaa6514 8px),radial-gradient(ellipse,#294438,#10221d);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#d7c88e;box-shadow:inset 0 0 0 5px #112a22,inset 0 0 0 6px #b8aa6955}
.concealed-card strong{font:38px var(--serif);text-shadow:0 0 18px #d2b66d66}
.concealed-card small{max-width:90%;font-size:8px;line-height:1.4;text-align:center;letter-spacing:1px}
.field-slot>.concealed-card-preview{position:absolute;inset:0;z-index:20;opacity:0;pointer-events:none;transform:rotateY(-90deg) scale(.96);transform-origin:center;transition:opacity .16s ease,transform .2s ease;filter:drop-shadow(0 14px 18px #0009)}
.field-slot>.concealed-card-preview>.battle-card{width:100%;height:100%}
.field-slot.own-concealed-card>.concealed-card{transition:opacity .14s ease,transform .2s ease}
.field-slot.own-concealed-card:hover>.concealed-card,.field-slot.own-concealed-card:focus-visible>.concealed-card{opacity:0;transform:rotateY(90deg) scale(.96)}
.field-slot.own-concealed-card:hover>.concealed-card-preview,.field-slot.own-concealed-card:focus-visible>.concealed-card-preview{opacity:1;transform:rotateY(0) scale(1.85)}
.field-slot .concealed-card-preview .card-art{height:48%;flex-basis:48%}
.field-slot .concealed-card-preview .card-name{height:auto;min-height:0;flex:0 0 auto;padding:4px 4px 1px;font-size:clamp(8px,1.9cqw,12px)}
.field-slot .concealed-card-preview .card-subtitle,.field-slot .concealed-card-preview .card-ability,.field-slot .concealed-card-preview .card-rarity,.field-slot .concealed-card-preview .card-type-line{display:block}
.field-slot .concealed-card-preview .card-subtitle,.field-slot .concealed-card-preview .card-type-line,.field-slot .concealed-card-preview .card-rarity{font-size:clamp(5px,.9cqw,7px)}
.field-slot .concealed-card-preview .card-ability{padding:4px 5px 0;font-size:clamp(6px,1cqw,8px);line-height:1.25}
@media(prefers-reduced-motion:reduce){.field-slot>.concealed-card-preview,.field-slot.own-concealed-card>.concealed-card{transition:none}}
.field-slot.effect-target{filter:none;outline:2px solid #b7e6b6;outline-offset:5px}
.field-slot.move-target{border:2px dashed #b8dba3;background:#b8dba31a}
.field-slot.drag-move-target{border:2px dashed #b8dba3;background:#b8dba31a}
.field-action-bar{position:fixed;z-index:72;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 24px);display:flex;gap:8px;align-items:center;padding:10px 14px;background:#10281df5;border:1px solid #b5b37a88;border-radius:10px;box-shadow:0 8px 28px #0008}
.field-action-bar[hidden]{display:none}
.field-action-bar p{margin:0;font-size:13px;color:#f0e4be;max-width:410px}
.field-action-bar button{white-space:nowrap;padding:9px 12px;font-size:12px}
.draw-flight{z-index:210!important;pointer-events:none!important;filter:drop-shadow(0 0 12px #d6bc7780);perspective:900px}
.draw-flight>.hand-card{visibility:visible!important;transform:none!important}
.draw-flight .hand-actions,.draw-flight::before{display:none!important}
.draw-flight::after{content:'NOVA CARTA';position:absolute;bottom:-23px;left:0;right:0;text-align:center;letter-spacing:2px;font-size:9px;color:#f7e1a1;text-shadow:0 1px 5px #000}
.duel-teaser{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:30px;background:radial-gradient(ellipse at 50% 45%,#304c3bcc,#07130cf5 72%),url('./assets/clareira.png') center/cover;overflow:auto;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;color:#eee9cd}
.duel-teaser[hidden]{display:none}
.duel-teaser-inner{text-align:center;width:min(900px,100%)}
.duel-teaser h2{font:clamp(32px,6vw,66px)/1.04 var(--serif);color:#eee9cd;margin:15px 0 24px}
.duel-versus{display:grid;grid-template-columns:1fr 60px 1fr;gap:24px;align-items:center;margin:32px auto}
.duel-contender{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:8px;border-bottom:1px solid #c5b47580;background:radial-gradient(ellipse at bottom,#75996933,transparent 75%)}
.duel-contender img{height:190px;max-width:100%;object-fit:contain;mask-image:linear-gradient(#000 72%,transparent)}
.duel-contender strong{font:clamp(23px,3vw,37px) var(--serif);color:#ece7cb}
.duel-contender small{font-size:10px;color:#b9c4a6;letter-spacing:2px}
.duel-versus>b{font:italic 36px var(--serif);color:#d8bd78;text-shadow:0 0 30px #d8bd7855}
.duel-teaser p{color:#bfcab3;line-height:1.7;max-width:520px;margin:20px auto}
.duel-teaser .gold-button{padding:16px 35px;font-size:16px}
.duel-teaser:not([hidden]) .duel-contender{animation:duel-reveal .65s ease-out both}.duel-teaser:not([hidden]) .duel-contender:last-child{animation-delay:.15s}
.outcome-dialog{width:min(660px,calc(100vw - 28px));max-width:660px;text-align:center;padding:50px 35px!important;overflow:hidden;isolation:isolate;border-color:#d0b86d!important}
.outcome-dialog::before{content:none}
.outcome-dialog::backdrop{background:#030d09de;backdrop-filter:blur(8px)}
.outcome-dialog[data-outcome=lose]{border-color:#ac987b!important;background:radial-gradient(ellipse at top,#353128,#15221d 70%)}
.outcome-dialog .outcome-symbol{display:grid;place-items:center;width:100px;height:100px;border:1px solid #c9af6390;border-radius:50%;margin:0 auto 24px;font-size:62px;box-shadow:0 0 55px #d1bd6925,inset 0 0 30px #d1bd6915}
.outcome-dialog h2{font-size:clamp(34px,6vw,56px);line-height:1.1;margin:20px 0}.outcome-dialog p{line-height:1.7;color:#bac6ae}
.outcome-dialog .dialog-actions{justify-content:center;flex-wrap:wrap;margin-top:28px}
.outcome-rival{font:italic 19px var(--serif);color:#dac995}
.outcome-label{display:block;font:600 12px var(--sans);letter-spacing:5px;color:#e4cd8b}
@keyframes new-card-arrival{from{filter:brightness(1.5)}to{filter:brightness(1)}}
@keyframes hand-reorder-invite{50%{outline-color:#fff0bc;box-shadow:0 0 18px #e4c56a66}}
@keyframes duel-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){.duel-versus{gap:8px;grid-template-columns:1fr 36px 1fr}.duel-contender{min-height:180px}.duel-contender img{height:150px}.duel-teaser{padding:18px}.field-action-bar{flex-wrap:wrap;justify-content:center;width:calc(100% - 24px)}.field-action-bar p{width:100%;text-align:center}.hand-actions{bottom:-4px;gap:1px}.hand-actions button{font-size:9px;min-height:27px;padding:3px}.outcome-dialog{padding:32px 22px!important}}
@media(prefers-reduced-motion:reduce){.hand-entry.hand-entry-new>.hand-card,.hand-reorder-choice>.hand-card,.duel-teaser:not([hidden]) .duel-contender,.outcome-dialog::before{content:none}}
:where(.motion-reduced) .hand-entry.hand-entry-new>.hand-card,:where(.motion-reduced) .hand-reorder-choice>.hand-card,:where(.motion-reduced) .duel-teaser:not([hidden]) .duel-contender,:where(.motion-reduced) .outcome-dialog::before{content:none}
.duel-teaser-guide{margin:0 auto!important;font-size:12px}.duel-versus{grid-template-columns:minmax(190px,1fr) 70px minmax(190px,1fr);max-width:730px;gap:28px}.duel-contender{min-height:0;justify-content:start;gap:9px;padding:16px 14px 18px;border:1px solid #c5b47566;background:linear-gradient(145deg,#1f392ae8,#10251ae6);box-shadow:inset 0 1px #d7c98f19}.duel-contender>.eyebrow{color:#d8be78}.duel-card-preview{width:clamp(150px,18vw,192px);margin:5px auto 2px}.duel-card-preview .battle-card{width:100%;height:auto;min-height:245px;pointer-events:none}.duel-contender strong{font-size:clamp(21px,2.5vw,31px);line-height:1.1}.duel-contender small{max-width:100%;line-height:1.45;color:#bdc9ad;letter-spacing:1px}.duel-teaser:not([hidden]) .duel-card-preview{animation:duel-reveal .65s ease-out both}.duel-teaser:not([hidden]) .duel-contender:last-child .duel-card-preview{animation-delay:.15s}
.duel-identity-card{--identity-element:#83966a;display:grid;grid-template-rows:minmax(0,58%) minmax(0,42%);width:100%;aspect-ratio:5/7;overflow:hidden;border:2px solid color-mix(in srgb,var(--identity-element) 60%,#d9c47d);border-radius:8px;background:linear-gradient(155deg,#e1dbc0,#a6b399);box-shadow:0 10px 24px #0008,inset 0 0 0 1px #394934;color:#17271e;text-align:center}.duel-identity-card.element-fogo{--identity-element:#b67b4a;background:linear-gradient(155deg,#ead5b0,#bd9976)}.duel-identity-card.element-agua{--identity-element:#68a9b0;background:linear-gradient(155deg,#d2e0d4,#8cb4b1)}.duel-identity-card.element-ar{--identity-element:#a7aea0;background:linear-gradient(155deg,#e4e1d6,#abbda9)}.duel-identity-card.element-eter{--identity-element:#ab8cad;background:linear-gradient(155deg,#e0d6df,#b2a4be)}.duel-identity-art{position:relative;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--identity-element) 65%,transparent),transparent 65%),#0b1c15}.duel-identity-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 72%,#0b1a127d);pointer-events:none}.duel-identity-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;mask-image:none}.duel-identity-symbol{position:absolute;inset:12%;display:grid;place-items:center;color:color-mix(in srgb,var(--identity-element) 65%,#ece1ab)}.duel-identity-symbol svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.duel-identity-copy{display:flex;min-height:0;flex-direction:column;align-items:center;padding:9px 10px 10px}.duel-identity-copy h3{margin:0;font:700 clamp(14px,1.7vw,18px)/1.05 var(--serif)}.duel-identity-copy em{display:block;max-width:100%;margin:3px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 8px var(--serif);opacity:.72}.duel-identity-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;margin:0!important;color:#26382c;font-size:clamp(7px,.75vw,9px);line-height:1.4;letter-spacing:0}
@media(max-width:600px){.duel-versus{grid-template-columns:minmax(125px,1fr) 28px minmax(125px,1fr);gap:8px;margin:22px auto}.duel-contender{padding:11px 6px 14px}.duel-contender>.eyebrow{font-size:7px;letter-spacing:1px}.duel-card-preview{width:min(100%,144px)}.duel-card-preview .battle-card{min-height:205px}.duel-contender strong{font-size:18px}.duel-contender small{font-size:7px;letter-spacing:.5px}.duel-versus>b{font-size:25px}}

/* Results are viewport-bound game scenes, never oversized animated surfaces. */
html:has(.outcome-dialog[open]),body:has(.outcome-dialog[open]){height:100%;overflow:hidden}
.outcome-dialog{box-sizing:border-box;max-height:calc(100dvh - 24px);padding:clamp(16px,4dvh,40px) clamp(18px,3vw,35px)!important;background:radial-gradient(ellipse at 50% 0%,#343b28,#15221d 70%);animation:outcome-enter .28s ease-out both}
.outcome-dialog .outcome-symbol{width:clamp(48px,12dvh,88px);height:clamp(48px,12dvh,88px);font-size:clamp(32px,8dvh,54px);margin-bottom:clamp(8px,2dvh,20px)}
.outcome-dialog h2{font-size:clamp(28px,5dvh,48px);margin:clamp(10px,2dvh,20px) 0}
.outcome-dialog p{font-size:13px;line-height:1.5;margin:10px 0}
.outcome-dialog .dialog-actions{margin-top:clamp(12px,3dvh,24px)}
.outcome-particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;contain:strict}
@keyframes outcome-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.outcome-dialog{animation:none}}
@media(max-height:450px){.outcome-dialog .outcome-symbol{display:none}.outcome-dialog{overflow-y:auto}}