/* ==================== StackDraft · Ops ====================
   The redesign the owner picked (mockup C): Siege X tactical over an esports broadcast layout.
   Hairline rules and corner brackets instead of filled cards, almost no fill colour, Chakra Petch for every number
   and HUD label, Barlow Condensed for headlines, real operator art doing the heavy lifting, no glows.
   Loaded after play.css; everything here is scoped to .pl. */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("assets/fonts/chakra-petch-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("assets/fonts/chakra-petch-700.woff2") format("woff2"); }

body.pl {
  --hud: "Chakra Petch", "Barlow Condensed", "Arial Narrow", sans-serif;
  --rule: rgba(244, 241, 234, 0.18);
  --rule-2: rgba(244, 241, 234, 0.42);
  --panel: rgba(10, 10, 11, 0.62);
  --mute-2: #8c8b91;
}

/* ---------- the building blocks ---------- */
/* a box drawn with a hairline and two corner brackets (top-left, bottom-right), never a filled card */
.pl .ops-box, .pl .ops .df-daily { position: relative; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); border: 0; }
.pl .ops-box::before, .pl .ops-box::after, .pl .ops .df-daily::before, .pl .ops .df-daily::after {
  content: ""; position: absolute; width: 1.6cqh; height: 1.6cqh; border: 2px solid var(--bone); pointer-events: none; background: none; -webkit-mask-image: none; mask-image: none; inset: auto;
}
.pl .ops-box::before, .pl .ops .df-daily::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.pl .ops-box::after, .pl .ops .df-daily::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.pl .ops-chev { display: inline-block; width: 0.42em; height: 0.7em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 0 72%, 52% 50%, 0 28%); }

/* ---------- the menu ---------- */
.pl .df-draft.ops { position: relative; display: block; padding: 0; }
.pl .ops-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pl .ops-bg::before, .pl .ops-bg::after { content: none; }
.pl .ops-plate { position: absolute; inset: 0; background: center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(0.3); }
.pl .ops-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0b 0 30%, rgba(10, 10, 11, 0.55) 60%, rgba(10, 10, 11, 0.25)), linear-gradient(0deg, #0a0a0b 0, transparent 30%); }
.pl .ops-grain { position: absolute; inset: 0; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.pl .ops-feature { position: absolute; z-index: 1; right: 25cqw; bottom: 4.6cqh; height: 90cqh; width: auto; max-width: none; pointer-events: none; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 14%); mask-image: linear-gradient(0deg, transparent 0, #000 14%); }
.pl .ops-favlbl { position: absolute; z-index: 2; right: calc(25cqw + 2cqh); bottom: 7cqh; font: 500 min(1.4cqh, 2.1cqw) / 1 var(--hud); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); }
.pl .ops-favlbl b { color: var(--bone); font-weight: 700; }

.pl .ops-tabs { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 6.6cqh; display: flex; align-items: stretch; gap: 3.2cqw; padding: 0 max(5cqw, 3cqh); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.pl .ops-tabs button { position: relative; flex: none; display: flex; align-items: center; gap: 0.8cqh; font: 700 min(1.9cqh, 2.9cqw) / 1 var(--hud); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); transition: color 0.15s; }
.pl .ops-tabs button:hover, .pl .ops-tabs button:focus-visible { color: var(--bone); outline: none; }
.pl .ops-tabs button.on { color: var(--bone); }
.pl .ops-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); }
.pl .ops-tabs i { padding: 0.35cqh 0.6cqh 0.25cqh; box-shadow: inset 0 0 0 1px var(--red); color: var(--red); font-style: normal; font-size: 0.72em; letter-spacing: 0.06em; }

