/* Shared ArcaneMetriX static-page theme.
   Mirrors the app's default Midnight theme for public HTML pages. */
:root {
    --seasonal-hero-art: url("https://cards.scryfall.io/art_crop/front/6/9/69641e64-d4f5-4654-8da8-9eb9a71e51c8.jpg?1682720012");
    --bg-color: #0d1117;
    --bg-gradient: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    --panel-bg: #161b22f2;
    --panel-bg-opaque: #161b22;
    --card-bg: #161b22cc;
    --entry-bg: #21262dcc;
    --entry-hover-bg: #30363de6;
    --bg-secondary: #161b22;
    --bg-tertiary: #0d1117;
    --border-primary: #30363d;
    --border-color: #30363dcc;
    --border-hover: #58a6ff;
    --glass-border: #30363d99;
    --text-color: #e6edf3;
    --text-muted: #7d8590;
    --text-secondary: #8b949e;
    --text-accent: #58a6ff;
    --accent-color: #58a6ff;
    --accent-gradient: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 100%);
    --accent-glow: #58a6ff33;
    --accent-hover: #58a6ff66;
    --accent-bg: #58a6ff1a;
    --accent-bg-hover: #58a6ff33;
    --accent-light: #a5c8ff;
    --accent-rgb: 88, 166, 255;
    --button-bg: #21262d;
    --button-border: #f0f6fc1a;
    --button-text: #c9d1d9;
    --button-primary-text: white;
    --success-color: #3fb950;
    --warning-color: #d29922;
    --danger-color: #f85149;
    --info-color: #39d0d8;
    --glass-blur: blur(12px);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

body.amx-static-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-color);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

body.amx-static-page a {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, filter 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

body.amx-static-page a:hover {
    color: var(--accent-light);
    filter: brightness(1.1);
}

body.amx-static-page main {
    position: relative;
    overflow: hidden;
}

body.amx-static-page main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 2%, rgba(var(--accent-rgb), 0.14), transparent 28rem),
        radial-gradient(circle at 84% 12%, rgba(210, 153, 34, 0.10), transparent 24rem);
    opacity: 0.9;
}

body.amx-static-page main > * {
    position: relative;
}

.amx-page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.amx-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 17, 23, 0.92);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.amx-topbar-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.amx-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.amx-brand img {
    height: 34px;
    width: auto;
    display: block;
}

.amx-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.amx-button,
.amx-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
}

.amx-button:hover,
.amx-nav-link:hover {
    background: var(--accent-bg-hover);
    border-color: var(--accent-color);
    color: var(--text-color);
    filter: none;
}

.amx-button-primary {
    border-color: transparent;
    background: var(--accent-gradient);
    color: var(--button-primary-text);
    box-shadow: 0 0 18px var(--accent-glow);
}

.amx-button-primary:hover {
    color: var(--button-primary-text);
    filter: brightness(1.08);
}

.amx-hero {
    padding: 56px 0 34px;
}

.amx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.76fr);
    gap: 28px;
    align-items: center;
}

.amx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.amx-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
    box-shadow: 0 0 12px var(--accent-glow);
}

.amx-static-page h1,
.amx-static-page h2,
.amx-static-page h3 {
    margin: 0;
    color: var(--text-color);
    line-height: 1.2;
}

.amx-static-page h1 {
    max-width: 760px;
    margin-bottom: 18px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.35rem, 6vw, 4.35rem);
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 0 40px var(--accent-glow);
}

.amx-static-page h2 {
    margin-bottom: 14px;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 800;
}

.amx-static-page h3 {
    margin-bottom: 8px;
    font-size: 1.02rem;
    font-weight: 800;
}

.amx-hero-copy {
    max-width: 680px;
}

.amx-hero-copy p,
.amx-section-lead {
    color: var(--text-secondary);
    font-size: 1rem;
}

.amx-hero-copy p {
    max-width: 62ch;
    margin: 0 0 22px;
}

.amx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
}

