/* #region Card Browser & Deck Viewer — Size Preferences */
/* v1.0.6 — independent, saved card-size controls */
.card-scale-control {
  margin:0 0 12px;
  font-size:12px;
}
.card-scale-control label { white-space:nowrap;  }
.card-scale-control input[type=range] {
  flex:0 1 180px;
  accent-color:#3979df;
}
.card-scale-control output {
}
#cards.cards {
}
.shell:not(.deck-mode) #browserDeckSidebar #deckList {
}
@media(max-width:600px) {
  .card-scale-control { gap:7px; }
  .card-scale-control input[type=range] { flex:1 1 90px; }
  #cards.cards {
    grid-template-columns:repeat(auto-fill,minmax(0,min(var(--browser-card-size,185px),calc((100vw - 42px)/2))));
  }
  .shell:not(.deck-mode) #browserDeckSidebar #deckList {
    grid-template-columns:repeat(auto-fill,minmax(0,min(var(--drawer-card-size,160px),calc((100vw - 42px)/2))));
  }
}

/* #endregion Card Browser & Deck Viewer — Size Preferences */

/* #region Card Browser — Responsive Tile Scaling */
/* v1.0.7: the ENTIRE tile scales with its width, not just the artwork.
   Container units make controls, labels, spacing and text proportional. */
#cards > article.card,
#browserDeckSidebar #deckList .deckitem {
  container-type:inline-size;
}
#cards > article.card .gallery-quick {
  grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.25fr) repeat(2,minmax(0,1fr));
  gap:2.1cqw;
  padding:4.8cqw 3.4cqw 2.8cqw;
}
#cards > article.card .gallery-quick button {
  height:20cqw;
  font-size:8.3cqw;
  border-radius:3.4cqw;
}
#cards > article.card .gallery-quick .gallery-count {
  font-size:7.6cqw;
  min-width:0;
}
#cards > article.card .info { padding:5.5cqw; }
#cards > article.card .name { font-size:8.3cqw; }
#cards > article.card .sub { font-size:7.6cqw; margin-top:2.8cqw; }
#browserDeckSidebar #deckList .deckitem .label {
  padding:4.6cqw 3.8cqw;
  font-size:7.7cqw;
}
#browserDeckSidebar #deckList .deckitem .label small { font-size:6.9cqw; }
#browserDeckSidebar #deckList .deckitem .actions {
  grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.2fr) repeat(2,minmax(0,1fr));
  gap:1.6cqw;
  margin-top:3cqw;
}
#browserDeckSidebar #deckList .deckitem .actions button {
  padding:3.7cqw 0;
  font-size:7.7cqw;
  border-radius:2.3cqw;
}
#browserDeckSidebar #deckList .deckitem .actions span {
  font-size:7cqw;
  min-width:0;
}

/* #endregion Card Browser — Responsive Tile Scaling */