.pl .ops-hero { position: absolute; z-index: 3; left: max(5cqw, 3cqh); top: 13cqh; width: min(44cqw, 84cqh); display: grid; justify-items: start; gap: 2.2cqh; }
.pl .ops-eyebrow { font: 700 min(1.7cqh, 2.5cqw) / 1 var(--hud); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); }
.pl .ops-eyebrow::before { content: "// "; color: var(--red); }
.pl .ops-h1 { margin: 0; display: grid; font: 700 min(11.5cqh, 8.4cqw) / 0.86 var(--display); text-transform: uppercase; color: var(--bone); }
.pl .ops-h1 em { font-style: normal; color: var(--red); }
.pl .ops .df-modes { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule); }
.pl .ops .df-modes button { min-width: 0; margin: 0; padding: 1.3cqh 3cqh 1.2cqh; border: 0; background: none; font: 700 min(1.9cqh, 2.8cqw) / 1 var(--hud); letter-spacing: 0.1em; color: var(--mute-2); }
.pl .ops .df-modes button.on, .pl .ops .df-modes button[data-play-mode="ranked"].on { background: var(--bone); color: #0a0a0b; }
.pl .ops .df-standing { gap: 2cqh; }
.pl .ops .df-rk { font-family: var(--display); }
.pl .ops .df-rk small { font-family: var(--hud); letter-spacing: 0.1em; }
.pl .ops .df-lv b { font-family: var(--hud); }
.pl .ops .df-badge-rank.crest { width: 7cqh; height: 7cqh; }
.pl .ops-play.df-play { display: flex; align-items: center; gap: 2.4cqh; width: min(34cqw, 62cqh); min-width: 0; margin: 0.4cqh 0 0; padding: 2.2cqh 3cqh 2cqh; background: rgba(10, 10, 11, 0.72); color: var(--bone); box-shadow: inset 0 0 0 2px var(--bone); clip-path: none; font: 900 min(6.6cqh, 9cqw) / 0.9 var(--display); letter-spacing: 0.06em; text-align: left; transition: background 0.12s, color 0.12s; animation: none; }
.pl .ops-play.df-play::after { content: none; }
.pl .ops-play .ops-chev { width: 0.36em; height: 0.6em; }
.pl .ops-play small { margin-left: auto; font: 700 min(1.5cqh, 2.2cqw) / 1.35 var(--hud); letter-spacing: 0.1em; text-align: right; text-transform: uppercase; color: var(--mute-2); }
.pl .ops-play:hover, .pl .ops-play:focus-visible { background: var(--bone); color: #0a0a0b; outline: none; transform: none; box-shadow: inset 0 0 0 2px var(--bone); }
.pl .ops-play:hover small, .pl .ops-play:focus-visible small { color: #3a393e; }
.pl .ops-play:active { transform: translateY(2px); }
.pl .ops-sub { max-width: 46ch; margin: 0; font: 500 min(2.1cqh, 3.1cqw) / 1.45 var(--body); color: #b9b7bd; text-align: left; animation: none; }

.pl .ops-side { position: absolute; z-index: 3; right: max(4cqw, 3cqh); top: 12cqh; width: min(29cqw, 54cqh); display: grid; gap: 2cqh; }
/* the daily, in the Ops frame */
.pl .ops .df-daily { padding: 2.2cqh 2.4cqh; gap: 1.1cqh; background: var(--panel); }
.pl .ops .df-daily.done, .pl .ops .df-daily.done.won { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.pl .ops .df-dlabel { font: 700 min(1.6cqh, 2.4cqw) / 1 var(--hud); letter-spacing: 0.14em; color: var(--bone); }
.pl .ops .df-dlabel::before { content: "// "; color: var(--red); }
.pl .ops .df-dlabel i { display: none; }
.pl .ops .df-dhead { font: 700 min(4.4cqh, 6.4cqw) / 0.92 var(--display); }
.pl .ops .df-dline { font-size: min(1.9cqh, 2.9cqw); }
.pl .ops .df-dstreak { font-family: var(--hud); }
.pl .ops .df-dstreak b { font-family: var(--hud); font-weight: 700; }
.pl .ops .df-dbtn, .pl .ops .df-dbtn.ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px var(--bone); font-size: min(2.4cqh, 3.6cqw); }
.pl .ops .df-dbtn::after { content: none; }
.pl .ops .df-dbtn:hover { background: var(--bone); color: #0a0a0b; filter: none; }
.pl .ops .df-dfoot small { font-family: var(--hud); padding-top: 1.2cqh; border-top: 1px solid var(--rule); }
/* the live top 5 */
.pl .ops-top5 { display: grid; gap: 0; width: 100%; padding: 1.8cqh 0 1.2cqh; text-align: left; color: var(--bone); cursor: pointer; }
.pl .ops-top5:hover { box-shadow: inset 0 0 0 1px var(--rule-2); }
.pl .ops-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2.4cqh 1.2cqh; border-bottom: 1px solid var(--rule); }
.pl .ops-head b { font: 700 min(2.6cqh, 3.8cqw) / 1 var(--display); text-transform: uppercase; }
.pl .ops-live { display: inline-flex; align-items: center; gap: 0.7cqh; font: 700 min(1.4cqh, 2.1cqw) / 1 var(--hud); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.pl .ops-live i { width: 0.8cqh; height: 0.8cqh; background: var(--red); }
.pl .ops-top5 ol { margin: 0; padding: 0; list-style: none; }
.pl .ops-top5 li { display: grid; grid-template-columns: 2.6cqh 5cqh minmax(0, 1fr) auto; align-items: center; gap: 1.2cqh; padding: 0.7cqh 2.4cqh; border-bottom: 1px solid var(--rule); }
.pl .ops-top5 li.empty { display: block; padding: 2cqh 2.4cqh; font: 500 min(1.8cqh, 2.7cqw) / 1.3 var(--body); color: var(--mute-2); }
.pl .ops-top5 .n { font: 700 min(1.7cqh, 2.5cqw) / 1 var(--hud); color: var(--mute-2); }
.pl .ops-top5 .df-badge-rank.crest { width: 5cqh; height: 5cqh; }
.pl .ops-top5 .nm { display: grid; gap: 0.3cqh; min-width: 0; }
.pl .ops-top5 .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 min(2.1cqh, 3.1cqw) / 1 var(--display); letter-spacing: 0.02em; }
.pl .ops-top5 .nm small { font: 700 min(1.25cqh, 1.9cqw) / 1 var(--hud); letter-spacing: 0.1em; text-transform: uppercase; }
.pl .ops-top5 .rp { font: 700 min(2cqh, 3cqw) / 1 var(--hud); font-variant-numeric: tabular-nums; }
.pl .ops-more { display: flex; align-items: center; justify-content: flex-end; gap: 0.8cqh; padding: 1.2cqh 2.4cqh 0; font: 700 min(1.4cqh, 2.1cqw) / 1 var(--hud); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); }
.pl .ops-top5:hover .ops-more { color: var(--bone); }

.pl .ops-ticker { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 4.8cqh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--rule); background: rgba(10, 10, 11, 0.85); }
.pl .ops-ticker > span { flex: none; height: 100%; display: flex; align-items: center; padding: 0 2.6cqh; border-right: 1px solid var(--rule); font: 500 min(1.5cqh, 2.2cqw) / 1 var(--hud); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); white-space: nowrap; }
.pl .ops-ticker > span b { margin-right: 0.9cqh; font: 700 min(2.1cqh, 3cqw) / 1 var(--hud); letter-spacing: 0.02em; color: var(--bone); }
.pl .ops-ticker > .lbl { color: var(--red); font-weight: 700; letter-spacing: 0.16em; }

/* phones and tall screens: one column that scrolls, the operator faded in behind the headline */
@container (max-aspect-ratio: 6 / 5) {
  .pl .df-draft.ops-menu { display: flex; flex-direction: column; gap: 2.6cqh; overflow-y: auto; scrollbar-width: none; padding-bottom: 2cqh; }
  .pl .ops-menu > .ops-tabs, .pl .ops-menu > .ops-hero, .pl .ops-menu > .ops-side, .pl .ops-menu > .ops-ticker { position: relative; inset: auto; width: auto; }
  .pl .ops-menu > .ops-hero, .pl .ops-menu > .ops-side { margin: 0 16px; }
  .pl .ops-menu > .ops-tabs { flex: none; padding: 0 16px; gap: 6cqw; }
  .pl .ops-feature { right: -22cqw; top: 7cqh; bottom: auto; height: 62cqh; opacity: 0.4; }
  .pl .ops-favlbl { display: none; }
  .pl .ops-h1 { font-size: min(9cqh, 15cqw); }
  .pl .ops-play.df-play { width: 100%; }
  .pl .ops-ticker { flex: none; flex-wrap: wrap; height: auto; }
  .pl .ops-ticker > span { height: 4.4cqh; }
}

/* ---------- the panels (leaderboard, ranks, stats) in the Ops frame ---------- */
.pl .df-draft.ops > .df-lboard { position: relative; z-index: 3; padding-top: 10cqh; padding-left: max(5cqw, 3cqh); }
.pl .ops .df-lbhead .df-label { font: 700 min(1.7cqh, 2.5cqw) / 1 var(--hud); letter-spacing: 0.16em; color: var(--bone); }
.pl .ops .df-lbhead .df-label::before { content: "// "; color: var(--red); width: auto; height: auto; background: none; }
.pl .ops .df-lbtitle { font-weight: 700; }
.pl .ops .df-live { box-shadow: inset 0 0 0 1px var(--red); border: 0; font-family: var(--hud); }
.pl .ops .df-live i { border-radius: 0; animation: none; }
.pl .ops .df-lbrow, .pl .ops .df-lrow { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.pl .ops .df-lbrow.podium { background: linear-gradient(90deg, color-mix(in srgb, var(--rk) 22%, transparent), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rk) 45%, transparent); }
.pl .ops .df-lbrow .df-badge-rank.crest { width: 5.4cqh; height: 5.4cqh; filter: none; }
.pl .ops .df-lbrow { grid-template-columns: 3.6cqh 5.4cqh minmax(0, 1fr) auto; }
.pl .ops .df-lbpos, .pl .ops .df-lbrp b, .pl .ops .df-lbrp small, .pl .ops .df-lbname small, .pl .ops .df-lname small, .pl .ops .df-ldivs i, .pl .ops .df-lbfoot, .pl .ops .df-scard small, .pl .ops .df-sbar small, .pl .ops .df-sops small, .pl .ops .df-rnote { font-family: var(--hud); }
.pl .ops .df-lrow .df-badge-rank.crest { width: 7cqh; height: 7cqh; }
.pl .ops .df-lrow { grid-template-columns: 7cqh minmax(0, 19cqh) minmax(0, 1fr) auto; }
.pl .ops .df-lname small { white-space: nowrap; }
.pl .ops .df-ldivs i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rk) 35%, transparent); border: 0; }
.pl .ops .df-ctop { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); border: 0; grid-template-columns: 6cqh minmax(0, 1fr); }
.pl .ops .df-ctop.podium { box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5); }
.pl .ops .df-ctop img { width: 6cqh; height: 6cqh; }
.pl .ops .df-scard, .pl .ops .df-sblock { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); border: 0; }
.pl .ops .df-scard b { font-family: var(--hud); font-weight: 700; }
.pl .ops .df-scard.txt b { font-family: var(--display); }
.pl .ops .df-sbar b { font-family: var(--hud); }
.pl .ops .df-lbbtn { box-shadow: inset 0 0 0 2px var(--bone); border: 0; font-family: var(--hud); }
@container (max-aspect-ratio: 6 / 5) {
  .pl .df-draft.ops:not(.ops-menu) > .ops-tabs { position: absolute; }
  .pl .df-draft.ops > .df-lboard { position: absolute; inset: 6.6cqh 0 0 0; padding: 3cqh 16px 4cqh; }
  .pl .ops .df-lrow { grid-template-columns: 6cqh minmax(0, 1fr) auto; }
}