.amx-hero-note {
    display: grid;
    gap: 6px;
    margin-top: 22px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.amx-panel,
.amx-card {
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.amx-panel {
    padding: 16px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.amx-card {
    padding: 18px;
}

.amx-section {
    padding: 38px 0;
}

.amx-section-lead {
    max-width: 760px;
    margin: 0 0 24px;
}

.amx-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.amx-split {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(300px, 0.62fr);
    gap: 20px;
    align-items: start;
}

.amx-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.amx-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.amx-list li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.amx-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 0.5em;
    border-radius: 50%;
    background: var(--tier, var(--accent-color));
    box-shadow: 0 0 10px color-mix(in srgb, var(--tier, var(--accent-color)) 70%, transparent);
}

.amx-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--panel-bg);
}

.amx-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.amx-table th,
.amx-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
    font-size: 0.92rem;
}

.amx-table th {
    color: var(--text-color);
    background: var(--entry-bg);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.amx-table td {
    color: var(--text-secondary);
}

.amx-table tr:last-child td {
    border-bottom: 0;
}

.amx-site-footer {
    width: min(1180px, calc(100% - 32px));
    margin: 42px auto 0;
    padding: 32px 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--glass-border);
}

.amx-site-footer p {
    max-width: 920px;
    margin: 0;
}

.amx-site-footer:hover {
    opacity: 1;
}

.amx-site-footer a {
    color: var(--accent-color);
}

.amx-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* Policy links. Underlined and in the muted body color rather than the accent
   used elsewhere in the footer: these need to be unmistakably links, but they
   should not out-shout the Spellvector credit directly beneath them. */
.amx-footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.amx-footer-legal a {
    color: var(--text-muted);
    text-decoration: underline;
}

.amx-footer-legal a:hover {
    color: var(--accent-color);
}

.amx-footer-socials a {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.amx-footer-socials a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: var(--accent-bg);
    filter: none;
}

.amx-social-icon {
    width: 17px;
    height: 17px;
    background-color: currentColor;
    display: block;
}

.amx-social-discord {
    -webkit-mask: url("/public/assets/social/discord.svg") center / contain no-repeat;
    mask: url("/public/assets/social/discord.svg") center / contain no-repeat;
}

.amx-social-youtube {
    -webkit-mask: url("/public/assets/social/youtube.svg") center / contain no-repeat;
    mask: url("/public/assets/social/youtube.svg") center / contain no-repeat;
}

.amx-social-tiktok {
    -webkit-mask: url("/public/assets/social/tiktok.svg") center / contain no-repeat;
    mask: url("/public/assets/social/tiktok.svg") center / contain no-repeat;
}

.amx-social-instagram {
    -webkit-mask: url("/public/assets/social/instagram.svg") center / contain no-repeat;
    mask: url("/public/assets/social/instagram.svg") center / contain no-repeat;
}

.amx-social-threads {
    -webkit-mask: url("/public/assets/social/threads.svg") center / contain no-repeat;
    mask: url("/public/assets/social/threads.svg") center / contain no-repeat;
}

.amx-social-x {
    -webkit-mask: url("/public/assets/social/x.svg") center / contain no-repeat;
    mask: url("/public/assets/social/x.svg") center / contain no-repeat;
}

.article-bracket-scale {
    display: grid;
    gap: 10px;
}

.article-scale-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 72px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--entry-bg);
}

.article-tier-1 { --tier: var(--success-color); }
.article-tier-2 { --tier: var(--info-color); }
.article-tier-3 { --tier: var(--warning-color); }
.article-tier-4 { --tier: #f97316; }
.article-tier-5 { --tier: var(--danger-color); }

.article-scale-number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #0d1117;
    background: var(--tier);
    font-weight: 900;
}

.article-scale-title {
    display: block;
    color: var(--text-color);
    font-weight: 800;
}

.article-scale-subtitle {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.article-scale-speed {
    color: var(--tier);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: right;
}

.article-bracket-card {
    --tier: var(--accent-color);
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

.article-bracket-card::before {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--tier);
}

.article-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--tier);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.article-card-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.article-steps {
    display: grid;
    gap: 10px;
    counter-reset: choose;
    margin-top: 18px;
}

.article-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--entry-bg);
}

.article-step::before {
    counter-increment: choose;
    content: counter(choose);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--button-primary-text);
    background: var(--accent-gradient);
    font-weight: 900;
}

.article-step strong {
    display: block;
    color: var(--text-color);
    margin-bottom: 3px;
}

.article-step span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.article-callout {
    border-color: var(--accent-hover);
    background:
        linear-gradient(135deg, var(--accent-bg), transparent),
        var(--panel-bg);
}