/* #region Card Size Controls — Buttons & Sliders */
/* v1.0.8: compact, polished size controls */
.card-scale-control {
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  gap:11px;
  padding:8px 12px;
  margin:10px 0 14px;
  border:1px solid #35445b;
  border-radius:12px;
  background:#192538;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
  color:#c8d5e9;
}
.card-scale-control label {
  color:#dce7f7;
  font-size:12px;
  font-weight:650;
  letter-spacing:.01em;
}
.card-scale-control .scale-card-icon {
  flex:none;
  display:block;
  border:1.5px solid #93a8c5;
  border-radius:2px;
  aspect-ratio:600 / 838;
  background:linear-gradient(145deg,#456b9e 0%,#243750 75%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.card-scale-control .scale-card-small { width:11px; }
.card-scale-control .scale-card-large { width:19px; }
.card-scale-control input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  flex:0 1 155px;
  width:155px;
  min-width:65px;
  height:6px;
  padding:0;
  border:0;
  border-radius:99px;
  outline:none;
  background:linear-gradient(to right,#438cf0 0%,#438cf0 var(--scale-progress,35%),#34445c var(--scale-progress,35%),#34445c 100%);
  cursor:pointer;
  touch-action:pan-y;
}
.card-scale-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:17px;
  height:17px;
  border:3px solid #cde2ff;
  border-radius:50%;
  background:#438cf0;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.card-scale-control input[type=range]::-moz-range-thumb {
  width:12px;
  height:12px;
  border:3px solid #cde2ff;
  border-radius:50%;
  background:#438cf0;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.card-scale-control input[type=range]:focus-visible { outline:2px solid #a8caff; outline-offset:5px; }
.card-scale-control output {
  min-width:48px;
  padding:5px 7px;
  border:1px solid #3b4d67;
  border-radius:7px;
  background:#111b2b;
  color:#e4efff;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
@media(max-width:480px) {
  .card-scale-control { gap:8px; padding:8px 9px; }
  .card-scale-control label { font-size:11px; }
  .card-scale-control input[type=range] { width:95px; flex:1 1 95px; }
  .card-scale-control .scale-card-large { width:16px; }
}

/* #endregion Card Size Controls — Buttons & Sliders */

/* #region Card Layout — Centred Rows */
/* v1.0.9: center rows of cards, including incomplete rows, and remove numeric scale readouts. */
#cards.cards,
.shell:not(.deck-mode) #browserDeckSidebar #deckList {
  justify-content:center;
}
#browserDeckSidebar #deckList .deck-section-heading {
  grid-column:1 / -1;
}

/* #endregion Card Layout — Centred Rows */

/* #region Card Layout — Column Count Overrides */
/* v1.0.17 — columns rather than pixel widths. Last rules override legacy sizing. */
#cards.cards {
  display:grid;
  grid-template-columns:repeat(var(--browser-columns,6),minmax(0,1fr));
  justify-content:center;
  align-items:start;
}
.shell:not(.deck-mode) #browserDeckSidebar #deckList {
  display:grid;
  grid-template-columns:repeat(var(--drawer-columns,7),minmax(0,1fr));
  justify-content:center;
  align-items:start;
}
#browserDeckSidebar #deckList .deck-section-heading,
#browserDeckSidebar #deckList > .empty { grid-column:1/-1; }
/* No minimum tile width: the requested number of cards always fits. */
#cards.cards > *,
#browserDeckSidebar #deckList .deckitem { min-width:0; max-width:none; }
@media(max-width:600px) {
  #cards.cards { grid-template-columns:repeat(var(--browser-columns,3),minmax(0,1fr)); }
  .shell:not(.deck-mode) #browserDeckSidebar #deckList {
    grid-template-columns:repeat(var(--drawer-columns,3),minmax(0,1fr));
  }
}

/* #endregion Card Layout — Column Count Overrides */

/* #region Inspector — Drawer Clearance */
/* v1.0.17: keep the inspector entirely above the collapsed deck drawer
   on desktop as well as mobile. The dialog scrolls internally. */
#modal.open {
  z-index:1001;
  bottom:var(--inspector-drawer-height,54px);
  min-height:0;
  box-sizing:border-box;
  padding:10px;
}
#modal.open > .dialog {
  max-height:100%;
  min-height:0;
  overflow-y:auto;
  box-sizing:border-box;
}

/* #endregion Inspector — Drawer Clearance */

/* #region Inspector — Desktop Independent Scrolling */
/* v1.0.17: Desktop inspector — only the related-card column scrolls.
   Preserve the original top-right Close button and left hero layout. */
@media (min-width:851px) {
  #modal.open > .dialog {
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-top:62px;
  }
  #modal.open > .dialog > #close {
    position:absolute;
    top:12px;
    right:16px;
    z-index:2;
  }
  #modal.open > .dialog > #detail {
    flex:1 1 auto;
    min-height:0;
  }
  #modal.open #detail .inspection-layout {
    height:100%;
    min-height:0;
    align-items:start;
  }
  #modal.open #detail .inspection-hero {
    min-height:0;
  }
  #modal.open #detail .inspection-related {
    height:100%;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:5px;
  }
}

/* #endregion Inspector — Desktop Independent Scrolling */

/* #region Inspector — Dialog Height & Scrolling */
/* Inspector desktop: lock the dialog's viewport height so the entire
   right-hand region (including its heading) is the scroll container. */
