:root{--gold:#e7c26c;--cream:#fffdf7;--red:#bd3038}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#06130f;color:#fff;font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select{font:inherit}
.app{min-height:100vh;background:radial-gradient(circle at 50% 30%,#12372b,#06130f 72%)}header{height:78px;padding:10px 25px;display:flex;justify-content:space-between;align-items:center;background:#071713eF;border-bottom:3px solid #9b7134;position:relative;z-index:5}
.eyebrow{font-size:9px;letter-spacing:3px;color:#bda875}h1{margin:0;color:#f1d58e;font:700 30px Georgia;letter-spacing:6px}.top-actions{display:flex;gap:8px}.top-actions input,.top-actions select,.top-actions button{border:1px solid #ffffff20;border-radius:9px;padding:9px 11px}.top-actions input{width:110px}.top-actions button{background:linear-gradient(#efd17e,#c49a48);font-weight:800}
.table{position:relative;min-height:calc(100vh - 78px);max-width:1450px;margin:auto;padding:18px 230px 22px 28px;display:grid;grid-template-rows:170px 1fr 285px;isolation:isolate}
.table:before{content:"";position:absolute;inset:10px 215px 12px 8px;border-radius:46px;z-index:-2;background:radial-gradient(circle,#11805a,#07533d 55%,#033b2b);box-shadow:inset 0 0 80px #001b13aa,0 0 0 10px #321b10,0 0 0 14px #6e3d21,0 18px 50px #0009}
.table:after{content:"";position:absolute;inset:15px 220px 17px 13px;border-radius:40px;z-index:-1;opacity:.13;background:repeating-linear-gradient(35deg,#fff2 0 1px,transparent 1px 5px)}
.pg6-watermark{position:absolute;left:42%;top:43%;transform:translate(-50%,-50%) rotate(-4deg);opacity:.12;text-align:center;pointer-events:none}.pg6-watermark b{display:block;font-size:110px;font-style:italic}.pg6-watermark span{letter-spacing:16px;font-weight:900}
.bots{display:flex;justify-content:space-around;gap:10px}.bot{min-width:170px;text-align:center;background:#061d17c9;border:1px solid #ffffff22;border-radius:15px;padding:8px}.bot.active,.player-zone.active{box-shadow:0 0 0 2px var(--gold),0 0 28px #e7c26c44}.bot-name{font-weight:800;font-size:12px}.bot-cards{display:flex;justify-content:center;height:72px;margin-top:6px}.mini-back{width:43px;height:64px;border:3px solid #eee4cf;border-radius:7px;margin-left:-25px;background:url("baralho-foto.png") center/cover;box-shadow:0 4px 8px #0008}.mini-back:first-child{margin-left:0}
.center-area{display:flex;align-items:center;justify-content:center;gap:38px;position:relative}.status-panel{position:absolute;left:15px;top:5px;max-width:245px;background:#031d16d9;border:1px solid #ffffff1c;border-radius:13px;padding:12px 14px}#turnLabel{color:#f1d17d;font-weight:900;margin-bottom:5px}#message{font-size:12px;color:#d5eae2;line-height:1.4}
.piles{display:flex;gap:25px}.pile{border:0;background:none;color:#fff;cursor:pointer}.pile small{display:block;margin-top:7px;letter-spacing:1px}.pile b{font-size:11px;color:#f1d17d}.photo-back{background:url("baralho-foto.png") center/cover;border:5px solid #f4ead6;border-radius:12px;box-shadow:0 9px 18px #0008,inset 0 0 0 2px #9d773a}.small-back{width:82px;height:116px}
.card{width:82px;height:116px;background:linear-gradient(145deg,#fff,#eee8d8);border:1px solid #d2c6ae;border-radius:9px;color:#111;box-shadow:0 8px 16px #0006;position:relative;user-select:none}.card.red{color:#bd2733}.corner{position:absolute;left:7px;top:5px;font:700 18px Georgia;line-height:16px;text-align:center}.suit-big{height:100%;display:grid;place-items:center;font-size:44px}
.meld-area{min-width:220px;min-height:125px;border:1px dashed #ffffff2a;border-radius:14px;padding:8px}.meld-title{text-align:center;font-size:9px;letter-spacing:2px;color:#bcd4ca}.melds{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px}.meld{display:flex}.meld .card{width:48px;height:68px;margin-left:-10px}.meld .corner{font-size:12px;line-height:11px}.meld .suit-big{font-size:25px}.meld .card:first-child{margin-left:0}
.player-zone{background:#031f18c9;border:1px solid #ffffff20;border-radius:19px;padding:12px 16px}.player-info{display:flex;justify-content:space-between;font-size:12px;color:#d8eee5}.avatar{display:inline-block;width:25px;height:25px;border-radius:50%;vertical-align:middle;margin-right:7px;background:url("baralho-foto.png") center/cover;border:2px solid #d6b663}.hand{height:154px;display:flex;justify-content:center;align-items:flex-end;padding-top:10px}.hand .card{margin-left:-16px;cursor:grab;transition:.15s;touch-action:none}.hand .card:first-child{margin-left:0}.hand .card:hover{transform:translateY(-8px)}.hand .card.selected{transform:translateY(-22px);box-shadow:0 0 0 3px var(--gold),0 12px 20px #0008}.hand .card.dragging{opacity:.55;transform:scale(.96)}
.controls{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.controls button,.rooms button{border:0;border-radius:9px;padding:9px 12px;font-weight:800;cursor:pointer}.secondary{background:#e8e2d3}.danger{background:#b7373d;color:#fff}.success{background:#d9b45a}.blue{background:#276da4;color:#fff}button:disabled{opacity:.4}
.rooms{position:absolute;right:18px;top:96px;width:205px;background:#061a16ef;border:1px solid #9a743c66;border-radius:15px;padding:13px;z-index:3;box-shadow:0 10px 25px #0008}.rooms h3{font-size:13px;color:#e9cc82;margin:0 0 7px}.rooms h3 span{float:right;font-size:9px}.rooms p{font-size:10px;color:#9fb5ad;line-height:1.35}.room{padding:9px 6px;border-top:1px solid #ffffff18}.room b,.room span{display:block;font-size:11px}.room span{color:#8ba89d;margin-top:3px}.rooms button{width:100%;background:#147344;color:white;margin-top:7px}
.modal{position:fixed;inset:0;background:#00130ee6;display:grid;place-items:center;z-index:20}.hidden{display:none}.modal-card{width:min(420px,90vw);background:#fff7e7;color:#1d2924;border-radius:20px;text-align:center;padding:28px}.modal-icon{font-size:55px}.modal-card button{background:#0b6045;color:#fff;border:0;border-radius:9px;padding:11px 20px}
@media(max-width:850px){.rooms{display:none}.table{padding:12px}.table:before{inset:7px}.table:after{inset:12px}.status-panel{position:static;max-width:180px}.card{width:62px;height:92px}.hand .card{margin-left:-25px}.top-actions input{display:none}.pg6-watermark b{font-size:70px}.center-area{gap:10px}.meld-area{min-width:140px}.bots .bot{min-width:90px}.mini-back{width:34px;height:52px;margin-left:-25px}}


.hidden{display:none!important}
.lobby{min-height:calc(100vh - 78px);padding:40px 20px;background:radial-gradient(circle at 50% 20%,#0b684b,#052a20 55%,#03140f)}
.lobby-card{max-width:850px;margin:auto;background:#061d17ef;border:1px solid #b78c4a66;border-radius:22px;padding:24px;box-shadow:0 25px 70px #0008}
.lobby-title{display:flex;gap:14px;align-items:center;border-bottom:1px solid #ffffff16;padding-bottom:18px}.lobby-title>span{font-size:40px}.lobby-title h2{margin:0;color:#f0d184;font:700 29px Georgia}.lobby-title p{margin:4px 0 0;color:#9eb7ad}
.create-box{display:grid;grid-template-columns:1fr 160px 150px;gap:10px;margin:20px 0}.create-box input,.create-box select{border:1px solid #ffffff20;border-radius:10px;padding:12px;background:#fff;color:#222}.create-box button,.lobby-tools button{border:0;border-radius:10px;background:linear-gradient(#1b925d,#0b673f);color:#fff;font-weight:900;padding:11px;cursor:pointer}
.lobby-tools{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.lobby-tools button{padding:7px 10px;font-size:12px}
.room-list{display:grid;gap:9px}.room-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;background:#09271f;border:1px solid #ffffff14;border-radius:13px;padding:13px 15px}.room-item:hover{border-color:#d7b35d88}.room-item b{display:block}.room-item small{color:#91aca2}.room-code{font-family:monospace;color:#e7c26c}.join-btn{border:0;border-radius:9px;background:#246fa4;color:#fff;font-weight:800;padding:9px 13px;cursor:pointer}.loading,.empty{text-align:center;padding:28px;color:#8da69c}
.online-panel{position:absolute;right:18px;top:95px;width:205px;background:#061a16ef;border:1px solid #9a743c66;border-radius:15px;padding:13px;z-index:3;box-shadow:0 10px 25px #0008}.online-panel h3{font-size:13px;color:#e9cc82;margin:0 0 9px}.online-player{padding:8px 4px;border-top:1px solid #ffffff12;font-size:11px}.online-player strong{display:block}.online-player span{color:#91aca2}.host-tag{color:#e8c46e!important}.waiting-box{text-align:center;padding:14px 4px;color:#a9c0b7;font-size:10px}.waiting-box b,.waiting-box span{display:block;margin-top:6px}.waiting-box strong{color:#efd27e}.spinner{width:25px;height:25px;border:3px solid #ffffff25;border-top-color:#e7c26c;border-radius:50%;margin:auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.start-match,.leave{width:100%;border:0;border-radius:9px;padding:10px;font-weight:900;cursor:pointer}.start-match{background:#16834e;color:#fff;margin-bottom:7px}.leave{background:#7d2c2f;color:#fff}.room-badge{position:absolute;left:38px;top:20px;background:#041b15d9;border:1px solid #d3ad5c55;border-radius:10px;padding:7px 10px;font-size:11px;z-index:2}.room-badge span{display:block;color:#e7c26c;font-family:monospace;margin-top:2px}
@media(max-width:850px){.create-box{grid-template-columns:1fr}.online-panel{position:static;width:auto;margin:0 10px 10px}.table{display:block}.bots{min-height:120px}.center-area{min-height:240px}.player-zone{min-height:260px}.room-badge{position:static;display:inline-block;margin:5px 0 10px}}

.attach{
  background:linear-gradient(#7b56c2,#5a3a9d);
  color:#fff;
  box-shadow:inset 0 1px #cdb8ff,0 3px 9px #0004
}

.endgame-card{width:min(920px,94vw);max-height:92vh;overflow:auto;padding:24px 26px 26px}
.revealed-hands{margin-top:18px;display:grid;gap:14px;text-align:left}
.reveal-player{background:#f2ead8;border:1px solid #d5c7a7;border-radius:14px;padding:12px}
.reveal-player.winner{box-shadow:0 0 0 2px #d1a743,0 8px 24px #0002}
.reveal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.reveal-head b{color:#1d2924}.reveal-head span{font-size:11px;color:#7a6847}
.reveal-cards{display:flex;flex-wrap:wrap;gap:6px}
.reveal-cards .card{width:58px;height:82px;box-shadow:0 4px 10px #0003}
.reveal-cards .corner{font-size:13px;line-height:12px}.reveal-cards .suit-big{font-size:30px}
.no-cards{color:#6f654f;font-size:12px;padding:8px 0}
.rematch-status{margin:16px 0 8px;padding:10px 12px;border-radius:10px;background:#efe5ce;color:#594d36;font-size:12px}
.endgame-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.rematch-btn{background:linear-gradient(#1c8a56,#0e6b41)!important;color:#fff!important}
.rematch-btn.voted{background:#5d7564!important;cursor:default}
.lobby-btn{background:#6b5d49!important;color:#fff!important}

.lobby-chat-wrap{margin-top:18px}
.chat-card,.chat-panel{
  background:#061b16ef;border:1px solid #a67f3f55;border-radius:14px;box-shadow:0 12px 28px #0006
}
.chat-card{padding:12px}
.chat-title{display:flex;align-items:center;gap:8px;color:#efd07b;margin-bottom:10px;font-size:14px}
.chat-title.small{padding:10px 12px;margin:0;border-bottom:1px solid #ffffff12}
.chat-messages{
  height:220px;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin
}
.chat-messages.game{height:250px}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start}
.chat-msg.me{align-items:flex-end}
.chat-bubble{
  max-width:88%;padding:8px 10px;border-radius:12px;background:#113c30;color:#eef8f3;font-size:12px;line-height:1.35
}
.chat-msg.me .chat-bubble{background:#1a6c4a}
.chat-meta{font-size:9px;color:#a9c1b8;margin:2px 4px}
.chat-input-row{display:flex;gap:8px;padding:8px;border-top:1px solid #ffffff12}
.chat-input-row input{flex:1;min-width:0;border:1px solid #ffffff18;background:#0a2a21;color:#fff;border-radius:9px;padding:9px}
.chat-input-row button{border:0;border-radius:9px;background:#177a4e;color:#fff;font-weight:800;padding:9px 12px}
.chat-panel{
  position:absolute;right:18px;top:455px;width:205px;overflow:hidden;z-index:3
}
.chat-tabs{display:flex;border-bottom:1px solid #ffffff12}
.chat-tab{flex:1;border:0;background:#08251d;color:#a9c1b8;padding:9px;font-weight:800}
.chat-tab.active{background:#14573c;color:#fff}
@media(max-width:850px){
  .chat-panel{position:static;width:auto;margin:10px}
  .chat-messages.game{height:220px}
}