/* CUSTOM GAME: one full-screen deployment (index.html #setup, js/main.js showSetup).
   Grid: head across the top; operator tiles on the left; the centre column is empty so the live 3D operator
   (space stage, Atlantis backdrop) shows through; operator viewer and settings on the right; mode cards and the
   map strip along the bottom. Every block is a UI row (js/ui.js): up/down moves between rows, left/right changes. */

#setup.fs-setup { padding: 14px 22px 46px; gap: 10px 20px; overflow: hidden; background: none;
  grid-template-columns: 236px minmax(0, 1fr) minmax(300px, 35vw);
  grid-template-rows: auto minmax(0, 1.48fr) minmax(0, .85fr) auto auto auto;
  grid-template-areas: "head head head" "ops stage view" "ops stage set" "modes modes modes" "cap cap cap" "maps maps maps"; }
#setup.fs-setup.active { display: grid; }

/* head: padded past the global BACK button (top-left) */
#setup .su-head { grid-area: head; display: flex; align-items: center; gap: 14px; min-width: 0; padding-left: 124px; }
#setup .su-head .idx { font: 400 11px var(--f-mono); letter-spacing: .14em; color: #000; background: var(--champ, #ffe2a8); padding: 3px 10px; border-radius: 99px; }
#setup .su-head h2 { font: 700 20px var(--f-disp); letter-spacing: .28em; color: #fff; white-space: nowrap; }
#setup .su-head .sub { font: 400 12.5px var(--f-hud); color: var(--dim, #9c9ca8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#setup .su-head .btn { margin-left: auto; flex: 0 0 auto; }

/* operators: tiles fill the left column, the selected one is lit in its own colour */
#setup #waifuCards { grid-area: ops; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#setup .op-tile { position: relative; flex: 0 0 78px; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; overflow: hidden; text-align: left; color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: linear-gradient(108deg, color-mix(in srgb, var(--c) 24%, #080a10) 0%, color-mix(in srgb, var(--c) 8%, #06070c) 52%, rgba(5, 6, 10, .92) 100%);
  transition: transform .35s var(--spring, ease), border-color .25s, box-shadow .3s, opacity .25s; }
/* coloured spine: the tile's identity without washing the whole card out when the operator's colour is near-white */
#setup .op-tile::after { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--c) 88%, #fff); opacity: .5; pointer-events: none; }
#setup .op-tile.sel::after { opacity: 1; box-shadow: 0 0 12px var(--c); }
/* Portrait and metadata use separate tracks; full-body art is reserved for the larger character preview. */
#setup .op-tile .op-portrait { position: relative; z-index: 1; flex: 0 0 54px; width: 54px; height: 54px; }
#setup .op-tile .op-ico, #setup .op-tile .op-fallback { position: absolute; inset: 0; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center; }
#setup .op-tile .op-ico { background: rgba(5, 6, 10, .55); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .8); pointer-events: none; }
#setup .op-tile .op-fallback { display: none; place-items: center; font: 700 22px var(--f-disp); color: #fff; background: color-mix(in srgb, var(--c) 36%, #10131b); border: 1px solid rgba(255, 255, 255, .22); }
#setup .op-tile .op-fallback.show { display: grid; }
#setup .op-tile .op-meta { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; padding-right: 0; }
#setup .op-tile b { font: 700 14px var(--f-disp); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#setup .op-tile small { font: 500 10px var(--f-mono); letter-spacing: .16em; color: color-mix(in srgb, var(--c) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#setup .op-tile em { position: absolute; left: 78px; bottom: 7px; z-index: 2; font: 600 8.5px var(--f-mono); font-style: normal; letter-spacing: .12em; color: #ffd98a; }
#setup .op-tile.locked { opacity: .5; }
#setup .op-tile.sel { border-color: color-mix(in srgb, var(--c) 85%, #fff); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .15); transform: translateX(6px); }
#setup #waifuCards.focus .op-tile.sel { outline: 2px solid #fff; outline-offset: -3px; }