/* ==================== Ops across the match ==================== */
/* the match's map, faded to grey behind every screen (stackdraft.js sets --plate when the map is rolled) */
.pl .draft { isolation: isolate; background: #0a0a0b; }
/* full-screen map art (assets/web/maps-hd, 2560 wide: owner, Oct 21, nothing blurry), with a fine scanline screen
   and a vignette over it so it reads as a backdrop */
.pl .draft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plate, none) center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(0.24); pointer-events: none; }
.pl .draft::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,0.7) 100%); }
.pl .draft > .df-draft { position: relative; }
.pl .draft > .df-draft::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* labels and numbers: Chakra Petch */
.pl .df-label { font-family: var(--hud); font-weight: 700; letter-spacing: 0.14em; }
.pl .df-big, .pl .df-bigpct, .pl .df-num, .pl .df-odds b, .pl .df-count, .pl .df-clock b, .pl .df-fuse small, .pl .df-key, .pl .slot-n, .pl .df-gain, .pl .df-delta { font-family: var(--hud); font-weight: 700; }
.pl .df-team, .pl .df-rphase, .pl .df-cap, .pl .df-where, .pl .df-tools button, .pl .df-roles i, .pl .df-say, .pl-hud, .pl .board-head, .pl .df-sitebrief span, .pl .df-sitebrief i { font-family: var(--hud); }
.pl .df-cap { letter-spacing: 0.12em; }

