/* Desktop uses the available window; mobile keeps its compact portrait mat. */
@media(min-width:1000px){
 body main{width:100%;max-width:none;padding:26px 28px}
 body header{padding:20px 28px}
 body .world-theme-bar{max-width:none;padding-inline:28px}
 body #arena{max-width:none;width:100%}
 .binderoverview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
 .binderinfo{grid-column:1;grid-row:1}
 #mydecks{grid-column:2;grid-row:1;margin:0}
 .binderinfo h1{margin:8px 0;font-size:38px}.binderinfo h2{font-size:20px;margin:12px 0 6px}.binderinfo p{margin:8px 0}
 #mydecks .deckboxgrid{max-height:190px;overflow:auto;margin:10px 0;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
 #mydecks .customdeckbox{max-width:125px;padding:8px;gap:5px}#mydecks .customdeckbox strong{font-size:13px}#mydecks .deckboxlid{font-size:7px}
 #mydecks .buildertools{margin:8px 0}#mydecks h2{margin:8px 0}
 #deckbuilder{margin:14px 0;padding:16px}.builderhead h2{margin:4px 0}.builderhead p{margin:6px 0 12px}
 .ownedgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
 #deckbuilder{padding:24px}
 #deckview{width:calc(100vw - 56px);max-width:none}
 .catalogproducts{grid-template-columns:repeat(4,minmax(0,1fr))}
 body .board{width:100%;max-width:none;margin:12px 0;padding:18px 24px}
 .board .playhalf{grid-template-columns:minmax(0,1fr);gap:5px}
 .board .playhalf .field{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;justify-items:center}
 .board .field .slot{width:clamp(70px,calc((100dvh - 540px)*.357),130px);max-width:100%}
 .board .playhalf .playerbase{display:contents}
 .board .playhalf .handdeckrow{grid-template-columns:80px minmax(0,1fr) 80px;gap:12px;padding:4px 0 0}
 .board .handtoggle,.board .rivalhand{min-height:65px;padding:3px 8px}
 .board #handfan,.board .rivalhandfan{height:44px}
 .board #handfan img,.board .rivalhandfan img{height:42px;width:30px;margin-right:-7px}
 .board .discarddock{grid-template-rows:12px 42px;gap:3px}
 .board .discardpile{height:42px;width:30px}
 body .board .deckdisplay{grid-template-rows:12px 42px;grid-template-columns:23px 30px;gap:3px}
 body .board .deckdisplay .deckstack{height:42px;width:30px}
 .board .gemrow{height:24px}
 .board .playerscore{width:100%;padding-top:8px}
 .board .playerscore strong{font-size:28px}
 .board .playerscore>small{font-size:10px}
 .board .matcenter{grid-template-columns:1fr 48px 1fr;gap:16px;margin:8px 0;padding:3px 0}
 .board .matcrest{width:48px;height:48px}
 .board .matend #endturn{min-width:200px}
 .board .turn #round{padding:7px}.board .turn #whose{font-size:16px;margin:5px 0}
 .board .boardlabel{margin:3px 0 6px}
 .board .targetvault{font-size:16px;padding:7px}
 .board #vaulthint{font-size:10px;margin:3px 0}
 .board .handtray{position:fixed;left:20%;right:20%;bottom:24px;max-height:70dvh;overflow:auto}
 .board .hp{font-size:10px;padding:3px}.board .hp i{height:4px}
 .board .taphint{font-size:8px}
}
@media(min-width:1000px){
 body .board #direct{font-size:16px;padding:7px;min-height:0}
 body .board #vaulthint{margin:3px 0;font-size:10px}
 body .board .matcenter{margin:4px 0;padding:0;min-height:0}
 body .board .matcenter .matcrest{height:44px;width:44px}
 body .board .matcenter .turn b{font-size:14px;margin:3px 0}
 body .board .matcenter #round{font-size:11px;padding:5px}
 body .board .fieldbanner{font-size:10px;padding:4px 14px}
 body .board .playerbase .playerscore{padding:2px 0 0}
 body .board .playerbase .playerscore>strong{font-size:22px}
 body .board .playerbase .playerscore .playerlife{height:6px;margin-top:3px}
 body .board .playerbase .playerscore>small{margin-top:2px;font-size:8px}
 body .board .handtoggle,body .board .rivalhand{min-height:60px}
 body .board .handtoggle>span:first-child,body .board #rivalhandlabel{font-size:9px;line-height:1.2;margin-bottom:2px}
 .board .field .slot{width:clamp(65px,calc((100dvh - 530px)*.357),115px)}
}