.article-callout h3 {
    color: var(--accent-light);
}

.article-rule-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: var(--button-primary-text);
    background: var(--accent-gradient);
    font-weight: 900;
}

.article-source-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.article-source-list a {
    border-bottom: 1px solid var(--accent-hover);
}

/* Compatibility aliases for the first article page, which was originally
   authored before the shared article shell existed. */
body.amx-static-page .site-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

body.amx-static-page .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 17, 23, 0.92);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

body.amx-static-page .topbar-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
}

body.amx-static-page .brand {
    display: inline-flex;
    align-items: center;
}

body.amx-static-page .brand img {
    height: 34px;
    width: auto;
}

body.amx-static-page .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* The topbar is sticky, so a second row of it is a second row gone from every
   screenful for the whole visit. Wide enough and the links read as words; too
   narrow and they drop to their icons rather than wrapping. */
body.amx-static-page .nav-icon {
    display: none;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

body.amx-static-page .nav-icon--brand {
    width: 21px;
    height: 21px;
}

/* The narrow-width behaviour lives in the media block further down, with the
   rest of this page's phone rules. Two blocks at the same breakpoint, one
   quietly overriding the other, is how the bar ended up wrapping anyway. */

body.amx-static-page .nav-link,
body.amx-static-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

body.amx-static-page .button.primary {
    border-color: transparent;
    background: var(--accent-gradient);
    color: var(--button-primary-text);
    box-shadow: 0 0 18px var(--accent-glow);
}

body.amx-static-page .nav-link:hover,
body.amx-static-page .button:hover {
    transform: none;
    background: var(--accent-bg-hover);
    border-color: var(--accent-color);
    color: var(--text-color);
}

body.amx-static-page .button.primary:hover {
    color: var(--button-primary-text);
    filter: brightness(1.08);
}

body.amx-static-page .hero {
    min-height: min(610px, calc(100vh - 70px));
    display: flex;
    align-items: flex-end;
    padding: 170px 0 76px;
    background:
        linear-gradient(90deg, rgba(13, 17, 23, 0.96) 0%, rgba(13, 17, 23, 0.74) 52%, rgba(13, 17, 23, 0.40) 100%),
        linear-gradient(180deg, rgba(13, 17, 23, 0.08) 0%, rgba(13, 17, 23, 0.88) 100%),
        var(--seasonal-hero-art) center / cover no-repeat;
    border-bottom: 1px solid var(--glass-border);
}

body.amx-static-page .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

body.amx-static-page .hero-grid-minimal {
    max-width: 1180px;
    margin: 0 auto;
    width: min(1180px, calc(100% - 32px));
}

body.amx-static-page .hero-copy {
    max-width: 720px;
    margin-left: 0;
    padding: 18px 0;
    text-align: left;
}

body.amx-static-page .eyebrow {
    color: var(--accent-color);
    justify-content: flex-start;
    letter-spacing: 0.12em;
}

body.amx-static-page .eyebrow::before {
    background: var(--accent-color);
    box-shadow: 0 0 12px var(--accent-glow);
}

body.amx-static-page .hero-copy p,
body.amx-static-page .section-lead {
    color: var(--text-secondary);
}

body.amx-static-page .hero-note {
    max-width: 620px;
    margin-left: 0;
    margin-bottom: 14px;
    color: var(--text-muted);
}

body.amx-static-page h1 {
    max-width: 640px;
    margin-left: 0;
    margin-bottom: 18px;
    background: none;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    font-size: clamp(3rem, 7vw, 5.4rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.94;
    text-shadow: 0 0 42px var(--accent-glow);
}

body.amx-static-page h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.65rem);
    letter-spacing: 0;
}

body.amx-static-page .hero-copy p {
    max-width: 66ch;
    font-size: 1.05rem;
}

body.amx-static-page .hero-actions {
    justify-content: flex-start;
}

body.amx-static-page .bracket-orbit,
body.amx-static-page .info-card,
body.amx-static-page .rule-card,
body.amx-static-page .bracket-card,
body.amx-static-page .callout {
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.amx-static-page .info-card,
body.amx-static-page .rule-card,
body.amx-static-page .callout {
    padding: 22px;
}

body.amx-static-page .bracket-orbit {
    padding: 18px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

body.amx-static-page .article-hero-panel {
    position: relative;
}

body.amx-static-page .article-hero-panel::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 12px;
    pointer-events: none;
}

body.amx-static-page .bracket-orbit::before {
    display: none;
}

body.amx-static-page .scale-row {
    position: relative;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 60px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--entry-bg);
    overflow: hidden;
}

