.home-page{box-sizing:border-box;background:#0f6b38;justify-content:center;align-items:center;min-height:100dvh;padding:20px;display:flex}.home-card{text-align:center;background:#fff;border-radius:25px;width:min(420px,100%);padding:30px 20px;box-shadow:0 15px 40px #00000059}.logo{font-size:70px}.home-card h1{color:#14532d;margin:5px;font-size:32px}.subtitle{color:#666;margin-bottom:30px}.home-card input{box-sizing:border-box;border:2px solid #ddd;border-radius:12px;width:100%;margin-bottom:15px;padding:15px;font-size:16px}.home-card input:focus{border-color:#15803d;outline:none}.home-card button{color:#fff;cursor:pointer;border:none;border-radius:14px;width:100%;padding:15px;font-size:18px;font-weight:700}.create-btn{background:#15803d}.create-btn:hover{background:#166534}.join-btn{background:#1d4ed8}.join-btn:hover{background:#1e40af}.divider{color:#888;margin:15px;font-weight:700}@media (width<=480px){.home-card{padding:25px 15px}.logo{font-size:55px}.home-card h1{font-size:26px}}.lobby-page{color:#fff;text-align:center;background:#0f6b38;min-height:100vh;padding:20px}.lobby-table{max-width:900px;height:650px;margin:20px auto auto;position:relative}.center-info{color:#14532d;background:#fff;border-radius:20px;width:250px;padding:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 25px #0000004d}.center-info h1{margin:5px;font-size:36px}.waiting{color:#856404;background:#fff3cd;border-radius:10px;margin-top:15px;padding:10px}.ready{color:#166534;background:#dcfce7;border-radius:10px;margin-top:15px;padding:10px}.l1{position:absolute;top:50%;left:0;transform:translateY(-50%)}.l2{position:absolute;top:0;left:20%}.l3{position:absolute;top:0;right:20%}.l4{position:absolute;top:50%;right:0;transform:translateY(-50%)}.l5{position:absolute;bottom:0;right:20%}.l6{position:absolute;bottom:0;left:20%}@media (width<=768px){.lobby-table{flex-direction:column;align-items:center;gap:12px;height:auto;display:flex}.l1,.l2,.l3,.l4,.l5,.l6,.center-info{position:static;transform:none}.center-info{width:100%;max-width:350px}}.player-seat{color:#fff;text-align:center;box-sizing:border-box;background:#14532d;border:2px solid #2b8a57;border-radius:10px;width:78px;min-height:58px;padding:4px;transition:all .2s}.current-turn{border-color:gold;box-shadow:0 0 8px gold}.avatar{font-size:18px;line-height:18px}.player-name{white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;font-weight:700;overflow:hidden}.card-count{opacity:.85;font-size:10px}.turn-indicator{color:#000;background:gold;border-radius:5px;margin-top:3px;padding:2px;font-size:9px;font-weight:700}body{background:#0f6b38;margin:0;font-family:Arial,Helvetica,sans-serif}.game-page{background:#0f6b38;flex-direction:column;min-height:100vh;display:flex;overflow:hidden}.game-header{padding:6px 10px}.game-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:15px 15px 120px;display:flex;overflow:hidden}.table-grid{flex:1;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;place-items:center;width:100%;min-height:550px;display:grid}.seat-top-left{grid-area:1/1}.seat-top-right{grid-area:1/3}.seat-left{grid-area:2/1}.table-center{grid-area:2/2}.seat-right{grid-area:2/3}.seat-bottom-left{grid-area:3/1}.seat-bottom-right{grid-area:3/3}.hand-container{z-index:999;background:#14532d;border-top:3px solid #0d4424;align-content:center;padding:2px 10px;position:fixed;bottom:0;left:0;right:0}.hand-title{color:#fff;margin-bottom:6px;font-size:14px;font-weight:700}.hand-area{scrollbar-width:none;gap:6px;padding-bottom:4px;display:flex;overflow:auto hidden}.hand-area::-webkit-scrollbar{display:none}@media (width>=900px){.game-content{flex-direction:row;align-items:flex-start}.player-area{flex:2}.trick-area{flex:1}}@media (width<=768px){.table-grid{flex-direction:column;gap:15px;display:flex}}.playing-card{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #333;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:center;width:48px;height:32px;margin-right:-18px;padding:6px;font-weight:700;transition:all .2s;display:flex}.red{color:#d32f2f}.black{color:#111}.card-suit{font-size:18px}.card-rank{font-size:13px}.bid-page{box-sizing:border-box;background:#0f6b38;justify-content:center;align-items:center;min-height:100dvh;padding:12px;display:flex}.bid-card{box-sizing:border-box;text-align:center;background:#fff;border-radius:20px;width:min(430px,100%);padding:18px;box-shadow:0 10px 30px #0000004d}.bid-card h1{color:#14532d;margin:5px}.bid-info{background:#f1f5f9;border-radius:12px;margin:15px 0;padding:12px}.bid-info span{color:#666;display:block}.bid-info strong{color:#14532d;font-size:45px}.turn-box{color:#166534;background:#dcfce7;border-radius:12px;margin-bottom:15px;padding:12px;font-weight:700}.waiting-box{background:#f1f5f9;border-radius:12px;flex-direction:column;gap:5px;padding:20px;display:flex}.bid-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.bid-grid button{color:#fff;border:none;border-radius:15px;height:65px;font-size:22px;font-weight:700}.bid{background:#15803d}.bid:hover{background:#166534}.pass{background:#dc2626}.pass:hover{background:#b91c1c}@media (width<=480px){.bid-card{padding:14px}.bid-grid button{height:55px;font-size:18px}.bid-info strong{font-size:38px}}.trump-page{box-sizing:border-box;background:#0f6b38;justify-content:center;align-items:center;min-height:100dvh;padding:12px;display:flex}.trump-card{box-sizing:border-box;text-align:center;background:#fff;border-radius:20px;width:min(430px,100%);padding:18px;box-shadow:0 10px 30px #0000004d}.trump-card h1{color:#14532d;margin:5px}.declarer-box{background:#f1f5f9;border-radius:12px;margin:15px 0;padding:12px}.declarer-box strong{color:#14532d;margin-top:5px;display:block}.suit-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.suit-grid button{cursor:pointer;color:#fff;border:none;border-radius:15px;height:75px;font-size:18px;font-weight:700}.suit-grid span{font-size:32px;display:block}.Hearts{background:#dc2626}.Diamonds{background:#ea580c}.Clubs{background:#14532d}.Spades{background:#1e3a8a}.waiting-box{background:#f1f5f9;border-radius:12px;padding:20px}.my-hand{border-top:1px solid #ddd;margin-top:20px;padding-top:10px}.hand-row{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.hand-row::-webkit-scrollbar{display:none}@media (width<=480px){.trump-card{padding:14px}.suit-grid button{height:65px;font-size:16px}}.score-board{color:#fff;background:#0d4d2b;border:2px solid #fff3;border-radius:15px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:15px;padding:8px;display:flex;box-shadow:0 4px 12px #0000004d}.score-item{background:#ffffff14;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-width:70px;padding:6px 8px;display:flex}.title{color:#d8d8d8;margin-bottom:3px;font-size:10px}.value{font-size:18px;font-weight:700}.small{font-size:13px}.scoreA{background:#156f3c}.scoreB{background:#1f5cbf}@media (width<=700px){.score-board{gap:6px;padding:6px}.score-item{min-width:60px;padding:5px}.title{font-size:9px}.value{font-size:15px}.small{font-size:11px}}.trick-table{background:#0c5b31;border:2px solid #ffffff26;border-radius:50%;width:180px;height:180px;position:relative}.played-card{position:absolute}.top{top:0;left:50%;transform:translate(-50%)}.left{top:50%;left:0;transform:translateY(-50%)}.right{top:50%;right:0;transform:translateY(-50%)}.bottom{bottom:0;left:50%;transform:translate(-50%)}.bottom-left{bottom:18%;left:20%}.bottom-right{bottom:18%;right:20%}.table-layout{flex:1;grid-template-rows:.7fr .8fr 1fr .8fr .7fr;grid-template-columns:1fr 1fr 1fr;place-items:center;width:100%;max-width:900px;margin:auto;display:grid}.p2{grid-area:1/2}.p1{grid-area:2/1}.p3{grid-area:2/3}.center{grid-area:3/2}.p6{grid-area:4/1}.p4{grid-area:4/3}.you{grid-area:5/2}@media (width<=700px){.table-layout{grid-template-rows:auto auto auto 220px auto auto;grid-template-columns:1fr 1fr;max-width:100%}.p2{grid-area:1/1/auto/3}.p1{grid-area:2/1}.p3{grid-area:2/2}.center{grid-area:4/1/auto/3}.p6{grid-area:5/1}.p4{grid-area:5/2}.you{grid-area:6/1/auto/3}}.result-overlay{z-index:999;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.result-card{text-align:center;background:#fff;border-radius:20px;width:min(92vw,420px);padding:24px;box-shadow:0 15px 40px #00000073}.result-card h1{color:#0f6b38;margin:0}.result-card h2{color:#444;margin-top:20px}.winner-name{color:#f59e0b;margin-bottom:20px;font-size:28px;font-weight:700}.result-grid{grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;display:grid}.result-grid div{background:#f3f4f6;border-radius:10px;padding:12px}.result-grid span{color:#666;font-size:13px;display:block}.result-grid strong{color:#111;font-size:20px}.next-round-btn{color:#fff;cursor:pointer;background:#16a34a;border:none;border-radius:12px;width:100%;padding:15px;font-size:18px;transition:all .2s}.next-round-btn:hover{background:#15803d}.playing-card{cursor:pointer;background:#fff;border:2px solid #222;border-radius:5px;flex-direction:column;justify-content:space-between;align-items:center;width:48px;height:72px;margin:6px;font-size:20px;font-weight:700;transition:all .2s;display:flex}.playing-card:hover{transform:translateY(-8px);box-shadow:0 6px 12px #00000040}.playing-card.red{color:#d62828}.playing-card.black{color:#111}.rank{margin-top:8px}.suit{margin-bottom:8px;font-size:32px}.playing-card:disabled{opacity:.5;cursor:not-allowed}