/* Final play layout: flexible page height keeps controls outside the board. */
.match-presence{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;color:#5d7390;font-size:11px;flex-wrap:wrap}.match-presence button{min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid #dce5ef;background:#fff;color:#a45d48;font:inherit}
.social-dialog{width:min(480px,calc(100vw - 24px));border:1px solid #dce6f2;border-radius:20px;padding:22px;color:#40536e;background:#f8fbff}.social-dialog::backdrop{background:#20334b66;backdrop-filter:blur(4px)}.social-dialog>div{height:300px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px}.social-dialog textarea{box-sizing:border-box;width:100%;min-height:80px;padding:12px;border:1px solid #dce6f2;border-radius:12px;font:inherit}.social-dialog button{margin:8px 3px}.chat-mine,.chat-other{max-width:85%;padding:12px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.chat-mine{background:#e1edff;align-self:flex-start}.chat-other{background:#dff7ef;align-self:flex-end}
.hand-history{background:#fff;border:1px solid #dce6f1;border-radius:12px;padding:12px;color:#536984;overflow:auto}.hand-history summary{cursor:pointer;font-size:12px}.hand-history table{width:100%;margin-top:12px;border-collapse:collapse;white-space:nowrap}.hand-history th,.hand-history td{text-align:center;padding:8px;border-bottom:1px solid #edf1f7;font-size:11px}.final-standings{border-top:1px solid #e4eaf3;margin-top:10px;padding-top:8px}.final-standings p{margin:5px;font-size:12px}
.deposit-panel{display:grid;gap:16px;min-width:0}.deposit-panel>img{justify-self:center;max-width:100%;height:auto;border:1px solid #e1e7ef;border-radius:16px;background:white}.deposit-panel label{display:grid;gap:8px;color:#53647b;font-size:13px}.deposit-panel input{width:100%;box-sizing:border-box;min-height:46px;padding:10px;border:1px solid #dce5ef;border-radius:10px;background:#f8faff;color:#34465a;min-width:0}.deposit-panel p{line-height:1.9;color:#526780}.deposit-panel #depositAddress{font-family:monospace;font-size:clamp(10px,2.4vw,14px)}
.earn-status{display:inline-flex!important;padding:8px 14px;border-radius:999px;background:#fff2ce;color:#815213!important;font-size:12px!important;font-weight:700}
.card-route .playing-card{backface-visibility:hidden;-webkit-tap-highlight-color:transparent}
.card-route .live-hand .playing-card{transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 3px 8px #17255425;border-radius:7px}
.card-route .live-hand .playing-card.selected{outline:3px solid #3366ff;outline-offset:2px;box-shadow:0 8px 20px #3366ff30;transform:translateY(-12px)}
.card-route .live-hand .playing-card:focus-visible{outline:3px solid #ffb84a;outline-offset:3px}
.card-route .hand-seat.active,.card-route .card-seat.active,.card-route .uno-seat.active{border-color:#ffc857;box-shadow:0 0 0 3px #ffc85735,0 5px 16px #0002}
.card-route .hand-round-result{max-width:calc(100% - 32px);box-sizing:border-box;border-radius:18px;background:#fff;color:#35445c;border:2px solid #ffc857;line-height:1.9;box-shadow:0 12px 36px #123b3925}
.card-route .hand-round-result b,.card-route .hand-round-result span{color:#35445c}
.card-route .live-actions button:focus-visible{outline:3px solid #ffc857;outline-offset:3px}
.card-route dialog{border:1px solid #dce5ef;border-radius:20px;padding:22px;color:#40516a;max-width:calc(100vw - 32px);box-shadow:0 20px 80px #17255430}
.card-route dialog::backdrop{background:#23394c65;backdrop-filter:blur(4px)}
.card-route dialog button{min-width:64px;min-height:48px;margin:4px;border:1px solid #dce5ef;border-radius:12px;background:#f4f8ff;color:#34465c;font:inherit;cursor:pointer}
@media(hover:hover){.card-route .live-actions button:not(:disabled):hover{box-shadow:0 4px 12px #3366ff18;filter:none;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.card-route .live-hand .playing-card,.card-route .live-actions button{transition:none!important}}
.room-layout.upgraded{gap:22px;align-items:start}
.room-browser,.lobby-preview{border-radius:22px;min-height:0;border:1px solid #dde7f0;box-shadow:0 8px 30px #31578008}
.room-browser{padding:16px}
.room-list-head{padding:8px 4px 18px;color:#42536b}
.room-item{border-radius:16px;padding:16px;gap:14px;margin-bottom:10px}
.room-item.selected{background:#eff5ff;border-color:#a8c4ff;box-shadow:inset -3px 0 #3366ff}
.room-game-icon{border-radius:14px;background:#e6faf6;color:#168d82}
.room-info h3{font-size:15px;margin:0 0 6px;overflow-wrap:anywhere}
.room-info p{font-size:12px;line-height:1.8}
.join-room-btn{min-height:44px;border-radius:12px;padding:10px 16px}
.join-room-btn:disabled{background:#e9edf3;color:#8390a3;cursor:not-allowed}
.lobby-preview{padding:22px;background:linear-gradient(145deg,#fff,#f4fbff)}
.lobby-top{gap:10px;align-items:center;flex-wrap:wrap}
.lobby-top h3{font-size:20px;margin:8px 0}
.room-code{font-variant-numeric:tabular-nums;border-radius:9px;padding:8px 12px;direction:ltr}
.lobby-table{min-height:340px;margin:42px 22px;border:5px solid #64c6b8;border-radius:48%;background:radial-gradient(ellipse,#30a99b,#218379);box-shadow:inset 0 0 0 3px #ffffff20,0 14px 30px #23877918}
.lobby-seat{max-width:112px;color:#fff;background:#236f69;border:1px solid #ffffff50;border-radius:14px;padding:8px 12px}
.lobby-seat>span{box-shadow:0 0 0 3px #ffffff30;background:#ffc857;color:#6c4c13;width:40px;height:40px}
.lobby-seat b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-seat small{color:#dcfff7}
.lobby-center{max-width:46%;text-align:center;color:white}
.lobby-center small{color:#daf6ef;line-height:1.8}
.lobby-meta{gap:8px}
.lobby-meta>span{border-radius:12px;padding:12px;background:#f2f6fc}
.lobby-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.lobby-actions button{min-height:44px;border-radius:12px;flex:1;white-space:nowrap}
.room-filters{border-radius:16px;padding:14px;gap:12px;margin-bottom:16px}
.room-filters input,.room-filters select{min-height:44px;background:white;border:1px solid #dce6f1;border-radius:10px;color:#465770}
.room-empty{padding:40px 18px;text-align:center;color:#60718b;line-height:1.9}
@media(max-width:620px){.room-browser,.lobby-preview{border-radius:16px;padding:12px}.room-item{padding:12px}.lobby-table{margin:34px 14px;min-height:310px}.lobby-seat{min-width:58px;padding:6px;max-width:82px}.lobby-seat b{max-width:70px;font-size:11px}.lobby-seat>span{width:32px;height:32px}.lobby-center b{font-size:14px}.lobby-actions button{flex-basis:40%}.room-info h3{font-size:14px}}
.card-route .online-trix-layout{display:grid;gap:8px;width:min(72%,580px);height:auto;max-height:240px;overflow:auto}
.online-trix-layout>div{display:flex;align-items:center;direction:ltr;min-height:48px}
.card-route .online-trix-layout .playing-card{width:40px!important;min-width:40px;margin-left:-18px}
.card-route .online-domino-chain{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:4px;width:65%;height:auto;min-height:160px;max-height:270px;overflow:auto}
.online-domino-chain .domino-tile{width:44px;min-height:76px;flex-shrink:0}
.card-route{background:#f3f7fb;color:#25334a}
.card-route .lab-header{background:#fff;border-bottom:1px solid #dce5ef;box-shadow:0 3px 16px #3366ff08}
.card-route .lab-header a{color:#42536c}
.card-route .lab-header a.active{background:#3366ff;color:white;border-radius:10px}
.card-route .lab-brand img{width:148px;height:44px;object-fit:contain}
.card-route .live-game{width:100%;min-width:0;height:auto!important;gap:10px}
.card-route .match-strip{width:100%;box-sizing:border-box;background:#fff;color:#35445d;border:1px solid #dce5ef;border-radius:16px;box-shadow:0 4px 16px #25406b08;gap:12px;flex-wrap:wrap;margin-bottom:0}
.card-route .live-status{color:#25416a;overflow-wrap:anywhere}
.card-route .live-status small{display:block;font-size:11px;line-height:1.7;font-variant-numeric:tabular-nums}
.card-route .live-actions{position:relative;height:auto;flex-shrink:0;gap:8px;padding:8px 4px 16px;min-height:52px}
.card-route .live-actions button{border-radius:12px;background:#fff;color:#34445b;border:1px solid #d1ddea;min-height:44px}
.card-route .live-actions button.primary{background:#3366ff;border-color:#3366ff;color:#fff}
.card-route .live-actions button:disabled{opacity:.42;cursor:not-allowed}
.card-route .live-hand{flex-shrink:0;min-height:160px;opacity:1!important;filter:none!important;scroll-padding:12px}
.card-route .live-hand .playing-card{filter:none!important}
.card-route .card-arena,.card-route .uno-arena{min-height:420px;flex:none;border-radius:28px;border-width:5px}
.card-route .hand-felt{min-height:650px;flex:none;border-radius:28px;border-width:5px}
.card-route .hand-piles{top:48%;padding:12px;gap:22px}
.card-route .table-melds{inset:90px 12px 12px}
.card-route .owner-1{max-width:56%;top:0}
.card-route .owner-0{max-width:62%;bottom:0}
.card-route .owner-2,.card-route .owner-3{max-width:25%;top:40%}
.card-route .table-meld{flex-shrink:0;max-width:100%;pointer-events:auto;min-height:50px}
.card-route .table-meld .playing-card{width:48px;min-width:48px;margin-left:-25px}
.card-route .hand-scoreboard{margin:0;gap:6px}
.card-route .hand-scoreboard span{background:#fff;border:1px solid #dce5ef;color:#44516a;border-radius:10px}
.card-route .hand-scoreboard b{color:#3366ff}
.card-route .hand-seat,.card-route .card-seat,.card-route .uno-seat{max-width:150px;border-radius:12px;overflow-wrap:anywhere;color:#fff}
.card-route .round-strip{color:#52637c;padding:6px;flex-wrap:wrap}
@media(max-width:700px){
 .card-route .lab-main{padding:6px!important}
 .card-route .lab-header{min-height:48px;height:auto!important;gap:6px;padding:6px}
 .card-route .lab-header nav{min-width:0;overflow-x:auto;flex:1}
 .card-route .match-strip{padding:8px!important;border-radius:12px;min-height:52px;gap:6px;font-size:10px}
 .card-route .live-status{min-width:80px;font-size:11px}
 .card-route .card-arena,.card-route .uno-arena{min-height:380px}
 .card-route .hand-felt{min-height:660px;padding:8px}
 .card-route .hand-piles{top:47%;gap:12px;padding:8px}
 .card-route .hand-piles .playing-card{width:64px}
 .card-route .hand-seat,.card-route .card-seat,.card-route .uno-seat{max-width:88px;min-width:60px;font-size:10px}
 .card-route .table-melds{inset:74px 6px 8px}
 .card-route .owner-1,.card-route .owner-0{max-width:95%}
 .card-route .owner-2,.card-route .owner-3{top:58%;max-width:47%}
 .card-route .table-meld .playing-card{width:42px;min-width:42px;margin-left:-23px}
 .card-route .live-hand{min-height:145px;padding-top:24px!important}
 .card-route .live-actions{padding-bottom:max(14px,env(safe-area-inset-bottom));flex-wrap:wrap}
 .card-route .live-actions button{font-size:11px;min-height:44px;padding:8px 12px}
}
@media(max-height:500px) and (orientation:landscape){
 .card-route .lab-header{position:relative}
 .card-route .card-arena,.card-route .uno-arena{min-height:340px}
 .card-route .hand-felt{min-height:570px}
}