/* Phone-only presentation. The original desktop stylesheet is unchanged. */
.phoneOnly{display:none}
@media (max-width:600px), (max-width:960px) and (max-height:500px) and (pointer:coarse){
 :root{--cw:calc((100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))/7.33);--ch:calc(var(--cw)*1.42);--step:calc(var(--cw)*.56)}
 body{min-width:0}
 main{max-width:600px;padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}
 .phoneOnly{display:block}
 .masthead{gap:5px;min-height:33px}.brand{gap:7px}.brand img{width:29px;height:29px}.brand .eyebrow{display:none}h1{font-size:clamp(22px,5vw,28px)}
 #phoneMenuButton{margin-left:auto;min-width:64px;padding:7px 10px;min-height:44px;font-size:.875rem}
 .subhead{margin:0 4px 4px;font-size:.69rem;overflow-wrap:anywhere}.tagline{display:none}
 .table{padding:0 5px 5px;border-radius:10px;overflow:visible}.table:before,.table:after{display:none}
 .scorebar{margin:0 0 7px;padding:5px 0;min-height:43px}.scorebar span{font-size:.625rem;letter-spacing:0;text-transform:none;line-height:1.25}.scorebar strong{font-size:1.2rem;line-height:1.2}
 .board{margin:0 auto;width:100%;height:calc(var(--ch) + 6*var(--step))}
 .card{border-radius:5px;touch-action:manipulation}
 .card .corner{font:700 max(17px,calc(var(--cw)*.34))/1.05 Georgia,serif;letter-spacing:-.5px;top:3%;left:5%}
 .card .bottom{font-size:calc(var(--cw)*.24)}
 .card.covered{background:linear-gradient(135deg,#adb8b6,#8c9b9d);color:#213441;box-shadow:0 1px 3px #0005}
 .card.covered.red{color:#71313c}
 .card:not(.covered):not(.back):not(.emptyStock){border-color:#fff6dd;box-shadow:0 3px 7px #0008,inset 0 0 0 2px #c09b5530}
 .card.selected{outline:3px solid #ffe260;outline-offset:1px;box-shadow:0 0 0 5px #07192b,0 0 15px #ffda76!important}
 .piles{gap:15px;margin:9px auto 0;align-items:start;justify-content:center}.pileGroup{gap:2px;font-size:.69rem;line-height:1.25}.pairGuide{display:none}
 #stock img{width:55%;height:auto}.backText{font-size:.625rem;letter-spacing:0}
 .phoneActions{display:grid;grid-template-columns:1fr;gap:4px;align-self:center;width:112px}.phoneActions button{min-height:44px;padding:5px;font-size:.8rem;width:100%}
 .card.emptyStock{font-size:.75rem}
 .messageArea{min-height:0;margin:5px 2px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
 #status{font-size:.75rem;margin:0}#notice{font-size:.75rem;min-height:0;margin:2px 0 0}#notice:empty{display:none}
 .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:6px}.toolbar button{font-size:.875rem;padding:6px;min-height:44px;min-width:44px}
 footer{font-size:.625rem;padding:4px 3px;flex-wrap:wrap;gap:2px 8px}
 dialog{padding:0;width:calc(100% - 16px);max-width:600px;max-height:calc(var(--phone-vh,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden}
 dialog[open]{display:flex;flex-direction:column}
 .dialogHead{flex:none;padding:10px 12px;border-bottom:1px solid #dfbc7840;background:#10273b}
 .dialogHead h2{font-size:1.35rem;overflow-wrap:anywhere}.dialogHead button{flex:none;min-width:44px;min-height:44px;margin:0}
 #dialogBody{overflow:auto;overscroll-behavior:contain;padding:8px 14px 16px;min-height:0;font-size:1rem;touch-action:pan-y pinch-zoom}
 #dialogBody button{min-height:44px;min-width:44px}#dialogBody select{font-size:1rem}
 .phoneMenuGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.phoneMenuGrid button{margin:0;width:100%;white-space:normal;font-size:.9rem}
 .phoneReturn{display:block;color:#ffe0a0;text-align:center;padding:12px;min-height:44px;border:1px solid #7b724f;border-radius:7px;margin-top:12px}
 .phoneTip{font-size:.8rem!important}
 /* Short screens keep readable cards and scroll vertically; nothing overlays play. */
 @media (orientation:landscape){
  :root{--cw:clamp(44px,calc((100vw - 300px)/7.33),64px)}
  main{max-width:920px}.table{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:12px;padding:0 8px 8px}.scorebar{grid-column:1/-1}.board{grid-column:1;grid-row:2/5;align-self:center}.piles{grid-column:2;grid-row:2;gap:10px;flex-wrap:wrap}.phoneActions{grid-template-columns:1fr 1fr;width:100%}.messageArea{grid-column:2;grid-row:3}.toolbar{grid-column:2;grid-row:4}.phoneActions button{font-size:.75rem}
 }
}