.card{position:relative;width:var(--card-width, 200px);aspect-ratio:63 / 88;container-type:inline-size;border-radius:4.2%/3%;box-shadow:0 3px 8px #00000073;user-select:none;-webkit-user-select:none;touch-action:none}.face{position:absolute;inset:0;border-radius:4.2cqw;overflow:hidden}.card:not(.face-down)>.back,.card.face-down>.front{display:none}.front{background:#f3c623}.back{background:#1d3a9e}.face img{display:block;width:100%;height:100%;object-fit:cover}.energy-symbol.fire{--type: #e8572a}.energy-symbol.water{--type: #2f86d6}.energy-symbol.grass{--type: #3e9e3c}.energy-symbol.lightning{--type: #f2b705}.energy-symbol.psychic{--type: #8e4bb8}.energy-symbol.fighting{--type: #b5582a}.energy-symbol.colorless{--type: #d8d8d8}.energy-symbol{display:inline-block;flex-shrink:0;width:1.2em;aspect-ratio:1;border-radius:50%;background:var(--type);vertical-align:middle}.energy-symbol img{display:block;width:100%;height:100%}.card.ghost{opacity:.3}body.dragging,body.dragging *{cursor:grabbing!important}.drag-card{position:fixed;left:0;top:0;z-index:1000;margin:0;pointer-events:none;box-shadow:0 18px 36px #0000008c;transition:none}.flight{position:fixed;left:0;top:0;z-index:900;pointer-events:none;box-shadow:none}.flight-body,.flight-flip{width:100%;height:100%;transform-style:preserve-3d}.flight-flip>.face{backface-visibility:hidden;box-shadow:0 6px 16px #00000073}.flight-flip>.back{transform:rotateY(180deg)}.card.in-flight{visibility:hidden}.flight.shuffle{aspect-ratio:63 / 88}.flight.shuffle>.card{position:absolute;inset:0;width:100%;box-shadow:0 2px 5px #0006}.closer{position:fixed;inset:0;z-index:2000;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px;background:#050c12b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:zoom-out;animation:fade-in .15s ease-out}.closer[hidden]{display:none}.closer-row{--beside-columns: 0;--big: min(420px, calc((86vw - 16px - var(--beside-columns) * 10px) / (1 + var(--beside-columns) / 3)), calc((100dvh - 120px) * 63 / 88));display:flex;align-items:flex-start;gap:16px}.closer .card{--card-width: var(--big);box-shadow:0 24px 60px #0009;animation:pop-in .18s ease-out}.closer-beside{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:10px}.closer-beside .card{--card-width: calc(var(--big) / 3 - 20px / 3 * 63 / 88);box-shadow:0 8px 24px #0000008c}.closer-main{position:relative}.closer-main.has-energy{margin-bottom:calc(var(--big) * .07)}.closer-damage{--burst: polygon(47% .3%, 57.1% 17.7%, 73.8% 7.6%, 73.2% 22.8%, 90.8% 23.6%, 83.2% 38.3%, 97.6% 46.1%, 85.3% 53.8%, 93.7% 67.8%, 77.8% 70.1%, 80.9% 88.6%, 67.4% 79.8%, 59.3% 98.2%, 49.4% 84.9%, 35.7% 97.6%, 34.8% 80.1%, 16.7% 84.6%, 23.3% 70.2%, 5.4% 67.4%, 15.3% 52.4%, .9% 42.7%, 18.2% 39.8%, 10.3% 22.1%, 27.9% 25.5%, 30.2% 7.2%, 41.4% 17.4%);position:absolute;top:calc(var(--big) * .18);right:calc(var(--big) * -.05);z-index:1;display:grid;place-items:center;width:calc(var(--big) * .22);aspect-ratio:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:burst-in .3s ease-out}.closer-damage:before,.closer-damage:after{content:"";position:absolute;clip-path:var(--burst);transform:rotate(-8deg)}.closer-damage:before{inset:0;background:#fff}.closer-damage:after{inset:3.5%;background:radial-gradient(circle at 45% 40%,#f26b3a,#d9342a 45%,#a3141b)}.closer-damage .amount{position:relative;z-index:1;color:#fff;font-size:calc(var(--big) * .085);font-weight:900;line-height:1;-webkit-text-stroke:calc(var(--big) * .016) #1a0204;paint-order:stroke fill}.closer-damage.long .amount{font-size:calc(var(--big) * .065)}@keyframes burst-in{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.06);opacity:1}}.closer-energy{position:absolute;left:calc(var(--big) * -.04);bottom:calc(var(--big) * -.07);z-index:1;display:flex;flex-wrap:wrap-reverse;gap:calc(var(--big) * .015);max-width:calc(var(--big) * 1.08);animation:pop-in .25s ease-out}.closer-energy .energy-symbol{width:calc(var(--big) * .13);box-shadow:0 0 0 calc(var(--big) * .007) #fff,0 4px 10px #0009}.closer-energy.counted{column-gap:calc(var(--big) * .08)}.closer-energy .energy-group{position:relative;display:flex}.closer-energy .energy-group .count{position:absolute;right:calc(var(--big) * -.025);bottom:calc(var(--big) * -.03);color:#fff;font-size:calc(var(--big) * .07);font-weight:900;line-height:1;-webkit-text-stroke:calc(var(--big) * .008) #1d1a10;paint-order:stroke fill}.closer-note{display:flex;align-items:center;gap:6px;margin:0;font-size:15px;color:#ffffffd9}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{transform:scale(.85);opacity:0}}.sign-in{width:min(360px,calc(100vw - 32px));padding:24px 28px;border:none;border-radius:16px;background:#183544;color:#fff;box-shadow:0 30px 80px #0009;font-family:Trebuchet MS,system-ui,sans-serif;font-size:16px}.sign-in::backdrop{background:#050c1299;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sign-in h2{margin:0 0 16px;font-size:24px;text-transform:none;letter-spacing:normal;color:#fff}.sign-in-field{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;font-size:14px}.sign-in-field input{padding:8px 10px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#00000040;color:#fff;font:inherit;font-size:16px}.sign-in-field input:focus{outline:2px solid #ffd23f;outline-offset:1px}.sign-in-problem{min-height:1.2em;margin:0 0 12px;color:#ff8a7a;font-size:14px}.sign-in-problem:empty{margin:0}.sign-in-buttons{display:flex;align-items:center;gap:18px}.sign-in-button,.sign-in-guest{font:inherit;font-size:16px;font-weight:700;padding:.55em 1.3em;border:none;border-radius:999px;cursor:pointer}.sign-in-button{background:#ffd23f;color:#333;box-shadow:0 4px #c9a227}.sign-in-button:active{transform:translateY(3px);box-shadow:0 1px #c9a227}.sign-in-button:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px #c9a227}.sign-in-guest{background:#ffffff24;color:#fff;box-shadow:0 4px #0000004d}.sign-in-guest:active{transform:translateY(3px);box-shadow:0 1px #0000004d}.who{display:inline-flex;align-items:baseline;gap:8px;color:#ffffffbf;font-size:inherit}.who[hidden]{display:none}.who-name{font-weight:700;color:#fff}.who-button{padding:0;border:none;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