body.amx-static-page .scale-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tier);
    opacity: 0.9;
}

body.amx-static-page .scale-row[data-tier="1"] { --tier: var(--success-color); }
body.amx-static-page .scale-row[data-tier="2"] { --tier: var(--info-color); }
body.amx-static-page .scale-row[data-tier="3"] { --tier: var(--warning-color); }
body.amx-static-page .scale-row[data-tier="4"] { --tier: #f97316; }
body.amx-static-page .scale-row[data-tier="5"] { --tier: var(--danger-color); }

body.amx-static-page .scale-number {
    width: 38px;
    height: 38px;
    color: var(--button-primary-text);
    background: var(--tier);
    font-weight: 900;
    z-index: 1;
}

body.amx-static-page .scale-subtitle,
body.amx-static-page .bracket-card p,
body.amx-static-page .info-card p,
body.amx-static-page .rule-card p,
body.amx-static-page .step span,
body.amx-static-page .signal-list li,
body.amx-static-page td {
    color: var(--text-secondary);
}

body.amx-static-page .section {
    padding: 48px 0;
}

body.amx-static-page .bracket-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.amx-static-page .bracket-card {
    display: grid;
    grid-template-columns: minmax(140px, 0.22fr) minmax(0, 0.78fr);
    column-gap: 24px;
    row-gap: 8px;
    padding: 22px 24px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.amx-static-page .bracket-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tier) 55%, var(--glass-border));
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
}

body.amx-static-page .bracket-card::before {
    grid-column: 1 / -1;
    box-shadow: 0 0 18px color-mix(in srgb, var(--tier) 50%, transparent);
}

body.amx-static-page .bracket-card .bracket-kicker {
    grid-column: 1;
    grid-row: 2;
}

body.amx-static-page .bracket-card h3 {
    grid-column: 1;
    grid-row: 3 / span 2;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

body.amx-static-page .bracket-card p:first-of-type {
    grid-column: 2;
    grid-row: 2;
    max-width: 76ch;
    margin: 0;
}

body.amx-static-page .bracket-card p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 3;
}

body.amx-static-page .bracket-card p:nth-of-type(2) {
    align-self: start;
    margin: 0 0 8px 0;
}

body.amx-static-page .bracket-card .signal-list {
    grid-column: 2;
    grid-row: 4;
    margin-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-self: start;
}

body.amx-static-page .bracket-card[data-tier="1"] { --tier: var(--success-color); }
body.amx-static-page .bracket-card[data-tier="2"] { --tier: var(--info-color); }
body.amx-static-page .bracket-card[data-tier="3"] { --tier: var(--warning-color); }
body.amx-static-page .bracket-card[data-tier="4"] { --tier: #f97316; }
body.amx-static-page .bracket-card[data-tier="5"] { --tier: var(--danger-color); }

/* ── Bracket card commander art ─────────────────────────────────────────────
   Each bracket widget carries a darkened commander art_crop that signals its
   power level. The art is absolutely positioned behind the content (which is
   lifted above it) and dimmed by a left-to-right scrim so the title and copy
   stay readable. Bracket 5 shows the Rograkh / Silas partner pair split along a
   shared diagonal. Swap a commander by editing its art_crop URL at the bottom. */
body.amx-static-page .article-bracket-card {
    isolation: isolate;
}

/* Lift real content and the tier bar above the art + scrim (both z-index: 0). */
body.amx-static-page .article-bracket-card > *:not(.bracket-art),
body.amx-static-page .article-bracket-card::before {
    position: relative;
    z-index: 1;
}

body.amx-static-page .bracket-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

body.amx-static-page .bracket-art-layer {
    position: absolute;
    inset: 0;
    background-image: var(--bracket-art);
    background-size: cover;
    background-position: center 22%;
    opacity: 0.55;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Readability scrim: opaque panel over the title column, fading to reveal the
   art on the right. */
body.amx-static-page .article-bracket-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        var(--panel-bg-opaque) 0%,
        color-mix(in srgb, var(--panel-bg-opaque) 82%, transparent) 42%,
        color-mix(in srgb, var(--panel-bg-opaque) 55%, transparent) 100%
    );
}

