/* Temporary bridge loaded after the legacy sheets. New shared primitives live
   in design-system.css; this file may override old !important layout rules. */

#setup .playstylequick {
  margin: 0 0 14px;
  padding: 14px;
  color: var(--ds-copy);
  background: linear-gradient(135deg, rgba(21, 29, 29, .94), rgba(8, 13, 14, .96));
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-md);
}

#setup .playstylequickhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}

#setup .playstylequickhead > span {
  flex: none;
  padding: 5px 7px;
  color: var(--ds-accent-ink);
  background: var(--ds-brass-bright);
  border-radius: 999px;
  font: 800 7px/1 var(--ds-font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
}

#setup .playstylequickhead > div { display: grid; gap: 3px; }
#setup .playstylequickhead b { color: var(--ds-text); font: 600 13px/1.15 var(--ds-font-body); }
#setup .playstylequickhead small { color: var(--ds-muted); font: 500 10px/1.3 var(--ds-font-body); }
#setup .playstylechoices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#setup .playstylechoices button {
  min-width: 0;
  min-height: var(--ds-touch);
  padding: 8px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #aeb8b5;
  background: var(--ds-panel);
  border: 1px solid #283233;
  border-radius: var(--ds-r-sm);
  cursor: pointer;
}
#setup .playstylechoices .gameicon { width: 15px; height: 15px; flex: none; color: #9d8b68; }
#setup .playstylechoices span { overflow: hidden; font: 700 8px/1.15 var(--ds-font-display); text-overflow: ellipsis; white-space: nowrap; }
#setup .playstylechoices button.on { color: var(--ds-accent-ink); background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)); border-color: var(--ds-accent-bright); }
#setup .playstylechoices button.on .gameicon { color: var(--ds-accent-ink); }

#setup .playstylerecs:not(:empty) {
  margin-top: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  border-top: 1px solid var(--ds-line-soft);
}
#setup .playstylerecs > small { align-self: center; color: var(--ds-brass); font: 800 7px/1.2 var(--ds-font-display); letter-spacing: .12em; }
#setup .playstylerecs button,
#setup .deckemptyalternatives button {
  min-width: 0;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
  color: var(--ds-copy);
  text-align: left;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
}
#setup .playstylerecs b,
#setup .deckemptyalternatives b { overflow: hidden; color: var(--ds-text); font: 600 9px/1.15 var(--ds-font-body); text-overflow: ellipsis; white-space: nowrap; }
#setup .playstylerecs span,
#setup .deckemptyalternatives span { color: var(--ds-muted); font: 600 7px/1.2 var(--ds-font-display); }
#setup .deckentry.recommended:not([hidden]) .deckcard { border-top-color: rgba(var(--ds-accent-rgb), .45) !important; }

#setup .decklist.noresults { display: none !important; }
#setup .deckempty {
  min-height: 220px;
  padding: 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--ds-copy);
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-r-md);
}
#setup .deckempty[hidden] { display: none !important; }
#setup .deckempty > span .gameicon { width: 30px; height: 30px; color: var(--ds-brass); }
#setup .deckempty > div:nth-child(2) { display: grid; gap: 5px; }
#setup .deckempty > div:nth-child(2) b { color: var(--ds-text); font: 400 20px/1.1 var(--ds-font-display); }
#setup .deckempty p { margin: 0; color: var(--ds-muted); font-size: 11px; line-height: 1.45; }
#setup .deckemptyalternatives { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

#setup .setupstagepanel { display: contents; }
#setup .setupstagepanel > * { flex-shrink: 0; }
#setup .reviewstage { display: none; }
#setup[data-setup-stage="review"] .podstage { display: none; }
#setup[data-setup-stage="review"] .reviewstage { display: block; padding: 18px 0 26px; }
#setup .setupnext { display: none; }
#setup .supportdiagnostics {
  margin-top: 10px;
  overflow: hidden;
  background: #090e0f;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-sm);
}
#setup .supportdiagnostics summary {
  min-height: var(--ds-touch);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ds-copy);
  cursor: pointer;
}
#setup .supportdiagnostics summary span { font: 700 9px/1 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#setup .supportdiagnostics summary small { color: var(--ds-muted); font-size: 8px; }
#setup .supportdiagnosticsbody { padding: 11px; border-top: 1px solid var(--ds-line-soft); }
#setup .supportdiagnosticsbody p { margin: 0 0 9px; color: var(--ds-muted); font: 500 10px/1.45 var(--ds-font-body); }
#setup .supportdiagnostics .debugimportbtn { width: 100%; }
#setup .supportdiagnostics .debugimportstatus { margin: 9px 0 0; }

#setup .reviewhead span { color: var(--ds-brass); font: 800 8px/1 var(--ds-font-display); letter-spacing: .16em; text-transform: uppercase; }
#setup .reviewhead h2 { margin: 7px 0 5px; color: var(--ds-text); font: 400 28px/1.05 var(--ds-font-display); }
#setup .reviewhead p { margin: 0; color: var(--ds-muted); font: 500 11px/1.45 var(--ds-font-body); }
#setup .reviewdeck { margin-top: 18px; padding: 8px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; align-items: center; background: rgba(var(--ds-accent-rgb), .06); border: 1px solid rgba(var(--ds-accent-rgb), .24); border-radius: var(--ds-r-sm); }
#setup .reviewdeck img { width: 62px; height: 76px; object-fit: cover; border-radius: 5px; }
#setup .reviewdeck div { min-width: 0; display: grid; gap: 4px; }
#setup .reviewdeck small,
#setup .reviewrules dt { color: var(--ds-brass); font: 800 7px/1 var(--ds-font-display); letter-spacing: .13em; }
#setup .reviewdeck b { color: var(--ds-text); font: 400 18px/1.05 var(--ds-font-display); }
#setup .reviewdeck span { overflow: hidden; color: var(--ds-copy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#setup .reviewseats { margin-top: 12px; display: grid; gap: 6px; }
#setup .reviewseats > div { min-height: 48px; padding: 7px 9px; display: flex; align-items: center; gap: 10px; background: var(--ds-panel); border: 1px solid var(--ds-line-soft); border-radius: 6px; }
#setup .reviewseats i { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ds-accent-ink); background: var(--ds-brass-bright); border-radius: 50%; font: 800 8px/1 var(--ds-font-display); font-style: normal; }
#setup .reviewseats span { min-width: 0; display: grid; gap: 2px; }
#setup .reviewseats b { color: var(--ds-text); font-size: 11px; }
#setup .reviewseats small { overflow: hidden; color: var(--ds-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#setup .reviewseats > div > span { flex: 1; }
#setup .reviewstyle {
  min-width: 0;
  max-width: 178px;
  margin-left: auto;
  padding: 3px 7px 3px 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d8c39f;
  background: rgba(var(--ds-accent-rgb), .06);
  border: 1px solid rgba(var(--ds-accent-rgb), .2);
  border-radius: 999px;
  font-style: normal;
}
#setup .reviewstyle img,
#setup .reviewstyle strong { width: 25px; height: 25px; flex: none; border-radius: 50%; }
#setup .reviewstyle img { object-fit: cover; }
#setup .reviewstyle strong { display: grid; place-items: center; font-size: 13px; }
#setup .reviewstyle b { overflow: hidden; font: 700 8px/1.15 var(--ds-font-display); text-overflow: ellipsis; white-space: nowrap; }

#setup .botconfig.signaturestyle { border-color: rgba(var(--ds-accent-rgb), .3) !important; }
#setup .pbadge.hasportrait { overflow: hidden; padding: 0; background: var(--ds-dialog); }
#setup .pbadge.hasportrait img { width: 100%; height: 100%; display: block; object-fit: cover; }
#setup .styledesc {
  margin: 8px 0 0 114px !important;
  padding-top: 7px;
  display: grid !important;
  gap: 3px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}
#setup .styledesc > span { color: var(--ds-brass-bright); font: 700 7px/1.2 var(--ds-font-display); letter-spacing: .11em; text-transform: uppercase; }
#setup .styledesc p { margin: 0; color: var(--ds-muted); font-size: 9px; line-height: 1.35; }

#game .personachip { display: inline-flex; align-items: center; gap: 4px; }
#game .personachip img { width: 17px; height: 17px; flex: none; object-fit: cover; border-radius: 50%; }
#setup .reviewrules { margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#setup .reviewrules > div { min-width: 0; padding: 9px; background: rgba(255, 255, 255, .02); border: 1px solid var(--ds-line-soft); border-radius: 6px; }
#setup .reviewrules dd { margin: 4px 0 0; color: var(--ds-copy); font-size: 9px; line-height: 1.3; text-transform: capitalize; }
#setup .reviewactions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 7px; }
#setup .reviewactions .pbtn { min-height: 48px; }

/* Deck Spotlight: full card artwork, readable guides, and a touch card reader. */
body.deck-spotlight-open { overflow: hidden; }
#setup .deckspotlightoverlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 72% 16%, rgba(var(--ds-accent-rgb), .12), transparent 34%), rgba(2, 5, 6, .9);
  backdrop-filter: blur(16px);
}
#setup .deckspotlight {
  position: relative;
  width: min(1180px, 100%);
  height: min(1000px, calc(100 * var(--dvhu) - 48px));
  max-height: calc(100 * var(--dvhu) - 48px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ds-copy);
  background: var(--ds-table);
  border: 1px solid rgba(var(--ds-accent-rgb), .32);
  border-radius: 18px;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .72);
}
#setup .deckspotlighttoolbar { flex: none; min-height: 64px; padding: 10px 20px 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ds-panel); }
#setup .deckspotlighttoolbar > div { min-width: 0; display: grid; gap: 4px; }
#setup .deckspotlighttoolbar span { color: var(--ds-accent-bright); font: 700 10px/1.3 var(--ds-font-body); letter-spacing: .15em; }
#setup .deckspotlighttoolbar b { overflow: hidden; color: var(--ds-text); font: 600 15px/1.3 var(--ds-font-body); text-overflow: ellipsis; white-space: nowrap; }
#setup .deckspotlightclose,
#setup .deckcardreaderclose { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ds-text); background: rgba(255, 255, 255, .04); border: 1px solid var(--ds-line); border-radius: 50%; font: 400 26px/1 var(--ds-font-body); cursor: pointer; }
#setup .deckspotlightclose:hover,
#setup .deckcardreaderclose:hover { color: var(--ds-accent-bright); border-color: var(--ds-accent); }
#setup .deckspotlightnav { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 20px; border-block: 1px solid var(--ds-line-soft); background: var(--ds-panel); }
#setup .deckspotlightnav:has([data-spotlight-section="dungeons"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#setup .deckspotlightnav [data-spotlight-section="dungeons"] { white-space: normal; }
#setup .deckspotlightnav button { min-height: 46px; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ds-copy); font: 600 14px/1.3 var(--ds-font-body); cursor: pointer; }
#setup .deckspotlightnav button:is(:hover, :focus-visible) { color: var(--ds-accent-bright); background: rgba(var(--ds-accent-rgb), .07); border-bottom-color: var(--ds-accent); }
#setup .deckspotlightcontent { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 20px; }
#setup .deckspotlightcontent :is(h2, h3) { overflow-wrap: anywhere; }
#setup .deckspotlighthero {
  display: grid;
  grid-template-columns: minmax(350px, .95fr) minmax(0, 1.05fr);
  background: linear-gradient(135deg, var(--ds-dialog), var(--ds-table) 72%);
  border-bottom: 1px solid var(--ds-line-soft);
}
#setup .deckspotlightvisual { position: relative; min-width: 0; min-height: 410px; padding: 28px 24px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--ds-dialog); }
#setup .deckspotlightbackdrop,
#setup .deckspotlightvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
#setup .deckspotlightbackdrop { filter: saturate(.9) brightness(.65); }
#setup .deckspotlightvideo { z-index: 1; }
#setup .deckspotlightshade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, var(--ds-table), rgba(4, 7, 8, .16) 65%), linear-gradient(90deg, transparent 70%, rgba(var(--ds-panel-rgb), .75)); }
#setup .deckspotlightcommanders { position: relative; z-index: 3; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
#setup .deckspotlightcommanderart { width: min(100%, 228px); min-width: 0; padding: 0; overflow: hidden; background: var(--ds-table); border: 1px solid rgba(var(--ds-accent-bright-rgb), .5); border-radius: 12px; box-shadow: 0 14px 35px rgba(0, 0, 0, .55); cursor: zoom-in; }
#setup .deckspotlightcommanders.partners .deckspotlightcommanderart { width: calc(50% - 7px); max-width: 200px; }
#setup .deckspotlightcard { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; }
#setup .deckspotlightcommanderart > span,
#setup .deckspotlightkeyart > span { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ds-accent-bright); font: 600 12px/1.25 var(--ds-font-body); }
#setup .deckspotlightcommanderart > span b,
#setup .deckspotlightkeyart > span b { font-size: 17px; line-height: 1; }
#setup .deckspotlightpicked { position: relative; z-index: 3; margin-top: 16px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--ds-text); background: rgba(var(--ds-panel-rgb), .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font: 600 12px/1.3 var(--ds-font-body); }
#setup .deckspotlightpicked b { color: var(--ds-accent-bright); }
#setup .deckspotlightintro { min-width: 0; padding: 32px; display: flex; flex-direction: column; justify-content: center; }
#setup .deckspotlightkicker { display: flex; align-items: center; gap: 10px; color: var(--ds-accent-bright); font: 700 11px/1.3 var(--ds-font-body); letter-spacing: .1em; }
#setup .deckspotlightkicker span { padding-right: 10px; border-right: 1px solid rgba(var(--ds-accent-rgb), .3); }
#setup .deckspotlightkicker b { color: var(--ds-copy); font-weight: 500; }
#setup .deckspotlightmana { margin-top: 18px; display: flex; align-items: center; gap: 6px; }
#setup .deckspotlightmana img { width: 25px; height: 25px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .42)); }
#setup .deckspotlightintro h2 { margin: 12px 0 0; color: var(--ds-text); font: 600 clamp(34px, 4 * var(--vwu), 50px)/1.04 var(--ds-font-display); letter-spacing: -.035em; }
#setup .deckspotlightcommander { margin: 14px 0 0; color: var(--ds-copy); font: 500 14px/1.5 var(--ds-font-body); }
#setup .deckspotlightcommander span { display: block; margin-bottom: 4px; color: var(--ds-accent-bright); font: 700 10px/1.4 var(--ds-font-body); letter-spacing: .13em; }
#setup .deckspotlighttheme { margin: 16px 0 0; color: var(--ds-copy); font: 500 16px/1.6 var(--ds-font-body); }
#setup .deckspotlightbadges { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
#setup .deckspotlightbadges span { padding: 7px 10px; color: var(--ds-copy); background: rgba(255, 255, 255, .035); border: 1px solid var(--ds-line); border-radius: 6px; font: 500 12px/1.35 var(--ds-font-body); }
#setup .deckspotlightbadges span:first-child { color: var(--ds-accent-glow); border-color: rgba(var(--ds-accent-rgb), .3); }
#setup .deckspotlightstats { margin-top: 20px; padding-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--ds-line-soft); }
#setup .deckspotlightstats span { color: var(--ds-copy); font: 500 12px/1.45 var(--ds-font-body); }
#setup .deckspotlightstats b { display: block; margin-bottom: 4px; color: var(--ds-text); font: 500 28px/1.1 var(--ds-font-display); }
#setup .deckspotlighteyebrow { color: var(--ds-accent-bright); font: 700 11px/1.4 var(--ds-font-body); letter-spacing: .15em; }
#setup .deckspotlightplan h3,
#setup .deckspotlightsignatures h3 { margin: 7px 0 0; color: var(--ds-text); font: 500 28px/1.15 var(--ds-font-display); letter-spacing: -.025em; }
#setup .deckspotlightsignatures { padding: 28px 32px; background: var(--ds-table); border-bottom: 1px solid var(--ds-line-soft); }
#setup .deckspotlightsignaturehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
#setup .deckspotlightsignaturehead p { margin: 8px 0 0; color: var(--ds-copy); font: 500 14px/1.5 var(--ds-font-body); }
#setup .deckspotlightgallerycontrols { display: none; flex: none; gap: 6px; }
#setup .deckspotlightgallerycontrols button { width: 44px; height: 44px; border: 1px solid var(--ds-line); border-radius: 50%; background: var(--ds-panel-raised); color: var(--ds-text); font-size: 22px; cursor: pointer; }
#setup .deckspotlightkeys { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#setup .deckspotlightkey { min-width: 0; margin: 0; scroll-snap-align: start; }
#setup .deckspotlightkeyart { width: 100%; padding: 0; display: block; overflow: hidden; background: var(--ds-table); border: 1px solid var(--ds-line); border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); cursor: zoom-in; }
#setup .deckspotlightkeyart > img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; }
#setup .deckspotlightkeyart:is(:hover, :focus-visible),
#setup .deckspotlightcommanderart:is(:hover, :focus-visible) { border-color: var(--ds-accent-bright); box-shadow: 0 0 0 2px rgba(var(--ds-accent-rgb), .25), 0 12px 28px rgba(0, 0, 0, .5); }
#setup .deckspotlightkey figcaption { padding: 14px 2px 0; display: grid; gap: 5px; }
#setup .deckspotlightkey small { color: var(--ds-accent-bright); font: 700 10px/1.3 var(--ds-font-body); letter-spacing: .12em; }
#setup .deckspotlightkey figcaption > b { color: var(--ds-text); font: 600 17px/1.35 var(--ds-font-body); }
#setup .deckspotlightkey figcaption > span { color: var(--ds-copy); font: 500 12px/1.45 var(--ds-font-body); }
#setup .deckspotlightbody { padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); align-items: start; gap: 28px; border-bottom: 1px solid var(--ds-line-soft); }
#setup .deckspotlightlead { margin: 14px 0 0; color: var(--ds-copy); font: 500 16px/1.65 var(--ds-font-body); }
#setup .deckspotlightrhythm { margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
#setup .deckspotlightrhythm li { min-width: 0; padding-top: 14px; border-top: 2px solid rgba(var(--ds-accent-rgb), .4); display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 8px; }
#setup .deckspotlightrhythm li > span { color: var(--ds-accent-bright); font: 500 18px/1.2 var(--ds-font-display); }
#setup .deckspotlightrhythm li div { min-width: 0; display: grid; align-content: start; gap: 7px; }
#setup .deckspotlightrhythm small { color: var(--ds-copy); font: 700 11px/1.3 var(--ds-font-body); text-transform: uppercase; letter-spacing: .07em; }
#setup .deckspotlightrhythm b { color: var(--ds-text); font: 600 16px/1.4 var(--ds-font-body); }
#setup .deckspotlightrhythm p { margin: 0; color: var(--ds-copy); font: 500 14px/1.6 var(--ds-font-body); }
#setup .deckspotlightfieldguide { display: grid; gap: 12px; align-content: start; }
#setup .deckspotlightfieldguide > div { position: relative; padding: 18px; background: linear-gradient(145deg, rgba(var(--ds-accent-rgb), .065), rgba(255, 255, 255, .018)); border: 1px solid rgba(var(--ds-accent-rgb), .23); border-radius: 10px; }
#setup .deckspotlightfieldguide > div > span { position: absolute; top: 16px; right: 16px; color: var(--ds-accent); }
#setup .deckspotlightfieldguide .gameicon { width: 22px; height: 22px; }
#setup .deckspotlightfieldguide small { display: block; padding-right: 30px; color: var(--ds-accent-bright); font: 700 11px/1.3 var(--ds-font-body); letter-spacing: .1em; }
#setup .deckspotlightfieldguide b { display: block; margin-top: 8px; color: var(--ds-text); font: 600 17px/1.35 var(--ds-font-body); }
#setup .deckspotlightfieldguide p { margin: 8px 0 0; color: var(--ds-copy); font: 500 15px/1.65 var(--ds-font-body); }
#setup .deckspotlightactions { position: sticky; bottom: 0; z-index: 7; flex: none; min-height: 76px; padding: 12px 20px 12px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; background: var(--ds-panel); border-top: 1px solid var(--ds-line); }
#setup .deckspotlightactions > div { min-width: 0; display: grid; gap: 4px; }
#setup .deckspotlightactions > div b { overflow: hidden; color: var(--ds-text); font: 600 14px/1.3 var(--ds-font-body); text-overflow: ellipsis; white-space: nowrap; }
#setup .deckspotlightactions > div span { color: var(--ds-copy); font-size: 12px; }
#setup .deckspotlightactions .pbtn { width: auto !important; min-height: 48px; margin: 0 !important; padding-inline: 20px !important; font: 700 15px/1.3 var(--ds-font-body); }
#setup .deckspotlight .pbtn.primary { color: var(--ds-accent-ink) !important; background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)) !important; border: 1px solid var(--ds-accent-glow) !important; box-shadow: 0 4px 16px rgba(var(--ds-accent-rgb), .18); }
#setup .deckspotlight .pbtn.primary:hover { background: var(--ds-accent-glow) !important; }

