@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap";:root{--bg-dark: #1a1b26;--bg-wall: #262935;--teal-btn: #008b8b;--wooden-dark: #3e2723;--wooden-light: #5d4037;--green-glow: #00ff00;--purple-badge: #d946ef;--name-tag-bg: #000000;--name-tag-text: #86efac;--font-main: "Nunito", sans-serif;--font-display: "Fredoka", cursive;--spacing-sm: clamp(6px, 2vw, 8px);--spacing-md: clamp(12px, 3vw, 16px);--spacing-lg: clamp(18px, 4vw, 24px);--spacing-xl: clamp(24px, 5vw, 32px);--spacing-2xl: clamp(36px, 7vw, 48px);--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--card-width: 85px;--card-height: 115px}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body{height:100%;background:#000}body{font-family:var(--font-main);background-color:transparent;overscroll-behavior:none;margin:0;padding:0}.App{min-height:100vh;min-height:100dvh;width:100vw;width:100dvw;position:relative;overflow-x:hidden}@keyframes mic-pulse{0%,to{transform:scale(1);box-shadow:0 2px 6px #0006}50%{transform:scale(1.15);box-shadow:0 0 15px #10b981cc}}@keyframes popIn{to{opacity:1;transform:translateY(0)}}@keyframes dealCard{0%{transform:translateY(-200px) scale(.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pulse-waiting{0%,to{box-shadow:0 0 20px #f59e0b4d}50%{box-shadow:0 0 35px #f59e0b80}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@keyframes spin-border{0%{background-image:linear-gradient(#14141ef2,#14141ef2),conic-gradient(from 0deg,#fbbf24,#f59e0b,#008b8b,#86efac,#fbbf24)}to{background-image:linear-gradient(#14141ef2,#14141ef2),conic-gradient(from 360deg,#fbbf24,#f59e0b,#008b8b,#86efac,#fbbf24)}}@keyframes reactionPop{0%{opacity:0;transform:translate(-50%) translateY(10px) scale(.5)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes reactionFadeOut{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-10px) scale(.8)}}.game-app-container{display:grid;grid-template-rows:auto var(--card-height) var(--card-height) var(--card-height);grid-template-areas:"opponents" "table" "actions" "hand";width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;position:relative;gap:30px;margin:0;padding:15px 0 0}.game-background{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 30%,#2c3e50,#000);z-index:-2}.game-background:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");opacity:.4;pointer-events:none}.magic-particles{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px;animation:floatParticles 30s linear infinite;z-index:-1;pointer-events:none}@keyframes floatParticles{0%{background-position:0 0}to{background-position:0 -100px}}.opponents-arc{grid-area:opponents;display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2vw,12px);z-index:10;width:100%;padding:0 var(--spacing-sm);margin-top:20px}.opponent-container{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0;width:var(--card-height)}.opponent-avatar-frame{width:clamp(45px,12vw,50px);height:clamp(45px,12vw,50px);border-radius:50%;background:#374151;position:relative;z-index:10;box-shadow:0 3px 5px #0006;border:2px solid #9ca3af;transition:all .3s}.opponent-avatar-frame.active{border-color:#4ade80;box-shadow:0 0 20px #4ade80}.opponent-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.opponent-name-tag{background:#000000e6;color:#86efac;padding:2px 5px;border-radius:6px;font-size:clamp(.5rem,2.5vw,.6rem);font-weight:700;margin-top:3px;z-index:3;text-transform:uppercase;border:1.5px solid #4ade80;white-space:nowrap;max-width:clamp(60px,15vw,75px);overflow:hidden;text-overflow:ellipsis}.card-count-badge{position:absolute;top:-7px;left:-7px;background:#d946ef;color:#fff;width:clamp(18px,5vw,22px);height:clamp(18px,5vw,22px);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(.65rem,3vw,.75rem);border-radius:5px;border:2px solid white;z-index:4}.opponent-stack-preview{margin-top:clamp(6px,2vw,8px);width:clamp(30px,8vw,35px);height:clamp(42px,11vw,50px);position:relative;display:flex;justify-content:center}.stack-value-tag{position:absolute;top:-8px;background:#000c;color:#fbbf24;font-size:clamp(.45rem,2vw,.5rem);font-weight:800;border:1px solid #fbbf24;padding:1px 3px;border-radius:4px;white-space:nowrap;z-index:10}.play-area-zones{grid-area:table;display:flex;justify-content:center;align-items:center;width:100%;z-index:15;padding:0 10px}.zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;height:100%;width:100%}.zone-slot{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.zone-base{position:absolute;inset:0;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 15px #00000080;z-index:1}.draw-base{background:#ffffff08}.discard-base{background:#ef44440d;border-color:#ef44444d}.stacked-cards{position:relative;width:100%;height:100%;z-index:5;display:flex;align-items:center;justify-content:center}.zone-label{margin-top:8px;font-size:.8rem;font-weight:700;text-shadow:0 2px 2px black;color:#ffffffb3}.player-action-zone{display:flex;justify-content:center;align-items:center;gap:15px;width:100%;z-index:20;height:100%;padding:0 10px}.my-avatar-container{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.my-stack-readonly{min-width:var(--card-height);height:var(--card-height);flex-shrink:0;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center}.mixing-zone-container{flex:1;height:100%;display:flex;justify-content:center}.mixing-zone-active{width:100%;height:100%;border:2px solid rgba(251,191,36,.5);border-radius:16px;background:#fbbf240d;box-shadow:0 0 15px #fbbf2426;position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.mixing-zone-active.drag-over{border-color:#10b981;background:#10b98126;box-shadow:0 0 20px #10b98166;transform:scale(1.02)}.mixing-zone-active.one-card{border-color:#f59e0b;animation:pulse-waiting 1.5s infinite}.mixing-zone-active.error{border-color:#ef4444;background:#ef44441a;animation:shake .5s}.zone-placeholder{flex:1;height:100%;border:2px dashed rgba(255,255,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff6;font-size:.8rem;text-align:center;padding:10px}.cancel-mix-btn{position:absolute;top:70%;left:50%;transform:translate(-50%);background:#ef4444;color:#fff;padding:6px 14px;border-radius:20px;font-weight:700;cursor:pointer;z-index:50;box-shadow:0 4px 8px #0006;font-size:.8rem;white-space:nowrap}.hand-area-container{grid-area:hand;width:100%;display:flex;align-items:center;justify-content:center;z-index:50}.card-fan-inner{width:100%;height:100%;display:flex;gap:10px;justify-content:center;align-items:flex-end}.medium-card-wrapper{width:var(--card-width);height:var(--card-height);display:flex;justify-content:center;align-items:center;transition:transform .2s}.game-card{width:var(--card-width);height:var(--card-height);position:relative;touch-action:none;z-index:10;transition:transform .2s,box-shadow .2s}.card-inner{width:100%;height:100%;border:4px solid white;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.card-inner:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%);pointer-events:none}.game-card.dragging{opacity:.8;transform:scale(1.1);z-index:100;cursor:grabbing}.notification-bar{position:absolute;bottom:clamp(140px,30vh,180px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:clamp(8px,2vw,10px) clamp(15px,4vw,20px);border-radius:12px;font-size:clamp(.8rem,3.5vw,.9rem);border:1px solid rgba(255,255,255,.3);z-index:100;text-align:center;box-shadow:0 4px 10px #00000080;width:90%;max-width:400px}.notification-bar.glow-error{border-color:#ef4444;box-shadow:0 0 15px #ef444466}.active-drop{transform:scale(1.05)}.status-bubble{position:absolute;top:clamp(50px,12vw,55px);background:#8b5cf6;color:#fff;font-size:clamp(.55rem,2.5vw,.6rem);padding:clamp(3px,1vw,4px) clamp(6px,2vw,8px);border-radius:12px;white-space:nowrap;z-index:10;font-weight:700;box-shadow:0 2px 4px #0000004d;opacity:0;transform:translateY(-10px);animation:popIn .3s forwards}.empty-card-slot{width:50px;height:70px;border:2px dashed rgba(255,255,255,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff6;font-size:10px;font-weight:700}.stack-drop-target{position:relative;width:var(--card-height);height:var(--card-height);display:flex;align-items:center;justify-content:center;z-index:20}.lobby-container{min-height:100vh;min-height:100dvh;width:100vw;width:100dvw;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,24px);position:relative;z-index:1;box-sizing:border-box;overflow-x:hidden}.lobby-card{max-width:500px;width:100%;color:#fff;margin:0 auto}.input{width:100%;padding:12px 16px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:#fff;font-size:1rem;font-family:var(--font-main);transition:all .3s ease;outline:none}.input:focus{border-color:#fbbf24;background:#ffffff14;box-shadow:0 0 0 3px #fbbf241a}.input::placeholder{color:#fff6}.btn{padding:14px 24px;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:700;font-family:var(--font-display);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.05em;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 4px 12px #fbbf244d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #fbbf2466}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.2)}.btn-secondary:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}