.board{max-width:1280px;width:100%;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:clamp(6px,1vh,12px);padding:clamp(46px,6.5vh,60px) clamp(8px,1.4vw,18px) clamp(8px,1.4vh,16px);overflow:hidden}.zone.opponent,.zone.player{flex:0 0 auto}.zone.center{flex:1 1 auto;min-height:0}.zone{position:relative;border-radius:16px;padding:clamp(8px,1.4vh,16px) clamp(12px,1.6vw,20px);background:linear-gradient(160deg,#0a0e18eb,#101626e0 55%,#182234d1);box-shadow:0 18px 38px #0000006b,inset 0 0 0 1px #ffffff0f}.zone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top,rgba(255,255,255,.12),transparent 55%);mix-blend-mode:screen;opacity:.35;pointer-events:none;border-radius:inherit}.zone.opponent:before{background:radial-gradient(circle at top,rgba(134,198,255,.18),transparent 60%)}.zone.player:before{background:radial-gradient(circle at top,rgba(140,255,198,.16),transparent 60%)}.zone.center{display:flex}.center-content{flex:1 1 auto;display:grid;grid-template-columns:1fr minmax(240px,.72fr);gap:clamp(10px,1.4vw,18px);align-items:stretch;height:100%;min-height:0;min-width:0}.center-left{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}.center-right{display:flex;flex-direction:column;gap:10px;align-items:stretch;height:100%;min-height:0;min-width:0}.zone-header{position:relative;display:flex;gap:10px;align-items:center;padding:0 4px 6px;font-weight:700;z-index:1}.pill{background:#060a12b3;border:1px solid rgba(255,255,255,.16);padding:4px 12px;border-radius:999px;font-weight:600;box-shadow:0 4px 12px #00000040}.name{font-size:clamp(13px,2vw,18px);margin-right:6px}.zone-row.two-cols{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;overflow:visible}.deck-col{justify-self:start;align-self:start;margin-top:2px}.duel-slot{position:relative;border-radius:12px;box-shadow:inset 0 0 0 2px #ffffff40;overflow:visible}.hand{overflow:visible}.hand.fan{position:relative;display:block;width:100%;--card-h: clamp(138px, 23vh, 215px);height:var(--card-h)}.hand.fan .card-socket{position:absolute;top:50%;left:50%;height:var(--card-h);width:calc(var(--card-h) * 1444 / 1920);background:transparent;border:none;padding:0;cursor:pointer;transform-style:preserve-3d;border-radius:10px;--center: calc((var(--n) - 1) / 2);--offset: calc(var(--i) - var(--center));--spread: var(--spread-override, clamp(34px, 6vw, 96px));--rot: 6deg;--y: 0px;transform:translate(-50%,-50%) translate(calc(var(--spread) * var(--offset))) translateY(var(--y)) rotate(calc(var(--rot) * var(--offset)));z-index:calc(200 + var(--i));transition:transform .16s ease,filter .16s ease}.my-hand.fan .card-socket{transform-origin:bottom center;--rot: 4deg;--y: calc(2px*abs(var(--offset))) }.opp-hand.fan .card-socket{transform-origin:top center;--rot: -6deg;--y: calc(10px - (4px*abs(var(--offset)))) ;z-index:calc(100 + (var(--n) - var(--i)))}.my-hand.fan .card-socket:hover,.my-hand.fan .card-socket:focus-visible{transform:translate(-50%,-50%) translate(calc(var(--spread) * var(--offset))) translateY(calc(var(--y) - 78px)) rotate(0) scale(1.5);z-index:999;filter:drop-shadow(0 0 2px rgba(150,255,165,1)) drop-shadow(0 0 5px rgba(80,235,120,.95)) drop-shadow(0 0 12px rgba(50,210,95,.82))}.my-hand.fan .card-socket:focus-visible{outline:none}.my-hand.fan .card-socket:after{display:none}.my-hand.fan .card-socket:hover:after,.my-hand.fan .card-socket:focus-visible:after{opacity:1}.card-back-wrap{position:relative;width:100%;aspect-ratio:1444/1920;border-radius:10px;box-shadow:0 8px 20px #0000006b}.status-pill{align-self:start;color:#e7f2f3;background:#ffffff12;border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:16px;display:flex;gap:16px;align-items:center;font-weight:700}.status-pill .side{display:flex;gap:8px;align-items:center}.status-pill .tag{opacity:.85}.status-pill .sep{opacity:.5;margin:0 4px}.status-pill .vs{opacity:.8}.notice{border-radius:10px;padding:12px 4px;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px #ffffff1a}.notice .title{font-weight:800;margin-bottom:4px}.notice .msg{opacity:.95;margin:6px 0 10px}.notice .actions{display:flex;gap:8px}.notice.success{background:#00b43c1a;color:#c6f5d6;border-color:#00b43c2e}.notice.warn{background:#ffc1071a;color:#ffe9b3;border-color:#ffc10738}.notice.error{background:#c800001a;color:#ffd6d6;border-color:#c8000038}.btn{background:inherit;border-radius:50%;color:#fff;border:0}.btn img{width:20px}.btn:hover{background:#ffffff29}.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:#e7f2f3}.btn.ghost:hover{background:#ffffff0f}.notice.chooser{position:relative;z-index:1600;background:linear-gradient(180deg,#0a0c12bf,#0a0c128c);border-color:#ffffff2e;color:#eef3f8;padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vw,16px);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}.notice.chooser>span{font-weight:700;opacity:.95;white-space:nowrap}.notice.chooser .btn{width:clamp(52px,6vw,80px);height:clamp(52px,6vw,80px);padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;cursor:pointer;transition:transform .08s ease,background .2s ease,border-color .2s ease}.notice.chooser .btn img{width:clamp(28px,6vw,60px);height:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}.notice.chooser .btn:hover{background:#ffffff24;border-color:#ffffff59;transform:translateY(-1px)}.notice.chooser .btn:active{transform:translateY(0)}.notice.chooser .btn:disabled{opacity:.6;cursor:not-allowed}.notice.chooser .btn.attribute-option{position:relative;font-weight:700;letter-spacing:.02em;color:#f7fbff}.notice.chooser .btn.attribute-option .attribute-value{position:absolute;bottom:6px;right:8px;font-size:12px;font-weight:700;color:#e6f0ffd1;text-shadow:0 1px 3px rgba(0,0,0,.6)}.notice.chooser .btn.attribute-option.attribute-highlight{background:linear-gradient(160deg,#2e814ef2,#194e2eeb);border-color:#78ffaa99;box-shadow:0 0 18px #66ffa873;transform:translateY(-2px)}.notice.chooser .btn.attribute-option.attribute-highlight .attribute-value{color:#dcffeafa}.notice.chooser .btn.attribute-option.attribute-highlight:after{content:"BEST";position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;color:#162816e6;background:#b4ffd2e6;border-radius:6px;padding:2px 6px;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 2px 6px #00000040}.flip-wrap{position:relative;width:100%;aspect-ratio:1444/1920;perspective:1000px}.flipper{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;border-radius:10px;overflow:visible;transform:rotateY(0)}.flipper.start-back{transform:rotateY(180deg)}.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden}.front{transform:rotateY(0);z-index:2}.back{transform:rotateY(180deg);z-index:1}.animate{animation:flipReveal var(--flip-ms, .7s) ease forwards}@keyframes flipReveal{0%{transform:rotateY(180deg)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@font-face{font-family:Draco;src:url(../../../fonts/ExocetHeavy.ttf) format("truetype");font-weight:400 900;font-style:normal;font-display:swap}@font-face{font-family:Morpheus;src:url(../../../fonts/Morpheus.ttf) format("truetype");font-weight:400 900;font-style:normal;font-display:swap}.card-font{--card-font-size: 2.4cqh;font-family:Morpheus,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--card-font-size);line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.card-title-text{color:var(--cc-text-color, #fff);text-shadow:none!important;letter-spacing:var(--cc-title-ls, -.18em)!important;font-size:8cqh!important}.card-attribute-value{font-family:var(--cc-val-font, "Draco"),system-ui,sans-serif!important;color:var(--cc-text-color, #fff);letter-spacing:var(--cc-val-ls, -.06em);font-size:var(--cc-val-size, 8cqh)!important;-webkit-text-stroke-width:calc(var(--cc-outline-size, .09) * 2em)!important;-webkit-text-stroke-color:var(--cc-outline-color, #000)!important;paint-order:stroke fill!important;text-shadow:none!important}.card-attribute-label{font-family:var(--cc-label-font, "Draco"),system-ui,sans-serif!important;color:var(--cc-text-color, #fff);letter-spacing:var(--cc-label-ls, -.14em)!important;font-size:var(--cc-label-size, 5.6cqh)!important;-webkit-text-stroke-width:calc(var(--cc-outline-size, .09) * 2em)!important;-webkit-text-stroke-color:var(--cc-outline-color, #000)!important;paint-order:stroke fill!important;text-shadow:none!important}.fixed-top-bar{position:fixed;top:10px;left:10px;right:10px;z-index:1000;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.topbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.topbar-right{display:flex;gap:12px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.home-btn{padding:.45rem .6rem;border-radius:.5rem;background:#000000a6;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-content:center}.mode-pill{padding:.4rem .6rem;border-radius:.5rem;background:#000000a6;color:#fff;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:.85rem}.fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3000}.fx-card{position:absolute;aspect-ratio:1444/1920;border-radius:10px;overflow:hidden;box-shadow:0 10px 26px #0000006b,0 0 0 1px #ffffff14 inset;will-change:transform,opacity}.fx-card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.loser-shake{animation:loseShake .9s ease-in-out infinite;filter:grayscale(.4) brightness(.85)}.winner-glow{animation:winPulse 1.3s ease-in-out infinite alternate;filter:drop-shadow(0 0 12px rgba(255,220,120,.9));z-index:1;border-radius:10px}@keyframes winPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes loseShake{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-1px)}to{transform:translate(0)}}.slot-removable .result-wrap:hover{animation:slotRemoveBlink .8s linear infinite}@keyframes slotRemoveBlink{0%{filter:drop-shadow(0 0 0 rgba(255,0,0,0))}50%{filter:drop-shadow(0 0 16px rgba(255,0,0,.9))}to{filter:drop-shadow(0 0 0 rgba(255,0,0,0))}}.result-wrap{position:relative;z-index:2;border-radius:10px}.result-wrap.defeat-active{isolation:isolate;overflow:visible}.result-wrap.defeat-active:after{content:"";position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;border-radius:18px;opacity:0;pointer-events:none;filter:blur(26px);mix-blend-mode:screen;transform:scale(.9);transition:opacity .16s ease-out,transform .2s ease-out;z-index:-1}.result-wrap.defeat-active.defeat-fire:after{opacity:1;transform:scale(1.04);background:radial-gradient(circle at 50% 70%,#ffaa50f2,#6e140033),radial-gradient(circle at 45% 90%,#ffe6a0d9,#ff781400);box-shadow:0 0 40px #ff7820a6,0 0 120px #ff460080;animation:defeatFireAuraPulse .78s ease-in-out infinite}.result-wrap.defeat-active.defeat-magic:after{opacity:1;transform:scale(1.08);background:radial-gradient(circle at 50% 50%,#96befff2,#2814a033),radial-gradient(circle at 52% 30%,#dcf0ffe6,#28007800);box-shadow:0 0 40px #78a0ff8c,0 0 130px #4678ff73;animation:defeatMagicAuraPulse .9s ease-in-out infinite}.result-wrap.defeat-active.defeat-might:after{opacity:.92;transform:scale(1.1);background:radial-gradient(circle at 50% 58%,#ffdca0f2,#8c5a1e40),radial-gradient(circle at 50% 40%,#fffad2bf,#3c1e0000);box-shadow:0 0 36px #ffd27899,0 0 120px #a0641480;animation:defeatMightAuraPulse .72s ease-in-out infinite;mix-blend-mode:hard-light}@keyframes defeatFireAuraPulse{0%{filter:blur(22px) hue-rotate(-8deg) saturate(1.15);opacity:.82}50%{filter:blur(30px) hue-rotate(8deg) saturate(1.35);opacity:1}to{filter:blur(22px) hue-rotate(-8deg) saturate(1.15);opacity:.82}}@keyframes defeatMagicAuraPulse{0%{filter:blur(20px) saturate(1.2) hue-rotate(-4deg);opacity:.82}50%{filter:blur(32px) saturate(1.45) hue-rotate(8deg);opacity:1}to{filter:blur(20px) saturate(1.2) hue-rotate(-4deg);opacity:.82}}@keyframes defeatMightAuraPulse{0%{filter:blur(18px) brightness(1.05) saturate(1.15);opacity:.78}50%{filter:blur(28px) brightness(1.28) saturate(1.25);opacity:.98}to{filter:blur(18px) brightness(1.05) saturate(1.15);opacity:.78}}