/* Card inspection stays inside the deck flow and keeps the reading position. */
#setup .deckcardreaderoverlay { position: absolute; inset: 0; z-index: 10; padding: 24px; display: grid; place-items: center; background: rgba(var(--ds-table-rgb), .94); backdrop-filter: blur(14px); }
#setup .deckcardreader { width: min(980px, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--ds-text); background: var(--ds-panel); border: 1px solid var(--ds-line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 80px rgba(2, 6, 12, .6); }
#setup .deckcardreaderhead { flex: none; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ds-line); }
#setup .deckcardreaderhead > div { min-width: 0; }
#setup .deckcardreaderhead small { display: block; color: var(--ds-accent-bright); font: 700 10px/1.3 var(--ds-font-body); letter-spacing: .12em; }
#setup .deckcardreaderhead h2 { margin: 5px 0 0; color: var(--ds-text); font: 500 26px/1.2 var(--ds-font-display); overflow-wrap: anywhere; }
#setup .deckcardreaderbody { min-height: 0; padding: 24px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: start; gap: 28px; overflow: auto; overscroll-behavior: contain; }
#setup .deckcardreaderimage { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; border-radius: 14px; }
#setup .deckcardreadertext { min-width: 0; }
#setup .deckcardreadertype { margin: 0; color: var(--ds-copy); font: 600 15px/1.5 var(--ds-font-body); }
#setup .deckcardreadercost { margin: 12px 0; color: var(--ds-accent-bright); font: 600 17px/1.4 var(--ds-font-mono); }
#setup .deckcardreaderrules { margin-top: 18px; color: var(--ds-text); font: 500 17px/1.7 var(--ds-font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
#setup .deckcardreaderactions { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 22px; border-top: 1px solid var(--ds-line); }
#setup .deckcardreaderactions button { min-height: 46px; padding: 10px 16px; border: 1px solid var(--ds-line); border-radius: 8px; color: var(--ds-text); background: var(--ds-panel-raised); font: 600 14px/1.3 var(--ds-font-body); cursor: pointer; }
#setup .deckcardreaderactions button:hover { border-color: var(--ds-accent); }
#setup .deckcardreaderactions [role="status"] { color: var(--ds-copy); font: 500 13px/1.4 var(--ds-font-mono); }

@media (max-width: 1000px) {
  #setup .deckspotlightstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #setup .deckspotlightrhythm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #setup .deckspotlightoverlay { padding: 12px; }
  #setup .deckspotlight { height: calc(100 * var(--dvhu) - 24px); max-height: calc(100 * var(--dvhu) - 24px); }
  #setup .deckspotlighthero { grid-template-columns: minmax(260px, .9fr) minmax(0, 1fr); }
  #setup .deckspotlightvisual { padding-inline: 16px; }
  #setup .deckspotlightintro { padding: 24px; }
  #setup .deckspotlightbody { grid-template-columns: minmax(0, 1fr); }
  #setup .deckspotlightrhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #setup .deckspotlightfieldguide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #setup .deckspotlightkeys { gap: 16px; }
}
@media (max-width: 640px) {
  #setup .deckspotlightoverlay { padding: 0; place-items: stretch; }
  #setup .deckspotlight { width: 100%; height: calc(100 * var(--dvhu)); max-height: calc(100 * var(--dvhu)); border: 0; border-radius: 0; }
  #setup .deckspotlighttoolbar { min-height: 60px; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  #setup .deckspotlightnav { padding-inline: 8px; }
  #setup .deckspotlightnav button { font-size: 13px; }
  #setup .deckspotlightcontent { scroll-padding-block: 16px; }
  #setup .deckspotlighthero { grid-template-columns: minmax(0, 1fr); }
  #setup .deckspotlightvisual { min-height: 0; padding: 18px 16px 14px; }
  #setup .deckspotlightshade { background: linear-gradient(0deg, var(--ds-table), rgba(4, 7, 8, .08) 85%); }
  #setup .deckspotlightcommanderart { max-width: 204px; }
  #setup .deckspotlightcommanders.partners { gap: 12px; }
  #setup .deckspotlightcommanders.partners .deckspotlightcommanderart { width: calc(50% - 6px); max-width: 174px; }
  #setup .deckspotlightpicked { margin-top: 12px; }
  #setup .deckspotlightintro { padding: 16px 20px 24px; }
  #setup .deckspotlightkicker { font-size: 10px; }
  #setup .deckspotlightmana { margin-top: 14px; }
  #setup .deckspotlightintro h2 { font-size: clamp(32px, 9 * var(--vwu), 42px); }
  #setup .deckspotlighttheme { margin-top: 12px; font-size: 16px; }
  #setup .deckspotlightstats span { font-size: 13px; }
  #setup .deckspotlightbody { padding: 24px 20px; gap: 24px; }
  #setup .deckspotlightrhythm { grid-template-columns: minmax(0, 1fr); }
  #setup .deckspotlightrhythm li { padding-top: 14px; grid-template-columns: 28px minmax(0, 1fr); }
  #setup .deckspotlightrhythm p { font-size: 15px; }
  #setup .deckspotlightfieldguide { grid-template-columns: minmax(0, 1fr); }
  #setup .deckspotlightfieldguide > div { padding: 16px; }
  #setup .deckspotlightfieldguide p { font-size: 16px; }
  #setup .deckspotlightsignatures { padding: 24px 16px; }
  #setup .deckspotlightsignaturehead { position: relative; display: block; margin-bottom: 16px; }
  #setup .deckspotlightsignaturehead p { max-width: calc(100% - 104px); min-height: 44px; display: flex; align-items: center; }
  #setup .deckspotlightsignatures h3 { font-size: 25px; }
  #setup .deckspotlightgallerycontrols { position: absolute; right: 0; bottom: 0; display: flex; }
  #setup .deckspotlightkeys { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: var(--ds-accent) var(--ds-panel); }
  #setup .deckspotlightkey { scroll-snap-stop: always; }
  #setup .deckspotlightactions { min-height: 72px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); grid-template-columns: 1fr 1.15fr; gap: 8px; }
  #setup .deckspotlightactions > div { display: none; }
  #setup .deckspotlightactions .pbtn { padding-inline: 10px !important; font-size: 14px; }
  #setup .deckcardreaderoverlay { padding: 0; }
  #setup .deckcardreader { width: 100%; height: 100%; max-height: calc(100 * var(--dvhu)); border: 0; border-radius: 0; }
  #setup .deckcardreaderhead { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  #setup .deckcardreaderhead h2 { font-size: 22px; }
  #setup .deckcardreaderbody { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 24px; gap: 24px; }
  #setup .deckcardreadertext { padding-inline: 4px; }
  #setup .deckcardreaderrules { font-size: 17px; }
  #setup .deckcardreaderactions { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; }
  #setup .deckcardreaderactions button { padding-inline: 10px; }
}
@media (max-width: 360px) {
  #setup .deckspotlightnav { padding-inline: 4px; }
  #setup .deckspotlightnav button { padding-inline: 3px; font-size: 12px; white-space: nowrap; }
}
body.reduced-motion #setup .deckspotlightvideo { display: none; }
@media (prefers-reduced-motion: reduce) {
  #setup .deckspotlightvideo { display: none; }
}

@media (max-width: 900px) {
  #setup .playstylechoices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #setup .playstylerecs:not(:empty) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #setup .playstylerecs > small { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  #setup[data-setup-stage="pod"] .setupright.mobile-open,
  #setup[data-setup-stage="review"] .setupright.mobile-open { transform: translateX(0) !important; }
  #setup .playstylequick { padding: 11px; }
  #setup .playstylequickhead { align-items: flex-start; }
  #setup .playstylechoices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #setup .playstylechoices button { justify-content: flex-start; }
  #setup .playstylerecs:not(:empty) { grid-template-columns: minmax(0, 1fr); }
  #setup .deckempty { grid-template-columns: auto minmax(0, 1fr); padding: 20px 14px; }
  #setup .deckempty .deckemptyreset { grid-column: 1 / -1; min-height: var(--ds-touch); }
  #setup .deckemptyalternatives { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  #setup .setupstagepanel { display: block; }
  #setup[data-setup-stage="pod"] .podstage { display: block; }
  #setup[data-setup-stage="review"] .podstage { display: none; }
  #setup[data-setup-stage="review"] .reviewstage { display: block; padding: 18px 0 26px; }
  #setup .pbtn.start { display: none !important; }
  #setup .setupnext { display: block; min-height: 52px; margin-top: 14px; }
  #setup .podclose { display: grid; }
  #setup[data-setup-stage="review"] .podclose { display: none; }
  #setup[data-setup-stage="review"] .setupright { padding-top: 0 !important; }
}

@media (max-width: 420px) {
  #setup .styledesc { margin-left: 0 !important; }
  #setup .reviewseats > div { flex-wrap: wrap; }
  #setup .reviewstyle { max-width: calc(100% - 36px); margin-left: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* Arena information hierarchy ------------------------------------------ */

#game .sidebartabs { display: none !important; }
#game .sidebar > .stackpanel,
#game .sidebar > .cmddmgpanel,
#game .sidebar > .threatpanel,
#game .sidebar > .sidelog {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#game .turntimeline {
  min-height: 42px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--ds-copy);
  background: linear-gradient(90deg, rgba(113, 143, 99, .16), rgba(var(--ds-panel-rgb), .72));
  border-bottom: 1px solid rgba(128, 154, 114, .25);
}

#game .turntimelinehead {
  min-width: 118px;
  display: flex;
  align-items: center;
  gap: 7px;
}
#game .turntimelinehead > span { width: 28px; height: 28px; display: grid; place-items: center; color: #a6c095; background: rgba(128, 154, 114, .12); border: 1px solid rgba(128, 154, 114, .3); border-radius: 50%; }
#game .turntimelinehead .gameicon { width: 14px; height: 14px; }
#game .turntimelinehead > div { display: grid; gap: 3px; }
#game .turntimelinehead small { color: #91aa84; font: 800 6px/1 var(--ds-font-display); letter-spacing: .15em; }
#game .turntimelinehead b { color: var(--ds-text); font: 700 9px/1.1 var(--ds-font-body); }
#game .turntimeline ol { min-width: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; list-style: none; overflow: hidden; }
#game .turntimeline li { min-width: 0; flex: 1 1 0; display: flex; align-items: center; gap: 5px; opacity: .58; }
#game .turntimeline li i { width: 5px; height: 5px; flex: none; background: #6f8370; border-radius: 50%; }
#game .turntimeline li span { overflow: hidden; font: 500 8px/1.2 var(--ds-font-body); text-overflow: ellipsis; white-space: nowrap; }
#game .turntimeline li.current { opacity: 1; }
#game .turntimeline li.current i { background: var(--ds-brass-bright); box-shadow: 0 0 10px rgba(var(--ds-accent-bright-rgb), .45); }

#game .handwrap.is-empty { min-height: 0 !important; padding-block: 5px !important; }
#game .hand.is-empty {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 12px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-r-sm);
  background: rgba(8, 13, 14, .86);
}
#game .hand.is-empty .emptyrow { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ds-copy); }
#game .hand.is-empty .emptyrow > .gameicon { width: 17px; height: 17px; color: var(--ds-brass); }
#game .hand.is-empty .emptyrow > span { display: flex; align-items: baseline; gap: 8px; }
#game .hand.is-empty .emptyrow b { color: var(--ds-text); font: 700 10px/1 var(--ds-font-body); }
#game .hand.is-empty .emptyrow small { color: var(--ds-muted); font: 500 8px/1.2 var(--ds-font-body); }

.effectnotice.activity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.effectnotice.activity small { color: var(--ds-brass); font: 800 6px/1 var(--ds-font-display); letter-spacing: .14em; }
.effectnotice.activity span { min-width: 0; color: var(--ds-copy); font-size: 10px; line-height: 1.3; }

#game .systemstatus {
  position: fixed;
  top: 66px;
  left: 50%;
  z-index: 120;
  width: min(620px, calc(100 * var(--vwu) - 32px));
  min-height: 48px;
  padding: 8px 9px 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f1c9c1;
  background: rgba(63, 20, 18, .96);
  border: 1px solid rgba(229, 144, 130, .62);
  border-radius: var(--ds-r-sm);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .55);
  transform: translateX(-50%);
}
#game .systemstatus > span .gameicon { width: 18px; height: 18px; color: var(--ds-danger); }
#game .systemstatus > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
#game .systemstatus small { color: var(--ds-danger); font: 800 6px/1 var(--ds-font-display); letter-spacing: .14em; }
#game .systemstatus b { overflow: hidden; font: 600 10px/1.25 var(--ds-font-body); text-overflow: ellipsis; white-space: nowrap; }
#game .systemstatus .pbtn { min-height: 36px; }

#game .matchrecap { width: min(760px, calc(100 * var(--vwu) - 32px)); max-height: min(820px, calc(100 * var(--dvhu) - 32px)); overflow: auto; }
#game .recaphead { text-align: center; }
#game .recaphead > span { color: var(--ds-brass); font: 800 8px/1 var(--ds-font-display); letter-spacing: .2em; }
#game .recaphead .gameover { margin-top: 7px; color: var(--ds-text); font: 400 clamp(28px, 4 * var(--vwu), 42px)/1.05 var(--ds-font-display); }
#game .recaphead p { margin: 7px 0 17px; color: var(--ds-muted); font-size: 11px; }
#game .recapstandings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#game .recapstandings > div { min-height: 58px; padding: 8px 10px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; background: rgba(255,255,255,.025); border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r-sm); }
#game .recapstandings > div.winner { border-color: rgba(var(--ds-accent-rgb), .55); background: rgba(var(--ds-accent-rgb), .07); }
#game .recapstandings > div.eliminated { opacity: .66; }
#game .recapstandings i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ds-accent-ink); background: var(--ds-brass-bright); border-radius: 50%; font: 800 8px/1 var(--ds-font-display); font-style: normal; }
#game .recapstandings span { min-width: 0; display: grid; gap: 3px; }
#game .recapstandings span b { overflow: hidden; color: var(--ds-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#game .recapstandings span small { overflow: hidden; color: var(--ds-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
#game .recapstandings strong { color: var(--ds-text); font: 400 22px/1 var(--ds-font-display); text-align: center; }
#game .recapstandings strong small { display: block; margin-top: 2px; color: var(--ds-muted); font: 800 6px/1 var(--ds-font-display); }
#game .recaphighlights { margin-top: 12px; padding: 12px; background: rgba(0,0,0,.18); border-top: 1px solid var(--ds-line-soft); border-bottom: 1px solid var(--ds-line-soft); }
#game .recaphighlights > small { color: var(--ds-brass); font: 800 7px/1 var(--ds-font-display); letter-spacing: .14em; }
#game .recaphighlights ol { margin: 9px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
#game .recaphighlights li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; color: var(--ds-copy); font-size: 9px; line-height: 1.3; }
#game .recaphighlights li span { color: var(--ds-brass); font: 800 7px/1.2 var(--ds-font-display); }
#game .recapactions,
#game .fatalactions { margin-top: 13px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#game .recapactions .pbtn,
#game .fatalactions .pbtn { min-height: 48px; }
#game .fatalcopy { color: var(--ds-copy); font: 500 12px/1.55 var(--ds-font-body); }

.battlefieldarrival .arrivalskip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  min-width: 64px;
  min-height: 38px;
  color: var(--ds-text);
  background: rgba(5, 8, 9, .78);
  border: 1px solid rgba(var(--ds-accent-bright-rgb), .5);
  border-radius: 999px;
  font: 800 8px/1 var(--ds-font-display);
  letter-spacing: .12em;
  cursor: pointer;
}

@media (min-width: 1280px) {
  #game.empty-hand { grid-template-rows: 58px 24px minmax(150px, .72fr) auto minmax(166px, 1fr) auto 58px !important; }
}

@media (min-width: 1280px) and (max-height: 700px) {
  #game.empty-hand { grid-template-rows: 58px 20px minmax(118px, .55fr) auto minmax(210px, 1fr) auto 56px !important; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  #game.empty-hand { grid-template-rows: 58px 24px minmax(145px, .75fr) auto minmax(170px, 1fr) auto 58px !important; }
}

@media (max-width: 767px) {
  #game[data-mobile-view="mine"].empty-hand { grid-template-rows: 76px 48px 108px minmax(158px, 1fr) auto 56px !important; }
  #game .turntimeline { min-height: 36px; padding: 4px 6px; grid-template-columns: 96px minmax(0, 1fr); gap: 5px; }
  #game .turntimelinehead { min-width: 0; gap: 5px; }
  #game .turntimelinehead > span { width: 23px; height: 23px; }
  #game .turntimelinehead b { font-size: 7px; }
  #game .turntimeline ol { gap: 4px; }
  #game .turntimeline li { display: none; }
  #game .turntimeline li.current { display: flex; }
  #game .turntimeline li span { font-size: 7px; }
  #game .hand.is-empty .emptyrow small { display: none; }
  .effectnoticestack .effectnotice:not(:last-child),
  .spellcopynoticestack .spellcopynotice:not(:last-child) { display: none; }
  #game .recapstandings { grid-template-columns: minmax(0, 1fr); }
  #game .recapactions,
  #game .fatalactions { grid-template-columns: minmax(0, 1fr); }
  #game .matchrecap { width: 100%; max-height: calc(94 * var(--dvhu)); }
}

@media (max-width: 767px) and (max-height: 700px) {
  #game:not(.command-table)[data-mobile-view="mine"].empty-hand:has(.promptbar .btnrow .pbtn) { grid-template-rows: 76px 48px 96px minmax(112px, 1fr) 96px 54px !important; }
}

