/* Full-viewport table and compact floating controls. */
.game-shell>.topbar{height:0;padding:0;border:0;background:none;box-shadow:none;position:relative;z-index:20}
.game-shell>.topbar .brand,.game-shell>.topbar .room-info{display:none}
.game-shell>.topbar nav{position:absolute;top:max(8px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:5px;user-select:none;-webkit-user-select:none}
.game-shell>.topbar button{min-height:30px;padding:5px 10px;border:1px solid #d1b36c70;border-radius:8px;background:#062d26dc;color:#f4dfb1;box-shadow:0 3px 10px #001a1499;font-size:12px;white-space:nowrap}
.game-shell>.topbar button.on{background:#f2c96b;color:#332006}
.game-shell>.table{height:100vh}
.hand .card{touch-action:none}
.hand.horizontal-cards .card.plan-start{margin-left:-23px;box-shadow:-3px 0 0 rgba(242,185,77,.9),1px 3px 6px #0007}
.hand.deal-anim .card{animation:card-deal .46s cubic-bezier(.18,.76,.25,1.15) both;animation-delay:calc(var(--deal-i)*18ms)}@keyframes card-deal{0%{opacity:0;transform:translate(48vw,-42vh) rotate(16deg) scale(.72)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.played.effect-enter .mini-card{animation:card-play-in .28s cubic-bezier(.2,.85,.3,1.2) both}@keyframes card-play-in{0%{opacity:0;transform:translateY(35px) scale(.82)}100%{opacity:1;transform:none}}
.power-effect{position:absolute;z-index:28;left:50%;top:43%;transform:translate(-50%,-50%);pointer-events:none;text-align:center}.power-effect b{display:block;color:#fff2b4;text-shadow:0 3px 2px #581600,0 0 20px #ff8a00;font:900 62px/1 "STKaiti",serif;animation:power-pop .7s ease-out both}.power-effect i{position:absolute;left:50%;top:50%;width:9px;height:110px;border-radius:50%;background:linear-gradient(#fff8a5,#ff4d00,transparent);transform-origin:50% 0;animation:spark .7s ease-out both}.power-effect i:nth-child(2){transform:rotate(110deg)}.power-effect i:nth-child(3){transform:rotate(230deg)}.flush-effect b{font-size:38px;color:#fff7cf}.flush-effect span{display:block;margin-top:7px;font-size:26px;letter-spacing:9px;color:#fff;text-shadow:0 0 14px #ffd35c}@keyframes power-pop{0%{opacity:0;transform:scale(.25) rotate(-12deg)}42%{opacity:1;transform:scale(1.24) rotate(3deg)}100%{opacity:0;transform:scale(1)}}@keyframes spark{0%{opacity:0;height:0}35%{opacity:1;height:110px}100%{opacity:0;height:150px}}@keyframes table-shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,2px)}}body.bomb-shake .table{animation:table-shake .32s linear}.settings-dialog label{display:flex;align-items:center;gap:8px;margin:12px 0}.settings-dialog label:first-of-type{justify-content:space-between}.settings-dialog select{max-width:210px;border:1px solid #c9b27b;border-radius:7px;padding:8px;background:#fffaf0;color:#59411f}
@media(prefers-reduced-motion:reduce){.hand.deal-anim .card,.played.effect-enter .mini-card,.power-effect b,body.bomb-shake .table{animation:none!important}}
.hand .card.selected{background:linear-gradient(145deg,#ffe7b3 0%,#ffc561 58%,#f1a43b 100%);border-color:#ef841d;box-shadow:0 5px 12px #000b,0 0 0 3px #ff9f2e,inset 0 1px 0 #fff2c8}
.hand.stacked-cards .card.selected{box-shadow:0 3px 8px #000a,0 0 0 3px #ff9f2e,inset 0 1px 0 #fff2c8}
.hand .card.tribute-disabled{filter:brightness(.92) saturate(.96);opacity:.82;cursor:not-allowed;transform:none;box-shadow:1px 2px 3px #0006}
.tribute-inline{position:absolute;z-index:9;left:50%;bottom:193px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:80vw;padding:7px 10px 7px 16px;border:1px solid #d9b76599;border-radius:22px;background:#052a23eb;box-shadow:0 6px 18px #001a14aa;color:#ffe4a6}
.tribute-inline[hidden]{display:none}.tribute-inline p{margin:0;white-space:nowrap;font-size:13px;font-weight:700}.tribute-inline button{min-width:74px;min-height:32px;padding:5px 18px;border-radius:18px;border:1px solid #dfb85b}.tribute-inline button:disabled{filter:grayscale(1);opacity:.5}

/* The active marker belongs to the avatar on every seat. */
.turn-ring{display:none}
.player.active .avatar{border-color:#ffe27d;box-shadow:0 0 0 3px #ffd76e,0 0 18px 6px #ffd66caa,0 3px 12px #000b;animation:avatar-pulse 1.15s ease-in-out infinite}
.player.top .partner-tag{position:absolute;left:-12px;top:-10px;z-index:5;white-space:nowrap}
.played.seat-0{bottom:60px}
.player .finish-badge{position:absolute;z-index:9;left:40px;top:40px;min-width:38px;padding:3px 7px;border:1px solid #ffe5a5;border-radius:11px;background:linear-gradient(135deg,#d08a24,#7b4212);box-shadow:0 2px 8px #001b15cc;color:#fff8df;font-size:10px;font-weight:900;line-height:1.2;letter-spacing:1px;text-align:center;text-shadow:0 1px 2px #4b260a;white-space:nowrap;pointer-events:none}.player.right .finish-badge{left:auto;right:40px}.player .finish-badge.place-1{background:linear-gradient(135deg,#ffd96f,#a96b16);color:#4c2b08}.player .finish-badge.place-2{background:linear-gradient(135deg,#f4f1e8,#8f9698);color:#394045;border-color:#fff}.player .finish-badge.place-3{background:linear-gradient(135deg,#d79b68,#844322)}.player .finish-badge.place-4{background:linear-gradient(135deg,#587066,#213c34);border-color:#9eb5aa}
.played[data-action="pass"]{min-width:54px;justify-content:center}.played[data-action="pass"] .pass-label{font-weight:900;letter-spacing:2px;box-shadow:0 3px 10px #001b15aa}
@keyframes avatar-pulse{50%{box-shadow:0 0 0 2px #ffe9a1,0 0 11px 3px #ffd66c80,0 3px 12px #000b}}

/* Messages are anchored to their player, not to viewport percentages. */
.player .speech-bubble{position:absolute;z-index:15;max-width:190px;min-width:max-content;padding:8px 12px;background:#fff8df;color:#544329;border:1px solid #c9a55e;border-radius:13px;box-shadow:0 4px 12px #0008;font-size:12px;animation:bubble-in .22s;pointer-events:none}
.player .speech-bubble:after{content:"";position:absolute;border:6px solid transparent}
.player.me .speech-bubble,.player.left .speech-bubble{left:calc(100% + 8px);right:auto;top:auto;bottom:56%;transform:none;transform-origin:left bottom}
.player.me .speech-bubble:after,.player.left .speech-bubble:after{left:auto;right:100%;top:auto;bottom:8px;border-top-color:transparent;border-right-color:#fff8df}
.player.right .speech-bubble{left:auto;right:calc(100% + 8px);top:auto;bottom:56%;transform:none;transform-origin:right bottom}
.player.right .speech-bubble:after{left:100%;right:auto;top:auto;bottom:8px;border-top-color:transparent;border-left-color:#fff8df}
.player.top .speech-bubble{left:50%;right:auto;top:calc(100% + 8px);bottom:auto;transform:translateX(-50%);transform-origin:center top}
.player.top .speech-bubble:after{left:50%;right:auto;top:auto;bottom:100%;margin-left:-6px;border-top-color:transparent;border-bottom-color:#fff8df}

@media (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-width:950px){
  .game-shell>.topbar{height:0;padding:0}
  .game-shell>.topbar nav{top:calc(5px + env(safe-area-inset-top,0px));right:calc(7px + env(safe-area-inset-right,0px));gap:3px}
  .game-shell>.topbar nav button{min-width:0;min-height:27px;padding:3px 7px;font-size:10px;border-radius:7px}
  .game-shell>.topbar #soundBtn{min-width:29px;padding-inline:5px;font-size:13px}
  .game-shell>.table{height:100dvh}
  .score-panel{top:6px}
  .player.top .partner-tag{left:-9px;top:-7px;font-size:8px;padding:1px 6px}
  .player .finish-badge{left:32px;top:31px;min-width:32px;padding:2px 5px;font-size:8px}.player.right .finish-badge{left:auto;right:32px}
  .played.seat-0{bottom:78px}
  .side-tools{right:calc(7px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:4px}
  .side-tools button{width:38px;min-height:30px}
  .chat-strip{right:calc(7px + env(safe-area-inset-right,0px));top:74px}
  .quick-chat-panel{top:74px}
  .record-panel{top:40px;max-height:calc(100% - 48px)}
  .tribute-inline{bottom:calc(98px + env(safe-area-inset-bottom,0px));max-width:72vw;padding:5px 7px 5px 12px;gap:8px}.tribute-inline p{font-size:11px}.tribute-inline button{min-width:62px;min-height:29px;padding:4px 13px;font-size:11px}
  .player .speech-bubble{max-width:145px;padding:6px 9px;font-size:10px}
  .player.me .speech-bubble,.player.left .speech-bubble{left:calc(100% + 6px)}
  .player.right .speech-bubble{right:calc(100% + 6px)}
  .player.top .speech-bubble{top:calc(100% + 6px)}
}
@media (orientation:landscape) and (max-height:600px){.table.stacked-hand .tribute-inline{bottom:calc(min(46dvh,194px) + 4px + env(safe-area-inset-bottom,0px))}}
.actions .unable-action{display:none;min-width:118px;border:1px solid #e3b65b;background:linear-gradient(#ffda7b,#ce8b28);color:#5a310c;box-shadow:0 3px 12px #0007}.actions.unable-only #passBtn,.actions.unable-only #hintBtn,.actions.unable-only #playBtn{display:none}.actions.unable-only .unable-action{display:block}