body.amx-static-page .bracket-card:hover .bracket-art-layer {
    opacity: 0.7;
    transform: scale(1.03);
}

/* Partner split (Bracket 5): two art layers meet along a shared 115deg diagonal.
   Both are masked against the same angle so the seam lines up at any card size. */
body.amx-static-page .bracket-art-split .bracket-art-layer:first-child {
    -webkit-mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
}
body.amx-static-page .bracket-art-split .bracket-art-layer:last-child {
    -webkit-mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
}
/* The seam — a fine line along the same diagonal. */
body.amx-static-page .bracket-art-split::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent calc(50% - 0.75px),
        rgba(255, 255, 255, 0.55) calc(50% - 0.75px),
        rgba(255, 255, 255, 0.55) calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}

/* Commander art per bracket (Scryfall art_crop; fuzzy name lookup). */
body.amx-static-page .bracket-card[data-tier="1"] .bracket-art-layer {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Phelddagrif&format=image&version=art_crop');
}
body.amx-static-page .bracket-card[data-tier="2"] .bracket-art-layer {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Gluntch%20the%20Bestower&format=image&version=art_crop');
}
body.amx-static-page .bracket-card[data-tier="3"] .bracket-art-layer {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Kilo%20Apogee%20Mind&format=image&version=art_crop');
}
body.amx-static-page .bracket-card[data-tier="4"] .bracket-art-layer {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Miirym%20Sentinel%20Wyrm&format=image&version=art_crop');
}
body.amx-static-page .bracket-card[data-tier="5"] .bracket-art-layer:first-child {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Rograkh&format=image&version=art_crop');
}
body.amx-static-page .bracket-card[data-tier="5"] .bracket-art-layer:last-child {
    --bracket-art: url('https://api.scryfall.com/cards/named?fuzzy=Silas%20Renn&format=image&version=art_crop');
}

body.amx-static-page .rule-icon,
body.amx-static-page .step::before {
    color: var(--button-primary-text);
    background: var(--accent-gradient);
}

body.amx-static-page .steps {
    counter-reset: choose;
}

body.amx-static-page .step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--entry-bg);
}

body.amx-static-page .step::before {
    counter-increment: choose;
    content: counter(choose);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 900;
}

body.amx-static-page .steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.amx-static-page .step > div {
    min-width: 0;
}

body.amx-static-page .split:has(.steps) {
    grid-template-columns: 1fr;
}

body.amx-static-page .step strong {
    display: block;
    color: var(--text-color);
    margin-bottom: 3px;
}

body.amx-static-page .step span {
    display: block;
}

body.amx-static-page .callout {
    margin-top: 16px;
    border-color: var(--accent-hover);
    background:
        linear-gradient(135deg, var(--accent-bg), transparent),
        var(--panel-bg);
}

body.amx-static-page .callout h3 {
    color: var(--accent-light);
}

body.amx-static-page .rule-zero-steps {
    margin-top: 18px;
}

body.amx-static-page .rule-zero-script {
    margin-top: 14px;
}

body.amx-static-page .article-cta-card {
    width: 100%;
}

body.amx-static-page #use-am .split {
    grid-template-columns: 1fr;
}

body.amx-static-page .table-wrap {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--panel-bg);
}

body.amx-static-page th {
    background: var(--entry-bg);
}

body.amx-static-page th,
body.amx-static-page td {
    border-bottom: 1px solid var(--border-color);
}

body.amx-static-page .source-list a {
    border-bottom-color: var(--accent-hover);
}

body.amx-static-page .footer {
    display: none;
}

body.amx-static-page .signal-list a,
body.amx-static-page .article-signal-table a {
    color: var(--accent-light);
    font-weight: 700;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.32);
}

body.amx-static-page .signal-list a:hover,
body.amx-static-page .article-signal-table a:hover {
    color: var(--text-color);
    border-bottom-color: var(--accent-color);
}

body.amx-static-page .article-bracket-grid .bracket-card p + p {
    margin-top: 16px;
    color: var(--text-color);
    font-weight: 700;
}

body.amx-static-page .signal-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.amx-static-page .signal-example-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    padding: 20px;
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

body.amx-static-page .signal-example-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

