/* Layout by available space, with touch targets independent of screen width. */
main{width:100%}header{gap:16px}.hero{gap:32px}.hero>div{min-width:0}.hero>.primary{flex-shrink:0}.decks{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}.deck{min-width:0}.deck h3{overflow-wrap:anywhere}.deckbody{padding-top:4px}.deck .actions{grid-template-columns:minmax(0,1fr) 54px 54px}.deck .actions:not(:has(>button:nth-child(3))){grid-template-columns:minmax(0,1fr) 54px}.empty{grid-column:1/-1}.modal{overscroll-behavior:contain}.cardname{overflow-wrap:anywhere}.workshop-sidebar,.workshop-content{min-width:0}.workshop-sidebar .workmeta{grid-template-columns:1fr 1fr}.workshop-content .zonebar{scrollbar-width:thin}.searchresult>button,.quantity button{min-width:36px;min-height:36px}.workshop .searchresult b{line-height:1.4}.statsgrid .stat{min-width:0}.statsgrid small{display:block;line-height:1.5}.foil-preview.foil-zoom{width:min(85vw,calc(82dvh * .718));max-width:488px}.foil-preview>.zoom{max-height:82dvh;object-fit:contain}.workshop-top-actions>.work-icon{z-index:9}
@media(min-width:700px){
 header{max-width:1440px;padding:22px 36px}main{max-width:1280px;padding:40px 36px 64px}.hero{margin-bottom:42px}.hero h1{font-size:clamp(52px,5vw,76px)}.hero p{font-size:17px}.hero>.primary{padding:15px 22px}.cover{height:200px}.deck h3{font-size:24px}.deckbody{padding:4px 22px 22px}.modal{max-width:680px;padding:28px;max-height:90dvh}.allsearchmodal{max-width:840px}.printgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.thumb{width:52px;height:73px}.cardname{font-size:14px}.printinglink{font-size:12px}.quantity{gap:10px}.quantity button{min-width:38px;min-height:38px}.statsgrid{gap:14px}.stat{padding:24px 12px}.stat b{font-size:36px}.stat small{font-size:13px}
 /* Two card rows for tablet and laptop, with a dedicated action row. */
 body.practicing header{height:64px;padding:10px 28px;max-width:1440px}body.practicing header .brand{font-size:26px}body.practicing header .pill{display:inline}body.practicing header button{font-size:13px;padding:9px 14px}body.practicing main{max-width:1320px;padding:14px 24px max(12px,env(safe-area-inset-bottom));height:var(--room-height,calc(100dvh - 64px))}body.practicing .trainer{max-width:none;grid-template-rows:36px 58px minmax(0,1fr) auto 44px;gap:8px}body.practicing .context strong{font-size:17px}body.practicing .context small{display:inline;font-size:12px}body.practicing .position-badge{font-size:14px;padding:8px 13px}body.practicing .status .muted{font-size:15px}body.practicing .dots{font-size:13px;letter-spacing:7px;margin-top:7px}body.practicing .hand{max-width:1120px;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr)) 50px;gap:10px 12px;align-content:center}body.practicing .card{grid-column:span 2;grid-row:auto;transform:none}body.practicing .card:nth-child(5){grid-column:2/span 2;grid-row:2}body.practicing .card:nth-child(6){grid-column:4/span 2;grid-row:2}body.practicing .card:nth-child(7){grid-column:6/span 2;grid-row:2}body.practicing .controls button{grid-row:3;align-self:stretch;min-height:44px;font-size:17px;padding:10px 20px;border-radius:12px}body.practicing .controls button:first-child{grid-column:3/span 2}body.practicing .controls button:last-child,body.practicing .controls button:only-child{grid-column:5/span 2}body.practicing .tools{gap:10px;overflow:visible}body.practicing .tools button{font-size:13px;padding:10px 14px;min-height:40px}body.practicing .commander{font-size:12px;line-height:18px}body.practicing .card.selected:after{font-size:12px;padding:5px 8px}body.practicing .card .fallback{font-size:16px}
}
@media(min-width:1024px){
 main:has(.workshop){max-width:1440px}.workshop{max-width:none;display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:20px 32px;align-items:start}.workshop>.row{grid-column:1/-1;min-height:26px}.workshop-sidebar{grid-column:1;position:sticky;top:24px;max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}.workshop-content{grid-column:2}.workshop-sidebar .workmeta{grid-template-columns:1fr}.workshop-sidebar .workactions{margin:20px 0}.workshop-sidebar .searchbox{margin:0}.workshop .searchbox #searchresults{max-height:none}.workshop-content .zonebar{margin-top:0}.workshop-content .viewsettings{margin-top:12px}.workshop-content .typeheading:first-child{margin-top:16px}.workshop-top-actions>.work-icon{right:max(24px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));width:46px;height:46px}.workshop>.row{padding-right:60px}.workshop .editcard{padding:12px;gap:14px}.workshop .cardinfo small{font-size:11px}.site-footer{margin-top:48px}.allsearchmodal .searchresult{padding:12px 0}
}
@media(min-width:1500px) and (min-height:650px){
 body.practicing main{max-width:1800px;padding:20px 36px}body.practicing .trainer{grid-template-rows:40px 70px minmax(0,1fr) auto 50px;gap:12px}body.practicing .hand{max-width:1700px;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 54px;gap:22px 14px}body.practicing .card,body.practicing .card:nth-child(n+5){grid-column:auto;grid-row:1}body.practicing .controls button{grid-row:2}body.practicing .controls button:first-child{grid-column:3/span 1}body.practicing .controls button:last-child,body.practicing .controls button:only-child{grid-column:5/span 1}
}
/* Phones in landscape need one row, not three tiny rows. */
@media(max-height:550px) and (orientation:landscape){
 body.practicing header{height:42px;padding:5px 16px}body.practicing main{max-width:1300px;padding:4px 14px max(5px,env(safe-area-inset-bottom))}body.practicing .trainer{grid-template-rows:24px 30px minmax(0,1fr) auto 30px;gap:3px}body.practicing .hand{max-width:none;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 34px;gap:5px}body.practicing .card,body.practicing .card:nth-child(n+5){grid-row:1;grid-column:auto}body.practicing .controls button{grid-row:2;min-height:32px;padding:4px 8px;font-size:13px}body.practicing .controls button:first-child{grid-column:2/span 2}body.practicing .controls button:last-child,body.practicing .controls button:only-child{grid-column:5/span 2}body.practicing .context strong{font-size:12px}body.practicing .status .muted{font-size:11px}body.practicing .dots{font-size:9px;letter-spacing:5px;margin-top:2px}body.practicing .tools{gap:7px}body.practicing .tools button{min-height:28px;padding:5px 10px;font-size:11px}body.practicing .commander{font-size:10px;line-height:12px}
}
@media(max-width:699px){.workshop-sidebar .workmeta{grid-template-columns:1fr}.hero>.primary{margin-top:12px}.hero+.row{flex-wrap:wrap;gap:4px 12px}.hero+.row>h2{margin-bottom:5px}.workshop-content .zonebar button{min-height:42px}.workshop .quantity button{min-width:34px;min-height:36px}.modal{max-width:100%;padding:20px}.overlay{padding:12px}.workshop-content .viewsettings{grid-template-columns:repeat(2,minmax(0,1fr))}.viewsettings>div:last-of-type{grid-column:1/-1}}
@media(pointer:coarse){.quantity button,.searchresult>button{min-width:44px;min-height:44px}.printinglink{min-height:32px}.footer-links button,.footer-links a{min-height:36px;display:inline-flex;align-items:center}.printgrid button{min-height:44px}}

