/* Delta Force page styles (component base shared with the Endfield tracker). */
@layer components {


/* Moving between pages: the page cross-fades while the header stays put
   (same-origin view transitions; browsers without them just navigate). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* The yellow accent needs dark ink to stay legible. */
.btn-primary, .btn-primary:hover { color: var(--acc-ink); }
.arzb-signin { color: var(--acc-ink) !important; }
.skip-link { color: var(--acc-ink); }
.btn.is-danger:hover { color: var(--down); border-color: #ff6b5755; }

.df-body > * + * { margin-top: 20px; }
.df-body > .sec-head { margin-top: 36px; }
.df-body > .sec-head:first-child { margin-top: 0; }
.stack > * + * { margin-top: 20px; }
.df-h3 { margin: 16px 0 8px; font: 700 .78rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.df-h3:first-child { margin-top: 0; }
.small { font-size: .78rem; }
code { font-family: var(--f-mono); font-size: .8em; background: var(--s3); padding: 1px 5px; border-radius: 4px; }
.df-flash { animation: efFlash 2.4s var(--ease); }
@keyframes efFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--acc); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* ---------------------------------------------------------------- banner -- */
.df-banner { background: var(--bg-soft); }
.df-banner::before { display: none; }
.df-banner .wrap { position: relative; }
.df-kicker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; color: var(--acc); font: 600 .75rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.df-kicker .i { font-size: 16px; }
.df-banner h1 { font-family: var(--f-display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.02; font-stretch: 82%; }
.df-title-ic { border-radius: 12px; }
.df-tabs { margin-top: 22px; }
.df-art { position: absolute; right: var(--gut); top: 0; bottom: 0; width: min(46%, 520px); margin: 0; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.df-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: .55; }
.df-banner.has-art .wrap { min-height: 0; }
.df-kicker .df-elem, .df-kicker .df-chip { text-transform: none; letter-spacing: 0; }
/* an operator's numbers at max level, under the name */
.df-bstats { display: inline-flex; flex-wrap: wrap; margin-top: 4px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: color-mix(in srgb, var(--s1) 85%, transparent); backdrop-filter: blur(6px); overflow: hidden; }
.df-bstats > div { display: grid; gap: 4px; padding: 10px 18px; min-width: 0; }
.df-bstats > div + div { border-left: 1px solid var(--line); }
.df-bstats b { font: 700 1.35rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; font-stretch: 82%; }
.df-bstats span { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.df-bstats-lv { background: var(--s2); }

/* ------------------------------------------------------------------ home -- */
.df-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); padding: 64px 0 40px; }
.df-hero-art { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }
.df-hero-title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4rem); line-height: .98; max-width: 16ch; font-stretch: 82%; }
.df-hero-lead { margin-top: 14px; max-width: 62ch; color: var(--ink-2); line-height: 1.6; }
.df-hero-note { margin-top: 10px; }
.df-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
.df-hero-main { min-width: 0; }

/* The roster panel at the right of the UID search. */
.df-hero-panel { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -30px #000; overflow: hidden; }
.df-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.df-hp-kicker { display: inline-flex; align-items: center; gap: 7px; font: 700 .72rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.df-hp-kicker .i { font-size: 17px; color: var(--acc); }
.df-hp-head a { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); font-size: .76rem; font-weight: 600; transition: color .15s; }
.df-hp-head a:hover { color: var(--ink); }
.df-hp-head a .i { font-size: 15px; }
.df-fan { display: flex; justify-content: center; padding: 6px 0 2px; }
.df-fan-item { position: relative; width: 70px; height: 70px; flex: none; margin-left: -16px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ec, #888) 24%, var(--s3)), var(--s2));
  box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px color-mix(in srgb, var(--rc) 70%, transparent); transition: transform .18s var(--ease); z-index: calc(10 - var(--i)); }
.df-fan-item:first-child { margin-left: 0; }
.df-fan-item:nth-child(even) { transform: translateY(8px); }
.df-fan-item:hover { transform: translateY(-4px) scale(1.06); z-index: 20; }
.df-fan-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-hp-elements { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.df-hp-elements li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: .78rem; }
.df-hp-el { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.df-hp-el::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.df-hp-bar { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.df-hp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); opacity: .85; }
.df-hp-elements b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.df-hp-rarity { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; height: 30px; }
/* equal tiles, stars and count side by side */
.df-hp-rarity span { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; border-radius: 6px; line-height: 1;
  background: color-mix(in srgb, var(--rc) 14%, var(--s2)); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); }
.df-hp-rarity em { display: inline-flex; align-items: center; gap: 1px; font: 700 .78rem/1 var(--f-ui); font-style: normal; color: var(--rc); }
.df-hp-rarity em i { font-style: normal; font-size: .72rem; line-height: 1; }
.df-hp-rarity b { font: 700 .82rem/1 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.df-hp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 14px; }
.df-hp-stats a { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; transition: color .15s; }
.df-hp-stats a + a { border-left: 1px solid var(--line); padding-left: 14px; }
.df-hp-stats b { font: 700 1.45rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; font-stretch: 82%; }
.df-hp-stats a > span { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.df-hp-stats a:hover b { color: var(--acc); }

.df-uid-form { display: flex; align-items: center; gap: 10px; max-width: 640px; margin-top: 22px; padding: 6px 6px 6px 14px; background: var(--s1);
  border: 1px solid var(--line-3); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.df-uid-form:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-a16); }
.df-uid-form > .i { color: var(--ink-3); }
.df-uid-form input { flex: 1; min-width: 0; height: 40px; background: none; border: 0; color: var(--ink); font: 500 1rem var(--f-mono); outline: none; }
.df-uid-form.is-big input { height: 48px; font-size: 1.15rem; }
.df-uid-form.is-big .btn { height: 48px; padding: 0 22px; }
.panel .df-uid-form { margin-top: 0; }

.df-db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.df-db-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 16px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s, background .15s; }
.df-db-tile:hover { border-color: var(--acc-a30); background: var(--s2); }
.df-db-tile .i { grid-row: span 2; font-size: 26px; color: var(--acc); align-self: center; }
.df-cta .panel-b { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 28px; }
.df-cta-copy { min-width: 0; flex: 1 1 420px; }
.df-cta h2 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.6rem; font-stretch: 82%; }
.df-cta p { margin: 6px 0 0; max-width: 70ch; }
.df-cta .btn { flex: none; }