@media (min-width:851px) {
  #modal.open > .dialog {
    height:100%;
    max-height:100%;
    min-height:0;
    box-sizing:border-box;
  }
  #modal.open > .dialog > #detail {
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  #modal.open #detail .inspection-layout {
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  #modal.open #detail .inspection-related {
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-gutter:stable;
  }
}

/* #endregion Inspector — Dialog Height & Scrolling */

/* #region Card Size Controls — Clickable Icons */
/* Clickable card-size step icons — finger-friendly on mobile. */
.card-scale-control .scale-step {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #3b4d68;
  border-radius:8px;
  background:#23324a;
  color:#dce7f7;
  cursor:pointer;
  touch-action:manipulation;
}
.card-scale-control .scale-step:hover { background:#304767; border-color:#5a7fb4; }
.card-scale-control .scale-step:active { background:#285fa8; }
.card-scale-control .scale-step:focus-visible { outline:2px solid #90b9ff; outline-offset:2px; }
.card-scale-control .scale-step .scale-card-icon { pointer-events:none; }

/* #endregion Card Size Controls — Clickable Icons */

/* #region Navigation — Icon Styling */
/* v1.0.17: matching icons and clean navigation */
.ui-action-icon { width:17px; height:17px; flex:none; vertical-align:-3px; margin-right:5px; }
.view-switch .btn, .deck-manage .btn { display:inline-flex; align-items:center; justify-content:center; gap:3px; }
.view-switch .btn .ui-action-icon, .deck-manage .btn .ui-action-icon { margin-right:5px; }
#tabCount[hidden] { display:none!important; }

/* #endregion Navigation — Icon Styling */

/* #region Deck Manager — Viewport Fit */
/* v1.0.17 — Fit the whole Deck Manager grid into the available viewport.
   All groups share a column width; keep natural portrait proportions. */
@media (min-width:801px) {
  #deckViewer .deck-display .deck-grid {
    grid-template-columns:repeat(var(--deck-fit-columns,8),minmax(0,1fr));
    gap:var(--deck-fit-gap,7px);
  }
  #deckViewer .deck-display .deck-group { margin:7px 0 10px; }
  #deckViewer .deck-display .deck-group-head { margin-bottom:5px; gap:7px; }
  #deckViewer .deck-display .deck-group-head h3 { font-size:14px; }
  #deckViewer .deck-display .deck-group-head .pill { font-size:11px; padding:2px 7px; }
  #deckViewer .deck-display .viewer-heading { margin-bottom:7px; }
  #deckViewer .deck-grid-item { padding:3px; border-radius:6px; container-type:inline-size; }
  #deckViewer .deck-grid-art img { width:100%; height:auto; aspect-ratio:600/838; object-fit:contain; }
  #deckViewer .deck-qty { top:4px; right:4px; font-size:clamp(9px,9cqw,14px); padding:2px 4px; }
  #deckViewer .deck-grid-actions { grid-template-columns:1fr 1fr 1fr; gap:2px; margin-top:3px; }
  #deckViewer .deck-grid-actions button { width:100%; font-size:clamp(9px,8cqw,13px); padding:2px 0; }
  #deckViewer .deck-grid-actions span { font-size:clamp(9px,8cqw,13px); }
}

/* #endregion Deck Manager — Viewport Fit */

/* #region Deck Manager — Two by Two Overview */
/* v1.0.17: square, two-by-two Deck Manager overview */
@media (min-width: 1001px) {
  #deckViewer #deckGridGroups {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"units pilots" "commands bases";
    gap:14px 18px;
    align-items:start;
  }
  #deckViewer #deckGridGroups > .deck-group {
    min-width:0;
    margin:0;
    padding:10px;
    background:#141d2b;
    border:1px solid #29374d;
    border-radius:10px;
  }
  #deckViewer #deckGridGroups > .deck-group[data-deck-type="Unit"] {grid-area:units;}
  #deckViewer #deckGridGroups > .deck-group[data-deck-type="Pilot"] {grid-area:pilots;}
  #deckViewer #deckGridGroups > .deck-group[data-deck-type="Command"] {grid-area:commands;}
  #deckViewer #deckGridGroups > .deck-group[data-deck-type="Base"] {grid-area:bases;}
  #deckViewer #deckGridGroups > .deck-group[data-deck-type="Other"] {grid-column:1/-1;}
  #deckViewer .deck-display .deck-grid {
    grid-template-columns:repeat(var(--deck-square-columns,4),minmax(0,1fr));
    gap:6px;
  }
  #deckViewer .deck-grid-item { max-width:160px; width:100%; justify-self:center; }
}
@media (min-width:701px) and (max-width:1000px) {
  #deckViewer #deckGridGroups {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #deckViewer #deckGridGroups > .deck-group { min-width:0; margin:0; }
  #deckViewer .deck-display .deck-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
}