/* Local AI skill workshop; native dialog supplies focus trapping and Escape. */
#setup .customskillsbutton { margin: 12px 0 4px; white-space: normal; }
.aiskilldialog { margin: auto; color: #e4e9ed; background: #121a20; border: 1px solid #526067; border-radius: 14px; padding: 0; width: min(1080px, calc(100 * var(--vwu) - 32px)); max-width: none; max-height: calc(100 * var(--dvhu) - 32px); overflow: auto; box-shadow: 0 30px 100px #000a; font: 14px/1.5 var(--tbl-sans, sans-serif); }
.aiskilldialog::backdrop { background: #03090dd9; backdrop-filter: blur(5px); }
.aiskilldialog *, .aiskilldialog *::before, .aiskilldialog *::after { box-sizing: border-box; }
.aiskillhead { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 26px 28px 20px; border-bottom: 1px solid #33424a; }
.aiskillhead small, .aiskillpreview > small { color: #d5b57a; font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.aiskillhead h2 { margin: 5px 0; font: 32px/1.15 var(--tbl-serif, Georgia, serif); color: #fff2d7; }
.aiskillhead p, .aiskilllibrary > p { color: #b0bfc6; margin: 6px 0 0; }
.aiskillbody { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(245px, 1fr); gap: 28px; padding: 24px 28px; }
.aiskillbody > * { min-width: 0; }
.aiskillsteps { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; font-size: 12px; margin-bottom: 20px; }
.aiskillsteps b { color: #f2d497; }.aiskillsteps span { color: #bbc8cd; }
.aiskillguide { background: #1b262e; border: 1px solid #3b4f5c; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
.aiskillguide summary { cursor: pointer; color: #f2d497; font-weight: 700; }
.aiskillguide p { color: #c4cdd1; font-size: 12px; }
.aiskilldialog label { display: block; margin: 12px 0 6px; font-size: 12px; color: #dce6eb; font-weight: 600; }
.aiskilldialog textarea, .aiskilldialog select { width: 100%; max-width: 100%; border: 1px solid #526876; border-radius: 6px; background: #0a131a; color: #e7edf0; padding: 10px; font: 12px/1.5 ui-monospace, monospace; }
.aiskilldialog textarea { resize: vertical; min-height: 100px; }
.aiskilldialog :focus-visible { outline: 2px solid #eed097; outline-offset: 3px; }
.aiskilldrop { display: grid; gap: 5px; padding: 18px; border: 1px dashed #66878e; border-radius: 8px; background: #15252b; }
.aiskilldrop b { color: #e4f0ed; }.aiskilldrop span { color: #b1c7c7; font-size: 12px; }
.aiskilldrop input { display: block; width: 100%; min-width: 0; margin-top: 8px; font: inherit; font-size: 12px; }
.aiskilldrop.dragover { border-color: #efc676; background: #263537; }
.aiskillpreview { margin-top: 16px; padding: 16px; border: 1px solid #567d68; background: #152a24; border-radius: 8px; overflow-wrap: anywhere; }
.aiskillpreview h3 { margin: 5px 0; color: #eff8ee; }.aiskillpreview p { margin: 6px 0; font-size: 12px; }
.aiskillpreview dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 12px; margin-bottom: 0; }.aiskillpreview dd { margin: 0; color: #b4e1bd; }
.aiskilllibrary { border-left: 1px solid #33424a; padding-left: 24px; }
.aiskilllibrary h3 { font-size: 16px; margin: 0; }.aiskillcount { font: 11px ui-monospace, monospace; color: #a7bcc7; margin-left: 5px; }
.aiskilllibrary > p { font-size: 12px; }.aiskilllist article { padding: 16px 0; border-bottom: 1px solid #33424a; overflow-wrap: anywhere; }
.aiskilllist h4 { margin: 0 0 3px; font-size: 16px; }.aiskilllist small { color: #d7bd8d; }.aiskilllist p { color: #bac7cd; font-size: 12px; }
.aiskillempty { padding: 20px 0; }.aiskilltools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.aiskilldialog .pbtn { font-size: 12px; padding: 9px 12px; min-height: 38px; white-space: normal; }
.aiskilldialog .pbtn:disabled { opacity: .4; cursor: not-allowed; }
.aiskillfooter { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-top: 1px solid #40515a; background: #121a20; }
.aiskillfooter > div { display: flex; gap: 8px; flex-shrink: 0; }.aiskillstatus { margin: 0; font-size: 12px; color: #aacfbd; overflow-wrap: anywhere; }.aiskilldialog .error { color: #ffb2a7; }
@media (max-width: 700px) {
  .aiskilldialog { width: calc(100 * var(--vwu) - 16px); max-height: calc(100 * var(--dvhu) - 16px); }
  .aiskillhead { padding: 18px 16px; gap: 10px; }.aiskillhead h2 { font-size: 26px; }
  .aiskillbody { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 22px; }
  .aiskilllibrary { border-left: 0; border-top: 1px solid #33424a; padding: 18px 0 0; }
  .aiskillfooter { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .aiskillfooter > div > button { flex: 1; }.aiskillsteps { grid-template-columns: 80px minmax(0, 1fr); }
}

/* ============================================================
   Interface scale (2026-09-02)
   The whole document zooms on wide desktops; see --ui-zoom in
   design-system.css. Every viewport length in the stylesheets is
   written through --vhu/--dvhu/--vwu so it stays true to the screen.
   ============================================================ */
body { zoom: var(--ui-zoom); }

/* ============================================================
   Hand tray: exile / suspend trays sit BESIDE the cards, never above
   them, so a playable-from-exile card can no longer push half of the
   hand below the screen edge. The hand row may also grow when needed.
   ============================================================ */
@media (min-width: 768px) {
  body.game-active #game .handwrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
  }
  body.game-active #game .handwrap > .hand { flex: 1 1 auto; min-width: 0; }
  body.game-active #game .handwrap > .exiletray,
  body.game-active #game .handwrap > .suspendtray {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    margin: 0;
  }
  body.game-active #game .handwrap > .exiletray {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    min-width: 212px;
    max-width: min(320px, 26 * var(--vwu));
    padding: 6px 8px 7px;
    border-radius: 5px;
    border-left: 3px solid #4a90d9;
    background: linear-gradient(145deg, rgba(20, 39, 63, .96), rgba(var(--ds-panel-rgb), .98) 62%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .35);
  }
  body.game-active #game .handwrap > .exiletray .exiletraytitle { font-size: 9px; letter-spacing: .16em; }
  body.game-active #game .handwrap > .exiletray .exiletraylist { flex-direction: column; gap: 4px; min-height: 0; overflow: auto; }
  body.game-active #game .handwrap > .exiletray .exiletraycard { min-width: 0; padding: 3px 34px 3px 5px; border-radius: 4px; }
  body.game-active #game .handwrap > .exiletray .exiletraycard img { width: 30px; }
  body.game-active #game .handwrap > .exiletray .exiletraycard b { font-size: 11px; }
  body.game-active #game .handwrap > .exiletray .exiletraycard small { font-size: 8.5px; }
}
@media (min-width: 1280px) {
  body.game-active #game { grid-template-rows: 58px 24px minmax(150px, .72fr) auto minmax(166px, 1fr) auto minmax(132px, auto) !important; }
}
@media (min-width: 1280px) and (max-height: 700px) {
  body.game-active #game { grid-template-rows: 58px 20px minmax(118px, .55fr) auto minmax(210px, 1fr) auto minmax(108px, auto) !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  body.game-active #game { grid-template-rows: 58px 24px minmax(145px, .75fr) auto minmax(170px, 1fr) auto minmax(130px, auto) !important; }
}

/* ============================================================
   Pod builder: "Advanced rules" is a clear, tactile toggle, and the
   difficulty choice explains itself.
   ============================================================ */
#setup .advancedrules {
  margin-top: 16px;
  border: 1px solid rgba(var(--ds-accent-rgb), .34) !important;
  background: linear-gradient(180deg, rgba(var(--ds-accent-rgb), .07), rgba(var(--ds-panel-rgb), .98) 46%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .03);
  transition: border-color var(--ds-t-base) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease);
}
#setup .advancedrules:hover,
#setup .advancedrules[open] {
  border-color: rgba(var(--ds-accent-rgb), .62) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .05);
}
#setup .advancedrules summary { min-height: 62px; padding: 12px 56px 12px 18px; gap: 4px; transition: background-color var(--ds-t-base) var(--ds-ease); }
#setup .advancedrules summary:hover { background: rgba(var(--ds-accent-rgb), .05); }
#setup .advancedrules summary span { font-size: 12px; color: #f0d9ad; letter-spacing: .12em; }
#setup .advancedrules summary small { margin-top: 3px; font-size: 10px; color: #98a39f; }
#setup .advancedrules summary::after {
  content: '' !important;
  top: 50%;
  right: 22px;
  width: 11px;
  height: 11px;
  margin-top: -9px;
  border-right: 2px solid var(--v3-gold);
  border-bottom: 2px solid var(--v3-gold);
  transform: rotate(45deg);
  transition: transform var(--ds-t-base) var(--ds-ease), margin-top var(--ds-t-base) var(--ds-ease);
}
#setup .advancedrules[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
#setup .advancedbody { display: grid; grid-template-columns: minmax(0, 1fr) !important; align-items: start; gap: 10px; padding: 6px 14px 16px; }
#setup .advancedrules.just-opened .advancedbody { animation: dsReveal var(--ds-t-slow) var(--ds-ease) both; }
#setup .advancedbody > * { grid-area: auto !important; grid-column: 1 / -1 !important; min-width: 0; }
#setup .advancedbody > .cmdcheck {
  margin-top: 2px !important;
  padding: 10px 12px;
  transition: border-color var(--ds-t-base) var(--ds-ease), background-color var(--ds-t-base) var(--ds-ease);
}
#setup .advancedbody > .cmdcheck:hover { border-color: rgba(var(--ds-accent-rgb), .42) !important; background: #121a1b !important; }
#setup .advancedbody .seclabel { margin: 8px 0 0; color: var(--ds-accent); font: 800 9px/1 var(--ds-font-display); letter-spacing: .2em; text-transform: uppercase; }
#setup .advancedbody .btnrow { margin-top: 0; }
#setup .difficultyrow .pbtn { position: relative; transition: transform var(--ds-t-fast) var(--ds-ease), background-color var(--ds-t-base) var(--ds-ease), border-color var(--ds-t-base) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease); }
#setup .difficultyrow .pbtn:hover { transform: translateY(-1px); }
#setup .difficultynote {
  display: grid;
  gap: 8px;
  padding: 11px 12px 12px;
  color: #c9d1ce;
  background: rgba(var(--ds-accent-rgb), .06);
  border: 1px solid rgba(var(--ds-accent-rgb), .24);
  border-radius: 8px;
  transition: border-color var(--ds-t-base) var(--ds-ease), background-color var(--ds-t-base) var(--ds-ease);
}
#setup .difficultynote.previewing { border-color: rgba(var(--ds-accent-rgb), .55); background: rgba(var(--ds-accent-rgb), .1); }
#setup .difficultynote b { display: block; color: #f2dcae; font: 800 10px/1.1 var(--ds-font-display); letter-spacing: .16em; text-transform: uppercase; }
#setup .difficultynote b em { margin-left: 8px; color: #8b9693; font: 700 8px/1 var(--ds-font-display); letter-spacing: .14em; font-style: normal; }
#setup .difficultynote p { margin: 0; font: 400 11.5px/1.45 var(--ds-font-body); }
#setup .difficultynote ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#setup .difficultynote li { padding: 4px 8px; color: #e6d7b6; background: rgba(var(--ds-table-rgb), .6); border: 1px solid rgba(var(--ds-accent-rgb), .2); border-radius: 999px; font: 700 8.5px/1 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#setup .difficultynote li i { margin-right: 5px; color: #97a39f; font-style: normal; }

/* ============================================================
   Motion polish. One easing family, short durations, and every
   animation is gated behind the reduced-motion preference.
   ============================================================ */
@keyframes dsReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dsDialogIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsPromptIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced-motion) #game .pbtn,
  body:not(.reduced-motion) #setup .pbtn,
  body:not(.reduced-motion) #setup .setupstep,
  body:not(.reduced-motion) #setup .matchtypebtn,
  body:not(.reduced-motion) #setup .deckcard {
    transition: transform var(--ds-t-fast) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease), background-color var(--ds-t-base) var(--ds-ease), border-color var(--ds-t-base) var(--ds-ease), color var(--ds-t-base) var(--ds-ease), filter var(--ds-t-base) var(--ds-ease);
  }
  body:not(.reduced-motion) #game .pbtn:hover:not(:disabled),
  body:not(.reduced-motion) #setup .pbtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
  body:not(.reduced-motion) #game .pbtn:active:not(:disabled),
  body:not(.reduced-motion) #setup .pbtn:active:not(:disabled) { transform: translateY(0) scale(.985); filter: brightness(.97); transition-duration: 60ms; }
  body:not(.reduced-motion) #setup .deckcard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .42); }
  body:not(.reduced-motion) #game .hcard {
    transition: transform var(--ds-t-base) var(--ds-ease-spring), box-shadow var(--ds-t-base) var(--ds-ease), border-color var(--ds-t-base) var(--ds-ease), filter var(--ds-t-base) var(--ds-ease);
  }
  body:not(.reduced-motion) #game .hcard:hover,
  body:not(.reduced-motion) #game .hcard:focus-visible { transform: translateY(-9px) scale(1.045); z-index: 4; box-shadow: 0 18px 36px rgba(0, 0, 0, .58), 0 0 0 1px rgba(var(--ds-accent-bright-rgb), .35); }
  body:not(.reduced-motion) #game .mini { transition: transform var(--ds-t-base) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease), border-color var(--ds-t-base) var(--ds-ease), filter var(--ds-t-base) var(--ds-ease); }
  body:not(.reduced-motion) #game .mini:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 28px rgba(0, 0, 0, .5); }
  body:not(.reduced-motion) .overlay { animation: dsFadeIn var(--ds-t-base) var(--ds-ease) both; }
  body:not(.reduced-motion) .overlay > .modal,
  body:not(.reduced-motion) .overlay > .sheet,
  body:not(.reduced-motion) #game .modal,
  body:not(.reduced-motion) #game .sheet { animation: dsDialogIn var(--ds-t-slow) var(--ds-ease) both; }
  body:not(.reduced-motion) #game .promptbar .btnrow .pbtn { animation: dsPromptIn var(--ds-t-base) var(--ds-ease) both; }
  body:not(.reduced-motion) #game .exiletraycard,
  body:not(.reduced-motion) #game .suspendtraycard { transition: transform var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-base) var(--ds-ease), background-color var(--ds-t-base) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease); }
  body:not(.reduced-motion) #game .exiletraycard:hover,
  body:not(.reduced-motion) #game .suspendtraycard:hover { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  #setup .advancedbody, .overlay, .overlay > .modal, .overlay > .sheet, #game .modal, #game .sheet, #game .promptbar .btnrow .pbtn { animation: none !important; }
  #setup .advancedrules summary::after { transition: none; }
}

/* ============================================================
   Premium pass (2026-09-02). One accent (brass), one radius scale per
   surface (arena 6px, setup/landing 12px), larger type, deeper material.
   ============================================================ */

/* ---------- Arena: header, phases, ticker ---------- */
body.game-active #game .topbar {
  padding: 10px 16px 9px 20px;
  background:
    linear-gradient(90deg, rgba(var(--ds-accent-rgb), .14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%),
    rgba(var(--ds-table-rgb), .92);
  border-bottom: 1px solid rgba(var(--ds-accent-soft-rgb), .22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34), inset 0 -1px rgba(255, 255, 255, .03);
}
body.game-active #game .phase b { font-size: 23px !important; letter-spacing: -.01em; }
body.game-active #game .phase { font-size: 12.5px !important; letter-spacing: .08em; color: #b9b6ab; }
body.game-active #game .phase em { color: var(--ds-accent-bright); font-style: normal; font-weight: 700; }
body.game-active #game .stepper { gap: 5px; }
body.game-active #game .stepper .step {
  min-width: 44px;
  padding: 8px 11px;
  border-radius: 6px;
  color: #8a8c83;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  background: rgba(255, 255, 255, .03);
  border-color: rgba(var(--ds-accent-soft-rgb), .14);
}
body.game-active #game .stepper .step.on {
  color: var(--ds-accent-ink);
  background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent));
  border-color: var(--ds-accent-bright);
  box-shadow: 0 10px 24px rgba(var(--ds-accent-rgb), .28), inset 0 1px rgba(255, 255, 255, .55);
}
body.game-active #game .tbtn {
  border-radius: 6px;
  font-size: 10.5px;
  letter-spacing: .14em;
  border-color: rgba(var(--ds-accent-soft-rgb), .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
body.game-active #game .tbtn:hover { border-color: rgba(var(--ds-accent-bright-rgb), .5); color: var(--ds-text); }
body.game-active #game .ticker {
  padding: 0 20px;
  color: #b3b6ad;
  font-size: 12.5px;
  letter-spacing: .01em;
  background: rgba(var(--ds-table-rgb), .6);
  border-bottom: 1px solid rgba(var(--ds-accent-soft-rgb), .1);
}

/* ---------- Arena: opponent seats ---------- */
body.game-active #game .opprow {
  border-radius: 8px !important;
  border: 1px solid rgba(var(--ds-accent-soft-rgb), .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 26%),
    rgba(var(--ds-panel-rgb), .82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04);
  transition: border-color var(--ds-t-base) var(--ds-ease), box-shadow var(--ds-t-base) var(--ds-ease);
}
body.game-active #game .oppswrap.active-ai-turn .opprow.active,
body.game-active #game .opprow:has(.activeaitag) {
  border-color: rgba(var(--ds-accent-bright-rgb), .62);
  box-shadow: 0 0 0 1px rgba(var(--ds-accent-bright-rgb), .18), 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .06);
}
body.game-active #game .opphead {
  min-height: 56px !important;
  padding: 8px 10px !important;
  column-gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), rgba(var(--ds-table-rgb), .5);
  border-bottom: 1px solid rgba(var(--ds-accent-soft-rgb), .14);
}
body.game-active #game .oppname { font-size: 13.5px !important; letter-spacing: .07em; font-weight: 700; }
body.game-active #game .opplife { font-size: 27px !important; letter-spacing: -.01em; }
body.game-active #game .oppmeta { font-size: 10.5px; color: #9ea198; }
body.game-active #game .oppcmd { font-size: 9px; letter-spacing: .1em; }
body.game-active #game .personachip { font-size: 10px; }
body.game-active #game .seatindex { width: 25px; height: 25px; font-size: 10px; border-radius: 6px; }
body.game-active #game .activeaitag { font-size: 8.5px; letter-spacing: .18em; }

/* ---------- Arena: battlefield lanes and card tiles ---------- */
body.game-active #game .boardlanelabel,
body.game-active #game .oppboardmain .boardlanelabel,
body.game-active #game .oppresourcelane .boardlanelabel { font-size: 8.5px !important; letter-spacing: .2em !important; color: #8f9187; }
body.game-active #game .oppresourcelane .boardlanelabel { font-size: 7.5px !important; }
body.game-active #game .myboard {
  border: 1px solid rgba(var(--ds-accent-soft-rgb), .16) !important;
  background:
    linear-gradient(180deg, rgba(var(--ds-accent-rgb), .08), transparent 22%),
    rgba(var(--ds-table-rgb), .34) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 20px 50px rgba(0, 0, 0, .28) !important;
}
body.game-active #game .myboard::before { font-size: 9px !important; letter-spacing: .26em; color: var(--ds-accent); }
body.game-active #game .mini,
body.game-active #game .czcard,
body.game-active #game .hcard { border-radius: 7px; box-shadow: 0 8px 20px rgba(0, 0, 0, .46), 0 0 0 1px rgba(0, 0, 0, .35); }
body.game-active #game .mini img,
body.game-active #game .hcard img { border-radius: 5px; }
body.game-active #game .mini .mname { font-size: 9.2px; font-weight: 600; letter-spacing: .01em; padding: 3px 4px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .86)); }
body.game-active #game .mini .pt { font-size: 11px; padding: 2px 5px; border-radius: 5px; background: rgba(0, 0, 0, .86); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
/* Battlefield lanes wrap and shrink to fit (ui.js fitBattlefieldLanes) instead of
   scrolling the last cards half-cut off the right edge. */
@media (min-width: 768px) {
  body.game-active #game .boardlanecards,
  body.game-active #game .oppresourcecards,
  body.game-active #game .manaartifactstrip { flex-wrap: wrap; align-items: safe flex-end; align-content: safe flex-end; max-height: 100%; overflow: hidden auto; scrollbar-width: thin; }
  /* The support lane only takes the width its cards need, so a crowded
     creature lane gets the rest of the opponent's strip. */
  body.game-active #game .oppboardmain { grid-template-columns: minmax(0, 1fr) fit-content(40%); }
  /* Desktop rows: the opponent strip needs ~190px for its cards and your board
     ~340px (creature lane, lands, command zone), so your board gets the larger
     share of the free height instead of an even .72/1 split. */
  @media (min-width: 1280px) and (min-height: 701px) {
    body.game-active #game { grid-template-rows: 58px 24px minmax(150px, .65fr) auto minmax(166px, 1fr) auto 132px !important; }
  }
}
body.game-active #game .keywordbadge { font-size: 8px; letter-spacing: .06em; }
body.game-active #game .czcard { border: 1px solid rgba(var(--ds-accent-soft-rgb), .22); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 30%), rgba(var(--ds-panel-rgb), .9); }
body.game-active #game .czlabel { font-size: 8.5px; letter-spacing: .22em; }
body.game-active #game .czname { font-size: 15px; }
body.game-active #game .czcost { font-size: 11px; }

/* ---------- Arena: your rail (life, zones) ---------- */
body.game-active #game .playerrail .seatyou small { font-size: 9px; letter-spacing: .2em; }
body.game-active #game .playerrail .melife { font-size: 30px; letter-spacing: -.02em; }
body.game-active #game .playerrail .melife small { font-size: 9px; letter-spacing: .2em; }
body.game-active #game .playerrail .zbtn { border-radius: 6px; border-color: rgba(var(--ds-accent-soft-rgb), .18); font-size: 11px; }
body.game-active #game .playerrail .zbtn b { font-size: 12px; }