/* operator viewer: the big read on the selected operator (the 3D render is the centre column) */
#setup #opView { grid-area: view; min-height: 0; overflow: hidden auto; scrollbar-width: none; display: grid; align-content: start; gap: 4px; padding: 14px 18px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, color-mix(in srgb, var(--c, #888) 24%, rgba(8, 9, 14, .8)), rgba(6, 7, 11, .82) 62%); backdrop-filter: blur(14px); }
#setup #opView .ov-role { font: 500 11px var(--f-mono); letter-spacing: .34em; color: var(--c, #fff); }
#setup #opView .ov-name { font: 700 clamp(26px, 2.8vw, 42px)/1 var(--f-disp); letter-spacing: .08em; color: var(--c, #fff); text-shadow: 0 0 34px color-mix(in srgb, var(--c, #fff) 55%, transparent), 0 6px 22px rgba(0, 0, 0, .6); }
#setup #opView .ov-blurb { font: 400 12.5px/1.35 var(--f-hud); color: #dcdce6; max-width: 60ch; }
#setup #opView .ov-ab { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; min-height: 0; }
#setup #opView .ov-card { display: grid; align-content: start; gap: 4px; min-height: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .34); }
#setup #opView .ov-card .ov-ic { width: 20px; height: 20px; color: var(--c, #fff); }
#setup #opView .ov-card em { font: 500 9.5px var(--f-mono); font-style: normal; letter-spacing: .26em; color: var(--c, #fff); }
#setup #opView .ov-card b { font: 700 13px var(--f-disp); letter-spacing: .08em; color: #fff; }
#setup #opView .ov-card i { font: 500 10px var(--f-mono); font-style: normal; letter-spacing: .14em; color: #ffd98a; }
#setup #opView .ov-card.soon i { color: var(--dim, #9c9ca8); }
#setup #opView .ov-card p { font: 400 11px/1.4 var(--f-hud); color: #c9c9d4; }
#setup #opView .ov-lock { font: 600 11px var(--f-mono); letter-spacing: .2em; color: #ffd98a; }

/* settings: compact cards in a two-column grid, each a UI.choice row */
#setup #setupOpts { grid-area: set; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; scrollbar-width: none; }
#setup #setupOpts .opt { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: center; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 9, 14, .6); clip-path: none; }
#setup #setupOpts .opt .lbl { font: 500 10px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim, #9c9ca8); }
#setup #setupOpts .opt .val { min-width: 0; justify-content: space-between; }
#setup #setupOpts .opt .txt { font: 700 15px var(--f-disp); letter-spacing: .08em; color: #fff; }
#setup #setupOpts .opt .val button { width: 26px; height: 26px; }
#setup #setupOpts .opt.focus, #setup #setupOpts .opt:hover { background: rgba(255, 226, 168, .09); border-color: var(--champ, #ffe2a8); box-shadow: none; transform: none; }
#setup #setupOpts .opt.focus .lbl, #setup #setupOpts .opt:hover .lbl { color: #ffe2a8; }
#setup #setupOpts .opt.focus .txt, #setup #setupOpts .opt:hover .txt { color: #ffe2a8; }
#setup #setupOpts .opt .join-input { min-width: 0; }

/* mode cards: seven across, each with its sigil, short name, title and one-line rule. A fixed six-column grid
   wrapped the seventh mode into a clipped second row, so ORB HOLD and every rule line were cut off. */
#setup #modeCards { grid-area: modes; height: auto; min-height: 108px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
#setup .mode-card { position: relative; min-width: 0; min-height: 104px; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 6px 9px; padding: 10px 11px 9px; text-align: left; color: #fff; cursor: pointer; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, color-mix(in srgb, var(--mc, #ffe2a8) 10%, rgba(10, 11, 16, .8)), rgba(9, 10, 15, .9));
  transition: border-color .25s, background .25s, transform .3s var(--spring, ease), box-shadow .3s; }