/* #endregion Deck Manager — Two by Two Overview */

/* #region Save Name Conflict Dialog */
#saveConflictModal { z-index: 1250; }
.save-conflict-dialog { max-width: 500px; }
.save-conflict-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.save-conflict-actions .btn { flex:1 1 135px; }
/* #endregion */

/* #region Styled Rename Deck Dialog */
.rename-deck-dialog label { display:block; margin-bottom:8px; color:#c6d5ea; font-size:13px; font-weight:650; }
.rename-deck-dialog input { display:block; width:100%; margin-bottom:8px; }
.rename-deck-error { min-height:20px; margin:4px 0 10px; color:#ffb7b7; font-size:12px; }
/* #endregion Styled Rename Deck Dialog */

/* #region Styled Rename Deck Dialog — Modal Stacking Fix */
/* Keep the deck-name entry dialog above Save / Load and conflict dialogs. */
#renameDeckModal {
  z-index: 1400 !important;
}
/* #endregion Styled Rename Deck Dialog — Modal Stacking Fix */

/* Tournament deck finder */
.find-deck-dialog{width:min(var(--tournament-dialog-width),100%);max-height:min(90dvh,900px)}
.find-deck-filters{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:7px 12px;margin:12px 0}
.find-deck-filters label{font-size:12px;color:#aebcd1}
.find-deck-filters input,.find-deck-filters select{box-sizing:border-box;min-width:0;width:100%;padding:11px;background:#101a2a;color:#e9eef7;border:1px solid #3a4860;border-radius:9px}
.find-deck-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;color:#aebcd1}
.find-deck-results{display:grid;gap:var(--tournament-result-gap);max-height:54dvh;overflow-y:auto}
.find-deck-result{border:1px solid #3a4860;border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#101a2a}
.find-deck-result strong{display:block;color:#e9eef7;margin-bottom:4px}
.find-deck-result small{display:block;color:#aebcd1;line-height:1.5}
.find-deck-result .btn{flex-shrink:0}
#findDeckMore{margin-top:12px;width:100%}
@media(max-width:560px){.find-deck-filters{grid-template-columns:1fr}.find-deck-result{align-items:flex-start;flex-direction:column}.find-deck-result .btn{width:100%}}

/* Tournament finder: card previews, colour filter, and in-page confirmation */
.find-deck-filters{grid-template-columns:minmax(0,1fr);max-width:240px}
.find-deck-result{gap:14px}
.find-deck-art{display:flex;align-items:stretch;gap:5px;flex:0 0 auto;min-width:0}
.find-deck-bars{display:flex;gap:3px;align-self:stretch}
.find-deck-bars span{width:6px;border-radius:2px}
.find-deck-cards{display:flex;align-items:center;gap:2px}
.find-deck-cards img{width:var(--tournament-thumbnail-width);height:63px;object-fit:cover;border-radius:3px;background:#18253b}
.find-deck-details{flex:1;min-width:0}
#findDeckConfirmModal{z-index:10000}
@media(max-width:560px){.find-deck-result{flex-direction:row;flex-wrap:wrap}.find-deck-details{flex-basis:calc(100% - 120px)}.find-deck-result .btn{width:100%}}

/* Find Deck: lock the outer dialog; scroll only the decklist */
#findDeckModal .find-deck-dialog {
  box-sizing:border-box;
  height:min(88dvh,900px);
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
#findDeckModal .deck-text-top,
#findDeckModal .find-deck-filters,
#findDeckModal .find-deck-toolbar,
#findDeckModal #findDeckMore { flex-shrink:0; }
#findDeckModal .find-deck-toolbar { justify-content:flex-end; }
#findDeckModal #findDeckStatus[hidden] { display:none; }
#findDeckModal #findDeckStatus:not([hidden]) { margin-right:auto; }
#findDeckModal .find-deck-results {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  scrollbar-gutter:stable;
}

/* Preview and Load actions side by side */
.find-deck-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.find-deck-actions .btn{width:auto}
@media(max-width:560px){.find-deck-actions{width:100%}.find-deck-actions .btn{flex:1;width:auto}}

/* Tournament selection and in-event navigation */
#findDeckModal .find-deck-navigation {flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:12px 0 4px}
#findDeckModal .find-deck-navigation[hidden],#findDeckModal .find-deck-filters[hidden]{display:none}
.find-deck-navigation strong{color:#e9eef7;font-size:17px}
.find-deck-navigation small{color:#aebcd1}
.find-deck-event{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:#101a2a;border:1px solid #3a4860;border-radius:10px;padding:16px;color:#e9eef7;cursor:pointer;font:inherit}
.find-deck-event:hover,.find-deck-event:focus-visible{border-color:#6a89b3;background:#17263a}
.find-deck-event-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.find-deck-event-copy strong{font-weight:700}
.find-deck-event-copy small,.find-deck-event-end small{color:#aebcd1;font-size:12px}
.find-deck-event-end{display:flex;align-items:center;gap:14px;flex-shrink:0}
.find-deck-event-end>span{font-size:24px;color:#aebcd1}
.find-deck-empty{padding:40px 12px;text-align:center;color:#e9eef7}
.find-deck-empty p{color:#aebcd1}
.find-deck-empty .btn{margin-top:8px}

/* Event type selector only appears on the tournament selection screen. */
#findDeckModal .find-deck-event-filter[hidden]{display:none}
.find-deck-event-filter{display:flex;flex-direction:column;gap:8px;max-width:370px;color:#aebcd1}
.find-deck-event-filter select{width:100%;min-height:48px;background:#101a2a;color:#e9eef7;border:1px solid #3a4860;border-radius:10px;padding:10px 14px;font:inherit}

/* Card Inspector navigation history */
#modal > .dialog { position:relative; }
#modal .inspector-navigation { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
#modal .inspector-navigation .btn:disabled { opacity:.38; cursor:not-allowed; }
@media (min-width:851px) {
  #modal.open > .dialog > .inspector-navigation {
    position:absolute; top:12px; left:18px; z-index:2; margin:0;
  }
}
@media (max-width:850px) {
  #modal .inspector-navigation { clear:both; padding-top:6px; }
}

/* v1.1.0 — Keep the deck drawer interactive while inspecting cards.
   The inspector occupies the space above the drawer; the drawer retains its
   user-selected height and can still be dragged or clicked. */
#modal.open { bottom: 0 !important; max-height: 100dvh; z-index: 1001 !important; }
#modal.open.from-card-browser { bottom: 54px !important; }
body:has(#modal.open) .shell:not(.deck-mode) #browserDeckSidebar {
  z-index: 1400 !important;
  pointer-events: auto !important;
}
body:has(#modal.open) .shell:not(.deck-mode) #mobileDeckHandle {
  pointer-events: auto !important;
}

/* v1.1.0 — Source-aware inspector stacking.
   Deck cards remain clickable through the non-interactive backdrop;
   the actual inspector dialog stays interactive and above the drawer. */
#modal.open.from-deck-viewer {
  z-index: 1600 !important;
  pointer-events: none;
}
#modal.open.from-deck-viewer > .dialog {
  pointer-events: auto;
}
/* Browser-origin inspection keeps the deck drawer above the inspector. */
#modal.open.from-card-browser {
  z-index: 1001 !important;
}