:root{font-family:Inter,system-ui,sans-serif;color:#fff;background:#032a1d;--green:#07583a;--dark:#032a1d;--gold:#ffc928;--red:#e52b22;--cream:#fff5dd}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#0f8052,#043523 55%,#021c14)}button,input{font:inherit}.screen{min-height:100dvh}.hidden{display:none!important}.lobby{display:grid;place-content:center;justify-items:center;padding:24px;background:linear-gradient(rgba(1,29,20,.35),rgba(1,22,15,.78)),repeating-linear-gradient(90deg,transparent 0 50px,rgba(255,255,255,.025) 50px 51px)}.logo{width:min(520px,92vw);filter:drop-shadow(0 15px 18px #00170fa0)}.subtitle{margin:-8px 0 18px;color:#d9ecdf;font-weight:700}.lobby-card{width:min(450px,92vw);padding:22px;background:rgba(2,38,26,.88);border:1px solid #ffffff27;border-radius:24px;box-shadow:0 24px 70px #00150eb0}.lobby-card>label{display:grid;gap:7px;font-weight:800}.lobby-card input{width:100%;border:1px solid #ffffff2e;border-radius:12px;padding:13px;background:#021d15;color:#fff;outline:none}.lobby-card input:focus{border-color:var(--gold)}fieldset{display:grid;grid-template-columns:1fr 1fr;gap:9px;border:0;padding:0;margin:17px 0}legend{font-size:.8rem;color:#b8d0c3;margin-bottom:8px;font-weight:800}.choice input{position:absolute;opacity:0}.choice span{display:grid;padding:12px;border:2px solid transparent;border-radius:13px;background:#0a422f;cursor:pointer}.choice small{margin-top:3px;color:#9fc1af;font-size:.7rem}.choice input:checked+span{border-color:var(--gold);background:#0a5e40}.primary,#join-room{border:0;border-radius:13px;padding:15px;font-weight:1000;cursor:pointer}.primary{width:100%;background:linear-gradient(#ffe269,#ffb408);color:#382100;box-shadow:inset 0 -4px #cb7d00}.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#89aa99;font-size:.75rem}.divider:before,.divider:after{content:"";height:1px;background:#ffffff1f;flex:1}.join-row{display:grid;grid-template-columns:1fr 110px;gap:8px}.join-row input{text-align:center;font-size:1.2rem;letter-spacing:.16em;font-weight:900}.join-row button{background:#16825a;color:#fff}.error{min-height:20px;margin:9px 0 -4px;color:#ff958b;text-align:center;font-size:.8rem}.connection{margin-top:15px;color:#a8c1b5;font-size:.8rem}.connection.connected{color:#7cdfad}.waiting{display:grid;place-content:center;justify-items:center;text-align:center;padding:30px}.waiting-icon{width:140px;border-radius:28px;border:3px solid var(--gold);box-shadow:0 15px 50px #00170f}.waiting>p{color:#b8d4c5}.waiting h1{font-size:clamp(1.25rem,5vw,2rem)}.room-code{display:grid;gap:4px;border:2px dashed var(--gold);border-radius:16px;padding:12px 28px;background:#062d21;color:#fff;cursor:pointer}.room-code span{font-size:2rem;font-weight:1000;letter-spacing:.18em}.room-code small{font-size:.58rem;color:#c8dbd0}.loader{display:flex;gap:7px}.loader i{width:10px;height:10px;border-radius:50%;background:var(--gold);animation:bounce 1s infinite}.loader i:nth-child(2){animation-delay:.15s}.loader i:nth-child(3){animation-delay:.3s}@keyframes bounce{50%{transform:translateY(-8px)}}.hint{max-width:340px}.game{overflow:hidden;background:radial-gradient(circle at 50% 30%,#b76027,#4d210e 63%,#251006)}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px clamp(15px,4vw,35px);background:#032a1de8}.topbar>div:first-child{display:grid}.topbar span{font-size:.72rem;color:#b2cdbf}.online-badge{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#0c573c}.online-badge i{width:8px;height:8px;border-radius:50%;background:#63e4a8}.online-badge.offline i{background:#ff9a70}.scoreboard{position:relative;z-index:6;width:min(340px,84vw);margin:8px auto -38px;display:grid;grid-template-columns:1fr .8fr 1fr;text-align:center;background:#072e21;border:3px solid #c18328;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px #24100699}.scoreboard div{padding:7px}.scoreboard span{display:block;font-size:.62rem;color:#c5dace;letter-spacing:.08em}.scoreboard strong{display:block;font-size:1.55rem}.scoreboard .stake{background:var(--gold)}.scoreboard .stake span,.scoreboard .stake strong{color:#402500}.table-wrap{position:relative;width:min(850px,100vw);height:calc(100dvh - 70px);min-height:590px;margin:auto;padding-top:52px}.plastic-table{position:relative;width:min(640px,86vw);aspect-ratio:1.12;margin:auto;color:#161411;background:linear-gradient(145deg,#fffdf7,#e9e2d5 52%,#ccc1b0);border:9px solid #e4dccd;border-radius:11%;box-shadow:inset 0 0 0 2px #fff,inset 0 -25px 35px #c9bcaa,0 22px #b7ab98,0 40px 55px #230c04a8}.molded-line{position:absolute;inset:7%;border:2px solid #8879632b;border-radius:8%}.seat{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;min-width:125px;padding:5px 10px 5px 5px;border:2px solid var(--gold);border-radius:999px;background:linear-gradient(#076143,#033d2a);color:#fff;box-shadow:0 6px 14px #2b0e0766}.seat.active{box-shadow:0 0 0 5px #ffcd2e44,0 6px 14px #2b0e0766}.seat>div:nth-child(2){display:grid}.seat strong{font-size:.82rem}.seat small{font-size:.65rem;color:#b4d1c2}.seat .avatar,.seat img{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#eeba28;font-size:1.5rem;object-fit:cover}.opponent{top:0;left:50%;transform:translate(-50%,-50%)}.me{bottom:-25px;left:50%;transform:translateX(-50%)}.card-backs{display:flex}.card-backs i{display:block;width:14px;height:24px;margin-left:-7px;border:1px solid white;border-radius:3px;background:repeating-linear-gradient(45deg,#174c8c 0 3px,#fff 3px 4px)}.vira-area{position:absolute;left:12%;top:36%;display:grid;justify-items:center;color:#765d3c;font-weight:900}.vira-area small{font-size:.6rem}.mini-card,.table-card{position:relative;width:45px;height:64px;padding:4px;background:#fff;border:1px solid #beb7aa;border-radius:6px;box-shadow:0 5px 11px #3c210d4a;font-weight:900}.mini-card b,.table-card b{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem}.red{color:#d61e20}.trick{position:absolute;inset:27% 30%;display:grid;place-items:center}.table-card{position:absolute;width:64px;height:90px;font-size:1rem}.table-card.player-me{transform:translateY(34px) rotate(-4deg)}.table-card.player-them{transform:translateY(-34px) rotate(4deg)}.message{position:absolute;left:50%;bottom:19%;transform:translateX(-50%);min-width:190px;max-width:70%;padding:8px 14px;text-align:center;border-radius:999px;background:#063b2adf;color:#fff;font-size:.78rem;font-weight:850}.hand{position:absolute;z-index:7;left:50%;bottom:42px;transform:translateX(-50%);display:flex;justify-content:center;min-width:300px}.card{position:relative;width:clamp(70px,18vw,94px);height:clamp(102px,25vw,136px);margin-left:-12px;padding:7px;border:1px solid #c9c1b4;border-radius:9px;background:#fff;color:#161616;box-shadow:0 8px 20px #2c0e086b;font-size:1.3rem;font-weight:900;cursor:pointer;transition:.16s}.card b{position:absolute;inset:0;display:grid;place-items:center;font-size:3.2rem}.card.red{color:#d61e20}.card:disabled{filter:brightness(.8);cursor:not-allowed}.card:not(:disabled):hover{transform:translateY(-12px)}.actions{position:absolute;z-index:8;right:max(12px,3vw);bottom:68px}.truco,.next{width:clamp(94px,20vw,132px);min-height:58px;border:3px solid #ff9d79;border-radius:17px;background:linear-gradient(#f34c40,#c31413);color:#fff;box-shadow:inset 0 -5px #860b0b,0 8px 18px #4c0c0a77;font-size:1.1rem;font-weight:1000;cursor:pointer}.truco:disabled{opacity:.5;filter:grayscale(.7)}.next{font-size:.75rem;border-color:#74d1aa;background:linear-gradient(#16855c,#075139);box-shadow:inset 0 -5px #043824,0 8px 18px #041a1177}.raise-dialog{position:absolute;z-index:20;left:50%;top:45%;transform:translate(-50%,-50%);width:min(360px,88vw);padding:22px;text-align:center;background:var(--cream);color:#2f2114;border:5px solid var(--gold);border-radius:22px;box-shadow:0 25px 75px #1e0905b0}.raise-dialog strong{display:block;margin-bottom:15px;font-size:1.2rem}.raise-dialog>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}.raise-dialog button{border:0;border-radius:12px;padding:13px;font-weight:900;cursor:pointer}.raise-dialog .accept{background:#08754e;color:#fff}.toast{position:fixed;z-index:100;left:50%;top:18px;transform:translate(-50%,-15px);padding:10px 17px;border:1px solid var(--gold);border-radius:999px;background:#062c20;color:#fff;font-weight:850;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:600px){.table-wrap{padding-top:70px}.plastic-table{width:90vw}.hand{bottom:60px}.actions{bottom:88px}.message{bottom:15%}}@media(max-height:680px) and (orientation:landscape){.topbar{height:50px}.table-wrap{height:calc(100dvh - 50px);min-height:430px;padding-top:27px}.plastic-table{height:68vh;width:auto}.scoreboard{position:absolute;top:54px;left:50%;transform:translateX(-50%);margin:0;width:280px}.hand{bottom:4px}.actions{bottom:18px}}