/* Viewport fit. fit.js sets --app-zoom and the logical window size; nothing in the arena scrolls. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column}
body>.topbar,body>main{zoom:var(--app-zoom,1)}
body>.topbar{flex:none}
body>main{flex:1;min-height:0;display:flex;flex-direction:column}
/* Collection and Rulebook fill the window too: long lists page, side panels shrink. */
body>main>.content-view{flex:1;min-height:0!important;overflow:hidden;width:100%;display:flex;flex-direction:column;padding:20px 32px 12px}
.content-view>*{flex:none}
.content-view .view-heading{margin-bottom:14px}
.collection-note{margin-top:-6px;margin-bottom:10px}
.deck-row,.deck-details,.catalog-controls{margin-bottom:12px}
.deck-row{overflow:hidden;grid-template-columns:repeat(5,minmax(0,1fr));max-height:16%}
.deck-details{overflow:hidden;max-height:22%;padding:14px 18px!important}
.deck-details h2{margin-bottom:8px}
.deck-details .deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 12px}
.catalog-grid>*{zoom:var(--fit,1)}
.catalog-layout,.rules-layout{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
.catalog-layout>div{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.catalog-layout>.inspector,.rules-layout>nav{position:static!important;overflow:hidden;min-height:0;max-height:100%}
.rule-doc{overflow:hidden;min-height:0;height:100%}
.rules-layout>nav a{padding-top:5px!important;padding-bottom:5px!important}
.rule-doc>:first-child,.rule-doc>h2{margin-top:0}
.rule-doc table{display:table!important;table-layout:fixed;overflow:visible!important}
.rule-doc th,.rule-doc td{min-width:0!important}
.fit-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #a0c6c638;font-size:12px;color:#b9cfd3;flex:none}
.fit-pager button{border:1px solid var(--border);background:transparent;border-radius:8px;padding:6px 12px;min-height:34px;font-size:12px;font-weight:650;color:#e1e9e9}
.fit-pager button:hover:not(:disabled){background:#a6d3d214}
#board-view{flex:1;min-height:0;display:flex;flex-direction:column}
#board-view>.match-toolbar{flex:none}
.game-shell{flex:1;min-height:0!important;display:flex;flex-direction:column}
.arena-grid{flex:1;min-height:0;width:100%;align-items:stretch}
.arena-footer{flex:none}
.arena{height:100%!important;min-height:0!important}
.turn-zone{min-height:0;max-height:100%;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
/* Children of fitted columns keep their size so overflow reaches the region and gets measured. */
.turn-zone>*,.player-bar>*{flex-shrink:0}

/* Fitted regions clip instead of scrolling; fit.js zooms their children until they fit. */
.drag-ghost>*{zoom:1!important}
:is(.hand,.creatures,.resources,.turn-zone,#stack,#outcome,.decision-rail,.event-log,.game-menu>.tabs,dialog){overflow:hidden!important;scrollbar-width:none}
/* The phase pill shrinks its text rather than cutting it off. */
.phase-pill{overflow:hidden}
.phase-pill>strong{overflow:visible!important;text-overflow:clip!important}
/* Player panels are drop targets with labels above them, so they shrink without clipping. */
.player-bar{align-self:stretch!important;min-height:0;max-height:100%;margin-top:0!important;margin-bottom:0!important}
.hand,.creatures,.resources{scroll-snap-type:none}
/* Safe alignment keeps overflow on the measurable side, so fit.js sees it. */
.hand,.creatures{justify-content:safe center!important}
body:not([data-mode=match]) .resources{justify-content:safe center!important}
.hand>*,.creatures>*,.resources>*{flex-shrink:0}
.zone,.hand-zone{min-height:0;height:100%}
.zone{display:flex;flex-direction:column;justify-content:center}
/* Rows fill their zone, so a region's box is the space it was given rather than the size of its pieces. */
.creatures{min-height:0!important;flex:1 1 0;align-items:center}
.resource-zone .resources{flex:1 1 0;min-height:0;align-items:center}
.hand-zone{display:flex;flex-direction:column;justify-content:flex-end}
.hand{flex:1 1 0;min-height:0;align-items:safe flex-end}
.hand-label{flex:none}

/* Dialogs share the window zoom and never exceed it. */
dialog{zoom:var(--app-zoom,1);max-height:calc(var(--app-h,100vh) - 24px)!important;max-width:calc(var(--app-w,100vw) - 16px)}
dialog[open]{display:flex;flex-direction:column}
dialog[open]>*{flex-shrink:0}
.game-menu>.tabs{max-height:calc(var(--app-h,100vh) - 64px)}
.event-log{zoom:var(--app-zoom,1);max-height:calc(var(--app-h,100vh) - 100px)!important}

/* Wide layouts: the rail is as tall as the arena and its contents shrink into it. */
@media(min-width:901px),(orientation:landscape){
  .own-player{justify-content:flex-end}
  .arena-grid{grid-template-rows:minmax(0,1fr)}
  .decision-rail{align-self:stretch;max-height:none!important;height:100%;min-height:0}
  .decision-rail>*{flex-shrink:0}
  .arena{grid-template-rows:72px minmax(0,1fr) fit-content(22%) minmax(0,1fr) 82px minmax(96px,126px)}
  body[data-mode=match] .arena{grid-template-rows:92px minmax(0,1fr) fit-content(22%) minmax(0,1fr) 92px minmax(90px,112px)}
}
/* Tablets and landscape phones keep the arena and rail side by side; crowded rows wrap before they shrink. */
@media(min-width:601px) and (max-width:900px),(max-width:900px) and (orientation:landscape){
  .arena-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,34vw,280px);grid-template-rows:minmax(0,1fr);gap:12px;padding:10px 12px 6px}
  .arena,body[data-mode=match] .arena{grid-template-columns:110px minmax(0,1fr);column-gap:10px;row-gap:3px;grid-template-rows:72px minmax(0,1fr) fit-content(22%) minmax(0,1fr) 80px minmax(90px,120px)!important}
  .decision-rail,body[data-mode=match] .decision-rail{display:flex;flex-direction:column;width:auto;justify-self:stretch;align-self:stretch;height:100%;max-height:none!important;min-height:0}
  .decision-rail>*{flex-shrink:0}
  .creatures{flex-wrap:wrap;align-content:safe center}
  .own-player{justify-content:flex-end}
}
/* Short landscape windows: slimmer chrome and fixed rows leave the height to the battlefields. */
@media(max-height:520px) and (orientation:landscape){
  .topbar{height:46px!important;padding:0 14px!important}
  .brand{font-size:16px!important}.brand img{width:24px!important;height:30px!important}
  .top-actions>button,.game-menu>summary,.icon-button{min-height:34px!important;height:34px!important}
  .game-menu>summary,.icon-button{width:34px!important}
  .tabs{top:40px!important}
  .match-toolbar{height:40px!important;padding:2px 14px!important}
  .match-toolbar select{height:32px!important}
  .phase-pill{padding:3px 16px!important}
  .phase-pill>span,.phase-pill>strong{font-size:13px!important}
  .arena-grid{padding:6px 10px 4px!important;gap:10px!important}
  .arena,body[data-mode=match] .arena{grid-template-rows:44px minmax(0,1fr) fit-content(26%) minmax(0,1fr) 44px minmax(60px,84px)!important}
  .creatures,body[data-mode=match] .creatures{padding:6px 4px 2px!important}
  .resources,body[data-mode=match] .resources{padding:2px 4px!important}
  .player-bar{gap:4px!important}.player-bar .portrait{width:36px!important;height:36px!important}
  .arena-footer{display:none!important}
  .collection-note,.results-count{display:none}
  .deck-details{max-height:20%!important;padding:6px 12px!important}
  .deck-details>p{display:none}
}
/* Small landscape phones: the phone stacking above gives way to the side-by-side board. */
@media(max-width:600px) and (orientation:landscape){
  .arena,body[data-mode=match] .arena{grid-template-columns:96px minmax(0,1fr)!important}
  .player-bar.opponent{grid-row:1/3!important;grid-column:1!important}
  .opponent-reserve{grid-row:1!important;grid-column:2!important}
  .opponent-battlefield{grid-row:2!important;grid-column:2!important}
  .turn-zone{grid-row:3!important;grid-column:1/-1!important}
  .own-battlefield{grid-row:4!important;grid-column:2!important}
  .resource-zone.own{grid-row:5!important;grid-column:2!important}
  .own-player{grid-row:5/7!important;grid-column:1!important}
  .hand-zone{grid-row:6!important;grid-column:2!important}
  .player-bar{flex-direction:column!important;align-items:flex-start!important}
  .player-counters{margin-left:0!important;flex-wrap:wrap!important}
  .match-toolbar{display:flex!important;height:40px!important;min-height:0!important}
  .phase-pill{position:absolute!important;left:50%!important;transform:translateX(-50%)!important}
  .step-actions{position:static!important;box-shadow:none!important;border:0!important;padding:0!important;background:none!important}
  body[data-mode=match] .decision-rail.mobile-detail-open{position:static!important;max-height:none!important;box-shadow:none!important}
  .match-mobile-close{display:none!important}
  .catalog-layout{grid-template-columns:minmax(0,1fr) 200px!important;grid-template-rows:minmax(0,1fr)!important}
  .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .catalog-controls{flex-wrap:nowrap!important}
  .catalog-controls label:first-child{flex-basis:auto!important}
  .catalog-controls .quiet{flex-basis:auto!important}
  .rules-layout{grid-template-columns:170px minmax(0,1fr)!important}
  .rules-layout>nav{display:flex!important;flex-direction:column!important}
}
/* Short windows: reference headers give their height to the list. */
@media(max-height:700px){
  .content-view .view-heading{margin-bottom:6px}
  .view-heading h1{font-size:26px!important}
  .view-heading>p,.view-heading .eyebrow{display:none}
  .collection-note{margin:0 0 6px!important}
  .deck-row{max-height:14%;margin-bottom:8px}
  .deck-details{max-height:18%;padding:8px 14px!important}
  .catalog-controls{margin-bottom:8px}
  .catalog-controls label{font-size:0!important;gap:0!important}
  .catalog-controls input,.catalog-controls select,.catalog-controls .quiet{font-size:12px!important;min-height:34px!important;padding-top:6px!important;padding-bottom:6px!important}
}
/* Phone reference views: compact deck chips, two-column cards, details below. */
@media(max-width:600px) and (orientation:portrait){
  body>main>.content-view{padding:14px 14px 10px}
  .content-view .view-heading{margin-bottom:10px}
  .view-heading h1{font-size:26px!important}
  .view-heading>p{display:none}
  .deck-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;max-height:18%}
  .catalog-controls{gap:8px!important}
  .catalog-controls label:first-child{flex-basis:100%}
  .catalog-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1.6fr) minmax(0,1fr);gap:10px!important}
  .deck-details{max-height:15%;padding:8px 12px!important}
  .deck-details>p{display:none}
  .results-count{display:none}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .rules-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,24%) minmax(0,1fr);gap:10px!important}
}
/* Phones: the board fills the window; the rail opens as a sheet over it. */
@media(max-width:600px) and (orientation:portrait){
  .topbar{height:52px!important}
  .brand img{width:26px!important;height:32px!important}.brand{font-size:17px!important}
  .match-toolbar{min-height:0!important;height:48px!important;grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto!important;padding:5px 10px!important;gap:6px!important;align-items:center}
  .match-toolbar .arena-picker>svg{display:none}
  .match-toolbar select{height:36px!important}
  .match-toolbar .arena-picker select{width:100%!important;min-width:92px}
  .phase-pill{grid-row:1!important;grid-column:2!important;justify-self:center;padding:3px 10px!important;gap:5px!important;max-width:100%}
  .phase-pill>span,.phase-pill>strong{font-size:11px!important}
  .match-toolbar>.study-picker,.match-toolbar>.match-mode-label{grid-row:1;grid-column:3}
  .arena-grid{display:flex;flex-direction:column;gap:8px;padding:6px 10px 4px}
  .arena{flex:1 1 0;height:auto!important;row-gap:3px;grid-template-rows:44px minmax(22px,.5fr) minmax(0,var(--opponent-field,1fr)) fit-content(16%) minmax(0,var(--own-field,1fr)) minmax(22px,.5fr) 42px minmax(56px,var(--hand-rows,.8fr))!important}
  /* Empty battlefields lend their height to a crowded hand. */
  .arena:has(#opponent-field:not(:has([data-match-piece],.unit))){--opponent-field:.3fr}
  .arena:has(#own-field:not(:has([data-match-piece],.unit))){--own-field:.3fr}
  .arena:has(#hand>:nth-child(6)){--hand-rows:1.3fr}
  .player-bar .portrait{width:40px;height:40px}
  .hand{flex-wrap:wrap;align-content:safe flex-end}
  .creatures{flex-wrap:wrap;align-content:safe center;padding:8px 4px 2px!important;gap:6px 10px!important}
  .arena-footer{font-size:0!important;min-height:0!important;height:76px!important;padding:0!important}
  body:not([data-mode=match]) .decision-rail{flex:0 1 auto;max-height:20%!important;display:flex;flex-direction:column}
  body:not([data-mode=match]) .decision-rail>.inspector{display:none}
  body:not([data-mode=match]) .decision-rail>.study-panel{padding-top:10px}
  body[data-mode=match] .decision-rail:not(.mobile-detail-open){flex:none;height:0;min-height:0;border:0;padding:0;margin:0;box-shadow:none}
  body[data-mode=match] .decision-rail:not(.mobile-detail-open)>:not(.study-panel){display:none}
  body[data-mode=match] .decision-rail.mobile-detail-open{max-height:calc(var(--app-h,100svh) - 160px)!important}
}
/* Collection on tablets and laptops: compact cards fill the row, so each page holds two or more rows instead of two cards. */
@media(min-width:700px) and (min-height:600px){
  .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;gap:12px!important}
  .catalog-grid .piece--entry{height:150px}
  .catalog-grid .piece--entry .piece-name{font-size:15px;line-height:1.15}
  .catalog-grid .piece--entry .piece-kind{font-size:11px}
}