body.amx-static-page .signal-example-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

body.amx-static-page .signal-example-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-hover);
    color: var(--accent-light);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

body.amx-static-page .signal-example-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

body.amx-static-page .example-card-list {
    display: grid;
    gap: 12px;
    min-height: 260px;
    align-content: start;
}

body.amx-static-page .example-fallback-link,
body.amx-static-page .example-more-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--entry-bg);
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: 700;
    justify-self: start;
    align-self: start;
}

body.amx-static-page .examples-fallback .example-card-list {
    min-height: 0;
}

body.amx-static-page .example-fallback-link:hover,
body.amx-static-page .example-more-link:hover {
    border-color: var(--accent-color);
    background: var(--accent-bg-hover);
    color: var(--text-color);
    filter: none;
}

body.amx-static-page .example-card-previews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.amx-static-page .example-card-preview {
    display: block;
    min-width: 0;
    color: var(--text-color);
}

body.amx-static-page .example-card-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 488 / 680;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--entry-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.amx-static-page .example-card-preview span {
    display: none;
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

body.amx-static-page .example-card-preview:hover {
    filter: none;
}

body.amx-static-page .example-card-preview:hover img {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), 0 0 18px var(--accent-glow);
}

body.amx-static-page .example-combo-pairs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.amx-static-page .example-combo-pair {
    min-width: 0;
}

body.amx-static-page .example-combo-stack {
    position: relative;
    min-height: 156px;
}

body.amx-static-page .example-combo-stack .combo-card-preview {
    position: absolute;
    top: 0;
    width: 64%;
    min-width: 0;
}

body.amx-static-page .example-combo-stack .combo-card-preview:first-child {
    left: 0;
    z-index: 2;
    transform: rotate(-3deg);
}

body.amx-static-page .example-combo-stack .combo-card-preview:nth-child(2) {
    right: 0;
    top: 12px;
    z-index: 1;
    transform: rotate(3deg);
}

body.amx-static-page .example-combo-stack .combo-card-preview:hover {
    z-index: 3;
}

body.amx-static-page .example-combo-stack .combo-card-preview:hover img {
    transform: translateY(-3px);
}

body.amx-static-page .example-combo-stack .combo-card-preview span {
    display: none;
}

body.amx-static-page .example-combo-label {
    display: none;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
}

body.amx-static-page .example-more-link {
    justify-self: start;
    color: var(--accent-light);
    border-color: var(--accent-hover);
}

body.amx-static-page .example-loading {
    color: var(--text-muted);
    font-size: 0.86rem;
    font-style: italic;
}