/* the number boxes over the offers: outlined, not white tiles */
.pl .df-key { background: rgba(10, 10, 11, 0.7); border: 0; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--bone); }
.pl .df-col:hover .df-key, .pl .df-col.kept .df-key { box-shadow: inset 0 0 0 2px var(--bone); background: var(--bone); color: #0a0a0b; }

/* the big action button: a dark panel with a bone outline and a red edge, not a slanted red slab */
.pl .spin { background: rgba(10, 10, 11, 0.85); color: var(--bone); clip-path: none; box-shadow: inset 0 0 0 2px var(--bone), inset 0.7cqh 0 0 var(--red); }
.pl .spin:hover { background: var(--bone); color: #0a0a0b; filter: none; }
.pl .spin:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--bone), inset 0.7cqh 0 0 var(--red); }
.pl .spin-label { font-family: var(--display); letter-spacing: 0.1em; }
.pl-done .spin { background: var(--bone); color: #0a0a0b; }
.pl-share { clip-path: none; box-shadow: none; }

/* the stack down the side: hairlines */
.pl .slot { border: 0; box-shadow: inset 0 0 0 1px var(--rule); background: rgba(10, 10, 11, 0.55); }
.pl .slot-n { background: transparent; box-shadow: inset -1px 0 0 var(--rule); color: var(--mute-2); }
.pl .slot.filled { box-shadow: inset 0 0 0 1px var(--rule), inset calc(var(--bu) * -1.2) 0 0 var(--accent); }
.pl .slot.filled .slot-n { background: transparent; color: var(--bone); }
.pl .board { border-color: var(--rule); }

/* the top bar */
.pl-top { border-bottom: 1px solid var(--rule); }
.pl-hud { letter-spacing: 0.14em; }
.pl-sound, .pl-acct { font-family: var(--hud); }

/* tips and the Algo's lines: Ops frames */
.pl .toast { background: rgba(10, 10, 11, 0.92); color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-2), inset 0.5cqh 0 0 var(--red); font-family: var(--hud); letter-spacing: 0.08em; }
.pl .df-say { font-family: var(--hud); font-weight: 700; letter-spacing: 0.04em; background: rgba(10, 10, 11, 0.94); }

