.canasta-phone{background:#0a211a}.canasta-phone body{position:fixed;left:var(--phone-x,0px);top:var(--phone-y,0px);width:var(--phone-w,100vw);height:var(--phone-h,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.canasta-phone .mast{flex:none;height:48px;padding:2px 8px;align-items:center;gap:5px}.canasta-phone .brand{font-size:11px;gap:6px}.canasta-phone .brandmark{font-size:24px}.canasta-phone .brand small{font-size:9px}.canasta-phone #phoneMenuBtn{font-size:13px;padding:5px 10px}
.canasta-phone main{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:3px 5px;display:flex;flex-direction:column;overflow:hidden}.canasta-phone .titleline,.canasta-phone footer{display:none}.canasta-phone .connection{flex:none;margin:0 0 3px;padding:3px 6px;font-size:11px;max-height:36px;overflow:auto}
.canasta-phone .layout{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-height:0;flex:1}.canasta-phone .tableframe{flex:1;min-height:0;min-width:0;width:auto;padding:3px;border-radius:9px;box-shadow:none}.canasta-phone .felt{height:100%;min-height:0;padding:5px;border-radius:7px;display:flex;flex-direction:column;gap:4px;overflow:hidden}.canasta-phone .tableheading{flex:none;margin:0;min-height:15px;font-size:11px;letter-spacing:0}.canasta-phone .tableheading span:last-child{display:none}
.canasta-phone #scoreboard{flex:none;display:flex;gap:8px;min-height:33px}.canasta-phone .scoreline{flex:1;padding:1px 3px;gap:4px;min-width:0;border:1px solid #ffffff25;border-radius:4px}.canasta-phone .scoreline b{font:20px Georgia}.canasta-phone .scoreline span{font-size:11px;line-height:1.15}.canasta-phone .scoreline small{font-size:10px;white-space:normal}
.canasta-phone .seats{flex:none;gap:3px;margin:0}.canasta-phone .seat{padding:3px 2px;border-radius:4px;line-height:1.15}.canasta-phone .seat b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canasta-phone .seat small,.canasta-phone .seat em{font-size:9px}
.canasta-phone .phone-table-body{display:flex;gap:5px;min-height:92px;flex:1;overflow:hidden}.canasta-phone .teams{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;gap:4px;scrollbar-width:thin}.canasta-phone .meldarea{flex:none;min-height:0;padding:5px;border-radius:5px}.canasta-phone .meldarea h3{font-size:11px;margin:0 0 3px}.canasta-phone .melds{gap:4px}.canasta-phone .nomeld{padding:2px 0;font-size:11px}.canasta-phone .meldchip{min-height:44px;font-size:13px;padding:4px 6px}.canasta-phone .meldchip span{font-size:10px}
.canasta-phone .center{flex:none;display:flex;align-items:center;align-self:center;gap:8px;padding:0;width:130px;justify-content:center}.canasta-phone .pile{gap:3px}.canasta-phone .pile .card{width:54px;height:75px;font-size:21px;padding:4px}.canasta-phone .pile .card .suit{font-size:24px}.canasta-phone .pile .card .corner{font-size:11px}.canasta-phone .pile .back{border-width:3px}.canasta-phone .pile .back span{padding:5px;font-size:25px}.canasta-phone .pile strong{font:9px Arial;letter-spacing:0}.canasta-phone .pile strong span{margin-left:3px;font-size:12px}
.canasta-phone .pileinfo{flex:none;font-size:11px;line-height:1.2;margin:0;max-width:none;max-height:40px;overflow:auto;text-align:left;overscroll-behavior:contain}.canasta-phone .status{flex:none;min-height:0;max-height:40px;overflow:auto;font-size:12px;line-height:1.3;padding:4px 6px;border-radius:4px;overscroll-behavior:contain}
.canasta-phone #handArea{flex:none;min-width:0}.canasta-phone .handheading{margin:0;gap:4px;min-height:44px}.canasta-phone .handheading h2{font:600 12px Arial;max-width:30%;overflow-wrap:anywhere}.canasta-phone .phone-swipe{font-size:10px;color:#e7d39b}.canasta-phone .handheading>div{display:flex;gap:3px;align-items:center;font-size:11px}.canasta-phone #sortBtn{min-height:44px;margin:0;padding:4px 6px;font-size:11px}
.canasta-phone .hand{flex-wrap:nowrap;gap:7px;min-height:0;height:113px;padding:9px 4px 5px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-x;overflow-anchor:none}.canasta-phone .hand .card{width:65px;height:94px;font-size:23px;flex:0 0 65px;animation:none}.canasta-phone .hand .card .suit{font-size:28px}.canasta-phone .hand .card .corner{font-size:12px}.canasta-phone .hand .card[aria-pressed=true]{transform:translateY(-5px);outline-width:3px}.canasta-phone .hand .card.queued{opacity:.75;outline:2px dashed #f3cd73}.canasta-phone .hand .card.queued:after{content:'Staged';position:absolute;bottom:3px;left:3px;font:10px Arial;background:#233e31;color:#fff;padding:2px}
.canasta-phone aside{flex:none;width:100%;max-height:35%;overflow:auto;overscroll-behavior:contain}.canasta-phone aside>.scorepanel{display:none}.canasta-phone .controls{margin:0;padding:3px;gap:4px;display:grid;grid-template-columns:1fr 1fr;border-radius:6px}.canasta-phone .controls>.eyebrow,.canasta-phone .controls>.hint,.canasta-phone .controls>hr{display:none}.canasta-phone .controls button{min-height:44px;padding:5px;font-size:12px;line-height:1.2}.canasta-phone #answerControls{grid-column:1/-1}.canasta-phone #answerControls button{flex:1}
.canasta-phone:not([data-canasta-phase=draw]) #drawBtn,.canasta-phone:not([data-canasta-phase=draw]) #takeBtn,.canasta-phone:not([data-canasta-phase=meld]) #discardBtn,.canasta-phone:not(.phone-proposal) #commitBtn,.canasta-phone[data-canasta-phase=draw] #commitBtn{display:none}.canasta-phone[data-canasta-status=hand] .controls>button:not(#nextBtn),.canasta-phone[data-canasta-status=match] .controls>button:not(#rematchBtn),.canasta-phone[data-canasta-phase=permission] .controls>button{display:none}
.canasta-phone .privacy{inset:0;padding:12px;border-radius:6px}.canasta-phone .privacyicon{font-size:36px}.canasta-phone .privacy h2{font-size:23px;margin:0 0 5px}.canasta-phone .privacy p{font-size:13px;margin:5px 0 12px}.canasta-phone .privacy button{font-size:14px}
.canasta-phone dialog{width:calc(var(--phone-w,100vw) - 16px);max-width:620px;max-height:calc(var(--phone-h,100dvh) - 16px);padding:10px;border-radius:10px;overflow:hidden}.canasta-phone dialog[open]{display:flex;flex-direction:column}.canasta-phone .dialoghead{flex:none;align-items:center;gap:8px;margin-bottom:5px}.canasta-phone dialog h2{font-size:22px;margin:0}.canasta-phone .dialoghead button{font-size:14px;min-height:44px}.canasta-phone .dialoghead .eyebrow{font-size:9px;margin-bottom:3px}.canasta-phone .phone-panel-body,.canasta-phone .phone-dialog-content{overflow:auto;min-height:0;overscroll-behavior:contain;overflow-wrap:anywhere}.canasta-phone #confirm>.tabs{flex:none;margin:5px 0 0}.canasta-phone dialog p{font-size:13px}.canasta-phone #phoneMenu nav{display:grid;grid-template-columns:1fr 1fr;gap:5px;justify-content:stretch}.canasta-phone #phoneMenu nav button{border:1px solid #ffffff40;min-height:44px}.canasta-phone #phoneMenu nav a{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;text-align:center}.canasta-phone #phoneMenu .modebadge{max-width:none;text-align:center;margin:9px 0}.canasta-phone #walkBtn{width:100%;min-height:44px}.canasta-phone #phoneMenu .panel{margin:8px 0;padding:8px}.canasta-phone .activity{columns:auto}.canasta-phone #phoneMeld .phone-panel-body{display:flex;flex-direction:column;gap:7px}.canasta-phone #phoneMeld label{margin:0}.canasta-phone #phoneMeld button{min-height:44px}.canasta-phone #phoneMeld .proposal{flex:none;max-height:30vh;overflow:auto}.canasta-phone #infoBody .card{vertical-align:top;margin:3px}.canasta-phone #infoBody table{font-size:12px}.canasta-phone .tabs{margin:8px 0}.canasta-phone .setupseat{grid-template-columns:45px 1fr 1fr;gap:4px}.canasta-phone .setupseat input,.canasta-phone .setupseat select{font-size:13px;padding:6px}.canasta-phone .toast{bottom:7px;width:calc(100% - 16px);max-width:none;padding:9px;font-size:13px;max-height:24%;overflow:auto;z-index:100}.canasta-phone button:disabled{opacity:1;background:#233b31;color:#9eb6aa;border-color:#456050}.canasta-phone .hand .card:hover{background:#fff9e7;color:#202b28}.canasta-phone .hand .card.red:hover{color:#ae2f37}.canasta-phone .hand .card.wild:hover{color:#735522}
@media(orientation:landscape){.canasta-phone .mast{height:48px}.canasta-phone .layout{flex-direction:row}.canasta-phone aside{width:235px;flex:none;max-height:100%;min-height:0}.canasta-phone .tableheading{padding-right:3px}.canasta-phone .felt{display:grid;grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:14px minmax(90px,1fr) 28px 102px;gap:3px}.canasta-phone .tableheading{grid-column:1/-1}.canasta-phone #phoneNotes #scoreboard{min-height:33px;margin:4px 0}.canasta-phone #phoneNotes .seats{display:grid}.canasta-phone .phone-table-body{grid-column:1/-1;grid-row:2;min-height:0}.canasta-phone .teams{display:grid;grid-template-columns:1fr 1fr;align-content:start}.canasta-phone .center{align-self:start}.canasta-phone #phoneNotes .pileinfo{font-size:11px;max-height:none;padding:4px 2px}.canasta-phone .status{grid-column:1/-1;grid-row:3;max-height:30px}.canasta-phone #handArea{grid-column:1/-1;grid-row:4;display:flex;flex-direction:column;min-height:0}.canasta-phone .handheading{min-height:0;height:23px;flex:none}.canasta-phone #phoneNotes #sortBtn{min-height:44px;width:100%;margin:3px 0}.canasta-phone .handheading>div{margin-left:auto;margin-right:5px}.canasta-phone .hand{height:79px;padding-top:7px}.canasta-phone .hand .card{height:68px;width:52px;flex-basis:52px;font-size:20px}.canasta-phone .hand .card .suit{font-size:21px}.canasta-phone .hand .card .corner{font-size:10px}.canasta-phone .phone-swipe{font-size:10px}.canasta-phone .controls{display:grid;grid-template-columns:1fr 1fr}.canasta-phone .controls button{flex:none}.canasta-phone .privacyicon{display:none}}

.canasta-phone #phoneMenu #sortBtn{width:100%;margin-bottom:6px}.canasta-phone #phoneNotes .seats{margin:4px 0}