body.amx-static-page .signal-example-note {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 1040px) {
    .amx-hero-grid,
    .amx-split,
    body.amx-static-page .hero-grid,
    body.amx-static-page .split {
        grid-template-columns: 1fr;
    }

    .amx-grid-5,
    body.amx-static-page .bracket-grid {
        grid-template-columns: 1fr;
    }

    .amx-rule-grid,
    body.amx-static-page .rule-grid {
        grid-template-columns: 1fr;
    }

    body.amx-static-page .signal-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .amx-page-shell,
    body.amx-static-page .site-shell {
        width: min(100% - 24px, 1180px);
    }

    /* One row, always. The bar is sticky, so a second row of it is a row gone
       from every screenful for the whole visit. The links drop their labels
       for their icons rather than wrapping, and nothing stretches: each is
       just wide enough for its glyph. */
    .amx-topbar-inner,
    body.amx-static-page .topbar-inner {
        min-height: 52px;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 6px 0;
    }

    /* The logo gives up width first: it is the one thing here that is still
       recognisable at any size. */
    .amx-brand,
    body.amx-static-page .brand {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
    }

    .amx-brand img,
    body.amx-static-page .brand img {
        height: 26px;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .amx-nav,
    body.amx-static-page .nav-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
    }

    body.amx-static-page .nav-icon {
        display: block;
    }

    /* Hidden visually only; every link carries an `aria-label`, so its
       accessible name survives. */
    body.amx-static-page .nav-label {
        display: none;
    }

    .amx-button,
    .amx-nav-link,
    body.amx-static-page .nav-actions .button,
    body.amx-static-page .nav-actions .nav-link {
        flex: 0 0 auto;
        min-width: 0;
        padding: 8px 11px;
    }

    .amx-hero,
    body.amx-static-page .hero {
        padding-top: 38px;
    }

    .amx-section,
    body.amx-static-page .section {
        padding: 34px 0;
    }

    .amx-grid-5,
    body.amx-static-page .bracket-grid {
        grid-template-columns: 1fr;
    }

    body.amx-static-page .hero {
        min-height: 420px;
        align-items: flex-end;
        padding-bottom: 44px;
        background-position: center;
        background-size: auto, auto, cover;
    }

    body.amx-static-page .hero-copy,
    body.amx-static-page .hero-note,
    body.amx-static-page h1 {
        margin-left: 0;
        text-align: left;
    }

    body.amx-static-page .hero-actions,
    body.amx-static-page .eyebrow {
        justify-content: flex-start;
    }

    body.amx-static-page .bracket-card {
        grid-template-columns: 1fr;
    }

    /* Stacked cards: art reads behind the header at the top, fading to an opaque
       panel behind the body copy (a left-to-right scrim would sit under every
       stacked text row). */
    body.amx-static-page .article-bracket-card::after {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--panel-bg-opaque) 62%, transparent) 0%,
            var(--panel-bg-opaque) 74%
        );
    }
    body.amx-static-page .bracket-art-layer {
        opacity: 0.4;
        background-position: center 12%;
    }

    body.amx-static-page .bracket-card .bracket-kicker,
    body.amx-static-page .bracket-card h3,
    body.amx-static-page .bracket-card p:first-of-type,
    body.amx-static-page .bracket-card p:nth-of-type(2),
    body.amx-static-page .bracket-card .signal-list {
        grid-column: 1;
        grid-row: auto;
    }

    body.amx-static-page .bracket-card .signal-list,
    body.amx-static-page .steps,
    body.amx-static-page .signal-example-grid {
        grid-template-columns: 1fr;
    }

    body.amx-static-page .example-card-list {
        min-height: 0;
    }

    body.amx-static-page .example-combo-stack {
        min-height: 178px;
    }

    .article-scale-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .article-scale-speed {
        grid-column: 2;
        text-align: left;
    }
}


/* ── Format reference articles ────────────────────────────────────────────
   The banlist and legal-set pages. Their lists are written into the HTML at
   build time by scripts/build_format_data.ps1 and refreshed in place by
   format-banlist.js, so everything here has to look right for a list of four
   entries and a list of two hundred. */

.format-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 26px 0 0;
}

.format-stat {
    padding: 14px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--panel-bg);
}