/* ---------- Arena: prompt bar and primary action ---------- */
body.game-active #game .promptbar {
  padding: 9px 12px !important;
  border-radius: 10px 10px 0 0;
  border-color: rgba(var(--ds-accent-bright-rgb), .34);
  background: linear-gradient(180deg, rgba(var(--ds-accent-rgb), .07), transparent 40%), rgba(var(--ds-panel-rgb), .92);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04);
}
body.game-active #game .promptbar .ptext { font-size: 13px !important; color: var(--ds-text); letter-spacing: .01em; }
body.game-active #game .promptbar .ptext.dim { color: #a7aaa2; }
body.game-active #game .pbtn {
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .16em;
  padding: 10px 16px;
}
body.game-active #game .pbtn.primary {
  color: var(--ds-accent-ink);
  background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent));
  border: 1px solid var(--ds-accent-bright);
  box-shadow: 0 10px 26px rgba(var(--ds-accent-rgb), .3), inset 0 1px rgba(255, 255, 255, .55);
  text-shadow: none;
}
body.game-active #game .pbtn.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)); }
body.game-active #game .handwrap::before { font-size: 9px; letter-spacing: .26em; color: #8b8676; }

/* ---------- Arena: sidebar and utility rail ---------- */
body.game-active #game .sidebar { border-left: 1px solid rgba(var(--ds-accent-soft-rgb), .14); }
body.game-active #game .sidetitle { font-size: 10.5px; letter-spacing: .2em; color: var(--ds-accent); }
body.game-active #game .sidecount { font-size: 10.5px; }
body.game-active #game .utilitybutton { border-radius: 6px; }
body.game-active #game .utilitylabel { font-size: 8.5px; letter-spacing: .16em; }

/* ---------- Dialogs ---------- */
/* A face-down card must keep its payment controls in the viewport even on
   short screens. Card rules scroll independently of the action footer. */
#game .sheet.faceupsheet {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: min(760px, calc(100 * var(--vwu) - 24px));
  max-height: calc(100 * var(--dvhu) - 32px);
  overflow: hidden;
}
#game .faceupsheet .sheetimg:not(.noimg) {
  grid-column: 1;
  width: 100%;
  max-height: min(300px, calc(44 * var(--dvhu)));
  object-fit: contain;
  align-self: start;
}
#game .faceupsheet .sheetinfo { min-height: 0; min-width: 0; overflow-y: auto; }
#game .faceupsheet .sheetacts { grid-column: 1 / -1; min-height: 0; max-height: calc(46 * var(--dvhu)); overflow-y: auto; gap: 8px; }
#game .faceupsheet .sheetacts .pbtn { flex-shrink: 0; min-height: 44px; white-space: normal; }
#game .faceupsheet .faceupaction:disabled { opacity: 1; color: var(--ds-copy); cursor: not-allowed; }
#game .faceupsheet .faceuphelp { flex-shrink: 0; margin: 0; }
@media (max-width: 600px) {
  #game .sheet.faceupsheet { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 10px; }
}

body.game-active #game .modal,
body.game-active #game .sheet,
.overlay > .modal,
.overlay > .sheet {
  border: 1px solid rgba(var(--ds-accent-soft-rgb), .2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .72), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .05);
}

/* ---------- Setup: steps, deck cards, pod builder ---------- */
#setup .setupstep { font-size: 11px; letter-spacing: .16em; }
#setup .setupstep span { width: 26px; height: 26px; font-size: 11px; }
#setup .deckcard {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 30%), var(--ds-panel) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}
#setup .deckcard:hover { border-color: rgba(var(--ds-accent-rgb), .4) !important; }
#setup .deckcard.selected { border-color: rgba(var(--ds-accent-rgb), .75) !important; box-shadow: 0 0 0 1px rgba(var(--ds-accent-rgb), .25), 0 16px 40px rgba(0, 0, 0, .44); }
#setup .deckcard h3, #setup .deckcard .deckname { font-size: 18px; letter-spacing: -.01em; }
#setup .deckcard p { font-size: 12px; line-height: 1.45; color: #b9bfbc; }
#setup .deckcard small, #setup .deckcard .decksub { font-size: 10.5px; }
#setup .seclabel { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ds-accent); }
#setup .selecteddecksummary { border-radius: 10px; }
#setup .selecteddecksummary b { font-size: 13px; }
#setup .selecteddecksummary small { font-size: 8px; }
#setup .pbtn { border-radius: 8px; }
#setup .pbtn.choice { min-height: 44px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
#setup .pbtn.start {
  min-height: 58px !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  box-shadow: 0 14px 34px rgba(var(--ds-accent-rgb), .28), inset 0 1px rgba(255, 255, 255, .55) !important;
}
#setup .pbtn.start:hover:not(:disabled) { background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)) !important; }
#setup .cmdcheck { font-size: 12.5px; line-height: 1.4; }
#setup .cmdcheck small { font-size: 10.5px; }
#setup .matchtypebtn { border-radius: 10px; }
#setup .botconfig { border-radius: 10px; }
#setup .styleselect { border-radius: 8px !important; font-size: 12px; }

/* ---------- Landing ---------- */
#setup[data-app-view="home"] .mainmenu-navlinks a { font-size: 12px; letter-spacing: .14em; }
#setup[data-app-view="home"] .mainmenu-kicker { font-size: 11.5px; letter-spacing: .2em; }
#setup[data-app-view="home"] .mainmenu-hero-copy p,
#setup[data-app-view="home"] .mainmenu-library-copy p,
#setup[data-app-view="home"] .mainmenu-path-copy p,
#setup[data-app-view="home"] .mainmenu-mode p,
#setup[data-app-view="home"] .mainmenu-final-cta p { font-size: 16px; line-height: 1.55; }
#setup[data-app-view="home"] .mainmenu-primary,
#setup[data-app-view="home"] .mainmenu-secondary { border-radius: 12px; }
#setup[data-app-view="home"] .mainmenu-primary { box-shadow: 0 16px 40px rgba(var(--ds-accent-rgb), .3), inset 0 1px rgba(255, 255, 255, .5); }
/* The hero button sits on the ember gradient, so its caption and icon read in
   ink; the mist accent only has contrast on dark panels. */
#setup[data-app-view="home"] .mainmenu-primary small { color: rgba(var(--ds-accent-ink-rgb), .8); }
#setup[data-app-view="home"] .mainmenu-primary .gameicon { color: rgba(var(--ds-accent-ink-rgb), .85); }
#setup[data-app-view="home"] .mainmenu-mode { border-radius: 16px; }
#setup[data-app-view="home"] .mainmenu-mode h2 { font-size: clamp(30px, 3.2vw, 42px); }
#setup[data-app-view="home"] .mainmenu-mode-points li { font-size: 14px; }
#setup[data-app-view="home"] .mainmenu-path-steps li b { font-size: 17px; }
#setup[data-app-view="home"] .mainmenu-path-steps li p { font-size: 14px; line-height: 1.5; }
#setup[data-app-view="home"] .mainmenu-proof-stat b { font-size: 13px; }
#setup[data-app-view="home"] .mainmenu-proof-stat small { font-size: 11px; }
#setup[data-app-view="home"] .mainmenu-final-cta { border-radius: 18px; }
#setup[data-app-view="home"] .mainmenu-footer span,
#setup[data-app-view="home"] .mainmenu-footer p { font-size: 12px; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-card { transition: transform var(--ds-t-slow) var(--ds-ease-spring), box-shadow var(--ds-t-slow) var(--ds-ease); }
  body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-cardfan:hover .mainmenu-card { transform: translateY(-6px); }
  body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-cardfan .mainmenu-card:hover { transform: translateY(-16px) scale(1.04); z-index: 5; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
  @supports (animation-timeline: view()) {
    body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-path,
    body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-modes,
    body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-final-cta,
    body:not(.reduced-motion) #setup[data-app-view="home"] .mainmenu-library-entry {
      animation: dsReveal both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}

/* ============================================================
   No visual refreshes (2026-09-02). The arena rebuilds its DOM on every
   state change; entrance motion runs only when a surface first appears
   (ui.js marks survivors as .settled) and loops keep their phase.
   ============================================================ */
#game .settled,
#game .settled > .modal,
#game .settled > .sheet,
#game .settled > .quickmenu,
#game .settled .btnrow .pbtn { animation: none !important; }
#game .hcard.castable,
#game .czcard.castable,
#game .mini.threatened,
#game .hcard.threatened,
#game .targetable,
#game .stackempty span { animation-delay: var(--fx-phase, 0ms); }

/* ============================================================
   Impact effects: damage tiers, lethal blows and mass removal.
   ============================================================ */
.gamefx-impact.tier-mid > strong { font-size: 38px; }
.gamefx-impact.tier-big > strong { font-size: 50px; color: #fff; text-shadow: 0 4px 18px #000, 0 0 22px #ff6a3d, 0 0 60px #ff3b1d; }
.gamefx-impact.tier-huge > strong,
.gamefx-impact.lethal > strong { font-size: 66px; color: #fff; text-shadow: 0 6px 24px #000, 0 0 26px #ffb27a, 0 0 80px #ff4d2a; }
.gamefx-impact.tier-big > strong,
.gamefx-impact.tier-huge > strong,
.gamefx-impact.lethal > strong { animation: dsDamagePunch 1.08s cubic-bezier(.16, .9, .2, 1) both; }
.gamefx-impact.tier-big > small,
.gamefx-impact.tier-huge > small { top: 26px; font-size: 9.5px; letter-spacing: .3em; }
.gamefx-impact.lethal > small { top: 32px; color: #fff; font-size: 12px; letter-spacing: .36em; }
.gamefx-impact.tier-big > span { left: -70px; top: -70px; width: 140px; height: 140px; border-width: 3px; }
.gamefx-impact.tier-huge > span,
.gamefx-impact.lethal > span { left: -110px; top: -110px; width: 220px; height: 220px; border-width: 3px; animation-duration: .9s; }
.gamefx-impact.tier-big > i { height: 104px; top: -52px; transform-origin: 3px 52px; }
.gamefx-impact.tier-huge > i,
.gamefx-impact.lethal > i { height: 160px; top: -80px; width: 8px; left: -4px; transform-origin: 4px 80px; }
.gamefx-impact.lethal { color: #ff3b2a; }
@keyframes dsDamagePunch {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.35); }
  14% { opacity: 1; transform: translate(-50%, -8px) scale(1.5); }
  30% { transform: translate(-50%, -4px) scale(1.12); }
  68% { opacity: 1; transform: translate(-50%, -34px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(.98); }
}
.gamefx-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(255, 70, 38, .45) 100%);
  animation: dsVignette .78s ease-out both;
}
.gamefx-vignette.mine { background: radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(255, 52, 28, .62) 100%); }
.gamefx-vignette.lethal { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(255, 40, 20, .78) 100%); animation-duration: 1.1s; }
@keyframes dsVignette { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
#game.fx-hit-big { --shake: 5px; animation: dsShake .5s cubic-bezier(.2, .7, .2, 1) both; }
#game.fx-hit-huge { --shake: 10px; animation: dsShake .64s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dsShake {
  0%, 100% { transform: none; }
  14% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * .6)); }
  28% { transform: translate(var(--shake), calc(var(--shake) * -.5)); }
  44% { transform: translate(calc(var(--shake) * -.6), calc(var(--shake) * .3)); }
  60% { transform: translate(calc(var(--shake) * .35), 0); }
  80% { transform: translate(calc(var(--shake) * -.15), 0); }
}
.gamefx-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .38) 30%, transparent 64%);
  mix-blend-mode: screen;
  animation: dsFlash .95s ease-out both;
}
.mode-exile .gamefx-flash { background: radial-gradient(circle at 50% 45%, rgba(236, 214, 255, .92), rgba(190, 140, 255, .36) 30%, transparent 64%); }
.mode-damage .gamefx-flash { background: radial-gradient(circle at 50% 45%, rgba(255, 236, 214, .95), rgba(255, 150, 90, .4) 30%, transparent 64%); }
@keyframes dsFlash { 0% { opacity: 0; } 7% { opacity: 1; } 100% { opacity: 0; } }
.gamefx-shock { position: absolute; left: 50%; top: 45%; width: 1px; height: 1px; pointer-events: none; }
.gamefx-shock i {
  position: absolute; left: 0; top: 0;
  width: calc(56 * var(--vwu)); height: calc(56 * var(--vwu));
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 255, 255, .35), inset 0 0 40px rgba(255, 255, 255, .2);
  transform: translate(-50%, -50%) scale(.04);
  animation: dsShock 1.15s cubic-bezier(.1, .8, .2, 1) both;
}
.gamefx-shock i:nth-child(2) { animation-delay: .14s; opacity: .7; }
.gamefx-shock i:nth-child(3) { animation-delay: .3s; opacity: .45; }
.mode-exile .gamefx-shock i { border-color: rgba(214, 170, 255, .85); box-shadow: 0 0 40px rgba(195, 122, 255, .4); }
.mode-damage .gamefx-shock i { border-color: rgba(255, 150, 90, .9); box-shadow: 0 0 40px rgba(255, 110, 60, .45); }
@keyframes dsShock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.04); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); } }
.gamefx-wipe.scale-large .gamefx-wiperune { animation-duration: 1.3s; }
.gamefx-wipe.scale-large .gamefx-wipetitle b { font-size: clamp(24px, 3.6 * var(--vwu), 50px); }
#game.fx-boardwipe-camera { animation: dsWipeCamera 1.15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dsWipeCamera {
  0% { transform: none; }
  9% { transform: scale(1.014) translate(-5px, 3px); }
  20% { transform: scale(1.014) translate(5px, -3px); }
  34% { transform: scale(1.01) translate(-3px, 1px); }
  58% { transform: scale(1.005) translate(1px, 0); }
  100% { transform: none; }
}
.gamefx-wipecard { animation: dsWipeCard 1.08s var(--wipe-delay, 0ms) cubic-bezier(.18, .72, .18, 1) both; }
@keyframes dsWipeCard {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: none; }
  20% { opacity: 1; transform: translate(0, -16px) rotate(var(--wipe-spin)) scale(1.12); filter: brightness(2.3) saturate(.15); }
  52% { opacity: .9; transform: translate(0, 10px) rotate(var(--wipe-spin)) scale(1); filter: brightness(1.3) saturate(0) blur(1px); }
  100% { opacity: 0; transform: translate(0, 160px) rotate(calc(var(--wipe-spin) * 2)) scale(.45); filter: brightness(.5) blur(7px); }
}
@media (prefers-reduced-motion: reduce) {
  #game.fx-hit-big, #game.fx-hit-huge, #game.fx-boardwipe-camera { animation: none !important; }
  .gamefx-vignette, .gamefx-flash, .gamefx-shock i { display: none !important; }
  .gamefx-impact.tier-big > strong, .gamefx-impact.tier-huge > strong, .gamefx-impact.lethal > strong { animation: gamefxDamageNumber .92s cubic-bezier(.16, .78, .2, 1) both; }
}
body.reduced-motion #game.fx-hit-big, body.reduced-motion #game.fx-hit-huge, body.reduced-motion #game.fx-boardwipe-camera { animation: none !important; }
body.reduced-motion .gamefx-vignette, body.reduced-motion .gamefx-flash, body.reduced-motion .gamefx-shock i { display: none !important; }

/* ============================================================
   Obsidian & ember refresh (2026-09-02, v2).
   Tokens carry the palette (design-system.css); this block carries the
   new typography, material and interaction language for landing, setup
   and arena. Bricolage Grotesque for display, Manrope for copy,
   JetBrains Mono for every number that changes during play.
   ============================================================ */

/* ---------- Material: grain, ambient light, hairlines ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
#setup[data-app-view="home"] {
  background:
    radial-gradient(60% 42% at 82% -6%, rgba(var(--ds-accent-rgb), .16), transparent 70%),
    radial-gradient(40% 30% at 8% 18%, rgba(88, 120, 160, .12), transparent 70%),
    linear-gradient(180deg, #090c11 0%, var(--ds-table) 46%, #060809 100%) !important;
}
#setup:not([data-app-view="home"]) {
  background:
    radial-gradient(55% 38% at 88% -4%, rgba(var(--ds-accent-rgb), .12), transparent 70%),
    radial-gradient(38% 28% at 4% 12%, rgba(88, 120, 160, .1), transparent 70%),
    var(--ds-table);
}

/* ---------- Typography ---------- */
h1, h2, h3, .mainmenu-brand, .setupstep, .phase b, .mtitle, .sheettitle, .stagetitle, .czname, .oppname {
  font-family: var(--ds-font-display);
  font-optical-sizing: auto;
}
h1, h2 { letter-spacing: -.028em; text-wrap: balance; }
h3, .mtitle, .sheettitle { letter-spacing: -.015em; }
p { text-wrap: pretty; }
.opplife, .melife, .mini .pt, .hcard .pt, .czcost, .sidecount, .oppmeta b, .stackpopn, .seatindex,
.mainmenu-library-steps li span, .mainmenu-proof-stat b, .difficultynote b, .gamefx-impact > strong {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.setupstep, .seclabel, .mainmenu-kicker, .mainmenu-navlinks a, .boardlanelabel, .czlabel, .sidetitle,
.utilitylabel, .handwrap::before, .myboard::before, .mainmenu-trust li, .activeaitag, .oppcmd, .keywordbadge {
  font-family: var(--ds-font-display);
  font-stretch: 88%;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- Interaction: hover lift, press, focus ---------- */
:where(button, [role="button"], a.btn, .pbtn, .tbtn, .zbtn, .deckcard, .matchtypebtn, .mainmenu-primary, .mainmenu-secondary, .mainmenu-import-action) {
  transition:
    transform var(--ds-t-fast) var(--ds-ease),
    background-color var(--ds-t-base) var(--ds-ease),
    border-color var(--ds-t-base) var(--ds-ease),
    box-shadow var(--ds-t-base) var(--ds-ease),
    color var(--ds-t-base) var(--ds-ease);
}
:where(button, [role="button"], .pbtn, .tbtn, .zbtn):not(:disabled):active { transform: translateY(1px) scale(.985); }
:where(button, a, input, select, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--ds-accent-rgb), .18);
}

/* Primary actions: ember gradient, ink text, warm tinted shadow. */
#setup .pbtn.start,
body.game-active #game .pbtn.primary,
#setup[data-app-view="home"] .mainmenu-primary,
body.game-active #game .stepper .step.on {
  color: var(--ds-accent-ink);
  background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)) !important;
  border-color: rgba(var(--ds-accent-bright-rgb), .9) !important;
  box-shadow: 0 12px 30px rgba(var(--ds-accent-rgb), .28), inset 0 1px rgba(255, 255, 255, .5) !important;
  text-shadow: none;
}
#setup .pbtn.start:hover:not(:disabled),
body.game-active #game .pbtn.primary:hover:not(:disabled),
#setup[data-app-view="home"] .mainmenu-primary:hover {
  background: linear-gradient(180deg, #ffbf9a, var(--ds-accent-bright)) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(var(--ds-accent-rgb), .36), inset 0 1px rgba(255, 255, 255, .55) !important;
}
/* Secondary surfaces: quiet glass with a hairline that warms on hover. */
#setup[data-app-view="home"] .mainmenu-secondary,
#setup[data-app-view="home"] .mainmenu-import-action,
#setup .pbtn:not(.start):not(.primary),
#setup .matchtypebtn,
body.game-active #game .tbtn,
body.game-active #game .pbtn:not(.primary):not(.danger),
body.game-active #game .zbtn {
  color: var(--ds-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(2, 6, 12, .35);
}
#setup[data-app-view="home"] .mainmenu-secondary:hover,
#setup[data-app-view="home"] .mainmenu-import-action:hover,
#setup .pbtn:not(.start):not(.primary):hover:not(:disabled),
#setup .matchtypebtn:hover,
body.game-active #game .tbtn:hover,
body.game-active #game .pbtn:not(.primary):not(.danger):hover:not(:disabled),
body.game-active #game .zbtn:hover {
  border-color: rgba(var(--ds-accent-bright-rgb), .55);
  color: var(--ds-text);
  transform: translateY(-1px);
}

