/* The palette is Wooly's character sheet: light lavender #c7ccf6, pale grey #e9edf2, dark slate purple #797397, mint #91e9e4, periwinkle #a2a0fc,
   pink #edc3d6 (on #fcfbfc). Everything that has a colour uses these variables, so the whole look changes here. Lavender-blue (--focus) marks
   where you are and what is selected; pink (--accent) marks the main action; mint is for good news and small highlights. */
:root {
  color-scheme: dark;
  --bg: #2c2641;                                          /* a dusky mauve-plum, from the sheet's slate purple: twilight, not midnight */
  --surface: #38314f;
  --border: #4d4570;
  --fg: #fbf8ff;
  --muted: #cdc5e3;
  --forbidden: #ff7070;
  --limited: #ffbe8a;
  --semi: #f2dc8a;
  --ok: #91e9e4;
  --focus: #a2a0fc;
  --on-primary: #1f1a33;
  --on-tier: #1f1a33;
  --accent: #edc3d6;
  --on-accent: #2b1d2f;
  --nav: #f0eaff;
  --hover: rgba(162, 160, 252, .22);
  --hover-soft: rgba(162, 160, 252, .12);
  --glass: rgba(44, 38, 65, .72);
  --glow-a: rgba(162, 160, 252, .34);
  --glow-b: rgba(237, 195, 214, .32);
  --glow-c: rgba(145, 233, 228, .16);
  --mint: #91e9e4;
  --mint-glow: rgba(145, 233, 228, .26);
  --card-edge: rgba(205, 197, 255, .40);
  --card-shadow: rgba(15, 10, 35, .40);
  --tab-end: #e0b4e6;
  --pink-line: #edc3d6;
  --cta-glow: rgba(237, 195, 214, .32);
  --shadow: 0 8px 28px rgba(10, 5, 30, .55);
}

/* Nunito: a soft, rounded font (SIL Open Font License, see /static/fonts/OFL.txt), served from this site; it falls back to the system font while loading. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/static/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

/* The page's scrollbar always has its room, so a short tab and a long one are the same width and nothing slides sideways when you switch. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

body {
  margin: 0;
  background:
    radial-gradient(62rem 40rem at 4% -10%, var(--glow-a), transparent 68%),
    radial-gradient(54rem 36rem at 100% 0%, var(--glow-b), transparent 68%),
    radial-gradient(70rem 40rem at 50% 112%, var(--glow-c), transparent 68%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;                  /* so the footer can sit at the bottom of a short page (see main) */
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.muted { color: var(--muted); }

main { flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 72rem; margin: 0 auto; padding: 20px 16px 0; }      /* it takes the room a short page leaves, which keeps the footer at the bottom of the window */
/* the header is not a separate colour: the page's own, see-through and frosted, with the bar's contents kept to the content's width */
.top { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: relative; z-index: 15; }      /* (below the card details and the picture viewer) */
h1 { margin: 0; font-size: 1.35rem; }                       /* (the site's name, shown only while there is no logo) */
.brand { grid-area: brand; justify-self: start; display: flex; align-items: center; min-height: 2.75rem; }
.brand-link { display: flex; align-items: center; color: inherit; text-decoration: none; border-radius: 10px; }
.brand-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }          /* keeps its room while the logo loads, so nothing jumps */
#title-text:empty { display: none; }
.logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 2.75rem; border-radius: 8px; }      /* small, like the menu text, with the page's rounded corners */
/* the top bar, in three zones like the reference: the logo on the left, the pages in the middle, the buttons on the right */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand tabs actions"; align-items: center; gap: 10px 24px; max-width: 72rem; min-height: 5rem; margin: 0 auto; padding: 12px 16px; }
.status.friendly { font-size: 1.05rem; }
.top p { margin: 0 0 14px; }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.search input {
  width: min(22rem, 100%);
  padding: 10px 18px;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.sort { position: relative; }
/* "Sort by" and the choice are ONE bubble, the same kind as the search box; its menu is our own, like the featured card's */
.sort-button {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 14px 10px 18px; font: inherit; color: var(--fg); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.sort-button:hover:not(:disabled), .sort-button[aria-expanded="true"] { border-color: var(--pink-line); }
.sort-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sort-button:disabled { cursor: default; opacity: .6; }
#sort-value { font-weight: 600; }
.sort-caret { margin-left: auto; padding-left: 10px; color: var(--muted); }
.sort .sort-menu { right: auto; left: 0; min-width: 100%; width: max-content; max-width: 22rem; }      /* (more specific than the featured card menu it shares looks with, which comes later) */
.tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.chip { --tier: var(--muted); }
.chip[data-tier="forbidden"] { --tier: var(--forbidden); }
.chip[data-tier="limited"] { --tier: var(--limited); }
.chip[data-tier="semi_limited"] { --tier: var(--semi); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tier); box-sizing: border-box; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }      /* still a real checkbox for keyboards and screen readers */
.chip:has(input:checked) { color: var(--fg); font-weight: 600; border-color: var(--tier); }
.chip:has(input:checked)::before { background: var(--tier); }
.chip:has(input:not(:checked)) span { text-decoration: line-through; }
.chip:has(input:disabled) { cursor: default; opacity: 0.6; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.search input:focus { border-color: var(--pink-line); }
.search input:focus-visible, .card:focus-visible, .close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.status { padding: 32px 0; text-align: center; color: var(--muted); }
.status.error { color: var(--forbidden); }

/* the pages sit in one soft track, so the spaces between them are even whichever one is lit */
.tabs { position: relative; grid-area: tabs; display: flex; gap: 4px; margin: 0; padding: 4px; background: var(--hover-soft); border: 1px solid var(--border); border-radius: 999px; }
.tab { position: relative; z-index: 1; min-width: 6.5rem; padding: 9px 22px; text-align: center; white-space: nowrap; color: var(--nav); text-decoration: none; font-size: 1.05rem; font-weight: 600; border-radius: 999px; }
.tab:hover:not([aria-current="page"]) { color: var(--fg); background: var(--hover-soft); }
.tab[hidden] { display: none; }
.tab[aria-current="page"] { color: var(--on-primary); background: linear-gradient(135deg, var(--focus), var(--tab-end)); }
.tab-pill { display: none; }
.tabs.has-pill .tab-pill { display: block; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w); transform: translateX(var(--pill-x)); border-radius: 999px; background: linear-gradient(135deg, var(--focus), var(--tab-end)); }
.tabs.has-pill .tab[aria-current="page"] { background: none; }          /* the pill behind it wears the colour */      /* the page you are on: a lavender-to-orchid pill */
/* the bar's buttons (/site addbutton): the first is the solid main action, like the references' "Get started"; the others are softer */
.bar-actions { grid-area: actions; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.bar-actions:empty { display: none; }
.bar-cta { padding: 11px 22px; font-size: 1rem; font-weight: 700; color: var(--on-accent); text-decoration: none; white-space: nowrap; background: var(--accent); border: 2px solid transparent; border-radius: 999px; box-shadow: 0 6px 18px var(--cta-glow); }
.bar-cta:hover { filter: brightness(1.1); }
.bar-cta.secondary { color: var(--fg); background: transparent; border-color: var(--focus); }
.bar-cta.secondary:hover { background: var(--hover-soft); filter: none; }
.bar-cta.discord { color: #fff; background: #5865f2; border-color: transparent; }
.bar-cta:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* a narrower screen (a phone, a small window): the logo with the buttons beside it, then the pages across the full width */
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "tabs tabs"; min-height: 0; padding-bottom: 8px; }
  .bar-cta { padding: 9px 14px; font-size: .95rem; }
  .bar-actions { gap: 8px; }
  .tabs { width: 100%; gap: 4px; }
  .tab { flex: 1 1 auto; min-width: 0; padding: 9px 8px; font-size: .95rem; }      /* (widths follow the words: "Tourney Banlist" is the longest) */
}
@media (max-width: 420px) {
  .tab { padding: 9px 4px; font-size: .86rem; }
}
/* wider screens: the bar stays at the top while the page scrolls (a two-row bar would use too much of a smaller screen) */
@media (min-width: 861px) {
  .top { position: sticky; top: 0; }
}
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.check-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.check-form input {
  flex: 1 1 18rem; min-width: 0;
  padding: 10px 12px; font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.check-form input:focus-visible, .primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.primary {
  padding: 10px 18px; font: inherit; font-weight: 600; color: var(--on-primary);
  background: var(--focus); border: 0; border-radius: 12px; cursor: pointer;
}
.primary:disabled { opacity: .55; cursor: progress; }

.banner { margin: 16px 0 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--muted); border-radius: 14px; }
.banner.pass { border-left-color: var(--ok); }
.banner.fail { border-left-color: var(--forbidden); }
.banner.incomplete { border-left-color: var(--limited); }
.banner h2 { margin: 0 0 4px; font-size: 1.2rem; }
.banner p { margin: 0 0 2px; }
.problems { margin: 0 0 12px; padding-left: 1.2rem; }
.problems li { margin: 2px 0; }
.warning { margin: 0 0 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--limited); border-radius: 8px; }
.tier-deck { --tier: var(--focus); }
.card.flagged { --tier: var(--forbidden); }
.card.flagged .art {                                   /* a card that breaks the list: a clean rose ring and a soft glow (the name turns rose too, and the status card says why) */
  outline: 3px solid var(--forbidden); outline-offset: -3px;
  box-shadow: 0 0 12px 2px rgba(255, 112, 112, .45);
}
.card.flagged .badge { z-index: 3; }
.card.flagged .name { color: var(--forbidden); font-weight: 800; }


