/* Readable cards and reachable controls on every table size. */
body.comfort-play{overflow-x:clip}
.comfort-play button,.comfort-play a{touch-action:manipulation}
.comfort-play :is(button,a):focus-visible{outline:3px solid #ffe291;outline-offset:3px}
.comfort-play .game-shell{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.comfort-play .controls button{min-height:48px;min-width:120px;font:700 16px/1.5 'Chakra Petch',sans-serif}
.comfort-play .topbar{display:flex;flex-wrap:wrap;gap:12px}
.comfort-play .topbar>.brand{flex:1 0 160px}
.comfort-settings{display:contents}
.comfort-menu-toggle,.comfort-settings-toggle{display:none}
.comfort-play .seat-picker button{min-width:40px;min-height:40px;height:auto;font-size:14px}
.comfort-play .game-console-menu #siteNav a{min-height:44px;min-width:38px}
.comfort-play .game-console-menu #siteNav a small{font-size:10px}
.comfort-play .hand-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:950px;margin:5px auto;color:#f8e6bd;font-size:13px;line-height:1.5}
.comfort-play .clear-selection{min-height:44px;padding:6px 12px;border:1px solid #edce9966;border-radius:10px;color:#ffebc2;background:#19233fd9;white-space:nowrap;font-size:13px}
.comfort-play .clear-selection:disabled{opacity:.4;cursor:default}
.comfort-play .hand-scroll-hint{display:none}
.comfort-play #hand{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#e7c07355 transparent;scroll-padding-inline:12px;justify-content:flex-start}
.comfort-play .hand-row .hand{height:172px;padding:23px 10px 8px}
.comfort-play .hand-row .hand-stack{width:max-content;min-width:min-content;flex:0 0 auto;max-width:none;justify-content:center}
.comfort-play .hand-row .hand-stack .card{margin-right:-50px}
.comfort-play .hand-row .hand-stack .card:last-child{margin-right:0}
.comfort-play .hand-stack{margin-inline:auto}
.comfort-play .player-zone .hand-row{min-width:0}
.comfort-play #hand>.card{flex:0 0 90px;width:90px;height:127px;margin-right:-42px}
.comfort-play #hand>.card:last-child{margin-right:0}
.comfort-play #hand .card.selected{transform:translateY(-14px);outline:3px solid #ffdc7b}
.comfort-play dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.comfort-play dialog .close{width:44px;height:44px}
.comfort-play dialog input{font-size:16px}
.comfort-play .hand-badges{margin-bottom:4px}
.comfort-play .table{height:clamp(300px,42svh,420px)}
.comfort-play .game-table{height:clamp(320px,42svh,420px);min-height:320px}
@media(min-width:701px){
 .comfort-play .player-area{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:6px 16px;align-items:center;padding:10px 14px}
 .comfort-play .player-area .player-meta{grid-column:1/-1}
 .comfort-play .player-area .hand-tools{grid-column:1;grid-row:2;width:100%;margin:0}
 .comfort-play .player-area #hand{grid-column:1;grid-row:3;min-width:0;padding-top:22px;min-height:159px}
 .comfort-play .player-area .controls{grid-column:2;grid-row:3;display:grid;gap:10px}
}
@media(min-width:1101px){
 .comfort-play .player-zone{display:grid;grid-template-columns:140px minmax(0,1fr) 180px;gap:8px 18px;align-items:center;padding:10px;margin-top:0}
 .comfort-play .hand-badges{grid-column:1;grid-row:1/4;flex-wrap:wrap;justify-content:center}
 .comfort-play .hand-tools{grid-column:2;grid-row:1;width:100%;margin:0}
 .comfort-play .hand-row{grid-column:2;grid-row:2;width:100%;display:block}
 .comfort-play .controls{grid-column:3;grid-row:2;display:grid;gap:12px}
 .comfort-play .player-reactions{grid-column:2/4;grid-row:3;margin:0;flex-direction:row;justify-content:center}
}
@media(hover:none){.comfort-play #hand .card:hover:not(.selected){transform:none}}
@media(max-width:1100px){
 .comfort-play .topbar.has-sound-control .brand{flex-basis:160px}
 .comfort-play .comfort-menu-toggle,.comfort-play .comfort-settings-toggle{display:block;min-height:44px;padding:7px 14px;border:1px solid #d4bfdf55;border-radius:10px;background:#2f2448;color:#ffe8bd;font:600 14px/1.5 'Chakra Petch',sans-serif}
 .comfort-play .comfort-settings{display:none;order:5;width:100%;gap:8px;flex-wrap:wrap;padding:7px 0}
 .comfort-play .comfort-settings.is-open{display:flex}
 .comfort-play .game-console-menu #siteNav{display:none!important}
 .comfort-play .game-console-menu #siteNav.comfort-menu-open{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));flex-basis:100%;width:100%;margin:5px 0;padding:5px;gap:6px}
 .comfort-play .table{height:clamp(300px,38svh,380px)}
 .comfort-play .player-zone{margin-top:0}
}
@media(min-width:701px) and (max-width:1100px){
 .comfort-play .player-zone{display:grid;grid-template-columns:110px minmax(0,1fr) 140px;gap:6px 12px;align-items:center;padding:10px}
 .comfort-play .hand-badges{grid-column:1;grid-row:1/4;flex-wrap:wrap;justify-content:center}
 .comfort-play .hand-tools{grid-column:2;grid-row:1;width:100%;margin:0}
 .comfort-play .hand-row{grid-column:2;grid-row:2;width:100%;display:block}
 .comfort-play .controls{grid-column:3;grid-row:2;display:grid;gap:10px}
 .comfort-play .player-reactions{grid-column:2/4;grid-row:3;margin:0;flex-direction:row;justify-content:center}
}
@media(max-width:700px){
 .comfort-play .game-shell{width:100%;padding:10px max(10px,env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right))}
 .comfort-play .topbar{gap:8px;margin-bottom:4px}
 .comfort-play .brand-mark{width:42px;height:42px;font-size:24px;border-radius:13px}
 .comfort-play .brand h1{font-size:27px}.comfort-play .brand p{font-size:6px}
 .comfort-play .game-audio-control{top:0}
 .comfort-play .top-actions.game-console-menu{width:100%;display:flex;justify-content:flex-end;gap:8px;margin:0;flex-wrap:wrap}
 .comfort-play .comfort-menu-toggle,.comfort-play .comfort-settings-toggle{display:block;min-height:44px;padding:7px 14px;border:1px solid #d4bfdf55;border-radius:10px;background:#2f2448;color:#ffe8bd;font:600 14px/1.5 'Chakra Petch',sans-serif}
 .comfort-play .top-actions>#newGameButton{min-height:44px;font-size:14px;padding:6px 14px;order:-1;margin-right:auto}
 .comfort-play .comfort-settings{display:none;order:5;width:100%;gap:8px;flex-wrap:wrap;padding:7px 0}
 .comfort-play .comfort-settings.is-open{display:flex}
 .comfort-play .comfort-settings .seat-picker{flex:1;justify-content:center}
 .comfort-play .comfort-settings .seat-picker button{min-width:40px;min-height:44px}
 .comfort-play .game-console-menu #siteNav{display:none!important}
 .comfort-play .game-console-menu #siteNav.comfort-menu-open{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:5px 0;padding:5px;gap:6px}
 .comfort-play .game-console-menu #siteNav a{min-height:46px;min-width:44px;gap:4px}
 .comfort-play .game-console-menu #siteNav a small{font-size:11px}
 .comfort-play .table{height:300px;margin:12px 0 0}
 .comfort-play .center-stage{width:220px;top:57%;transform:translate(-50%,-50%) scale(.72)}
 .comfort-play .center-stage::before{width:230px;height:170px}
 .comfort-play .direction-ring{width:190px;top:56%}
 .comfort-play .direction-badge{display:none}
 .comfort-play .center-stage .round-chip{margin:4px 0 0;padding:5px 9px}
 .comfort-play .pile{margin-top:0}
 .comfort-play .opponent .seat-name{font-size:11px}
 .comfort-play .opponent .turn-marker{top:-22px;font-size:7px;padding:5px 7px;animation:none}
 .comfort-play .opponent .opponent-cards{animation:none}
 .comfort-play .discard-stack{left:auto;right:2px;top:75%;transform:scale(.65)}
 .comfort-play .player-zone{margin:0;padding:8px 0;background:linear-gradient(180deg,#13204000,#142040a0);border-radius:16px}
 .comfort-play .hand-badges{gap:9px;justify-content:flex-start;min-height:55px;padding-left:8px}
 .comfort-play .player-crown[class]{width:48px;height:48px}
 .comfort-play .user-avatar{width:42px;height:42px}
 .comfort-play .player-role-stack .hand-count{font-size:10px;top:calc(100% - 1px)}
 .comfort-play .player-name{font-size:15px}
 .comfort-play .hand-tools{margin:8px 3px 0;font-size:12px;min-height:44px}
 .comfort-play .hand-row .hand{height:155px;--hand-card-width:86px;--hand-card-height:121px;padding:20px 8px 10px;justify-content:flex-start}
 .comfort-play .hand-row .hand-stack .card{margin-right:-42px}
 .comfort-play .hand-row .hand-stack .card:last-child{margin-right:0}
 .comfort-play .hand-scroll-hint{display:block;margin:2px 0 4px;text-align:center;font-size:11px;color:#cee1ea}
 .comfort-play .controls{position:fixed;z-index:20;bottom:0;left:0;right:0;margin:0;display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:10px max(12px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));background:#14203bf5;border-top:1px solid #e4c99644;box-shadow:0 -8px 24px #07142a55}
 .comfort-play .controls button{min-width:0;min-height:50px;font-size:17px}
 .comfort-play .player-reactions{padding:4px;margin:0;gap:5px}
 .comfort-play .player-reaction-button{min-height:44px}
 .comfort-play .player-reactions>small{font-size:11px}
 .comfort-play .event-toast{max-width:calc(100% - 16px);font-size:13px}
 .comfort-play .royal-exchange{max-height:calc(100dvh - 125px);overflow-y:auto}
 .comfort-play .game-head{gap:8px;flex-wrap:wrap}
 .comfort-play .game-head .game-console-menu{gap:8px;justify-content:space-between}
 .comfort-play .game-actions button{min-height:44px;font:600 14px 'Chakra Petch',sans-serif}
 .comfort-play .game-table{min-height:310px;height:310px;margin-top:12px}
 .comfort-play .table-status{font-size:12px;line-height:1.4}
 .comfort-play .seat{flex-direction:column;gap:2px;width:82px}
 .comfort-play .seat-name{display:block;max-width:80px;text-align:center;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .comfort-play .seat-name small{font:10px/1.3 'Chakra Petch',sans-serif;white-space:normal}
 .comfort-play .seat-stack{height:52px;transform:scale(.7);transform-origin:top center;margin-bottom:-12px}
 .comfort-play .seat[data-slot="1"]{top:39%;left:14%}.comfort-play .seat[data-slot="2"]{top:22%;left:50%}.comfort-play .seat[data-slot="3"]{top:39%;left:86%}.comfort-play .seat[data-slot="4"]{top:78%;left:84%}.comfort-play .seat[data-slot="5"]{top:78%;left:16%}
 .comfort-play .pile-zone{width:225px;top:60%;transform:translate(-50%,-50%) scale(.74)}
 .comfort-play .player-area{padding:10px 0;margin-top:10px}
 .comfort-play .player-meta{padding:0 8px;gap:8px}.comfort-play .player-meta b{font-size:15px}
 .comfort-play .player-area #hand{min-height:154px;justify-content:flex-start;padding:22px 10px 10px}
 .comfort-play .player-area #hand>.card{flex-basis:86px;width:86px;height:121px;margin-right:-42px}
 .comfort-play .player-area #hand>.card:last-child{margin-right:0}
 .comfort-play .player-area .controls{grid-template-columns:1.6fr 1fr}
 .comfort-play .table-lobby,.comfort-play .exchange-panel{max-height:280px;overflow:auto;padding:15px;font-size:13px}
 .comfort-play .table-lobby h2,.comfort-play .exchange-panel h2{font:700 18px/1.4 'Chakra Petch',sans-serif}
 .comfort-play .toast{bottom:90px;max-width:92%;font-size:14px}
 .comfort-play #connectionNote{font:11px/1.6 'Chakra Petch',sans-serif}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:701px){
 .comfort-play .game-shell{max-width:1200px;padding:8px 14px 18px;display:grid;grid-template-columns:1fr minmax(280px,38%);gap:12px}
 .comfort-play .topbar,.comfort-play .game-head{grid-column:1/-1}
 .comfort-play .table-events,.comfort-play #connectionNote{grid-column:1/-1}
 .comfort-play .table,.comfort-play .game-table{height:300px;min-height:300px;margin:0}
 .comfort-play .player-zone,.comfort-play .player-area{display:block;margin:0;padding:6px;min-width:0}
 .comfort-play .topbar{gap:8px;margin:0;min-height:44px}
 .comfort-play .topbar.has-sound-control .brand{flex:1 0 130px}
 .comfort-play .brand-mark{width:36px;height:36px;font-size:22px}.comfort-play .brand h1{font-size:25px}.comfort-play .brand p{display:none}
 .comfort-play .top-actions.game-console-menu{width:auto;flex:0 1 auto;margin:0;gap:8px;flex-wrap:wrap}
 .comfort-play .top-actions>#newGameButton{min-height:44px;font-size:14px;padding:6px 12px}
 .comfort-play .hand-tools{margin:0;font-size:11px}
 .comfort-play .controls{display:flex;margin:0;gap:8px}
 .comfort-play .player-area .controls{display:flex}
 .comfort-play .seat{flex-direction:column;gap:2px;width:82px}
 .comfort-play .seat-name{max-width:82px;font-size:11px;text-align:center}.comfort-play .seat-name small{font:10px/1.3 'Chakra Petch',sans-serif;white-space:normal}
 .comfort-play .seat-stack{height:52px;transform:scale(.7);transform-origin:top center;margin-bottom:-12px}
 .comfort-play .seat[data-slot="1"]{top:39%;left:14%}.comfort-play .seat[data-slot="2"]{top:22%;left:50%}.comfort-play .seat[data-slot="3"]{top:39%;left:86%}.comfort-play .seat[data-slot="4"]{top:78%;left:84%}.comfort-play .seat[data-slot="5"]{top:78%;left:16%}
 .comfort-play .pile-zone{width:225px;top:60%;transform:translate(-50%,-50%) scale(.74)}
 .comfort-play .table-status{font-size:12px}
 .comfort-play .opponent,.comfort-play .opponent.side-right{grid-template-columns:44px 54px;gap:2px 4px;left:clamp(54px,calc(50% + var(--sx,0%)),calc(100% - 54px))}
 .comfort-play .opponent .royal-crown[class]{width:54px;height:58px}
 .comfort-play .opponent .opponent-cards{width:44px!important;height:58px}
 .comfort-play .opponent .card-back{width:36px;height:52px;left:calc(var(--back) * .6px);border-width:1px;border-radius:5px}
 .comfort-play .opponent .card-back::after{inset:4px;border-radius:3px;font-size:19px;line-height:40px}
 .comfort-play .opponent .avatar{width:22px;height:22px;font-size:14px}.comfort-play .opponent .seat-name{font-size:11px}
 .comfort-play .center-stage{width:220px;top:57%;transform:translate(-50%,-50%) scale(.72)}
 .comfort-play .direction-ring{width:190px;top:56%}.comfort-play .direction-badge{display:none}
 .comfort-play .discard-stack{left:auto;right:2px;top:75%;transform:scale(.65)}
 .comfort-play .hand-badges{min-height:45px}
 .comfort-play .player-crown[class]{width:42px;height:42px}
 .comfort-play .user-avatar{width:38px;height:38px}
 .comfort-play .hand-row .hand{height:140px;--hand-card-width:86px;--hand-card-height:121px}
 .comfort-play .hand-row .hand-stack .card{margin-right:-42px}
 .comfort-play .controls button{min-width:0;flex:1}
 .comfort-play .player-reactions small{display:none}
}
/* The shared menu sheet is loaded dynamically; retain comfortable hit areas. */
@media(max-width:1100px){
 body.comfort-play .game-console-menu>button{min-height:44px;min-width:44px;padding:7px 12px;font:600 14px/1.5 'Chakra Petch',sans-serif}
 body.comfort-play .game-console-menu #siteNav a{min-height:46px;min-width:44px}
 body.comfort-play .game-console-menu #siteNav a small{font-size:11px}
}
@media(max-width:700px),(orientation:landscape) and (max-height:600px){
 .comfort-play .table-status{top:8px;padding:6px 12px}
 .comfort-play .seat-stack{height:74px;margin-bottom:-20px}
 .comfort-play .seat[data-slot="1"]{top:44%}.comfort-play .seat[data-slot="2"]{top:28%}.comfort-play .seat[data-slot="3"]{top:44%}.comfort-play .seat[data-slot="4"],.comfort-play .seat[data-slot="5"]{top:80%}
 .comfort-play .pile-zone{top:66%}
}
@media(prefers-reduced-motion:reduce){.comfort-play *,.comfort-play *::before,.comfort-play *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* One header row on both solo and online tables. Panels overlay the table. */
body.comfort-play :is(.topbar.has-sound-control,.game-head){
 position:relative;z-index:30;display:flex;align-items:center;flex-wrap:nowrap;gap:12px;padding-right:0;
}
body.comfort-play :is(.topbar.has-sound-control,.game-head)>.brand{
 flex:0 1 auto;min-width:0;margin-right:auto;grid-column:auto;
}
body.comfort-play :is(.topbar,.game-head) .game-console-menu{
 position:static;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;flex-wrap:nowrap;width:auto;gap:8px;margin:0;
}
body.comfort-play .topbar .game-audio-control{
 position:static;flex:0 0 auto;order:3;align-self:center;padding-left:12px;margin:0;border-left:1px solid #edd8bd38;
}
body.comfort-play .topbar .comfort-settings-toggle{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;
 padding:7px 12px;border:1px solid #d4bfdf55;border-radius:10px;background:#243850;color:#d7edf2;font:600 14px/1.5 'Chakra Petch',sans-serif;white-space:nowrap;
}
body.comfort-play .topbar .comfort-settings{
 display:none;position:absolute;z-index:2;top:calc(100% + 12px);right:62px;left:auto;
 width:min(470px,100%);max-height:calc(100dvh - 105px);overflow-y:auto;margin:0;padding:14px;gap:12px;
 border:1px solid #c9e2f44a;border-radius:14px;background:#1a2b48;box-shadow:0 15px 35px #06112680;
}
body.comfort-play .topbar .comfort-settings.is-open{display:flex;flex-wrap:wrap}
body.comfort-play .topbar .comfort-settings .seat-picker{flex:1 1 185px;justify-content:center;min-width:0}
body.comfort-play .game-head .room-head{flex:1 1 auto;min-width:0}
body.comfort-play .game-head .room-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.comfort-play .topbar .game-console-menu>#newGameButton{margin-right:0}
@media(max-width:1100px){
 body.comfort-play :is(.topbar,.game-head) .comfort-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
 body.comfort-play :is(.topbar,.game-head) .game-console-menu #siteNav.comfort-menu-open{
  position:absolute;z-index:2;top:calc(100% + 12px);right:0;left:auto;display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));width:min(440px,100%);max-height:calc(100dvh - 105px);
  overflow-y:auto;flex-basis:auto;margin:0;padding:10px;gap:8px;background:#2e2038;
 }
 body.comfort-play .game-head .room-head{display:none}
}
@media(max-width:700px){
 body.comfort-play :is(.topbar.has-sound-control,.game-head){gap:8px;min-height:48px}
 body.comfort-play .topbar.has-sound-control>.brand{flex:0 1 auto}
 body.comfort-play .topbar .brand{gap:8px}
 body.comfort-play .topbar .brand-mark{width:36px;height:36px;flex:0 0 36px;font-size:23px;border-radius:11px}
 body.comfort-play .topbar .brand h1{font-size:23px}
 body.comfort-play .topbar .brand p{display:none}
 body.comfort-play :is(.topbar,.game-head) .game-console-menu{gap:6px}
 body.comfort-play .topbar .game-audio-control{padding-left:8px}
 body.comfort-play .topbar .comfort-settings{right:0}
 body.comfort-play .topbar .game-console-menu>#newGameButton{order:0;min-height:44px;padding:6px 10px;font-size:14px}
}
@media(max-width:480px){
 body.comfort-play :is(.topbar,.game-head) .comfort-control-label{display:none}
 body.comfort-play :is(.topbar,.game-head) :is(.comfort-menu-toggle,.comfort-settings-toggle){width:44px;padding:7px;font-size:19px}
 body.comfort-play .game-head .brand small{display:none}
}
@media(max-width:350px){
 body.comfort-play .topbar .brand>div{display:none}
 body.comfort-play .topbar .game-console-menu>#newGameButton{padding-inline:8px}
}

/* A long online hand must start inside its scroll area, never before it. */
body.comfort-play .player-area #hand{justify-content:flex-start!important}
@media(orientation:landscape) and (max-height:600px) and (min-width:701px){
 body.comfort-play .game-shell:has(.game-head) .game-table{grid-column:1;grid-row:2}
 body.comfort-play .game-shell:has(.game-head) .player-area{grid-column:2;grid-row:2}
 body.comfort-play .player-area .controls button{font-size:14px}
}