:root {
  --bg: #14161a;
  --panel: #1e2128;
  --panel-2: #262a33;
  --text: #e7e9ee;
  --muted: #9aa1ad;
  --accent: #e0a458;
  --line: #333845;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

/* --- Bootstrap theming: map Bootstrap's design tokens onto the site palette so its
   components (navbar, tables, buttons, badges, forms) inherit our dark look. Loaded
   after bootstrap.min.css, so these win. --- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-bg: var(--panel);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--text);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
  --bs-link-color-rgb: 224, 164, 88;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 224, 164, 88;
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: var(--panel);
}

/* Headings: keep the prior (modest, bold) sizing rather than Bootstrap Reboot's larger,
   lighter defaults, so unstyled section headings don't balloon. Component rules below
   (e.g. .window h2) are more specific and still win where they set a size. */
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.6rem; }
h3 { font-size: 1.15rem; font-weight: 700; }

/* Header / navbar (Bootstrap navbar themed to the panel bar it replaced) */
.site-navbar {
  --bs-navbar-color: var(--muted);
  --bs-navbar-hover-color: var(--text);
  --bs-navbar-active-color: var(--text);
  --bs-navbar-brand-color: var(--text);
  --bs-navbar-brand-hover-color: var(--text);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.navbar-brand.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); }
.brand-mark { flex: none; color: var(--accent); }
.navbar-brand.brand:hover .brand-mark { color: var(--text); }