/* Desktop mat, status message and persistent hand share the same aligned width. */
@media(min-width:1000px){
 body #arena{max-width:1100px;margin-inline:auto}
 body .board{width:100%;max-width:none;margin:12px auto;padding:18px 16px}
 .board .playhalf .field{gap:8px;justify-items:stretch}
 .board .field .slot{width:100%;max-width:none}
 .board .matend #endturn{min-width:0;width:100%}
 body #arena>.handtray{position:relative;inset:auto;max-height:none;width:100%;margin:24px auto;overflow:visible;animation:none;padding:16px;background:var(--skin-panel,#062b24)}
 body #arena>.handtray.pulling{opacity:1;pointer-events:auto}
 body #arena>.handtray .hand{gap:0;padding:30px 12px 18px;align-items:end;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;min-height:390px}
 body #arena>.handtray .handitem{flex:0 0 min(240px,32.857dvh);margin-right:-100px;transition:transform .16s;position:relative}
 body #arena>.handtray .handitem:last-child{margin-right:0}
 body #arena>.handtray .handitem:hover,body #arena>.handtray .handitem:focus-within{transform:translateY(-16px);z-index:2}
 body #arena>.handtray .handcard{width:100%;opacity:1}
 body #arena>.handtray .handcard img{width:100%;aspect-ratio:5/7}
 body #arena>.handtray .handtools button[aria-label="Close hand"]{display:none}
 body #arena>.handtray .handview{position:relative;z-index:3}
}

