/* Every rule is scoped to the touch-device opt-in; desktop CSS is unchanged. */
.uno-phone .phone-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.phone-bar,.phone-selection-tools,#phoneTurn{display:none}
.uno-phone{font-size:16px;overscroll-behavior:none}
.uno-phone body{font-size:14px}
.uno-phone button,.uno-phone select,.uno-phone input{min-height:44px;font-size:14px}
.uno-phone button:disabled{opacity:1;color:#bab3af;background:#373338;border-color:#777078;cursor:default}
.uno-phone button:focus-visible{outline-offset:0}
.uno-phone header{padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));min-height:48px}
.uno-phone header>.brand{display:none}
.uno-phone main{padding:8px;max-width:none}
.uno-phone .panel{padding:14px}
.uno-phone .panel h1{font-size:30px}
.uno-phone .lead{font-size:16px}
.uno-phone .modes{gap:4px;margin:12px 0}
.uno-phone .modes button{padding:8px;flex:1}
.uno-phone .seat-row input{max-width:100%}
.uno-phone .phone-playing{position:fixed;top:var(--phone-top,0px);left:0;width:100%;height:var(--phone-height,100dvh);overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column}
.uno-phone .phone-playing main{padding:2px 6px 4px;flex:1;min-height:0;width:100%;display:flex}
.uno-phone .phone-playing footer{display:none}
.uno-phone #game{display:grid;grid-template-rows:26px auto minmax(0,1fr) auto;gap:4px;min-height:0;width:100%}
.uno-phone .table-heading{min-width:0}
.uno-phone .table-heading>div{display:none}
.uno-phone #phoneTurn{display:block;font-size:14px;font-weight:700;line-height:1.2;margin:0;overflow-wrap:anywhere}
.uno-phone .opponents{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0}
.uno-phone .seat{padding:3px 2px;border-radius:5px;font-size:11px;line-height:1.15;position:relative;text-align:center;white-space:nowrap}
.uno-phone .seat strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uno-phone .seat small{display:none}
.uno-phone .seat .count{font-size:15px;color:#ffe4ad}
.uno-phone .seat[data-uno]:not([data-uno=""])::after{content:attr(data-uno);display:block;font-size:10px;color:#fff3c8}
.uno-phone .table{min-height:0;padding:4px 6px;border:2px solid #976746;border-radius:12px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;box-shadow:inset 0 0 15px #041910;overflow:visible}
.uno-phone .table:before,.uno-phone .table-mark,.uno-phone .pile-label{display:none}
.uno-phone .piles{gap:18px;flex-shrink:0}
.uno-phone .piles>button{margin:0}
.uno-phone .piles .card{width:66px;height:86px;font-size:30px;border-width:3px;border-radius:9px}
.uno-phone .piles .card .corner{font-size:12px}
.uno-phone .piles .card small{font-size:9px;letter-spacing:0}
.uno-phone .card:before{inset:17px 4px}
.uno-phone .back span{font-size:26px}
.uno-phone .color-badge{width:66px;height:52px;border-radius:9px;font-size:13px;box-shadow:none}
.uno-phone #pileCount{font-size:11px;line-height:1.1;margin:0;color:#d1e5d5}
.uno-phone #message{font-size:13px;line-height:1.2;min-height:0;margin:1px 0;overflow-wrap:anywhere}
.uno-phone #responses,.uno-phone #catchControls,.uno-phone #passCatch{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.uno-phone #responses:empty,.uno-phone #catchControls:empty{display:none}
.uno-phone #responses button,.uno-phone #catchControls button,.uno-phone #passCatch button{margin:0;padding:5px 8px;min-height:44px;flex:1;font-size:13px;line-height:1.15}
.uno-phone #catchControls select,.uno-phone #passCatch select{max-width:42%;padding:4px;font-size:13px}
.uno-phone .hand-panel{min-width:0;min-height:0;padding:4px 6px;margin:0;border-radius:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto;align-content:start;column-gap:4px}
.uno-phone .hand-title{min-width:0;grid-column:1/-1;gap:4px}
.uno-phone .hand-title h2{font:600 14px/1.15 system-ui;margin:0;overflow-wrap:anywhere}
.uno-phone .hand-title>div{display:flex;gap:4px}
.uno-phone .hand-title button{min-height:44px;padding:3px 8px;font-size:12px}
.uno-phone .phone-selection-tools{display:flex;grid-row:3;grid-column:2;gap:4px;align-items:center}
.uno-phone .phone-selection-tools button{padding:3px 7px;font-size:11px;min-height:44px;max-width:80px;line-height:1.1}
.uno-phone .hand{grid-row:2;grid-column:1/-1;gap:9px;padding:8px 5px 7px;min-height:0;max-width:100%;margin:0;position:relative;overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom;scrollbar-width:thin;scrollbar-color:#d8b97e #181517}
.uno-phone .hand .card{width:84px;height:116px;min-height:116px;opacity:1;font-size:35px;transform:none;animation:none;transition:none;border:3px solid #f2e5d2;box-shadow:0 2px 4px #0005;touch-action:pan-x pinch-zoom}
.uno-phone .hand .card:hover{transform:none}
.uno-phone .hand .card small{font-size:10px;background:#101016;color:#fff;padding:2px 4px;border-radius:3px;text-shadow:none}
.uno-phone .hand .card.legal{border-style:double;border-width:5px;box-shadow:0 0 0 2px #fff2bd}
.uno-phone .hand .card.legal::after{content:'✓';position:absolute;right:3px;top:2px;font:700 14px system-ui;color:#fff;background:#111;border-radius:10px;padding:0 2px;text-shadow:none}
.uno-phone .hand .card.selected{outline:3px solid #fff;outline-offset:1px;transform:none}
.uno-phone .hand .card.selected::after{content:'✓ SELECTED';position:absolute;top:0;left:0;right:0;background:#111;color:#fff;font:700 9px/16px system-ui;text-shadow:none}
.uno-phone .hand .card.new-card small::before{content:'NEW · '}
.uno-phone #selectedText{grid-row:3;grid-column:1;margin:0;text-align:left;align-self:center;min-height:0;font-size:12px;line-height:1.15;color:#f5ead8}
.uno-phone .turn-actions{grid-row:4;grid-column:1/-1;display:flex;gap:5px;flex-wrap:nowrap}
.uno-phone .turn-actions button{padding:4px 7px;flex:1;min-width:0;min-height:44px;font-size:14px;line-height:1.1}
.uno-phone #unoHelp{grid-row:5;grid-column:1/-1;font-size:11px;line-height:1.15;margin:3px 0 0;min-height:13px;color:#e4d4c1}
.uno-phone dialog{max-height:calc(var(--phone-height,100dvh) - 16px);width:calc(100% - 16px);max-width:560px;overflow:auto;overscroll-behavior:contain;padding:12px;border-radius:12px;scroll-padding:12px}
.uno-phone dialog h2{font-size:23px;margin:5px 0 12px}
.uno-phone dialog button{margin:3px 0}
.uno-phone dialog label{margin:12px 0}
.uno-phone .phone-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:-12px;background:#262025;z-index:2;padding:5px 0}
.uno-phone .phone-dialog-head h2{margin:0}
.uno-phone #phoneMenuActions .header-actions{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0}
.uno-phone #phoneMenuActions button{padding:8px;font-size:13px;background:#292329}
.uno-phone #phoneMenu details{margin:0;padding:0;border:0}
.uno-phone .phone-link{display:inline-flex;align-items:center;min-height:44px}
.uno-phone #scores{gap:10px}
.uno-phone #events{padding-left:20px}
.uno-phone .color-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.uno-phone .color-choices button{min-height:56px;font-size:18px;border:2px solid #f5ead8}
.uno-phone .color-choices .red:hover{background:#a1172e;color:white}
.uno-phone .color-choices .green:hover{background:#126149;color:white}
.uno-phone .color-choices .blue:hover{background:#2054a2;color:white}
.uno-phone .color-choices .yellow:hover{background:#ffdc60;color:#382500}
.uno-phone #toast{bottom:auto;top:52px;font-size:13px;padding:8px 12px;max-height:120px;overflow:auto;pointer-events:none}
.uno-phone .reveal{font-size:12px;line-height:1.2;padding:6px;margin:0;max-height:64px;overflow:auto;width:100%}
@media(max-height:740px){
 .uno-phone .hand .card{width:76px;height:98px;min-height:98px;font-size:30px}
 .uno-phone .piles .card{width:54px;height:66px;font-size:25px}
 .uno-phone .piles .card small{font-size:8px}
 .uno-phone .hand-title button{min-height:44px}
 .uno-phone .hand{padding-top:5px;padding-bottom:5px}
 .uno-phone .hand-title h2{font-size:13px}
}
@media(orientation:landscape){
 .uno-phone #game{grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:24px auto minmax(0,1fr);gap:3px;grid-template-areas:'heading heading' 'opponents opponents' 'table hand'}
 .uno-phone .table-heading{grid-area:heading}
 .uno-phone .opponents{grid-area:opponents;grid-template-columns:repeat(10,minmax(0,1fr))}
 .uno-phone .seat{padding:2px;line-height:1.05}
 .uno-phone .seat[data-uno]:not([data-uno=""])::after{position:absolute;right:0;bottom:0;background:#211e21;font-size:9px}
 .uno-phone .table{grid-area:table;padding:3px 4px;gap:2px}
 .uno-phone .hand-panel{grid-area:hand;grid-template-rows:32px minmax(60px,1fr) 44px 44px 14px;padding:2px 5px}
 .uno-phone .hand-title button{min-height:30px;padding:2px 8px}
 .uno-phone .hand{align-items:center;padding:4px;min-height:0}
 .uno-phone .hand .card{height:100%;min-height:60px;max-height:100px;width:70px;font-size:26px}
 .uno-phone #unoHelp{font-size:10px;margin:1px 0}
 .uno-phone .piles .card{width:48px;height:58px;min-height:58px;font-size:22px}
 .uno-phone .piles .card .corner{font-size:10px;top:1px;left:2px}
 .uno-phone .piles .card small{font-size:8px}
 .uno-phone .piles .card:before{inset:10px 3px}
 .uno-phone .color-badge{height:40px}
 .uno-phone #message{font-size:12px;line-height:1.15}
 .uno-phone #pileCount{font-size:10px}
 .uno-phone .piles{gap:16px}
}
.uno-phone button.uno:disabled{background:#373338;color:#bab3af;border-color:#777078}
.uno-phone .hand .card.red:hover{background:linear-gradient(130deg,#eb4054,#a1172e);color:#fff8e7}
.uno-phone .hand .card.yellow:hover{background:linear-gradient(130deg,#ffdc60,#ce950e);color:#382500}
.uno-phone .hand .card.green:hover{background:linear-gradient(130deg,#319676,#126149);color:#fff8e7}
.uno-phone .hand .card.blue:hover{background:linear-gradient(130deg,#4598e2,#2054a2);color:#fff8e7}
.uno-phone .hand .card.wild:hover{background:conic-gradient(from 45deg,#b73144,#d7af30,#287b5c,#245fa1,#b73144);color:#fff8e7}

/* The title row shares secondary hand controls, freeing the decision area. */
.uno-phone .hand-title>div:empty{display:none}
.uno-phone .hand-title .phone-selection-tools{display:flex;flex-shrink:0}
.uno-phone #selectedText{grid-column:1/-1;min-height:22px;padding:2px 0}
.uno-phone .table>*{flex-shrink:0}
.uno-phone #phoneMenuActions>#hint,.uno-phone #phoneMenuActions>#sort{margin:3px 4px 8px 0}
@media(max-height:740px) and (orientation:portrait){.uno-phone .hand .card{height:90px;min-height:90px}}
@media(orientation:landscape){.uno-phone .hand-panel{grid-template-rows:44px minmax(60px,1fr) 22px 44px 14px}.uno-phone .hand-title .phone-selection-tools button{min-height:44px}.uno-phone .hand-title{align-items:center}}

.uno-phone .turn-actions .phone-selection-tools{display:contents}
.uno-phone .turn-actions .phone-selection-tools button{font-size:12px;max-width:none;min-width:0;padding:3px 4px;min-height:44px;flex:1}
.uno-phone .hand-title{min-height:24px}
@media(orientation:portrait){.uno-phone #game{gap:2px}.uno-phone .table{padding-top:3px;padding-bottom:3px}}
@media(orientation:landscape){.uno-phone .hand-panel{grid-template-rows:24px minmax(60px,1fr) 22px 44px 14px}}

.uno-phone .phone-color-stack{display:flex;flex-direction:column;align-items:center;gap:1px}
.uno-phone .phone-color-stack #pileCount{font-size:10px;line-height:11px}
.uno-phone .table{gap:1px}