/* the showdown: the score as a broadcast scorebug, the caption as a lower third */
.pl .df-arena .df-board { padding: 1cqh 2cqh; background: rgba(10, 10, 11, 0.72); box-shadow: inset 0 0 0 1px var(--rule); }
.pl .df-arena .df-team.me { box-shadow: inset 0 0.5cqh 0 var(--me); padding-top: 1cqh; }
.pl .df-arena .df-team.them { box-shadow: inset 0 0.5cqh 0 var(--them); padding-top: 1cqh; }
.pl .df-reel.hybrid .df-bcap.story { padding: 0.9cqh 1.6cqh 0.8cqh; background: rgba(10, 10, 11, 0.85); box-shadow: inset 0.5cqh 0 0 var(--red), inset 0 0 0 1px var(--rule); text-align: left; }
.pl .df-reel.hybrid .df-bcap.story.final { box-shadow: inset 0 0 0 1px var(--red); }
.pl .df-rphase { box-shadow: inset 0 0 0 1px var(--rule-2); background: rgba(10, 10, 11, 0.7); }
.pl .df-feed p { box-shadow: inset 0 0 0 1px var(--rule); }
.pl .df-bmini { box-shadow: inset 0 0 0 1px var(--rule); }
.pl .df-btag { font-family: var(--hud); }
.pl .df-btag.neutral { font-family: var(--hud); }

