.played-card.player-0{left:calc(50% - 30px);top:calc(50% + 12px)}
.played-card.player-1{left:calc(50% - 103px);top:calc(50% - 3px)}
.played-card.player-2{left:calc(50% - 30px);top:calc(50% - 90px)}
.played-card.player-3{left:calc(50% + 43px);top:calc(50% - 3px)}
.seat.active-seat .avatar,.player-bar.active-seat .avatar{box-shadow:0 0 0 3px #e2cb88aa,0 0 18px #e2cb8866}
.player-mode{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1px;color:#829087;font-weight:700}
.player-mode select{border:1px solid #ddd9cc;background:#fff;color:#31463b;border-radius:3px;padding:7px 9px;font:600 10px 'DM Sans';cursor:pointer}
.online-button{border:1px solid #c9b980;background:#f7f4e9;color:#6f633e;padding:9px 12px;border-radius:4px;font:600 10px 'DM Sans';cursor:pointer}
.online-button:hover{background:#efe9d6}
.online-button.disconnected{border-color:#c47769;background:#fbefec;color:#985849}
#online-backdrop{grid-template-columns:minmax(0,1fr)}
.online-modal{width:min(560px,calc(100vw - 40px));min-width:0;max-width:560px;max-height:min(90vh,760px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.online-description{margin-bottom:16px!important}
.online-modal [hidden]{display:none!important}
.online-modal > .modal-close{z-index:2}
.return-to-room-button,.return-to-lobby-button{border:1px solid #ddd8ca;border-radius:4px;background:#f5f2e9;padding:8px 11px;color:#667467;font:600 9px 'DM Sans';cursor:pointer}
.return-to-room-button{margin:0 0 12px}
.return-to-lobby-button{margin:0 0 12px}
.return-to-room-button:hover,.return-to-lobby-button:hover{border-color:#b49a5c;background:#f9f6ed;color:#435b49}
.online-create-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;align-items:end;gap:9px;margin-top:11px}
.online-create-row .confirm-button{height:38px;min-width:78px}
.online-entry-fee-row{margin-top:10px;padding:8px 10px;border:1px solid #e8e5dc;border-radius:4px;background:#fbfaf6;color:#68766d;font:500 9px/1.5 'DM Sans',sans-serif}
.quick-match-button{width:100%;margin-top:9px;background:#4f7058}
.quick-match-button:hover{background:#415f4a}
.online-lobby-tabs{display:flex;gap:5px;border-bottom:1px solid #e8e5dc;margin:18px 0 11px}
.online-lobby-tab{position:relative;border:0;background:transparent;padding:9px 11px;color:#849087;font:600 10px 'DM Sans';cursor:pointer}
.online-lobby-tab.active{color:#31483b}
.online-lobby-tab.active:after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:#b49a5c}
.online-lobby-tab span{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:3px;border-radius:9px;background:#eeece3;color:#69786e;font-size:8px}
.online-lobby-panel{min-height:120px}
.online-list-heading{display:flex;justify-content:space-between;align-items:center;margin:3px 0 8px}
.online-list-heading strong,.online-list-heading small{display:block}.online-list-heading strong{font-size:10px;color:#44594c}.online-list-heading small{font-size:8px;color:#99a097;margin-top:3px}
.refresh-rooms-button{width:28px;height:28px;border:1px solid #e3e0d6;border-radius:50%;background:#fff;color:#65756a;font-size:17px;cursor:pointer;transition:transform .2s}
.refresh-rooms-button:disabled{opacity:.6;cursor:wait}.refresh-rooms-button.refreshing{transform:rotate(180deg)}
.public-room-list,.friend-list{display:flex;flex-direction:column;gap:6px;max-height:142px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lobby-empty{margin:0;padding:12px 10px;border:1px dashed #e2dfd5;border-radius:4px;color:#929a90;font-size:9px;line-height:1.5}
.public-refresh-status{min-height:0;margin:4px 0 0;color:#9b7451;font-size:8px;line-height:1.4}
.public-refresh-status:empty{display:none}
.lobby-error{color:#a45a4e}
.public-room-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid #e9e6dd;border-radius:4px;background:#fff}
.public-room-details{display:flex;min-width:0;flex-direction:column;gap:4px}.public-room-details strong{overflow:hidden;color:#405549;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.public-room-details span{color:#929a90;font-size:8px}
.room-join-button,.friend-invite-button{flex:none;border:1px solid #d8d2bd;border-radius:4px;background:#f8f6ee;padding:7px 9px;color:#6c603f;font:600 9px 'DM Sans';cursor:pointer}.room-join-button:hover,.friend-invite-button:hover{background:#efead8}
.friends-panel{padding-top:3px}.friends-note{margin:0 0 11px;color:#858f84;font-size:9px;line-height:1.55}
.friend-add-form{display:flex;align-items:end;gap:8px;margin-bottom:10px}.friend-add-form .online-field input{height:36px}.friend-add-form .confirm-button{height:36px;padding:8px 14px}
.friend-row{display:grid;grid-template-columns:minmax(70px,1fr) auto auto;align-items:center;gap:7px;padding:7px 8px;border:1px solid #e9e6dd;border-radius:4px;background:#fff}.friend-row>strong{overflow:hidden;color:#405549;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.friend-remove-button{border:0;background:transparent;padding:6px 3px;color:#929a90;font:500 8px 'DM Sans';cursor:pointer}.friend-remove-button:hover{color:#a45a4e}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.online-modal :is(button,input,select):focus-visible{outline:2px solid #b49a5c;outline-offset:2px}
.online-create-row .confirm-button:disabled,.online-lobby-actions .confirm-button:disabled{opacity:.55;cursor:wait}
.online-field{display:flex;min-width:0;flex-direction:column;gap:6px;flex:1;font-size:9px;letter-spacing:.7px;font-weight:700;color:#78837a}
.online-field input,.online-field select{width:100%;min-width:0;height:38px;border:1px solid #dedbd2;border-radius:4px;background:#fff;padding:0 10px;font:500 11px 'DM Sans';color:#30443a;letter-spacing:0}
.online-lobby-actions{display:flex;align-items:flex-end;gap:10px}
.online-lobby-actions .confirm-button{height:38px}
.online-divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:#a3a69d;font-size:8px;letter-spacing:1.4px}
.online-divider:before,.online-divider:after{content:'';height:1px;background:#e8e5dc;flex:1}
.join-row .confirm-button{min-width:95px}
.room-code-row{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;background:#efeee6;border-radius:5px}
.room-code-row small,.room-code-row strong{display:block}.room-code-row small{font-size:8px;letter-spacing:1.3px;color:#8f978b}.room-code-row strong{font:700 24px 'DM Sans';letter-spacing:5px;color:#354a3e;margin-top:5px}
.copy-code-button{border:1px solid #d8d4c8;background:#fff;border-radius:4px;padding:8px 10px;font:600 9px 'DM Sans';color:#627268;cursor:pointer}
.room-status{font-size:11px;color:#596d5f;margin:15px 0 10px}
.room-player-list{display:flex;flex-direction:column;gap:6px}
.room-player{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #ebe8df;border-radius:4px;font-size:10px;color:#43584a}
.room-player .room-seat{font-size:8px;color:#a08b54;margin-left:auto;letter-spacing:.8px}
.room-player .room-dot{width:7px;height:7px;border-radius:50%;background:#7caa7a}
.room-player.disconnected{color:#969990;background:#f8f7f2}.room-player.disconnected .room-dot{background:#c47769;box-shadow:0 0 0 3px #c4776920}
.seat.seat-disconnected .avatar{filter:grayscale(1);opacity:.58}
.room-player.empty{color:#a2a79e;border-style:dashed}.room-player.empty .room-dot{background:#d7d6ce}
.room-start-button{width:100%;margin-top:14px;height:38px}
.room-footnote{font-size:9px;color:#9aa097;margin:10px 0 0}
.online-error{color:#b94d43;font-size:10px;min-height:14px;margin:10px 0 0}
.chat-toggle{position:fixed;z-index:8;right:24px;bottom:22px;border:0;border-radius:24px;background:#172c28;color:#fff;padding:12px 17px;font:600 11px 'DM Sans';box-shadow:0 7px 20px #102c2840;cursor:pointer}
.chat-toggle span{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:5px;border-radius:9px;background:#c5a35b;color:#172c28;font-size:9px}
.chat-toggle span:empty{display:none}
.chat-panel{position:fixed;z-index:9;right:24px;bottom:75px;width:min(340px,calc(100vw - 28px));height:min(450px,calc(100vh - 110px));display:flex;flex-direction:column;background:#fbfaf5;border:1px solid #e4e0d5;border-radius:7px;box-shadow:0 15px 45px #11241b30;overflow:hidden}
.chat-panel[hidden],.chat-toggle[hidden]{display:none}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;background:#173d34;color:white}
.chat-header strong,.chat-header small{display:block}.chat-header strong{font:600 12px 'DM Sans'}.chat-header small{font-size:8px;letter-spacing:1px;color:#c0d0c8;margin-top:4px}.chat-header button{border:0;background:none;color:white;font-size:21px;cursor:pointer}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.chat-message{font-size:10px;line-height:1.5;color:#536259;overflow-wrap:anywhere}.chat-message strong{color:#31483b;font-size:9px}.chat-message time{font-size:8px;color:#a1a69e;margin-left:6px}
.chat-form{display:flex;gap:6px;padding:9px;border-top:1px solid #e8e5dc}.chat-form input{flex:1;min-width:0;border:1px solid #dfddd4;border-radius:4px;padding:9px;font:10px 'DM Sans'}.chat-form button{width:36px;border:0;border-radius:4px;background:#173d34;color:#fff;cursor:pointer}
.opponent-seats{display:contents}
.seat.seat-left-low{left:11%;top:68%;transform:translateY(-50%)}
.seat.seat-left-high{left:11%;top:30%;transform:translateY(-50%)}
.seat.seat-right-high{right:11%;top:30%;transform:translateY(-50%)}
.seat.seat-right-low{right:11%;top:68%;transform:translateY(-50%)}
.seat-name-row{display:flex;align-items:center;gap:5px}
.seat-royal-icon{display:inline-grid;place-items:center;width:21px;height:21px;flex:0 0 21px;border:1px solid #e3cb84;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fffbe6,#f2dda2);color:#775d20;font-size:14px;line-height:1;box-shadow:0 1px 7px #091b1455,0 0 0 2px #eddaa333}
.player-bar .seat-meta .seat-royal-icon{color:#775d20;font-size:14px}
.seat-royal-icon[hidden]{display:none}
.dog-pile.dog-revealed{z-index:5;bottom:10px;width:auto;min-width:230px;max-width:calc(100% - 36px);height:auto;gap:6px;padding:7px 10px;border:1px solid #e5d39a;border-radius:10px;background:linear-gradient(145deg,#fffdf4f5,#e8dfc9f5);color:#384a3b;box-shadow:0 7px 22px #07181166;transform:translateX(-50%)}
.dog-pile-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.dog-pile-heading b{font-size:8px;letter-spacing:.7px}
.dog-pile-heading small{font-size:7px;color:#798174}
.dog-reveal-cards{display:flex;align-items:center;justify-content:center;gap:5px;width:100%}
.dog-reveal-cards>.card{width:35px;height:51px;min-width:35px;flex:0 0 35px;margin:0;border-radius:5px;box-shadow:0 2px 5px #14251d28}
.dog-reveal-cards .card-corner,.dog-reveal-cards .card-bottom{top:3px;left:3px;right:3px;bottom:3px;font-size:7px}
.dog-reveal-cards .card-corner em,.dog-reveal-cards .card-bottom em{font-size:6px}
.dog-reveal-cards .card-pips{inset:12px 3px}
.dog-reveal-cards .card-pips i{font-size:7px}
.dog-reveal-cards .card-pips-1 i{font-size:15px}
.dog-reveal-cards .card-center{width:23px;height:23px;font-size:14px}
.dog-reveal-cards .card-caption{bottom:7px;font-size:4px}
.dog-reveal-cards .card-court-suit{bottom:16px;font-size:11px}

@media(max-width:760px){
  .call-button{min-width:140px;min-height:62px;gap:6px}
  .call-card-copy strong{font-size:8px}
  .call-card-copy small{font-size:7px}
  .call-card-copy{gap:2px}
  .call-card-copy small{display:none}
  .call-card-preview{flex-basis:30px;height:45px}
  .call-card-preview>.card{width:30px;height:45px}
  .call-card-preview .card-center{width:20px;height:20px;font-size:12px}
  .dog-pile.dog-revealed{bottom:9px;min-width:0;padding:6px 7px}
  .dog-pile-heading{gap:4px}
  .dog-pile-heading b{font-size:7px}
  .dog-pile-heading small{font-size:6px;text-align:right}
  .dog-reveal-cards{gap:3px}
  .dog-reveal-cards>.card{width:31px;height:46px;min-width:31px;flex-basis:31px}
}
.call-actions{display:none;align-items:center;gap:6px}
.call-button{display:flex;align-items:center;gap:10px;min-width:190px;min-height:72px;padding:7px 9px;border:1px solid #d8c78f;border-radius:7px;background:linear-gradient(145deg,#fffdf5,#f4edd9);color:#34493d;cursor:pointer;font:600 9px 'DM Sans';white-space:normal;text-align:left;box-shadow:0 3px 10px #16271d16;transition:transform .18s,box-shadow .18s,border-color .18s}
.call-button:hover{transform:translateY(-2px);border-color:#a98a43;background:#fff9e8;box-shadow:0 6px 14px #16271d22}
.call-card-preview{display:block;flex:0 0 38px;height:58px;pointer-events:none}
.call-card-preview>.card{width:38px;height:58px;min-width:0;margin:0;border-radius:5px}
.call-card-preview .card-pips{inset:12px 4px}
.call-card-preview .card-corner,.call-card-preview .card-bottom{top:3px;left:3px;right:3px;bottom:3px;font-size:7px}
.call-card-preview .card-center{width:25px;height:25px;font-size:15px}
.call-card-preview .card-caption{bottom:8px;font-size:4px}
.call-card-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.call-card-copy strong{font-size:10px}
.call-card-copy small{color:#788276;font-size:8px;line-height:1.35;white-space:normal}
.call-action-intro{flex:1 0 100%;color:#516453;font-size:9px;font-weight:600;line-height:1.4;text-align:center}
.call-button:hover{border-color:#bba260;background:#faf8f0}
.played-card.pos-bottom{left:calc(50% - 30px);top:calc(50% + 12px)}
.played-card.pos-left,.played-card.pos-left-low{left:calc(50% - 103px);top:calc(50% - 3px)}
.played-card.pos-top{left:calc(50% - 30px);top:calc(50% - 90px)}
.played-card.pos-right,.played-card.pos-right-low{left:calc(50% + 43px);top:calc(50% - 3px)}
.played-card.pos-left-high{left:calc(50% - 90px);top:calc(50% - 80px)}
.played-card.pos-right-high{left:calc(50% + 30px);top:calc(50% - 80px)}
.bid-button:disabled{border-color:#e5e1d6;background:#f2f0ea;color:#9a9d93;opacity:.68;cursor:not-allowed;box-shadow:none}
.bid-button:disabled small{color:#aaa58f}
@media(max-width:760px){
  #online-backdrop:not([hidden]){display:flex;align-items:center;justify-content:center;padding:12px}
  .online-modal{width:calc(100vw - 24px);max-width:560px;max-height:calc(100dvh - 24px);padding:21px 18px;flex:0 1 auto}
  .room-code-row{gap:8px;padding-inline:10px}.room-code-row>div{min-width:0}.room-code-row strong{font-size:clamp(16px,5vw,20px);letter-spacing:clamp(2px,1vw,4px)}.copy-code-button{flex-shrink:0;white-space:nowrap}
  .return-to-room-button,.return-to-lobby-button{min-height:36px}
  .online-create-row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:7px}
  .online-create-row .confirm-button{min-width:60px;padding:8px 10px}
  .public-room-list,.friend-list{max-height:120px}
  .friend-row{grid-template-columns:minmax(58px,1fr) auto auto;gap:4px;padding:6px}
  .friend-invite-button{padding:7px 6px;font-size:8px}
  .player-mode{font-size:0;gap:4px}.player-mode select{padding:6px}
  .online-button{padding:8px 9px;font-size:9px}
  .played-card.player-0{left:calc(50% - 26px);top:calc(50% + 8px)}
  .played-card.player-1{left:calc(50% - 80px);top:calc(50% - 2px)}
  .played-card.player-2{left:calc(50% - 26px);top:calc(50% - 74px)}
  .played-card.player-3{left:calc(50% + 28px);top:calc(50% - 2px)}
  .played-card.pos-bottom{left:calc(50% - 26px);top:calc(50% + 8px)}
  .played-card.pos-left,.played-card.pos-left-low{left:calc(50% - 80px);top:calc(50% - 2px)}
  .played-card.pos-top{left:calc(50% - 26px);top:calc(50% - 74px)}
  .played-card.pos-right,.played-card.pos-right-low{left:calc(50% + 28px);top:calc(50% - 2px)}
  .played-card.pos-left-high{left:calc(50% - 80px);top:calc(50% - 70px)}
  .played-card.pos-right-high{left:calc(50% + 28px);top:calc(50% - 70px)}
  .seat.seat-left-low{left:4%;top:67%}.seat.seat-left-high{left:4%;top:29%}
  .seat.seat-right-high{right:4%;top:29%}.seat.seat-right-low{right:4%;top:67%}
  .chat-toggle{right:14px;bottom:14px}.chat-panel{right:14px;bottom:65px}
}