/* ---------- Landing ---------- */
#setup[data-app-view="home"] .mainmenu-hero h1 {
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 640;
  line-height: .96;
  letter-spacing: -.035em;
}
#setup[data-app-view="home"] .mainmenu-kicker { color: var(--ds-accent-bright); }
#setup[data-app-view="home"] .mainmenu-hero-copy p { color: var(--ds-copy); max-width: 58ch; }
#setup[data-app-view="home"] .mainmenu-primary,
#setup[data-app-view="home"] .mainmenu-secondary { border-radius: var(--ds-r-lg); }
#setup[data-app-view="home"] .mainmenu-visual { filter: saturate(1.05); }
#setup[data-app-view="home"] .mainmenu-warroom {
  filter: saturate(.7) contrast(1.05);
  opacity: .78;
}
#setup[data-app-view="home"] .mainmenu-table-note {
  border-radius: var(--ds-r-md);
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(var(--ds-panel-rgb), .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 20px 50px rgba(2, 6, 12, .5);
}
#setup[data-app-view="home"] .mainmenu-library-entry,
#setup[data-app-view="home"] .mainmenu-mode,
#setup[data-app-view="home"] .mainmenu-final-cta {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(var(--ds-accent-rgb), .08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%),
    rgba(var(--ds-panel-rgb), .82);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 24px 60px rgba(2, 6, 12, .45);
}
#setup[data-app-view="home"] .mainmenu-library-entry h2,
#setup[data-app-view="home"] .mainmenu-mode h2,
#setup[data-app-view="home"] .mainmenu-final-cta h2 { font-weight: 600; letter-spacing: -.03em; }
#setup[data-app-view="home"] .mainmenu-library-steps li span {
  color: var(--ds-accent-bright);
  font-weight: 600;
}
#setup[data-app-view="home"] .mainmenu-brand b { font-weight: 700; letter-spacing: .1em; }
#setup[data-app-view="home"] .mainmenu-nav { border-bottom-color: rgba(255, 255, 255, .06); }
#setup[data-app-view="home"] .mainmenu-navlinks a:hover { color: var(--ds-accent-bright); }

/* ---------- Setup ---------- */
#setup h1 { font-weight: 620; letter-spacing: -.035em; }
#setup .setupstep span { border-radius: 8px; font-family: var(--ds-font-mono); font-weight: 600; }
#setup .deckcard {
  border-radius: var(--ds-r-lg) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 34%),
    var(--ds-panel) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 12, .42) !important;
}
#setup .deckcard:hover {
  border-color: rgba(var(--ds-accent-bright-rgb), .45) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2, 6, 12, .5), 0 0 0 1px rgba(var(--ds-accent-rgb), .12) !important;
}
#setup .deckcard.selected {
  border-color: rgba(var(--ds-accent-bright-rgb), .8) !important;
  box-shadow: 0 0 0 1px rgba(var(--ds-accent-rgb), .3), 0 18px 44px rgba(2, 6, 12, .5), inset 0 0 0 1px rgba(var(--ds-accent-rgb), .12) !important;
}
#setup .deckcard h3, #setup .deckcard .deckname { font-weight: 620; letter-spacing: -.02em; }
#setup .seclabel { color: var(--ds-accent-bright); }
#setup .matchtypebtn, #setup .botconfig, #setup .selecteddecksummary { border-radius: var(--ds-r-md); }
#setup .matchtypebtn.selected {
  border-color: rgba(var(--ds-accent-bright-rgb), .7) !important;
  box-shadow: 0 0 0 1px rgba(var(--ds-accent-rgb), .25), inset 0 1px rgba(255, 255, 255, .06);
}
#setup .pbtn { border-radius: var(--ds-r-md); }
#setup .pbtn.start { border-radius: 14px; }
#setup .advancedrules > summary { border-radius: var(--ds-r-md); }

/* ---------- Arena ---------- */
body.game-active #game .topbar {
  background:
    linear-gradient(90deg, rgba(var(--ds-accent-rgb), .12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%),
    rgba(var(--ds-table-rgb), .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body.game-active #game .phase b { font-weight: 620; letter-spacing: -.02em; }
body.game-active #game .phase em { color: var(--ds-accent-bright); }
body.game-active #game .stepper .step { border-radius: var(--ds-r-sm); }
body.game-active #game .tbtn { border-radius: var(--ds-r-sm); }
body.game-active #game .ticker { background: rgba(var(--ds-table-rgb), .55); border-bottom-color: rgba(255, 255, 255, .06); }
body.game-active #game .opprow {
  border-radius: var(--ds-r-md) !important;
  border-color: rgba(255, 255, 255, .07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 26%),
    rgba(var(--ds-panel-rgb), .84);
  box-shadow: 0 14px 34px rgba(2, 6, 12, .4), inset 0 1px rgba(255, 255, 255, .045);
}
body.game-active #game .oppswrap.active-ai-turn .opprow.active,
body.game-active #game .opprow:has(.activeaitag) {
  border-color: rgba(var(--ds-accent-bright-rgb), .6);
  box-shadow: 0 0 0 1px rgba(var(--ds-accent-rgb), .2), 0 18px 44px rgba(2, 6, 12, .48), inset 0 1px rgba(255, 255, 255, .06);
}
body.game-active #game .opphead { border-bottom-color: rgba(255, 255, 255, .07); }
body.game-active #game .oppname { font-weight: 640; letter-spacing: .02em; text-transform: none; }
body.game-active #game .opplife { font-weight: 600; }
body.game-active #game .myboard {
  border-radius: var(--ds-r-md) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(var(--ds-accent-rgb), .08), transparent 70%),
    rgba(var(--ds-table-rgb), .36) !important;
}
body.game-active #game .myboard::before { color: var(--ds-accent-bright); }
body.game-active #game .mini,
body.game-active #game .czcard,
body.game-active #game .hcard { border-radius: 8px; box-shadow: 0 10px 24px rgba(2, 6, 12, .5), 0 0 0 1px rgba(0, 0, 0, .4); }
body.game-active #game .mini img,
body.game-active #game .hcard img { border-radius: 6px; }
body.game-active #game .czcard { border-color: rgba(255, 255, 255, .09); }
body.game-active #game .playerrail .melife { font-weight: 600; }
body.game-active #game .playerrail .zbtn { border-radius: var(--ds-r-sm); }
body.game-active #game .promptbar {
  border-radius: 14px 14px 0 0;
  border-color: rgba(var(--ds-accent-bright-rgb), .3);
  background:
    linear-gradient(180deg, rgba(var(--ds-accent-rgb), .07), transparent 40%),
    rgba(var(--ds-panel-rgb), .94);
  box-shadow: 0 -14px 34px rgba(2, 6, 12, .4), inset 0 1px rgba(255, 255, 255, .05);
}
body.game-active #game .pbtn { border-radius: var(--ds-r-sm); }
body.game-active #game .sidebar { border-left-color: rgba(255, 255, 255, .07); }
body.game-active #game .sidetitle { color: var(--ds-accent-bright); }
body.game-active #game .utilitybutton { border-radius: var(--ds-r-sm); }
body.game-active #game .modal,
body.game-active #game .sheet,
.overlay > .modal,
.overlay > .sheet {
  border-radius: var(--ds-r-lg);
  border-color: rgba(255, 255, 255, .09);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(var(--ds-accent-rgb), .07), transparent 70%),
    var(--ds-dialog);
  box-shadow: var(--ds-shadow-dialog);
}
body.game-active #game .stackpop { border-radius: var(--ds-r-lg); border-color: rgba(255, 255, 255, .09); }

/* Reduced motion: no lifts, no presses. */
@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], .pbtn, .tbtn, .zbtn):not(:disabled):active,
  #setup .deckcard:hover,
  #setup .pbtn.start:hover:not(:disabled),
  body.game-active #game .pbtn.primary:hover:not(:disabled),
  #setup[data-app-view="home"] .mainmenu-primary:hover { transform: none; }
}

/* Legacy setup/arena rules carry higher specificity for a few text styles;
   the refresh states its type explicitly there. */
#setup h1, #setup .setuphead h1, #setup header h1 { font-weight: 620 !important; letter-spacing: -.035em !important; }
#setup .seclabel, #setup .podbuilder .seclabel, #setup .setupsection .seclabel {
  color: var(--ds-accent-bright) !important;
  font-family: var(--ds-font-display) !important;
  font-stretch: 88% !important;
}
#setup .setupstep, body.game-active #game .boardlanelabel, body.game-active #game .czlabel,
body.game-active #game .sidetitle, body.game-active #game .utilitylabel {
  font-family: var(--ds-font-display) !important;
  font-stretch: 88% !important;
}
body.game-active #game .opplife, body.game-active #game .playerrail .melife {
  font-family: var(--ds-font-mono) !important;
  font-variant-numeric: tabular-nums;
}
body.game-active #game .phase b { font-weight: 620 !important; }
body.game-active #game .topbar {
  background:
    linear-gradient(90deg, rgba(var(--ds-accent-rgb), .12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%),
    rgba(var(--ds-table-rgb), .94) !important;
}

/* Wide sheet actions: the primary (Play land, Cast) is ember, Close/Back stay
   quiet glass with light text so the real action reads first. */
body.game-active #game .pbtn.wide:not(.primary):not(.danger) {
  color: var(--ds-text) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
  border: 1px solid rgba(255, 255, 255, .12);
}
body.game-active #game .pbtn.danger { color: #fff; background: linear-gradient(180deg, #a34a3f, #7d2f27); border-color: rgba(255, 140, 120, .35); }

/* Mobile arena: seven phase pills must fit 375px without overlapping. */
@media (max-width: 767px) {
  body.game-active #game .stepper { gap: 3px; }
  body.game-active #game .stepper .step {
    min-width: 0;
    padding: 8px 3px;
    font-size: 8.5px;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: clip;
  }
  body.game-active #game .topbar .tbtn { padding-inline: 8px; font-size: 9.5px; letter-spacing: .08em; }
  body.game-active #game .phase b { font-size: 20px !important; }
}

/* ---------- Visible outcomes: zone flights, copy bursts, counter pulses ----------
   Exile, discard, mill and returns to hand fly a card ghost between the two
   zones; spell copies burst in the middle of the table; +1/+1 and other
   counters pulse on their creature; mass keyword grants share one banner. */