.format-nav {
  display: flex; flex-wrap: nowrap; gap: 0.4rem;
  padding: 0.6rem 1.2rem; background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.format-nav a {
  flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
  padding: 0.2rem 0.7rem; border-radius: 999px; color: var(--muted);
  border: 1px solid transparent;
}
@media (max-width: 640px) { .format-nav { flex-wrap: wrap; } .format-nav a { flex: 0 1 auto; } }
.format-nav a:hover { color: var(--text); text-decoration: none; }
.format-nav a.active { color: var(--bg); background: var(--accent); font-weight: 600; }

/* display:block + margin:0 neutralize Bootstrap's .breadcrumb flex/margin component. */
.breadcrumb { display: block; margin: 0; padding: 0.6rem 1.2rem; color: var(--muted); border-bottom: 1px solid var(--line); }

.content { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.site-footer { color: var(--muted); text-align: center; padding: 1.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; }

/* Bootstrap .table header tweak: uppercase muted column labels like the original. */
.table > thead > tr > th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.date { color: var(--muted); white-space: nowrap; }
.num { text-align: right; color: var(--muted); }
.empty, .placeholder { color: var(--muted); }

/* Analytics */
.analytics-group { margin-bottom: 2rem; }
.analytics-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.analytics-list a {
  display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--text);
}
.analytics-list a:hover { background: var(--panel-2); text-decoration: none; }
.window { margin-bottom: 2.4rem; }
.window h2 { font-size: 1.15rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.stats-table { border-collapse: collapse; min-width: 360px; margin-bottom: 1.2rem; }
.stats-table th, .stats-table td { padding: 0.3rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
.stats-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Win-rate matrix */
.matrix-wrap { overflow-x: auto; padding-bottom: 0.5rem; }
.matrix { border-collapse: collapse; font-size: 0.8rem; }
.matrix th { font-weight: 600; }
.mx-corner { background: var(--bg); }
.mx-colh { height: 130px; vertical-align: bottom; padding: 0 0 0.3rem; }
.mx-colh span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: var(--muted); }
.mx-rowh { text-align: right; white-space: nowrap; padding: 0 0.5rem; position: -webkit-sticky; position: sticky; left: 0; background: var(--bg); color: var(--muted); }
.mx-cell { width: 3.1rem; height: 2.6rem; text-align: center; border: 1px solid var(--line); padding: 0; }
.mx-cell a { display: block; padding: 0.25rem 0.1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mx-cell a:hover { text-decoration: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.mx-cell small { display: block; color: var(--muted); font-size: 0.68rem; }
.mx-empty { background: var(--panel); }
.mx-mirror { background: var(--panel); color: var(--muted); }

/* Matrix cell popover (pure CSS :target) */
.mx-pop {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 60; width: min(440px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.1rem; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}
.mx-pop:target { display: block; }
.mx-pop h4 { margin: 0 0 0.6rem; font-size: 1rem; padding-right: 1.4rem; }
.mx-pop-close { position: absolute; top: 0.5rem; right: 0.7rem; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.mx-pop ul { list-style: none; margin: 0; padding: 0; }
.mx-pop li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.mx-line1 { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.8rem; }
.mx-round { color: var(--accent); font-weight: 600; }
.mx-score { color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-players { color: var(--text); margin-top: 0.1rem; }
.mx-players a { color: var(--accent); }
.mx-rec { font-variant-numeric: tabular-nums; font-size: 0.8rem; }

/* Day 2 conversion */
.day2-wrap { margin: 2rem 0; }
.day2-wrap > p { margin: 0.2rem 0 0.8rem; font-size: 0.85rem; }
table.day2 { border-collapse: collapse; font-size: 0.88rem; width: 100%; max-width: 540px; }
table.day2 th, table.day2 td { text-align: left; padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--line); }
table.day2 th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.day2 td { font-variant-numeric: tabular-nums; }
table.day2 td small { color: var(--muted); }
table.day2 td.pos { color: #5cc97a; }
table.day2 td.neg { color: #d96a6a; }
.day2-other a { color: var(--accent); }
.day2-pop { width: min(560px, 94vw); }
.day2-pop:target { display: block; }
.day2-pop table.day2 { max-width: none; }

/* Insights — three per row, each its own card; equal height within a row */
.insights-wrap { margin-bottom: 2rem; }
.insights-card > h2 { margin-top: 0; }
.insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; align-items: stretch; }
.insights > li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; }
.ins-title { display: block; font-weight: 700; font-size: 0.98rem; text-transform: capitalize; }
.ins-sub { display: block; color: var(--muted); font-size: 0.76rem; margin-bottom: 0.55rem; }
.ins-value { font-weight: 600; }
.ins-list { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.2rem; }
.ins-list li { font-size: 0.9rem; }
.ins-list li::marker { color: var(--muted); }
@media (max-width: 560px) { .insights { grid-template-columns: 1fr; } }

/* JS-driven view switcher: controls + panels. Panels hide via the [hidden]
   attribute set by JS; with JS off they stack (no [hidden] applied). */
[data-panel][hidden] { display: none; }
.ca-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; margin: 0.4rem 0 1.6rem; }
.ctrl { display: flex; flex-direction: column; gap: 0.3rem; }
.ctrl-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem; }
.seg button { cursor: pointer; padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); background: none; border: 1px solid transparent; white-space: nowrap; font-family: inherit; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Format/source toggles: stretch full width, stay on one line (equal-width buttons). */
.widget-seg, .arena-fmt-toggle { display: flex; width: 100%; flex-wrap: nowrap; }
.widget-seg button, .arena-fmt-toggle button {
  flex: 1 1 0; min-width: 0; padding: 0.35rem 0.3rem; font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; }

/* Format on Arena coverage */
.arena-fmt { margin-top: 1rem; }
.arena-fmt-toggle { margin: 0.6rem 0 1.8rem; }

/* Big, dramatic summary: progress bar + standout on/missing tallies. */
.arena-summary { display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem 2.4rem; margin: 0.4rem 0 1.8rem; }
.arena-bar { position: relative; display: flex; align-items: baseline; gap: 0.5rem;
  height: 3rem; flex: 0 1 320px; max-width: 360px; padding: 0 0.9rem; border-radius: 12px;
  overflow: hidden; background: rgba(200,80,80,0.22); border: 1px solid var(--line); }
.arena-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--on);
  background: linear-gradient(90deg, rgba(70,170,95,0.55), rgba(70,170,95,0.32)); }
.arena-bar-pct { position: relative; z-index: 1; font-size: 1.7rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 3rem; }
.arena-bar-label { position: relative; z-index: 1; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em; }
.arena-tallies { display: flex; gap: 1.4rem; }
.tally { display: flex; flex-direction: column; line-height: 1.05; }
.tally b { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tally span { margin-top: 0.15rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.tally-on b { color: #5cc97a; }
.tally-off b { color: #d96a6a; }

table.arena-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin-bottom: 2.4rem; }
table.arena-table th, table.arena-table td { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line); }
table.arena-table th { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: bottom; }
table.arena-table th.num { text-align: right; }
table.arena-table th.grp { text-align: center; color: var(--text); border-bottom: 1px solid var(--line); }
table.arena-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.arena-table td.arch { font-weight: 600; }
table.arena-table td.strong { color: var(--text); font-weight: 700; }
.arena-on { color: #5cc97a; }
.arena-off { color: #d96a6a; }
/* Hover popover listing the cards behind an on/missing count (anchored to the cell). */
.ap-trigger { position: relative; display: inline-block; font-weight: 700;
  padding: 0.05rem 0.3rem; border-radius: 4px; cursor: default; }
.ap-trigger:hover { outline: 2px solid var(--accent); outline-offset: -1px; }
.ap-pop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; z-index: 60; width: 320px; max-width: 84vw; max-height: 58vh; overflow-y: auto;
  text-align: left; font-weight: 400; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7rem 0.85rem; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  columns: 2; column-gap: 1.1rem; }
.ap-trigger:hover .ap-pop { display: block; }
.ap-pop-head { column-span: all; display: block; font-weight: 700; color: var(--text);
  font-size: 0.78rem; margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
.ap-card { display: block; break-inside: avoid; color: var(--text); font-size: 0.82rem;
  padding: 0.1rem 0; }
/* A zero count (nothing on/missing) — green and bold, matching the trigger numbers. */
.ap-zero { display: inline-block; color: #5cc97a; font-weight: 700; padding: 0.05rem 0.3rem; }
.arena-minibar { display: inline-block; width: 90px; height: 0.55rem; border-radius: 999px;
  background: rgba(200,80,80,0.3); vertical-align: middle; margin-right: 0.5rem; position: relative; overflow: hidden; }
.arena-minibar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--on); background: #5cc97a; }
/* Larger missing-card images: 2 per row on phones, up to 4 on wide screens. */
/* Missing cards: the card image, which flips in place (same footprint) to the archetypes
   that run it on hover / focus / tap — not a floating popover. */
.card-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 768px) { .card-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .card-gallery { grid-template-columns: repeat(4, 1fr); } }
.gal-card { margin: 0; outline: none; }
.gal-frame { position: relative; cursor: pointer; }
.gal-frame img { width: 100%; border-radius: 4.75% / 3.5%; display: block; }
.gal-noimg { aspect-ratio: 5/7; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0.5rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4.75% / 3.5%; font-size: 0.8rem; }
/* The info overlay fills the image's box exactly. */
.gal-info { position: absolute; inset: 0; overflow-y: auto; opacity: 0; visibility: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4.75% / 3.5%;
  padding: 0.55rem 0.65rem; transition: opacity 0.1s; }
.gal-frame:hover .gal-info, .gal-card:focus .gal-info, .gal-card.flipped .gal-info { opacity: 1; visibility: visible; }
.gal-info-head { font-weight: 700; font-size: 0.84rem; line-height: 1.25;
  margin-bottom: 0.35rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
.gal-info-list { list-style: none; margin: 0; padding: 0; }
.gal-info-list li { font-size: 0.78rem; padding: 0.08rem 0; }
.gal-card figcaption { margin-top: 0.3rem; font-size: 0.78rem; }
.gal-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Untagged-decks review page */
.ut-list { display: grid; gap: 0.4rem; }
.ut-deck { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.ut-deck > summary { cursor: pointer; padding: 0.5rem 0.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; font-size: 0.88rem; }
.ut-deck > summary::-webkit-details-marker { display: none; }
.ut-evt { color: var(--muted); font-size: 0.78rem; }
.ut-event { font-weight: 600; }
.ut-player { color: var(--muted); }
.ut-srcname { color: var(--accent); font-style: italic; }
.ut-counts { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ut-cards { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0.3rem 0.9rem 0.9rem; border-top: 1px solid var(--line); }
.ut-col { min-width: 220px; }
.ut-col h4 { margin: 0.6rem 0 0.3rem; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ut-col ul { list-style: none; margin: 0; padding: 0; }
.ut-col li { font-size: 0.86rem; padding: 0.05rem 0; }
.ut-col .qty { display: inline-block; min-width: 1.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* In-person event index table */
.source-link { margin-left: 0.4rem; font-size: 0.85rem; }

.winner { white-space: nowrap; }
.winner-player { color: var(--muted); }
.muted { color: var(--muted); }

.fmt-tag {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 4px;
  font-size: 0.78rem; font-weight: 600; background: var(--panel-2); color: var(--text);
}

/* Event header */
.event-head { margin-bottom: 1.4rem; }
.event-meta { display: flex; gap: 1rem; color: var(--muted); flex-wrap: wrap; align-items: center; }
.source-link { margin-left: auto; font-size: 0.85rem; }
.notice, .placeholder { color: var(--accent); }

/* Top-8 playoff bracket */
.bracket-wrap { margin-bottom: 1.6rem; }
.bracket-wrap h2 { font-size: 1.1rem; margin: 0 0 0.7rem; }
/* min-height gives space-around more room, widening the gaps between matches
   while keeping each later round centered on the matches it descends from. */
.bracket { display: flex; gap: 1rem; align-items: stretch; overflow-x: auto; padding-bottom: 0.4rem; min-height: 460px; }
.bracket-round { display: flex; flex-direction: column; min-width: 240px; }
.bracket-round h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }
/* Equal-height cells: each match is centered in its cell, so a later round's match
   lines up with the midpoint of the two cells it descends from. Connector elbows are
   drawn per cell with pseudo-elements; height:50% always reaches the pair midpoint
   because cell height scales with the number of matches in the round. */
.bracket-matches { flex: 1; display: flex; flex-direction: column; }
.bracket-cell { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; }
.bracket-match { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

/* Connector lines toward the next round (drawn on every cell except the final round). */
.bracket-round:not(:last-child) .bracket-cell::after {
  content: ""; position: absolute; left: 100%; width: 1rem; box-sizing: border-box;
  border-right: 2px solid var(--line);
}
.bracket-round:not(:last-child) .bracket-cell:nth-child(odd)::after {
  top: 50%; height: 50%; border-top: 2px solid var(--line);      /* elbow down to pair midpoint */
}
.bracket-round:not(:last-child) .bracket-cell:nth-child(even)::after {
  bottom: 50%; height: 50%; border-bottom: 2px solid var(--line); /* elbow up to pair midpoint */
}
.bracket-entrant {
  display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline;
  padding: 0.35rem 0.6rem; font-size: 0.85rem;
}
.bracket-entrant + .bracket-entrant { border-top: 1px solid var(--line); }
.bracket-entrant.winner { background: rgba(224,164,88,0.12); }
.bracket-entrant.winner .be-name { color: var(--accent); font-weight: 600; }
.be-player { color: var(--muted); font-weight: 400; }
.be-record { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Master / detail: deck list on the left, selected decklist on the right (zero JS,
   driven by :target so it works in every browser including Safari). */
.deck-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1.4rem; align-items: start; }
.deck-row { text-decoration: none; color: inherit; }
.deck-row:hover { text-decoration: none; }

/* Left: the deck list scrolls on its own. Right: the detail stays put (sticky). */
.deck-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow-y: auto;
  position: -webkit-sticky; position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem);
}
.deck-list > li + li { border-top: 1px solid var(--line); }
.deck-row {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem; cursor: pointer; border-left: 3px solid transparent;
}
.deck-row:hover { background: var(--panel); }
.dr-place { color: var(--muted); font-weight: 700; font-size: 0.85rem; text-align: center; font-variant-numeric: tabular-nums; }
.dr-place.record-50 { color: var(--accent); font-size: 0.78rem; }
.dr-main { min-width: 0; }
.dr-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-player { display: block; color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-record { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.deck-panels { position: -webkit-sticky; position: sticky; top: 1rem; }
/* Detail visibility via :target. The first deck shows by default; on browsers with
   :has() it's hidden once another deck is chosen. Without :has() (very old Safari)
   the first deck still shows, so the page is never blank. */
.deck-panels .deck-detail { display: none; }
.deck-detail:target { display: block; }
.deck-detail:first-child { display: block; }
.deck-panels:has(.deck-detail:target) .deck-detail:first-child:not(:target) { display: none; }
/* When JS is active it drives selection (no URL hash -> no page jump). */
.deck-panels.js-active .deck-detail { display: none; }
.deck-panels.js-active .deck-detail.selected { display: block; }
.deck-row.active { background: var(--panel-2); border-left-color: var(--accent); }
.deck-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.deck-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; }
.deck-head .place {
  flex: none; min-width: 1.8rem; height: 1.8rem; line-height: 1.8rem; padding: 0 0.45rem;
  text-align: center; background: var(--accent); color: var(--bg);
  border-radius: 999px; font-weight: 700; font-size: 0.82rem;
}
.deck-title { font-size: 1.15rem; margin: 0; flex: 1; }
.deck-head .player { color: var(--muted); font-size: 0.85rem; }
/* Flag a deck whose mainboard exceeds the 60-card minimum */
.deck-flag {
  flex: none; padding: 0.05rem 0.4rem; border-radius: 999px; white-space: nowrap;
  background: rgba(220, 170, 70, 0.18); color: #d8a13e; border: 1px solid rgba(220, 170, 70, 0.4);
  font-size: 0.72rem; font-weight: 700;
}
.dr-player .deck-flag { margin-left: 0.35rem; vertical-align: middle; }
/* Mainboard: type-groups are pre-balanced into intact columns (normal flow, so the
   absolutely-positioned hover preview never reflows them). */
.deck-body .mainboard { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; align-items: start; }
.deck-col { min-width: 0; }
.deck-body .sideboard { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.sideboard-cards { list-style: none; margin: 0; padding: 0; -webkit-columns: 2; columns: 2; -webkit-column-gap: 1.6rem; column-gap: 1.6rem; }

.deck-select { display: none; }   /* desktop keeps the full master list */

@media (max-width: 760px) {
  .deck-layout { grid-template-columns: 1fr; }
  .deck-select { display: block; margin-bottom: 0.9rem; }
  .deck-list { display: none; }   /* replaced by the dropdown on mobile */
  .deck-panels { position: static; }
}

/* Mana symbols are <i> elements; each ms-<code> class sets the SVG as a background
   (the ms-<code> rules are generated at build time from static/mana/*.svg). */
.mana, .ms { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* Mana color icons before a deck name */
.mana-icons { display: inline-flex; gap: 1px; vertical-align: -2px; margin-right: 0.35rem; }
.mana { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35); }
.be-name .mana-icons { margin-right: 0.25rem; }
.be-name .mana { width: 13px; height: 13px; }

/* (.cardgroup / .cardline are renamed from .card-group / .card to avoid colliding
   with Bootstrap's .card and .card-group components.) */
.cardgroup { margin-bottom: 0.7rem; }
.cardgroup h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0 0 0.25rem; }
.cardgroup ul { list-style: none; margin: 0; padding: 0; }

/* Card line: qty · name (oracle link) · mana cost, with a pure-CSS hover preview */
.cardline { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0.08rem 0; }
.cardline .qty { color: var(--muted); min-width: 1.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.card-name { color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name:hover { color: var(--accent); text-decoration: none; }
.card-cost { display: inline-flex; gap: 1px; flex: none; }
.ms { width: 13px; height: 13px; }
/* Preview appears next to the hovered card. Toggling opacity/visibility (not
   display) means it never reflows the multi-column layout, and it's absolutely
   positioned out of flow so it doesn't change the card box. */
.cardline .preview {
  position: absolute; right: 100%; top: -0.4rem; z-index: 50;
  width: 244px; height: 340px; margin-right: 0.4rem;
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.7);
  pointer-events: none; opacity: 0; visibility: hidden;
}
.cardline:hover .preview { opacity: 1; visibility: visible; }

/* Export bar */
.export-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.export-label { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.1rem; }
.clip-src { display: none; }
.split-btn { display: inline-flex; }
.sb-dl, .sb-copy, .dl-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font: inherit; font-size: 0.82rem; padding: 0.25rem 0.65rem; cursor: pointer; text-decoration: none;
}
/* split button: download on the left, copy on the right */
.sb-dl { border-radius: 6px 0 0 6px; border-right: 0; font-weight: 600; }
.sb-copy { border-radius: 0 6px 6px 0; color: var(--muted); }
.dl-btn { border-radius: 6px; }
.sb-dl:hover, .sb-copy:hover, .dl-btn:hover { background: var(--line); text-decoration: none; }
.sb-copy.copied { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ===== Tools (deck diff, sideboard guide) ===== */
.tools-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }

/* Deck diff: three result boxes */
.diff-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; height: 100%; }
.diff-box h2 { font-size: 0.95rem; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.diff-a h2 { color: #6fb6e8; }
.diff-b h2 { color: var(--accent); }
.diff-common h2 { color: #5cc97a; }
.diff-count { display: inline-block; min-width: 1.5rem; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 0.05rem 0.4rem; }
.diff-list { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.diff-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.12rem 0; font-size: 0.88rem; }
.diff-qty { color: var(--muted); min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.diff-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* MD / SB board tags + highlighted copy differences */
.diff-board { flex: none; min-width: 1.7rem; text-align: center; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.03em; border-radius: 4px; padding: 0.05rem 0.25rem; border: 1px solid var(--line); color: var(--muted); }
.diff-md { color: var(--text); background: var(--panel-2); }
.diff-sb { color: var(--accent); background: rgba(224, 164, 88, 0.12); border-color: rgba(224, 164, 88, 0.3); }
.diff-changed { color: var(--accent); font-weight: 700; }
.diff-row-changed .diff-name { color: var(--text); }

/* Sideboard guide */
.sb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.9rem; align-items: center; }
.sb-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.3rem 0.15rem 0.7rem; font-size: 0.82rem; }
.sb-chip-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.25rem; border-radius: 999px; }
.sb-chip-x:hover { color: var(--text); background: var(--line); }

.sb-guide { display: grid; gap: 0.5rem; }
.sb-arch { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.sb-arch > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-size: 0.95rem; list-style: none; }
.sb-arch > summary::-webkit-details-marker { display: none; }
.sb-arch > summary::before { content: "\25B8"; color: var(--muted); margin-right: 0.5rem; }
.sb-arch[open] > summary::before { content: "\25BE"; }
.sb-arch-body { padding: 0 0.9rem 0.9rem; border-top: 1px solid var(--line); }
.sb-side h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.9rem 0 0.4rem; }
.sb-balance { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #5cc97a; margin-bottom: 0.5rem; }
.sb-balance.sb-unbalanced { color: #d96a6a; }
.sb-box { margin-bottom: 0.8rem; }
.sb-box h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0 0 0.3rem; }
.sb-empty { font-size: 0.82rem; margin: 0; }
.sb-stepper { display: flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0; }
.sb-step { width: 1.5rem; height: 1.5rem; line-height: 1; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 1rem; padding: 0; flex: none; }
.sb-step:hover { border-color: var(--accent); }
.sb-n { min-width: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.sb-card { font-size: 0.86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-stepper.active .sb-card { color: var(--text); }
.sb-stepper.active .sb-n { color: var(--accent); }

/* Print: show only the generated paper-friendly guide. */
.sb-print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  .sb-print-area, .sb-print-area * { visibility: visible; }
  .sb-print-area { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 0.5rem 1rem; color: #000; }
  .sb-print-area h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
  .sb-print-arch { break-inside: avoid; margin-bottom: 0.6rem; border-bottom: 1px solid #ccc; padding-bottom: 0.4rem; }
  .sb-print-arch h3 { font-size: 1rem; margin: 0 0 0.2rem; }
  .sb-print-side { font-size: 0.9rem; margin-left: 0.6rem; }
  .sb-print-pd { font-weight: 700; display: block; margin-top: 0.2rem; }
}

/* ===== Event calendar ===== */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.cal-nav { display: inline-flex; gap: 0.25rem; }
.cal-navbtn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.85rem; }
.cal-navbtn:hover { border-color: var(--accent); }
.cal-title { font-weight: 700; font-size: 1.05rem; margin-left: 0.3rem; }

/* event chips, colored by source */
.cal-event { display: block; font-size: 0.74rem; line-height: 1.25; padding: 0.1rem 0.35rem; border-radius: 4px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--accent); background: var(--panel-2); color: var(--text); cursor: default; }
a.cal-event { cursor: pointer; }
a.cal-event:hover { text-decoration: none; outline: 1px solid var(--accent); }
.cal-mtgo { border-left-color: #6fb6e8; }
.cal-arena { border-left-color: #c98ce0; }
.cal-inperson { border-left-color: #5cc97a; }
.cal-event.cat-limited { border-left-style: dashed; }

/* countdown cards */
.cal-countdown { margin-bottom: 1rem; }
.cal-cd-head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.4rem; }
.cal-cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.cal-cd-card { display: block; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--text); }
a.cal-cd-card:hover { text-decoration: none; border-color: var(--accent); }
.cal-cd-title { font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cd-when { color: var(--muted); font-size: 0.75rem; margin: 0.1rem 0 0.3rem; }
.cal-cd-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.cal-cd-live { color: #5cc97a; }

/* month grid */
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-dow { background: var(--panel-2); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: center; padding: 0.3rem 0; }
.cal-cell { background: var(--bg); min-height: 92px; padding: 0.2rem 0.25rem 0.3rem; }
.cal-cell.cal-other { background: var(--panel); }
.cal-cell.cal-other .cal-daynum { opacity: 0.55; }
.cal-cell.cal-today { background: rgba(224,164,88,0.08); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-daynum { font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cal-cell.cal-today .cal-daynum { color: var(--accent); font-weight: 700; }

/* week / day columns */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal-day { max-width: 460px; }
.cal-col { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem; min-height: 120px; }
.cal-col.cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-colhead { font-size: 0.78rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; margin-bottom: 0.35rem; }
.cal-colhead span { color: var(--text); font-weight: 700; }
.cal-col .cal-event { white-space: normal; }
.cal-none { color: var(--muted); text-align: center; font-size: 0.8rem; padding: 0.4rem 0; }
.cal-empty { padding: 1rem 0; }

@media (max-width: 760px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; }
  .cal-event { font-size: 0.68rem; }
}

/* ===== Home dashboard ===== */
.home-hero { margin-bottom: 1.4rem; }
.home-hero h1 { margin-bottom: 0.3rem; }
.home-hero p { color: var(--muted); max-width: 64ch; margin: 0; }

.widget { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem 1rem; height: 100%; }
.widget-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.widget-head h2 { margin: 0; font-size: 1.05rem; }
.widget-more { margin-left: auto; font-size: 0.82rem; white-space: nowrap; }
.widget-seg { margin-bottom: 0.7rem; }
.widget-sub { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.5rem; }
/* Fixed-height toggle lists so switching format/source doesn't resize the widget. */
#recentList, #eventsGroups { height: 19rem; overflow-y: auto; }

.home-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.28rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.home-row:last-child { border-bottom: 0; }
.home-date, .home-when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; min-width: 4.4rem; }
.home-cd { color: var(--accent); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; min-width: 4.2rem; }
.home-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.home-win, .home-fmt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; text-align: right; flex: none; font-size: 0.82rem; }
.crown { font-size: 0.74rem; }
.home-empty { padding: 0.5rem 0; margin: 0; }

.home-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.home-chip { display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 0.85rem; }
.home-chip:hover { border-color: var(--accent); text-decoration: none; color: var(--text); }

/* Challenge top players (counts + hover popover of their decks) */
.cp-row { margin-bottom: 1rem; }
.cp-row .stats-table { min-width: 0; width: 100%; }
.cp-h { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.12rem 0; font-size: 0.9rem; }
.cp-count { min-width: 1.6rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); flex: none; }
.cp-name { font-weight: 600; }

/* Deck rarity breakdown (colored like the set-symbol rarities) */
.deck-rarities { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: -0.3rem 0 0.9rem; font-size: 0.82rem; font-weight: 600; }
.rar { font-variant-numeric: tabular-nums; }
.rar-mythic { color: #e0512d; }
.rar-rare { color: #d6a93f; }
.rar-uncommon { color: #aab4c2; }
.rar-common { color: var(--text); }

/* Analytics disclaimer callout */
.disclaimer { border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0;
  padding: 0.6rem 0.9rem; font-size: 0.86rem; margin: 0 0 1.2rem; }
.disclaimer strong { color: var(--text); }

/* Ad slots — reserved height prevents layout shift while the ad loads. Rendered only
   when AdSense is configured (see config.yaml::ads), so default builds are unaffected. */
.ad-slot { margin: 1rem auto 1.4rem; min-height: 100px; text-align: center; overflow: hidden; }
.ad-slot.ad-top { margin-top: 0; }
.ad-slot .adsbygoogle { display: block; }

/* Simple prose pages (privacy policy) */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.prose ul { padding-left: 1.3rem; }
.prose li { margin: 0.2rem 0; }

/* Cookie-consent banner (GDPR; rendered only when ads + consent_banner are configured) */
.cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 0.8rem 1.1rem; background: var(--panel-2); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.45); font-size: 0.85rem; }
.cc-text { margin: 0; flex: 1 1 320px; color: var(--text); }
.cc-btns { display: flex; gap: 0.5rem; margin-left: auto; }
.cc-btn { cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.95rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; }
.cc-reject { background: var(--panel); color: var(--text); }
.cc-reject:hover { border-color: var(--muted); }
.cc-accept { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cc-accept:hover { filter: brightness(1.06); }

/* Ad placeholder boxes (preview where ads go before AdSense is live) */
.ad-placeholder { display: flex; align-items: center; justify-content: center;
  max-width: 728px; min-height: 90px; border: 1px dashed var(--line); border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px); }
.ad-placeholder span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* Client-side pagination ([data-paginate]) */
.pg-hide { display: none !important; }
.pager { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.7rem 0 1.4rem; font-size: 0.85rem; }
.pg-btn { cursor: pointer; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.85rem; font: inherit; font-size: 0.85rem; }
.pg-btn:hover:not(:disabled) { border-color: var(--accent); }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-info { color: var(--muted); font-variant-numeric: tabular-nums; }

/* generated: mana symbol backgrounds */
.ms-0{background-image:url(mana/0.svg)}
.ms-1{background-image:url(mana/1.svg)}
.ms-10{background-image:url(mana/10.svg)}
.ms-1000000{background-image:url(mana/1000000.svg)}
.ms-11{background-image:url(mana/11.svg)}
.ms-12{background-image:url(mana/12.svg)}
.ms-13{background-image:url(mana/13.svg)}
.ms-14{background-image:url(mana/14.svg)}
.ms-15{background-image:url(mana/15.svg)}
.ms-16{background-image:url(mana/16.svg)}
.ms-2{background-image:url(mana/2.svg)}
.ms-2b{background-image:url(mana/2B.svg)}
.ms-2g{background-image:url(mana/2G.svg)}
.ms-2r{background-image:url(mana/2R.svg)}
.ms-2u{background-image:url(mana/2U.svg)}
.ms-2w{background-image:url(mana/2W.svg)}
.ms-3{background-image:url(mana/3.svg)}
.ms-4{background-image:url(mana/4.svg)}
.ms-5{background-image:url(mana/5.svg)}
.ms-6{background-image:url(mana/6.svg)}
.ms-7{background-image:url(mana/7.svg)}
.ms-8{background-image:url(mana/8.svg)}
.ms-9{background-image:url(mana/9.svg)}
.ms-b{background-image:url(mana/B.svg)}
.ms-bg{background-image:url(mana/BG.svg)}
.ms-bp{background-image:url(mana/BP.svg)}
.ms-br{background-image:url(mana/BR.svg)}
.ms-c{background-image:url(mana/C.svg)}
.ms-cb{background-image:url(mana/CB.svg)}
.ms-cg{background-image:url(mana/CG.svg)}
.ms-cp{background-image:url(mana/CP.svg)}
.ms-cr{background-image:url(mana/CR.svg)}
.ms-cu{background-image:url(mana/CU.svg)}
.ms-cw{background-image:url(mana/CW.svg)}
.ms-d{background-image:url(mana/D.svg)}
.ms-g{background-image:url(mana/G.svg)}
.ms-gp{background-image:url(mana/GP.svg)}
.ms-gu{background-image:url(mana/GU.svg)}
.ms-gup{background-image:url(mana/GUP.svg)}
.ms-gw{background-image:url(mana/GW.svg)}
.ms-gwp{background-image:url(mana/GWP.svg)}
.ms-hw{background-image:url(mana/HW.svg)}
.ms-l{background-image:url(mana/L.svg)}
.ms-r{background-image:url(mana/R.svg)}
.ms-rg{background-image:url(mana/RG.svg)}
.ms-rgp{background-image:url(mana/RGP.svg)}
.ms-rp{background-image:url(mana/RP.svg)}
.ms-rw{background-image:url(mana/RW.svg)}
.ms-rwp{background-image:url(mana/RWP.svg)}
.ms-s{background-image:url(mana/S.svg)}
.ms-u{background-image:url(mana/U.svg)}
.ms-ub{background-image:url(mana/UB.svg)}
.ms-up{background-image:url(mana/UP.svg)}
.ms-ur{background-image:url(mana/UR.svg)}
.ms-w{background-image:url(mana/W.svg)}
.ms-wb{background-image:url(mana/WB.svg)}
.ms-wp{background-image:url(mana/WP.svg)}
.ms-wu{background-image:url(mana/WU.svg)}
.ms-x{background-image:url(mana/X.svg)}
.ms-y{background-image:url(mana/Y.svg)}
.ms-z{background-image:url(mana/Z.svg)}