#setup .mode-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--mc, #ffe2a8); opacity: .55; }
/* the sigil sits in its own lit chip: a 26 px glyph on a dark glass square reads at a glance where a bare line did not */
#setup .mode-card .mc-sig { grid-row: 1; grid-column: 1; align-self: center; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mc, #ffe2a8) 26%, rgba(6, 8, 12, .9)), rgba(6, 8, 12, .92) 74%);
  border: 1px solid color-mix(in srgb, var(--mc, #ffe2a8) 46%, transparent); box-shadow: inset 0 0 12px color-mix(in srgb, var(--mc, #ffe2a8) 18%, transparent); }
#setup .mode-card .mode-sigil { width: 28px; height: 28px; opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mc, #ffe2a8) 60%, transparent)); }
#setup .mode-card .mc-head { grid-row: 1; grid-column: 2; display: grid; gap: 2px; min-width: 0; align-content: center; }
#setup .mode-card small { font: 700 9.5px var(--f-mono); letter-spacing: .18em; color: var(--mc, #ffe2a8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px color-mix(in srgb, var(--mc, #ffe2a8) 45%, transparent); }
#setup .mode-card b { font: 700 clamp(12px, .82vw, 14px)/1.06 var(--f-disp); letter-spacing: .04em; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#setup .mode-card .mc-rule { grid-column: 1 / -1; font: 400 10.5px/1.35 var(--f-hud); color: #c3c3d0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#setup .mode-card:hover { border-color: color-mix(in srgb, var(--mc, #ffe2a8) 55%, #fff); }
#setup .mode-card.sel { border-color: var(--champ, #ffe2a8); background: linear-gradient(160deg, color-mix(in srgb, var(--mc, #ffe2a8) 26%, rgba(12, 12, 18, .9)), rgba(10, 11, 16, .88) 72%); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--mc, #ffe2a8) 75%, transparent); }
#setup .mode-card.sel::before { opacity: 1; }
#setup #modeCards.focus .mode-card.sel { outline: 2px solid #fff; outline-offset: 3px; }

/* map caption: the selected arena's one-line descriptor, above the strip (the preview itself stays clean) */
#setup #mapCap { grid-area: cap; display: flex; align-items: center; gap: 10px; min-width: 0; }
#setup #mapCap .mc-k { font: 500 10px var(--f-mono); letter-spacing: .3em; color: var(--dim, #9c9ca8); }
#setup #mapCap .map-cap-ico { width: 24px; height: 24px; flex: 0 0 24px; opacity: 1; filter: drop-shadow(0 0 7px rgba(255, 226, 168, .45)); }
#setup #mapCapName { font: 700 15px var(--f-disp); letter-spacing: .12em; color: #fff; white-space: nowrap; }
#setup #mapTag { font: 400 12.5px var(--f-hud); color: #d6d6e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* map strip: crest plates (tools/gen_map_plates.mjs) with the arena name over them; scrolls sideways to keep the selection in view */
#setup #mapCards { grid-area: maps; position: relative; height: 146px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 2px 2px 5px; }
#setup .map-card { position: relative; flex: 0 0 238px; height: 100%; padding: 0; overflow: hidden; cursor: pointer; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: #07080c; color: #fff; transition: border-color .25s, box-shadow .3s, transform .3s var(--spring, ease); }
#setup .map-card img.map-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
#setup .map-card:hover { border-color: color-mix(in srgb, var(--mc, #ffe2a8) 60%, #fff); }
#setup .map-card:hover img.map-plate { transform: scale(1.06); }
#setup .map-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 5, 9, .82), rgba(4, 5, 9, 0) 46%); }
#setup .map-card b { position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 1; font: 700 14.5px var(--f-disp); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 12px #000, 0 0 24px rgba(0, 0, 0, .9); }
#setup .map-card b::before { content: ''; position: absolute; left: 0; top: -7px; width: 24px; height: 2px; border-radius: 2px; background: var(--mc, #ffe2a8); box-shadow: 0 0 8px var(--mc, #ffe2a8); opacity: .85; }
#setup .map-card.sel { border-color: var(--mc, #ffe2a8); box-shadow: 0 0 0 1px var(--mc, #ffe2a8), 0 16px 34px -12px color-mix(in srgb, var(--mc, #ffe2a8) 65%, transparent); transform: translateY(-3px); }
#setup .map-card.sel b::before { width: 40px; opacity: 1; }
#setup #mapCards.focus .map-card.sel { outline: 2px solid #fff; outline-offset: 3px; }

/* shorter screens: tighten the bands instead of cutting them off */
@media (max-height: 780px) {
  #setup.fs-setup { padding-top: 10px; padding-bottom: 42px; gap: 8px 16px; }
  #setup .su-head h2 { font-size: 17px; }
  #setup #modeCards { min-height: 100px; }
  #setup .mode-card { padding: 8px 10px 7px; gap: 5px 8px; }
  #setup #mapCards { height: 128px; }
  #setup .map-card { flex-basis: 208px; }
  #setup #opView { padding: 12px 16px; gap: 4px; }
  #setup #opView .ov-name { font-size: 34px; }
  #setup #opView .ov-blurb { font-size: 12.5px; }
  #setup #opView .ov-card p { display: none; }
  #setup #opView .ov-card { padding: 6px 8px; gap: 3px; }
  #setup #opView .ov-ab { gap: 6px; }
  #setup.fs-setup { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto auto auto; }
  #setup #setupOpts { gap: 6px; }
  #setup #setupOpts .opt { gap: 2px; padding: 6px 12px; }
  #setup #setupOpts .opt .val button { width: 24px; height: 24px; }
}
@media (max-width: 1180px) {
  #setup.fs-setup { grid-template-columns: 200px minmax(0, 1fr) minmax(280px, 40vw); }
  #setup .mode-card .mc-rule { display: none; }
  #setup .mode-card { grid-template-rows: auto; }
  #setup .op-tile b { font-size: 13px; letter-spacing: .02em; }
  #setup .op-tile .op-class-tag { display: none; }
}

/* phones, narrow windows and short screens: one scrolling column, operators as a strip.
   Below 1280 px the three-column grid squeezed mode names, operator names and ability cards, so it becomes a column. */
@media (max-width: 1280px), (max-height: 700px) {
  #setup.fs-setup { position: fixed; inset: 0; overflow-y: auto; padding: 12px 14px 60px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px;
    grid-template-areas: "head" "ops" "view" "set" "modes" "cap" "maps"; }
  #setup .su-head { flex-wrap: wrap; padding-left: 0; padding-top: 44px; }
  #setup .su-head .sub { white-space: normal; }
  #setup #waifuCards { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: 116px; }
  #setup .op-tile { flex: 0 0 192px; min-height: 78px; }
  #setup .op-tile .op-meta { padding-right: 0; }
  #setup #opView { overflow: visible; }
  #setup #setupOpts { overflow: visible; grid-template-columns: minmax(0, 1fr); }
  #setup #modeCards { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #setup .mode-card .mc-rule { display: block; }
  #setup #mapCards { height: 138px; }
  #setup #mapCap { flex-wrap: wrap; gap: 4px 10px; }
  #setup #setupPrompts { display: none; }   /* touch screens: the key hints would sit over the scrolling column */
  #setup #opView, #setup #setupOpts, #setup #waifuCards, #setup #modeCards, #setup #mapCards { min-height: auto; }   /* rows size to their content and scroll with the screen */
}

/* Operator vs Hero categories and badges */
#setup .su-ops-col { grid-area: ops; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#setup .su-cat-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
#setup .su-cat-tab:focus-visible, #setup .op-tile:focus-visible, #setup .mode-card:focus-visible, #setup .map-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#setup .su-cat-tab { flex: 1; padding: 7px 4px; font: 700 10px var(--f-mono); letter-spacing: .12em; color: var(--dim, #9c9ca8); border: none; background: none; border-radius: 8px; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 4px; }
#setup .su-cat-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
#setup .su-cat-tab.active { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
#setup .su-cat-tab .cnt { font-size: 9px; opacity: .7; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .3); }

#setup #waifuCards { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; flex: 1 1 0; padding: 2px 6px 4px 2px; overscroll-behavior: contain; }
#setup .op-tile .op-class-tag { position: absolute; right: 8px; top: 6px; bottom: auto; z-index: 2; font: 700 8px var(--f-mono); letter-spacing: .12em; padding: 2px 6px; border-radius: 6px; pointer-events: none; }
#setup .op-tile .op-class-tag.hero { color: #ffd15b; background: rgba(255, 209, 91, .16); border: 1px solid rgba(255, 209, 91, .35); text-shadow: 0 0 10px rgba(255, 209, 91, .5); }
#setup .op-tile .op-class-tag.op { color: #7cc7ff; background: rgba(124, 199, 255, .12); border: 1px solid rgba(124, 199, 255, .24); }

#setup #opView .ov-badge { font: 700 10px/1.2 var(--f-mono); letter-spacing: .25em; padding: 4px 10px; border-radius: 8px; width: fit-content; height: auto; min-height: 0; margin-bottom: 2px; box-sizing: border-box; }
#setup #opView .ov-badge.hero, #setup #opView .ov-badge.is-hero { color: #ffd15b; background: rgba(255, 209, 91, .15); border: 1px solid rgba(255, 209, 91, .35); text-shadow: 0 0 12px rgba(255, 209, 91, .6); }
#setup #opView .ov-badge.operator, #setup #opView .ov-badge.is-op { color: #7cc7ff; background: rgba(124, 199, 255, .14); border: 1px solid rgba(124, 199, 255, .28); }

#setup #opView .ov-combat-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
#setup #opView .ov-ct-card { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px; }
#setup #opView .ov-ct-card em { font: 500 8px var(--f-mono); letter-spacing: .22em; color: var(--dim, #9c9ca8); font-style: normal; }
#setup #opView .ov-ct-card b { font: 600 11.5px var(--f-hud); color: #fff; }
#setup #opView .ov-combat-type.hero .ov-ct-card b, #setup #opView .ov-combat-type.is-hero .ov-ct-card b { color: #ffe39a; }

/* mode sigils (img/icons/mode, tools/gen_map_icons.mjs); map sigils live in the plate art and the caption */
#setup .mode-card.sel .mc-sig { border-color: color-mix(in srgb, var(--mc, #ffe2a8) 80%, #fff); box-shadow: inset 0 0 14px color-mix(in srgb, var(--mc, #ffe2a8) 32%, transparent), 0 0 14px -2px color-mix(in srgb, var(--mc, #ffe2a8) 55%, transparent); }
#setup .mode-card.sel .mode-sigil { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mc, #ffe2a8) 85%, transparent)); }

/* Keep the operator badge and portrait separate from the name and role; a bigger, lit portrait is the point of the tile. */
#setup .op-tile { gap: 12px; padding: 9px 11px; }
#setup .op-tile .op-portrait::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c, #888) 70%, transparent), transparent 68%); opacity: .4; transition: opacity .25s; }
#setup .op-tile.sel .op-portrait::before { opacity: .9; }
#setup .op-tile .op-portrait { flex-basis: 58px; width: 58px; height: 58px; }
#setup .op-tile .op-ico, #setup .op-tile .op-fallback { width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, .42); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 8px 18px -8px #000, inset 0 0 0 1px rgba(0, 0, 0, .45); }
#setup .op-tile.sel .op-ico, #setup .op-tile.sel .op-fallback { border-color: color-mix(in srgb, var(--c) 60%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 32%, transparent), 0 10px 22px -8px #000; }
#setup .op-tile .op-meta { flex: 1; padding-top: 13px; padding-bottom: 8px; gap: 3px; }
#setup .op-tile b { font-size: 15.5px; letter-spacing: .05em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .75); }
#setup .op-tile small { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: color-mix(in srgb, var(--c) 34%, #e8e9f2); }
#setup .op-tile em { left: 82px; bottom: 7px; font-size: 9px; letter-spacing: .14em; }
#setup .op-tile .op-class-tag { top: 6px; right: 8px; }

/* Short viewports: the operator viewer used to clip the ability cards mid-row. Drop the generic combat-type
   strip (it repeats the operator's kit header) and let the remaining cards fit the panel. */
@media (max-height: 960px) { #setup #opView .ov-combat-type { display: none; } }
@media (max-height: 760px) {
  #setup #opView .ov-blurb { font-size: 11.5px; line-height: 1.3; }
  #setup #opView .ov-card i { display: none; }
}
@media (max-height: 960px) {
  #setup #opView { gap: 3px; padding: 12px 16px; }
  #setup #opView .ov-ab { gap: 6px; }
  #setup #opView .ov-card { padding: 7px 9px; gap: 3px; }
  #setup #opView .ov-card i, #setup #opView .ov-card p { display: none; }
}
@media (max-height: 820px) {
  #setup #opView .ov-name { font-size: 30px; }
  #setup #opView .ov-role { font-size: 10px; letter-spacing: .26em; }
  #setup #opView .ov-badge { padding: 3px 9px; letter-spacing: .16em; margin-bottom: 0; }
  #setup #opView .ov-blurb { font-size: 11.5px; line-height: 1.32; }
}
@media (max-height: 820px) { #setup #opView .ov-blurb { display: none; } }

/* Mobile column (see the max-width 1280 block): later desktop rules reset the flex basis and the panel fill,
   so these have to come last to keep the operator strip in its own row and the viewer readable. */
@media (max-width: 1280px), (max-height: 700px) {
  #setup .su-ops-col { min-height: auto; }
  #setup #waifuCards { flex: 0 0 116px; min-height: 116px; height: 116px; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  #setup .op-tile { flex: 0 0 192px; width: 192px; min-width: 192px; min-height: 78px; }
  #setup #opView { background: linear-gradient(160deg, color-mix(in srgb, var(--c, #888) 16%, rgba(8, 9, 14, .96)), rgba(6, 7, 11, .96) 62%); backdrop-filter: blur(20px); }
  #setup #setupOpts .opt { background: rgba(9, 10, 15, .92); }
}