:root{font-family:Outfit,sans-serif;--felt-green: #35654d;--table-border: #4a3b2a;--card-width: 45px;--card-height: 65px;--avatar-size: 40px}body{margin:0;background-color:#1a1a1a;color:#fff;overflow:hidden;overscroll-behavior:none}#root{width:100vw;height:100vh;padding:0;display:flex;justify-content:center;align-items:center}#app-root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.login-container{background:#282828b3;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:3rem;border-radius:12px;box-shadow:0 8px 32px #00000080;text-align:center;border:1px solid rgba(255,255,255,.1);max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.login-container h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(135deg,#fff,#aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.form-group input{width:100%;padding:1rem;margin:.5rem 0;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font-size:1rem;box-sizing:border-box;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 10px #2196f34d}.btn-primary{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border:none;padding:1rem 2rem;border-radius:6px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:1rem;text-transform:uppercase;letter-spacing:1px}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:.8rem 1.5rem;border-radius:8px;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#fff3}.room-selection-area{display:flex;gap:2rem;margin-top:2rem;text-align:left}.create-room-section,.active-rooms-section{flex:1;background:#0003;padding:1.5rem;border-radius:15px}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:300px;overflow-y:auto}.room-card{background:#ffffff0d;padding:10px;border-radius:6px;cursor:pointer;transition:background .2s;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column}.room-card:hover{background:#2196f333;border-color:#2196f3}.room-name{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-count{font-size:.8rem;color:#aaa}.game-container{background:radial-gradient(circle at center,#35654d,#1e3c2f);width:100%;height:100%;position:relative;box-shadow:inset 0 0 100px #000c;border:20px solid #4a3b2a;box-sizing:border-box}.info-panel{position:absolute;top:20px;left:20px;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px;border-radius:8px;border:1px solid rgba(255,255,255,.1);z-index:100;min-width:220px;transition:all .3s ease;overflow:hidden}.info-panel.collapsed{min-width:auto;width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.info-panel.collapsed .info-header button{display:none}.info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;color:#aaa;font-size:.9rem}.score-display{font-size:1.1rem;font-weight:700;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}.losing-text{color:#ff6b6b}.doubled-badge{background:#ff4757;color:#fff;font-size:.7rem;padding:2px 6px;border-radius:4px;align-self:flex-start;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.trick-row{display:flex;gap:4px}.trick-dot{width:8px;height:8px;border-radius:50%;background:#444;border:1px solid #666}.trick-dot.team-a{background:#4cd137;box-shadow:0 0 4px #4cd137}.trick-dot.team-b{background:#00a8ff;box-shadow:0 0 4px #00a8ff}.table{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:70%;border-radius:50%}.player-seat{position:absolute;display:flex;flex-direction:column;align-items:center;width:120px;transition:all .5s ease}.seat-content-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px}.seat-0{bottom:-80px;transform:none;right:40%;align-items:bottom;z-index:50;flex-direction:column}.seat-0 .name{margin-bottom:5px;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.8)}.seat-0 .hand-preview{position:fixed;left:50%;transform:translate(-50%);bottom:-50px;z-index:60;pointer-events:none}.seat-0 .card{pointer-events:auto}.seat-0 .avatar,.seat-0 .name{z-index:61}.seat-1{bottom:20%;right:-60px}.seat-2{top:20%;right:-60px}.center-table{position:absolute;top:65%;left:50%;transform:translate(-50%,-50%);z-index:10;width:200px;height:150px;display:flex;justify-content:center;align-items:center;pointer-events:none}.seat-3{top:15px;left:50%;transform:translate(-50%);z-index:20}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:20px;overflow-y:auto}.room-selection-area{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px}@media(min-width:480px)and (orientation:landscape){.room-selection-area{flex-direction:row;max-width:800px;align-items:flex-start}.create-room-section,.active-rooms-section{flex:1;height:300px;overflow-y:auto}}.seat-4{top:20%;left:-60px}.seat-5{bottom:20%;left:-60px}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background:linear-gradient(135deg,#444,#222);border:3px solid var(--team-color, #555);display:flex;justify-content:center;align-items:center;font-size:1rem;font-weight:700;box-shadow:0 4px 10px #00000080;position:relative;z-index:5}.player-seat.active-turn .avatar{border-color:gold;box-shadow:0 0 20px #ffd70099;animation:glow 1.5s infinite alternate}@keyframes glow{0%{box-shadow:0 0 10px #ffd70066}to{box-shadow:0 0 25px #ffd700cc}}.name{margin-top:5px;background:#0009;padding:2px 8px;border-radius:10px;font-size:.8rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--team-color, transparent)}.hand-preview{margin-top:-10px;display:flex;justify-content:center}.seat-0 .hand-preview{margin-top:10px;position:fixed;bottom:-50px;left:50%;transform:translate(-50%);width:auto;gap:-30px}.card{width:var(--card-width);height:var(--card-height);background:#fff;border-radius:6px;color:#000;position:relative;box-shadow:0 2px 5px #0000004d;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;font-family:Courier New,Courier,monospace;font-weight:700;transition:transform .2s,margin .2s}.card.red{color:#d32f2f}.card.black{color:#212121}.seat-0 .card{width:70px;height:100px;margin-right:-35px;cursor:pointer;border:1px solid #ccc;box-shadow:-2px 0 10px #0003}.seat-0 .card:last-child{margin-right:0}.seat-0 .card:hover{transform:translateY(-20px) rotate(2deg);z-index:10}.seat-0 .card.playable:hover{border:2px solid #ffd700}.seat-0 .card .card-center{display:none}.card-corner{position:absolute;font-size:.8rem;display:flex;flex-direction:column;align-items:center;line-height:1}.top-left{top:4px;left:4px}.bottom-right{bottom:4px;right:4px;transform:rotate(180deg)}.card-center{font-size:.8rem}.card.back{background:repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px 20px);border:2px solid white}.opponent-hand-stack{position:relative;width:35px;height:50px}.card-stack-icon{width:100%;height:100%;background:#fff;border-radius:4px;box-shadow:2px 2px #ccc}.opponent-hand-stack span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;font-weight:700}.center-table{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px}.played-card{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-45px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:auto;cursor:pointer}.played-card .player-label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;font-size:.7rem;padding:2px 4px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}.played-card:hover .player-label,.played-card.show-label .player-label{opacity:1}.action-bar{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:1rem;z-index:200;background:#141414cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 40px #0009;min-width:300px;text-align:center}.bidding-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#14141499;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1.5rem 2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #00000080;text-align:center;z-index:200;min-width:280px;color:#fff}.bidding-panel h3{margin-top:0;color:gold}.top-hud{position:fixed;top:0;left:0;width:100%;height:60px;background:#0a0a0a66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:100;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 4px 15px #00000080;font-family:Inter,sans-serif}.hud-team{display:flex;flex-direction:column;justify-content:center;width:120px}.hud-team.left,.hud-team.right{align-items:flex-start;text-align:left}.hud-label{font-size:.7rem;text-transform:uppercase;color:#888;letter-spacing:1px}.hud-score{font-size:1.5rem;font-weight:700;color:#fff}.hud-center{display:flex;align-items:center;gap:20px}.hud-pill{background:#ffffff1a;padding:5px 15px;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:#ddd}.hud-pill.highlight{background:#2e86de;color:#fff;padding:5px 15px;border-radius:8px;font-weight:700;font-size:.9rem}.hud-timer{background:#ff4757;color:#fff;padding:5px 15px;border-radius:8px;font-weight:700;font-size:.9rem;animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.8}to{opacity:1}}@keyframes popIn{0%{transform:translate(-50%) scale(0);opacity:0}80%{transform:translate(-50%) scale(1.2);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}.emoji-bubble{position:absolute;top:-50px;left:50%;transform:translate(-50%);font-size:2rem;z-index:999;text-shadow:0 2px 4px rgba(0,0,0,.5);pointer-events:none;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.seat-3 .emoji-bubble{top:auto;bottom:-50px}.seat-0 .emoji-bubble{top:-80px}.hud-room{position:fixed;left:20px;font-size:.8rem;color:#ffffff4d;font-weight:700;letter-spacing:1px}.bid-inputs{display:flex;flex-direction:column;gap:15px;margin:10px 0}.number-selector{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.num-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:40px;height:40px;border-radius:8px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s}.num-btn.selected{background:#fff;color:#000;transform:scale(1.1);box-shadow:0 0 10px #ffffff80}.suit-selector{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.suit-btn{padding:8px 12px;font-size:1.5rem;background:#333;border:1px solid #555;color:#fff;border-radius:8px;cursor:pointer;transition:all .2s;opacity:.6}.suit-btn.selected{opacity:1;transform:scale(1.1);border-color:#fff;box-shadow:0 0 10px #ffffff4d}.bid-submit-btn{width:100%;padding:12px;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,gold,orange);color:#000;border:none;border-radius:10px;margin-top:10px;cursor:pointer;box-shadow:0 4px 10px #00000080;transition:transform .1s}.bid-submit-btn:active{transform:scale(.98)}.suit-selector{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.suit-btn{padding:8px 12px;font-size:1.2rem;background:#333;border:1px solid #555;color:#fff;border-radius:5px;cursor:pointer}.suit-btn.red{color:#ff6b6b}.suit-btn:hover{background:#555}#toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column-reverse;gap:10px;z-index:9999}.toast-msg{background:#000c;color:#fff;padding:10px 20px;border-radius:5px;border-left:4px solid #2196F3;animation:slideIn .3s ease-out;max-width:300px}.toast-msg.old{opacity:.5;filter:grayscale(100%)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.winner-toast{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:700;color:gold;text-shadow:0 0 20px black;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;z-index:1000}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0)}80%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1)}}.chagdi-badge{position:absolute;top:-5px;right:-5px;font-size:1rem;background:#333;border-radius:50%;padding:2px}.bid-winner-icon{position:absolute;bottom:-5px;right:-5px;font-size:1.2rem;filter:drop-shadow(0 0 2px black)}.btn-challenge{background:#ff4757;color:#fff;border:none;padding:.8rem 1.5rem;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer;animation:pulseRed 2s infinite}@keyframes pulseRed{0%{box-shadow:0 0 #ff4757b3}70%{box-shadow:0 0 0 10px #ff475700}to{box-shadow:0 0 #ff475700}}.splash-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle at center,#1e3c2f,#000);z-index:9999;display:flex;justify-content:center;align-items:center;transition:opacity 1s ease-out,visibility 1s}.splash-screen.fade-out{opacity:0;visibility:hidden;pointer-events:none}.splash-content{text-align:center;animation:scaleUp 2s ease-out}.splash-title{font-family:Outfit,sans-serif;font-size:5rem;font-weight:800;background:linear-gradient(135deg,gold,#fa0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;text-transform:uppercase;letter-spacing:5px;filter:drop-shadow(0 0 20px rgba(255,215,0,.4))}.splash-subtitle{font-family:Outfit,sans-serif;font-size:1.5rem;color:#ccc;margin-top:10px;letter-spacing:2px;text-transform:uppercase;opacity:0;animation:fadeIn 1s ease-out .5s forwards}@keyframes scaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;display:flex;justify-content:center;align-items:center}.how-to-play-modal{background:#1e1e1ef2;padding:1.5rem;border-radius:15px;max-width:400px;width:85%;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #0009;position:relative;text-align:center;color:#fff;margin:auto}.how-to-play-modal h2{color:gold;margin-top:0}.slide-content{min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1rem;line-height:1.5}.illustration-box{background:#ffffff0d;padding:1rem;border-radius:10px;margin:1rem 0;width:100%}.slide-controls{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.dots{display:flex;gap:5px}.dot{width:10px;height:10px;border-radius:50%;background:#555;transition:background .3s}.dot.active{background:#2196f3}.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:2rem;color:#888;cursor:pointer}.close-btn:hover{color:#fff}.help-btn{position:fixed;bottom:20px;left:20px;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.2rem;cursor:pointer;z-index:1000;display:flex;justify-content:center;align-items:center;transition:background .2s}.help-btn:hover{background:#2196f366}