@charset "UTF-8";
/* Deck workshop: fixed controls around two independently scrolling card trays. */
body[data-screen=decks] {
  height: 100dvh;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
body[data-screen=decks] > .site-header,
body[data-screen=decks] > .site-footer { display: none; }
body[data-screen=decks] #app {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 12px clamp(12px, 2vw, 28px) max(10px, env(safe-area-inset-bottom));
}
.deck-workshop {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "heading" "management" "identity" "workspace" "footer";
  gap: 10px;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.deck-workshop > *, .deck-workspace > *, .deck-entry { min-width: 0; min-height: 0; }
.deck-topbar {
  grid-area: heading;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding-bottom: 7px;
  border-bottom: 1px solid #b9a87440;
}
.deck-topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; color: #f5ecd7; }
.deck-topbar .eyebrow { margin: 0 0 3px; font-size: 9px; color: #c7b88b; }
.deck-topbar-actions { display: flex; flex-shrink: 0; gap: 8px; }
.deck-topbar-actions > * { min-height: 44px; font-size: 12px; white-space: nowrap; }
.deck-management { grid-area: management; display: flex; align-items: center; gap: 8px; }
.deck-management > select { flex: 1; max-width: 470px; }
.deck-management > label { flex: 1; min-width: 0; max-width: 470px; }
.deck-management > label select { margin: 0; }
.deck-management button { white-space: nowrap; }
.deck-workshop input, .deck-workshop select { min-height: 44px; height: 44px; padding: 8px 11px; font-size: 14px; }
.deck-workshop button, .deck-workshop .button { min-height: 44px; padding: 8px 13px; }
.deck-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 13px;
  border: 1px solid #899b5950;
  border-radius: 6px;
  background: linear-gradient(100deg, #263d2a9c, #192b22);
}
.deck-identity > label { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; max-width: 560px; white-space: nowrap; }
.deck-identity > label input { margin: 0; min-width: 0; }
.deck-meter { display: flex; align-items: center; gap: 13px; min-width: 0; color: #d3c7a6; }
.deck-meter strong { font-size: 25px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #f0cf88; white-space: nowrap; }
.deck-meter strong small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #bcbea1; }
.deck-meter > span { max-width: 280px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.deck-meter[data-ready=true] strong { color: #c6dfa1; }
.deck-meter[data-ready=false] strong { color: #efad8c; }
.deck-mobile-tabs { grid-area: tabs; display: none; }
.deck-workspace { grid-area: workspace; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 390px); gap: 18px; overflow: hidden; }
.deck-browser { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
.deck-filters { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(100px, 150px) minmax(88px, 120px); gap: 8px; min-width: 0; }
.deck-filters > label { min-width: 0; }
.deck-filters > label input, .deck-filters > label select { margin-top: 3px; }
.deck-results { margin: 0; padding-inline: 2px; font-size: 11px; line-height: 1.4; color: #b6c4a9; }
.deck-catalog, .deck-composition {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #7b8563 #14241c;
  scrollbar-gutter: stable;
  scroll-padding-block: 8px;
  -webkit-overflow-scrolling: touch;
}
.deck-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  gap: 14px 12px;
  padding: 5px 7px 14px 4px;
}
.deck-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: auto; }
.deck-card > * { flex-shrink: 0; }
.deck-card .playing-card {
  --card-width: 100%;
  --card-art-height: 96px;
  width: 100%;
  min-width: 0;
  height: 266px;
  min-height: 266px;
  padding: 9px;
  border-radius: 7px;
}
.deck-card .playing-card > strong { min-height: 36px; font-size: 13px; line-height: 1.35; margin: 0 0 6px; }
.deck-card .playing-card > .card-top { font-size: 9px; margin: 0 0 2px; }
.deck-card .playing-card .cost { width: 27px; min-width: 27px; height: 27px; font-size: 14px; }
.deck-card .playing-card .card-art { margin-bottom: 6px; }
.deck-card .playing-card .card-effect { -webkit-line-clamp: 3; min-height: 0; max-height: 4.35em; margin-bottom: 5px; font-size: 12px; line-height: 1.45; }
.deck-card .playing-card .card-sub { font-size: 10px; padding-top: 4px; }
.deck-card .playing-card .card-hint { font-size: 10px; min-height: 0; margin-top: 4px; padding: 2px 5px; }
.deck-card .playing-card .markers { display: none; }
.deck-card.is-selected .playing-card { border-color: #cbb275; box-shadow: 0 0 0 1px #cbb27566, 0 3px 0 #0c170e, inset 0 0 0 3px #faf2dc; }
.deck-stepper { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; border: 1px solid #77845b80; border-radius: 5px; background: #13251b; }
.deck-stepper button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; line-height: 1; border: 0; border-radius: 3px; box-shadow: none; color: #f0d59a; background: #2d412b; }
.deck-stepper button:hover { background: #3a5133; }
.deck-stepper button:disabled { opacity: .36; background: transparent; }
.deck-stepper output { flex: 1; min-width: 32px; text-align: center; color: #e5e1cb; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.deck-card-limit, .deck-entry-limit { min-height: 14px; margin: 0; color: #a7b697; font-size: 10px; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.deck-card.is-at-limit .deck-card-limit { color: #dbbf87; }
.deck-card-limit.is-invalid, .deck-entry-limit.is-invalid { color: #efad97; }
.deck-build { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid #a6a16b4d; border-radius: 7px; background: linear-gradient(#25372999, #15251de6); box-shadow: inset 0 1px #b5b77913; }
.deck-build h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 2px 10px; border-bottom: 1px solid #b9a87430; font-size: 15px; line-height: 1.3; color: #ead9b0; }
.deck-build h2 small, .deck-build h2 span { color: #b5c3a6; font-size: 11px; font-weight: 400; }
.deck-composition { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 10px 0; }
.deck-entry { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 3px 6px; align-items: center; flex: 0 0 auto; padding: 5px; border: 1px solid #70835a44; border-radius: 5px; background: #0e1e179c; }
.deck-entry-info { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 50px; padding: 0 !important; text-align: left; background: none; border: 0; box-shadow: none; color: #f0e5c6; font-weight: 400; }
.deck-entry-info:hover { background: #b7bc8720; }
.deck-entry-info img { width: 43px; height: 48px; flex: 0 0 43px; object-fit: cover; border: 1px solid #b9b08b80; border-radius: 3px; background: #dcd9c7; }
.deck-entry-info > span { display: block; min-width: 0; color: #ece3cb; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.deck-entry-info strong { display: block; font-size: 12px; line-height: 1.4; }
.deck-entry-info small, .deck-entry-info .caption { display: block; margin-top: 3px; font-size: 10px; line-height: 1.3; color: #aaba98; }
.deck-entry .deck-stepper { gap: 0; }
.deck-entry .deck-stepper output { min-width: 32px; font-size: 12px; }
.deck-entry-limit { grid-column: 1 / -1; text-align: right; min-height: 0; }
.deck-empty { grid-column: 1 / -1; display: grid; place-content: center; gap: 6px; min-height: 160px; margin: 0; padding: 28px 20px; text-align: center; color: #b8c2a8; border: 1px dashed #83936155; border-radius: 6px; font-size: 13px; line-height: 1.65; }
.deck-empty strong { color: #e2d6b8; font-size: 15px; }
.deck-empty p { margin: 0; }
.deck-footer { grid-area: footer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid #b9a87440; }
.deck-save-status { min-width: 0; margin: 0; color: #b9c5ab; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.deck-save-status[data-state=error], .deck-save-status.form-error { color: #efad97; }
.deck-save-status[data-state=saved] { color: #c6dfa1; }
.deck-footer-actions { display: flex; flex-shrink: 0; gap: 8px; }
.deck-footer-actions button { min-width: 110px; }
.deck-workshop :is(button, a, input, select):focus-visible { outline-offset: -3px; }

@media (max-width: 1000px) and (min-width: 701px) {
  .deck-workspace { grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
  .deck-filters { grid-template-columns: minmax(0, 1fr) 100px 84px; gap: 5px; }
  .deck-catalog { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px 9px; }
  .deck-meter > span { max-width: 170px; }
}
@media (max-width: 700px) {
  body[data-screen=decks] #app { padding: max(7px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }
  .deck-workshop { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "heading" "management" "identity" "tabs" "workspace" "footer"; gap: 7px; }
  .deck-topbar { gap: 8px; padding-bottom: 4px; }
  .deck-topbar h1 { font-size: 19px; }
  .deck-topbar .eyebrow { display: none; }
  .deck-topbar-actions { gap: 5px; }
  .deck-workshop .deck-topbar-actions > * { padding: 8px 9px; font-size: 11px; }
  .deck-management { gap: 4px; }
  .deck-management button { padding: 7px 8px; font-size: 11px; }
  .deck-management select { padding-left: 8px; font-size: 12px; }
  .deck-workshop input { font-size: 16px; }
  .deck-identity { gap: 10px; padding: 7px 8px; }
  .deck-identity > label { display: block; font-size: 10px; line-height: 1.1; }
  .deck-identity > label input { margin-top: 4px; height: 44px; }
  .deck-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 93px; }
  .deck-meter strong { font-size: 23px; }
  .deck-meter > span { max-width: 110px; font-size: 10px; line-height: 1.3; text-align: right; }
  .deck-mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .deck-mobile-tabs button { color: #b5c6a7; background: #14271d; border-color: #63794b80; font-size: 13px; }
  .deck-mobile-tabs button[aria-pressed=true] { color: #f2dda9; background: #344b2f; border-color: #bcad6a; box-shadow: inset 0 -2px #d5b467; }
  .deck-workspace { display: block; }
  .deck-browser, .deck-build { height: 100%; }
  .deck-workshop[data-panel=cards] .deck-build,
  .deck-workshop[data-panel=deck] .deck-browser { display: none; }
  .deck-browser { gap: 6px; }
  .deck-filters { grid-template-columns: minmax(0, 1fr) 97px 97px; gap: 5px; }
  .deck-filters input, .deck-filters select { padding-left: 7px; }
  .deck-filters select { padding-right: 18px; font-size: 11px; }
  .deck-filters label { font-size: 10px; }
  .deck-results { font-size: 10px; }
  .deck-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 4px 5px 12px 2px; }
  .deck-card .playing-card { --card-art-height: 82px; min-height: 247px; height: 247px; padding: 8px; }
  .deck-card .playing-card > strong { min-height: 35px; font-size: 12px; padding-right: 24px; }
  .deck-card .playing-card .cost { width: 24px; min-width: 24px; height: 24px; font-size: 13px; }
  .deck-card .playing-card .card-effect { font-size: 11px; }
  .deck-build { gap: 5px; padding: 8px; }
  .deck-build h2 { padding-bottom: 7px; font-size: 13px; }
  .deck-entry { grid-template-columns: minmax(0, 1fr) 126px; }
  .deck-entry-info { gap: 6px; }
  .deck-entry-info img { width: 34px; flex-basis: 34px; height: 44px; }
  .deck-entry-info strong, .deck-entry-info > span { font-size: 11px; }
  .deck-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 7px; }
  .deck-save-status { font-size: 10px; line-height: 1.3; }
  .deck-footer-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
  .deck-footer-actions button { min-width: 0; font-size: 13px; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .deck-workshop { gap: 5px; }
  .deck-identity { padding: 5px 7px; }
  .deck-identity > label { display: flex; gap: 7px; }
  .deck-identity > label input { margin: 0; }
  .deck-meter { gap: 3px; flex-basis: 85px; }
  .deck-meter strong { font-size: 21px; }
  .deck-meter > span { font-size: 9px; }
  .deck-browser { gap: 4px; }
  .deck-card .playing-card { --card-art-height: 58px; height: 190px; min-height: 190px; padding: 7px; }
  .deck-card .playing-card > strong { min-height: 32px; margin-bottom: 4px; font-size: 11px; }
  .deck-card .playing-card .card-art { margin-bottom: 4px; }
  .deck-card .playing-card .card-effect { -webkit-line-clamp: 2; max-height: 2.9em; margin-bottom: 3px; }
  .deck-card .playing-card .card-sub { font-size: 9px; padding-top: 3px; }
  .deck-card .playing-card .card-hint { display: none; }
}
/* A landscape phone keeps both trays visible and frees height for the cards. */
@media (min-width: 701px) and (max-height: 520px) {
  body[data-screen=decks] #app { padding: 6px 12px max(6px, env(safe-area-inset-bottom)); }
  .deck-workshop { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "heading management" "identity identity" "workspace workspace" "footer footer"; gap: 6px 14px; }
  .deck-topbar { grid-area: heading; padding: 0; border: 0; }
  .deck-topbar h1 { font-size: 17px; }
  .deck-topbar .eyebrow { display: none; }
  .deck-workshop .deck-topbar-actions > * { padding: 5px 8px; font-size: 11px; }
  .deck-management { grid-area: management; gap: 4px; }
  .deck-management > select, .deck-management > label { width: 150px; max-width: 170px; }
  .deck-management button { font-size: 11px; padding: 6px 9px; }
  .deck-management select { font-size: 12px; }
  .deck-identity { grid-area: identity; padding: 4px 9px; }
  .deck-identity > label { max-width: 390px; }
  .deck-meter strong { font-size: 21px; }
  .deck-workspace { grid-area: workspace; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
  .deck-browser { gap: 4px; }
  .deck-filters { grid-template-columns: minmax(0, 1fr) 97px 97px; }
  .deck-filters select { padding-left: 7px; padding-right: 18px; font-size: 11px; }
  .deck-results { font-size: 10px; }
  .deck-build { padding: 7px; }
  .deck-build h2 { font-size: 12px; padding-bottom: 6px; }
  .deck-footer { grid-area: footer; padding-top: 5px; }
  .deck-footer-actions button { min-width: 100px; font-size: 12px; }
  .deck-save-status { font-size: 11px; }
  .deck-catalog { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 3px; }
  .deck-card { display: grid; grid-template-columns: minmax(0, 1fr) 126px; grid-template-rows: 88px auto; gap: 3px 8px; align-items: center; }
  .deck-card .playing-card { --card-art-height: 74px; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 4px 7px; height: 88px; min-height: 88px; padding: 6px; }
  .deck-card .playing-card > .card-top { position: absolute; top: 5px; right: 5px; width: 23px; height: 23px; min-height: 0; margin: 0; padding: 0; font-size: 0; }
  .deck-card .playing-card .cost { width: 23px; min-width: 23px; height: 23px; font-size: 12px; }
  .deck-card .playing-card > strong { grid-column: 2; grid-row: 1; min-height: 0; margin: 0; padding-right: 25px; font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; }
  .deck-card .playing-card .card-art { grid-column: 1; grid-row: 1 / -1; width: 62px; height: 74px; min-height: 0; margin: 0; }
  .deck-card .playing-card .card-effect { grid-column: 2; grid-row: 2; align-self: start; min-height: 0; max-height: 2.9em; margin: 0; font-size: 10px; line-height: 1.45; -webkit-line-clamp: 2; }
  .deck-card .playing-card .card-sub, .deck-card .playing-card .card-hint { display: none; }
  .deck-card > .deck-stepper { grid-column: 2; grid-row: 1; }
  .deck-card-limit { grid-column: 1 / -1; font-size: 9px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-workshop *, .deck-workshop *::before, .deck-workshop *::after { scroll-behavior: auto; transition: none; }
}

/* Moving a deck uses one compact sheet; the editor stays behind it. */
dialog.deck-transfer-dialog { width: min(94vw, 560px); }
.deck-transfer-body { clear: both; padding-top: 4px; }
.deck-transfer-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 17px; }
.deck-transfer-tabs button { min-height: 44px; }
.deck-transfer-tabs button[aria-pressed=true] { color: #fff2c6; background: #344b2f; border-color: #687545; }
.deck-transfer-panel { display: grid; gap: 12px; min-width: 0; }
.deck-transfer-panel[hidden] { display: none; }
.deck-transfer-panel p { margin: 0; line-height: 1.6; }
.deck-transfer-panel > button { width: 100%; min-height: 44px; }
.deck-transfer-panel label { min-width: 0; color: #45513a; font-size: 12px; }
.deck-transfer-panel input[type=file] { width: 100%; min-width: 0; min-height: 44px; margin: 5px 0 0; padding: 7px; color: #34442c; border: 1px solid #9c9d7b; background: #fff9e7; font-size: 12px; }
.deck-transfer-panel input::file-selector-button { min-height: 32px; margin-right: 7px; padding: 5px 9px; border: 1px solid #768059; border-radius: 3px; color: #30402b; background: #e2e4c9; cursor: pointer; }
.deck-transfer-summary { display: grid; gap: 5px; padding: 15px; border: 1px solid #aaa47b; border-left: 4px solid #65744a; border-radius: 4px; color: #35432b; background: #e6dec1; overflow-wrap: anywhere; }
.deck-transfer-summary strong { font-size: 18px; line-height: 1.35; }
.deck-transfer-summary span { font-size: 12px; color: #65704c; }
.deck-import-preview:empty, .deck-transfer-notice:empty { display: none; }
.deck-import-preview { display: grid; gap: 10px; min-width: 0; }
.deck-import-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; list-style: none; max-height: min(22dvh, 180px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0; padding: 0 7px 0 0; }
.deck-import-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #bfb49377; font-size: 12px; line-height: 1.4; }
.deck-import-list li span { overflow-wrap: anywhere; }
.deck-import-list li strong { flex-shrink: 0; color: #53663a; }
.deck-transfer-notice { font-size: 12px; color: #50623b; }
.deck-transfer-dialog .form-error { color: #9c3e2d; }
.deck-import-warning { padding: 9px 11px; border-left: 3px solid #ad663d; background: #edd2ac; color: #794029; font-size: 12px; }
@media (max-width: 700px) {
  .deck-transfer-tabs { margin-bottom: 12px; }
  .deck-transfer-panel { gap: 10px; }
  .deck-transfer-summary { padding: 12px; }
  .deck-transfer-summary strong { font-size: 16px; }
  .deck-import-list { grid-template-columns: minmax(0, 1fr); }
}