/* Mobile/tablet presentation. Existing menu and gameplay controls remain authoritative. */ #mobile-study[hidden]{display:none} #mobile-study{display:none;--mobile-table-ready:1;--rail-mask:polygon(7.400% 28.200%,7.503% 26.268%,7.811% 24.345%,8.322% 22.441%,9.035% 20.565%,9.945% 18.726%,11.048% 16.933%,12.340% 15.196%,13.812% 13.521%,15.459% 11.918%,17.273% 10.395%,19.244% 8.958%,21.363% 7.615%,23.619% 6.372%,26.002% 5.236%,28.500% 4.211%,31.101% 3.303%,33.792% 2.517%,36.559% 1.856%,39.391% 1.323%,42.272% 0.921%,45.189% 0.652%,48.127% 0.517%,51.073% 0.517%,54.011% 0.652%,56.928% 0.921%,59.809% 1.323%,62.641% 1.856%,65.408% 2.517%,68.099% 3.303%,70.700% 4.211%,73.198% 5.236%,75.581% 6.372%,77.837% 7.615%,79.956% 8.958%,81.927% 10.395%,83.741% 11.918%,85.388% 13.521%,86.860% 15.196%,88.152% 16.933%,89.255% 18.726%,90.165% 20.565%,90.878% 22.441%,91.389% 24.345%,91.697% 26.268%,91.800% 28.200%,91.800% 70.800%,91.697% 72.732%,91.389% 74.655%,90.878% 76.559%,90.165% 78.435%,89.255% 80.274%,88.152% 82.067%,86.860% 83.804%,85.388% 85.479%,83.741% 87.082%,81.927% 88.605%,79.956% 90.042%,77.837% 91.385%,75.581% 92.628%,73.198% 93.764%,70.700% 94.789%,68.099% 95.697%,65.408% 96.483%,62.641% 97.144%,59.809% 97.677%,56.928% 98.079%,54.011% 98.348%,51.073% 98.483%,48.127% 98.483%,45.189% 98.348%,42.272% 98.079%,39.391% 97.677%,36.559% 97.144%,33.792% 96.483%,31.101% 95.697%,28.500% 94.789%,26.002% 93.764%,23.619% 92.628%,21.363% 91.385%,19.244% 90.042%,17.273% 88.605%,15.459% 87.082%,13.812% 85.479%,12.340% 83.804%,11.048% 82.067%,9.945% 80.274%,9.035% 78.435%,8.322% 76.559%,7.811% 74.655%,7.503% 72.732%,7.400% 70.800%)} body.mobile-study-live #mobile-study{display:block;position:relative;flex:1;min-height:0;margin-top:0;padding-top:48px;isolation:isolate;background:none;container-type:size} /* One room behind the whole game screen, as on desktop (assets/table-skin.css): the floor runs on under the table and the action bar, and a room's --room-img/--room-shade applies here too (Shaun, 2026-11-10: "the floor should show under the table like it does on desktop"). It painted only inside #mobile-study before, so the floor stopped above the buttons. */ body.mobile-study-live #table-screen{background:linear-gradient(rgb(0 0 0 / var(--room-shade,.12)),rgb(0 0 0 / var(--room-shade,.12))),var(--room-img,url('desktop-lounge/room-v5.webp')) center / cover no-repeat #080c09} body.mobile-study-live #table-screen .table-area{position:absolute;opacity:0;pointer-events:none;inset:48px 0 150px;min-height:0;overflow:hidden} body.mobile-study-live #table-screen{height:var(--game-visible-height,100dvh);min-height:0;overflow:hidden} #mobile-study .study-art{position:absolute;top:88px;bottom:4px;left:var(--rail-left,4px);width:var(--rail-width,calc(100% - 8px));z-index:-1;background:url('mobile-table/table-v4.webp?v=2') center/100% 100% no-repeat;clip-path:var(--rail-mask)} #mobile-study .study-grid{height:100%;display:grid;grid-template-rows:minmax(0,1.1fr) minmax(0,1fr) 100px minmax(0,1fr) minmax(0,1.1fr);padding:8px 12px} #mobile-study .study-top,#mobile-study .study-hero{display:flex;align-items:center;justify-content:center} #mobile-study .study-pair{display:flex;align-items:center;justify-content:space-between} #mobile-study .study-group{display:flex;gap:8px;align-items:flex-end} #mobile-study .study-group:last-child{flex-direction:row-reverse} #mobile-study .study-seat{position:relative;width:82px;flex:none;text-align:center} #mobile-study .study-portrait{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:64px;background:none;border:0;padding:0;clip-path:inset(-20px -45px 0);cursor:pointer} #mobile-study .study-avatar{width:56px;height:56px;object-fit:cover;border-radius:50%;border:2px solid #bca774} #mobile-study .study-cards{display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%,33.333%);gap:0} #mobile-study .study-cards .card{width:30px;height:40px;min-width:0;flex:none;border-radius:4px;margin:0} #mobile-study .study-cards .card+.card{margin-left:-5px} #mobile-study .study-cards .card:first-child{rotate:-3deg} #mobile-study .study-cards .card:last-child{rotate:3deg} #mobile-study .study-cards:has(.card:nth-child(4)) .card{width:24px;height:34px;rotate:0deg;transform:none;margin-left:-6px} #mobile-study .study-plaque{position:relative;background:#141918;border:1px solid #8e8267;border-radius:2px;padding:4px;line-height:1.2;min-height:34px} #mobile-study .study-name{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eee9dc} #mobile-study .study-stack{display:block;font-size:12px;font-weight:700;color:#ddc58a} #mobile-study .study-action{position:absolute;bottom:100%;left:0;width:100%;font-size:9px;color:#eee9dc;background:#141918} #mobile-study .study-action:empty{display:none} #mobile-study .active-turn .study-plaque{border-color:#ffe15a;box-shadow:0 0 10px #ddc58a55} /* Only players sitting out are dimmed, as on desktop; a fold isn't (Shaun, 2026-11-10: "i thought we only dim the sat out players not the players who fold"). Their "Sitting out" line stays bright. */ #mobile-study .is-sitting-out .study-avatar,#mobile-study .is-sitting-out .study-name{opacity:.45} #mobile-study .study-timer{height:3px;background:#302e26;position:absolute;bottom:-3px;left:4px;right:4px;overflow:hidden} #mobile-study .study-timer i{display:block;background:#e0be72;max-width:100%;height:100%} #mobile-study .study-bet{width:40px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:none;font-size:10px;color:#ddc58a;font-weight:700} #mobile-study .study-bet>span{line-height:16px;height:16px;white-space:nowrap} #mobile-study .study-bet .chip-tower{height:28px;display:flex;align-items:flex-end;gap:2px} /* Use the current game's perspective chip sprites, stacked vertically at every seat. */ #mobile-study .chip-col{display:flex;flex-direction:column;position:relative;isolation:isolate} #mobile-study .chip-col .chip-disc2{width:18px;height:14.25px;zoom:1;border:0;border-radius:0;transform:none;box-shadow:none;background:center / 18px 14.25px no-repeat;position:relative;z-index:calc(31 - var(--chip-i,1))} #mobile-study .chip-disc2::before,#mobile-study .chip-disc2::after{display:none} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-12px} #mobile-study .chip-col .c-white{background-image:image-set(url('chips/stack-white.png?v=5') 1x,url('chips/stack-white@2x.png?v=5') 2x)} #mobile-study .chip-col .c-red{background-image:image-set(url('chips/stack-red.png?v=5') 1x,url('chips/stack-red@2x.png?v=5') 2x)} #mobile-study .chip-col .c-green{background-image:image-set(url('chips/stack-green.png?v=5') 1x,url('chips/stack-green@2x.png?v=5') 2x)} #mobile-study .chip-col .c-black{background-image:image-set(url('chips/stack-black.png?v=5') 1x,url('chips/stack-black@2x.png?v=5') 2x)} #mobile-study .chip-col .c-purple{background-image:image-set(url('chips/stack-purple.png?v=5') 1x,url('chips/stack-purple@2x.png?v=5') 2x)} #mobile-study .chip-col .c-gold{background-image:image-set(url('chips/stack-gold.png?v=5') 1x,url('chips/stack-gold@2x.png?v=5') 2x)} #mobile-study .chip-col .c-crimson{background-image:image-set(url('chips/stack-crimson.png?v=5') 1x,url('chips/stack-crimson@2x.png?v=5') 2x)} #mobile-study .chip-disc2:nth-child(2){--chip-i:2} #mobile-study .chip-disc2:nth-child(3){--chip-i:3} #mobile-study .chip-disc2:nth-child(4){--chip-i:4} #mobile-study .chip-disc2:nth-child(5){--chip-i:5} #mobile-study .chip-disc2:nth-child(6){--chip-i:6} #mobile-study .chip-disc2:nth-child(7){--chip-i:7} #mobile-study .chip-disc2:nth-child(8){--chip-i:8} #mobile-study .chip-disc2:nth-child(9){--chip-i:9} #mobile-study .study-seat>.study-bet{position:absolute;left:50%;transform:translateX(-50%)} #mobile-study .study-top .study-bet{top:calc(100% + 6px)} #mobile-study .study-hero .study-bet{bottom:calc(100% + 4px)} #mobile-study .study-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px} #mobile-study .study-pot{font-size:12px;border-radius:20px;background:#141918;color:#ddc58a;padding:4px 12px} #mobile-study .study-board{display:flex;gap:4px} #mobile-study .study-board .card{width:38px;height:53px;min-width:0;flex:none;border-radius:4px} #mobile-study .study-hero .study-seat{width:104px} #mobile-study .study-hero .study-cards .card{width:44px;height:60px} #mobile-study .study-hero .study-cards:has(.card:nth-child(4)) .card{width:30px;height:42px} /* 10% smaller than before (Shaun, 2026-11-10: "they all look a bit big, maybe like 8-12%"); the D is drawn, centred in the circle by its own geometry, because a font's letter lands up to 1.5px off depending on where the button falls ("make sure the d is centered vertically and horizontally exactly"). The text stays for screen readers. */ #mobile-study .study-dealer{position:absolute;top:calc(100% + 8px);width:14px;height:14px;border-radius:50%;background:#eee9dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23111' fill-rule='evenodd' d='M4.8 4.3H7.5C9.8 4.3 11.2 5.8 11.2 8S9.8 11.7 7.5 11.7H4.8ZM6.4 5.7V10.3H7.4C8.8 10.3 9.5 9.4 9.5 8S8.8 5.7 7.4 5.7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;font-size:0;color:transparent;overflow:hidden} #mobile-study [data-slot="left"] .study-dealer{left:calc(100% + 16px)} #mobile-study [data-slot="right"] .study-dealer{right:calc(100% + 16px)} #mobile-study [data-slot="top"] .study-dealer{left:calc(50% + 30px)} #mobile-study [data-slot="hero"] .study-dealer{top:-16px;left:calc(50% + 28px)} body.mobile-study-live .table-header .brand{display:block} body.mobile-study-live #table-screen .table-header{flex:none;z-index:300} /* Full felt only on really short or narrow screens; 601-740 tall and phone-shaped (a phone in Safari with its toolbars) keeps the rail and room with the compact seats below; squarer windows that short keep the felt (their lower bets met the rail's corners) (Shaun, 2026-11-09: "i expected table view" on an iPhone 12 in Safari). */ @media(max-height:600px),(max-width:359px),(max-height:740px) and (min-aspect-ratio:4/5){ body.mobile-study-live #mobile-study{background:#0c4930} #mobile-study .study-art{inset:0;width:auto;clip-path:none;border-radius:0;background-size:300% 200%} #mobile-study [data-slot="left"] .study-dealer,#mobile-study [data-slot="right"] .study-dealer{left:calc(50% - 8px);right:auto} } @media(max-height:740px),(max-width:359px){ #mobile-study .study-seat{width:76px} #mobile-study .study-portrait{height:40px} #mobile-study .study-avatar{width:36px;height:36px} #mobile-study .study-grid{padding:4px 8px;grid-template-rows:repeat(2,minmax(0,1fr)) 84px repeat(2,minmax(0,1fr))} #mobile-study .study-hero .study-cards .card{width:40px;height:54px} } body.mobile-study-live #btn-table-avatar::after{content:'settings';position:absolute;inset:0;display:grid;place-items:center;background:#141918;color:#eee9dc;border-radius:5px;font-family:'Material Symbols Rounded';font-size:26px;font-weight:400;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24} body.mobile-study-live #btn-table-avatar{position:relative} #mobile-study .study-badges{position:absolute;bottom:-6px;left:-6px;width:calc(100% + 12px);display:flex;justify-content:space-between;pointer-events:none} #mobile-study .study-badges>span{display:block;width:12px;height:12px;border-radius:50%} /* The real mobile raise tray opens above the action row: reserve its lane. */ body.mobile-study-live #mobile-study{margin-bottom:52px} body.mobile-study-live #btn-table-avatar::after{inset:-2px;border-radius:6px} body.mobile-study-live #table-screen .header-nav.open{max-height:calc(100dvh - 8px);overflow-y:auto} /* Keep the header controls, with the room/felt continuous behind them. */ body.mobile-study-live #table-screen #btn-table-avatar{border:0;border-radius:6px;background:none;box-shadow:none;outline:none;overflow:hidden} body.mobile-study-live #table-screen #btn-table-avatar:focus-visible{outline:2px solid var(--muck-text);outline-offset:3px} body.mobile-study-live #table-screen .action-btns-col{--act-h:67px} /* Portrait tablets: one bounded table, with its cards and seats scaled together. */ @media(min-width:600px) and (orientation:portrait){ body.mobile-study-live #mobile-study{width:min(100%,680px);align-self:center;--study-scale:1.5} #mobile-study .study-grid{transform:scale(var(--study-scale));transform-origin:top left;height:calc(100% / var(--study-scale));width:calc(100% / var(--study-scale))} body.mobile-study-live #table-screen .action-btns-col{--act-h:76px} } /* Header controls sit directly on the room, aligned with the viewport edge. */ body.mobile-study-live #table-screen .header-right:has(> .mt-chat-btn:not([hidden])){background:transparent;border-color:transparent;box-shadow:none} body.mobile-study-live #table-screen #btn-table-avatar::after{background:transparent} /* Center side avatars on the straight rail, including tablet scaling. */ @media(min-width:360px) and (min-height:741px),(min-width:360px) and (min-height:601px) and (max-aspect-ratio:79/100){ #mobile-study .study-pair{margin-inline:-4px} } body.mobile-study-live #table-screen .action-btns-col #sizing-row .btn-quick{height:44px;min-height:44px} /* Explicit face metrics also work on Safari versions without container units. */ #mobile-study .card{--face-w:30px;--face-h:40px} #mobile-study .study-board .card{--face-w:38px;--face-h:53px} #mobile-study .study-hero .card{--face-w:44px;--face-h:60px} #mobile-study .study-cards:has(.card:nth-child(4)) .card{--face-w:24px;--face-h:34px} #mobile-study .study-hero .study-cards:has(.card:nth-child(4)) .card{--face-w:30px;--face-h:42px} #mobile-study .card .rank{font-size:calc(var(--face-h) * .26);font-variation-settings:'wght' 900} #mobile-study .card .suit{font-size:calc(var(--face-w) * .4);font-variation-settings:'wght' 400} #mobile-study .study-name,#mobile-study .study-pot{font-variation-settings:'wght' 400} #mobile-study .study-stack,#mobile-study .study-bet{font-variation-settings:'wght' 700} @media(max-height:740px),(max-width:359px){ #mobile-study .study-hero .card{--face-w:40px;--face-h:54px} } /* Static instances of the same Inter font avoid old Safari variable-weight rendering. Subset to Latin (+ Latin-1/Extended-A for names; ranks only need ASCII): other characters fall back to the site's Inter. */ @font-face{font-family:'Inter Study';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-static-400.woff2') format('woff2')} @font-face{font-family:'Inter Study';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-static-700.woff2') format('woff2')} @font-face{font-family:'Inter Study';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-static-900.woff2') format('woff2')} #mobile-study{font-family:'Inter Study',Inter,sans-serif} #mobile-study .card .rank{font-family:'Inter Study',Inter,sans-serif} @media(max-width:329px){ #mobile-study .study-board .card{width:32px;height:45px;--face-w:32px;--face-h:45px} } #mobile-study > .pot-push-clone{z-index:40;pointer-events:none} #mobile-study .study-pot.pot-hidden{visibility:hidden} #mobile-study > #level-up-toast,#mobile-study > #prop-toast{z-index:45} /* Heads-up "is away" countdown (table.js _startAwayCountdown): carried over from the hidden table, below the header */ #mobile-study > #disconnect-banner{top:56px;left:12px;right:12px;transform:none;z-index:45} #mobile-study > #disconnect-banner .disconnect-banner-inner{white-space:normal} #mobile-study .study-bet.sweeping{animation:none} #mobile-study .study-portrait .avatar-emote-overlay{pointer-events:none} #mobile-study .study-seat.is-gone{visibility:hidden} #mobile-study .study-plaque.study-winner{border-color:#ddc58a;box-shadow:0 0 12px #ddc58a55} /* All live table sizes share the same seat components and action controls. */ #mobile-study[data-seats="2"] .study-grid{grid-template-rows:minmax(100px,1fr) 0 140px 0 minmax(100px,1fr)} #mobile-study[data-seats="2"] .study-art{left:4px;width:calc(100% - 8px)} #mobile-study .study-dual-label{font-size:10px} #mobile-study.study-dual .study-grid{grid-template-rows:repeat(2,minmax(0,1fr)) 156px repeat(2,minmax(0,1fr))} #mobile-study.study-dual .study-center{gap:12px} #mobile-study.study-dual .study-board{position:relative} #mobile-study.study-dual .study-board::before{content:attr(aria-label);position:absolute;right:calc(100% + 5px);top:50%;transform:translateY(-50%);font-size:8px;color:#ddc58a;width:25px} #mobile-study .study-cards:has(.card:nth-child(5)) .card{width:22px;height:31px;--face-w:22px;--face-h:31px;margin-left:-7px} #mobile-study .study-hero .study-cards:has(.card:nth-child(5)) .card{width:27px;height:38px;--face-w:27px;--face-h:38px;margin-left:-7px} @media(max-height:740px){ #mobile-study.study-dual .study-grid{grid-template-rows:repeat(2,minmax(0,1fr)) 124px repeat(2,minmax(0,1fr))} #mobile-study.study-dual .study-portrait{height:28px} #mobile-study.study-dual .study-avatar{width:26px;height:26px} #mobile-study.study-dual .study-plaque{min-height:28px;padding:2px 4px} #mobile-study.study-dual .study-board .card{width:30px;height:42px;--face-w:30px;--face-h:42px} #mobile-study.study-dual .study-center{gap:8px} #mobile-study.study-dual .study-bet{height:32px} #mobile-study.study-dual .study-bet .chip-tower{height:16px} } /* Landscape is a wide table, with three seats along each end and boards between. */ @media(orientation:landscape){ body.mobile-study-live #mobile-study{width:100%;max-width:1180px;align-self:center;padding-top:44px;margin-bottom:40px;--study-scale:1} #mobile-study .study-art{clip-path:var(--rail-mask);top:50px;bottom:4px;left:0;width:100%;background-size:100% 100%} #mobile-study .study-grid,#mobile-study[data-seats="2"] .study-grid,#mobile-study.study-dual .study-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:minmax(0,1fr) 68px minmax(0,1fr);padding:0 24px} #mobile-study .study-top{grid-column:2;grid-row:1} #mobile-study .study-hero{grid-column:2;grid-row:3} #mobile-study .study-upper{grid-column:1 / -1;grid-row:1} #mobile-study .study-lower{grid-column:1 / -1;grid-row:3} #mobile-study .study-center{grid-column:1 / -1;grid-row:2;gap:8px;pointer-events:none} #mobile-study .study-board{pointer-events:auto} #mobile-study .study-portrait{height:34px} #mobile-study .study-avatar{width:32px;height:32px} #mobile-study .study-plaque{min-height:30px;padding:2px 4px} #mobile-study .study-seat{width:82px} #mobile-study .study-group{gap:8px} #mobile-study .study-top .study-bet{top:auto;bottom:0;left:calc(100% + 10px);transform:none} #mobile-study .study-hero .study-bet{bottom:0;left:-50px;transform:none} #mobile-study.study-dual .study-grid{grid-template-rows:minmax(0,1fr) 100px minmax(0,1fr)} #mobile-study.study-dual .study-center{display:grid;grid-template-columns:auto auto;gap:8px 24px} #mobile-study.study-dual .study-pot{grid-column:1 / -1;justify-self:center} #mobile-study.study-dual .study-board .card{width:30px;height:42px;--face-w:30px;--face-h:42px} #mobile-study.study-dual .study-board::before{display:none} body.mobile-study-live #table-screen .bottom-zone{min-height:0;flex:none} body.mobile-study-live #table-screen .action-btns-col{--act-h:48px} body.mobile-study-live #table-screen .action-btns-col #sizing-row .btn-quick{height:32px;min-height:32px} } @media(orientation:landscape) and (min-height:600px){ #mobile-study .study-portrait{height:64px} #mobile-study .study-avatar{width:56px;height:56px} #mobile-study .study-grid,#mobile-study[data-seats="2"] .study-grid,#mobile-study.study-dual .study-grid{grid-template-rows:minmax(0,1fr) 120px minmax(0,1fr);padding:0 12%} #mobile-study.study-dual .study-grid{grid-template-rows:minmax(0,1fr) 156px minmax(0,1fr)} #mobile-study.study-dual .study-board .card{width:38px;height:53px;--face-w:38px;--face-h:53px} body.mobile-study-live #table-screen .action-btns-col{--act-h:67px} } @media(max-height:520px) and (orientation:landscape){ body.mobile-study-live #mobile-study{grid-column:1;grid-row:1;height:100%;min-height:0;margin:0;padding:0;width:100%;align-self:stretch} #mobile-study .study-art{top:0;bottom:0} #mobile-study .study-grid,#mobile-study.study-dual .study-grid,#mobile-study[data-seats="2"] .study-grid{padding:0 12px} body.mobile-study-live #table-screen .bottom-zone{min-height:0;height:100%;margin:0} body.mobile-study-live #table-screen .action-btns-col{--act-h:48px} } @media(min-width:600px) and (orientation:portrait){ #mobile-study[data-seats="2"] .study-grid{grid-template-rows:minmax(100px,1fr) 0 200px 0 minmax(100px,1fr)} } @media(max-height:520px) and (orientation:landscape){ body.mobile-study-live #table-screen{grid-template-rows:minmax(0,1fr)} body.mobile-study-live #mobile-study{grid-row:1} body.mobile-study-live #table-screen .bottom-zone{grid-row:1;justify-content:flex-end} } @media(orientation:portrait) and (max-height:600px){ #mobile-study .study-portrait{height:28px} #mobile-study .study-avatar{width:26px;height:26px} #mobile-study .study-plaque{min-height:28px;padding:2px 4px} #mobile-study .study-group{gap:6px} #mobile-study .study-bet{width:28px;font-size:9px} #mobile-study .chip-col .chip-disc2{width:14px;height:11px;background-size:14px 11px} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-9px} #mobile-study .study-bet .chip-tower{gap:0} } @media(orientation:portrait){ #mobile-study[data-seats="2"] .study-grid{grid-template-rows:minmax(0,1fr) 0 200px 0 minmax(0,1fr)} } @media(orientation:portrait) and (max-height:600px){ #mobile-study:not(.study-dual):not([data-seats="2"]) .study-grid{grid-template-rows:repeat(2,minmax(0,1fr)) 112px repeat(2,minmax(0,1fr))} } body.mobile-study-live:has(#bvb-action-log) #mobile-study{margin-bottom:88px} @media(max-height:520px) and (orientation:landscape){ body.mobile-study-live #table-screen #sizing-row{grid-template-columns:40px 1fr 1fr 40px} body.mobile-study-live #table-screen #sizing-row #quick-bets{display:flex;grid-area:1 / 2 / 2 / 4} body.mobile-study-live #table-screen #sizing-row #quick-bets .btn-quick{flex:1;min-width:0} #mobile-study .study-bet{width:24px;font-size:9px} #mobile-study .study-top .study-bet{top:calc(100% + 2px);bottom:auto;left:50%;transform:translateX(-50%);height:32px} #mobile-study .study-hero .study-bet{bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);height:32px} #mobile-study .study-top .chip-tower,#mobile-study .study-hero .chip-tower{height:16px} } /* Donut mode retains its denomination artwork, scaled within the same bet lane. */ body.donut-mode #mobile-study .chip-tower{scale:.6;transform-origin:bottom center} @media(max-height:520px) and (orientation:landscape){ #mobile-study .chip-col .chip-disc2{width:12px;height:9.5px;background-size:12px 9.5px} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-7.5px} #mobile-study .study-bet .chip-tower{gap:0} body.donut-mode #mobile-study .chip-tower{scale:.45} } /* Keep the source winner lift, with clearance for the compact two-board lane. */ #mobile-study.study-dual .study-board .card:is(.winning-card,.winning-card--b){translate:0 5px} @media(orientation:landscape){ #mobile-study .study-board .card:is(.winning-card,.winning-card--b){translate:0 5px} } @media(max-height:520px) and (orientation:landscape){ #mobile-study .study-top{translate:0 -8px} #mobile-study .study-hero{translate:0 10px} } @media(max-width:600px) and (orientation:landscape){ body.mobile-study-live #table-screen{grid-template-columns:minmax(0,1fr) 180px} body.mobile-study-live #table-screen .table-header{max-width:180px} body.mobile-study-live #table-screen .action-btns-col{--act-h:44px} body.mobile-study-live #table-screen #sizing-row{padding-top:0} body.mobile-study-live #table-screen .action-btns-col #sizing-row .btn-quick{height:28px;min-height:28px} } @media(max-height:520px) and (orientation:landscape){ body.mobile-study-live:has(#bvb-action-log) #table-screen{grid-template-columns:minmax(0,1fr)} body.mobile-study-live:has(#bvb-action-log) #table-screen .bottom-zone{display:none} body.mobile-study-live:has(#bvb-action-log) #mobile-study{height:calc(100% - 88px);margin-bottom:0} } @media(max-height:520px) and (orientation:landscape){ body.mobile-study-live:has(#bvb-action-log) #mobile-study :is(.study-top,.study-hero) .study-bet{top:auto;bottom:0;left:calc(100% + 8px);transform:none} } /* Portrait rail: only the straight middle of the art stretches; the curved ends keep the art's own shape at any height (Shaun, 2026-11-10: "why does it make the top and bottom skinny?" - the 2:3 art squashed into a squarer box). The cut image carries the rail mask as transparency; the slices are the art's straight section, 28.2%-70.8% of its height (433px and 449px of 1,536). Container units size the ends from the art's width; browsers without them keep the stretched picture above. assets/mobile-table-live.js fitRailToPlaques follows the same geometry. */ @supports (width:1cqw){ @media(orientation:portrait) and (min-height:601px) and (min-width:360px) and (max-aspect-ratio:79/100){ #mobile-study .study-art{--art-w:var(--rail-width,calc(100cqw - 8px));background:none;clip-path:none;border:0 solid transparent;border-image:url('mobile-table/table-v4-cut.webp?v=2') 433 0 449 0 fill / calc(var(--art-w) * .4228) 0 calc(var(--art-w) * .438) 0 stretch} #mobile-study[data-seats="2"] .study-art{--art-w:calc(100cqw - 8px)} } } /* Phones in portrait, Safari or the home-screen app (Shaun, 2026-11-10: "the cards and chips and stuff are super small tbh and hard to see the board"; then, saved to the home screen at 390x844: "bets and plaques seem a bit small"). The parts you read are sized up; single board with 3-6 seats (heads-up and the dual board keep their own layouts). Tablets (600+ wide) scale the whole table. */ @media(orientation:portrait) and (min-height:601px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ #mobile-study:not([data-seats="2"]):not(.study-dual) .study-grid{grid-template-rows:minmax(0,1.1fr) minmax(0,1fr) 124px minmax(0,1fr) minmax(0,1.1fr)} #mobile-study:not(.study-dual) .study-center{gap:10px} /* the board stays on the felt: up to 52px a card, never past the gold line (Shaun: "the board going OFF the edges of the felt onto the rail is bad, but its fine if it goes a bit closer"). The felt inside the gold is 72.75% of the art's width (the slim-rail table-v4: 132-877 of 1,024; it was 65.3% before the slim rail); five cards, four 3px gaps and 3px each side: card = width x .1455 - 3.6px. */ #mobile-study:not(.study-dual) .study-board{gap:3px;--board-card:min(52px,calc(var(--rail-width,calc(100cqw - 8px)) * .1455 - 3.6px))} #mobile-study:not(.study-dual) .study-board .card{width:var(--board-card);height:calc(var(--board-card) * 1.385);border-radius:5px;--face-w:var(--board-card);--face-h:calc(var(--board-card) * 1.385)} #mobile-study .study-pot{font-size:14px;padding:4px 14px} #mobile-study .study-hero .study-seat{width:112px} #mobile-study .study-hero .study-cards .card,#mobile-study .study-hero .card{width:52px;height:70px;border-radius:5px;--face-w:52px;--face-h:70px} #mobile-study .study-hero .study-cards:has(.card:nth-child(4)) .card{width:38px;height:52px;--face-w:38px;--face-h:52px} #mobile-study .study-hero .study-cards:has(.card:nth-child(5)) .card{width:33px;height:46px;--face-w:33px;--face-h:46px} #mobile-study .study-cards .card{width:32px;height:43px;--face-w:32px;--face-h:43px} #mobile-study .study-bet{width:52px;height:50px;font-size:13px} #mobile-study .study-bet>span{line-height:18px;height:18px} #mobile-study .study-bet .chip-tower{height:32px} #mobile-study .chip-col .chip-disc2{width:23px;height:18.2px;background-size:23px 18.2px} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-15.3px} #mobile-study .study-name{font-size:11px} #mobile-study .study-stack{font-size:13px} #mobile-study .study-dealer{width:18px;height:18px} /* your cards stand above your plate on short screens: your bet sits clear of them (Shaun: "still overlap on bet") */ #mobile-study .study-hero .study-bet{bottom:calc(100% + 14px)} } /* Short (601-740: an iPhone 12 in Safari is 390x664): the felt uses the room above the rail ("we can use some of the top space better") */ @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-aspect-ratio:79/100){ #mobile-study:not([data-seats="2"]) .study-art{top:66px} /* a mid-length straight band until mobile-table-live.js picks the one that fits */ @supports (width:1cqw){#mobile-study .study-art{border-image-source:url('mobile-table/table-v4-s358.webp?v=2')}} #mobile-study:not([data-seats="2"]):not(.study-dual) .study-grid{padding:0 8px 2px;grid-template-rows:minmax(0,1fr) minmax(0,1fr) 124px minmax(0,1fr) minmax(0,1fr)} } /* Tall phones (741+, the home-screen app): room for a step more on the plates, bets and your cards */ @media(orientation:portrait) and (min-height:741px) and (min-width:360px) and (max-width:599px){ #mobile-study .study-name{font-size:12px} #mobile-study .study-stack{font-size:15px} #mobile-study .study-plaque{min-height:40px;padding:5px 4px} #mobile-study .study-bet{font-size:14px} #mobile-study .chip-col .chip-disc2{width:25px;height:19.8px;background-size:25px 19.8px} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-16.6px} #mobile-study .study-hero .study-cards .card,#mobile-study .study-hero .card{width:56px;height:76px;--face-w:56px;--face-h:76px} } /* Tablets held sideways (iPad landscape): the table was drawn at phone size on a felt 650px+ wide (Shaun, 2026-11-10: "the sizing here looks fucked"). Seats, cards, bets and the board scale together, as portrait tablets do, so the table reads as about 680x400 (1.5 at most: the table is capped at 1,180px wide, and more squeezes the top bets into each other). */ @media(orientation:landscape) and (min-height:700px) and (min-width:820px){ body.mobile-study-live #mobile-study{--study-scale:1.2} #mobile-study .study-grid{transform:scale(var(--study-scale));transform-origin:top left;height:calc(100% / var(--study-scale));width:calc(100% / var(--study-scale))} } @media(orientation:landscape) and (min-height:760px) and (min-width:920px){body.mobile-study-live #mobile-study{--study-scale:1.35}} @media(orientation:landscape) and (min-height:820px) and (min-width:1020px){body.mobile-study-live #mobile-study{--study-scale:1.5}} /* Phone and tablet table, second pass (Shaun, 2026-11-10, from iPhone 12 Safari shots: zoomed "puts the board and my bets in a weird spot", 6-max "needs to be taller and the board needs to not quite extend so much it touches the rails", heads-up "also taller and the elements need to be sized and placed better"; approved from local before/after mocks). */ /* Every single-board portrait table: the pot floats above the board instead of holding a row of its own, so the board is centered between the seats (it sat ~20px low, even preflop when the pot is hidden). Card sizes are set on the center so the pot can sit just above the board. vw, not cqw: the cards are containers themselves, so cqw inside them shrank the faces. */ @media(orientation:portrait){ #mobile-study:not(.study-dual) .study-center{position:relative;translate:0 var(--board-shift,0px)} #mobile-study:not(.study-dual) .study-pot{position:absolute;left:50%;bottom:calc(50% + var(--board-h,53px) / 2 + 8px);translate:-50% 0} } /* Zoomed phones (full felt, 600 tall or less, or under 360 wide): seats start at the top beside the logo, bigger board */ @media(orientation:portrait) and (max-height:600px),(orientation:portrait) and (max-width:359px){ body.mobile-study-live #mobile-study{padding-top:6px} #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:min(42px,calc((100vw - 96px) / 5));--board-h:calc(var(--board-card) * 1.385)} #mobile-study:not(.study-dual) .study-board{gap:4px} #mobile-study:not(.study-dual) .study-board .card{width:var(--board-card);height:var(--board-h);border-radius:4px;--face-w:var(--board-card);--face-h:var(--board-h)} /* your chips sat on the tops of your cards here */ #mobile-study .study-hero .study-bet{bottom:calc(100% + 14px)} } /* Phones in Safari (601-740 tall, phone-shaped): the table starts higher (the top seat's cards are the limit, not the logo), heads-up gets the same wide table as 6-max, and the board keeps clear of the gold line. */ @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ body.mobile-study-live #mobile-study{padding-top:2px} #mobile-study .study-art,#mobile-study:not([data-seats="2"]) .study-art{top:32px} #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:min(52px,calc(var(--rail-width,calc(100vw + 68px)) * .1455 - 6.4px));--board-h:calc(var(--board-card) * 1.385)} #mobile-study:not(.study-dual) .study-board{gap:4px} #mobile-study [data-slot="hero"] .study-dealer{top:auto;bottom:11px;left:calc(100% + 8px)} /* heads-up: the same wide table, both players on the rail, the opponent's plate as big as yours */ #mobile-study[data-seats="2"] .study-art{left:-30px;width:calc(100% + 68px);--art-w:calc(100vw + 68px)} #mobile-study[data-seats="2"]:not(.study-dual) :is(.study-center,.study-board){--board-card:min(52px,calc((100vw + 68px) * .1455 - 6.4px))} #mobile-study[data-seats="2"] .study-top{align-self:start} #mobile-study[data-seats="2"] .study-hero{align-self:end} #mobile-study[data-seats="2"] .study-top .study-seat{width:112px} } /* Tall phones and the home-screen app (741+): the same clearance from the gold line (8px is fine, Shaun: "even like 6-8px from the gold line is fine if needed") */ @media(orientation:portrait) and (min-height:741px) and (min-width:360px) and (max-width:599px){ #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:min(56px,calc(var(--rail-width,calc(100vw - 8px)) * .1455 - 6.4px));--board-h:calc(var(--board-card) * 1.385)} #mobile-study:not(.study-dual) .study-board{gap:4px} /* the table starts higher here too, and heads-up gets the same wide table (Shaun: "do the other sizes need tweaks like this?") */ body.mobile-study-live #mobile-study{padding-top:2px} #mobile-study .study-art{top:40px} #mobile-study[data-seats="2"] .study-art{left:-30px;width:calc(100% + 68px);--art-w:calc(100vw + 68px)} #mobile-study[data-seats="2"]:not(.study-dual) :is(.study-center,.study-board){--board-card:min(56px,calc((100vw + 68px) * .1455 - 6.4px))} #mobile-study[data-seats="2"] .study-top{align-self:start} #mobile-study[data-seats="2"] .study-hero{align-self:end} #mobile-study[data-seats="2"] .study-top .study-seat{width:112px} /* heads-up only: its top came up too far here (Shaun: "the top could come down a bit") */ #mobile-study[data-seats="2"] .study-art{top:72px} #mobile-study[data-seats="2"] .study-top{margin-top:32px} } /* Tablets (portrait, and sideways from 600 tall): there's room, so the board is the size of your own cards (44x60 before the tablet scale) instead of 38x53 (Shaun, 2026-11-10: "make them the size of the players cards if we have room") */ @media(min-width:600px) and (orientation:portrait),(orientation:landscape) and (min-height:600px){ #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:44px;--board-h:60px} #mobile-study:not(.study-dual) .study-board .card{width:44px;height:60px;border-radius:5px;--face-w:44px;--face-h:60px} } /* Nit + Red or Black tables: the side-pot box sits top right under the menu (about 51-121px down, assets/style.css), so on these phones the upper seats sit a little lower, clear of it; the box shows the whole time you're seated, so nothing jumps. */ @media(orientation:portrait) and (max-height:600px),(orientation:portrait) and (max-width:359px){ body.mobile-study-live:has(#prop-corner-panel:not(.hidden)) #mobile-study:not([data-seats="2"]){padding-top:48px} } @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ body.mobile-study-live:has(#prop-corner-panel:not(.hidden)) #mobile-study:not([data-seats="2"]){padding-top:24px} body.mobile-study-live:has(#prop-corner-panel:not(.hidden)) #mobile-study:not([data-seats="2"]) .study-art{top:52px} } /* The rail's straight band that fits this table is picked in assets/mobile-table-live.js fitRailToPlaques from the drawn size (table-v4-s.webp, set inline), so the felt is never stretched or squeezed more than ~10%. */ /* Seats, third pass (Shaun, 2026-11-10: "i feel like the pfp is very small", "on heads up generally the plaques/player should be bigger/closer in since theres more room"; on smaller screens "move the plaque up a bit to cover the bottom of the image ... just make it uniform for all players"). Approved from local before/after mocks; the 3-4 handed seats are in mobile-table-live.js. */ /* Bigger pictures on phones: the plate covers the bottom of each one, the same at every seat, so no seat gets taller */ @media(orientation:portrait) and (max-height:740px),(orientation:portrait) and (max-width:359px){ #mobile-study:not(.study-dual) .study-portrait{height:40px;align-items:flex-end} #mobile-study:not(.study-dual) .study-avatar{width:48px;height:48px;margin-bottom:-10px} } /* zoomed phones (full felt): a step smaller, their seats were 28px pictures */ @media(orientation:portrait) and (max-height:600px),(orientation:portrait) and (max-width:359px){ #mobile-study:not(.study-dual) .study-portrait{height:30px} #mobile-study:not(.study-dual) .study-avatar{width:42px;height:42px;margin-bottom:-12px} } /* Heads-up: bigger seats, closer to the board */ @media(orientation:portrait) and (min-height:601px) and (max-width:599px){ #mobile-study[data-seats="2"]:not(.study-dual) .study-seat{width:136px} #mobile-study[data-seats="2"]:not(.study-dual) .study-portrait{height:54px} #mobile-study[data-seats="2"]:not(.study-dual) .study-avatar{width:64px;height:64px} #mobile-study[data-seats="2"]:not(.study-dual) .study-name{font-size:13px} #mobile-study[data-seats="2"]:not(.study-dual) .study-stack{font-size:17px} #mobile-study[data-seats="2"]:not(.study-dual) .study-plaque{min-height:44px;padding:5px 4px} #mobile-study[data-seats="2"]:not(.study-dual) .study-top .study-cards .card{width:42px;height:57px;--face-w:42px;--face-h:57px} #mobile-study[data-seats="2"]:not(.study-dual) .study-hero .study-cards .card{width:58px;height:79px;--face-w:58px;--face-h:79px} } @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ #mobile-study[data-seats="2"]:not(.study-dual) .study-top{margin-top:16px} #mobile-study[data-seats="2"]:not(.study-dual) .study-hero{margin-bottom:26px} } /* zoomed heads-up: a taller middle so the seats sit against it (the opponent's bet clears the pot) */ @media(orientation:portrait) and (max-height:600px),(orientation:portrait) and (max-width:359px){ #mobile-study[data-seats="2"]:not(.study-dual) .study-seat{width:120px} #mobile-study[data-seats="2"]:not(.study-dual) .study-name{font-size:12px} #mobile-study[data-seats="2"]:not(.study-dual) .study-stack{font-size:15px} #mobile-study[data-seats="2"]:not(.study-dual) .study-plaque{min-height:40px} #mobile-study[data-seats="2"]:not(.study-dual) .study-top .study-cards .card{width:36px;height:49px;--face-w:36px;--face-h:49px} #mobile-study[data-seats="2"]:not(.study-dual) .study-hero .study-cards .card{width:48px;height:65px;--face-w:48px;--face-h:65px} #mobile-study[data-seats="2"]:not(.study-dual) .study-grid{grid-template-rows:minmax(0,1fr) 0 230px 0 minmax(0,1fr)} #mobile-study[data-seats="2"]:not(.study-dual) .study-top{align-self:end} #mobile-study[data-seats="2"]:not(.study-dual) .study-hero{align-self:start} } /* Dealer buttons stay on the felt and clear of cards, plates and bets (Shaun, 2026-11-10: "button overlapping rail where it can never overlap rail chips etc", then "this ones touching the cards on the bottom"). Safari-sized phones: the lower seats' buttons sit above their bets (below the seat was the rail), yours sits up by your bet; tall phones: yours to the right of your cards. */ @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ #mobile-study .study-lower [data-slot="left"] .study-dealer,#mobile-study .study-lower [data-slot="right"] .study-dealer{top:2px} } @media(orientation:portrait) and (min-height:601px) and (min-width:360px) and (max-width:599px){ #mobile-study [data-slot="hero"] .study-dealer{top:-36px;bottom:auto;left:calc(50% + 30px)} } @media(orientation:portrait) and (min-height:741px) and (min-width:360px) and (max-width:599px){ #mobile-study [data-slot="hero"] .study-dealer{top:-6px;left:calc(50% + 62px)} } /* Slim rail (Shaun, 2026-11-10: "at these phone sizes should we have a table with a rail thats a bit less chunky?", then "both" for phones and tablets): every rail image above is table-v4, the rail at 60% of its thickness with the same outside shape, built from table-v3.png by prototypes/mobile-table/src/make-slim-rail.py. The felt is wider, so the board formulas use .1455 (was .1306). No stitching and an even felt (Shaun, 2026-11-10: "remove the leather stitching its showing inconsistantly", "a lighter green patch under the card placeholders"): the same script takes the stitch lines out and evens the felt's glow, which the 9-slice turned into a lighter box; ?v=2 on every table-v4 image so the old art isn't served from cache. */ /* Bets and dealer buttons stay on the felt, never on the rail (Shaun, 2026-11-10: "make sure bets and button and stuff stay on the felt never touching the rail"). Checked at 30+ sizes by sampling the felt under every bet, button, pot and board card. Phones 360-375 wide: the upper seats' buttons sit 5px higher, clear of the bigger board; yours sits up by your bet. Sideways: the lower seats' bets sit up beside their pictures. Sideways tablets: their buttons go above those bets and your bet beside your cards. Sideways phones: side bets and buttons further in from the rail (wider phones further still). */ @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:599px) and (max-aspect-ratio:79/100){ #mobile-study .study-upper [data-slot="left"] .study-dealer,#mobile-study .study-upper [data-slot="right"] .study-dealer{top:calc(100% + 3px)} #mobile-study [data-slot="hero"] .study-dealer{top:-40px;left:calc(50% + 29px)} } @media(orientation:landscape){ #mobile-study .study-lower .study-bet{align-self:flex-start} } @media(orientation:landscape) and (min-height:521px){ #mobile-study .study-lower [data-slot="left"] .study-dealer,#mobile-study .study-lower [data-slot="right"] .study-dealer{top:-22px} #mobile-study .study-hero .study-bet{bottom:auto;top:0} } @media(max-height:520px) and (orientation:landscape){ #mobile-study .study-group{gap:24px} #mobile-study [data-slot="left"] .study-dealer{top:calc(100% - 22px);left:calc(100% + 54px);right:auto} #mobile-study [data-slot="right"] .study-dealer{top:calc(100% - 22px);right:calc(100% + 54px);left:auto} #mobile-study [data-slot="hero"] .study-dealer{top:-30px;left:calc(50% + 30px)} } @media(max-height:520px) and (orientation:landscape){ #mobile-study .study-lower .study-bet{margin-top:-10px} } @media(max-height:520px) and (min-width:900px) and (orientation:landscape){ #mobile-study .study-group{gap:32px} #mobile-study [data-slot="left"] .study-dealer{left:calc(100% + 62px)} #mobile-study [data-slot="right"] .study-dealer{right:calc(100% + 62px)} } @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:374px) and (max-aspect-ratio:79/100){ #mobile-study [data-slot="hero"] .study-dealer{top:-62px;left:calc(50% + 28px)} } /* Phones 360-374 wide keep the board at its pre-slim-rail size (the bigger board pushed the pot into the upper bets). Small sideways phones (600 wide or less) keep the narrow bet gap; their side buttons sit just past their bets; the shortest (330 tall or less) put the lower buttons higher and yours beside your cards, clear of the board. */ @media(orientation:portrait) and (min-height:601px) and (max-height:740px) and (min-width:360px) and (max-width:374px) and (max-aspect-ratio:79/100){ #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:min(46px,calc(var(--rail-width,calc(100vw + 68px)) * .1455 - 6.4px))} } @media(max-height:520px) and (max-width:600px) and (orientation:landscape){ #mobile-study .study-group{gap:8px} #mobile-study .study-lower .study-bet{margin-top:0} #mobile-study [data-slot="left"] .study-dealer{left:calc(100% + 12px)} #mobile-study [data-slot="right"] .study-dealer{right:calc(100% + 12px)} #mobile-study .study-upper .study-dealer{top:calc(100% + 4px)} #mobile-study .study-lower .study-dealer{top:-20px} } @media(max-height:330px) and (orientation:landscape){ #mobile-study .study-lower .study-dealer{top:-14px} #mobile-study [data-slot="hero"] .study-dealer{top:4px;left:calc(50% + 46px)} } @media(max-height:330px) and (max-width:600px) and (orientation:landscape){ #mobile-study .study-lower [data-slot="left"] .study-dealer{left:calc(100% + 36px)} #mobile-study .study-lower [data-slot="right"] .study-dealer{right:calc(100% + 36px)} } /* Home-screen app (Shaun, 2026-11-10: "when i put a bookmark on the home screen the tables a bit too high and the notch cuts off top player and theres space at the bottom under the buttons too"): the header already steps down by the notch inset, now the table does too; the buttons keep 14px above and below them instead of 19/20 with the home bar, still centered, and the table gets that room. Both are 0 / unchanged in Safari, where there's no inset. */ body.mobile-study-live #mobile-study{margin-top:env(safe-area-inset-top,0px)} @media(orientation:portrait){ body.mobile-study-live #table-screen .bottom-zone{--bz-pad:max(8px,calc(env(safe-area-inset-bottom,0px) - 20px))} } /* Header icons: chat and the cog the same size and color, at 80% (Shaun, 2026-11-10: "make the text button a little bigger make the cog a little smaller so they are same size and make them like 80% opacity"). Open chat stays gold; the new-message dot stays full. */ body.mobile-study-live #table-screen .header-right > .mt-chat-btn .material-symbols-rounded{font-size:23px;opacity:.86} body.mobile-study-live #table-screen .header-right > .mt-chat-btn:not([aria-expanded="true"]){color:#fbf1d9} body.mobile-study-live #table-screen #btn-table-avatar::after{font-size:23px;opacity:.86;color:#fbf1d9} /* the logo's MUCK cream (#fbf1d9) at the logo's 86%, so the icons and the word read the same (Shaun, 2026-11-10: "make the chat and cog button the same color as the text muck in the muck poker logo") */ /* Muted header logo and action buttons (Shaun, 2026-11-10: "mute the logo 14% and the buttons 4% like reduce their opacity") */ body.mobile-study-live #table-screen .table-header .brand img{opacity:.86} body.mobile-study-live #table-screen #action-row{opacity:.96} /* The hand's name under each plaque (Shaun, 2026-11-10: "put the cards that you are playing and when ppl show down like k 9 6 4 3 ... like you have on desktop, just for mobile below the plaques? and dont cover the bets for top seat"): desktop's dark tab, its text the size of the player's name ("the label text sizing should be the same size as the persons name", set in mobile-table-live.js, which also steps a bet or dealer button under the plaque down below it) */ #mobile-study .study-hand{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);z-index:3;display:block;box-sizing:border-box;padding:2px 6px 3px;border-radius:5px;background:#141918;box-shadow:0 2px 6px #0008;white-space:nowrap;font:600 10px/1.1 Inter,system-ui,sans-serif;letter-spacing:0;color:var(--muck-text-2,#c9c3b3);pointer-events:none} #mobile-study .study-hand.hand-side{top:50%;left:calc(100% + 5px);transform:translateY(-50%)} /* Opponents' cards shown down are 40% bigger (Shaun, 2026-11-10: "can we make opponents cards bigger when there are showdowns, rn they are hard to see"). They grow from their bottom edge over the picture, and the side seats grow toward the felt (left seats keep their left edge, right seats their right), so nothing passes the screen's edge at any size. They grow as they turn over ("they should get bigger as they are turned over"): from the moment the first card starts its flip (card-flip-out, table.js) to just after the last face lands; back to normal size at once when the hand clears. */ @media(orientation:portrait){ #mobile-study:not(.study-dual) .study-seat .study-cards{transform-origin:0 133.333%} #mobile-study:not(.study-dual) :is(.study-upper,.study-lower)>.study-group:first-child .study-cards{transform-origin:-50% 133.333%} #mobile-study:not(.study-dual) :is(.study-upper,.study-lower)>.study-group:not(:first-child) .study-cards{transform-origin:50% 133.333%} /* Tucked behind the plaque like your own cards: 12% of the unscaled hand lower (5px on phones, 7px on tablets) leaves each suit about 1px clear of the plaque, as yours is ("the bottoms remained tucked behind the plaque ... make sure pips are always showing"). */ #mobile-study:not(.study-dual) .study-seat .study-cards:is(:has(.card:not(.back)),:has(.card-flip-out)){scale:1.4;translate:0 12%;transition:scale .45s cubic-bezier(.2,.7,.3,1),translate .45s cubic-bezier(.2,.7,.3,1)} #mobile-study[data-seats="2"]:not(.study-dual) .study-top .study-cards:is(:has(.card:not(.back)),:has(.card-flip-out)){scale:1.2} #mobile-study:not(.study-dual) .study-hero .study-cards:is(:has(.card:not(.back)),:has(.card-flip-out)){scale:none;translate:none;transition:none} /* Plaques stay in front of the cards ("cards need to not be in front of plaques tho"); the cards go over the seat's dealer button and bet, which keep their spots (at 339x551 the upper-right D sits where the bigger cards reach). */ #mobile-study:not(.study-dual) .study-seat:has(>.study-portrait .card:not(.back),>.study-portrait .card-flip-out):not(.study-hero *)>.study-portrait{z-index:1} #mobile-study:not(.study-dual) .study-seat:has(>.study-portrait .card:not(.back),>.study-portrait .card-flip-out):not(.study-hero *)>.study-plaque{z-index:2} } /* The picture's frame (mobile-table-live.js FRAME_SVG): it stands on the plaque, its base overlapping the plaque's top line by 1px so the plaque's line closes it; the picture keeps its own size rules and the frame wraps it, the flared base reaching 16% past each side. */ #mobile-study .study-portrait:has(>.study-frame){align-items:flex-end} #mobile-study .study-frame{position:relative;z-index:0;display:block;flex:none;line-height:0;margin-bottom:-8px} #mobile-study .study-frame>.study-avatar{position:relative;display:block;margin:0;border:0;border-radius:50%;box-shadow:0 0 0 2.5px #8e8267,0 0 0 4px #0b0e0d,0 5px 12px #0009} @media(orientation:landscape) and (max-height:500px){#mobile-study .study-frame{margin-bottom:-3px}} /* landscape phones: 32px pictures, a smaller tuck */ /* Face-down hands sit a quarter of a card lower, more of them behind the plaque, so the face in the frame shows above them; turned over they rise back as they grow (the transition above). */ #mobile-study:not(.study-dual) .study-seat:not(.study-hero *)>.study-portrait:has(>.study-frame)>.study-cards:not(:has(.card:not(.back))):not(:has(.card-flip-out)){translate:0 10%} /* Narrow tall phones (an iPhone on Larger Text, 320 wide, the full felt): the board and chips at the bigger phones' sizes; the board fills the width less 24px a side (Shaun, 2026-11-11: "we can make the board/chips a big bigger here no?") */ @media(orientation:portrait) and (min-height:601px) and (max-width:359px){ #mobile-study:not(.study-dual) :is(.study-center,.study-board){--board-card:min(56px,calc((100vw - 48px) / 5));--board-h:calc(var(--board-card) * 1.385)} #mobile-study:not(.study-dual) .study-board{gap:4px} #mobile-study:not(.study-dual) .study-board .card{border-radius:5px} #mobile-study .study-bet{width:52px;height:50px;font-size:13px} #mobile-study .study-bet>span{line-height:18px;height:18px} #mobile-study .study-bet .chip-tower{height:32px} #mobile-study .chip-col .chip-disc2{width:23px;height:18.2px;background-size:23px 18.2px} #mobile-study .chip-col .chip-disc2:not(:last-child){margin-bottom:-15.3px} /* room for the pot with the bigger board: with side seats it goes under the board (above it met the upper seats' bets); heads-up keeps it above and the top seat goes up 24px (Shaun: "moving under is fine too actually lets try that first") */ #mobile-study:not([data-seats="2"]):not(.study-dual) .study-pot{bottom:auto;top:calc(50% + var(--board-h,53px) / 2 + 8px)} #mobile-study[data-seats="2"]:not(.study-dual) .study-top{translate:0 -24px} } /* Phones and tablets in portrait: a room made for the tall screen, straight down, the wall lights above and below the table and warm wood at the sides (assets/desktop-lounge/mobile-room-v2.png; scripts/art/generate-mobile-room.py). The landscape room (game-palette.css) showed only its dark middle here, under a heavy shade: "it just looks like black all around" (Shaun, 2026-11-11). Two classes on body to outrank game-palette.css, which loads after this file. */ @media(orientation:portrait){ body.mobile-game-active.mobile-study-live #table-screen{background:radial-gradient(ellipse at 50% 45%,#06090733 30%,#06090b77 100%),url('desktop-lounge/mobile-room-v2.webp?v=1') center / cover no-repeat #080c09} }