.App{text-align:center;position:relative;z-index:3}.App-header{background-color:#282c34;padding:20px;color:#fff}.App-link{color:#61dafb}html{height:100%;margin:0;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--popup-text-color: #000000;color:var(--popup-text-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#78b9b5;text-decoration:inherit}a:hover{color:#78b9b5}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:linear-gradient(180deg,#0a0a23,#1a237e);background-attachment:fixed;background-size:cover;background-repeat:no-repeat;height:100%;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(1px 1px at 7% 80%,white 100%,transparent 100%),radial-gradient(1px 1px at 10% 65%,white 100%,transparent 100%),radial-gradient(1px 1px at 11% 47%,white 100%,transparent 100%),radial-gradient(1px 1px at 16% 20%,white 100%,transparent 100%),radial-gradient(1px 1px at 20% 15%,white 100%,transparent 100%),radial-gradient(1px 1px at 23% 22%,white 100%,transparent 100%),radial-gradient(1px 1px at 29% 35%,white 100%,transparent 100%),radial-gradient(1px 1px at 32% 49.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 35% 53%,white 100%,transparent 100%),radial-gradient(1px 1px at 39% 58%,white 100%,transparent 100%),radial-gradient(1px 1px at 41.5% 56.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 41% 49%,white 100%,transparent 100%),radial-gradient(1px 1px at 40% 15%,white 100%,transparent 100%),radial-gradient(1px 1px at 37.5% 12%,white 100%,transparent 100%),radial-gradient(2px 2px at 38% 7%,white 100%,transparent 100%),radial-gradient(2px 2px at 41.5% 7%,white 100%,transparent 100%),radial-gradient(1px 1px at 20.5% 52%,white 100%,transparent 100%),radial-gradient(1px 1px at 20% 54.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 23% 54.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 22.3% 57%,white 100%,transparent 100%),radial-gradient(1px 1px at 24.5% 62%,white 100%,transparent 100%),radial-gradient(1px 1px at 25.25% 68%,white 100%,transparent 100%),radial-gradient(2px 2px at 25.25% 73%,white 100%,transparent 100%),radial-gradient(1px 1px at 67% 58.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 68% 46.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 75% 45.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 74.5% 58.5%,white 100%,transparent 100%),radial-gradient(1px 1px at 69.5% 73%,white 100%,transparent 100%),radial-gradient(1px 1px at 55.25% 20%,white 100%,transparent 100%),radial-gradient(1px 1px at 58.75% 18.25%,white 100%,transparent 100%),radial-gradient(2px 2px at 68.5% 17%,white 100%,transparent 100%),radial-gradient(1px 1px at 75% 13.75%,white 100%,transparent 100%),radial-gradient(1px 1px at 84.25% 5.5%,white 100%,transparent 100%),radial-gradient(1.5px 1.5px at 77% 4%,white 100%,transparent 100%),radial-gradient(2px 2px at 67.75% 6%,white 100%,transparent 100%),radial-gradient(1px 1px at 61.25% 10%,white 100%,transparent 100%);background-size:100% 100%;background-repeat:repeat;z-index:1;pointer-events:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#c00;cursor:pointer;transition:border-color .25s;margin:0 .5rem}button:hover{border-color:#0f828c}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#0f828c}a:hover{color:#0f828c}button{background-color:#78b9b5}}.card-container{perspective:1000px;width:clamp(120px,18vw,180px);height:clamp(160px,26vw,260px);z-index:2;position:relative}.card-container h3,.card-container p,.card-container .card-text,.card-container .card-hover-details{color:#000!important}.card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.card-container.draft:hover .card-inner.draft{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border:1px solid #ccc;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:.9rem;padding:.5rem;overflow:hidden;text-align:center;flex-direction:column;box-sizing:border-box}.card-front.draft{background:#78b9b580;backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(23px);border-radius:20px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 20px 10px #fff;position:relative;overflow:hidden;transform:rotateY(180deg)}.card-front.draft:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.card-front.draft:after{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}.card-back.draft{background-color:#000;color:#78b9b5;transform:none}.card-back.draft img{width:100%;height:100%;object-fit:cover;border-radius:8px}.card-inner.play{transform:none!important;transform-style:flat!important}.card-front.play{transform:none!important;backface-visibility:visible!important;background:#78b9b580;backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(23px);border-radius:20px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 20px 10px #fff;position:relative;overflow:hidden}.card-front.play:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.card-front.play:after{content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}.card-back.play{display:none!important}.card-container.play *{opacity:1!important;filter:none!important;color:inherit}.buttons{display:flex;justify-content:center;align-items:center}.buttons h2{font-size:1.5rem;margin-bottom:1rem}.player1-turn{color:#6bf7ed;font-weight:700}.player2-turn{color:#9b9cff;font-weight:700}.card-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2rem}.indivButton button{padding:.5rem 1rem;margin:.5rem;font-size:1rem;cursor:pointer}.effect-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#0f828c;border:3px solid #320A6B;padding:clamp(1rem,3vw,2rem);z-index:1000;color:var(--popup-text-color);max-width:90vw;max-height:90vh;overflow-y:auto;border-radius:8px}.effect-modal h4+div,.effect-modal h4+ul,.effect-modal h4+button{text-align:left}.effect-modal ul{text-align:left;padding-left:2rem}.effect-modal li,.effect-modal button{text-align:left}.play-board{padding:20px}.in-play-row{display:flex;justify-content:space-around;margin:20px 0}.player-zone{text-align:center}.stack-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:999}.stack-content{background:#fff;padding:clamp(1rem,3vw,2rem);border-radius:8px;max-width:90vw;max-height:90vh;overflow-y:auto;border:3px solid #320A6B}.horizontal-stack{display:flex;gap:clamp(.5rem,2vw,1rem);margin:10px 0;min-width:max-content;overflow-x:auto;padding:.5rem}.horizontal-stack .card-container{min-width:clamp(100px,15vw,150px);flex-shrink:0}.rules-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1001;display:flex;justify-content:center;align-items:center}.rules-content{background:#0f828c;padding:clamp(1rem,3vw,2rem);border-radius:10px;max-width:90vw;width:90%;max-height:90vh;color:var(--popup-text-color);border:3px solid #320A6B}.rules-scrollable{max-height:70vh;overflow-y:auto;padding-right:1rem}.rules-content h1{font-size:2rem}.rules-content h3{text-align:left}.rules-content h4{text-align:left;font-weight:400}.rules-content li{text-align:left}.card-list{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1001;display:flex;justify-content:center;align-items:center}.card-content{background:#0f828c;padding:clamp(1rem,3vw,2rem);border-radius:10px;max-width:90vw;width:90%;max-height:90vh;color:var(--popup-text-color);border:3px solid #320A6B}.card-content ul{max-height:70vh;overflow-y:auto;padding-right:1rem;margin:0;padding-left:1.5rem;list-style-type:disc;text-align:left}.card-content ul ul{margin-top:.25rem;padding-left:1.5rem;list-style-type:circle;display:block}.game-log{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1001;display:flex;justify-content:center;align-items:center}.game-log-content{background:#0f828c;padding:clamp(1rem,3vw,2rem);border-radius:10px;max-width:90vw;width:90%;max-height:90vh;color:var(--popup-text-color);border:3px solid #320A6B}.game-log-content ul{max-height:70vh;overflow-y:auto;padding-right:1rem;margin:0;padding-left:1.5rem;list-style-type:disc;text-align:left}.game-log-content ul ul{margin-top:.25rem;padding-left:1.5rem;list-style-type:circle;display:block}