/* quick picks under the UID search, like thefinals' hero: this browser's recent lookups */
.df-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.df-recent-label { color: var(--ink-3); font: 600 .66rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.df-recent-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.df-recent-chip { display: inline-flex; align-items: center; height: 26px; max-width: 180px; padding: 0 9px; border-radius: 6px; background: var(--s2); border: 1px solid var(--line-2);
  color: var(--ink-2); font-size: .76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s, border-color .15s; }
.df-recent-chip:hover { color: var(--ink); border-color: var(--line-3); }

/* home: a fixed number of columns so the 12 operators fill whole rows */
.df-op-grid.is-home { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.df-op-tags { flex-wrap: nowrap; }
.df-op-tags .df-elem, .df-op-tags .df-chip { padding: 2px 7px; font-size: .68rem; white-space: nowrap; }

.df-player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.df-player-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s; }
.df-player-card:hover { border-color: var(--acc-a30); }
.df-player-name { font-weight: 700; color: var(--ink); }
.df-player-lv { font: 600 .78rem var(--f-mono); color: var(--acc); }

/* ------------------------------------------------------------ primitives -- */
.df-thumb { display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 8px; background: var(--s3); overflow: hidden; }
.df-thumb img { width: 100%; height: 100%; object-fit: contain; }
.df-thumb.is-empty { background: repeating-linear-gradient(135deg, var(--s3) 0 6px, var(--s2) 6px 12px); }
.df-thumb.is-round { border-radius: 50%; }
.df-thumb-cell { display: flex; align-items: center; gap: 10px; }
.df-stars { color: var(--rc); letter-spacing: -1px; font-size: .85rem; white-space: nowrap; }
.df-elem { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--c, var(--ink-2)); background: color-mix(in srgb, var(--c, #888) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 30%, transparent); }
.df-elem::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.df-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--s3); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.df-chip.is-acc { color: var(--acc); border-color: var(--acc-a30); background: var(--acc-a08); }
.df-chip.is-ok { color: var(--up); border-color: #36d67f40; background: var(--up-a12); }
.df-chip.is-bad { color: var(--down); border-color: #ff6b5740; background: var(--down-a12); }
.df-kv { display: grid; gap: 0; }
.df-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.df-kv > div:last-child { border-bottom: 0; }
.df-kv dt { flex: none; color: var(--ink-3); }
.df-kv dd { min-width: 0; margin: 0; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.df-split { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.df-list { padding-left: 18px; display: grid; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.df-prose { line-height: 1.65; color: var(--ink-2); font-size: .9rem; }
.df-prose + .df-prose { margin-top: 10px; }
.df-rich { line-height: 1.6; color: var(--ink-2); font-size: .88rem; }
.rt { font-weight: 600; }
.rt-term { border-bottom: 1px dotted currentColor; }
.df-loading { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.df-loading .i { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.df-note .panel-b { color: var(--ink-2); }
/* Text blocks and actions inside a card keep their breathing room. */
.panel-b > p:not([class]) { line-height: 1.6; color: var(--ink-2); }
.panel-b > p + p { margin-top: 10px; }
.panel-b > p + .btn, .panel-b > p + .row, .panel-b > ul + .row, .panel-b > dl + .btn { margin-top: 14px; }
.panel-b > .row { flex-wrap: wrap; }
.empty .df-signin-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; max-width: none; margin-top: 14px; }
.empty .df-signin-note .btn { margin-top: 0; }

/* filters: the companion's period pills */
.df-filters { display: grid; gap: 10px; }
.df-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.df-filter-label { min-width: 72px; color: var(--ink-3); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.df-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .78rem; font-weight: 500; cursor: pointer; transition: all .15s; }
.df-pill:hover { color: var(--ink); border-color: var(--line-3); }
.df-pill.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.df-search-form { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: var(--s1); border: 1px solid var(--line-3); border-radius: 12px; }
.df-search-form input { flex: 1; min-width: 0; height: 40px; background: none; border: 0; color: var(--ink); font-size: .95rem; outline: none; }
.df-search-form .i { color: var(--ink-3); }
.df-search-form.is-inline { max-width: 520px; }
/* the database toolbar (render.js toolbar), after thefinals' items toolbar */
.df-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.df-toolbar .seg { flex-wrap: wrap; }
.df-toolbar .seg a { height: 30px; }
.df-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.df-tb-q { position: relative; flex: 1 1 200px; min-width: 180px; }
.df-tb-q > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 18px; pointer-events: none; }
.df-tb-q .input { padding: 0 46px 0 38px; }
.df-tb-q .input::-webkit-search-cancel-button { display: none; }
.df-tb-go { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  background: var(--acc); color: var(--acc-ink); transition: background .15s; }
.df-tb-go:hover { background: var(--acc-hi); }
.df-tb-go .i { font-size: 18px; }
.df-tb-q.is-big { max-width: 760px; }
.df-tb-q.is-big .input { height: 50px; font-size: .95rem; padding-right: 54px; }
.df-tb-q.is-big .df-tb-go { width: 40px; height: 40px; right: 5px; border-radius: 9px; }
.df-tb-sel { flex: 0 1 158px; min-width: 128px; }
/* The native select looks like the custom one that replaces it (app.js
   enhanceSelects), so the swap after load is invisible. */
.df-tb-sel select { width: 100%; height: 38px; padding: 0 34px 0 12px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line-2); color: var(--ink);
  font: 500 .8125rem var(--f-ui); -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%238a8a93' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.df-tb-sel .sel { width: 100%; }
.df-tb-reset { height: 38px; }
.df-body > .df-tb-count { margin-top: 12px; }
.df-body > .df-tb-count + * { margin-top: 12px; }
.df-tb-count { color: var(--ink-3); font-size: .8rem; }
.df-tb-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.df-pager { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* tables */
.df-table td, .df-table th { vertical-align: middle; }
.df-table.is-clickable tbody tr { cursor: pointer; }
.df-table.is-clickable tbody tr:hover td { background: var(--s2); }
.df-params-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* ------------------------------------------------------------ operators -- */
.df-op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.df-op-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; overflow: hidden; transition: border-color .15s, transform .15s; }
.df-op-card:hover { border-color: color-mix(in srgb, var(--rc) 50%, transparent); transform: translateY(-2px); }
.df-op-pic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ec, #888) 22%, var(--s3)), var(--s2)); overflow: hidden; }
.df-op-pic img { width: 100%; height: 100%; object-fit: cover; }
.df-op-name { font-weight: 700; color: var(--ink); font-size: .92rem; line-height: 1.2; }
.df-op-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.df-skill { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.df-skill:first-child { padding-top: 0; }
.df-skill:last-child { border-bottom: 0; padding-bottom: 0; }
.df-skill-body { min-width: 0; flex: 1; }
.df-skill-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.df-skill-head b { color: var(--ink); font-size: .95rem; }
.df-skill-head .i { font-size: 14px; vertical-align: -2px; }
.df-params { margin-top: 10px; }
.df-params summary { cursor: pointer; color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.df-params .tbl-wrap { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r); }
.df-potentials { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.df-potentials li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.df-potentials li b { display: block; color: var(--ink); margin-bottom: 3px; }
.df-pot-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--acc-a08); border: 1px solid var(--acc-a16); color: var(--acc); font: 700 .9rem var(--f-display); font-stretch: 82%; }
.df-tiers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.df-tiers li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.df-tiers li:first-child { padding-top: 0; border-top: 0; }
.df-tier-n em { margin-left: 3px; color: var(--ink-2); font-style: normal; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.df-tiers li b { display: block; color: var(--ink); font-size: .84rem; margin-bottom: 2px; }
.df-tier-n { font: 700 .66rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.df-subnav { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 4px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; }
.df-subnav a { padding: 6px 12px; border-radius: 8px; color: var(--ink-2); font-size: .8rem; font-weight: 600; transition: background .15s, color .15s; }
.df-subnav a:hover { background: var(--s2); color: var(--ink); }
.panel[id] { scroll-margin-top: calc(var(--nav-h) + 70px); }
/* game text: labelled parts instead of shouted labels and bare line breaks (render.js gameText) */
.df-text { display: grid; gap: 8px; color: var(--ink-2); font-size: .88rem; line-height: 1.6; }
.df-text p { margin: 0; }
.df-text-part { display: grid; gap: 2px; }
.df-text-part + .df-text-part { padding-top: 8px; border-top: 1px dashed var(--line); }
.df-text-k { color: var(--ink-3); font: 700 .64rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.df-potentials .df-text { margin-top: 2px; }
.df-tiers .df-text { font-size: .85rem; }
.df-fixed { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.df-fixed li { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 9px; border-radius: 6px; background: var(--s2); border: 1px solid var(--line); color: var(--ink-3); font-size: .74rem; }
.df-fixed b { padding: 1px 6px; border-radius: 4px; background: var(--s3); color: var(--ink); font: 700 .72rem var(--f-mono); }
.df-params summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; }
.df-params summary::-webkit-details-marker { display: none; }
.df-params summary .i { font-size: 17px; transition: transform .2s; }
.df-params[open] summary .i { transform: rotate(180deg); }
.df-params summary:hover { color: var(--ink); }
.df-params-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--s1); }
.df-params-table td { font-family: var(--f-mono); font-size: .76rem; }
/* the personnel record and the dossier */
.df-record-text { display: grid; gap: 12px; max-width: 78ch; }
.df-record-text p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }
.df-record-sign { margin-top: 14px; color: var(--ink-3); font-size: .8rem; font-style: normal; }
.df-dossier-note { margin-top: 10px; color: var(--ink-3); font-size: .82rem; font-style: normal; line-height: 1.5; }
.df-dossier-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.df-dossier-block .df-h3 { margin: 0 0 6px; }
.df-dossier-block p { color: var(--ink-2); line-height: 1.5; }
.df-ratings { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.df-ratings li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: .8rem; }
.df-dossier-remark { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--s2); color: var(--ink-2); font-size: .8rem; font-style: normal; line-height: 1.5; overflow-wrap: anywhere; }
.df-ratings li > span { min-width: 0; }
.df-ratings b { flex: none; max-width: 60%; white-space: normal; text-align: right; padding: 2px 8px; border-radius: 5px; background: var(--s3); border: 1px solid var(--line-2); color: var(--ink); font-size: .72rem; }
.df-ratings b[data-rating="excellent"], .df-ratings b[data-rating="outstanding"] { color: var(--up); border-color: #36d67f40; background: var(--up-a12); }
.df-ratings b[data-rating="flawed"], .df-ratings b[data-rating="poor"] { color: var(--down); border-color: #ff6b5740; background: var(--down-a12); }

/* gear */
.df-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.df-set, .df-result, .df-item, .df-piece { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s; min-width: 0; }
.df-set:hover, .df-result:hover, .df-item:hover, .df-piece:hover { border-color: var(--acc-a30); }
.df-set > span, .df-result > span, .df-item > span, .df-piece > span { display: flex; flex-direction: column; min-width: 0; }
.df-set > span > b, .df-result > span > b, .df-item > span > b, .df-piece > span > b { color: var(--ink); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.df-item { background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 12%, var(--s1)), var(--s1) 55%); }
.df-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.df-results { display: grid; gap: 8px; }
.df-piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.df-piece { align-items: flex-start; }
.df-piece > span:not(.df-thumb) { flex: 1; gap: 2px; }
.df-piece .df-stats b { overflow: visible; white-space: nowrap; }
.df-piece .df-stats li span { min-width: 0; }
.df-piece .df-stats { margin-top: 6px; }
.df-stats { list-style: none; padding: 0; margin: 0; display: grid; }
.df-stats li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.df-stats li:last-child { border-bottom: 0; }
.df-stats li span { color: var(--ink-3); }
.df-stats li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.df-stats.is-compact li { padding: 3px 0; font-size: .76rem; }

/* recipes */
.df-recipes td { vertical-align: middle; height: auto; padding-top: 10px; padding-bottom: 10px; white-space: normal; }
.df-rc-name { color: var(--ink); font-weight: 600; min-width: 160px; }
.df-rc-time { white-space: nowrap; color: var(--ink-2); }
.df-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.df-flow-arrow { font-size: 18px; color: var(--ink-3); }
.df-io-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.df-io { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); white-space: nowrap; font-size: .8rem; color: var(--ink-2); }
a.df-io:hover { border-color: var(--line-3); color: var(--ink); }
.df-io .df-thumb { border-radius: 50%; }
.df-io b { color: var(--acc); font-weight: 700; font-family: var(--f-mono); font-size: .74rem; }

/* --------------------------------------------------------------- players -- */
/* the head of a player page, like thefinals' profile banner */
.df-phero { position: relative; isolation: isolate; border-bottom: 1px solid var(--line);
  background: radial-gradient(900px 260px at 12% 0%, #ffffff0a, transparent 70%), var(--bg-soft); }
.df-phero-inner { padding-top: 32px; padding-bottom: 30px; }
.df-phero-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.df-phero-av { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 22px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -22px #000; }
.df-phero-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-phero-av.is-empty .i { font-size: 46px; color: var(--ink-4, var(--ink-3)); }
.df-phero-id { min-width: 0; }
.df-phero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.df-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--s2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .74rem; font-weight: 600; }
.df-badge .i { font-size: 15px; }
.df-badge.is-mono { font-family: var(--f-mono); }
.df-badge.is-acc { color: var(--up); border-color: #36d67f40; background: var(--up-a12); }
.df-phero h1 { font-family: var(--f-display); font-weight: 800; text-transform: none; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1; letter-spacing: .01em; overflow-wrap: anywhere; font-stretch: 82%; }
.df-phero-sig { margin-top: 8px; color: var(--ink-2); font-size: .95rem; font-style: normal; }
.df-phero-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; color: var(--ink-3); font-size: .8rem; }
.df-phero-meta b { color: var(--ink-2); font-family: var(--f-mono); font-weight: 600; }
.df-phero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.df-phero-actions .row { gap: 8px; }
.df-icon-btn { width: 36px; padding: 0; }
.df-icon-btn .i { font-size: 18px; }
.df-icon-btn.is-done { color: var(--up); border-color: #36d67f40; }

.df-profile > * + * { margin-top: 20px; }
.df-kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.df-kpi-strip .df-kpi { padding: 16px 18px; background: var(--s1); }
.df-kpi-strip .df-kpi-v { font-size: 1.9rem; line-height: 1; }
.df-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--line); }
.df-kpis-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.df-kpis > .df-kpi + .df-kpi { border-left: 1px solid var(--line); }
.df-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.df-kpi-v { font: 700 1.5rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; font-stretch: 82%; }
.df-kpi-l { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.df-kpi-l .i { font-size: 15px; }

/* sidebar at the left, the operators at the right; on narrow screens the operators come first */
.df-pgrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: 'side main'; gap: 20px; align-items: start; }
.df-pgrid-main { grid-area: main; min-width: 0; }
.df-pgrid-side { grid-area: side; min-width: 0; }
.df-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.df-regions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; color: var(--ink-2); font-size: .84rem; }
.df-regions b { color: var(--ink); font: 600 .8rem var(--f-mono); }
.df-regions i { position: relative; grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--s3); overflow: hidden; }
.df-regions i::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--signal); opacity: .75; }
.df-side-note { margin-top: 10px; }
.df-side-btn { width: 100%; margin-top: 14px; }

.df-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.df-pop { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .15s; }

.df-pop:hover { border-color: var(--line-3); }
.df-pop-head { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.df-pop .df-op-pic { width: 60px; height: 60px; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); }
.df-pop-id { display: grid; gap: 5px; min-width: 0; }
.df-pop-name { color: var(--ink); font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-pop-name:hover { color: var(--acc); }
.df-pop-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.df-pop-lv { display: grid; justify-items: end; line-height: 1; }
.df-pop-lv b { font: 700 1.6rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; font-stretch: 82%; }
.df-pop-lv span { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.df-pop-lv em { margin-top: 6px; padding: 2px 6px; border-radius: 4px; font: 700 .7rem var(--f-mono); font-style: normal; color: var(--acc); background: var(--acc-a08); border: 1px solid var(--acc-a16); }
.df-pop-nobuild { margin: 0; }
.df-pop-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-3); }
.df-pop-foot .i { font-size: 15px; }
.df-pop-foot a { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); font-weight: 600; }
.df-pop-foot a:hover { color: var(--acc); }

/* a player's operator: portrait + level strip */
.df-pophero { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; }
.df-pophero-art { margin: 0; min-height: 200px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ec, #888) 28%, var(--s3)), var(--s1)); border-right: 1px solid var(--line); }
.df-pophero-art { display: grid; place-items: center; padding: 18px; }
.df-pophero-art img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px color-mix(in srgb, var(--rc) 70%, transparent); }
.df-pophero-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 20px 22px; }
.df-pophero-id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.df-pophero-stats { display: flex; gap: 0; }
.df-pophero-stats > div { display: grid; gap: 4px; padding: 0 22px; }
.df-pophero-stats > div:first-child { padding-left: 0; }
.df-pophero-stats > div + div { border-left: 1px solid var(--line); }
.df-pophero-stats b { font: 700 2.1rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; font-stretch: 82%; }
.df-pophero-stats span { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* a build: weapon row, gear grid, skill levels */
.df-build { display: grid; gap: 10px; }
.df-bw { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); min-width: 0; }
.df-bw-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.df-bw-body a, .df-bw-body > span:first-child { color: var(--ink); font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-bw-body a:hover { color: var(--acc); }
.df-bw-meta { font: 500 .72rem var(--f-mono); color: var(--ink-3); }
.df-bw-tag { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.df-bg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.df-bg li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px; border-radius: 8px; background: var(--s1); border: 1px solid var(--line); font-size: .76rem; }
.df-bg li a, .df-bg li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.df-bg li a:hover { color: var(--acc); }
.df-bs { display: flex; flex-wrap: wrap; gap: 5px; }
.df-skill-lv { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 6px; background: var(--s1); border: 1px solid var(--line); font-size: .72rem; color: var(--ink-3); }
.df-skill-lv b { min-width: 20px; padding: 1px 5px; border-radius: 4px; text-align: center; font: 700 .72rem var(--f-mono); color: var(--ink); background: var(--s3); }
.df-build.is-big .df-bg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-build.is-big .df-bg li { padding: 7px 10px 7px 7px; font-size: .82rem; }

.df-history { list-style: none; margin: 0; padding: 0; display: grid; }
.df-history li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.df-history li:last-child { border-bottom: 0; }
.df-hist-when { color: var(--ink-3); font-size: .76rem; }
.df-hist-what a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); }
.df-medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.df-medal { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; color: var(--ink-2); }
.df-medal > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .72rem; line-height: 1.3; }

