*{margin:0;padding:0;box-sizing:border-box}:root{--neon-blue: #00bfff;--neon-glow: rgba(0, 191, 255, .5)}body{font-family:Orbitron,Rajdhani,-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;overflow-x:hidden;background:#000}.app{min-height:100vh;background:#000;color:#fff;position:relative;overflow-x:hidden}.app:before{content:"";position:fixed;inset:0;opacity:.08;background-image:linear-gradient(90deg,transparent 0%,transparent 48%,var(--neon-blue) 49%,var(--neon-blue) 51%,transparent 52%,transparent 100%),linear-gradient(0deg,transparent 0%,transparent 48%,var(--neon-blue) 49%,var(--neon-blue) 51%,transparent 52%,transparent 100%);background-size:100px 100px;background-position:-1px -1px;pointer-events:none;animation:circuitFlow 20s linear infinite;z-index:0}@keyframes circuitFlow{0%{opacity:.05}50%{opacity:.12}to{opacity:.05}}.app-header{text-align:center;padding:2rem 1rem;position:relative;z-index:10;animation:headerSlide .8s ease}@keyframes headerSlide{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.app-header h1{font-family:Orbitron,sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:2px;color:var(--neon-blue);text-shadow:0 0 10px var(--neon-glow),0 0 20px var(--neon-glow),0 0 30px var(--neon-glow);margin-bottom:.5rem;text-transform:uppercase}.subtitle{font-family:Rajdhani,sans-serif;font-size:clamp(1rem,2.5vw,1.3rem);font-weight:400;color:#00bfffb3;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,191,255,.3)}.app-main{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;z-index:10}.choosing-state,.revealed-state{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;gap:3rem;animation:contentFadeIn .6s ease}@keyframes contentFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.state-header{text-align:center;position:relative}.state-header:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;background:radial-gradient(circle,var(--neon-glow) 0%,transparent 70%);opacity:.15;pointer-events:none;animation:headerGlowPulse 3s ease-in-out infinite}@keyframes headerGlowPulse{0%,to{opacity:.1}50%{opacity:.2}}.state-header h2{font-family:Orbitron,sans-serif;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:var(--neon-blue);text-shadow:0 0 10px var(--neon-glow),0 0 20px var(--neon-glow);margin-bottom:.8rem;letter-spacing:2px;text-transform:uppercase;position:relative;z-index:1}.state-header p{font-family:Rajdhani,sans-serif;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:400;color:#00bfff99;letter-spacing:1px;text-shadow:0 0 8px rgba(0,191,255,.3);position:relative;z-index:1}.cards-container{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:center;padding:2rem;position:relative}.cards-container:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;background:radial-gradient(circle,rgba(0,191,255,.1) 0%,transparent 70%);pointer-events:none;animation:containerGlow 4s ease-in-out infinite}@keyframes containerGlow{0%,to{opacity:.3}50%{opacity:.6}}.revealed-card-wrapper{position:relative;cursor:pointer;animation:revealScale .8s cubic-bezier(.34,1.56,.64,1)}@keyframes revealScale{0%{opacity:0;transform:rotateY(180deg) scale(.5)}50%{transform:rotateY(90deg) scale(.8)}to{opacity:1;transform:rotateY(0) scale(1)}}.revealed-card-wrapper:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;height:350px;background:radial-gradient(circle,var(--neon-glow) 0%,transparent 70%);opacity:.3;pointer-events:none;animation:revealGlow 2s ease-in-out infinite}@keyframes revealGlow{0%,to{opacity:.2;transform:translate(-50%,-50%) scale(1)}50%{opacity:.4;transform:translate(-50%,-50%) scale(1.1)}}.reset-button{padding:1rem 3rem;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--neon-blue);background:#00bfff0d;border:2px solid rgba(0,191,255,.4);border-radius:50px;cursor:pointer;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 20px #00bfff33,inset 0 0 20px #00bfff0d;margin-top:2rem}.reset-button span{position:relative;z-index:2}.reset-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#00bfff33;transform:translate(-50%,-50%);transition:width .6s,height .6s}.reset-button:hover{border-color:#00bfffcc;box-shadow:0 0 30px #00bfff66,inset 0 0 30px #00bfff1a;transform:translateY(-3px);color:#fff}.reset-button:hover:before{width:300px;height:300px}.reset-button:active{transform:translateY(-1px)}.app-footer{text-align:center;padding:2rem 1rem;position:relative;z-index:10;border-top:1px solid rgba(0,191,255,.1)}.app-footer p{font-family:Rajdhani,sans-serif;font-size:.9rem;font-weight:400;color:#00bfff66;letter-spacing:2px;text-transform:uppercase}@media(max-width:768px){.app-header{padding:1.5rem 1rem}.state-header h2{font-size:1.8rem}.state-header p{font-size:1.1rem}.cards-container{gap:2rem;padding:1.5rem}.reset-button{padding:.9rem 2.5rem;font-size:.95rem}}@media(max-width:480px){.app-header h1{font-size:1.8rem}.subtitle{font-size:.9rem}.state-header h2{font-size:1.5rem}.state-header p{font-size:1rem}.cards-container{gap:1.5rem;padding:1rem}.reset-button{padding:.8rem 2rem;font-size:.9rem}.app-footer{padding:1.5rem 1rem}}@media(max-height:600px)and (orientation:landscape){.app-header,.app-main{padding:1rem}.state-header h2{font-size:1.5rem;margin-bottom:.5rem}.state-header p{font-size:1rem}.cards-container{gap:1.5rem;padding:1rem}.app-footer{padding:1rem}}.revealed-card-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;position:relative;z-index:10;animation:cardAppear .6s cubic-bezier(.34,1.56,.64,1)}@keyframes cardAppear{0%{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.revealed-poker-card{width:350px;height:520px;cursor:pointer;transition:all .4s cubic-bezier(.34,1.56,.64,1);animation:cardFloat 4s ease-in-out infinite;display:flex;align-items:center;justify-content:center}.revealed-poker-card .futuristic-number-card{width:350px;height:520px;transform:scale(1)}.revealed-poker-card .orbital-system{width:280px;height:280px}.revealed-poker-card .ring-outer{width:280px;height:280px;border-width:3px}.revealed-poker-card .ring-middle{width:230px;height:230px;border-width:2px}.revealed-poker-card .ring-inner{width:180px;height:180px;border-width:2px}.revealed-poker-card .orbit-dot{width:10px;height:10px;margin-left:-5px;margin-top:-5px}.revealed-poker-card .number-circle{width:220px;height:220px;border-width:3px}.revealed-poker-card .number-display{font-size:120px}.revealed-poker-card .corner-number{font-size:38px}.revealed-poker-card .corner-number.top-left{top:20px;left:20px}.revealed-poker-card .corner-number.bottom-right{bottom:20px;right:20px}.revealed-poker-card:hover{transform:translateY(-10px) scale(1.02)}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.card-footer-actions{display:flex;align-items:center;gap:1.5rem;margin-top:1rem;animation:footerSlideUp .8s ease .3s both}@keyframes footerSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tech-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,191,255,.8),transparent);box-shadow:0 0 10px #00bfff80;animation:linePulse 2s ease-in-out infinite}@keyframes linePulse{0%,to{opacity:.5}50%{opacity:1}}.choose-again-button{background:transparent;border:2px solid rgba(0,191,255,.3);color:#00bfff;padding:.8rem 2rem;font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:2px;cursor:pointer;border-radius:8px;position:relative;overflow:hidden;transition:all .3s ease;text-shadow:0 0 10px rgba(0,191,255,.5);box-shadow:0 0 20px #00bfff33}.choose-again-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#00bfff33;transform:translate(-50%,-50%);transition:width .6s,height .6s}.choose-again-button:hover{border-color:#00bfffcc;box-shadow:0 0 30px #00bfff66,inset 0 0 20px #00bfff1a;transform:translateY(-2px)}.choose-again-button:hover:before{width:300px;height:300px}.choose-again-button:active{transform:translateY(0)}.choose-again-button span{position:relative;z-index:1}.futuristic-number-card{width:160px;height:240px;background:#0a0a0ff2;border:2px solid rgba(var(--card-glow),.4);border-radius:16px;position:relative;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 30px rgba(var(--card-glow),.3),inset 0 0 40px rgba(var(--card-glow),.05);overflow:visible}.futuristic-number-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgba(var(--card-glow),.15),transparent,rgba(var(--card-glow),.15),transparent);border-radius:16px;opacity:0;transition:opacity .4s;pointer-events:none;animation:cardBorderGlow 3s linear infinite}@keyframes cardBorderGlow{0%{background-position:0% 50%}to{background-position:200% 50%}}.futuristic-number-card.selectable{cursor:pointer}.futuristic-number-card.selectable:hover{border-color:rgba(var(--card-glow),.7);box-shadow:0 0 50px rgba(var(--card-glow),.5),inset 0 0 60px rgba(var(--card-glow),.1);transform:translateY(-8px) scale(1.05)}.futuristic-number-card.selectable:hover:before{opacity:1}.futuristic-number-card.selectable:active{transform:translateY(-4px) scale(1.02)}.number-card-content{display:flex;align-items:center;justify-content:center;height:100%;padding:20px}.orbital-system{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center}.ring-outer,.ring-middle,.ring-inner{position:absolute;border-radius:50%;border:1px solid rgba(var(--card-glow),.3);animation:orbitSpin 25s linear infinite}.ring-outer{width:130px;height:130px;border-width:2px;box-shadow:0 0 15px rgba(var(--card-glow),.3)}.ring-middle{width:105px;height:105px;opacity:.6;animation-duration:20s;animation-direction:reverse}.ring-inner{width:80px;height:80px;opacity:.4;animation-duration:15s}@keyframes orbitSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dots-orbit{position:absolute;width:100%;height:100%}.orbit-dot{position:absolute;width:5px;height:5px;background:var(--card-color);border-radius:50%;top:50%;left:50%;margin-left:-2.5px;margin-top:-2.5px;box-shadow:0 0 8px var(--card-color),0 0 15px rgba(var(--card-glow),.6),0 0 25px rgba(var(--card-glow),.4);animation:orbitDotPulse 2s ease-in-out infinite}.orbit-dot:nth-child(odd){animation-delay:.5s}@keyframes orbitDotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.number-circle{width:100px;height:100px;background:radial-gradient(circle at center,rgba(var(--card-glow),.2),rgba(var(--card-glow),.1),rgba(var(--card-glow),.05));border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 30px rgba(var(--card-glow),.3),0 0 30px rgba(var(--card-glow),.2);z-index:10;border:2px solid rgba(var(--card-glow),.5);animation:numberCircleGlow 2.5s ease-in-out infinite}@keyframes numberCircleGlow{0%,to{box-shadow:inset 0 0 30px rgba(var(--card-glow),.3),0 0 30px rgba(var(--card-glow),.2)}50%{box-shadow:inset 0 0 40px rgba(var(--card-glow),.5),0 0 40px rgba(var(--card-glow),.4)}}.number-display{font-family:Orbitron,Rajdhani,monospace,sans-serif;font-size:56px;font-weight:900;color:var(--card-color);text-shadow:0 0 10px rgba(var(--card-glow),.9),0 0 20px rgba(var(--card-glow),.7),0 0 30px rgba(var(--card-glow),.5),0 0 40px rgba(var(--card-glow),.3);animation:numberGlow 2s ease-in-out infinite;z-index:20;position:relative}@keyframes numberGlow{0%,to{text-shadow:0 0 10px rgba(var(--card-glow),.9),0 0 20px rgba(var(--card-glow),.7),0 0 30px rgba(var(--card-glow),.5)}50%{text-shadow:0 0 15px rgba(var(--card-glow),1),0 0 30px rgba(var(--card-glow),.9),0 0 45px rgba(var(--card-glow),.7)}}.number-card-corners{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.corner-number{position:absolute;font-family:Orbitron,Rajdhani,monospace,sans-serif;font-size:18px;font-weight:700;color:var(--card-color);text-shadow:0 0 8px rgba(var(--card-glow),.8),0 0 15px rgba(var(--card-glow),.5);opacity:.8}.corner-number.top-left{top:12px;left:12px}.corner-number.bottom-right{bottom:12px;right:12px;transform:rotate(180deg)}.card-red.selectable:hover{box-shadow:0 0 50px #f339,inset 0 0 60px #ff333326}.card-blue.selectable:hover{box-shadow:0 0 50px #00bfff99,inset 0 0 60px #00bfff26}.card-green.selectable:hover{box-shadow:0 0 50px #0f89,inset 0 0 60px #00ff8826}.card-yellow.selectable:hover{box-shadow:0 0 50px #fc09,inset 0 0 60px #ffcc0026}.card-purple.selectable:hover{box-shadow:0 0 50px #b3f9,inset 0 0 60px #bb33ff26}@media(max-width:768px){.futuristic-number-card{width:140px;height:210px}.orbital-system,.ring-outer{width:110px;height:110px}.ring-middle{width:90px;height:90px}.ring-inner{width:70px;height:70px}.number-circle{width:85px;height:85px}.number-display{font-size:48px}.corner-number{font-size:16px}.orbit-dot{width:4px;height:4px;margin-left:-2px;margin-top:-2px}}@media(max-width:480px){.futuristic-number-card{width:120px;height:180px}.orbital-system,.ring-outer{width:95px;height:95px}.ring-middle{width:75px;height:75px}.ring-inner{width:55px;height:55px}.number-circle{width:70px;height:70px}.number-display{font-size:40px}.corner-number{font-size:14px;top:10px;left:10px}.corner-number.bottom-right{bottom:10px;right:10px}.orbit-dot{width:3px;height:3px;margin-left:-1.5px;margin-top:-1.5px}}.futuristic-container{width:100%;height:100vh;background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.circuit-lines{position:absolute;width:100%;height:100%;opacity:.15;background-image:linear-gradient(90deg,transparent 0%,transparent 48%,#00bfff 49%,#00bfff 51%,transparent 52%,transparent 100%),linear-gradient(0deg,transparent 0%,transparent 48%,#00bfff 49%,#00bfff 51%,transparent 52%,transparent 100%),radial-gradient(circle at 20% 30%,#00bfff 0%,transparent 2%),radial-gradient(circle at 80% 70%,#00bfff 0%,transparent 2%),radial-gradient(circle at 40% 80%,#00bfff 0%,transparent 2%),radial-gradient(circle at 90% 20%,#00bfff 0%,transparent 2%);background-size:80px 80px,80px 80px,200px 200px,200px 200px,200px 200px,200px 200px;background-position:-1px -1px,-1px -1px,0 0,0 0,0 0,0 0;animation:circuitPulse 8s ease-in-out infinite}@keyframes circuitPulse{0%,to{opacity:.1}50%{opacity:.2}}.poker-card{width:350px;height:520px;background:#0a0a0ff2;border:2px solid rgba(0,191,255,.3);border-radius:20px;position:relative;cursor:pointer;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 40px #00bfff33,inset 0 0 60px #00bfff0d;animation:cardFloat 4s ease-in-out infinite}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.poker-card:hover{border-color:#00bfff99;box-shadow:0 0 60px #00bfff66,inset 0 0 80px #00bfff1a;transform:translateY(-5px) scale(1.02)}.poker-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgba(0,191,255,.1),transparent,rgba(0,191,255,.1),transparent);border-radius:20px;opacity:0;transition:opacity .4s;pointer-events:none;animation:borderGlow 3s linear infinite}@keyframes borderGlow{0%{background-position:0% 50%}to{background-position:200% 50%}}.poker-card:hover:before{opacity:1}.card-content{display:flex;align-items:center;justify-content:center;height:calc(100% - 60px);padding:40px}.orbital-rings{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center}.ring{position:absolute;border-radius:50%;border:1px solid rgba(0,191,255,.3);animation:ringRotate 20s linear infinite}.outer-ring{width:240px;height:240px;border-width:2px;box-shadow:0 0 20px #00bfff4d;animation-duration:30s}.middle-ring{width:200px;height:200px;border-width:1px;opacity:.6;animation-duration:25s;animation-direction:reverse}.inner-ring{width:160px;height:160px;border-width:1px;opacity:.4;animation-duration:20s}@keyframes ringRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.glow-dots{position:absolute;width:100%;height:100%}.dot{position:absolute;width:6px;height:6px;background:#00bfff;border-radius:50%;top:50%;left:50%;margin-left:-3px;margin-top:-3px;box-shadow:0 0 10px #00bfff,0 0 20px #00bfff99,0 0 30px #00bfff66;animation:dotPulse 2s ease-in-out infinite}.dot:nth-child(odd){animation-delay:.5s}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.center-circle{width:180px;height:180px;background:radial-gradient(circle at center,#00bfff26,#0064961a,#0032640d);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 40px #00bfff4d,0 0 40px #00bfff33;z-index:10}.center-circle:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid rgba(0,191,255,.4);animation:circleGlow 3s ease-in-out infinite}@keyframes circleGlow{0%,to{box-shadow:0 0 20px #00bfff66}50%{box-shadow:0 0 40px #00bfff99}}.text-container{z-index:20}.poker-text{display:flex;flex-direction:column;align-items:center;gap:8px}.text-line{font-family:Orbitron,Rajdhani,Share Tech Mono,monospace,sans-serif;font-size:24px;font-weight:700;letter-spacing:6px;color:#00bfff;text-shadow:0 0 10px rgba(0,191,255,.8),0 0 20px rgba(0,191,255,.6),0 0 30px rgba(0,191,255,.4),0 0 40px rgba(0,191,255,.2);text-transform:uppercase;animation:textGlow 2s ease-in-out infinite}@keyframes textGlow{0%,to{text-shadow:0 0 10px rgba(0,191,255,.8),0 0 20px rgba(0,191,255,.6),0 0 30px rgba(0,191,255,.4)}50%{text-shadow:0 0 15px rgba(0,191,255,1),0 0 30px rgba(0,191,255,.8),0 0 45px rgba(0,191,255,.6)}}.card-footer{position:absolute;bottom:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:15px;padding:0 30px}.tech-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(0,191,255,.5),transparent)}.tap-hint{font-family:Orbitron,Rajdhani,monospace,sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;color:#00bfff99;text-transform:uppercase;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.4}50%{opacity:1}}@media(max-width:768px){.poker-card{width:320px;height:480px}.orbital-rings,.outer-ring{width:220px;height:220px}.middle-ring{width:180px;height:180px}.inner-ring{width:140px;height:140px}.center-circle{width:160px;height:160px}.text-line{font-size:22px;letter-spacing:5px}}@media(max-width:480px){.poker-card{width:280px;height:420px}.orbital-rings,.outer-ring{width:200px;height:200px}.middle-ring{width:160px;height:160px}.inner-ring{width:120px;height:120px}.center-circle{width:140px;height:140px}.text-line{font-size:20px;letter-spacing:4px}.glow-dots .dot{width:4px;height:4px;margin-left:-2px;margin-top:-2px}}