/* results */
.pl .df-next, .pl .df-back { font-family: var(--hud); }
.pl .df-rd { font-family: var(--hud); }
.pl .df-roll.choose .df-key { border: 0; background: rgba(10, 10, 11, 0.75); box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone); }
.pl .df-roll.choose .df-col:hover .df-key { background: var(--bone); color: #0a0a0b; }
.pl .df-col.kept .df-key, .pl .df-roll.choose .df-col.kept .df-key { background: var(--me); box-shadow: none; color: #0a0a0b; }
/* narrower stages (the Compact recording layout, tablets on their side): the operator steps right and back */
@container (min-aspect-ratio: 6 / 5) and (max-aspect-ratio: 3 / 2) {
  .pl .ops-feature { right: 22cqw; height: 80cqh; opacity: 0.55; }
  .pl .ops-favlbl { right: 26cqw; }
  .pl .ops-play small { display: none; }
}
.pl .ops-hero .df-standing, .pl .ops-sub, .pl .ops-eyebrow { text-shadow: 0 0 1.2cqh #0a0a0b, 0 0 0.4cqh #0a0a0b; }
/* the text column always reads: a shade between the operator and the left half of the menu */
.pl .df-draft.ops-menu::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(10, 10, 11, 0.9) 0, rgba(10, 10, 11, 0.7) 32%, rgba(10, 10, 11, 0) 52%); }
.pl .ops .df-modes { background: rgba(10, 10, 11, 0.8); }
@container (max-aspect-ratio: 6 / 5) { .pl .df-draft.ops-menu::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0.2), rgba(10, 10, 11, 0.75) 40%); } }
.pl .df-dsocial { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6cqh 1.2cqh; font: 500 min(1.5cqh, 2.3cqw) / 1 var(--hud); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-2); }
.pl .df-dsocial b { color: var(--bone); font-weight: 700; }
.pl .df-dsocial i { width: 0.5cqh; height: 0.5cqh; background: var(--rule-2); transform: rotate(45deg); }
.pl .df-dsocial[hidden] { display: none; }
/* a promotion shows the new badge, big, landing on the banner */
.pl .df-promocrest { display: block; justify-self: center; margin-bottom: 1cqh; }
.pl .df-promocrest .df-badge-rank.crest { width: 22cqh; height: 22cqh; animation: crestIn 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes crestIn { from { transform: scale(1.8) rotate(-8deg); opacity: 0; filter: brightness(3); } to { transform: none; opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .pl .df-promocrest .df-badge-rank.crest { animation: none; } }

/* the daily's XP bonus and its reset clock (owner, Oct 21: a reason to play it every day) */
.pl .df-dxp { display: grid; justify-items: end; gap: 0.4cqh; font: 700 min(2.6cqh, 3.9cqw) / 1 var(--hud); color: #f2c14e; text-shadow: 0 0 1.6cqh rgba(242, 193, 78, 0.35); }
.pl .df-dfoot .df-dxp small, .pl .ops .df-dfoot .df-dxp small { width: auto; padding: 0; border: 0; font: 600 min(1.3cqh, 2cqw) / 1 var(--hud); letter-spacing: 0.16em; text-transform: uppercase; color: #a08a52; text-shadow: none; }
.pl .df-dclock { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqh; margin-top: 0.4cqh; padding-top: 1.1cqh; border-top: 1px solid rgba(244, 241, 234, 0.12); }
.pl .df-dclock small { font: 600 min(1.4cqh, 2.1cqw) / 1 var(--hud); letter-spacing: 0.2em; text-transform: uppercase; color: #8c8b91; }
.pl .df-dclock b { font: 700 min(2.2cqh, 3.3cqw) / 1 var(--hud); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--bone, #f4f1ea); }
.pl .df-shield { margin-left: 1cqh; padding: 0.4cqh 0.9cqh; font: 700 min(1.4cqh, 2.1cqw) / 1 var(--hud); letter-spacing: 0.14em; text-transform: uppercase; color: #f2c14e; box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5); }