section { margin: 40px 0 10px; }
section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.5rem; line-height: 1.2; }
section h2 .sub { padding: 2px 12px; font-size: .85rem; font-weight: 600; color: var(--fg); background: var(--mint-glow); border-radius: 999px; }
section h3.subheading { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 10px; font-size: 1rem; font-weight: 600; color: var(--muted); }
section h2::before { content: ""; align-self: center; width: 13px; height: 13px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 12px var(--tier); }
.tier-forbidden { --tier: var(--forbidden); }
.tier-limited { --tier: var(--limited); }
.tier-semi_limited { --tier: var(--semi); }
.group-plain { --tier: var(--muted); }
/* a card's badge always shows its own limit's colour, whichever way the list is grouped */
.card.t-forbidden { --tier: var(--forbidden); }
.card.t-limited { --tier: var(--limited); }
.card.t-semi_limited { --tier: var(--semi); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  margin: 0; padding: 0; list-style: none;
}

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
  padding: 0;
  font: inherit; color: inherit; text-align: center;
  background: none; border: 0; cursor: pointer;
}
.card .art {
  display: block;
  position: relative;
  aspect-ratio: 421 / 614;
  overflow: hidden;
  border-radius: 2px;                                              /* a card is a rectangle: only the faintest softening, so no corner of the picture is cut off */
  border: 1px solid var(--card-edge);
  box-shadow: 0 6px 16px var(--card-shadow);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover .art, .card:focus-visible .art { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 12px 26px var(--mint-glow); }
@media (prefers-reduced-motion: reduce) { .card .art { transition: none; } .card:hover .art, .card:focus-visible .art { transform: none; } }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .78rem; line-height: 1.25;
}
/* a card with no picture: the name takes the picture's place */
.card.noimage .art { display: grid; place-items: center; padding: 6px; font-size: .78rem; }
.card.noimage .art img { display: none; }

.badge {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  min-width: 22px; padding: 1px 6px;
  font-size: .75rem; font-weight: 700; line-height: 1.4; text-align: center;
  color: var(--on-tier); background: var(--tier);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* The detail panel: floats beside the card (mouse) or sits at the bottom of the screen (touch) */
.panel {
  position: fixed; z-index: 20;
  width: min(35rem, calc(100vw - 24px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.panel[hidden], .backdrop[hidden] { display: none; }
.panel.sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 92vh; border-radius: 14px 14px 0 0; }
.panel.floating { pointer-events: none; }               /* a hover panel never steals the mouse */
.backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .45); }

.detail { display: grid; grid-template-columns: 13rem 1fr; gap: 16px; }
.detail img { display: block; width: 100%; border-radius: 2px; background: var(--bg); aspect-ratio: 421 / 614; object-fit: cover; }
.detail.noimage { grid-template-columns: 1fr; }
.detail.noimage img { display: none; }
.detail h3 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.2; }
.detail .tierline { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--tier); }
.detail .meta, .detail .stats { margin: 0 0 6px; font-size: .95rem; color: var(--muted); }
.detail .stats { color: var(--fg); font-weight: 700; font-size: 1.05rem; }
.detail .text { grid-column: 1 / -1; margin-top: 6px; font-size: 1rem; line-height: 1.45; }
.detail .text h4 { margin: 10px 0 3px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.detail .text p { margin: 0 0 8px; white-space: pre-wrap; }

.close {
  display: none;
  margin: 0 0 8px auto; padding: 6px 12px;
  font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.panel.sheet .close { display: block; }

@media (max-width: 720px) {
  .detail { grid-template-columns: minmax(8rem, 42%) 1fr; gap: 14px; }
  .detail h3 { font-size: 1.25rem; }
  .detail .meta, .detail .text { font-size: 1rem; }
  .panel { padding: 16px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
}

/* The tournament info page: pictures of any shape, and a viewer for one at a time */
/* a tab's heading has the same room above and below on every tab (Info wraps its heading with the buttons, the others don't) */
.info-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; margin: 0 0 14px; }
.info-title { margin: 14px 0 12px; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
#intro, .tab-intro { margin: 0 0 12px; }
.info-title:empty { display: none; }
.info-title::after { content: "\2726"; margin-left: .4em; font-size: .5em; vertical-align: .75em; color: var(--pink-line); }          /* a small sparkle */

.info-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px;     /* two columns: each picture is half the page */
  grid-auto-rows: 4px;                                                                /* the page gives each tile a span of these (layoutInfo), so pictures stack snugly */
  margin: 0 0 24px; padding: 0; list-style: none;
}
.info-grid > li { padding-bottom: 18px; }                                              /* the gap under a picture (TILE_GAP_PX) */
@media (max-width: 700px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }          /* one column on a phone */
.info-tile {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.info-tile:hover { border-color: var(--focus); }
.info-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* width and height attributes give the picture its shape before it loads; height: auto keeps that shape at any width */
.info-tile img { display: block; width: 100%; height: auto; }

.lightbox {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 12px; background: rgba(0, 0, 0, .92);
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; display: grid; justify-items: center; align-items: center; gap: 10px; min-width: 0; }
.lb-figure img {
  display: block; max-width: 100%; object-fit: contain;                           /* its size comes from the page (Views.fitWithin) */
  background: #111; border-radius: 6px;
}
.lb-nav, .lb-close {
  color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; line-height: 1;
}
.lb-nav { width: 48px; height: 48px; font-size: 2rem; }
.lb-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; font-size: 1.2rem; }
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, .28); }
.lb-nav:focus-visible, .lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-nav[hidden] { display: none; }

