:root{--bg-dark: #000000;--cyber-yellow: #fcee0a;--cyber-blue: #00f0ff;--cyber-pink: #ff003c;--matrix-green: #0f0;--font-main: "Outfit", sans-serif;--font-display: "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-dark);color:#fff;font-family:var(--font-main);overflow:hidden;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.cyber-grid{position:absolute;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(transparent 0%,rgba(0,240,255,.1) 2%,transparent 3%),linear-gradient(90deg,transparent 0%,rgba(255,0,60,.1) 2%,transparent 3%);background-size:50px 50px;transform:perspective(500px) rotateX(60deg) translateY(0) scale(2);animation:gridMove 3s linear infinite;z-index:0;pointer-events:none;opacity:.5}.cyber-grid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,#000 90%);pointer-events:none;z-index:1}.crt-overlay{background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);background-size:100% 2px,3px 100%;z-index:2147483647;position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.15;pointer-events:none}.crt-overlay:after{content:" ";display:block;position:absolute;inset:0;background:#1210101a;opacity:0;z-index:2;pointer-events:none;animation:flicker .15s infinite}.crt-overlay:before{content:" ";display:block;position:absolute;inset:0;background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);z-index:2;background-size:100% 2px,3px 100%;pointer-events:none;animation:scanline 6s linear infinite;opacity:.2}@keyframes scanline{0%{transform:translateY(-100vh)}to{transform:translateY(100vh)}}@keyframes flicker{0%{opacity:.02}5%{opacity:.05}10%{opacity:.02}15%{opacity:.05}to{opacity:.02}}@keyframes gridMove{0%{background-position:0 0}to{background-position:0 50px}}.crt-overlay{background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}h1.cyber-title{font-family:var(--font-display);font-size:5rem;font-weight:900;text-transform:uppercase;position:relative;text-shadow:.05em 0 0 var(--cyber-pink),-.03em -.04em 0 var(--cyber-blue),.025em .04em 0 var(--cyber-yellow);animation:glitch 3s infinite alternate;margin-bottom:2rem;color:#fff;letter-spacing:-2px;text-align:center;line-height:.9;display:flex;flex-direction:column;align-items:center}h1.cyber-title .title-top{display:block}h1.cyber-title .title-bottom{display:block;font-size:5rem;letter-spacing:.4em;margin-right:-.4em;color:var(--cyber-yellow)}@keyframes glitch{0%{text-shadow:.05em 0 0 var(--cyber-pink),-.03em -.04em 0 var(--cyber-blue),.025em .04em 0 var(--cyber-yellow)}15%{text-shadow:.05em 0 0 var(--cyber-pink),-.03em -.04em 0 var(--cyber-blue),.025em .04em 0 var(--cyber-yellow)}16%{text-shadow:-.05em -.025em 0 var(--cyber-pink),.025em .035em 0 var(--cyber-blue),-.05em -.05em 0 var(--cyber-yellow)}49%{text-shadow:-.05em -.025em 0 var(--cyber-pink),.025em .035em 0 var(--cyber-blue),-.05em -.05em 0 var(--cyber-yellow)}50%{text-shadow:.05em .035em 0 var(--cyber-pink),.03em 0 0 var(--cyber-blue),0 -.04em 0 var(--cyber-yellow)}99%{text-shadow:.05em .035em 0 var(--cyber-pink),.03em 0 0 var(--cyber-blue),0 -.04em 0 var(--cyber-yellow)}to{text-shadow:-.05em 0 0 var(--cyber-pink),-.025em -.04em 0 var(--cyber-blue),-.04em -.025em 0 var(--cyber-yellow)}}#app{width:100%;max-width:1200px;height:100%;position:relative;z-index:10;display:flex;flex-direction:column}.screen{display:none;width:100%;height:100%;flex-direction:column;justify-content:center;align-items:center}.screen.active{display:flex}.cyber-panel{background:#000c;border:2px solid var(--cyber-yellow);padding:3rem;position:relative;clip-path:polygon(0 0,100% 0,100% 85%,95% 100%,0 100%,0 15%);box-shadow:0 0 20px #fcee0a4d}.cyber-panel:before{content:"SYSTEM_READY";position:absolute;top:5px;right:10px;font-family:monospace;font-size:.8rem;color:var(--cyber-yellow)}.input-glitch{background:#000;border:2px solid var(--cyber-blue);color:var(--cyber-blue);font-family:monospace;font-size:1.5rem;padding:1rem;margin:.5rem;text-transform:uppercase;width:250px;transition:all .2s}.input-glitch:focus{background:#00f0ff1a;box-shadow:0 0 15px var(--cyber-blue);outline:none}.btn-cyber{background:var(--cyber-yellow);color:#000;font-family:var(--font-display);font-weight:900;font-size:2rem;padding:1.5rem 4rem;border:none;clip-path:polygon(10% 0,100% 0,100% 70%,90% 100%,0 100%,0 30%);cursor:pointer;margin-top:2rem;text-transform:uppercase;position:relative;transition:all .2s;overflow:hidden}.btn-cyber:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:.5s}.btn-cyber:hover:before{left:100%}.btn-cyber:hover{background:#fff;color:#000;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--cyber-pink),0 0 20px var(--cyber-yellow);text-shadow:none}.btn-cyber:active{transform:translate(0);box-shadow:0 0 10px var(--cyber-pink)}.timer-btn{background:#000;color:var(--cyber-yellow);border:2px solid var(--cyber-yellow);padding:10px 20px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;cursor:pointer;margin-top:1rem;transition:all .2s;text-transform:uppercase;box-shadow:0 0 10px #fcee0a33}.timer-btn:hover{background:var(--cyber-yellow);color:#000;box-shadow:0 0 20px var(--cyber-yellow)}#game-content{position:absolute;top:0;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:2000}#game-content>*{pointer-events:auto}.card-display{border:4px solid var(--cyber-pink);background:#000000f2;width:400px;height:650px;padding:15px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;box-shadow:0 0 30px var(--cyber-pink);font-family:var(--font-main);animation:float 6s ease-in-out infinite;box-shadow:0 0 50px var(--cyber-pink),inset 0 0 20px #ff003c4d;overflow:hidden}.card-display:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,transparent 40%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.1) 55%,transparent 60%);transform:rotate(30deg);animation:shine 4s infinite linear;pointer-events:none;mix-blend-mode:overlay;z-index:10}@keyframes shine{0%{transform:translate(-30%,-30%) rotate(30deg)}to{transform:translate(30%,30%) rotate(30deg)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.card-display:after{content:"";position:absolute;inset:-10px;border:1px dashed var(--cyber-pink);z-index:-1}.card-type{color:var(--cyber-yellow);background:#fcee0a1a;font-family:monospace;font-size:1.2rem;margin-bottom:.5rem;border:1px solid var(--cyber-yellow);padding:.5rem 2rem;width:auto;min-width:60%;text-align:center;border-radius:4px;box-shadow:0 0 10px #fcee0a33;letter-spacing:2px}.card-content{font-size:1.6rem;color:#fff;text-align:center;font-weight:800;text-transform:uppercase;margin-bottom:auto;margin-top:auto;padding:0 1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.8);line-height:1.3}.punishment{color:var(--cyber-pink);font-size:1.4rem;border:2px solid var(--cyber-pink);background:#ff003c1a;padding:1rem;text-align:center;margin-bottom:2rem;width:90%;text-transform:uppercase;font-weight:700;box-shadow:0 0 15px #ff003c33;letter-spacing:1px}.rules-box{border:1px solid var(--cyber-yellow);background:#fcee0a1a;padding:1rem;text-align:center;width:90%;font-weight:700;box-shadow:0 0 10px #fcee0a33;letter-spacing:1px;text-transform:uppercase}.score-board{position:absolute;top:2rem;width:100%;display:flex;justify-content:space-around;font-family:monospace;z-index:5000}.player-score{border:2px solid var(--cyber-blue);background:#0009;padding:1rem 3rem;color:var(--cyber-blue);box-shadow:0 0 20px #00f0ff1a;text-shadow:0 0 5px var(--cyber-blue);transition:all .3s;position:relative;clip-path:polygon(15% 0,100% 0,100% 80%,85% 100%,0 100%,0 20%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.player-score:nth-child(2){border-color:var(--cyber-pink);color:var(--cyber-pink);text-shadow:0 0 5px var(--cyber-pink);box-shadow:0 0 20px #ff003c1a}.player-score:before{content:"STATUS: ONLINE";position:absolute;top:2px;right:5px;font-size:.6rem;opacity:.7}.player-score:hover{transform:translateY(5px);background:#000000e6;box-shadow:0 0 40px currentColor}.player-score span{display:block}.player-score span:first-child{font-size:.8rem;letter-spacing:2px;margin-bottom:5px;opacity:.8}.player-score span:last-child{font-size:1.5rem;font-weight:700}@keyframes pulse{0%{opacity:.5}to{opacity:1}}.bg-orb,.grid-overlay{display:none!important}.card-stack{position:absolute;width:140px;height:200px;background:#000c;border:2px solid var(--cyber-blue);display:flex;justify-content:center;align-items:center;box-shadow:0 0 15px #00f0ff33;z-index:3000;transition:transform .3s}.card-stack:hover{transform:scale(1.05)!important}#deck-stack{bottom:50px;left:50px;transform:rotate(-5deg)}#deck-stack:before{content:"BAZA_DANYCH";position:absolute;top:-25px;color:var(--cyber-blue);font-size:.8rem;font-family:monospace;letter-spacing:2px}.card-stack .layer{position:absolute;width:100%;height:100%;border:1px solid #333;background:#000;top:0;left:0}#discard-stack{bottom:50px;right:50px;border-color:var(--cyber-pink);transform:rotate(5deg);box-shadow:0 0 15px #ff003c33}#discard-stack:before{content:"ZUTYLIZOWANE";position:absolute;top:-25px;color:var(--cyber-pink);font-size:.8rem;font-family:monospace;letter-spacing:2px}.card-count{position:absolute;bottom:-30px;font-family:monospace;font-size:1.2rem;font-weight:700;color:#fff;background:#000;padding:2px 10px;border:1px solid currentColor;border-radius:4px;box-shadow:0 0 5px currentColor}#deck-stack .card-count{color:var(--cyber-blue)}#discard-stack .card-count{color:var(--cyber-pink)}.flying-card{position:fixed;z-index:1000;background:#000;border:2px solid var(--cyber-yellow);transform-origin:center center;transition:all .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 30px #fcee0a66;display:flex;justify-content:center;align-items:center;font-family:var(--font-main);color:var(--cyber-gray);backface-visibility:hidden;will-change:transform,box-shadow}.card-back-pattern{width:100%;height:100%;background-image:url(/card_couple_logo.png);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.9;box-shadow:inset 0 0 20px #000;border-radius:4px;position:relative;z-index:2}.flipper{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.flipper .front,.flipper .back{position:absolute;width:100%;height:100%;backface-visibility:hidden;top:0;left:0}.flipper .face-pattern{transform:rotateY(0);z-index:2}.flipper .face-content{transform:rotateY(180deg)}.card-content:hover{text-shadow:2px 0 var(--cyber-pink),-2px 0 var(--cyber-yellow);animation:glitch-text .5s infinite linear alternate-reverse}@keyframes glitch-text{0%{transform:skew(0);clip-path:inset(20% 0 80% 0)}20%{transform:skew(-2deg);clip-path:inset(60% 0 10% 0)}40%{transform:skew(2deg);clip-path:inset(40% 0 50% 0)}60%{transform:skew(0);clip-path:inset(80% 0 5% 0)}80%{transform:skew(-1deg);clip-path:inset(10% 0 60% 0)}to{transform:skew(0);clip-path:inset(30% 0 30% 0)}}.intro-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:10000;display:flex;justify-content:center;align-items:center;overflow:hidden;pointer-events:none;transition:opacity 1s}.terminal-boot{font-family:monospace;color:var(--cyber-blue);font-size:1.2rem;text-align:left;width:80%}.terminal-boot .line{opacity:0;margin-bottom:.5rem}.hyper-word{font-family:var(--font-display);font-size:8rem;color:#fff;text-shadow:10px 10px 0 var(--cyber-pink),-10px -10px 0 var(--cyber-blue);animation:zoom-shake .8s cubic-bezier(.1,.7,1,.1) forwards;position:absolute;text-transform:uppercase}@keyframes zoom-shake{0%{transform:scale(.5) rotate(-5deg);opacity:0}50%{transform:scale(1.5) rotate(5deg);opacity:1}80%{transform:scale(1.2) rotate(-5deg)}to{transform:scale(20) rotate(0);opacity:0}}.intro-logo-container{text-align:center;transform:scale(.1);opacity:0;transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.intro-logo-container.impact{transform:scale(1);opacity:1}.intro-logo{font-family:Rubik Glitch,cursive;font-family:var(--font-display);font-size:6rem;line-height:.9;color:#fff;text-shadow:0 0 20px var(--cyber-pink)}.intro-logo.title-top{color:var(--cyber-blue);text-shadow:5px 5px 0px var(--cyber-pink)}.intro-logo.title-bottom{color:var(--cyber-yellow);text-shadow:-5px 5px 0px var(--cyber-blue)}.intro-subtitle{font-family:monospace;letter-spacing:10px;margin-top:1rem;color:#fff;font-size:1.5rem;opacity:.7}.intro-card-container{perspective:1000px;width:300px;height:450px;position:relative;z-index:10001}.intro-card{width:100%;height:100%;background-image:url(/card_couple_logo.png);background-size:cover;background-position:center;border-radius:15px;box-shadow:0 0 50px var(--cyber-pink);animation:spin-3d-chaos 3s linear infinite;position:absolute;top:0;left:0;transition:filter .5s}.intro-card.burning{background-image:url(/card_final_destroyed.png);filter:sepia(1) saturate(5) hue-rotate(-30deg) brightness(1.5) contrast(1.2);box-shadow:0 0 100px #ff4500;animation:burn-shake .1s infinite}@keyframes spin-3d-chaos{0%{transform:rotateY(0) rotateX(0) rotate(0) scale(.8)}50%{transform:rotateY(180deg) rotateX(180deg) rotate(45deg) scale(1.2)}to{transform:rotateY(360deg) rotateX(360deg) rotate(0) scale(.8)}}@keyframes burn-shake{0%{transform:translate(2px,2px) rotate(0)}25%{transform:translate(-2px,-2px) rotate(-2deg)}50%{transform:translate(-2px,2px) rotate(0)}75%{transform:translate(2px,-2px) rotate(2deg)}to{transform:translate(2px,2px) rotate(0)}}.intro-bg-tunnel{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,transparent 20%,#110022 80%),repeating-linear-gradient(0deg,transparent 0,transparent 40px,rgba(255,0,60,.1) 41px),repeating-linear-gradient(90deg,transparent 0,transparent 40px,rgba(0,240,255,.1) 41px);z-index:-1;transform:perspective(500px) rotateX(20deg);animation:tunnel-move 5s linear infinite;opacity:.4}@keyframes tunnel-move{0%{transform:perspective(500px) rotateX(20deg) translateY(0)}to{transform:perspective(500px) rotateX(20deg) translateY(50px)}}.intro-flash{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fff;opacity:1;z-index:10002;animation:flash-fade .5s forwards;pointer-events:none}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}
