/* R3: fixed application chrome; mutually exclusive layouts. No desktop transform scaling. */
html,body.r3{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.r3{padding:0!important;background:#030a13}
.r3 #app{height:var(--app-height,100dvh);width:100%;overflow:hidden;position:relative}
.r3 .app-shell{height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(#030a13ec,#030a13f2),var(--keyart) center/cover no-repeat}
.r3 .app-scroll{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
.r3 .topbar,.r3 .review-strip{flex:none;position:relative}
.r3 .topbar{padding-top:max(10px,env(safe-area-inset-top,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.r3 .page{min-height:0;width:100%;padding-bottom:26px}
.r3 .page:before{display:none}
.r3 .home{width:100%}
.r3 .page-title{min-width:0;align-items:center;gap:12px}
.r3 .page-title>div{min-width:0}.r3 .page-title h1{overflow-wrap:anywhere}
.r3 .brand,.r3 .admin-brand,.r3 .auth-brand,.r3 .r2-auth-brand{background:none!important;border:0!important;box-shadow:none!important}
.r3 .brand-image{display:block;max-width:100%;height:auto;object-fit:contain;background:transparent!important;border:0!important;border-radius:0!important;filter:drop-shadow(0 -1px .6px #000d) drop-shadow(0 1px .45px #b2d7ed40)}
.r3 .r2-felt img{border-radius:0!important;background:transparent}
.r3 dialog{max-width:calc(100vw - 24px);max-height:calc(var(--app-height,100dvh) - 24px);padding:0;overflow:hidden}
.r3 #dialog-content{display:flex;flex-direction:column;max-height:calc(var(--app-height,100dvh) - 26px)}
.r3 .modal-head{flex:none}.r3 .modal-body{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
.r3 .auth-page{min-height:100%;height:auto;padding:28px;display:grid;place-items:center;background-attachment:fixed}
.r3 .auth-panel{max-width:450px;width:100%;margin:auto}
.r3 .auth-page .brand-image{width:100%}
.r3 .auth-note{overflow-wrap:anywhere}
.r3 .r2-waiting{container-type:inline-size;background:radial-gradient(ellipse at 50% 46%,color-mix(in srgb,var(--waiting-accent) 13%,transparent),transparent 67%),var(--waiting-background)}
.r3 .r2-felt{border-color:var(--waiting-rim);background:radial-gradient(ellipse,color-mix(in srgb,var(--waiting-table) 75%,var(--waiting-accent)),var(--waiting-table));box-shadow:0 0 0 2px color-mix(in srgb,var(--waiting-accent) 18%,#3b546b),0 16px 38px #0008,inset 0 0 50px #020710aa}
.r3 .r2-waiting[data-table-shape=rounded-square] .r2-felt{border-radius:16%}
.r3 .r2-seat{background:var(--waiting-seat);left:var(--desktop-x);top:var(--desktop-y)}
.r3 .r2-seat.own{border-color:var(--waiting-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--waiting-accent) 27%,transparent),0 8px 20px #0006}
.r3 .r2-seat:hover:not(:disabled){border-color:var(--waiting-accent)}
.r3 .roomlayout{min-width:0}.r3 .roomlayout>section{min-width:0}
.r3 .waiting-actions{flex-wrap:wrap;gap:8px;min-height:52px}
.r3 .r2-felt>div{max-width:94%}.r3 .r2-felt strong{max-width:100%;overflow-wrap:anywhere}
.r3 .waiting-unavailable{padding:28px}
.r3 .r2-chat-panel{display:flex;flex-direction:column;height:min(650px,calc(var(--app-height,100dvh) - 235px));min-height:290px}
.r3 .r2-public-messages{height:auto;min-height:0;flex:1}
.r3 .r2-chat-composer{flex:none}.r3 .r2-chat-composer textarea{min-height:44px;resize:none;max-height:96px}
.r3 .admin-shell{height:100%;display:flex;overflow:hidden}
.r3 .admin-sidebar{position:relative!important;height:100%!important;flex:0 0 230px;width:230px;overflow-y:auto;padding-top:max(22px,env(safe-area-inset-top,0px))}
.r3 .admin-main{margin:0!important;max-width:none!important;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.r3 .admin-header{flex:none;padding:22px 26px;margin:0;border-bottom:1px solid #234052;min-width:0}
.r3 .admin-content{min-height:0;flex:1;overflow:auto;padding:24px 26px;overscroll-behavior:contain}
.r3 .admin-main .table-scroll{max-width:100%;overscroll-behavior-x:contain}
.r3 .admin-login{height:100%;overflow:auto}
.r3 #toast{max-width:calc(100vw - 28px);bottom:max(20px,env(safe-area-inset-bottom,0px));pointer-events:none}
html[data-layout=desktop] .r3 .r2-seat{--seat-width:clamp(74px,22cqw,112px);width:var(--seat-width);left:clamp(calc(var(--seat-width)/2 + 2px),var(--desktop-x),calc(100% - var(--seat-width)/2 - 2px));top:var(--desktop-y)}
html[data-layout=desktop] .r3 .roomlayout{grid-template-columns:minmax(0,1fr) 285px}
html[data-layout=desktop] .r3 .roominfo{display:flex;flex-direction:column}
/* Phone portrait is the primary design. */
html[data-layout=mobile-portrait] .r3 .topbar{display:flex;flex-wrap:wrap;gap:7px;height:auto;min-height:0;padding:10px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
html[data-layout=mobile-portrait] .r3 .brand{width:176px;max-width:49%;min-width:0}
html[data-layout=mobile-portrait] .r3 .header-user{gap:6px;min-width:0;margin-left:auto}.r3 .header-user>div{min-width:0}
html[data-layout=mobile-portrait] .r3 .header-user>div{max-width:82px;font-size:11px}
html[data-layout=mobile-portrait] .r3 .header-user .iconbtn{width:38px;height:44px;padding:8px}
html[data-layout=mobile-portrait] .r3 .mainnav{display:flex;position:static;flex-basis:100%;order:3;width:100%;gap:0;overflow-x:auto;margin:0;padding:0;background:none}
html[data-layout=mobile-portrait] .r3 .mainnav a{flex:1 0 42px;min-height:52px;padding:5px 2px;gap:3px;flex-direction:column;justify-content:center;font-size:10px;line-height:1.3;white-space:nowrap}
html[data-layout=mobile-portrait] .r3 .mainnav svg{width:17px;height:17px}
html[data-layout=mobile-portrait] .r3 .mainnav a span{display:inline}
html[data-layout=mobile-portrait] .r3 .review-strip{padding:4px 14px;font-size:10px;min-height:25px}
html[data-layout=mobile-portrait] .r3 .review-strip .test-mode-label{display:none}
html[data-layout=mobile-portrait] .r3 .page{padding:18px 12px 24px}
html[data-layout=mobile-portrait] .r3 h1{font-size:23px}
html[data-layout=mobile-portrait] .r3 .page-title{flex-wrap:wrap;margin-bottom:16px}
html[data-layout=mobile-portrait] .r3 .page-title .right{gap:7px;flex-wrap:wrap}
html[data-layout=mobile-portrait] .r3 .btn{min-height:44px}
html[data-layout=mobile-portrait] .r3 .input{font-size:16px;min-height:44px}
html[data-layout=mobile-portrait] .r3 .grid.two,html[data-layout=mobile-portrait] .r3 .grid.three{grid-template-columns:minmax(0,1fr)}
html[data-layout=mobile-portrait] .r3 .home-hero{height:218px;min-height:0;background-position:50% 50%}
html[data-layout=mobile-portrait] .r3 .home-content{padding:0 12px 20px}
html[data-layout=mobile-portrait] .r3 .game-grid{display:grid;grid-template-columns:1fr;gap:12px}
html[data-layout=mobile-portrait] .r3 .game-card{min-height:190px}
html[data-layout=mobile-portrait] .r3 .roomlayout{grid-template-columns:1fr;gap:14px}
html[data-layout=mobile-portrait] .r3 .roominfo{display:grid;grid-template-columns:minmax(0,1fr)}
html[data-layout=mobile-portrait] .r3 .roominfo .panel:last-child{grid-column:auto}
html[data-layout=mobile-portrait] .r3 .r2-waiting{height:590px;max-width:520px}
html[data-layout=mobile-portrait] .r3 .r2-seat{left:clamp(39px,var(--portrait-x),calc(100% - 39px));top:var(--portrait-y);width:74px;min-height:106px}
html[data-layout=mobile-portrait] .r3 .roomlayout .waiting-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout=mobile-portrait] .r3 .service-layout{display:flex;flex-direction:column;gap:16px}
html[data-layout=mobile-portrait] .r3 .sidenav{display:flex;overflow:auto;flex:none;padding:0}
html[data-layout=mobile-portrait] .r3 .sidenav a{flex:1 0 auto;white-space:nowrap;padding:10px;font-size:11px;min-height:44px}
html[data-layout=mobile-portrait] .r3 .sidenav a svg{display:none}
html[data-layout=mobile-portrait] .r3 .auth-page{padding:16px 12px;align-items:start}
html[data-layout=mobile-portrait] .r3 .auth-panel{padding:22px 20px}
html[data-layout=mobile-portrait] .r3 .r2-auth-brand{width:100%;margin-bottom:16px}
html[data-layout=mobile-portrait] .r3 .r2-auth-language{margin-bottom:12px}
html[data-layout=mobile-portrait] .r3 .profile-hero{display:flex;flex-wrap:wrap;padding:18px}
html[data-layout=mobile-portrait] .r3 .r2-chat-grid{grid-template-columns:1fr}
html[data-layout=mobile-portrait] .r3 .r2-chat-grid aside{display:none}
html[data-layout=mobile-portrait] .r3 .r2-chat-panel{height:calc(var(--app-height,100dvh) - 249px);min-height:250px}
html[data-layout=mobile-portrait] .r3 .admin-shell{display:flex;flex-direction:column}
html[data-layout=mobile-portrait] .r3 .admin-sidebar{width:100%;height:auto!important;flex:none;overflow:hidden;padding:12px 14px 0}
html[data-layout=mobile-portrait] .r3 .admin-brand{width:166px}.r3 .admin-brand .brand-image{width:100%}
html[data-layout=mobile-portrait] .r3 .admin-sidebar>p{margin:4px 0 8px;font-size:10px}
html[data-layout=mobile-portrait] .r3 .admin-sidebar nav{display:flex;flex-direction:row;overflow:auto;gap:4px}
html[data-layout=mobile-portrait] .r3 .admin-sidebar nav>a{flex-shrink:0;white-space:nowrap;min-height:44px;padding:10px;font-size:12px}
html[data-layout=mobile-portrait] .r3 .admin-main{height:auto;min-height:0}
html[data-layout=mobile-portrait] .r3 .admin-header{padding:14px;gap:10px}
html[data-layout=mobile-portrait] .r3 .admin-content{padding:14px}
html[data-layout=mobile-portrait] .r3 .admin-main .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Phone landscape has a compact header, two-column content and its own seat geometry. */
html[data-layout=mobile-landscape] .r3 .topbar{display:grid;grid-template-columns:150px minmax(0,1fr) auto;grid-template-rows:48px;gap:10px;height:auto;min-height:0;padding:2px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
html[data-layout=mobile-landscape] .r3 .brand{width:150px;min-width:0;max-width:none;grid-column:1;grid-row:1}
html[data-layout=mobile-landscape] .r3 .header-user{grid-column:3;grid-row:1;min-width:0;gap:4px;margin:0}
html[data-layout=mobile-landscape] .r3 .header-user>div{display:none}
html[data-layout=mobile-landscape] .r3 .header-user .r2-avatar{width:28px;height:28px}
html[data-layout=mobile-landscape] .r3 .header-user .iconbtn{width:38px;height:44px;padding:8px}
html[data-layout=mobile-landscape] .r3 .mainnav{grid-column:2;grid-row:1;display:flex;position:static;order:0;width:auto;min-width:0;gap:0;overflow-x:auto;padding:0;background:none}
html[data-layout=mobile-landscape] .r3 .mainnav a{flex:1 0 42px;min-height:46px;padding:2px 3px;gap:2px;flex-direction:column;justify-content:center;font-size:10px;line-height:1.2;white-space:nowrap}
html[data-layout=mobile-landscape] .r3 .mainnav svg{width:15px;height:15px}
html[data-layout=mobile-landscape] .r3 .mainnav a span{display:inline}
html[data-layout=mobile-landscape] .r3 .review-strip{padding:2px 14px;font-size:9px;min-height:20px}
html[data-layout=mobile-landscape] .r3 .review-strip .test-mode-label{display:inline}
html[data-layout=mobile-landscape] .r3 .page{padding:10px max(14px,env(safe-area-inset-right,0px)) 16px max(14px,env(safe-area-inset-left,0px))}
html[data-layout=mobile-landscape] .r3 .page-title{margin-bottom:10px;align-items:center;flex-wrap:nowrap}
html[data-layout=mobile-landscape] .r3 .page-title h1{font-size:20px;line-height:1.25}
html[data-layout=mobile-landscape] .r3 .page-title p{font-size:11px;margin-top:3px}
html[data-layout=mobile-landscape] .r3 .page-title .eyebrow{display:none}
html[data-layout=mobile-landscape] .r3 .page-title .right{flex-shrink:0;gap:6px}
html[data-layout=mobile-landscape] .r3 .btn{min-height:44px;padding:7px 12px;font-size:12px}
html[data-layout=mobile-landscape] .r3 .input{font-size:16px;min-height:44px}
html[data-layout=mobile-landscape] .r3 .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout=mobile-landscape] .r3 .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-layout=mobile-landscape] .r3 .home-hero{height:170px;min-height:0;background-position:50% 50%}
html[data-layout=mobile-landscape] .r3 .home-content{padding:0 14px 20px}
html[data-layout=mobile-landscape] .r3 .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html[data-layout=mobile-landscape] .r3 .game-card{height:200px;min-height:200px}
html[data-layout=mobile-landscape] .r3 .game-card h2{font-size:20px}
html[data-layout=mobile-landscape] .r3 .game-card .content{padding:14px}
html[data-layout=mobile-landscape] .r3 .roomlayout{grid-template-columns:minmax(0,1fr) 210px;gap:12px;align-items:start}
html[data-layout=mobile-landscape] .r3 .roominfo{display:flex;flex-direction:column;gap:12px;max-height:calc(var(--app-height,100dvh) - 140px);overflow-y:auto;overscroll-behavior:contain}
html[data-layout=mobile-landscape] .r3 .roominfo .panel{flex:none}
html[data-layout=mobile-landscape] .r3 .roominfo .panel-body{padding:12px}
html[data-layout=mobile-landscape] .r3 .roominfo .panel-header{padding:10px 12px}
html[data-layout=mobile-landscape] .r3 .roominfo .keyval{font-size:11px;gap:6px}
html[data-layout=mobile-landscape] .r3 .r2-waiting{height:max(244px,calc(var(--app-height,100dvh) - 195px));max-width:none;border-radius:16px}
html[data-layout=mobile-landscape] .r3 .r2-seat{left:var(--landscape-x);top:var(--landscape-y);width:64px;min-height:64px;height:64px;border-radius:10px;padding:4px 2px;gap:1px;box-shadow:0 3px 9px #0005}
html[data-layout=mobile-landscape] .r3 .r2-seat .r2-avatar{width:23px;height:23px}
html[data-layout=mobile-landscape] .r3 .r2-seat .avatar-flag{width:13px!important;height:10px!important}
html[data-layout=mobile-landscape] .r3 .r2-seat strong{font-size:9px;line-height:1.15}
html[data-layout=mobile-landscape] .r3 .r2-seat small{font-size:8px;line-height:1.1}
html[data-layout=mobile-landscape] .r3 .r2-seat .gold{font-size:9px;line-height:1.15}
html[data-layout=mobile-landscape] .r3 .r2-empty-seat{width:21px;height:21px;font-size:18px}
html[data-layout=mobile-landscape] .r3 .r2-seat-no{left:3px;top:3px;width:13px;height:13px;font-size:8px;line-height:13px}
html[data-layout=mobile-landscape] .r3 .r2-felt{left:22%;right:22%;top:29%;bottom:25%;border-width:6px;border-radius:46%}
html[data-layout=mobile-landscape] .r3 .r2-felt img{width:34px;height:34px}
html[data-layout=mobile-landscape] .r3 .r2-felt strong{font-size:12px}
html[data-layout=mobile-landscape] .r3 .r2-felt small{font-size:9px}
html[data-layout=mobile-landscape] .r3 .r2-felt>div{gap:3px}
html[data-layout=mobile-landscape] .r3 .waiting-actions{margin-top:8px;padding:0;justify-content:flex-start}
html[data-layout=mobile-landscape] .r3 .service-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px}
html[data-layout=mobile-landscape] .r3 .sidenav{display:block;height:max-content}
html[data-layout=mobile-landscape] .r3 .sidenav a{min-height:44px;padding:10px;font-size:12px}
html[data-layout=mobile-landscape] .r3 .sidenav svg{display:none}
html[data-layout=mobile-landscape] .r3 .auth-page{padding:12px 20px;place-items:start center}
html[data-layout=mobile-landscape] .r3 .auth-panel{max-width:720px;padding:18px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:32px;align-items:start}
html[data-layout=mobile-landscape] .r3 .auth-panel>*{grid-column:1}
html[data-layout=mobile-landscape] .r3 .auth-panel form{grid-column:2;grid-row:1/span 7;margin:0}
html[data-layout=mobile-landscape] .r3 .auth-panel .r2-auth-brand{margin:4px 0 14px}
html[data-layout=mobile-landscape] .r3 .auth-panel .r2-auth-language{justify-content:flex-start;margin-bottom:8px}
html[data-layout=mobile-landscape] .r3 .auth-panel h1{font-size:21px}
html[data-layout=mobile-landscape] .r3 .auth-panel .subtitle{margin:6px 0 12px;font-size:12px}
html[data-layout=mobile-landscape] .r3 .auth-panel .auth-note{font-size:10px;margin:8px 0}
html[data-layout=mobile-landscape] .r3 .auth-panel .or{display:none}
html[data-layout=mobile-landscape] .r3 .auth-panel .tabs{margin-bottom:10px}
html[data-layout=mobile-landscape] .r3 .r2-chat-grid{grid-template-columns:minmax(0,1fr)}
html[data-layout=mobile-landscape] .r3 .r2-chat-grid aside{display:none}
html[data-layout=mobile-landscape] .r3 .r2-chat-panel{height:calc(var(--app-height,100dvh) - 144px);min-height:230px}
html[data-layout=mobile-landscape] .r3 .r2-chat-panel .panel-header{padding:9px 14px}
html[data-layout=mobile-landscape] .r3 .r2-chat-composer{padding:8px}
html[data-layout=mobile-landscape] .r3 .admin-sidebar{flex-basis:166px;width:166px;padding:12px;height:100%!important}
html[data-layout=mobile-landscape] .r3 .admin-sidebar nav{display:flex;flex-direction:column;overflow:visible}
html[data-layout=mobile-landscape] .r3 .admin-sidebar nav a{min-height:44px;padding:8px;font-size:12px}
html[data-layout=mobile-landscape] .r3 .admin-brand{width:142px}
html[data-layout=mobile-landscape] .r3 .admin-sidebar>p{font-size:10px}
html[data-layout=mobile-landscape] .r3 .admin-header{padding:10px 14px;gap:8px}
html[data-layout=mobile-landscape] .r3 .admin-header h1{font-size:21px}
html[data-layout=mobile-landscape] .r3 .admin-header .eyebrow{display:none}
html[data-layout=mobile-landscape] .r3 .admin-content{padding:14px}
@media(max-width:600px){html[data-layout=mobile-landscape] .r3 .roomlayout{grid-template-columns:minmax(0,1fr) 166px;gap:8px}html[data-layout=mobile-landscape] .r3 .topbar{grid-template-columns:118px minmax(0,1fr) 60px;gap:6px}html[data-layout=mobile-landscape] .r3 .brand{width:118px}}
@media(max-width:355px){html[data-layout=mobile-portrait] .r3 .r2-seat{width:64px;min-height:100px;left:clamp(34px,var(--portrait-x),calc(100% - 34px))}html[data-layout=mobile-portrait] .r3 .header-user .r2-avatar{display:none}html[data-layout=mobile-portrait] .r3 .mainnav a{flex-basis:39px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.r3 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Room entry is always visible in portrait: semantic table becomes native room cards. */
html[data-layout=mobile-portrait] .r3 .table-scroll:has(#room-table){overflow:visible}
html[data-layout=mobile-portrait] .r3 #room-table,html[data-layout=mobile-portrait] .r3 #room-table tbody{display:block;width:100%}
html[data-layout=mobile-portrait] .r3 #room-table thead{display:none}
html[data-layout=mobile-portrait] .r3 #room-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:15px;border-bottom:1px solid #234052}
html[data-layout=mobile-portrait] .r3 #room-table td{display:block;padding:0;border:0;white-space:normal;min-width:0;font-size:13px;overflow-wrap:anywhere}
html[data-layout=mobile-portrait] .r3 #room-table td[data-label]:not(.room-name):before{content:attr(data-label);display:block;font-size:10px;color:#8cabc1;margin-bottom:3px}
html[data-layout=mobile-portrait] .r3 #room-table .room-name{grid-column:1/-1;font-size:16px;margin-bottom:3px}
html[data-layout=mobile-portrait] .r3 #room-table .room-enter{grid-column:1/-1;margin-top:4px}
html[data-layout=mobile-portrait] .r3 #room-table .room-enter .btn{width:100%;min-height:44px}
html[data-layout=mobile-portrait] .r3 .lobby-identity{display:flex;flex-wrap:wrap;padding:16px;min-height:0;gap:12px;height:auto}
html[data-layout=mobile-portrait] .r3 .lobby-identity>.row{width:100%}
html[data-layout=mobile-portrait] .r3 .lobby-identity .row>.btn{flex:1}
html[data-layout=mobile-portrait] .r3 .r2-lobby-title{min-width:0}
html[data-layout=mobile-portrait] .r3 .filters{display:flex;flex-wrap:wrap}
html[data-layout=mobile-portrait] .r3 .filters .search{flex-basis:100%}
html[data-layout=mobile-landscape] .r3 .lobby-identity{height:auto;min-height:90px;padding:14px;gap:12px}
html[data-layout=mobile-landscape] .r3 .lobby-identity .r2-lobby-title{min-width:0}
html[data-layout=mobile-landscape] .r3 .lobby-identity h1{font-size:22px}