/* Keep card boxes at the same aspect ratio as their images. */
.decks{grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr))}
@media(min-width:700px){.decks{grid-template-columns:repeat(2,minmax(0,1fr))}.cover{height:170px}body.practicing .hand{container-type:size}body.practicing .card{height:min(100%,calc((100cqw - 36px) / 4 * 680 / 488));width:auto;aspect-ratio:488/680;align-self:center;justify-self:center}body.practicing .card .fallback{background:#18232f}}
@media(min-width:1024px){.decks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1400px){.decks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1500px) and (min-height:650px){body.practicing .card{height:min(100%,calc((100cqw - 84px) / 7 * 680 / 488))}}
@media(max-height:550px) and (orientation:landscape){body.practicing .hand{container-type:size}body.practicing .card{height:min(100%,calc((100cqw - 30px) / 7 * 680 / 488));width:auto;aspect-ratio:488/680;align-self:center;justify-self:center}}
body.practicing .card:has(>img:not([style*="display"])) .fallback{visibility:hidden}
.desktop-device .install-entry{display:none!important}
.stats-modal{max-width:920px}.stats-modal h2{margin-top:8px}.stats-tabs{display:flex;gap:8px;margin:20px 0 4px}.stats-tabs button{min-height:44px;font-size:14px}.stats-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}.stats-filters label{margin-top:10px}.stats-filters select{width:100%;font-size:16px;min-width:0}.stats-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}.stats-metrics .stat{padding:18px 8px}.stats-metrics .stat b{font-size:30px}.stats-metrics .stat small{font-size:12px}.stats-results h3{font-size:16px;margin:24px 0 12px}.stats-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}.stats-table th,.stats-table td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:right;overflow-wrap:anywhere}.stats-table th:first-child{text-align:left;width:34%;font-weight:500}.stats-table thead th{color:var(--muted);font-size:12px;font-weight:500}.stats-table th+td{color:#edf4f8}.stats-version-link{padding:4px 8px;background:none;color:var(--lime);border:0}.stats-dist{display:flex;justify-content:space-between;gap:6px;background:linear-gradient(to right,#8bd5ff22 var(--amount),transparent var(--amount));padding:5px 8px;border-radius:4px}.stats-dist small{font-size:11px}.stats-sample,.stats-footnote{color:var(--muted);font-size:12px;line-height:1.7}.stats-footnote{margin:22px 0 0}.stats-changes{list-style:none;margin:0;padding:0}.modal .stats-changes li{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}.stats-changes strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}.stats-changes small{display:block;font-size:11px;margin-top:4px}.stats-added{color:#71e2a2}.stats-removed{color:var(--red)}
@media(max-width:600px){.stats-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-tabs{gap:6px}.stats-tabs button{font-size:12px;padding:10px}.stats-table{font-size:12px}.stats-table th,.stats-table td{padding:10px 4px}.stats-table thead th{font-size:11px}.stats-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-filters>div:last-child{grid-column:1/-1}}