.format-stat dt {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.format-stat dd {
    margin: 0;
    color: var(--text-color);
    font-size: 1.32rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.format-stat dd small {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* The banlist itself. Columns rather than one long strip: a reader scanning
   for a card name finds it far faster across three short columns than down
   one column of two hundred. */
.format-card-list {
    columns: 3 210px;
    column-gap: 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.format-card-item {
    break-inside: avoid;
    margin: 0 0 2px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.format-card-item a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.format-card-item:hover {
    background: var(--entry-bg);
}

.format-card-item a:hover,
.format-card-item a:focus-visible {
    color: var(--accent-light);
    border-bottom-color: var(--accent-hover);
}

.format-card-empty {
    color: var(--text-secondary);
    font-style: italic;
}

/* Legal sets for a rotating format, oldest first, so the next set to leave is
   the one at the top. */
.format-set-list {
    display: grid;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.format-set-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}

.format-set-item:hover {
    border-color: var(--border-hover);
}

.format-set-link {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 9px 14px;
    color: inherit;
    text-decoration: none;
}

/* Scryfall's set symbols are black artwork, so they are used as a mask and
   filled with the current text colour rather than drawn as an image — the same
   way the app renders them. A mask is not subject to CORS, so these load
   straight from Scryfall with no proxy. */
.format-set-symbol {
    width: 22px;
    height: 22px;
    background-color: var(--text-secondary);
    -webkit-mask-image: var(--set-symbol);
    mask-image: var(--set-symbol);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Keeps the column so names stay aligned when a set has no symbol. */
.format-set-symbol--none {
    background: none;
}

.format-set-link:hover .format-set-symbol {
    background-color: var(--accent-color);
}

.format-set-code {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.format-set-name {
    color: var(--text-color);
    font-size: 0.92rem;
    font-weight: 600;
}

.format-set-date {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

/* Says where the list came from and when. The live refresher flips the state
   to `is-live` once it has confirmed the page against Scryfall. */
.format-freshness {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.format-freshness::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}

.format-freshness.is-live::before {
    background: var(--success-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--success-color) 70%, transparent);
}

.format-freshness.is-stale::before {
    background: var(--warning-color);
}

/* Questions people actually type into a search box, answered in the page.
   Open by default: a collapsed answer is one a crawler may score lower and a
   reader has to work for. */
.format-faq {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.format-faq details {
    padding: 14px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--panel-bg);
}

.format-faq summary {
    color: var(--text-color);
    font-size: 0.98rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.format-faq summary::-webkit-details-marker {
    display: none;
}

.format-faq summary::after {
    content: "+";
    float: right;
    color: var(--text-muted);
    font-weight: 400;
}

.format-faq details[open] summary::after {
    content: "\2212";
}

.format-faq p {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* The row of other format articles at the foot of each one. */
/* The heading above the sibling links sits directly under a row of buttons,
   which have no bottom margin of their own. Scoped to the page body to clear
   `.amx-static-page h3`, which is a class plus an element and would otherwise
   win. */
body.amx-static-page .format-siblings-heading {
    margin-top: 32px;
    margin-bottom: 0;
}

.format-siblings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.format-sibling {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

.format-sibling:hover,
.format-sibling:focus-visible {
    border-color: var(--border-hover);
    color: var(--text-color);
}

.format-sibling[aria-current="page"] {
    border-color: var(--accent-color);
    background: var(--accent-bg);
    color: var(--accent-light);
}

/* ── Quizzes ──────────────────────────────────────────────────────────────
   One question on screen at a time, a progress rail, and a result card built
   to be screenshotted and shared. Driven by public/static/quiz.js. */

.quiz {
    max-width: 720px;
    margin: 26px auto 0;
}

.quiz-progress {
    height: 4px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: var(--entry-bg);
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent-gradient);
    transition: width 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.quiz-step {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.quiz-question {
    margin: 10px 0 20px;
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.quiz-answers {
    display: grid;
    gap: 10px;
}

.quiz-answer {
    display: block;
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.97rem;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.quiz-answer:hover,
.quiz-answer:focus-visible {
    border-color: var(--border-hover);
    background: var(--entry-hover-bg);
    transform: translateY(-1px);
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}

.quiz-back {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.83rem;
    cursor: pointer;
}

.quiz-back:hover:not(:disabled) {
    border-color: var(--border-hover);
    color: var(--text-color);
}

.quiz-back:disabled {
    opacity: 0.4;
    cursor: default;
}

/* The result. `--result-art` is set per outcome from its Scryfall art. */
.quiz-result {
    position: relative;
    padding: 28px;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: var(--panel-bg);
    overflow: hidden;
}

.quiz-result::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--result-art, none);
    background-size: cover;
    background-position: center 28%;
    opacity: 0.26;
}

.quiz-result::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-color) 58%, transparent), var(--bg-color) 82%);
}

.quiz-result > * {
    position: relative;
    z-index: 1;
}

.quiz-result-kicker {
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.quiz-result-name {
    margin: 8px 0 0;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    text-wrap: balance;
}

.quiz-result-blurb {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.6;
}

.quiz-result-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.quiz-trait {
    padding: 5px 11px;
    border: 1px solid var(--accent-hover);
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent-light);
    font-size: 0.78rem;
    font-weight: 600;
}

.quiz-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.quiz-share-note {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* Only shown when both copy paths failed, so the reader can still select the
   link by hand rather than being left with a button that did nothing. */
.quiz-share-fallback {
    width: 100%;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--accent-hover);
    border-radius: 9px;
    background: var(--entry-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.82rem;
}

@media (max-width: 720px) {
    .format-card-list {
        columns: 1;
    }

    .format-set-item {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .format-set-date {
        grid-column: 2;
    }

    .quiz-question {
        font-size: 1.25rem;
    }

    .quiz-result-name {
        font-size: 1.7rem;
    }
}

/* The answer, first: a dated one-line statement of the figures the page is
   about, directly under the title. It is what an AI answer or a search snippet
   quotes, so it reads as a plain sentence rather than a callout. */
body.amx-static-page .format-answer {
    margin: 0 0 12px;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-color);
}