.gamefx-flight { position: absolute; display: grid; justify-items: center; transform: translate(-50%, -50%); animation: gamefxFlight 1.5s var(--ds-ease) both; animation-delay: var(--fx-delay, 0ms); pointer-events: none; }
.gamefx-flightcards { position: relative; width: 62px; height: 86px; }
.gamefx-flightcard { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--ds-panel-raised); box-shadow: 0 14px 30px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .14); transform: translateX(calc(var(--fan, 0) * 24px)) rotate(calc(var(--fan, 0) * 9deg)); }
.gamefx-flightcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gamefx-flightcard.facedown { background: radial-gradient(circle at 35% 30%, #493d63, #171522 62%); }
.gamefx-flightbadge { margin-top: 10px; padding: 6px 11px; border-radius: 8px; text-align: center; white-space: nowrap; background: rgba(var(--ds-panel-rgb), .95); border: 1px solid rgba(var(--ds-accent-rgb), .55); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.gamefx-flightbadge small { display: block; font: 800 8.5px/1 var(--ds-font-display); letter-spacing: .16em; color: var(--ds-accent-bright); }
.gamefx-flightbadge b { display: block; margin-top: 3px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; font: 700 12px/1.2 var(--ds-font-body); color: var(--ds-text); }
.gamefx-flight.to-exile .gamefx-flightcard { box-shadow: 0 0 20px #bd83ff, 0 14px 30px rgba(0, 0, 0, .62); }
.gamefx-flight.to-exile .gamefx-flightbadge { border-color: #a97adc; }
.gamefx-flight.to-exile .gamefx-flightbadge small { color: #dcbcff; }
.gamefx-flight.to-graveyard .gamefx-flightcard { filter: saturate(.55) brightness(.9); }
.gamefx-flight.to-graveyard .gamefx-flightbadge { border-color: #928c80; }
.gamefx-flight.to-graveyard .gamefx-flightbadge small { color: #d8d2c4; }
.gamefx-flight.to-hand .gamefx-flightcard { box-shadow: 0 0 18px #6fe9ff, 0 14px 30px rgba(0, 0, 0, .62); }
.gamefx-flight.to-hand .gamefx-flightbadge { border-color: #69c9d8; }
.gamefx-flight.to-hand .gamefx-flightbadge small { color: #bdf3ff; }
@keyframes gamefxFlight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx-x, 0px)), calc(-50% + var(--fx-y, 0px))) scale(.42); }
}

.gamefx-copyburst { position: absolute; display: grid; justify-items: center; gap: 12px; transform: translate(-50%, -50%); animation: gamefxCopyBurst 1.7s var(--ds-ease) both; pointer-events: none; }
.gamefx-copyfan { position: relative; width: 118px; height: 150px; }
.gamefx-copycard { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 26px rgba(var(--ds-accent-rgb), .55); animation: gamefxCopyCard 1.7s var(--ds-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.gamefx-copycard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gamefx-copylabel { padding: 8px 16px; border-radius: 10px; text-align: center; background: rgba(var(--ds-panel-rgb), .96); border: 1px solid rgba(var(--ds-accent-bright-rgb), .7); box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(var(--ds-accent-rgb), .35); }
.gamefx-copylabel small { display: block; font: 800 9px/1 var(--ds-font-display); letter-spacing: .18em; color: var(--ds-accent-bright); }
.gamefx-copylabel b { display: block; margin-top: 4px; font: 700 15px/1.2 var(--ds-font-body); color: var(--ds-text); }
.gamefx-copylabel em { display: block; margin-top: 2px; font: 600 10px/1.2 var(--ds-font-body); font-style: normal; color: var(--ds-copy); }
@keyframes gamefxCopyBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(.96); }
}
@keyframes gamefxCopyCard {
  0%, 16% { transform: translate(0, 0) rotate(0deg); }
  46%, 100% { transform: translate(calc((var(--i, 0) - 1) * 48px), calc(var(--i, 0) * -6px)) rotate(calc((var(--i, 0) - 1) * 12deg)); }
}
#game .mini.fx-copy-source { box-shadow: 0 0 0 2px var(--ds-accent-bright), 0 0 26px rgba(var(--ds-accent-bright-rgb), .85) !important; }

.gamefx-pluscounter, .gamefx-othercounter { position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 12px; transform: translate(-50%, -50%); border-radius: 999px; animation: fxMinusCounter 1s cubic-bezier(.2, .78, .2, 1) both; }
.gamefx-pluscounter { color: #e9ffe6; background: #143f1af2; border: 2px solid #7fe08a; box-shadow: 0 0 35px #4ad65aaa, 0 16px 32px #000c; }
.gamefx-pluscounter i { font: 900 22px/1 var(--ds-font-display); font-style: normal; color: #9dff9f; }
.gamefx-pluscounter b, .gamefx-othercounter b { font: 900 19px/1 var(--ds-font-display); }
.gamefx-pluscounter span { font: 800 11px/1 var(--ds-font-display); color: #b8ffbf; }
.gamefx-othercounter { color: var(--ds-accent-glow); background: rgba(var(--ds-panel-rgb), .96); border: 2px solid var(--ds-accent); box-shadow: 0 0 30px rgba(var(--ds-accent-rgb), .6), 0 16px 32px #000c; }
.gamefx-othercounter span { font: 800 10px/1 var(--ds-font-display); letter-spacing: .1em; color: var(--ds-accent-bright); }

.gamefx-keywordgroup { position: absolute; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 12px; text-align: center; background: rgba(var(--ds-panel-rgb), .96); border: 1px solid rgba(var(--ds-accent-bright-rgb), .6); box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(var(--ds-accent-rgb), .3); animation: gamefxCopyBurst 1.5s var(--ds-ease) both; pointer-events: none; }
.gamefx-keywordgroup small { display: block; font: 800 9px/1 var(--ds-font-display); letter-spacing: .18em; color: var(--ds-accent-bright); }
.gamefx-keywordgroup b { display: block; margin-top: 4px; font: 700 15px/1.2 var(--ds-font-body); color: var(--ds-text); }

@media (prefers-reduced-motion: reduce) {
  .gamefx-flight, .gamefx-copyburst, .gamefx-copycard, .gamefx-keywordgroup, .gamefx-pluscounter, .gamefx-othercounter { animation-duration: .55s !important; }
}


/* Reveal popup: "Accept all" sits under Proceed as the quiet secondary action.
   A stack of copies or tokens otherwise asks for one Proceed per copy. */
body.game-active #game .stackpop.reveal .stackpopfoot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.game-active #game .pbtn.revealacceptall {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}


/* Priority window: battlefield abilities are offered as their own row so a
   response that lives on the table (Stella Lee's copy) is as reachable as a
   card in hand. */
body.game-active #game .btnrow.priorityabilities {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
body.game-active #game .btnrow.priorityabilities .pbtn {
  color: var(--ds-accent-bright);
  border: 1px solid rgba(var(--ds-accent-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--ds-accent-rgb), .16), rgba(var(--ds-accent-rgb), .06));
}


/* Ability buttons now carry the card's own rules text instead of a placeholder.
   Sentence case and normal tracking keep a full ability line readable. */
body.game-active #game .pbtn.abilitybtn {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

/* ============================================================
   Optional Arena-style direct manipulation. The switch is sticky, but the
   interaction layer stays additive: all click/focus affordances remain.
   ============================================================ */
#setup .arenadragsetup > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
#setup .arenadragsetup b { color: #eee4cf; font-size: 12px; letter-spacing: .04em; }
#setup .arenadragsetup small { grid-column: 1 / -1; color: var(--ds-muted); font-size: 10px; line-height: 1.45; }
#setup .arenadragsetup em {
  grid-column: 2;
  grid-row: 1;
  padding: 4px 7px;
  color: #aeb8b4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  font: 700 8px/1 var(--ds-font-display);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#setup .arenadragsetup.enabled {
  border-color: rgba(var(--ds-accent-bright-rgb), .55) !important;
  background: rgba(var(--ds-accent-rgb), .1) !important;
}
#setup .arenadragsetup.enabled em { color: #172119; background: var(--ds-accent-bright); border-color: transparent; }

body.game-active #game.arena-drag-enabled .arena-draggable {
  cursor: grab;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}
body.game-active #game.arena-drag-enabled .arena-draggable img {
  -webkit-user-drag: none;
  user-select: none;
}
body.game-active #game.arena-drag-enabled .arena-draggable:active { cursor: grabbing; }
body.game-active #game .arena-draggable .arenadragbadge {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 5;
  padding: 3px 5px;
  color: #101714;
  background: rgba(239, 198, 118, .94);
  border: 1px solid rgba(255, 244, 211, .7);
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .45);
  font: 900 7px/1 var(--ds-font-display);
  letter-spacing: .08em;
  pointer-events: none;
}
body.game-active #game .arena-dragging-source { opacity: .42; filter: saturate(.45); }
body.game-active #game .arena-drop-ready {
  outline: 2px solid rgba(239, 198, 118, .72) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(239, 198, 118, .12), 0 0 24px rgba(239, 198, 118, .28) !important;
}
body.game-active #game [data-arena-drop-kind="cast-zone"].arena-drop-ready,
body.game-active #game [data-arena-drop-kind="land-zone"].arena-drop-ready {
  background-color: rgba(239, 198, 118, .055) !important;
  outline-style: dashed !important;
}
body.game-active #game .arenalandempty {
  min-width: 150px;
  padding: 12px 18px;
  color: #b9afa0;
  border: 1px dashed rgba(239, 198, 118, .28);
  border-radius: 7px;
  font: 800 9px/1 var(--ds-font-display);
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}
body.game-active #game .arena-drop-over {
  outline-color: #f8df9e !important;
  background-color: rgba(239, 198, 118, .16) !important;
  box-shadow: 0 0 0 5px rgba(248, 223, 158, .18), 0 0 34px rgba(248, 223, 158, .56) !important;
}
.arena-drag-ghost {
  position: fixed;
  z-index: 120000;
  display: grid;
  grid-template-columns: 54px minmax(90px, 160px);
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 230px;
  padding: 6px;
  color: #f7edd9;
  background: rgba(13, 20, 21, .96);
  border: 1px solid rgba(239, 198, 118, .8);
  border-radius: 9px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .68), 0 0 28px rgba(239, 198, 118, .28);
  transform: translate(14px, -50%) rotate(1.5deg);
  transform-origin: left center;
  pointer-events: none;
  transition: border-color 90ms linear, filter 90ms linear;
}
.arena-drag-ghost.invalid { border-color: #d96358; filter: saturate(.55); }
.arena-drag-ghost img { display: block; width: 54px; height: 75px; object-fit: cover; border-radius: 5px; }
.arena-drag-ghost span { display: grid; gap: 5px; min-width: 0; }
.arena-drag-ghost small { color: #efc676; font: 900 8px/1 var(--ds-font-display); letter-spacing: .14em; }
.arena-drag-ghost b { overflow: hidden; font: 750 12px/1.25 var(--ds-font-body); text-overflow: ellipsis; }
body.arena-direct-dragging { user-select: none; }

@media (pointer: coarse) {
  body.game-active #game .arena-draggable .arenadragbadge { padding: 4px 6px; font-size: 7.5px; }
  .arena-drag-ghost { transform: translate(-50%, -112%); }
}

/* Player experience: one setup stage, a personal deck shelf, and table tools. */
body.high-contrast {
  --ds-muted: #b8c4d0;
  --ds-copy: #e1e6ec;
  --ds-line: #718092;
  --ds-line-soft: #455363;
}
body.high-contrast #game :is(.oppmeta, .zonecount, .styledesc, .emptyrow, .quickmenuitem small) { color: var(--ds-copy) !important; }
body.high-contrast #game :is(.pbtn, .tbtn, .zbtn, .hcard, .bcard) { border-color: var(--ds-line) !important; }
#setup[data-app-view="setup"] { padding-bottom: 100px !important; }
#setup[data-app-view="setup"] .menuhead { max-width: 1440px; margin: auto; padding: 24px 32px 28px; }
#setup .setuphero { padding: 22px 0 0 !important; }
#setup .setuphero .title { font-size: clamp(32px, calc(4.2 * var(--vwu)), 60px); font-weight: 650; letter-spacing: -.045em; }
#setup .setuphero .subtitle { font-size: 14px; color: var(--ds-copy); max-width: 64ch; }
#setup .setupsteps .setupstep { min-height: 44px; }
#setup .setupgrid { display: block !important; max-width: 1376px; margin: 0 auto; padding: 28px 32px !important; height: auto !important; overflow: visible !important; }
#setup .setupleft { width: 100%; max-height: none; overflow: visible; }
#setup[data-setup-stage="deck"] .setupright { display: none !important; }
#setup[data-setup-stage="pod"] .setupleft,
#setup[data-setup-stage="review"] .setupleft { display: none !important; }
#setup .setupright.mobile-open {
  position: static !important; inset: auto !important; transform: none !important;
  display: block; width: 100% !important; max-width: 860px; height: auto !important;
  max-height: none !important; margin: 0 auto; padding: 28px !important;
  overflow: visible !important; border: 1px solid var(--ds-line-soft); border-radius: 18px;
  background: var(--ds-panel); box-shadow: none;
}
#setup .setupstagepanel { display: block; }
#setup .reviewstage { display: none; }
#setup[data-setup-stage="review"] .podstage { display: none; }
#setup[data-setup-stage="review"] .reviewstage { display: block; padding: 0; }
#setup .podclose { display: none !important; }
#setup .setupnext { display: block; width: 100%; min-height: 54px; margin-top: 20px; font-size: 14px; }
#setup .podactions { position: sticky; bottom: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; margin-top: 20px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-line-soft); background: var(--ds-panel); }
#setup .podactions .pbtn { width: 100%; min-width: 0; min-height: 48px; margin: 0; font-size: 13px; }
#setup :is(.reviewstart, .setupnext) { background: linear-gradient(135deg, var(--ds-accent-bright), var(--ds-accent)) !important; color: var(--ds-accent-ink) !important; border-color: var(--ds-accent-bright) !important; }
#setup .pbtn.start { display: none !important; }
#setup .controlintro { padding: 0 0 20px; }
#setup .controlintro h2 { font-size: 30px; }
#setup .controlintro p { font-size: 13px; max-width: 60ch; }
#setup .matchtype { margin-top: 0; }
#setup .botrow { grid-template-columns: 46px 106px minmax(0, 1fr); }
#setup .botfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; flex: 1; gap: 12px; }
#setup .botfield { min-width: 0; }
#setup .botfield .styleselect { width: 100%; max-width: 100%; min-width: 0; }
#setup .botfield > span, #setup .styledesc span { font-size: 10px; }
#setup .styledesc p { font-size: 12px; line-height: 1.6; }
#setup .botname { font-size: 14px; }
#setup .botconfig { min-width: 0; margin-bottom: 10px; padding: 16px; }
#setup .seclabel { margin-top: 22px; padding: 0 0 12px; font-size: 11px; }
#setup .cmdbox { margin-top: 0; padding: 14px; }
#setup .advancedrules summary { min-height: 52px; }
#setup .advancedrules summary small { font-size: 11px; }
#setup .cmdcheck { font-size: 13px; }
#setup .deckexplorerhead { align-items: center; margin-bottom: 20px; }
#setup .deckexplorerhead h2 { font-size: 28px; letter-spacing: -.025em; }
#setup .deckexploreractions { display: flex; align-items: center; gap: 14px; }
#setup .deckresultcount { font-size: 12px; font-variant-numeric: tabular-nums; }
#setup .surprisedeck { min-height: 44px; padding: 0 16px; border: 1px solid var(--ds-line); border-radius: 8px; color: var(--ds-text); background: var(--ds-panel-raised); cursor: pointer; font: 600 13px var(--ds-font-body); }
#setup .playstylequick { border: 0; border-radius: 12px; background: var(--ds-panel); padding: 18px 20px; margin-bottom: 18px; }
#setup .playstylequickhead b { font-size: 14px; }
#setup .playstylequickhead small { font-size: 12px; }
#setup .playstylechoices button { font-size: 12px; min-height: 46px; }
#setup .playstylechoices button span { font-size: 12px !important; letter-spacing: 0; }
#setup .decktools { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(100px, 135px)) auto; }
#setup .decktools :is(input, select, button) { font-size: 13px; }
#setup .deckbrowsebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; margin: 4px 0 14px; }
#setup .activefilters { display: flex; flex-wrap: wrap; gap: 6px; }
#setup .filterchip { min-height: 36px; padding: 5px 10px; color: var(--ds-accent-bright); background: rgba(var(--ds-accent-rgb), .08); border: 1px solid rgba(var(--ds-accent-rgb), .3); border-radius: 5px; font-size: 12px; cursor: pointer; }
#setup .deckbrowseoptions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0; }
#setup .deckbrowseoptions label { display: flex; align-items: center; gap: 8px; color: var(--ds-muted); font-size: 12px; }
#setup .decksort { min-height: 44px; color: var(--ds-copy); background: transparent; border: 0; font: 600 12px var(--ds-font-body); }
#setup .decksort option { background: var(--ds-panel); }
#setup .deckviewchoices { display: flex; padding: 3px; border: 1px solid var(--ds-line-soft); border-radius: 8px; background: var(--ds-panel); }
#setup .deckviewchoices button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--ds-muted); font: 600 12px var(--ds-font-body); cursor: pointer; }
#setup .deckviewchoices [aria-pressed="true"] { background: var(--ds-panel-raised); color: var(--ds-text); box-shadow: 0 1px 3px rgba(2, 6, 12, .6); }
/* Deck library: a paged catalog with uncropped commander cards. Keep these
   scoped overrides together while client-v3 still owns the legacy list view. */
#setup[data-setup-stage="deck"] { padding: 0 0 100px !important; }
#setup[data-setup-stage="deck"] .menuhead { max-width: 1376px; margin: 0 auto !important; padding: 18px 32px 22px !important; }
#setup[data-setup-stage="deck"] .setuphero { padding-top: 14px !important; }
#setup[data-setup-stage="deck"] .setuphero .title { font-size: clamp(30px, 3.3vw, 44px) !important; margin-bottom: 8px !important; }
#setup[data-setup-stage="deck"] .setupgrid { padding-top: 20px !important; }
#setup[data-setup-stage="deck"] .deckexplorerhead { min-height: 44px; margin-bottom: 8px; }
#setup[data-setup-stage="deck"] .deckexplorerhead .eyebrow { display: none; }
#setup[data-setup-stage="deck"] .deckexplorerhead h2 { margin: 0; font-size: 22px; }
#setup .deckdiscovery { margin: 0 0 16px; border-block: 1px solid var(--ds-line-soft); }
#setup .deckdiscovery > summary { min-height: 44px; padding: 12px 0; color: var(--ds-text); font: 600 13px/1.5 var(--ds-font-body); cursor: pointer; }
#setup .deckdiscovery > summary span { margin-left: 8px; color: var(--ds-muted); font-weight: 400; }
#setup .deckdiscovery[open] > summary { margin-bottom: 12px; }
#setup .deckdiscovery .playstylequick { margin-bottom: 12px; }
#setup .decktoolbar { position: sticky; top: 0; z-index: 8; padding: 12px 0 8px; background: var(--ds-table); border-bottom: 1px solid var(--ds-line-soft); margin-bottom: 18px; }
#setup .decktoolbar .decktools { margin: 0; grid-template-columns: minmax(180px, 1fr) auto; }
#setup .deckfiltertoggle { display: none; }
#setup .deckfilteroptions { display: grid; grid-template-columns: repeat(3, minmax(95px, 120px)) auto; gap: 8px; }
#setup .decktoolbar .deckbrowsebar { display: grid; grid-template-columns: auto 1fr auto; min-height: 44px; margin: 8px 0 0; gap: 0 16px; }
#setup .decktoolbar .deckresultcount { padding: 0; color: var(--ds-copy); font: 500 12px/1.5 var(--ds-font-body); text-transform: none; letter-spacing: 0; }
#setup .decktoolbar .deckbrowseoptions { margin-left: auto; gap: 14px; }
#setup .decktoolbar .activefilters { grid-column: 1 / -1; grid-row: 2; }
#setup .decktoolbar .activefilters:not(:empty) { margin-top: 8px; }
#setup .deckpagination { display: flex; align-items: center; justify-content: center; gap: 6px; }
#setup .deckpagination[hidden] { display: none; }
#setup .deckpagination.bottom { margin: 24px 0 12px; }
#setup .deckpagination :is(button, select) { min-height: 44px; border: 1px solid var(--ds-line); border-radius: 7px; background: var(--ds-panel); color: var(--ds-text); font: 600 12px/1.4 var(--ds-font-body); cursor: pointer; }
#setup .deckpagination button { width: 44px; font-size: 18px; }
#setup .deckpagination select { padding: 0 8px; }
#setup .deckpagination button:disabled { opacity: .35; cursor: default; }
#setup .deckpagination button:not(:disabled):hover { border-color: var(--ds-accent); color: var(--ds-accent-bright); }
#setup[data-deck-view] .decklist { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; scroll-margin-top: 152px; }
#setup[data-deck-view] .decklist.noresults { display: none !important; }
#setup[data-deck-view] .deckcard { display: flex !important; flex-direction: column; min-height: 0 !important; border-radius: 12px !important; background: var(--ds-panel) !important; }
#setup .deckcardheading { position: relative; width: 100%; min-height: 90px; padding: 14px 46px 12px 15px; display: flex; flex-direction: column; align-items: start; gap: 7px; background: var(--ds-table); }
#setup .deckvisual { position: relative; width: 100%; padding: 0 14px 16px; background: var(--ds-table); border-bottom: 1px solid var(--ds-line-soft); }
#setup .deckedition { color: var(--ds-muted); font: 500 10px/1.3 var(--ds-font-mono); letter-spacing: .04em; }
#setup .deckportraits { display: flex; align-items: center; justify-content: center; gap: 8px; height: 218px; }
#setup[data-deck-view] .deckart { position: static !important; display: block; width: auto !important; max-width: 100%; height: 100% !important; min-height: 0 !important; aspect-ratio: 5 / 7; align-self: center; flex: 0 1 auto; min-width: 0; object-fit: contain !important; object-position: center !important; border-radius: 8px !important; filter: none !important; opacity: 1; mask-image: none; transform: none !important; }
#setup[data-deck-view] .deckcard:is(:hover, .selected) .deckart { filter: none !important; transform: none !important; }
#setup .deckvisual.partners .deckart { max-width: calc(50% - 4px); }
#setup .deckcardheading .deckselectedmark { padding: 0; border: 0; color: var(--ds-accent-bright); background: transparent; font: 700 10px/1.3 var(--ds-font-body); letter-spacing: 0; text-transform: none; }
#setup .deckcard.selected .deckedition { display: none; }
#setup[data-deck-view] .deckinfo { flex: 1; gap: 7px; padding: 15px !important; width: 100%; }
#setup[data-deck-view] .deckname { padding: 0; font: 600 19px/1.2 var(--ds-font-display) !important; letter-spacing: -.025em !important; white-space: normal; overflow-wrap: anywhere; }
#setup[data-deck-view] .deckcmd { margin: 0 !important; white-space: normal; overflow: visible; }
#setup[data-deck-view] .deckcmd b { color: var(--ds-copy); font: 500 12px/1.5 var(--ds-font-body); }
#setup[data-deck-view] .deckcolors { gap: 5px !important; margin: 3px 0 0 !important; flex-wrap: wrap; }
#setup[data-deck-view] .deckmana { width: 18px !important; height: 18px !important; }
#setup[data-deck-view] .deckstyle { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ds-copy) !important; font: 500 12px/1.5 var(--ds-font-body) !important; letter-spacing: 0 !important; }
#setup[data-deck-view] .deckset { display: block !important; margin: auto 0 0 !important; padding-top: 4px !important; color: var(--ds-muted) !important; font: 400 10px/1.5 var(--ds-font-body) !important; letter-spacing: 0 !important; white-space: normal; }
#setup .deckopen { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--ds-line-soft); color: var(--ds-accent-bright); font: 600 11px/1.4 var(--ds-font-body); }
#setup[data-deck-view] .deckfavorite { top: 4px; right: 4px; width: 44px; height: 44px; font-size: 22px; background: transparent; border-color: transparent; backdrop-filter: none; }
#setup .deckfavorite[aria-pressed="true"] { color: var(--ds-accent-bright); background: var(--ds-panel-raised); }
#setup[data-deck-view] .deckcard:is(:hover, .selected) { border-color: var(--ds-accent) !important; }
#setup .decktoolbar :is(button, select, input):focus-visible,
#setup .deckpagination :is(button, select):focus-visible,
#setup .deckdiscovery > summary:focus-visible,
#setup[data-deck-view] :is(.deckcard, .deckfavorite):focus-visible { outline: 2px solid var(--ds-accent-bright) !important; outline-offset: 3px !important; }
#setup[data-deck-view="compact"] .decklist { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
#setup[data-deck-view="compact"] .deckcard { display: grid !important; grid-template-columns: 120px minmax(0, 1fr) !important; }
#setup[data-deck-view="compact"] .deckcardheading { grid-column: 2; grid-row: 1; min-height: 0; padding: 14px 42px 0 15px; background: transparent; }
#setup[data-deck-view="compact"] .deckvisual { grid-column: 1; grid-row: 1 / span 2; padding: 14px 10px; align-self: stretch; display: flex; align-items: center; border: 0; border-right: 1px solid var(--ds-line-soft); }
#setup[data-deck-view="compact"] .deckportraits { width: 100%; height: 156px; gap: 4px; }
#setup[data-deck-view="compact"] .deckinfo { grid-column: 2; grid-row: 2; padding-right: 42px !important; padding-top: 8px !important; }
#setup[data-deck-view="compact"] .deckname { font-size: 18px !important; }
#setup[data-deck-view="compact"] .deckopen { display: none; }
@media (min-width: 1440px) {
  #setup[data-deck-view="gallery"] .decklist { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 1000px) {
  #setup .decktoolbar .decktools { grid-template-columns: minmax(0, 1fr) auto; }
  #setup .deckfilteroptions { grid-template-columns: repeat(3, minmax(0, 105px)) auto; gap: 6px; }
  #setup .decktoolbar .favoritefilter { grid-column: auto; }
  #setup .decktoolbar .deckbrowsebar { column-gap: 8px; }
  #setup .decktoolbar .deckbrowseoptions { gap: 8px; }
}
@media (max-width: 700px) {
  #setup[data-setup-stage="deck"] .menuhead { padding: 12px 16px 18px !important; }
  #setup[data-setup-stage="deck"] .setupgrid { padding: 12px !important; }
  #setup[data-setup-stage="deck"] .setuphero { padding-top: 8px !important; }
  #setup[data-setup-stage="deck"] .deckexplorerhead h2 { font-size: 20px; }
  #setup .decktoolbar { padding-top: 8px; margin-bottom: 12px; }
  #setup .decktoolbar .decktools { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  #setup .decktoolbar .decksearch { grid-column: 1; grid-row: 1; }
  #setup .decktoolbar .deckfiltertoggle { display: block; grid-column: 2; grid-row: 1; min-height: 44px; padding: 0 12px; color: var(--ds-copy); background: var(--ds-panel); border: 1px solid var(--ds-line); border-radius: 8px; font: 600 12px var(--ds-font-body); cursor: pointer; }
  #setup .decktoolbar .deckfiltertoggle[aria-expanded="true"] { color: var(--ds-accent-bright); border-color: var(--ds-accent); }
  #setup .deckfilteroptions { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 0; }
  #setup .filters-open .deckfilteroptions { display: grid; }
  #setup .decktoolbar .decktools label:not(.decksearch),
  #setup .decktoolbar .favoritefilter { grid-column: auto; grid-row: auto; }
  #setup .decktoolbar .decktools select { min-width: 0; width: 100%; padding-inline: 10px; font-size: 13px; }
  #setup .decktoolbar .favoritefilter { padding-inline: 8px; font-size: 11px; }
  #setup .decktoolbar .decktools input { font-size: 16px; }
  #setup .decktoolbar .deckbrowsebar { grid-template-columns: 1fr auto; gap: 0 8px; }
  #setup .decktoolbar .deckbrowseoptions { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 4px; flex-wrap: nowrap; }
  #setup .decktoolbar .deckbrowseoptions label { gap: 4px; }
  #setup .decktoolbar .deckpagination.top { grid-column: 2; grid-row: 1; }
  #setup .decktoolbar .activefilters { grid-row: 3; }
  #setup .decktoolbar .deckresultcount { font-size: 11px; }
  #setup .deckpagination { gap: 4px; }
  #setup .deckpagination select { max-width: 106px; padding-inline: 4px; font-size: 11px; }
  #setup[data-deck-view] .decklist { scroll-margin-top: 174px; }
  #setup:has(.filters-open) .decklist { scroll-margin-top: 280px; }
  #setup .deckdiscovery > summary span { display: none; }
  #setup .deckportraits { height: 180px; gap: 5px; }
  #setup .deckvisual { padding: 0 8px 12px; }
  #setup .deckcardheading { min-height: 96px; padding: 12px 42px 12px 12px; }
  #setup .deckedition { padding-right: 27px; font-size: 9px; }
  #setup[data-deck-view] .deckinfo { padding: 12px !important; gap: 6px; }
  #setup[data-deck-view] .deckname { font-size: 17px !important; }
  #setup[data-deck-view] .deckcmd b, #setup[data-deck-view] .deckstyle { font-size: 11px !important; }
  #setup[data-deck-view] .deckmana { width: 17px !important; height: 17px !important; }
  #setup[data-deck-view="gallery"] .deckentry:has(.deckvisual.partners) { grid-column: 1 / -1; }
  #setup[data-deck-view="gallery"] .deckvisual.partners .deckportraits { height: 218px; gap: 12px; }
  #setup[data-deck-view="compact"] .deckinfo { padding-right: 42px !important; }
  #setup .deckempty { grid-template-columns: minmax(0, 1fr); padding: 22px 16px; }
  #setup .deckemptyalternatives { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
}
#setup .setupmobilebar { position: fixed; display: flex; align-items: center; z-index: 100; left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: min(580px, calc(100% - 32px)); min-height: 72px; padding: 12px 16px; gap: 20px; border: 1px solid rgba(var(--ds-accent-rgb), .4); border-radius: 14px; background: var(--ds-dialog); box-shadow: 0 14px 50px rgba(2,6,12,.75); }
#setup .setupmobilebar:has(button:disabled),
#setup[data-setup-stage="pod"] .setupmobilebar,
#setup[data-setup-stage="review"] .setupmobilebar { display: none !important; }
#setup .mobiledeck { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#setup .mobiledeck img { flex: none; width: 36px; height: 50px; object-fit: contain; border-radius: 5px; }
#setup .mobiledeck span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#setup .mobiledeck small { color: var(--ds-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
#setup .mobiledeck b { font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#setup .setupmobilebar .pbtn { flex: none; width: auto !important; min-height: 44px; margin: 0 !important; padding: 0 24px; font-size: 13px; background: linear-gradient(135deg, var(--ds-accent-bright), var(--ds-accent)); color: var(--ds-accent-ink); border-color: var(--ds-accent-bright); }
#setup .recentdecks { margin: 0 0 22px; }
#setup .recentdecks > span, #setup .savedpodshead > span { display: block; margin-bottom: 10px; color: var(--ds-muted); font-size: 12px; }
#setup .recentdecks > div { display: flex; flex-wrap: wrap; gap: 10px; }
#setup .recentdecks button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 13px 0 0; color: var(--ds-text); background: var(--ds-panel); border: 1px solid var(--ds-line-soft); border-radius: 7px; overflow: hidden; cursor: pointer; }
#setup .recentdecks img { width: 48px; height: 48px; object-fit: cover; }
#setup .recentdecks b { font-size: 12px; }
#setup .recentdecks button > span { color: var(--ds-accent); }
#setup .savedpodshelf { padding: 18px 20px; border: 1px solid var(--ds-line-soft); background: var(--ds-panel); border-radius: 12px; margin-bottom: 22px; }
#setup .savedpodshead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#setup .savedpodshead small { color: var(--ds-muted); font-size: 11px; }
#setup .savedpodlist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
#setup .savedpodrow { display: flex; align-items: stretch; border: 1px solid var(--ds-line-soft); border-radius: 8px; overflow: hidden; }
#setup .savedpodopen { display: flex; flex: 1; gap: 12px; align-items: center; min-width: 0; text-align: left; padding: 12px; background: transparent; color: var(--ds-text); border: 0; cursor: pointer; }
#setup .savedpodopen > span { color: var(--ds-accent); }
#setup .savedpodopen > div { display: grid; gap: 4px; min-width: 0; flex: 1; }
#setup .savedpodopen b { font-size: 13px; overflow-wrap: anywhere; }
#setup .savedpodopen small { color: var(--ds-muted); font-size: 11px; }
#setup .savedpodremove { width: 44px; border: 0; border-left: 1px solid var(--ds-line-soft); color: var(--ds-muted); background: transparent; font-size: 20px; cursor: pointer; }
#setup .savedpodstatus:empty, #setup .savepodstatus:empty { display: none; }
#setup .savedpodstatus, #setup .savepodstatus { font-size: 12px; color: var(--ds-accent-bright); }
#setup .podpresets { margin: 20px 0; padding: 0 0 20px; border-bottom: 1px solid var(--ds-line-soft); }
#setup .podpresets > div:first-child { display: grid; gap: 6px; }
#setup .podpresets b { font-size: 14px; }
#setup .podpresets small { font-size: 12px; color: var(--ds-muted); }
#setup .podpresetchips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 14px; }
#setup .podpresetchips button { display: grid; gap: 6px; padding: 14px 12px; text-align: left; border: 1px solid var(--ds-line); border-radius: 9px; background: var(--ds-panel-raised); color: var(--ds-text); cursor: pointer; }
#setup .podpresetchips button[aria-pressed="true"] { border-color: var(--ds-accent); background: rgba(var(--ds-accent-rgb),.08); }
#setup .podbuilder:has(.matchtypebtn.live.selected) .podpresets { display: none; }
#setup .reviewhead h2 { font-size: 32px; }
#setup .reviewhead p { font-size: 13px; }
#setup .reviewdeck { padding: 16px; margin-block: 24px; gap: 16px; }
#setup .reviewdeck b { font-size: 24px; }
#setup .reviewdeck span { font-size: 13px; }
#setup .reviewseats > div { min-height: 68px; padding: 12px; }
#setup .reviewseats b { font-size: 14px; }
#setup .reviewseats small { font-size: 12px; }
#setup .reviewstyle { max-width: 230px; }
#setup .reviewstyle b { font-size: 12px; }
#setup .reviewrules { margin-block: 24px; }
#setup .reviewrules dt, #setup .reviewrules dd { font-size: 12px; }
#setup .reviewactions { display: flex; gap: 12px; }
#setup .reviewactions .pbtn { min-height: 52px; font-size: 14px; }
#setup .reviewstart { flex: 1; }
#setup .savepodform { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ds-line-soft); }
#setup .savepodform label { display: grid; gap: 7px; font-size: 14px; color: var(--ds-text); }
#setup .savepodform small { font-size: 12px; color: var(--ds-muted); }
#setup .savepodform > div { display: flex; gap: 10px; margin-top: 14px; }
#setup .savepodform input { min-width: 0; flex: 1; min-height: 44px; padding: 10px 14px; color: var(--ds-text); background: var(--ds-table); border: 1px solid var(--ds-line); border-radius: 8px; font: 500 13px var(--ds-font-body); }
#setup .savepodform button { min-height: 44px; font-size: 12px; }
#setup .deckanalysis { display: grid; grid-template-columns: .9fr 1.3fr .7fr; align-items: center; gap: 28px; padding: 28px 36px; border-block: 1px solid var(--ds-line-soft); background: var(--ds-table); }
#setup .deckanalysis h3 { margin: 7px 0; font: 600 24px var(--ds-font-display); letter-spacing: -.02em; }
#setup .deckanalysis p { font-size: 12px; line-height: 1.6; color: var(--ds-muted); margin: 0; }
#setup .manacurve { height: 112px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
#setup .manacurvebin { display: grid; grid-template-rows: 18px 1fr 20px; gap: 7px; text-align: center; }
#setup .manacurvebin b, #setup .manacurvebin span { font: 500 11px var(--ds-font-mono); color: var(--ds-muted); }
#setup .manacurvebin i { display: block; align-self: end; height: max(2px, var(--curve-height)); max-height: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, rgba(var(--ds-accent-rgb),.45), var(--ds-accent)); }
#setup .manacurvestats { display: grid; gap: 6px; padding-left: 18px; border-left: 1px solid var(--ds-line-soft); }
#setup .manacurvestats strong { font: 500 36px var(--ds-font-mono); letter-spacing: -.06em; color: var(--ds-accent-bright); }
#setup .manacurvestats span { color: var(--ds-copy); font-size: 12px; }
#setup .manacurvestats b { color: var(--ds-muted); font-size: 11px; font-weight: 500; }
#setup .deckspotlight .deckanalysis { gap: 24px; padding: 28px 32px; }
#setup .deckspotlight .deckanalysis .eyebrow { font-size: 11px; }
#setup .deckspotlight .deckanalysis p { color: var(--ds-copy); font-size: 14px; }
#setup .deckspotlight .manacurve { height: 132px; }
#setup .deckspotlight .manacurvebin b,
#setup .deckspotlight .manacurvebin span { color: var(--ds-copy); font-size: 13px; }
#setup .deckspotlight .manacurvestats span,
#setup .deckspotlight .manacurvestats b { color: var(--ds-copy); font-size: 13px; }
#setup .returningplayer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; padding: 20px 24px; border-block: 1px solid var(--ds-line-soft); }
#setup .returningplayer > div { margin-right: auto; display: grid; gap: 5px; }
#setup .returningplayer b { font: 650 20px var(--ds-font-display); }
#setup .returningplayer span { color: var(--ds-muted); font-size: 12px; }
#setup .returningplayer button { min-height: 44px; padding: 0 14px; border: 1px solid var(--ds-line); background: var(--ds-panel); color: var(--ds-text); border-radius: 8px; font: 600 12px var(--ds-font-body); cursor: pointer; }

/* Hand sorting changes presentation only; cards keep their engine order.
   Mobile Table/Stack must still hide this tray: those grids have no hand area. */
body.game-active #game .handwrap { position: relative; display: flex; padding-top: 6px !important; gap: 10px; }
body.game-active #game .handwrap.is-empty { padding-top: 5px !important; }
body.game-active #game .handwrap::before { display: none; }
#game .handtools { order: -1; flex: 0 0 110px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
#game .handwrap > .hand { min-width: 0; flex: 1; }
#game .handtoolstitle { font: 650 11px var(--ds-font-body); color: var(--ds-copy); }
#game .handsortlabel { display: grid; gap: 5px; color: var(--ds-muted); font-size: 11px; }
#game .handsort { width: 110px; border: 1px solid var(--ds-line-soft); background: var(--ds-panel); color: var(--ds-copy); font: 600 11px var(--ds-font-body); min-height: 38px; border-radius: 5px; padding: 3px 5px; }
#game[data-hand-size="large"] { --player-hand-height: 182px; }
#game[data-hand-size="large"] .hand { height: 170px !important; min-height: 170px !important; }
#game[data-hand-size="large"] .hcard { width: 112px !important; height: 156px !important; }
#game .commandbutton kbd { font: 500 10px var(--ds-font-mono); color: var(--ds-muted); border: 1px solid var(--ds-line); border-radius: 4px; padding: 3px; }
#game .quickmenu { width: min(680px, calc(100% - 32px)); }
#game .quickmenulist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
#game .quickmenusection { grid-column: 1 / -1; margin: 15px 0 3px; color: var(--ds-accent-soft); font: 600 12px var(--ds-font-body); letter-spacing: .03em; }
#game .quickmenusection:first-child { margin-top: 0; }
#game .quickmenuitem { min-height: 67px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 6px; padding: 12px 14px; }
#game .quickmenuitem span { font-size: 13px; font-weight: 650; }
#game .quickmenuitem small { font-size: 11px; color: var(--ds-muted); line-height: 1.45; text-align: left; }
#game .shortcutguide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--ds-line-soft); }
#game .shortcutguide span { display: flex; gap: 10px; align-items: center; font-size: 12px; }
#game .shortcutguide kbd { padding: 5px 7px; border: 1px solid var(--ds-line); border-radius: 5px; color: var(--ds-accent-bright); font: 500 10px var(--ds-font-mono); }
.commandpaletteov { position: fixed; inset: 0; z-index: 16000; display: flex; align-items: flex-start; justify-content: center; padding: max(30px, calc(12 * var(--dvhu))) 16px 24px; background: rgba(var(--ds-table-rgb), .84); backdrop-filter: blur(9px); }
.commandpalette { display: flex; flex-direction: column; min-width: 0; width: 640px; max-width: 100%; max-height: calc(78 * var(--dvhu)); background: var(--ds-dialog); border: 1px solid var(--ds-line); border-radius: 16px; overflow: hidden; box-shadow: var(--ds-shadow-dialog); color: var(--ds-text); font-family: var(--ds-font-body); }
.commandpalettehead { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 14px; gap: 12px; font: 650 22px var(--ds-font-display); }
.commandpalettehead small { display: block; margin-top: 7px; font: 500 12px var(--ds-font-body); color: var(--ds-muted); }
.commandclose { flex: none; min-width: 44px; min-height: 44px; font-size: 26px; border: 1px solid var(--ds-line-soft); border-radius: 8px; background: var(--ds-panel-raised); color: var(--ds-copy); cursor: pointer; }
.commandsearch { margin: 0 22px 10px; width: calc(100% - 44px); min-height: 52px; padding: 12px 15px; font: 500 15px var(--ds-font-body); color: var(--ds-text); border: 1px solid var(--ds-line); border-radius: 9px; background: var(--ds-table); }
.commandsearch:focus { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.commandstatus { padding: 6px 24px 10px; color: var(--ds-muted); font-size: 11px; }
.commandresults { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; overscroll-behavior: contain; }
.commandresult { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; min-height: 67px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ds-text); text-align: left; cursor: pointer; }
.commandresult:is(:hover, :focus-visible, .active) { background: var(--ds-panel-raised); border-color: var(--ds-accent); outline: 0; }
.commandresult img, .commandresulticon { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 7px; }
.commandresulticon { display: grid; place-items: center; background: rgba(var(--ds-accent-rgb), .08); color: var(--ds-accent-bright); font-size: 22px; }
.commandresultcopy { display: grid; gap: 6px; flex: 1; min-width: 0; }
.commandresultcopy b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.commandresultcopy small { font-size: 11px; color: var(--ds-muted); }
.commandresultgo { color: var(--ds-muted); }
.commandfooter { padding: 14px 24px; border-top: 1px solid var(--ds-line-soft); color: var(--ds-muted); font: 500 11px var(--ds-font-mono); }
.commandempty { padding: 24px; font-size: 13px; color: var(--ds-copy); }

@media (max-width: 1000px) {
  #setup .setupgrid { padding: 20px !important; }
  #setup[data-deck-view="gallery"] .decklist { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  #setup .decktools { grid-template-columns: minmax(160px,1fr) repeat(3, 100px); }
  #setup .favoritefilter { grid-column: 1 / -1; }
  #setup .deckanalysis { gap: 20px; padding: 24px; grid-template-columns: 1fr 1.3fr; }
  #setup .manacurvestats { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
  #setup .manacurvestats strong { font-size: 26px; }
}
@media (max-width: 700px) {
  #setup[data-app-view="setup"] .menuhead { padding: 18px 18px 22px; }
  #setup:is([data-setup-stage="pod"], [data-setup-stage="review"]) { padding-inline: 0 !important; }
  #setup:is([data-setup-stage="pod"], [data-setup-stage="review"]) .menuhead { margin-inline: 0 !important; padding-inline: 16px !important; }
  #setup .setuphero { padding-top: 24px; }
  #setup .setuphero .title { font-size: 34px; }
  #setup .setuphero .subtitle { font-size: 13px; }
  #setup .setupgrid { padding: 16px !important; }
  #setup .deckexplorerhead { gap: 10px; }
  #setup .deckexplorerhead h2 { font-size: 24px; }
  #setup .deckexploreractions { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  #setup .deckresultcount { font-size: 10px; }
  #setup .surprisedeck { padding-inline: 11px; font-size: 12px; }
  #setup .playstylequick { padding: 14px; }
  #setup .playstylequickhead small { line-height: 1.5; }
  #setup .decktools { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #setup .decksearch { grid-column: 1 / -1; }
  #setup .favoritefilter { grid-column: 1 / -1; }
  #setup .deckbrowsebar { align-items: flex-start; flex-direction: column; gap: 8px; }
  #setup .deckbrowseoptions { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  #setup .deckviewchoices button { min-height: 44px; }
  #setup .deckviewchoices { margin-left: auto; }
  #setup .filterchip { min-height: 44px; }
  #setup[data-deck-view="gallery"] .decklist { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  #setup[data-deck-view="compact"] .decklist { grid-template-columns: minmax(0,1fr) !important; }
  #setup .setupright.mobile-open { padding: 20px !important; }
  #setup[data-setup-stage="pod"] .setupgrid { padding: 16px 12px !important; }
  #setup[data-setup-stage="pod"] .setupright.mobile-open { padding: 16px !important; border-radius: 12px; }
  #setup[data-setup-stage="pod"] .controlintro { display: none; }
  #setup .matchtypebtn small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
  #setup .botrow { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
  #setup .botfields { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr; gap: 9px; }
  #setup .botconfig { padding: 12px; }
  #setup .styledesc { margin-left: 0 !important; }
  #setup .savedpodlist { grid-template-columns: 1fr; }
  #setup .savedpodshead { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 12px; }
  #setup .podpresetchips { grid-template-columns: 1fr; }
  #setup .podpresetchips button { min-height: 62px; }
  #setup .reviewactions { flex-direction: column-reverse; }
  #setup .reviewdeck b { font-size: 20px; }
  #setup .reviewseats small { white-space: normal; }
  #setup .deckanalysis { grid-template-columns: minmax(0,1fr); padding: 24px 18px; }
  #setup .deckspotlight .deckanalysis { padding: 24px 20px; }
  #setup .manacurvestats { flex-wrap: wrap; }
  #setup .savepodform > div { flex-direction: column; }
  #setup .savepodform input { font-size: 16px; }
  #setup .returningplayer { padding: 18px 0; }
  #setup .returningplayer > div { width: 100%; }
  #game .commandbutton kbd { display: none; }
  #game .quickmenulist { grid-template-columns: 1fr; }
  #game .quickmenu { width: 100%; }
  #game .shortcutguide { grid-template-columns: 1fr; }
  body.game-active #game .handwrap { padding-top: 7px !important; gap: 6px; }
  #game .handtools { flex-basis: 87px; gap: 8px; }
  #game .handtoolstitle { font-size: 10px; }
  #game .handsort { min-height: 44px; width: 87px; font-size: 10px; }
  #game .handsortlabel > span { display: none; }
  #game[data-hand-size="large"] { --player-hand-height: 160px; }
  #game[data-hand-size="large"] .hand { min-height: 140px !important; height: 140px !important; }
  #game[data-hand-size="large"] .hcard { width: 90px !important; height: 126px !important; }
  .commandpaletteov { padding: 16px 10px; }
  .commandpalette { max-height: calc(100 * var(--dvhu) - 32px); }
  .commandpalettehead { padding: 16px; font-size: 20px; }
  .commandsearch { margin-inline: 16px; width: calc(100% - 32px); font-size: 16px; }
  .commandfooter { font-size: 9px; padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .commandpaletteov *, #setup .deckcard { animation: none !important; transition: none !important; }
}
@media (min-width: 1280px) {
  body.game-active #game { grid-template-rows: 58px 24px minmax(150px,.65fr) auto minmax(166px,1fr) auto var(--player-hand-height,132px) !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  body.game-active #game { grid-template-rows: 58px 24px minmax(145px,.75fr) auto minmax(170px,1fr) auto var(--player-hand-height,130px) !important; }
}
@media (max-width: 767px) {
  body.game-active #game[data-mobile-view="mine"] { grid-template-rows: 76px 48px 108px minmax(158px,1fr) auto var(--player-hand-height,130px) !important; }
}

/* Arena atmosphere is a presentation preference; panels retain their readable surfaces. */
[data-arena-background="table"] { --arena-art: url('../assets/backgrounds/commander-arena-table.jpg'); }
[data-arena-background="war-room"] { --arena-art: url('../assets/backgrounds/commander-war-room.webp'); }
[data-arena-background="moonlit-grove"] { --arena-art: url('../assets/backgrounds/moonlit-grove.svg'); }
[data-arena-background="molten-forge"] { --arena-art: url('../assets/backgrounds/molten-forge.svg'); }
[data-arena-background="astral-sanctum"] { --arena-art: url('../assets/backgrounds/astral-sanctum.svg'); }
[data-arena-background="white"] { --arena-art: radial-gradient(ellipse at 68% 22%, #b1a174, transparent 62%), radial-gradient(ellipse at 14% 88%, #777367, transparent 65%), linear-gradient(140deg, #4a4940, #292f34); }
[data-arena-background="blue"] { --arena-art: radial-gradient(ellipse at 72% 15%, #2e718d, transparent 65%), radial-gradient(ellipse at 20% 92%, #173f68, transparent 65%), linear-gradient(130deg, #122936, #101c35); }
[data-arena-background="black"] { --arena-art: radial-gradient(ellipse at 70% 16%, #61526e, transparent 65%), radial-gradient(ellipse at 10% 85%, #3b284c, transparent 65%), linear-gradient(140deg, #22242c, #11121c); }
[data-arena-background="red"] { --arena-art: radial-gradient(ellipse at 72% 18%, #a24f37, transparent 65%), radial-gradient(ellipse at 15% 90%, #632b2f, transparent 65%), linear-gradient(130deg, #3b2529, #221a26); }
[data-arena-background="green"] { --arena-art: radial-gradient(ellipse at 68% 20%, #47795b, transparent 65%), radial-gradient(ellipse at 14% 85%, #294e47, transparent 65%), linear-gradient(140deg, #203c35, #102a2b); }
[data-arena-background="colorless"] { --arena-art: radial-gradient(ellipse at 70% 17%, #6e818b, transparent 65%), radial-gradient(ellipse at 14% 87%, #3f5064, transparent 65%), linear-gradient(140deg, #293540, #17212c); }
body.game-active #game[data-arena-background] {
  background-image: linear-gradient(rgba(var(--ds-table-rgb), var(--arena-shade, .3)), rgba(var(--ds-table-rgb), var(--arena-shade, .3))), var(--arena-art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: var(--ds-table) !important;
}
#game .arenabackgroundpicker { width: min(720px, 100%); max-height: calc(100 * var(--dvhu) - 36px); display: flex; flex-direction: column; overflow: hidden; }
#game .arenabackgroundpicker .quickmenuhead { flex: none; padding: 20px 24px; }
#game .arenabackgroundpicker .quickmenuhead h2 { font-size: 28px; }
#game .arenabackgroundbody { overflow: auto; min-height: 0; padding: 20px 24px 16px; scrollbar-width: thin; }
#game .arenabackgroundpreview { position: relative; height: 180px; border-radius: var(--ds-r-md); overflow: hidden; background-image: linear-gradient(rgba(var(--ds-table-rgb), var(--arena-shade, .3)), rgba(var(--ds-table-rgb), var(--arena-shade, .3))), var(--arena-art); background-size: cover; background-position: center; }
#game .arenabackgroundcaption { position: absolute; inset: auto 0 0; padding: 32px 18px 16px; display: grid; gap: 4px; background: linear-gradient(transparent, rgba(var(--ds-table-rgb), .92)); }
#game .arenabackgroundcaption b { color: var(--ds-text); font: 600 22px/1.2 var(--ds-font-display); }
#game .arenabackgroundcaption span { color: var(--ds-copy); font: 12px/1.5 var(--ds-font-body); }
#game .arenabackgroundsection { margin-top: 20px; }
#game .arenabackgroundsection h3 { margin: 0 0 10px; color: var(--ds-copy); font: 600 12px/1.4 var(--ds-font-body); }
#game .arenabackgroundgrid { display: grid; gap: 10px; }
#game .arenabackgroundgrid.colors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#game .arenabackgroundgrid.scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#game .arenabackgroundchoice { position: relative; min-width: 0; min-height: 76px; padding: 0; overflow: hidden; color: var(--ds-copy); border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r-sm); background: var(--ds-panel); cursor: pointer; text-align: left; }
#game .arenabackgroundchoice:hover { border-color: var(--ds-copy); }
#game .arenabackgroundchoice[aria-pressed="true"] { border-color: var(--ds-accent-bright); box-shadow: 0 0 0 1px var(--ds-accent-bright); color: var(--ds-text); }
#game .arenabackgroundart { display: grid; place-items: center; height: 58px; background-image: var(--arena-art); background-position: center; background-size: cover; }
#game .scenes .arenabackgroundart { height: 72px; }
#game .arenabackgroundart img { width: 25px; height: 25px; filter: drop-shadow(0 2px 4px rgba(var(--ds-table-rgb), .3)); }
#game .arenabackgroundlabel { display: block; padding: 8px 9px; font: 600 11px/1.4 var(--ds-font-body); }
#game .colors .arenabackgroundlabel { text-align: center; padding-inline: 3px; }
#game .arenabackgroundcheck { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--ds-accent-bright); color: var(--ds-accent-ink); font-size: 12px; font-weight: 800; }
#game .arenabackgroundchoice[aria-pressed="true"] .arenabackgroundcheck { display: grid; }
#game .arenabackgrounddimmer { margin-top: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; font: 600 12px/1.5 var(--ds-font-body); color: var(--ds-copy); }
#game .arenabackgrounddimmer output { color: var(--ds-text); font-family: var(--ds-font-mono); }
#game .arenabackgrounddimmer input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: var(--ds-accent-bright); cursor: pointer; }
#game .arenabackgroundstatus { min-height: 18px; color: var(--ds-muted); font: 11px/1.6 var(--ds-font-body); }
#game .arenabackgroundfooter { display: flex; justify-content: space-between; gap: 12px; flex: none; padding: 14px 24px; border-top: 1px solid var(--ds-line-soft); background: var(--ds-dialog); }
#game .arenabackgroundfooter .pbtn { min-height: 44px; min-width: 104px; font-size: 12px; }
@media (max-width: 767px) {
  #game .arenabackgroundov { padding: 10px; }
  #game .arenabackgroundpicker { max-height: calc(100 * var(--dvhu) - 20px); }
  #game .arenabackgroundpicker .quickmenuhead { padding: 16px; }
  #game .arenabackgroundpicker .quickmenuhead h2 { font-size: 24px; }
  #game .arenabackgroundbody { padding: 14px 16px; }
  #game .arenabackgroundpreview { height: 140px; }
  #game .arenabackgroundgrid { gap: 8px; }
  #game .arenabackgroundgrid.colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game .arenabackgroundgrid.scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game .arenabackgroundfooter { padding: 12px 16px; }
}

/* Clash reveals both known cards together and keeps their values in view. */
.revealclash .stackpopitem { display: flex; align-items: center; gap: 14px; }
.revealclash .stackpopitem > img { width: 64px; height: 89px; flex: 0 0 64px; object-fit: cover; }
.revealclash .stackpopsub { display: block; margin-top: 6px; color: #e4bc8c; }
.clashresult { padding: 10px 12px; color: #f1c292; font-size: 12px; line-height: 1.5; text-align: center; }
.clashdecisioncards .decisioncardgrid { grid-template-columns: repeat(2, minmax(0, 170px)); gap: 8px; }
.clashchoicecard { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.clashcardvalue { color: #e4bc8c; font-size: 11px; line-height: 1.4; text-align: center; }

/* An unprinted token is a readable characteristics card, not a card back.
   Mana colors tint the material; the name/type remain explicit at every size. */
.tokenface {
  display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center;
  position: relative; box-sizing: border-box; width: 40px; height: 56px; padding: 5px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--token-start) 60%, var(--ds-text)); border-radius: 6px;
  color: var(--ds-table); text-align: center; font-family: var(--ds-font-body);
  background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--token-start) 24%, var(--ds-text)), transparent 75%),
    linear-gradient(145deg, color-mix(in srgb, var(--token-start) 62%, var(--ds-text)), color-mix(in srgb, var(--token-end) 78%, var(--ds-text)));
}
.tokenface[hidden], img[data-token-art][hidden] { display: none !important; }
.tokenface > :not(.tokenface-mark) { display: none; }
.tokenface .tokenface-mark { display: grid; place-items: center; flex: none; }
.tokenface-mark .gameicon { width: 24px; height: 24px; }
.tokenface-label { font: 800 9px/1.3 var(--ds-font-body); letter-spacing: .08em; text-transform: uppercase; }
.tokenface-name { font: 800 17px/1.15 var(--ds-font-display); overflow-wrap: anywhere; }
.tokenface-type { font: 800 13px/1.2 var(--ds-font-display); overflow-wrap: anywhere; }
.tokenface-rules { white-space: pre-line; font: 600 12px/1.4 var(--ds-font-body); overflow-wrap: anywhere; }
.tokenface-stats { font: 800 24px/1.2 var(--ds-font-mono); }

.mini > .tokenface, .bigcard > .tokenface {
  position: absolute; inset: 2px; width: auto; height: auto; padding: 10px 5px 40px; gap: 8px;
}
.mini > .tokenface > .tokenface-label, .mini > .tokenface > .tokenface-type { display: block; }
.mini > .tokenface .tokenface-mark {
  width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%;
  background: color-mix(in srgb, var(--ds-text) 30%, transparent);
}
.mini:has(> .tokenface:not([hidden])) > .toktag { display: none; }
.mini:has(> .tokenface:not([hidden])) > .mname { white-space: normal; overflow-wrap: anywhere; }
.mini.sm > .tokenface { padding-top: 6px; gap: 5px; }
.mini.sm > .tokenface .tokenface-mark { width: 32px; height: 32px; }
.mini.sm > .tokenface .tokenface-label { font-size: 8px; letter-spacing: 0; }

.sheet > .tokenface.sheetimg {
  display: flex; width: min(62 * var(--vwu), 250px); height: auto; min-height: 250px;
  aspect-ratio: 5 / 7; padding: 14px; gap: 8px; align-self: center;
}
.sheet > .tokenface > span, .sheet > .tokenface > strong,
.bigcard > .tokenface > .tokenface-name, .bigcard > .tokenface > .tokenface-type,
.bigcard > .tokenface > .tokenface-stats { display: block; }
.sheet > .tokenface .tokenface-mark { display: grid; width: 52px; height: 52px; border: 1px solid currentColor; border-radius: 50%; }
.sheet > .tokenface .tokenface-mark .gameicon { width: 38px; height: 38px; }
.sheet > .tokenface .tokenface-stats { margin-top: auto; padding-top: 6px; }
.sheet > .tokenface .tokenface-rules { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tokenface .tokenface-stats:empty, .tokenface .tokenface-rules:empty { display: none; }
.bigcard > .tokenface { gap: 6px; }
.bigcard > .tokenface .tokenface-name { font-size: 13px; }
.bigcard > .tokenface .tokenface-type { font-size: 12px; }
.bigcard > .tokenface .tokenface-stats { font-size: 18px; }
.combatunit > .tokenface { width: 32px; height: 45px; }
.attackassignedchip > .tokenface { width: 31px; height: 42px; }
.blocklane > .tokenface { width: 74px; height: 104px; }
.blockcand > .tokenface { width: 52px; height: 73px; }
.attackpoolcard > .tokenface { width: 52px; height: 70px; }
.stackflowsource > .tokenface { width: 38px; height: 53px; }
.stackflowtarget > .tokenface { width: 34px; height: 47px; }
.stacktargetflow.compact .stackflowtarget > .tokenface { width: 23px; height: 31px; padding: 2px; }
.stacktargetflow.compact .tokenface-mark .gameicon { width: 16px; height: 16px; }
.stackpopitem > .tokenface, .stackpopmain > .tokenface { width: 34px; height: 46px; }
.gamefx-flightcard > .tokenface { width: 100%; height: 100%; }
.commandresult > .tokenface { width: 44px; height: 44px; }
.choiceoptionthumb > .tokenface, .actionstageart > .tokenface { width: 100%; height: 100%; }
.actionstageart > .tokenface { aspect-ratio: 5 / 7; }
.combatreviewcard > .tokenface { width: 54px; height: 75px; }
.effectreviewhero > .tokenface { width: 84px; height: 112px; }
.damageallocationhero > .tokenface { width: 58px; height: 58px; }
.battlefieldarrival > .tokenface { width: 86px; height: 96px; z-index: 1; }
@media (max-width: 900px), (max-height: 760px) {
  #game .mini > .tokenface { padding: 6px 4px 46px; gap: 3px; }
  #game .mini > .tokenface .tokenface-mark { width: 28px; height: 28px; }
  #game .mini > .tokenface .tokenface-label { font-size: 8px; }
  #game .mini > .tokenface .tokenface-colors { display: none; }
}
@media (max-height: 720px) {
  #game .mini > .tokenface { padding-bottom: 52px; }
  #game .mini > .tokenface .tokenface-label, #game .mini.sm > .tokenface .tokenface-type { display: none; }
  #game .mini > .tokenface .tokenface-mark { width: 24px; height: 24px; }
}
@media (max-width: 600px) {
  #game .sheet > .tokenface.sheetimg { width: 150px; min-height: 210px; max-height: none; padding: 12px; gap: 8px; }
  .sheet > .tokenface .tokenface-name { font-size: 15px; }
  .sheet > .tokenface .tokenface-mark { width: 44px; height: 44px; }
  .sheet > .tokenface .tokenface-mark .gameicon { width: 28px; height: 28px; }
  .sheet > .tokenface .tokenface-rules { display: none; }
}
#game :is(.manaartifactstrip, .oppresourcecards) .mini > .tokenface { padding: 4px 3px 30px; gap: 0; }
#game :is(.manaartifactstrip, .oppresourcecards) .mini > .tokenface > :not(.tokenface-mark) { display: none; }
#game :is(.manaartifactstrip, .oppresourcecards) .mini > .tokenface .tokenface-mark { width: 24px; height: 24px; border: 0; }
/* Dungeon reference and decisions share the same readable room maps. */
.deckspotlightdungeons { padding: 30px; border-top: 1px solid #344346; }
.deckspotlightdungeons > h3 { margin: 6px 0 10px; font-size: 26px; }
.deckspotlightdungeons > p { color: #c2ccc5; line-height: 1.65; }
.dungeondeckcards { font-size: 12px; }
.dungeonexplorer { --dungeon-gold: #ecc783; --dungeon-green: #8bcead; color: #e4eade; min-width: 0; container-type: inline-size; font-family: var(--ds-font-sans, sans-serif); text-align: left; }
.dungeontabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin: 12px 0 18px; }
.dungeontabs button { background: #18292c; color: #ccd7cd; border: 1px solid #49605d; border-radius: 8px; padding: 12px; text-align: left; cursor: pointer; min-height: 68px; }
.dungeontabs button[aria-pressed="true"] { background: #3a3529; border-color: var(--dungeon-gold); color: #ffdfa4; }
.dungeontabs b, .dungeontabs small { display: block; }
.dungeontabs b { font-size: 13px; line-height: 1.35; }
.dungeontabs small { margin-top: 6px; color: #bcc7be; font-size: 11px; }
.dungeonintro h3 { margin: 5px 0 8px; color: #f5e3be; font-size: 24px; line-height: 1.2; }
.dungeonintro small, .dungeonpanelhead small, .dungeonconfirm small { color: #cbb78d; font-size: 10px; letter-spacing: .12em; }
.dungeonintro p, .dungeonposition { line-height: 1.6; font-size: 13px; margin: 8px 0 14px; }
.dungeonintro p { color: #becdc5; }
.dungeonposition { padding: 12px 14px; border-left: 3px solid var(--dungeon-gold); background: #203033; }
.dungeonlegend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11px; }
.dungeonlegend .current { color: var(--dungeon-gold); }
.dungeonlegend .visited { color: #b0c8a1; }
.dungeonlegend .next { color: var(--dungeon-green); }
.dungeonmaphint { font-size: 11px; line-height: 1.5; color: #b2c1bb; margin: 10px 0; }
.dungeonmapscroll { max-width: 100%; overflow-x: auto; overscroll-behavior: contain; scrollbar-color: #72907f #152327; border-radius: 10px; background: #101e23; border: 1px solid #334b4c; }
.dungeonmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 12px; min-width: 0; padding: 14px; position: relative; isolation: isolate; }
.dungeonarrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.dungeonarrows path { fill: none; stroke: #698480; stroke-width: 1.8; stroke-linejoin: round; }
.dungeonarrows .visited path { stroke: #b0c8a1; stroke-width: 3; }
.dungeonarrows .next path { stroke: #9be6c1; stroke-width: 3; }
.dungeonroom { padding: 10px 12px; min-width: 0; min-height: 80px; box-sizing: border-box; border: 1px solid #536769; border-radius: 8px; background: #203137; color: #e0e7df; text-align: left; display: flex; flex-direction: column; justify-content: center; font-family: inherit; overflow-wrap: anywhere; }
.dungeonroom > small { display: block; color: #bac9c3; font-size: 9px; letter-spacing: .08em; margin-bottom: 5px; }
.dungeonroom > b { display: block; font-size: 14px; line-height: 1.35; color: #f1e7ce; }
.dungeonroom > p { font-size: 12px; line-height: 1.6; margin: 7px 0 10px; }
.dungeonroom > em { display: block; color: #b1c2b8; font-size: 10px; font-style: normal; line-height: 1.5; }
.dungeonroom.current { background: #413829; border: 2px solid var(--dungeon-gold); }
.dungeonroom.current > small { color: #ffe0a8; font-weight: 700; }
.dungeonroom.visited { background: #283d33; border-color: #9db68e; }
.dungeonroom.next { border: 2px dashed var(--dungeon-green); background: #20413b; }
button.dungeonroom { cursor: pointer; }
button.dungeonroom:hover { background: #2f5346; }
.dungeonroom.selected { outline: 3px solid #dfd39e; outline-offset: 3px; }
.dungeonexplorer button:focus-visible, .dungeonmapscroll:focus-visible, .dungeonrules summary:focus-visible, .dungeonbadge:focus-visible { outline: 3px solid #ffdda3; outline-offset: 3px; }
.dungeonconfirm { position: sticky; bottom: -1px; z-index: 2; background: #233934; border: 1px solid #92b69b; border-radius: 8px; padding: 12px 15px; margin-top: 16px; display: flex; gap: 18px; align-items: center; justify-content: space-between; box-shadow: 0 -4px 18px #0005; }
.dungeonconfirm b { display: block; font-size: 14px; margin-top: 4px; }
.dungeonconfirm p { font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.dungeonconfirm > div { min-width: 0; overflow-wrap: anywhere; }
.dungeonconfirm .pbtn { flex-shrink: 0; max-width: 48%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
#game.command-table .dungeonconfirm .pbtn { min-height: 44px; }
.dungeonrules { border-top: 1px solid #48615c; margin-top: 18px; padding-top: 14px; font-size: 12px; line-height: 1.7; color: #c2cfc5; }
.dungeonrules summary { color: #ead5ae; font-weight: 700; cursor: pointer; padding: 4px 0; }
.dungeonrules ol { padding-left: 22px; }
.dungeonrules li { margin: 10px 0; }
.dungeonrules a { color: #b9ddcb; text-decoration: underline; }
/* Viewport units must compensate for the application's desktop CSS zoom. */
.overlay .modal.dungeonmodal { width: 1100px; max-width: calc(100 * var(--vwu) - 32px); max-height: calc(100 * var(--dvhu) - 32px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: #142529; scroll-padding-block: 16px 120px; }
.dungeonmodal .dungeontabs:has(> button:only-child) { display: none; }
.dungeonmodal .dungeonintro > div > small { display: none; }
.dungeonpanelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dungeonpanelhead h2 { font-size: 23px; color: #f5e3be; margin: 4px 0; }
.dungeonpanelhead > div { min-width: 0; }
.dungeonpanelhead .pbtn { flex-shrink: 0; }
.overlay.dungeonoverlay { z-index: 2200; }
.dungeonbadge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #947a51; border-radius: 6px; background: #302f25; color: #f4d7a0; padding: 6px 9px; cursor: pointer; max-width: 185px; font: 600 11px/1.4 var(--ds-font-sans, sans-serif); }
.dungeonbadge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#game.command-table .opphead > .dungeonbadge { grid-column: 2 / -1; justify-self: start; }
#game.command-table .meinfo > .dungeonbadge { flex-shrink: 1; min-width: 0; }
@media (max-width: 600px) {
  .deckspotlightdungeons { padding: 20px 14px; }
  .overlay .modal.dungeonmodal { padding: 12px; max-width: calc(100 * var(--vwu) - 12px); max-height: calc(100 * var(--dvhu) - 12px); }
  .dungeonbadge { max-width: 135px; padding: 5px 7px; font-size: 10px; }
}
/* Respond to the map's actual space, including deck guides and browser zoom. */
@container (max-width: 600px) {
  .dungeontabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 14px; }
  .dungeontabs button { padding: 9px; min-width: 0; }
  .dungeonintro h3 { font-size: 21px; }
  .dungeonintro p, .dungeonposition { line-height: 1.5; margin-block: 8px 10px; }
  .dungeonposition { padding: 9px 10px; }
  .dungeonmap { gap: 24px 8px; padding: 10px; }
  .dungeonroom { padding: 9px 7px; }
  .dungeonroom > b { font-size: 13px; }
  .dungeonroom > p { line-height: 1.45; margin: 6px 0; }
  .dungeonroom > small { letter-spacing: 0; }
  .dungeonconfirm { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .dungeonconfirm > div > p { display: none; }
  .dungeonconfirm .pbtn { max-width: 100%; width: 100%; min-height: 44px; }
}
@container (max-width: 360px) {
  .dungeonmap { gap: 22px 6px; padding: 8px; }
  .dungeonroom { padding: 8px 5px; }
  .dungeonroom > em { display: none; }
  .dungeonlegend { gap: 6px 12px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .overlay .modal.dungeonmodal { max-height: calc(100 * var(--dvhu) - 12px); padding: 12px; }
  .dungeonmodal .dungeonconfirm { padding: 8px 12px; gap: 8px; flex-direction: row; align-items: center; }
  .dungeonmodal .dungeonconfirm p { display: none; }
  .dungeonmodal .dungeonconfirm .pbtn { width: auto; max-width: 50%; }
}