/* Table-first composition: one playing surface, broad rack, secondary tools in drawers. */
body{background:#102b27}.game-shell{max-width:1200px;padding:12px 20px 24px}.topbar{margin:0 0 8px;min-height:44px}.brand{font-size:24px}.brand small{display:none}.header-actions{gap:8px}.header-actions>#friends-open{background:#244a3e;border-color:#56705b}.game-menu{position:relative;z-index:110}.game-menu>summary{display:grid;place-items:center;list-style:none;width:44px;height:44px;cursor:pointer;border:1px solid #9caa7b;border-radius:12px;background:#294c3c;font-size:25px;color:#ffe5a1}.game-menu>summary::-webkit-details-marker{display:none}.menu-content{position:absolute;right:0;top:52px;width:min(310px,85vw);padding:16px;background:#183c32;border:1px solid #64816b;border-radius:16px;box-shadow:0 16px 50px #0008;display:flex;flex-wrap:wrap;gap:10px}.menu-content .session-bar{display:flex;flex-direction:column;align-items:stretch;width:100%;margin:0;gap:8px}.menu-content .mode-pill{align-self:flex-start}.menu-content .profile-chip{max-width:100%}.menu-content button{font-size:14px}.game-menu:not([open])>.menu-content{display:none}
.play-area{padding:0;margin:0;border:0;background:radial-gradient(ellipse at 50% 20%,#237952,#14543d 65%,#103d30);border-radius:24px;box-shadow:inset 0 0 0 1px #5b98705c,0 14px 35px #0003;overflow:visible}.table{height:310px;margin:0;border:0;border-radius:24px 24px 0 0;background:transparent;box-shadow:none}.table-brand{display:none}.opponent.seat-2{top:12px}.opponent.seat-1{right:18px;top:110px}.opponent.seat-3{left:18px;top:110px}.opponent .avatar-ring{width:48px;height:48px}.opponent .avatar-ring img{width:100%;height:100%;object-fit:cover}.opponent>.player-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;padding:4px 10px;background:#102e25c9;border:1px solid #65947566;border-radius:8px;min-height:32px}.opponent>small{display:none}.table-center{top:115px;left:50%;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:20px}.indicator-group{position:static;transform:none;width:auto;margin:0}.indicator-group>.eyebrow,#joker{display:none}.indicator-slot .tile{width:44px;height:61px;font-size:32px}.draw-control{padding:0;background:transparent;border:0;box-shadow:none;min-width:48px}.stock-pile{width:46px;height:64px}.draw-control #remaining{font-size:12px;max-width:100px}.table-pile strong,.table-pile>span:not(.pile-top),.table-pile small{display:none}.pile-0,.pile-1{right:24%}.pile-2,.pile-3{left:24%}.pile-1,.pile-2{top:34px}.pile-0,.pile-3{bottom:18px}.pile-top{width:44px;height:61px}.pile-top>.tile{width:44px;height:61px;font-size:32px}.self-seat{bottom:2px;gap:5px;flex-direction:row;padding:4px 10px;background:#123c2ee6;border-radius:24px}.self-seat .avatar-ring{width:30px;height:30px}.self-seat .avatar-ring img{width:100%;height:100%}.self-seat>span:not(.avatar-ring){font-size:14px}.self-seat small{display:none}
.rack-section{max-width:none;width:100%;margin:0;padding:0 22px 12px}.turn-strip{min-height:42px;margin:0 0 4px;gap:8px}.step-badge,#selected{display:none}.turn-copy h1{font-size:14px;font-weight:600;margin:0;color:#e0eddf}.turn-clock{font-size:18px;min-width:56px;border-radius:20px;padding:5px 9px;order:3}.turn-strip .coach-feedback{margin:0 0 0 auto;padding:5px 8px;font-size:14px}.rack-scroll{padding:0}.rack{padding:10px 10px 14px;border:1px solid #937256;border-bottom:6px solid #473126;border-radius:10px;background:#50392f;gap:10px;box-shadow:0 8px 18px #0005}.rack-row{min-height:44px;background:#30251f;border-bottom:4px solid #a88659;border-radius:3px;column-gap:3px;padding-bottom:4px}.rack-group{gap:3px}.rack-group>.tile{font-size:clamp(17px,3.6cqw,40px);border-radius:4px;box-shadow:0 2px 1px #100e0b99}.rack-group>.tile small{font-size:clamp(9px,1.2cqw,13px)}.rack-actions{margin-top:8px;min-height:40px}.rack-actions>#message{font-size:12px;color:#b7d1c1}.discard-button{min-height:40px;padding:8px 18px}.drag-tip,.rack-swipe-hint{display:none}.move-alert{margin:4px 0 8px;padding:8px 12px;font-size:14px}.welcome{inset:35px 18%;border-radius:20px;z-index:15}.welcome h1{font-size:24px}
.coach-drawer{max-width:none;margin:12px 0 0;border:1px solid #476752;border-radius:14px;background:#15372c}.coach-drawer>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:12px 16px;cursor:pointer;font-weight:700;color:#ffe09a}.coach-drawer>summary::-webkit-details-marker{display:none}.drawer-caption{font-size:14px;font-weight:400;color:#bdd3c3}.coach-drawer[open]>summary{border-bottom:1px solid #476752}.coach-drawer .coach{max-width:none;border:0;margin:0;background:transparent}.history{margin:12px 0}footer{font-size:12px;margin-bottom:44px}.chat-launch{bottom:14px;right:16px;font-size:14px;padding:10px 16px;min-height:44px}
@media(max-width:600px){.game-shell{padding:8px 8px 20px}.table{height:290px}.rack-section{padding:0 6px 10px}.rack{padding:8px 4px 10px;gap:8px}.rack-row{column-gap:1px}.rack-group{gap:1px}.rack-group>.tile{font-size:clamp(14px,4cqw,22px)}.opponent.seat-1{right:8px;top:116px}.opponent.seat-3{left:8px;top:116px}.opponent>.player-name{max-width:98px;font-size:14px}.opponent .avatar-ring{width:38px;height:38px}.table-center{top:105px;gap:14px}.pile-1,.pile-2{top:32px}.pile-0,.pile-3{bottom:30px}.pile-0,.pile-1{right:17%}.pile-2,.pile-3{left:17%}.pile-top,.pile-top>.tile{width:33px;height:46px;font-size:27px}.indicator-slot .tile{width:35px;height:49px;font-size:27px}.turn-strip{flex-wrap:wrap}.turn-copy{flex:1}.turn-strip .coach-feedback{font-size:12px}.welcome{inset:20px 8%;padding:14px}.rack-actions>#message{max-width:60%}.self-seat{bottom:0}}
@media(orientation:landscape) and (max-height:600px){.game-shell{max-width:1100px;padding:4px max(12px,env(safe-area-inset-left)) 12px}.topbar{position:absolute;top:7px;left:18px;right:18px;z-index:30;pointer-events:none}.topbar .brand,.topbar .header-actions{pointer-events:auto}.brand{font-size:20px}.play-area{padding-top:0}.table{height:calc(100dvh - 192px);min-height:185px;margin:0}.opponent.seat-2{top:6px}.opponent.seat-1{top:72px;right:10px}.opponent.seat-3{top:72px;left:10px}.opponent .avatar-ring{width:34px;height:34px}.opponent>.player-name{font-size:14px;max-width:110px}.table-center{top:75px;gap:16px}.indicator-slot .tile{width:34px;height:48px;font-size:27px}.stock-pile{width:35px;height:48px}.pile-1,.pile-2{top:50px}.pile-0,.pile-3{bottom:8px}.pile-0,.pile-1{right:22%}.pile-2,.pile-3{left:22%}.pile-top,.pile-top>.tile{width:34px;height:47px;font-size:27px}.self-seat{display:none}.rack-section{max-width:830px;padding:0 8px 6px;margin:auto}.turn-strip{min-height:28px;position:absolute;right:4px;top:-29px;left:4px}.turn-clock{font-size:14px;min-width:44px;padding:3px 7px}.turn-copy h1{font-size:12px}.rack{padding:6px 8px 8px;gap:6px}.rack-row{min-height:40px}.rack-group>.tile{max-height:55px;font-size:26px;aspect-ratio:auto;height:55px}.rack-group>.tile small{font-size:9px;margin-top:2px}.rack-actions{margin-top:4px;min-height:30px}.discard-button{min-height:30px;padding:4px 12px;font-size:14px}.move-alert{position:absolute;bottom:100%;left:16%;right:16%;z-index:35;font-size:12px;padding:6px 10px}.welcome{inset:10px 23%;padding:8px}.welcome h1{font-size:20px}.welcome-subtitle{font-size:12px}.coach-drawer{margin-top:6px}.chat-launch{bottom:8px;right:12px}.table-center #remaining{font-size:10px}}
@media(max-width:600px) and (orientation:portrait){.rack-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.rack{min-width:520px;width:520px}.rack-group>.tile{font-size:23px}.rack-group>.tile small{font-size:10px}.rack-swipe-hint{display:block!important;margin:5px 0 0;font-size:12px;color:#c5dccb;text-align:center}.opponent>.player-name{padding:4px 6px;max-width:108px}}
.header-actions .chat-launch{position:relative;inset:auto;width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;background:#294c3c;color:#ffe5a1;box-shadow:none;border:1px solid #56705b}.header-actions .chat-launch>span:first-child{display:none}.header-actions .chat-launch::before{content:'💬';font-size:26px}.header-actions .chat-launch .unread-badge{position:absolute;right:-5px;top:-5px}.header-actions .chat-launch{pointer-events:auto}@media(orientation:landscape) and (max-height:600px){.table{height:calc(100dvh - 220px);min-height:158px}.table-center{top:70px}.pile-0,.pile-3{bottom:12px}.rack-actions{min-height:32px}.topbar{left:20px;right:20px}}
/* Landscape: align the header with the table and keep status inside the rack. */
@media(orientation:landscape) and (max-height:600px){
 .topbar{left:50%;right:auto;width:min(1076px,calc(100% - 24px));transform:translateX(-50%)}
 .turn-strip{position:relative;inset:auto;min-height:32px;flex-wrap:nowrap;padding:0 4px;margin:0 0 3px}
 .turn-copy{min-width:0;flex:1}.turn-copy h1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .turn-strip .coach-feedback{max-width:45%;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .turn-clock{margin-left:0;flex:none}
}

/* Primary round controls stay beside the rack, including portrait play. */
.rack-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.round-actions{display:flex;align-items:center;gap:8px;margin-right:auto}.round-actions button{min-height:44px;padding:8px 14px;font-size:14px}.round-actions #new{background:#315c48;border-color:#8dad77;color:#f5ffed}.rack-actions>#message{flex-basis:100%;order:3;max-width:none;margin:0;font-size:12px}.rack-actions>#discard{margin-left:auto}.round-actions #leave{background:transparent;border-color:#b77868;color:#ffd5c8}
@media(orientation:portrait){
 body{padding-bottom:calc(var(--rack-dock-height,270px) + 16px)}
 .rack-section{position:fixed;bottom:0;left:0;right:0;z-index:40;width:100%;max-width:none;margin:0;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#153d2f;border-top:1px solid #8baa7d;box-shadow:0 -10px 28px #061d2270}
 .rack-scroll{overflow:visible;padding:0}.rack{min-width:0;width:100%;padding:6px 4px 8px;gap:6px}.rack-row{grid-template-columns:repeat(15,minmax(0,1fr));min-height:38px}.rack-group>.tile{height:auto;min-height:36px;aspect-ratio:1 / 1.5;font-size:clamp(14px,4cqw,27px)}.rack-group>.tile small{font-size:clamp(7px,1.8cqw,10px);margin-top:2px}
 .rack-swipe-hint{display:none!important}.turn-strip{position:static;min-height:30px;margin:0 0 5px;flex-wrap:nowrap}.turn-clock{font-size:16px;min-width:48px;padding:4px 6px}.turn-copy h1{font-size:13px}.turn-strip .coach-feedback{font-size:12px;padding:4px 6px}.rack-actions{margin-top:7px;gap:6px}.round-actions{gap:6px}.round-actions button,.rack-actions>#discard{padding:8px 10px;min-height:44px;font-size:14px}.rack-actions>#message{max-height:28px;overflow:auto;line-height:14px}.move-alert{font-size:13px;padding:6px 8px;margin:0 0 5px}.coach-drawer{margin-top:12px}footer{margin-bottom:0}
}
@media(orientation:landscape) and (max-height:600px){.rack-actions{flex-wrap:nowrap}.rack-actions>#message{display:none}.round-actions button{min-height:32px;padding:4px 10px}}

.friend-name-link{padding:4px 0;background:transparent;border:0;color:#ffe09a;text-align:left;text-decoration:underline;text-underline-offset:3px;font-size:16px}.fair-play-note{font-size:13px;line-height:1.4;padding:8px 10px;border-left:3px solid #dcba68;background:#ffffff08;color:#d8e5da}

#fullscreen-toggle{width:44px;height:44px;padding:0;font-size:27px;flex-shrink:0;background:#294c3c;color:#ffe5a1;border:1px solid #56705b}#fullscreen-toggle[aria-pressed=true]{background:#46623a;border-color:#ffce6b}#fullscreen-status{font-size:14px;padding:10px;border:1px solid #d5b36d;border-radius:10px}html:fullscreen{overflow:auto;background:#102b27}html:-webkit-full-screen{overflow:auto;background:#102b27}@media(max-width:400px){.topbar .brand{font-size:20px}.header-actions{gap:4px}}

/* Top-layer menu avoids native Safari select/compositing overlaps. */
.table-menu-dialog{position:fixed;inset:0;margin:auto;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid #64816b;border-radius:16px;background:#183c32;color:#eff6ed;overflow:auto;box-shadow:0 16px 50px #0008}
.table-menu-dialog::backdrop{background:#061b16b8;backdrop-filter:none}
.table-menu-dialog .menu-content{position:static;width:100%;max-height:none;box-sizing:border-box;background:#183c32;border:0;border-radius:0;box-shadow:none;display:flex;isolation:isolate}
.menu-close{margin-left:auto;flex-basis:44px;height:44px;padding:0;font-size:26px!important;background:#294c3c;color:#ffe5a1}
.table-menu-dialog .language-switch{display:block;flex:1;min-width:120px}.table-menu-dialog .language-switch select{width:100%;max-width:none;background:#244a3e;opacity:1}
/* One bounded search panel; suppress the duplicate welcome heading behind it. */
#welcome:has(#match-wait:not([hidden])){position:fixed;inset:0;z-index:150;display:grid;place-items:center;margin:0;padding:16px;overflow:auto;border-radius:0;background:#061b16b8;box-shadow:none}
#welcome:has(#match-wait:not([hidden]))>:not(#match-wait){display:none!important}
#welcome #match-wait{box-sizing:border-box;width:min(360px,100%);max-height:calc(100dvh - 32px);overflow:auto;margin:0;padding:20px;background:#123e38;box-shadow:0 16px 50px #0006}
#match-wait strong{display:block;font-size:20px;line-height:1.35}#match-wait p{margin:14px 0;font-size:14px}#match-wait button{min-height:44px}#match-wait .match-search-orbit{margin:0 auto 14px}
#fullscreen-status:not([hidden]){position:fixed;top:max(64px,env(safe-area-inset-top));left:12px;right:12px;z-index:160;max-width:460px;margin:0 auto;background:#183c32;box-shadow:0 6px 24px #0008}
@media(max-width:400px){.topbar .brand{font-size:18px}.header-actions{gap:4px}.header-actions #fullscreen-toggle,.header-actions #friends-open,.header-actions .chat-launch,.game-menu>summary{width:38px;min-width:38px;height:40px;min-height:40px}.topbar{gap:6px}}
@media(orientation:landscape) and (max-height:450px){#welcome #match-wait{padding:12px 18px}#match-wait .match-search-orbit{display:none}#match-wait p{margin:8px 0}}

#fullscreen-status:not([hidden]){display:flex;align-items:flex-start;gap:12px}#fullscreen-status>span{flex:1;min-width:0}.fullscreen-dismiss{flex:0 0 44px;width:44px;min-height:44px;padding:0;border:1px solid #64816b;border-radius:10px;background:#294c3c;color:#ffe5a1;font-size:26px;line-height:1}
.report-button{font-size:12px;min-height:32px;padding:4px 8px;color:#dacbb4;align-self:flex-end}.chat-message .report-button{display:block;margin:6px 0 0 auto}#report-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}#report-dialog select,#report-dialog textarea{display:block;width:100%;margin:12px 0;background:#123b30;color:#fff;padding:12px;border:1px solid #668878;border-radius:8px;font:inherit}#report-dialog textarea{min-height:100px}#report-dialog button{margin:4px}#report-dialog p{font-size:14px;line-height:1.5}
.coach-pick{outline:3px solid #ffe08b!important;outline-offset:5px;filter:drop-shadow(0 0 8px #ffe08b)}.draw-advice{padding:10px 12px;background:#284c3d;border-left:3px solid #ffd173;font-size:14px;line-height:1.5}.award-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}.award-card{border:1px solid #526653;border-radius:16px;background:#102b27;padding:10px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:6px}.award-card.earned{border-color:#ffcf69;box-shadow:0 0 16px #eeba4e30}.award-art{width:120px;height:150px;background-image:url('/awards/badges.webp');background-size:300% 200%;background-repeat:no-repeat;border-radius:12px}.award-card.locked .award-art{filter:grayscale(.7);opacity:.65}.award-state{font-size:12px;color:#ffdc88}.award-card p,.awards-note{font-size:13px;line-height:1.5;color:#bfd3c4}.award-card small{font-size:12px}.award-card strong{font-size:16px}
/* Keep the player's own account one tap away, including on compact tables. */
.header-actions #profile-open{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;border:2px solid #e6bd69;padding:3px 10px 3px 3px;max-width:180px}.header-actions #header-avatar{width:34px;height:34px;object-fit:cover;border-radius:50%}.header-actions #header-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.profile-setup{padding:12px;border-left:3px solid #ffd578;background:#245044;border-radius:8px}.friend-request{padding:12px;margin:10px 0;border:1px solid #e6bd69;border-radius:12px;background:#244b3e}.friend-request p{margin:0 0 8px}.friend-request .relationship-actions{display:flex;gap:8px;flex-wrap:wrap}.friend-request-count{position:absolute;bottom:-5px;left:-5px;min-width:19px;padding:2px;border-radius:12px;background:#ffd578;color:#15382e;font-size:12px;font-weight:800}#friends-open{position:relative}
@media(max-width:700px),(orientation:landscape) and (max-height:600px){.header-actions #profile-open{width:40px;min-width:40px;height:44px;padding:2px}.header-actions #header-name{display:none}.header-actions{gap:5px}}
@media(max-width:400px){.topbar .brand{font-size:17px}.header-actions{gap:3px}.header-actions #profile-open{width:36px;min-width:36px;height:40px;min-height:40px}.header-actions #header-avatar{width:28px;height:28px}.header-actions #fullscreen-toggle,.header-actions #friends-open,.header-actions .chat-launch,.game-menu>summary{width:34px;min-width:34px}}

/* A slow amber pulse remains readable; reduced-motion uses a steady outline. */
@keyframes turn-attention-pulse{0%,100%{outline-color:#ffd36a;box-shadow:0 0 8px #ffc24755}50%{outline-color:#fff2bd;box-shadow:0 0 22px #ffc247bb}}
.needs-turn-attention .rack,.self-seat.needs-turn-attention{outline:3px solid #ffd36a;outline-offset:2px;animation:turn-attention-pulse 1.6s ease-in-out infinite}
.turn-reminder{color:#ffe19a;font-size:14px;line-height:1.3}
.turn-reminder[hidden]{display:none}
.needs-turn-attention .turn-copy h1{display:none}
@media(prefers-reduced-motion:reduce){.needs-turn-attention .rack,.self-seat.needs-turn-attention{animation:none;box-shadow:0 0 12px #ffc24788}}

/* Anchor landscape tools to the same padded shell as the playing surface. */
@media(orientation:landscape){
 .game-shell{position:relative}
 .game-shell>.topbar{position:absolute;z-index:30;left:calc(max(12px,env(safe-area-inset-left)) + 12px);right:calc(max(12px,env(safe-area-inset-right)) + 12px);top:12px;width:auto;transform:none;gap:0}
 html:not(.coin-lobby-open) .game-shell>.topbar .brand{display:none}
 html:not(.coin-lobby-open) .game-shell>.topbar .header-actions{width:100%;min-width:0;flex-wrap:nowrap;gap:6px}
 html:not(.coin-lobby-open) .game-shell>.topbar .header-actions>*{flex-shrink:0}
 html:not(.coin-lobby-open) .game-shell>.topbar #coin-account{margin-right:auto;flex-shrink:1;min-width:0;max-width:160px}
 html:not(.coin-lobby-open) .game-shell>.topbar #coin-balance-header{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

@media(orientation:landscape) and (min-height:601px){.game-shell>.topbar{left:32px;right:32px;top:24px}}

/* Portrait phones: keep the coin balance and four essential actions in one row. */
@media(orientation:portrait) and (max-width:700px){
 html .game-shell>.topbar .brand{display:none}
 .game-shell>.topbar{min-width:0;max-width:100%;gap:0}
 html .game-shell>.topbar .header-actions{display:flex;flex:1;min-width:0;width:100%;gap:5px;flex-wrap:nowrap}
 html .game-shell>.topbar .header-actions>*{flex:0 0 44px;min-width:44px;width:44px}
 html .game-shell>.topbar #coin-account{flex:1 1 0;min-width:0;width:auto;max-width:none;padding:6px;font-size:14px}
 html .game-shell>.topbar #coin-balance-header{min-width:0;overflow:hidden;text-overflow:ellipsis}
 html .game-shell>.topbar #profile-open{height:44px;min-height:44px}
 html .game-shell>.topbar .game-menu>summary{width:44px;min-width:44px;height:44px}
 html .game-shell>.topbar #friends-open{height:44px;min-height:44px}
}

@media(orientation:portrait) and (max-width:700px){html .game-shell>.topbar #header-name{display:none}}

/* Compact connection state; text and dot both communicate the mode. */
.connection-badge{display:inline-flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap;padding:.25rem .6rem;border:1px solid #74cfa540;border-radius:999px;background:#14382df2;color:#c3f5d9;font-size:.875rem;line-height:1.3;font-weight:500;letter-spacing:0;transition:background .2s,color .2s,border-color .2s}
.connection-badge:before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:#78dba9;flex:none}
.connection-badge[data-mode="offline"]{background:#382d1cf2;color:#ffdd9c;border-color:#e7b86360}
.connection-badge[data-mode="offline"]:before{background:#f3bd61}
#coin-account{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:44px}#coin-account .coin-account-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}#coin-account .connection-badge{padding:0;border:0;background:transparent;font-size:.75rem;line-height:1.3;gap:.3rem}#coin-account .connection-badge:before{width:.3rem;height:.3rem}