/* Clear card inspection action on every screen. */
#attackdialog .viewcardbutton{border:1px solid var(--skin-line,#bda266);border-radius:24px;padding:10px 20px;min-height:44px;font-weight:700}
@media(min-width:1000px){
 #attackdialog{width:min(92vw,860px);max-width:860px}
 #attackdialog .actionpanel{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1fr);gap:18px 28px}
 #attackdialog .attacktools{grid-column:1/-1;margin:0}
 #attackdialog .fighterinfo{grid-column:2;grid-row:2;flex-direction:column;text-align:center;margin:0}
 #attackdialog .fighterinfo>img{width:min(280px,35dvh);height:auto;aspect-ratio:5/7;border-radius:12px}
 #attackdialog .moves{grid-column:1;grid-row:2;flex-direction:column;justify-content:center}
 #attackdialog .move{flex:0 1 auto;min-height:100px}
 body #arena>.handtray{position:sticky;bottom:0;z-index:30;margin:12px auto;padding:8px 16px;background:var(--skin-panel,#062b24)}
 body #arena>.handtray .hand{min-height:0;height:380px;justify-content:safe center;align-items:start;padding:48px 28px 8px;scroll-snap-type:none}
 body #arena>.handtray .handitem{flex:0 0 225px;margin-right:-106px;transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));transform-origin:50% 100%;transition:transform .18s;}
 body #arena>.handtray .handitem:hover,body #arena>.handtray .handitem:focus-within,body #arena>.handtray .handitem.lifted{transform:translateY(-36px) rotate(0deg);z-index:10}
 body #arena>.handtray .handcard span{display:none}
 body #arena>.handtray .handview{font-size:11px;padding:5px 10px;width:100%;min-height:28px}
 body #arena>.handtray.pulling{opacity:.22;pointer-events:none}
 body #arena>.handtray .handtools strong{font-size:14px}
 .board .playhalf .field{justify-items:center}
 .board .field .slot{width:min(100%,150px)}
}
@media(prefers-reduced-motion:reduce){body #arena>.handtray .handitem{transition:none}}

@media(min-width:1000px){
 body #arena>.handtray{bottom:-90px}
 body #arena>.handtray .handtools{min-height:24px}
 #yourfield{scroll-margin-top:18px}
 body #arena>.handtray:has(.handitem.lifted) .handitem.lifted{transform:translateY(-36px) rotate(0deg)}
}

/* Let the themed scene show through the desktop hand, with 25% larger cards. */
@media(min-width:1000px){
 body #arena>.handtray{background:transparent;border:0;box-shadow:none;backdrop-filter:none}
 body #arena>.handtray .handtools,body #arena>.handtray>p{background:transparent}
}

@media(min-width:1000px){
 #handinstructions{position:relative;margin:12px 0 0;padding:0 16px;color:var(--skin-text);background:transparent}
 #handinstructions .handtools{display:flex;align-items:center;gap:12px}
 #handinstructions .handtools strong{font-size:14px;margin-right:auto}
 #handinstructions p{font-size:11px;line-height:1.5;margin:5px 0;color:var(--skin-muted)}
 #handinstructions button[aria-label="Close hand"]{display:none}
 body #arena>.handtray{margin-top:0;pointer-events:none}
 body #arena>.handtray .handitem{pointer-events:auto}
 body #arena>.handtray.pulling .handitem{pointer-events:none}
}

/* Content-sized centered inspection, without a stretched blank lower panel. */
body #inspect,body #zoom{height:fit-content;min-height:0;inset:0;margin:auto;max-height:calc(100dvh - 24px)}
body #inspect .viewerbody,body #zoom .viewerbody{flex:0 1 auto;min-height:0;height:auto;padding-bottom:12px}
body #inspectdetail>p:last-child{margin-bottom:0}
@media(min-width:1000px){
 .catalogproduct{display:grid;grid-template-rows:280px 36px auto 66px auto;align-content:start}
 .catalogproduct>.catalogart,.catalogproduct>.realdeckbox{grid-row:1;width:100%;height:280px;max-height:280px;aspect-ratio:auto;object-fit:contain;margin:0 auto}
 .catalogproduct>.catalogart{padding:18px 0}
 .catalogproduct>.boxcatalogcontrols{grid-row:2;margin:0;align-self:center}
 .catalogproduct>h3{grid-row:3;margin:12px 0}
 .catalogproduct>p{grid-row:4;margin:0;min-height:0}
 .catalogproduct>.purchasebar{grid-row:5;align-self:end}
}
@media(max-width:999px){
 #handinstructions{position:relative;padding:8px 8px 0;background:transparent;color:var(--skin-text)}
 #handinstructions .handtools{display:flex;align-items:center;gap:10px}
 #handinstructions .handtools strong{font-size:13px;margin-right:auto}
 #handinstructions p{font-size:10px;line-height:1.4;margin:4px 0;color:var(--skin-muted)}
 #handinstructions button[aria-label="Close hand"]{display:none}
 body #arena>.handtray{position:sticky;inset:auto;bottom:-48px;z-index:30;width:100%;margin:0;padding:0;background:transparent;border:0;box-shadow:none;animation:none;max-height:none;pointer-events:none}
 body #arena>.handtray .hand{display:flex;gap:0;height:290px;min-height:0;padding:42px 20px 12px;overflow-x:auto;overflow-y:hidden;align-items:start;justify-content:safe center;scroll-snap-type:none}
 body #arena>.handtray .handitem{flex:0 0 150px;margin-right:-65px;pointer-events:auto;position:relative;transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));transform-origin:50% 100%;transition:transform .15s}
 body #arena>.handtray .handitem:last-child{margin-right:0}
 body #arena>.handtray .handitem.lifted,body #arena>.handtray .handitem:focus-within{transform:translateY(-26px) rotate(0deg);z-index:10}
 body #arena>.handtray .handcard{width:100%;padding:0;opacity:1}
 body #arena>.handtray .handcard span{display:none}
 body #arena>.handtray .handview{width:100%;min-height:32px;padding:5px;font-size:11px}
 body #arena>.handtray.pulling{opacity:0;pointer-events:none}
 body #arena>.handtray.pulling .handitem{pointer-events:none}
}

/* Touch browsing and hold-to-drag use separate gesture states. */
body #arena>.handtray .hand{pointer-events:auto;justify-content:flex-start;padding-inline:32px;scroll-behavior:auto}
body #arena>.handtray .handcard{touch-action:none;-webkit-touch-callout:none;user-select:none}
body #arena>.handtray .handitem:has(.holdready){transform:translateY(-30px) rotate(0deg);z-index:12}
body #arena>.handtray .handcard.holdready{outline:3px solid var(--skin-accent,#70f9d2);outline-offset:2px}

body #arena>.handtray .handcard:disabled{touch-action:pan-x}

/* No shadow layers or translucent hand remnants while moving cards. */
body .dragghost{box-shadow:none!important;filter:none!important;opacity:1}
body.dragging .board .dropblocked .wolf:after{content:none!important}
body #arena>.handtray.pulling{opacity:0!important;pointer-events:none}
body #arena>.handtray .handcard{box-shadow:none!important;filter:none!important}
@media(max-width:999px){
 body #arena>.handtray .hand{position:relative;padding-left:calc(50% - 75px);padding-right:calc(50% - 75px);height:310px}
 body #arena>.handtray .handitem{transform:translateY(var(--wheel-drop,0px)) rotate(var(--wheel-angle,0deg));transition:transform .12s ease-out}
 body #arena>.handtray .handitem.browsefocus{transform:translateY(-25px) rotate(0deg) scale(1.08);z-index:15}
 body #arena>.handtray .handitem.browsefocus .handcard{outline:2px solid white;outline-offset:2px}
 body #arena>.handtray .handitem:has(.holdready){transform:translateY(-32px) rotate(0deg) scale(1.08);z-index:16}
}
@media(prefers-reduced-motion:reduce){body #arena>.handtray .handitem{transition:none}}

/* Suppress iOS's retained tap rectangle; card lift is the touch focus cue. */
#arena .handtray,#arena .handtray *,#arena .handtoggle,#arena .wolf{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
body #arena>.handtray .handcard,
body #arena>.handtray .handcard.selected,
body #arena>.handtray .handcard.holdready,
body #arena>.handtray .handitem.browsefocus .handcard{outline:none;border:0;background:transparent;box-shadow:none!important;filter:none!important}
body #arena>.handtray .handcard:focus-visible{outline:2px solid var(--skin-accent,#70f9d2);outline-offset:2px}
@media(pointer:coarse){body #arena>.handtray .handcard:focus-visible{outline:none}}

/* Available attacks stay visible on the field, outside the detail dialog. */
#yourfield .wolf.can-strike{outline:2px solid var(--skin-accent,#70f9d2);outline-offset:3px;animation:readyWolf 1.6s ease-in-out infinite}
@keyframes readyWolf{50%{outline-offset:6px;outline-color:#fff3b0}}
@media(prefers-reduced-motion:reduce){#yourfield .wolf.can-strike{animation:none}}

/* Same centered navigation on shop, collection and arena. */
body>header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
body>header>.brand{justify-self:start}body>header>nav{grid-column:2;justify-self:center;display:flex;justify-content:center;align-items:center;gap:14px;margin:0}
body>header>.preview{justify-self:end}
#skipdeal:not([hidden]){position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:10000;min-height:48px;padding:12px 24px;box-shadow:0 4px 24px #0007}
@media(max-width:850px){body>header{grid-template-columns:1fr;justify-items:center;gap:10px}body>header>.brand,body>header>.preview{justify-self:center}body>header>nav{grid-column:1;flex-wrap:wrap;gap:8px 14px}body>header>nav a,body>header>nav button{font-size:13px}}