/* -------------------------------------------------------------- accounts -- */
.df-acc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.df-acc-head h3 { font-size: 1.05rem; }
.df-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.df-verify { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--acc-a30); border-radius: var(--r); background: var(--acc-a08); display: grid; gap: 8px; font-size: .86rem; }
.df-code { font-size: 1rem; padding: 3px 8px; color: var(--acc); background: var(--s1); border: 1px solid var(--acc-a30); letter-spacing: .06em; }
.df-acc-actions { margin-top: 12px; flex-wrap: wrap; }
.df-acc + .df-acc { margin-top: 12px; }

/* ------------------------------------------------------------- companion -- */
.df-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.df-bars li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: .82rem; }
.df-bar { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.df-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-lo), var(--acc)); border-radius: 4px; }
.df-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-bar-v { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.df-feature { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.df-feature li { display: flex; gap: 12px; }
.df-feature li .i { color: var(--acc); }
.df-feature li div { display: flex; flex-direction: column; gap: 2px; }
.df-feature li span { color: var(--ink-2); font-size: .86rem; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
  .df-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .df-op-grid.is-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .df-hero-panel { max-width: 640px; }
  .df-split { grid-template-columns: minmax(0, 1fr); }
  .df-db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-art { width: 60%; opacity: .6; }
  .df-pgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main' 'side'; }
  .df-pgrid-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .df-pgrid-side > * + * { margin-top: 0; }
}
@media (max-width: 860px) {
  .df-phero-row { grid-template-columns: auto minmax(0, 1fr); }
  .df-phero-actions { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
  .df-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-kpi-strip .df-kpi:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 640px) {
  .df-hero { padding: 40px 0 28px; }
  .df-hero-panel { padding: 16px; }
  .df-op-grid.is-home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .df-op-grid.is-home .df-op-card { padding: 10px 4px; }
  .df-op-grid.is-home .df-op-pic { width: 64px; height: 64px; }
  .df-op-grid.is-home .df-op-tags { flex-wrap: wrap; }
  .df-op-grid.is-home .df-op-name { font-size: .8rem; }
  .df-cta .panel-b { padding: 18px; }
  .df-cta .btn { width: 100%; justify-content: center; }
  /* Recipes: one stacked block per recipe instead of a wide table. */
  .df-recipes thead { display: none; }
  .df-recipes, .df-recipes tbody, .df-recipes tr, .df-recipes td { display: block; width: 100%; }
  .df-recipes tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .df-recipes td { padding: 0 !important; border: 0 !important; height: auto; }
  .df-recipes .df-rc-name { padding-right: 48px !important; margin-bottom: 8px; }
  .df-recipes .df-rc-time { position: absolute; top: 12px; right: 14px; width: auto; }
  .df-recipes td:nth-child(3):not(.df-rc-time) { margin-top: 6px; font-size: .78rem; color: var(--ink-3); }
  .df-pophero { grid-template-columns: minmax(0, 1fr); }
  .df-pophero-art { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .df-pophero-art img { width: 120px; height: 120px; }
  .df-build.is-big .df-bg { grid-template-columns: minmax(0, 1fr); }
  .df-pophero-stats > div { padding: 0 14px; }
  .df-bg { grid-template-columns: minmax(0, 1fr); }
  .df-pop-grid { grid-template-columns: minmax(0, 1fr); }
  .df-fan-item { width: 58px; height: 58px; margin-left: -12px; }
  .df-hp-stats b { font-size: 1.2rem; }
  .df-uid-form { flex-wrap: wrap; padding: 8px; }
  .df-uid-form > .i { display: none; }
  .df-uid-form input { flex-basis: 100%; }
  .df-uid-form .btn { width: 100%; justify-content: center; }
  .df-db-grid { grid-template-columns: minmax(0, 1fr); }
  .df-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .df-bars li { grid-template-columns: minmax(0, 1fr) 60px; }
  .df-bars .df-bar { grid-column: 1 / -1; grid-row: 2; }
  .df-profile-actions { align-items: flex-start; }
  .df-kpis > .df-kpi + .df-kpi { border-left: 0; }
  .df-filter-label { flex-basis: 100%; }
  .df-toolbar .seg { width: 100%; flex-wrap: wrap; }
  .df-toolbar .seg a { flex: 1 1 auto; justify-content: center; }
  .df-tb-q { flex-basis: 100%; min-width: 0; }
  .df-tb-sel { flex: 1 1 140px; min-width: 0; }
  .df-phero-inner { padding-top: 22px; padding-bottom: 22px; }
  .df-phero-row { gap: 14px; }
  .df-phero-av { width: 76px; height: 76px; border-radius: 16px; }
  .df-phero h1 { font-size: 1.9rem; }
  .df-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-kpi-strip .df-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .df-kpi-strip .df-kpi { padding: 12px 14px; }
  .df-kpi-strip .df-kpi-v { font-size: 1.5rem; }
  .df-text-part + .df-text-part { padding-top: 6px; }
  .df-art { display: none; }
  .df-bstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .df-bstats > div { padding: 8px 10px; border-top: 1px solid var(--line); }
  .df-bstats > div:nth-child(-n+3) { border-top: 0; }
  .df-bstats > div:nth-child(3n+1) { border-left: 0; }
  .df-bstats b { font-size: 1.1rem; }
}

/* the player search under the home title: players on Arenyze by name or UID */
.df-uid-form { position: relative; }
.df-uid-form input::-webkit-search-cancel-button { display: none; }
.s-av.s-img { overflow: hidden; background: var(--s3); }
.s-av.s-img img { width: 100%; height: 100%; object-fit: cover; }
.s-av.is-round { border-radius: 50%; }
.s-av.s-kind .i { font-size: 19px; color: var(--ink-2); }


/* ==========================================================================
   THE FINALS language (2026-10): flat slate cards without outlines, italic
   condensed titles and numbers, leaning tags, zebra rows — and no coloured
   edge stripes: a card's colour shows as a tint.
   ========================================================================== */
.drawer-link.is-active, .li.is-tier, .li[style*="--tier"] { box-shadow: none; }

/* headings and big numbers */
.df-banner { background: transparent; }
.df-kicker { font: 700 .9rem var(--f-display); letter-spacing: .12em; font-stretch: 82%; }
.df-banner h1, .df-hero-title, .df-phero h1 { font-style: normal; font-weight: 800; }
.df-hero-title { font-size: clamp(2.8rem, 6.4vw, 4.6rem); line-height: .88; }
.df-cta h2 { font-style: normal; font-weight: 800; font-size: 2rem; }
.df-h3 { font: 700 .9rem var(--f-display); letter-spacing: .08em; color: var(--ink-3); font-stretch: 82%; }
.df-kpi-l, .df-bstats span, .df-hp-stats a > span, .df-pop-lv span, .df-pophero-stats span, .df-text-k, .df-tier-n, .df-filter-label, .df-bw-tag {
  font: 700 .74rem var(--f-display); letter-spacing: .08em; font-stretch: 82%; }
.df-kpi-v, .df-kpi-strip .df-kpi-v { font: 700 2rem/1 var(--f-display); font-stretch: 82%; }
.df-pophero-stats b, .df-pop-lv b, .df-hp-stats b, .df-bstats b { font-family: var(--f-display); font-stretch: 82%; }
.df-op-name, .df-pop-name, .df-player-name { font: 700 1.1rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; font-stretch: 82%; }

/* home */
.df-hero { border-bottom: 0; padding: 56px 0 40px; }
.df-hero-art { display: none; }
.df-hero-panel { border: 0; border-radius: var(--r-lg); background: var(--s1); box-shadow: none; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.df-hp-kicker { font: 700 .95rem var(--f-display); letter-spacing: .08em; font-stretch: 82%; }
.df-hp-stats { border-top: 0; padding: 12px 0 0; }
.df-hp-rarity span { border: 0; border-radius: var(--r-xs); }
.df-uid-form { border-radius: var(--r-sm); background: #1b1b22cc; border: 1px solid var(--acc); box-shadow: 0 0 0 4px #9ef01a12; }
.df-uid-form:focus-within { box-shadow: 0 0 0 4px var(--acc-a30); }
.df-uid-form .btn { border-radius: var(--r-xs); }
.df-recent-label { font: 700 .82rem var(--f-display); letter-spacing: .1em; font-stretch: 82%; }
.df-recent-chip { border: 0; border-radius: 0; clip-path: var(--lean); padding: 0 12px; background: #ffffff14; font-weight: 700; }
.df-recent-chip:hover { background: var(--acc); color: var(--acc-ink); }
.df-db-tile { border: 0; background: var(--s1); }
.df-db-tile:hover { border-color: transparent; background: var(--s2); }
.df-db-tile .i { color: var(--acc); }
.df-db-tile b { font: 800 1.3rem/1.05 var(--f-display); text-transform: uppercase; font-stretch: 82%; }
.df-cta .panel-b { background: var(--stripes), linear-gradient(115deg, #2e2a0c 0%, #1d1b10 45%, var(--s1) 100%); }
.df-cta { overflow: hidden; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.df-player-card { border: 0; border-radius: var(--r-sm); background: var(--row-alt); }
.df-player-card:hover { border-color: transparent; background: var(--row-hover); }

/* database cards and rows */
.df-op-card { border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--s1)), var(--s1) 60%); }
.df-op-card:hover { border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, var(--s2)), var(--s2) 60%); }
.df-set, .df-result, .df-piece, .df-bw, .df-bg li, .df-skill-lv, .df-io, .df-fixed li { border: 0; }
.df-set, .df-result, .df-piece { background: var(--s1); }
.df-set:hover, .df-result:hover, .df-item:hover, .df-piece:hover { border-color: transparent; background: var(--s2); }
.df-item { border: 0; }
.df-chip { border: 0; border-radius: 0; clip-path: var(--lean); padding: 2px 9px; background: #ffffff12; font-weight: 700; }
.df-elem { border: 0; }
.df-badge { border: 0; background: #0e0e1299; border-radius: var(--r-xs); }
.df-badge.is-acc { border: 0; }
.df-pill { border: 0; background: #2a2a33; border-radius: var(--r-xs); font-weight: 600; }
.df-pill.on { border: 0; }
.df-pot-n { border: 0; border-radius: 0; clip-path: var(--lean); background: var(--acc); color: var(--acc-ink); width: 36px; font-style: normal; font-weight: 800; }
.df-subnav { border: 0; border-radius: var(--r-sm); background: #1b1b22e6; }
.df-subnav a { font: 700 .95rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-xs); font-stretch: 82%; }
.df-params .tbl-wrap { border: 0; }
.df-tb-sel select { border-radius: var(--r-sm); background-color: #121217; border: 1px solid var(--line-3); }
.df-tb-go { border-radius: var(--r-xs); }
.df-bstats { border: 0; background: #1b1b22cc; }
.df-search-form { border-radius: var(--r-sm); background: #121217; }
.df-verify { border: 0; background: var(--acc-a08); border-radius: var(--r-sm); }
.df-code { border: 0; }

/* player page: the cover card of the trackers */
.df-phero { border-bottom: 0; background: transparent; }
.df-phero-inner { padding-top: 22px; padding-bottom: 6px; }
.df-phero-row { position: relative; isolation: isolate; padding: 28px 24px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--stripes), radial-gradient(600px 260px at 12% 110%, #9ef01a24, transparent 70%), linear-gradient(120deg, #24221a, #18181d 55%, #121216); }
.df-phero-av { border: 0; border-radius: 0; background: var(--s3); box-shadow: none;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); outline: 4px solid var(--acc); outline-offset: -4px; }
.df-phero-actions .btn { border-radius: 0; clip-path: var(--cut-shape-2); }
.df-kpi-strip { gap: 0; background: var(--s1); border: 0; padding: 6px 4px; }
.df-kpi-strip .df-kpi { background: transparent; }
.df-kpis { border-top: 0; }
.df-kpis > .df-kpi + .df-kpi { border-left: 0; }
.df-pop { border: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 12%, var(--s1)), var(--s1) 60%); }
.df-pop:hover { border-color: transparent; background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 18%, var(--s2)), var(--s2) 60%); }
.df-pop-foot { border-top: 0; }
.df-pop-lv em { border: 0; }
.df-pophero-art { border-right: 0; }
.df-history li { border-bottom: 0; padding: 9px 12px; }
.df-history li:nth-child(even) { background: var(--row-alt); }
.df-stats li { border-bottom: 0; padding: 7px 10px; }
.df-stats li:nth-child(even) { background: var(--row-alt); }
.df-kv > div { border-bottom: 0; padding: 8px 10px; }
.df-kv > div:nth-child(even) { background: var(--row-alt); }
.df-skill { border-bottom: 0; }
.df-skill + .df-skill { padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .df-phero-row { padding: 20px 16px; }
  .df-pophero-art { border-bottom: 0; }
}

/* Personal pages (My accounts, Companion history, a session): the scripts fill
   .df-me after sign-in, so its children need the page's own rhythm — without
   it the cards, the period filter and the buttons sat flush against each other. */
.df-me > * + * { margin-top: 20px; }
.df-me > .sec-head { margin-top: 36px; }
.df-me > .sec-head:first-child { margin-top: 0; }
.df-me > .sec-head + * { margin-top: 14px; }
.df-me > .df-filters + * { margin-top: 16px; }
.df-me .empty { padding-block: 40px; }
.panel-b > .df-uid-form + p { margin-top: 12px; }
.df-acc-head + .row { margin-top: 12px; }

/* The More menu, as on THE FINALS: centred under "More", always reaching
   under the button, kept 16px inside the screen (app.js sets --drop-shift);
   `translate` adds to the slide-in `transform`. Groups that share a column
   (chrome.js `col`) stack in it. */
.nav-drop-menu { left: 50%; right: auto; translate: calc(-50% + var(--drop-shift, 0px)) 0; grid-template-columns: repeat(var(--cols, 2), 220px); border: 1px solid var(--line-2); border-top: 0; }
.nav-drop-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nav-drop-col + .nav-drop-col { border-left: 1px solid var(--line); padding-left: 4px; }
.nav-tag {
  margin-left: auto; padding: 1px 6px; border-radius: 3px; font: 800 .66rem/1.5 var(--f-display); letter-spacing: .06em;
  text-transform: uppercase; color: #1a1200; background: linear-gradient(135deg, #c8ff7a, var(--gold)); font-stretch: 82%; }

/* Home: the import box closes the page with the same space above it (from the
   operator cards) as below it (to the footer) — it was 20px above, 112px below. */
.page-home .df-op-grid + .df-cta { margin-top: 56px; }
.page-home .page { padding-bottom: 16px; }

/* ---------------------------------------------------------- polish 2026-10 --
   A pass over every page at desktop and phone width. */

/* Operator cards: element + class stay on one line (the later wrap rule broke
   cards like Pogranichnik onto two lines, taller than their row). */
.df-op-card .df-op-tags { flex-wrap: nowrap; max-width: 100%; }
.df-op-card .df-op-tags .df-elem, .df-op-card .df-op-tags .df-chip { padding: 2px 6px; font-size: .66rem; white-space: nowrap; }

/* Missing art (talents, base skills…): a plain tile with a glyph, not stripes. */
.df-thumb.is-empty { position: relative; background: var(--s2); }
.df-thumb.is-empty::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 34%; height: 34%;
  background: var(--s4); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Player build: the WEAPON label sits in the corner, so the level / refine /
   stage line keeps the full width instead of wrapping its last figure. */
.df-bw { position: relative; }
.df-bw-tag { position: absolute; top: 7px; right: 9px; font-size: .58rem; }
.df-bw-body a, .df-bw-body > span:first-child { padding-right: 48px; }
.df-bw-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Player picture: a real cut-corner frame (the outline was clipped away on the
   cut corners), like THE FINALS' contestant card. */
.df-phero-av {
  position: relative; outline: 0;
  background: linear-gradient(150deg, var(--acc), color-mix(in srgb, var(--acc) 35%, #000));
}
.df-phero-av::before {
  content: ''; position: absolute; inset: 4px;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background: radial-gradient(circle at 50% 30%, #2e2e38, #131318 75%);
}
.df-phero-av > * { position: relative; }
.df-phero-av img { width: calc(100% - 8px); height: calc(100% - 8px); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }

/* Database lists on a phone: the secondary columns go, so the table fits the
   screen instead of scrolling sideways with the type column cut at the edge
   (the full figures are one tap away on the detail page). */
@media (max-width: 640px) {
  .df-tbl-weapons tr > :nth-child(2), .df-tbl-weapons tr > :nth-child(4),
  .df-tbl-gear tr > :nth-child(4),
  .df-tbl-factory tr > :nth-child(3), .df-tbl-factory tr > :nth-child(4), .df-tbl-factory tr > :nth-child(5) { display: none; }
  .df-tbl-weapons .df-stars, .df-tbl-gear .df-stars { letter-spacing: -.08em; font-size: .78rem; }
  .df-tbl-weapons td:first-child, .df-tbl-gear td:first-child, .df-tbl-factory td:first-child,
  .df-tbl-weapons td:first-child *, .df-tbl-gear td:first-child *, .df-tbl-factory td:first-child * { white-space: normal; }
}

/* Skills, talents and base skills on a phone: the icon sits beside the name
   only, and the text below takes the card's full width (it was squeezed into a
   ~160px column next to the icon and the tier label). */
@media (max-width: 640px) {
  .df-skill { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px 10px; }
  .df-skill > .df-thumb { --s: 34px !important; width: 34px; height: 34px; grid-row: 1; align-self: center; }
  .df-skill-body { display: contents; }
  .df-skill-head { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .df-skill-body > :not(.df-skill-head) { grid-column: 1 / -1; }
  .df-tiers li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .df-potentials li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .df-pot-n { width: 26px; height: 26px; font-size: .8rem; }
}

/* Gear names in a build: two lines before the ellipsis ("Eternal Xiranite
   Gloves" read "Eternal Xirani…" on one). */
.df-bg li a, .df-bg li > span:last-child {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;
}

/* ============================================================= FRAME SHOP == */
/* /frames — Premium profile frames (public/js/frames.js), shared with THE FINALS tracker. A preview is the
   player page's contestant card with the frame on a canvas 1.5× its size. */
.r-legendary { --rc: #ffc82e; }
.r-epic { --rc: #b77bff; }
.r-rare { --rc: #4aa8ff; }
.r-common { --rc: #aab4c6; }

.fs-title { font: 900 clamp(2.4rem, 5vw, 3.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; gap: 14px !important; font-stretch: 82%; }
.fs-hl {
  display: inline-block; padding: 2px 16px 0 12px; color: #1a1200;
  background: linear-gradient(135deg, #d8ffa0, var(--gold) 55%, #e0a312);
  clip-path: var(--cut-shape-2); box-shadow: 0 0 40px #ffc82e33;
}
.fs-gold {
  background: linear-gradient(135deg, #c8ff7a, var(--gold) 50%, #e0a312); color: #1a1200; font-weight: 800;
  border-radius: 0; clip-path: var(--cut-shape-2); padding-right: 20px;
}
.fs-gold:hover { filter: brightness(1.08); color: #1a1200; }
.fs-pro-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px;
  background: var(--gold-a12); border: 1px solid #ffc82e55; color: var(--gold); font-weight: 700;
}
.fs-pro-pill .i { font-size: 19px; }

/* The card + frame preview at any size: --s is the card's side. */
.fs-av { --s: 92px; position: relative; width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); flex-shrink: 0; }
.fs-av-lg { --s: 128px; }
.fs-av-xl { --s: 136px; }
.fs-card-av {
  position: absolute; inset: 16.667%; overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
  background: radial-gradient(circle at 50% 30%, #3a3a48, #15151b 75%);
}
.fs-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-sil { position: absolute; left: 14%; bottom: -4%; width: 72%; fill: #ffffff26; }
.fs-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 10px #0009); pointer-events: none; }

/* Event reward banner */
.fs-event {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px 28px; margin-bottom: 28px; padding: 14px 28px 14px 18px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, #2a1650 0%, #2a2210 60%, #14141a 100%); border: 1px solid #ffd27a44;
}
.fs-event::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--stripes);
  opacity: .5;
}
.fs-event::after {
  content: ''; position: absolute; left: -60px; top: -80px; width: 340px; height: 340px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, #7a3cff55, transparent 65%);
}
.fs-kicker { font: 800 .78rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #ffd27a; font-stretch: 82%; }
.fs-event h2 { margin-top: 4px; font: 900 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; font-stretch: 82%; }
.fs-event h2 span { color: #ffd27a; }
.fs-event-sub { margin-top: 8px; color: var(--ink-2); max-width: 60ch; line-height: 1.55; }
.fs-timer { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #0e0e1299; color: #fff; font-weight: 700; font-size: .85rem; }
.fs-timer .i { font-size: 17px; color: #ffd27a; }
.fs-event-act .btn { min-width: 190px; justify-content: center; }

/* Layout */
.fs-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.fs-side { position: sticky; top: calc(var(--bar-h) + 16px); display: grid; gap: 22px; }
.fs-me { padding: 18px 18px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.fs-me-label { align-self: stretch; text-align: left; font: 800 .74rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-stretch: 82%; }
.fs-me-stage { margin: 2px 0 4px; display: grid; place-items: center; }
.fs-me-name { font: 800 1.35rem/1.1 var(--f-display); text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; font-stretch: 82%; }
.fs-me-name span { font: 700 .72rem var(--f-ui); color: var(--ink-3); text-transform: none; }
.fs-who { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; color: var(--acc-hi); font-weight: 700; font-size: .85rem; }
.fs-who .i { font-size: 16px; }
.fs-me h3 { margin-top: 16px; font-size: 1rem; }
.fs-me-p { margin: 6px 0 14px; color: var(--ink-3); font-size: .86rem; line-height: 1.5; }
.fs-me .btn { width: 100%; justify-content: center; }
.fs-count { margin-top: 2px; color: var(--ink-3); font-size: .82rem; }
.fs-count b { color: var(--gold); font-size: 1rem; }
.fs-faq h3 { font: 800 .9rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; font-stretch: 82%; }
.fs-q { border-bottom: 1px solid var(--line-2); }
.fs-q summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; font-weight: 600; font-size: .88rem; color: var(--ink-2);
}
.fs-q summary::-webkit-details-marker { display: none; }
.fs-q summary .i { color: var(--ink-3); transition: transform .2s var(--ease); }
.fs-q[open] summary .i { transform: rotate(180deg); }
.fs-q summary:hover { color: #fff; }
.fs-q p { padding: 0 0 14px; color: var(--ink-3); font-size: .84rem; line-height: 1.55; }

.fs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fs-total { color: var(--ink-3); font-weight: 600; font-size: .9rem; }
.fs-filter [aria-selected="true"][class*="r-"] { background: var(--rc); color: #111; }
.fs-series { margin-top: 18px; }
.fs-series header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fs-series h2 { font: 900 1.5rem var(--f-display); text-transform: uppercase; font-stretch: 82%; }
.fs-series header p { color: var(--ink-3); font-size: .88rem; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; }

/* One frame */
.fs-item {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden;
  background: var(--s1); border: 1px solid var(--line-2); transition: border-color .15s, transform .2s var(--ease), box-shadow .2s;
}
.fs-item:hover, .fs-item.is-preview { border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
.fs-item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #0007; }
.fs-item.is-on { border-color: var(--up); box-shadow: 0 0 0 1px var(--up), 0 0 26px #3ddc8422; }
.fs-item.is-target { animation: fsTarget 1.6s var(--ease) 2; }
@keyframes fsTarget { 50% { box-shadow: 0 0 0 3px var(--rc); } }
.fs-stage {
  position: relative; display: grid; place-items: center; padding: 10px 0 0; cursor: pointer;
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), var(--stripes), #17171d;
}
.fs-stage:focus-visible { outline: 2px solid var(--rc); outline-offset: -2px; }
.fs-rar {
  position: absolute; left: 0; top: 10px; z-index: 1; padding: 2px 10px 2px 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: var(--rc); color: #111; font: 900 .7rem/1.4 var(--f-display); letter-spacing: .08em; text-transform: uppercase; font-stretch: 82%; }
.fs-tags { margin-left: auto; display: flex; gap: 4px; }
.fs-own, .fs-ltd { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 7px; border-radius: 99px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fs-own { background: #3ddc8422; color: var(--up); }
.fs-own .i { font-size: 13px; }
.fs-ltd { background: #ffd27a1f; color: #ffd27a; }
.fs-info { padding: 10px 14px 0; flex: 1; }
.fs-name { font: 900 1.35rem/1.05 var(--f-display); text-transform: uppercase; font-stretch: 82%; }
.fs-variant { margin-top: 3px; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.fs-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--rc); transform: rotate(45deg); }
.fs-desc { margin-top: 8px; color: var(--ink-3); font-size: .8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-act { padding: 12px 14px 14px; }
.fs-btn { width: 100%; justify-content: center; }
.fs-btn[disabled] { opacity: .55; cursor: not-allowed; }
.fs-btn.is-busy { opacity: .6; pointer-events: none; }
.fs-on { background: #3ddc841f; color: var(--up); border: 1px solid #3ddc8455; }
.fs-on .fs-on-h { display: none; }
.fs-on:hover { background: #ff526322; color: var(--down); border-color: #ff526366; }
.fs-on:hover .fs-on-l { display: none; }
.fs-on:hover .fs-on-h { display: inline; }
.fs-note { margin-top: 30px; display: flex; align-items: center; gap: 6px; color: var(--ink-4); }
.fs-note .i { font-size: 16px; }

.fs-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-modal); translate: -50% 0; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: var(--r); background: #2a2a33; border: 1px solid var(--line-3); color: #fff; font-weight: 600;
  box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
}
.fs-toast.is-in { opacity: 1; transform: none; }
.fs-toast.is-error { border-color: #ff526388; }

@media (max-width: 900px) {
  .fs-layout { grid-template-columns: minmax(0, 1fr); }
  /* Status card, then the frames, then the FAQ. */
  .fs-side { display: contents; }
  .fs-me { order: 1; }
  .fs-main { order: 2; }
  .fs-faq { order: 3; }
  .fs-event { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 8px 16px 20px; }
  .fs-event-sub { margin-inline: auto; }
  .fs-event-act { width: 100%; }
  .fs-event-act .btn { width: 100%; }
}
@media (max-width: 520px) {
  .fs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fs-av { --s: 76px; }
  .fs-av-lg, .fs-av-xl { --s: 112px; }
  .fs-info { padding: 8px 10px 0; }
  .fs-name { font-size: 1.1rem; }
  .fs-desc { display: none; }
  .fs-act { padding: 10px; }
  .fs-btn { font-size: .78rem; padding: 0 8px; }
  .fs-rar { font-size: .62rem; }
  .fs-tags .fs-ltd { display: none; }
}

.fs-hero .phead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fs-hero h1 { display: flex; align-items: center; flex-wrap: wrap; }
.fs-me-btns { display: grid; gap: 8px; width: 100%; }
.fs-pick { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8rem; color: var(--ink-3); }
.fs-pick select { background: var(--s3); color: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 8px; font: inherit; }

/* The frame on a player page: the art on a canvas 1.5x the picture, centred on it. */
.df-phero-avwrap { position: relative; }
.df-pframe { position: absolute; inset: -25%; z-index: 2; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.df-pframe.is-in { opacity: 1; transform: none; }
.df-pframe img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 10px #0009); }
.df-pframe::after { content: ''; position: absolute; inset: 16.67%; pointer-events: auto; }
.df-phero-row.has-frame { padding-left: 44px; padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 640px) { .df-phero-row.has-frame { padding-left: 30px; padding-top: 30px; padding-bottom: 30px; } }
}

@layer components {
  /* Title with its operator / item icon: a gap between the two. */
  h1:has(> .df-title-ic) { display: flex; align-items: center; gap: 14px; }
  @media (max-width: 720px) { h1:has(> .df-title-ic) { gap: 10px; } h1 > .df-title-ic { --s: 40px !important; width: 40px; height: 40px; } }
  /* On-page jump links stay on one row and scroll sideways on phones. */
  @media (max-width: 720px) {
    .df-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .df-subnav::-webkit-scrollbar { display: none; }
    .df-subnav a { flex: none; white-space: nowrap; }
  }
}