@media (max-width: 600px) {
  .lightbox { grid-template-columns: 1fr; align-content: center; padding: 8px; }
  .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* ── The deck builder ─────────────────────────────────────────────────────── */

/* the deck is the main thing, so it is on the left; finding cards is a side panel on the right (the markup keeps the search first, for the keyboard) */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 24rem); gap: 28px; align-items: start; align-content: start; }      /* (rows keep their own height even when the page is held taller) */
#builder-deck { grid-column: 1; grid-row: 1; }
#builder-cards { grid-column: 2; grid-row: 1; }
.builder-pane { min-width: 0; }
.builder .search input { width: 100%; }
.builder .hint { margin: 8px 0; min-height: 1.4em; font-size: .9rem; }
.builder section { margin: 18px 0 8px; }

.results {
  display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;
  max-height: calc(100vh - 15rem); overflow-y: auto;                      /* the list scrolls on its own, the deck stays in view */
}
.result { position: relative; display: flex; gap: 6px; align-items: stretch; }
.result-steps { display: flex; flex: none; align-items: center; gap: 6px; }
.result-steps .step { flex: none; width: 44px; min-height: 40px; font-size: 1.2rem; }
.result-add {                              /* every row is the same height: the name on one line (cut with … if long) and, under it, the tags on one line */
  flex: 1 1 auto; min-width: 0; height: 58px; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 8px; font: inherit; text-align: left; color: var(--fg); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.result-add:hover { border-color: var(--focus); }
.result-add:focus-visible, .step:focus-visible, .plain:focus-visible,
.code-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.r-thumb { flex: none; width: 32px; height: 47px; object-fit: cover; border-radius: 2px; background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }      /* a card keeps its rectangle */
.r-thumb.none { visibility: hidden; }
.r-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.r-name { max-width: 100%; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tags { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: .78rem; }
.r-tag, .r-count { color: var(--muted); }
.r-count { font-weight: 700; color: var(--focus); }
.limit-chip { --tier: var(--muted); padding: 0 8px; font-weight: 700; color: var(--tier); border: 1px solid var(--tier); border-radius: 999px; }
.limit-chip.t-forbidden { --tier: var(--forbidden); }
.limit-chip.t-limited { --tier: var(--limited); }
.limit-chip.t-semi_limited { --tier: var(--semi); }

/* small quiet actions: Clear deck, and Open a deck link */
.text-button { padding: 4px 8px; font: inherit; font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.text-button:hover:not(:disabled) { color: var(--fg); }
.text-button:disabled { opacity: .4; cursor: default; text-decoration: none; }
.text-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool-pill.small { flex: none; min-width: 0; padding: 5px 14px; font-size: .85rem; color: var(--muted); }
.tool-pill.small:hover:not(:disabled) { color: var(--fg); border-color: var(--forbidden); }      /* it throws the deck away, so pointing at it turns the edge rose */
.deck-actions { margin: 12px 0; }
.primary.big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; padding: 12px 18px; color: var(--on-accent); background: var(--accent); border-radius: 999px; box-shadow: 0 6px 18px var(--cta-glow); }
.primary.big.quiet { color: var(--fg); background: var(--surface); border: 2px solid var(--focus); box-shadow: none; }      /* while the deck has a problem the button is quiet: you can still use it, but it isn't the moment */
.primary.big .cta { font-size: 1.1rem; }
.primary.big .cta-sub { font-size: .8rem; font-weight: 400; opacity: .9; }
.plain {
  padding: 10px 16px; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.plain:disabled { opacity: .5; cursor: default; }
.primary:disabled { cursor: default; }
.code-box { margin: 6px 0 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.code-box[hidden] { display: none; }
.code-row { display: flex; gap: 8px; }
.code-row .plain { min-width: 7.5rem; }                              /* (so the button doesn't change width when it says Copied)*/
.plain.done { color: var(--ok); border-color: var(--ok); }
.code-row input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; font: .9rem ui-monospace, Menlo, Consolas, monospace; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.code-note { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.code-note.error, #open-message.error { color: var(--forbidden); }
#open-message { margin: 0 0 8px; font-size: .9rem; }
#open-message:empty { display: none; }

/* each card in the deck: its tile, with a minus and a plus under it */
.deck-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.deck-controls { display: flex; gap: 6px; }
.step {
  flex: 1; padding: 4px 0; font: inherit; font-weight: 700; line-height: 1.2; color: var(--fg); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.step:hover:not(:disabled) { border-color: var(--focus); }
.step:disabled, .step.blocked { opacity: .4; cursor: not-allowed; }

/* the drawer's own parts exist only on a phone */
.drawer-head, .drawer-backdrop, .add-cards, .phone-only { display: none; }

/* a phone: one column, the deck, with the card search as a drawer that slides in over it from the right (builder.js: openSearch) */
@media (max-width: 899px) {
  .builder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #builder-deck { grid-column: 1; grid-row: auto; }
  #builder-cards {
    position: fixed; top: var(--vvtop, 0px); right: 0; z-index: 18; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
    width: min(92vw, 30rem); height: var(--vvh, 100dvh); margin: 0; padding: 14px 18px;
    background: var(--bg); border-left: 1px solid var(--border); box-shadow: -14px 0 34px rgba(0, 0, 0, .5);
    transform: translateX(105%); visibility: hidden;
  }
  .builder[data-search="open"] #builder-cards { transform: none; visibility: visible; }
  #builder-cards .results { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; align-content: start; }      /* (rows keep their own height: a grid given spare room would stretch them) */
  #builder-hint:empty { display: none; }
  .drawer-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
  .drawer-head strong { font-size: 1.15rem; }
  .drawer-head .muted { flex: 1 1 auto; font-size: .9rem; }
  .drawer-head .plain { flex: none; padding: 6px 18px; font-size: .95rem; font-weight: 700; border-radius: 999px; }      /* a slim pill, not a heavy box */
  .drawer-head .muted.bump { display: inline-block; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 17; background: rgba(12, 9, 24, .6); }
  .drawer-backdrop[hidden] { display: none; }
  html.search-open { overflow: hidden; }
  .phone-only { display: inline; }
  .wide-only { display: none; }
  .add-cards { display: block; }
}

/* a card list's detail (the deck builder's search results): narrower, so it fits under the row inside the list's own column */
.panel.compact { padding: 12px; }
.panel.compact .detail { grid-template-columns: 8rem 1fr; gap: 12px; }
.panel.compact .detail h3 { font-size: 1.1rem; }
.panel.compact .detail .meta, .panel.compact .detail .text { font-size: .95rem; }

/* the buttons under every deck card line up, whatever the names' lengths: the name always takes two lines' room and the
   buttons sit at the bottom */
.deck-card { height: 100%; }
.deck-card .card { flex: 1 1 auto; }
.deck-card .card .name { min-height: 2.5em; }
.deck-controls { margin-top: auto; }

/* a phone: the two main buttons stay at the bottom of the screen while the deck scrolls past, so they are always in reach */
@media (max-width: 899px) {
  #deck-work { display: flex; flex-direction: column; }          /* (so the bar below can be put last) */
  #deck-work[hidden] { display: none; }
  .deck-actions {
    order: 99;                                  /* last in the pane: a bar only sticks to the bottom while it is below the screen */
    position: sticky; bottom: 0; z-index: 4; margin: 12px 0 0; padding: 10px 0;
    pointer-events: none;                       /* no box of its own: the button is solid, and taps beside it reach what is beneath */
  }
  .deck-actions .primary { pointer-events: auto; }
}

/* the deck's name: a pill field with its character count inside at the right */
.name-field { position: relative; margin: 0 0 12px; }
.name-field input { width: 100%; padding: 10px 64px 10px 18px; font: inherit; font-weight: 600; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.name-field input::placeholder { font-weight: 400; color: var(--muted); }
.name-field input:focus { border-color: var(--pink-line); }
.name-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.name-count { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--muted); pointer-events: none; }

/* the card shown in the deck's link preview: a small button in the name field (the card's picture and a caret) that opens a list of the deck's cards */
.featured-btn { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; }
.featured-btn[hidden] { display: none; }
.featured-btn:hover, .featured-btn[aria-expanded="true"] { border-color: var(--focus); color: var(--fg); }
.featured-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.featured-btn img { display: block; width: 24px; height: 35px; margin: -2px 0; border-radius: 1px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.featured-btn img[hidden] { display: none; }
.featured-btn.auto::before { content: ""; width: 22px; height: 30px; border: 1.5px dashed currentColor; border-radius: 3px; }
.featured-btn:not(.auto)::before { content: none; }
.name-field.has-picker input { padding-right: 112px; }
.featured-menu { position: absolute; z-index: 12; right: 0; top: calc(100% + 6px); width: min(22rem, 100%); max-height: min(22rem, 60vh); overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.featured-menu[hidden] { display: none; }
.featured-menu .menu-note { margin: 4px 8px 6px; font-size: .8rem; color: var(--muted); }
.featured-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; font: inherit; font-size: .92rem; text-align: left; color: var(--fg); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.featured-option:hover, .featured-option:focus-visible { background: var(--hover-soft); outline: none; }
.featured-option[aria-selected="true"] { color: var(--mint); font-weight: 700; }
.featured-option img { flex: none; width: 24px; height: 35px; border-radius: 1px; object-fit: cover; }
.featured-option .no-art { flex: none; display: block; width: 24px; height: 35px; border: 1.5px dashed var(--muted); border-radius: 3px; }

/* saving decks in this browser: the Save / Clear pair in the status card, and the list of saved decks */
#deck-work[hidden], .saved-view[hidden] { display: none; }
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.saved-head h2 { margin: 0; font-size: 1.2rem; }
.saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 12px; }      /* (never wider than the screen) */
.saved-list .menu-note { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--muted); }
.saved-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.saved-row img, .saved-row .no-art { flex: none; width: 44px; height: 64px; border-radius: 2px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.saved-row .no-art { border: 1.5px dashed var(--muted); box-shadow: none; }
.saved-text { flex: 1 1 auto; min-width: 0; }
.saved-name { display: block; overflow: hidden; font-size: 1.05rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.saved-meta { display: block; margin-top: 2px; font-size: .9rem; color: var(--muted); }
.saved-meta .ok { color: var(--mint); }
.saved-meta .bad { color: var(--forbidden); }
.saved-row .plain { flex: none; padding: 8px 20px; }
.saved-row .text-button { flex: none; }

/* the three small deck tools under the main button: save, saved decks, load a link */
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.tool-pill { flex: 1 1 0; min-width: max-content; padding: 8px 14px; font: inherit; font-size: .9rem; color: var(--fg); text-align: center; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.tool-pill:hover:not(:disabled), .tool-pill[aria-expanded="true"] { border-color: var(--focus); }
.tool-pill:disabled { opacity: .4; cursor: default; }
.tool-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Saved decks is a place of its own: it starts where the deck starts and grows to the right over the search, which is for building and goes */
.builder[data-saved="true"] #builder-cards { display: none; }
.builder[data-saved="true"] #builder-deck { grid-column: 1 / -1; }

/* a phone: the search and the sort bubbles are as wide as the chips below them, so everything lines up */
@media (max-width: 600px) {
  .tools .search, .tools .sort { flex: 1 1 100%; }
  .tools .search { display: block; }
  .tools .search input { width: 100%; }
}

/* the cards in the deck being built: each sits in its own soft box with its minus and plus inside it, so it is clear which card they are for,
   and the number of copies sits between them, big and bold */
.deck-card { padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
/* the number of copies sits over the card's effect box (its text is too small to read anyway), so the minus and plus have the whole row. The box is where the
   card template puts it, measured on real cards of every kind (normal, effect, spell, trap, Xyz, Synchro, Link, Pendulum): its fill runs from 6.6% to 93.4% across
   and from 75.0% to 94.0% down, and the overlay stops just inside that */
.effect-count {
  position: absolute; left: 6.7%; right: 6.7%; top: 75.2%; bottom: 6.2%; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: 1.35rem; font-weight: 800; line-height: 1; color: #fff; background: rgba(24, 19, 40, .82); border-radius: 3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* in the deck being built, a card that breaks the list lights up the box around it (its picture stays as it is: more noticeable, and nothing is laid over the card) */
.deck-card:has(.card.flagged) { border-color: var(--forbidden); background: rgba(255, 112, 112, .13); box-shadow: 0 0 0 1px var(--forbidden), 0 0 16px 2px rgba(255, 112, 112, .4); }
.deck-card .card.flagged .art { outline: none; box-shadow: 0 6px 16px var(--card-shadow); }

/* the footer: the buttons the team put there (the Discord invite, the YouTube channel ...), centred at the bottom of every page; nothing if there are none */
.site-footer { display: flex; flex: none; flex-wrap: wrap; justify-content: center; box-sizing: border-box; gap: 10px; width: 100%; max-width: 72rem; margin: 40px auto 0; padding: 28px 16px 40px; border-top: 1px solid var(--border); }
.site-footer:empty { display: none; }
.site-footer .bar-cta { padding: 9px 20px; font-size: .95rem; }

/* a phone draws its own blue box on whatever is pressed: it is switched off, and pressing is answered in the site's own way instead */
* { -webkit-tap-highlight-color: transparent; }
a, button, label, select, summary { touch-action: manipulation; }
.tab, .bar-cta, .tool-pill, .primary, .plain, .step, .text-button, .sort-button, .featured-btn, .featured-option, .chip { transition: transform .08s ease, filter .08s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tab:active, .bar-cta:active, .tool-pill:active:not(:disabled), .primary:active:not(:disabled), .plain:active, .step:active:not(:disabled), .sort-button:active, .featured-btn:active, .featured-option:active, .chip:active { transform: scale(.97); filter: brightness(1.15); }
@media (prefers-reduced-motion: reduce) { .tab:active, .bar-cta:active, .tool-pill:active, .primary:active, .plain:active, .step:active, .sort-button:active, .featured-btn:active, .featured-option:active, .chip:active { transform: none; } }

/* ── Motion ────────────────────────────────────────────────────────────────────────────────────────
   Short and soft, and only things phones move smoothly (fades, small slides, scaling). None of it applies for people who ask for less motion,
   and none of it delays anything: it plays while the page is already usable. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
  @keyframes card-pop { from { opacity: 0; transform: scale(.86); } 60% { transform: scale(1.03); } }
  @keyframes card-out { to { opacity: 0; transform: scale(.86); } }
  @keyframes bump { 50% { transform: scale(1.4); } }
  @keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
  @keyframes breathe { 50% { box-shadow: 0 8px 30px var(--cta-glow); } }

  /* a page you switch to (and the first one when the site opens) rises into place */
  #view-info:not([hidden]), #view-banlist:not([hidden]), #view-builder:not([hidden]), #view-check:not([hidden]), #builder:not([hidden]) { animation: rise .28s ease backwards; }
  /* menus and panels that open */
  .featured-menu:not([hidden]) { transform-origin: top; animation: pop .16s ease backwards; }
  .saved-view:not([hidden]), #deck-work:not([hidden]), .code-box:not([hidden]) { animation: rise .22s ease backwards; }
  /* the banlist's cards ripple in once, when the page is first opened */
  .intro .grid > li { animation: rise .32s ease backwards; animation-delay: calc(var(--i, 12) * 28ms); }
  .intro .grid > :nth-child(1) { --i: 0; }
  .intro .grid > :nth-child(2) { --i: 1; }
  .intro .grid > :nth-child(3) { --i: 2; }
  .intro .grid > :nth-child(4) { --i: 3; }
  .intro .grid > :nth-child(5) { --i: 4; }
  .intro .grid > :nth-child(6) { --i: 5; }
  .intro .grid > :nth-child(7) { --i: 6; }
  .intro .grid > :nth-child(8) { --i: 7; }
  .intro .grid > :nth-child(9) { --i: 8; }
  .intro .grid > :nth-child(10) { --i: 9; }
  .intro .grid > :nth-child(11) { --i: 10; }
  .intro .grid > :nth-child(12) { --i: 11; }
  /* the tabs' pill glides to the lit one */
  .tabs.glide .tab-pill { transition: transform .32s cubic-bezier(.3, .8, .3, 1), width .32s cubic-bezier(.3, .8, .3, 1); }
  /* a card new to the deck pops in, the last copy of one shrinks away, and a count that changed bumps */
  .deck-card.pop-in { animation: card-pop .3s ease backwards; }
  .deck-card.leaving { animation: card-out .18s ease forwards; pointer-events: none; }
  .effect-count.bump { animation: bump .22s ease; }
  #drawer-count.bump { animation: bump .22s ease; }
  /* the card search slides in from the right (a phone), over a backdrop that fades in */
  #builder-cards { transition: transform .3s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .3s; }
  .builder[data-search="open"] #builder-cards { transition-delay: 0s; }
  .drawer-backdrop:not([hidden]) { animation: fade-in .25s ease backwards; }
  @keyframes fade-in { from { opacity: 0; } }
  .nope.shake { animation: shake .4s ease; }                          /* (after the card rules, so a card that just popped in still shakes) */
  /* what an empty deck hides rises into place with the first card */
  #deck-work:not([data-empty="true"]) .name-field, #deck-work:not([data-empty="true"]) .deck-actions, #deck-work:not([data-empty="true"]) #deck-main { animation: rise .3s ease backwards; }
  /* the main button glows gently while the deck is ready to go */
  .primary.big:not(.quiet):not(:disabled) { animation: breathe 3.2s ease-in-out infinite; }
}

/* an empty deck shows only what is useful: the prompt, and Saved decks if there are any. The rest appears with the first card. */
#deck-work[data-empty="true"] .name-field, #deck-work[data-empty="true"] .deck-actions, #deck-work[data-empty="true"] #clear-deck,
#deck-work[data-empty="true"] #deck-main, #deck-work[data-empty="true"] #deck-extra { display: none; }
.tool-row[hidden], #hide-results[hidden] { display: none; }
#hide-results { display: block; margin: 0 0 6px auto; }

section h2 #clear-deck { margin-left: auto; }
.empty-prompt { margin: 4px 0 12px; }
#deck-work:not([data-empty="true"]) .empty-prompt { display: none; }
/* what is still to fix, in the link's own place, before a link is made */
.code-box[data-mode="check"] .code-row, .code-box[data-mode="check"] .code-note { display: none; }
.code-box[data-mode="link"] .code-check { display: none; }
.code-check h3 { margin: 0 0 6px; font-size: 1.1rem; }
.code-check p { margin: 0 0 6px; }
.code-check .problems { margin: 6px 0 10px; }
.code-check-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }

/* a guardrail was hit: a rose outline, and a note on the very thing that was pressed saying why */
.nope { outline: 2px solid var(--forbidden); outline-offset: 2px; }
.step.blocked:active { transform: none; filter: none; }
.nope-note {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 6px 10px; text-align: center; pointer-events: none;
  font-size: .85rem; font-weight: 700; line-height: 1.25; color: #fff; background: rgba(96, 26, 38, .95); border: 2px solid var(--forbidden); border-radius: inherit;
}
.name-field.nope { border-radius: 999px; }
.code-box.nope { border-radius: 16px; }
.result.nope { border-radius: 12px; }

/* a result that shakes sticks out sideways for a moment, which would make this scrolling list show a sideways scrollbar for a moment:
   it never scrolls sideways, and has a little room each side (taken back with a negative margin, so nothing moves) for the shake and the outline */
.results { overflow-x: hidden; padding: 4px 10px; margin: 0 -10px; }

/* a phone, 3 cards to a row: the minus and the plus each get half of the card's width and a fingertip's height */
@media (max-width: 600px) {
  .deck-card { padding: 6px; }
  .deck-controls { gap: 8px; }
  .deck-controls .step { min-height: 44px; font-size: 1.3rem; }
}

.code-box-head { display: flex; justify-content: flex-end; margin: -2px 0 4px; }

/* the deck's name and the card search must never look alike: the name is a quiet editable title (a pencil, an underline, bigger bold text), and the search is
   the pill with a magnifier and a lavender edge */
.name-field input { padding: 8px 64px 8px 30px; font-size: 1.15rem; font-weight: 700; background: transparent; border: 0; border-bottom: 2px dashed var(--border); border-radius: 0; }
.name-field input::placeholder { font-size: 1.05rem; font-weight: 500; }
.name-field input:focus { border-bottom: 2px solid var(--pink-line); }
.name-field input:focus-visible { outline: none; }
.name-field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.name-field::before { content: "\270E"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--muted); pointer-events: none; }
.name-field.nope { border-radius: 8px; }
.builder .search { position: relative; display: block; }
.builder .search::before { content: "\1F50D"; position: absolute; left: 17px; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .85; pointer-events: none; }
.builder .search input { padding-left: 44px; border-color: rgba(162, 160, 252, .6); }

/* the bar at the bottom of a phone: Add cards (opens the drawer) beside Get my deck link; an empty deck has only Add cards */
@media (max-width: 899px) {
  .deck-actions { display: flex; gap: 10px; align-items: stretch; }
  .deck-actions .add-cards, .deck-actions .primary { pointer-events: auto; }
  .add-cards { flex: 1 1 0; padding: 12px 10px; font: inherit; font-weight: 700; color: var(--fg); cursor: pointer; background: var(--surface); border: 2px solid var(--focus); border-radius: 999px; }
  .deck-actions .primary.big { flex: 1.6 1 0; width: auto; }
  .deck-actions .cta-sub { display: none; }
  .builder #deck-work[data-empty="true"] .deck-actions { display: flex; }
  .builder #deck-work[data-empty="true"] #get-code { display: none; }
}