.social-dock{position:fixed;z-index:35;left:12px;top:50%;transform:translateY(-50%);display:grid;gap:8px}
.social-dock button,.chat-icon-button{border:1px solid #6d59b9;background:#131034ec;color:#eeeaff;border-radius:15px;padding:11px;cursor:pointer;box-shadow:0 8px 24px #03031855;transition:background .2s,transform .2s}
.social-dock button:hover,.chat-icon-button:hover{background:#38236c;transform:translateY(-2px)}
.social-dock button:focus-visible,.room-chat-dialog button:focus-visible{outline:2px solid #31dafa;outline-offset:3px}
.chat-launch{position:relative;display:grid;gap:4px;font-weight:700;font-size:.7rem}.chat-launch svg{width:22px;height:22px;margin:auto}
.chat-unread{position:absolute;right:-5px;top:-7px;background:#e328ae;color:white;border:2px solid #100a29;border-radius:20px;min-width:23px;padding:3px;font-size:.7rem}
.chat-unread[hidden]{display:none}.social-dock .sound-toggle{font-size:.67rem;max-width:68px}
.social-dock button[aria-pressed="false"]{color:#c3bbd5}.social-dock[hidden]{display:none}
dialog.room-chat-dialog{position:fixed;inset:auto;left:12px;top:50%;transform:translateY(-50%);margin:0;width:304px;height:min(660px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);max-width:calc(100vw - 24px);padding:0;border:1px solid #8060c580;background:linear-gradient(155deg,#1a1242,#090a23);border-radius:24px;color:#f5f0ff;box-shadow:0 20px 70px #01010f99,0 0 30px #9938ff16;overflow:hidden;z-index:40}
dialog.room-chat-dialog[open]{display:flex;flex-direction:column;animation:chat-arrive .24s ease-out}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 14px;border-bottom:1px solid #8f77c52b;flex-shrink:0}
.chat-header h2{font-size:1.05rem;margin:0}.chat-header small{display:block;margin-top:4px;color:#b5a6cf;font-size:.7rem}.chat-header small::before{content:'';display:inline-block;width:6px;height:6px;background:#54ebbd;border-radius:50%;margin-right:5px;box-shadow:0 0 8px #54ebbd}
.chat-icon-button{padding:8px 11px;border-radius:11px;box-shadow:none}.chat-tools{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#04021825}
.chat-tools button{flex:1;font-size:.7rem;min-height:36px}.chat-tools button[aria-pressed="true"]{border-color:#3ee2c4;color:#90f5d8}
.chat-voice-status{padding:0 14px 8px;font-size:.68rem;line-height:1.5;color:#bcb3d8}.chat-peer-status{display:flex;justify-content:space-between;gap:6px;margin-top:5px}.chat-peer-status span{padding:4px 8px;background:#ffffff07;border-radius:8px}
#chatMessages{flex:1;min-height:60px;height:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#665092 transparent;padding:14px;gap:12px;scroll-behavior:smooth}
.chat-empty{margin:auto;text-align:center;color:#9386b0;font-size:.8rem;line-height:1.7;padding:20px 6px}.chat-message{align-self:flex-start;max-width:92%;padding:10px 12px;background:#ffffff09;border:1px solid #ffffff0b;border-radius:15px 15px 15px 4px;animation:message-arrive .23s ease-out}
.chat-message.mine{align-self:flex-end;background:linear-gradient(135deg,#42318b9c,#6422918a);border-color:#aa7ffb30;border-radius:15px 15px 4px 15px}
.chat-message strong{display:block;font-size:.7rem;color:#6be5ec;margin-bottom:4px}.chat-message.mine strong{color:#d6bfff}.chat-message p{font-size:.85rem;line-height:1.5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message time{display:block;text-align:right;font-size:.58rem;color:#b2a8c9;margin-top:5px}
#chatForm{margin:0;padding:10px 12px 4px;gap:7px;align-items:center;border-top:1px solid #8f77c52b}
#chatInput{background:#08051c80;border:1px solid #6e51936b;color:#fff;padding:12px;border-radius:13px;font:inherit;font-size:.8rem;width:100%}#chatInput:focus{outline:1px solid #8b72d9}#chatInput::placeholder{color:#9e91b5}
#chatForm button{background:linear-gradient(135deg,#6533ce,#af32d8);border:0;border-radius:12px;padding:11px;color:white;font-size:.8rem;cursor:pointer}
#chatStatus{padding:0 14px;color:#f4bbde;flex-shrink:0}.chat-privacy{padding:2px 14px 12px;margin:0;font-size:.61rem;color:#988ba9;line-height:1.4}
.room-chat-dialog .reaction-panel.visible{order:5;padding:0 14px;margin:0 0 10px;flex-shrink:0}.chat-toast{position:fixed;left:88px;top:50%;transform:translateY(-50%);z-index:45;max-width:min(300px,calc(100vw - 104px));border:1px solid #b575f080;border-radius:18px;padding:13px 16px;background:#1a123df5;color:#eee8ff;text-align:left;box-shadow:0 8px 35px #0006;cursor:pointer;animation:message-arrive .3s ease-out}.chat-toast[hidden]{display:none}.chat-toast strong{display:block;color:#7de6ef;font-size:.75rem;margin-bottom:4px}.chat-toast span{display:block;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.chat-open .social-dock{visibility:hidden}
@media(min-width:1050px){body.chat-open #gameScreen.screen.active{left:328px;right:0;width:calc(100% - 328px);max-width:calc(100% - 328px)}body.chat-open #startScreen.screen.active{left:328px;right:0;width:calc(100% - 328px);max-width:calc(100% - 328px)}}
@media(max-width:1049px){dialog.room-chat-dialog{width:min(340px,calc(100vw - 24px));box-shadow:20px 0 70px #0009}.social-dock{left:6px}.social-dock button{padding:9px}.chat-launch span{font-size:.6rem}.social-dock .sound-toggle{max-width:57px;font-size:.6rem}}
@media(prefers-reduced-motion:reduce){dialog.room-chat-dialog[open],.chat-message,.chat-toast{animation:none}#chatMessages{scroll-behavior:auto}.social-dock button,.chat-icon-button{transition:none}}
@keyframes chat-arrive{from{opacity:0;translate:-22px 0}to{opacity:1;translate:0 0}}
@keyframes message-arrive{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
.played-card{position:relative}.card-like{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);border:1px solid #ff84d6;background:#24113bf2;color:#ffe8fa;border-radius:20px;padding:8px 15px;min-height:36px;white-space:nowrap;font-weight:700;font-size:clamp(.65rem,1.2vw,.9rem);cursor:pointer;box-shadow:0 3px 16px #0006}.card-like[aria-pressed="true"]{background:#a32678;border-color:#ffbeec}.card-like:disabled{cursor:default}.card-like:focus-visible{outline:2px solid #5ee6ff;outline-offset:3px}.match-scores{display:flex;gap:12px;justify-content:center;margin:20px 0;flex-wrap:wrap}.match-scores>div{display:grid;gap:10px;min-width:min(160px,100%);padding:18px;border:1px solid #a474e780;border-radius:18px;background:#9f45e71c}.match-scores span{color:#e67dca;font-size:1.15rem}#resultFinishBtn[hidden]{display:none}#resultReplayBtn,#resultFinishBtn{margin:6px;max-width:100%;white-space:normal}
.chat-inline-unread{display:inline-block;background:#ca2e9b;border-radius:12px;padding:2px 5px;color:white;font-size:.65rem}.chat-inline-unread[hidden]{display:none}.voice-strip>[data-chat-sound]{font-size:clamp(.58rem,1vw,.8rem);font-weight:700}
#resultScreen.match-summary .result-container{background:linear-gradient(145deg,#19103b,#0b0b28);border:1px solid #8b55e7;color:#f2ecff;box-shadow:0 0 50px #7b2bba38}#resultScreen.match-summary h1{color:#fff;text-shadow:0 0 25px #ad5de788}#resultScreen.match-summary p,#resultScreen.match-summary .match-scores strong{color:#d6cde8}#resultScreen.match-summary .match-scores span{color:#fa9cdc}
@media(max-width:1049px){body:has(#gameScreen.active) .chat-toast{top:110px;left:12px;transform:none;max-width:calc(100vw - 24px)}body:not(.chat-open) .game-screen.multiplayer-room .played-cards-container{padding-inline-start:70px}}
.social-dock .chat-launch.has-unread,.voice-chat.has-unread{border-color:#e17cff;box-shadow:0 0 12px #d549f780,inset 0 0 12px #b633ed26;animation:unread-glow 2.4s ease-in-out infinite}
.chat-launch.has-unread svg,.voice-chat.has-unread .voice-chat-title{color:#f3b6ff}
@keyframes unread-glow{0%,100%{box-shadow:0 0 9px #d549f766,inset 0 0 8px #b633ed1a}50%{box-shadow:0 0 22px #d549f7a6,inset 0 0 14px #b633ed38}}
@media(prefers-reduced-motion:reduce){.social-dock .chat-launch.has-unread,.voice-chat.has-unread{animation:none;box-shadow:0 0 14px #d549f780}}
.card-item.selected{transform:translateY(-6px) scale(1.045);z-index:4;box-shadow:0 0 0 2px #ffe06670,0 6px 18px #0006}.card-item.selected::after{display:none}
@media(hover:hover) and (pointer:fine){.card-item:hover{transform:translateY(-4px) scale(1.035);z-index:3}.card-item.selected:hover{transform:translateY(-6px) scale(1.045);z-index:4}}
@media(prefers-reduced-motion:reduce){.card-item{transition:none}}
#roomRoundControls{position:fixed;z-index:30;right:calc(6px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:none;flex-direction:column;align-items:flex-end;gap:6px;width:max-content;max-width:76px;padding:0;margin:0;background:none;border:0;box-shadow:none}
body:has(#gameScreen.active :is(.multiplayer-room,.bot-room)) #roomRoundControls{display:flex}
#roomRoundControls button{max-width:100%;white-space:normal;padding:3px 6px;font-size:.625rem;line-height:1.2}
#roomRoundControls #continueRoundBtn{background:#17464d;border-color:#4edbc6;color:#c8fff1}
#roomRoundControls #finishGameBtn{background:#542143;border-color:#df78ac;color:#ffe1ef}
#roomRoundControls button:enabled:hover{filter:brightness(1.15)}
#roomRoundControls #continueRoundBtn{display:block}
#roomRoundControls button:focus-visible{outline:2px solid #60e4ff;outline-offset:3px}
.game-screen.multiplayer-room .think-pill{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.game-screen:is(.multiplayer-room,.bot-room) .played-cards-container{padding-inline-end:82px}}
@media(min-width:901px) and (max-width:1049px){.game-screen:is(.multiplayer-room,.bot-room) .played-cards-container{padding-inline-end:12px}}
.ui-icon{width:20px;height:20px;display:inline-block;flex-shrink:0;vertical-align:middle;pointer-events:none}
#cardPreview,#cardPreview[open]{display:none!important}
#voiceToggleBtn,#chatMicBtn,[data-chat-sound]{display:inline-flex;align-items:center;justify-content:center;gap:7px}
[data-chat-sound] .ui-icon{width:17px;height:17px}.social-dock [data-chat-sound]{flex-direction:column;gap:5px}
#footerMicBtn.push-talk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:auto;touch-action:manipulation;min-width:62px;min-height:44px;border:1px solid #8f68c080;background:linear-gradient(145deg,#28204b,#100d2c);color:#cfc4e8;border-radius:15px;cursor:pointer;position:static;box-shadow:0 3px 14px #0003;font:inherit;font-weight:700}
#footerMicBtn .ui-icon{width:23px;height:23px}#footerMicBtn .mic-label{font-size:.62rem;line-height:1.15;white-space:normal;text-align:center;pointer-events:none;color:inherit}
#footerMicBtn.mic-on{border-color:#54dabd;color:#8bf7da;background:linear-gradient(145deg,#183e43,#10182c);box-shadow:0 0 15px #3cbf9925}
#footerMicBtn.mic-off{border-color:#a879c3;color:#d7c8e8}#footerMicBtn:enabled:hover{border-color:#b0a0ff;background:#302351}
#footerMicBtn:disabled,#voiceToggleBtn:disabled,#chatMicBtn:disabled{opacity:.5;cursor:default}#footerMicBtn:focus-visible{outline:2px solid #54deff;outline-offset:3px}
.game-mic-btn .ui-icon,.sfx-toggle-btn .ui-icon{width:21px;height:21px}.reaction-mic-btn .ui-icon{width:23px;height:23px}.game-mic-btn.mic-off{opacity:1;color:#bdb1d4}.mic-status-item .ui-icon{width:15px;height:15px}
.voice-strip .report-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.report-action .ui-icon{width:21px;height:21px}
.voice-strip>[data-chat-sound]{flex-direction:column;gap:3px}.voice-strip>[data-chat-sound] span{font-size:inherit;line-height:1.15;text-align:center}
@media(max-width:540px){#footerMicBtn.push-talk{min-width:49px;padding:4px}#footerMicBtn .ui-icon{width:20px;height:20px}#footerMicBtn .mic-label{font-size:.53rem}.voice-strip>[data-chat-sound] .ui-icon{width:16px;height:16px}}
@media(max-height:500px){.game-screen,.game-screen.deck-open{--hand-space:114px;grid-template-rows:36px 18px minmax(0,1fr) var(--hand-space) 52px}}
@media(max-height:500px){.card-like{padding:5px 7px;min-height:32px}.card-like .like-label{display:none}}
@media(max-height:380px){.game-screen,.game-screen.deck-open{--hand-space:76px}}
@media(max-height:380px){
 .hand-section,.hand-section.deck-collapsed,.game-screen.deck-open .hand-section{grid-template-rows:18px minmax(0,1fr);gap:2px}
 .player-hand,.game-screen.deck-open .player-hand{padding:6px 4px 2px}
}
@media(max-height:500px){
 .room-chat-dialog .chat-header{padding:8px 12px}.chat-header h2{font-size:.95rem}.chat-header small{font-size:.6rem;margin-top:2px}
 .room-chat-dialog .chat-tools{padding:6px 10px}.chat-tools button{min-height:32px;padding:6px;font-size:.64rem}
 .room-chat-dialog .chat-voice-status{padding:0 12px 5px;font-size:.61rem}.chat-peer-status{margin-top:2px}.chat-peer-status span{padding:2px 6px}
 #chatMessages{min-height:0;padding:6px 12px;gap:7px}#chatMessages .chat-empty{padding:4px;font-size:.7rem}
 #chatForm{padding:6px 10px 3px}#chatInput{padding:9px}#chatForm button{padding:9px;font-size:.72rem}
 #chatStatus:empty{display:none}.chat-privacy{padding:2px 12px 7px;font-size:.57rem}.room-chat-dialog .reaction-panel.visible{display:none}
}