/* =========================================================
   GUIA COMPLETO — YUGIOH PRO
========================================================= */

.guide-page {
    --guide-panel: #101a2e;
    --guide-panel-light: #16233c;
    --guide-border: #2a3955;
    --guide-gold: #f2c14e;
    --guide-muted: #9ba7bd;
}


/* Capa */

.guide-hero {
    position: relative;
    overflow: hidden;

    padding: 58px 46px;
    margin-bottom: 30px;

    border: 1px solid var(--guide-border);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at right top,
            rgba(242, 193, 78, .17),
            transparent 37%
        ),
        linear-gradient(
            135deg,
            #172541,
            #0d1527
        );
}

.guide-hero::after {
    content: "✦";

    position: absolute;
    right: 48px;
    top: 50%;

    color: rgba(242, 193, 78, .12);
    font-size: 180px;
    line-height: 1;

    transform: translateY(-50%);
    pointer-events: none;
}

.guide-hero h1 {
    position: relative;
    z-index: 1;

    max-width: 730px;
    margin: 12px 0 18px;

    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: 1.04;
}

.guide-hero p {
    position: relative;
    z-index: 1;

    max-width: 700px;
    margin: 0 0 28px;

    color: var(--guide-muted);
    font-size: 1.1rem;
}

.guide-start-button {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 22px;

    border: 1px solid var(--guide-gold);
    border-radius: 11px;

    background: var(--guide-gold);
    color: #111827;

    font-weight: 900;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.guide-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(242, 193, 78, .18);
}


/* Introdução */

.guide-introduction {
    padding: 26px;
    margin-bottom: 30px;

    border: 1px solid var(--guide-border);
    border-radius: 16px;

    background: var(--guide-panel);
}

.guide-introduction h2 {
    margin-top: 0;
}

.guide-introduction p {
    max-width: 900px;
    color: var(--guide-muted);
}


/* Seções */

.guide-section {
    margin-top: 42px;
}

.guide-section-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 17px;
}

.guide-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    border: 1px solid var(--guide-gold);
    border-radius: 50%;

    background: rgba(242, 193, 78, .1);
    color: var(--guide-gold);

    font-size: 13px;
    font-weight: 900;
}

.guide-section-heading h2 {
    margin: 0 0 3px;
}

.guide-section-heading p {
    margin: 0;
    color: var(--guide-muted);
    font-size: 14px;
}


/* Capítulos */

.guide-chapter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.guide-chapter-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;

    min-width: 0;
    padding: 20px;

    border: 1px solid var(--guide-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--guide-panel-light),
            var(--guide-panel)
        );

    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.guide-chapter-card:hover {
    transform: translateY(-4px);
    border-color: var(--guide-gold);

    background:
        linear-gradient(
            145deg,
            #1a2947,
            #111c31
        );

    box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
}

.guide-chapter-number {
    color: var(--guide-gold);
    font-size: 12px;
    font-weight: 900;
}

.guide-chapter-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.guide-chapter-card p {
    margin: 0;

    color: var(--guide-muted);
    font-size: 13px;
    line-height: 1.5;
}

.guide-chapter-arrow {
    align-self: center;

    color: var(--guide-gold);
    font-size: 22px;

    transition: transform .2s ease;
}

.guide-chapter-card:hover .guide-chapter-arrow {
    transform: translateX(4px);
}


/* Recursos */

.guide-resources {
    margin-top: 48px;
    padding: 28px;

    border: 1px solid var(--guide-border);
    border-radius: 18px;

    background: var(--guide-panel);
}

.guide-resources h2 {
    margin-top: 0;
}

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

.guide-resource-grid a {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 15px;

    border: 1px solid var(--guide-border);
    border-radius: 11px;

    background: #0d1628;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.guide-resource-grid a:hover {
    transform: translateY(-2px);
    border-color: var(--guide-gold);
}

.guide-resource-grid strong {
    color: var(--guide-gold);
}

.guide-resource-grid span {
    color: var(--guide-muted);
    font-size: 12px;
}


/* Tablet */

@media (max-width: 900px) {

    .guide-chapter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .guide-hero {
        padding: 34px 22px;
    }

    .guide-hero::after {
        right: -18px;
        font-size: 130px;
    }

    .guide-hero p {
        font-size: .96rem;
    }

    .guide-start-button {
        width: 100%;
    }

    .guide-introduction {
        padding: 20px;
    }

    .guide-chapter-grid,
    .guide-resource-grid {
        grid-template-columns: 1fr;
    }

    .guide-chapter-card {
        padding: 16px;
    }

    .guide-resources {
        padding: 20px;
    }
}

/* =========================================================
   ARTIGOS DO GUIA
========================================================= */

.guide-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 18px;

    color: var(--guide-muted);
    font-size: 13px;
}

.guide-breadcrumb a {
    color: var(--guide-gold);
}

.guide-breadcrumb strong {
    color: #fff;
}

.guide-article-hero {
    padding-top: 46px;
    padding-bottom: 46px;
}

.guide-article-meta {
    position: relative;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guide-article-meta span {
    padding: 7px 10px;

    border: 1px solid var(--guide-border);
    border-radius: 999px;

    background: rgba(7, 11, 22, .35);
    color: #cbd5e1;

    font-size: 12px;
}

.guide-article-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.guide-sidebar {
    position: sticky;
    top: 92px;

    padding: 18px;

    border: 1px solid var(--guide-border);
    border-radius: 14px;

    background: var(--guide-panel);
}

.guide-sidebar > strong {
    display: block;
    margin-bottom: 12px;

    color: var(--guide-gold);
    font-size: 13px;
    text-transform: uppercase;
}

.guide-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guide-sidebar nav a {
    padding: 8px 10px;

    border-radius: 7px;

    color: var(--guide-muted);
    font-size: 13px;

    transition:
        background .2s ease,
        color .2s ease;
}

.guide-sidebar nav a:hover {
    background: var(--guide-panel-light);
    color: var(--guide-gold);
}

.guide-article-content {
    min-width: 0;
}

.guide-content-section {
    scroll-margin-top: 100px;

    padding: 26px;
    margin-bottom: 20px;

    border: 1px solid var(--guide-border);
    border-radius: 16px;

    background: var(--guide-panel);
}

.guide-content-section h2 {
    margin: 6px 0 14px;
}

.guide-content-section h3 {
    margin: 24px 0 10px;
    font-size: 18px;
}

.guide-content-section p {
    color: var(--guide-muted);
}

.guide-section-label {
    color: var(--guide-gold);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.guide-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 20px;
}

.guide-feature-card {
    padding: 18px;

    border: 1px solid var(--guide-border);
    border-radius: 12px;

    background: #0d1628;
}

.guide-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: rgba(242, 193, 78, .1);
    font-size: 20px;
}

.guide-feature-card h3 {
    margin: 12px 0 7px;
}

.guide-feature-card p {
    margin: 0;
    font-size: 13px;
}

.guide-note {
    padding: 16px 18px;
    margin: 20px 0;

    border-left: 4px solid #4b7bec;
    border-radius: 8px;

    background: rgba(75, 123, 236, .08);
}

.guide-note-important {
    border-left-color: var(--guide-gold);
    background: rgba(242, 193, 78, .08);
}

.guide-note-warning {
    border-left-color: #e98b45;
    background: rgba(233, 139, 69, .08);
}

.guide-note strong {
    color: #fff;
}

.guide-note p {
    margin-bottom: 0;
}

.guide-check-list {
    display: grid;
    gap: 10px;
}

.guide-check-list > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 12px;

    padding: 13px;

    border: 1px solid var(--guide-border);
    border-radius: 10px;

    background: #0d1628;
}

.guide-check-list > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: rgba(242, 193, 78, .1);
    color: var(--guide-gold);

    font-size: 11px;
    font-weight: 900;
}

.guide-check-list p {
    margin: 5px 0 0;
    font-size: 13px;
}

.guide-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 15px;
    padding: 10px 14px;

    border: 1px solid var(--guide-border);
    border-radius: 9px;

    color: var(--guide-gold);
    font-weight: 800;
}

.guide-inline-link:hover {
    border-color: var(--guide-gold);
}

.guide-example {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    margin: 20px 0;
}

.guide-example > b {
    color: var(--guide-gold);
    font-size: 22px;
}

.guide-example-step {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 14px;

    border: 1px solid var(--guide-border);
    border-radius: 10px;

    background: #0d1628;
    text-align: center;
}

.guide-example-step span {
    color: var(--guide-muted);
    font-size: 11px;
}

.guide-example-result {
    border-color: var(--guide-gold);
}

.guide-example-result strong {
    color: var(--guide-gold);
}

.guide-list {
    padding-left: 22px;
    color: var(--guide-muted);
}

.guide-list li {
    margin: 9px 0;
}

.guide-guardian-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin: 18px 0;
}

.guide-guardian-summary div {
    padding: 15px;

    border: 1px solid var(--guide-border);
    border-radius: 10px;

    background: #0d1628;
}

.guide-guardian-summary strong,
.guide-guardian-summary span {
    display: block;
}

.guide-guardian-summary strong {
    margin-bottom: 5px;
    color: var(--guide-gold);
}

.guide-guardian-summary span {
    color: var(--guide-muted);
    font-size: 12px;
}

.guide-table-wrap {
    overflow-x: auto;

    margin: 18px 0;

    border: 1px solid var(--guide-border);
    border-radius: 12px;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;

    background: #0d1628;
}

.guide-table th,
.guide-table td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--guide-border);
    text-align: left;
}

.guide-table th {
    color: var(--guide-gold);
}

.guide-table td {
    color: var(--guide-muted);
}

.guide-final-checklist {
    display: grid;
    gap: 9px;
}

.guide-final-checklist label {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px;

    border: 1px solid var(--guide-border);
    border-radius: 10px;

    background: #0d1628;
    color: var(--guide-muted);

    cursor: pointer;
}

.guide-final-checklist input {
    width: 18px;
    height: 18px;
    accent-color: var(--guide-gold);
}

.guide-article-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 28px;
}

.guide-article-navigation a {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px;

    border: 1px solid var(--guide-border);
    border-radius: 12px;

    background: var(--guide-panel);
}

.guide-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.guide-article-navigation small,
.guide-article-navigation strong {
    display: block;
}

.guide-article-navigation small {
    color: var(--guide-muted);
}

.guide-article-navigation strong {
    color: var(--guide-gold);
}


/* Tablet */

@media (max-width: 900px) {

    .guide-article-layout {
        grid-template-columns: 1fr;
    }

    .guide-sidebar {
        position: static;
    }

    .guide-sidebar nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .guide-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-content-section {
        padding: 19px;
    }

    .guide-feature-grid,
    .guide-guardian-summary,
    .guide-article-navigation {
        grid-template-columns: 1fr;
    }

    .guide-example {
        grid-template-columns: 1fr;
    }

    .guide-example > b {
        text-align: center;
    }

    .guide-example > b:last-of-type {
        transform: rotate(90deg);
    }

    .guide-nav-next {
        text-align: left;
        justify-content: space-between;
    }
}

/* =========================================================
   COMO DUELAR
========================================================= */

.duel-field-example {
    display: grid;
    gap: 14px;

    padding: 22px;
    margin: 20px 0;

    border: 1px solid var(--guide-border);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at center,
            rgba(75, 123, 236, .1),
            transparent 60%
        ),
        #091222;
}

.duel-field-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.duel-field-label {
    color: var(--guide-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.duel-field-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.duel-field-slots span {
    display: block;
    min-height: 72px;

    border: 1px dashed #3c4d6e;
    border-radius: 7px;

    background: rgba(255, 255, 255, .025);
}

.duel-field-center {
    padding: 10px;

    border-top: 1px solid var(--guide-border);
    border-bottom: 1px solid var(--guide-border);

    color: var(--guide-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-align: center;
}

.guide-battle-example {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    margin: 20px 0;
}

.guide-battle-example > b {
    color: var(--guide-gold);
    font-size: 18px;
}

.guide-battle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    padding: 18px;

    border: 1px solid var(--guide-border);
    border-radius: 12px;

    background: #0d1628;
    text-align: center;
}

.guide-battle-card span,
.guide-battle-card small {
    color: var(--guide-muted);
    font-size: 11px;
}

.guide-battle-card strong {
    color: var(--guide-gold);
    font-size: 18px;
}

.guide-battle-loser {
    border-color: rgba(225, 85, 85, .55);
}

.guide-battle-result {
    grid-column: 1 / -1;

    padding: 11px;

    border: 1px solid rgba(242, 193, 78, .4);
    border-radius: 9px;

    background: rgba(242, 193, 78, .07);
    color: var(--guide-gold);

    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.guide-rank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin: 18px 0;
}

.guide-rank-grid article {
    padding: 17px;

    border: 1px solid var(--guide-border);
    border-radius: 11px;

    background: #0d1628;
}

.guide-rank-grid strong {
    display: block;
    margin-bottom: 7px;

    color: var(--guide-gold);
}

.guide-rank-grid p {
    margin: 0;
    font-size: 12px;
}


/* Celular */

@media (max-width: 640px) {

    .duel-field-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .duel-field-slots {
        gap: 5px;
    }

    .duel-field-slots span {
        min-height: 48px;
    }

    .guide-battle-example {
        grid-template-columns: 1fr;
    }

    .guide-battle-example > b {
        text-align: center;
    }

    .guide-rank-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   GUIA VISUAL DA CAMPANHA
========================================================= */

.campaign-guide-page {
    --campaign-panel: #101a2e;
    --campaign-panel-light: #16233c;
    --campaign-border: #2a3955;
    --campaign-gold: #f2c14e;
    --campaign-muted: #9ba7bd;
}


/* Capa do capítulo */

.campaign-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    overflow: hidden;

    margin-bottom: 26px;

    border: 1px solid var(--campaign-border);
    border-radius: 20px;

    background: var(--campaign-panel);
}

.campaign-hero-image {
    position: relative;
    min-height: 390px;
    overflow: hidden;

    background: #08101e;
}

.campaign-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 390px;

    object-fit: cover;
    object-position: center;
}

.campaign-hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 55%,
            rgba(16, 26, 46, .95) 100%
        );
    pointer-events: none;
}

.campaign-chapter {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;

    padding: 7px 11px;

    border: 1px solid rgba(242, 193, 78, .65);
    border-radius: 999px;

    background: rgba(7, 11, 22, .84);
    color: var(--campaign-gold);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}

.campaign-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 38px;
}

.campaign-hero-content h1 {
    margin: 9px 0 12px;

    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
}

.campaign-hero-content > p {
    margin: 0 0 24px;
    color: var(--campaign-muted);
}

.campaign-objective {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 15px;

    border: 1px solid rgba(242, 193, 78, .4);
    border-radius: 11px;

    background: rgba(242, 193, 78, .07);
}

.campaign-objective > span {
    font-size: 24px;
}

.campaign-objective small,
.campaign-objective strong {
    display: block;
}

.campaign-objective small {
    color: var(--campaign-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.campaign-objective strong {
    color: var(--campaign-gold);
}


/* Passos */

.campaign-content {
    display: grid;
    gap: 16px;
}

.campaign-step {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    overflow: hidden;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.campaign-step:hover {
    transform: translateY(-2px);
    border-color: var(--campaign-gold);
}

.campaign-step-image {
    min-height: 230px;
    overflow: hidden;

    background: #08101e;
}

.campaign-step-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;

    object-fit: cover;
    object-position: center;

    transition: transform .3s ease;
}

.campaign-step:hover .campaign-step-image img {
    transform: scale(1.025);
}

.campaign-step-content {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 17px;

    padding: 28px;
}

.campaign-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    background: rgba(242, 193, 78, .08);
    color: var(--campaign-gold);

    font-size: 13px;
    font-weight: 900;
}

.campaign-step-content h2 {
    margin: 0 0 7px;
    font-size: 21px;
}

.campaign-step-content p {
    margin: 0;
    color: var(--campaign-muted);
}


/* Dica */

.campaign-tip {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 18px 20px;

    border: 1px solid rgba(242, 193, 78, .42);
    border-radius: 13px;

    background: rgba(242, 193, 78, .07);
}

.campaign-tip-icon {
    font-size: 25px;
}

.campaign-tip strong {
    color: var(--campaign-gold);
}

.campaign-tip p {
    margin: 5px 0 0;
    color: var(--campaign-muted);
}


/* Próximo local */

.campaign-location-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 18px;

    border: 1px solid var(--campaign-border);
    border-radius: 13px;

    background: var(--campaign-panel);
}

.campaign-location-complete > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--campaign-gold);
    color: #111827;

    font-weight: 900;
}

.campaign-location-complete small,
.campaign-location-complete strong {
    display: block;
}

.campaign-location-complete small {
    color: var(--campaign-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.campaign-location-complete strong {
    color: var(--campaign-gold);
}


/* Tablet */

@media (max-width: 900px) {

    .campaign-hero {
        grid-template-columns: 1fr;
    }

    .campaign-hero-image,
    .campaign-hero-image img {
        min-height: 310px;
    }

    .campaign-hero-image::after {
        background:
            linear-gradient(
                0deg,
                rgba(16, 26, 46, .95),
                transparent 45%
            );
    }

    .campaign-step {
        grid-template-columns: 1fr;
    }

    .campaign-step-image,
    .campaign-step-image img {
        min-height: 280px;
    }
}


/* Celular */

@media (max-width: 640px) {

    .campaign-hero-image,
    .campaign-hero-image img {
        min-height: 220px;
    }

    .campaign-hero-content {
        padding: 24px 20px;
    }

    .campaign-step-image,
    .campaign-step-image img {
        min-height: 200px;
    }

    .campaign-step-content {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        padding: 19px;
    }

    .campaign-step-number {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }

    .campaign-step-content h2 {
        font-size: 17px;
    }

    .campaign-step-content p {
        font-size: 13px;
    }

    .campaign-tip {
        padding: 15px;
    }
}

/* =========================================================
   DUEL GROUND
========================================================= */

.campaign-duelists-section,
.campaign-progress-card {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.campaign-section-heading,
.campaign-progress-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 18px;
}

.campaign-section-heading > span,
.campaign-progress-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    background: rgba(242, 193, 78, .08);
    color: var(--campaign-gold);

    font-size: 19px;
    font-weight: 900;
}

.campaign-section-heading small,
.campaign-progress-heading small {
    display: block;

    color: var(--campaign-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.campaign-section-heading h2 {
    margin: 3px 0 0;
    font-size: 22px;
}

.campaign-progress-heading strong {
    display: block;
    margin-top: 3px;
}


/* Cards dos duelistas */

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

.campaign-duelist-card {
    overflow: hidden;

    border: 1px solid var(--campaign-border);
    border-radius: 13px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.campaign-duelist-card:hover {
    transform: translateY(-4px);
    border-color: var(--campaign-gold);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .23);
}

.campaign-duelist-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;
    padding: 12px;

    background:
        radial-gradient(
            circle,
            rgba(75, 123, 236, .13),
            transparent 68%
        );
}

.campaign-duelist-image img {
    display: block;

    width: 105px;
    height: 105px;

    object-fit: cover;

    border: 2px solid #a87918;
    border-radius: 9px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.campaign-duelist-card:hover .campaign-duelist-image img {
    transform: scale(1.05);
    border-color: var(--campaign-gold);
}

.campaign-duelist-info {
    padding: 13px;
    border-top: 1px solid var(--campaign-border);
}

.campaign-duelist-number {
    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.campaign-duelist-info h3 {
    min-height: 38px;
    margin: 5px 0 10px;

    font-size: 15px;
    line-height: 1.25;
}

.campaign-duelist-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.campaign-duelist-stats span {
    padding: 4px 6px;

    border: 1px solid var(--campaign-border);
    border-radius: 6px;

    color: var(--campaign-muted);
    font-size: 10px;
}

.campaign-duelist-stats strong {
    color: #fff;
}

.campaign-duelist-link {
    display: block;
    margin-top: 11px;

    color: var(--campaign-gold);
    font-size: 11px;
    font-weight: 800;
}


/* Checklist */

.campaign-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.campaign-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border: 1px solid var(--campaign-border);
    border-radius: 9px;

    background: #0b1425;
    color: var(--campaign-muted);

    cursor: pointer;
}

.campaign-check-grid input {
    width: 18px;
    height: 18px;

    accent-color: var(--campaign-gold);
}


/* Dica com botão */

.campaign-tip-farm {
    align-items: center;
}

.campaign-tip-farm > div {
    flex: 1;
}

.campaign-tip-farm a {
    flex-shrink: 0;

    padding: 9px 13px;

    border: 1px solid var(--campaign-gold);
    border-radius: 8px;

    color: var(--campaign-gold);
    font-size: 12px;
    font-weight: 800;
}

.campaign-tip-farm a:hover {
    background: var(--campaign-gold);
    color: #111827;
}


/* Tablet */

@media (max-width: 900px) {

    .campaign-duelist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .campaign-duelists-section,
    .campaign-progress-card {
        padding: 16px;
    }

    .campaign-duelist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .campaign-duelist-image {
        min-height: 105px;
        padding: 8px;
    }

    .campaign-duelist-image img {
        width: 78px;
        height: 78px;
    }

    .campaign-duelist-info {
        padding: 10px;
    }

    .campaign-duelist-info h3 {
        min-height: 34px;
        font-size: 13px;
    }

    .campaign-duelist-stats {
        flex-direction: column;
    }

    .campaign-check-grid {
        grid-template-columns: 1fr;
    }

    .campaign-tip-farm {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .campaign-tip-farm a {
        margin-left: 38px;
    }
}
/* =========================================================
   DUELISTAS DO GUIA
========================================================= */

.campaign-duelists-section {
    padding: 22px;
    border: 1px solid #293852;
    border-radius: 16px;
    background: #101a2e;
}

.campaign-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.campaign-section-heading > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid #f2c14e;
    border-radius: 50%;

    background: rgba(242, 193, 78, .08);
    color: #f2c14e;
    font-size: 19px;
}

.campaign-section-heading small {
    display: block;
    color: #9ba7bd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.campaign-section-heading h2 {
    margin: 4px 0 0;
    font-size: 22px;
}


/* Grade */

.campaign-duelist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}


/* Card */

.campaign-duelist-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 1px solid #293852;
    border-radius: 14px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.campaign-duelist-card:hover {
    transform: translateY(-4px);
    border-color: #f2c14e;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}


/* Imagem */

.campaign-duelist-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 135px;
    padding: 12px;

    background:
        radial-gradient(
            circle,
            rgba(76, 122, 220, .16),
            transparent 65%
        );
}

.campaign-duelist-image img {
    display: block;

    width: 92px;
    height: 92px;

    object-fit: cover;

    border: 2px solid #a87918;
    border-radius: 10px;
}


/* Informações */

.campaign-duelist-info {
    flex: 1;
    padding: 13px;

    border-top: 1px solid #293852;
}

.campaign-duelist-number {
    display: block;

    color: #f2c14e;
    font-size: 10px;
    font-weight: 900;
}

.campaign-duelist-info h3 {
    margin: 6px 0 12px;

    color: #fff;
    font-size: 16px;
}

.campaign-duelist-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-duelist-stats span {
    padding: 5px 7px;

    border: 1px solid #293852;
    border-radius: 7px;

    background: #111c31;
    color: #9ba7bd;
    font-size: 10px;
}

.campaign-duelist-stats strong {
    color: #fff;
}

.campaign-duelist-link {
    display: block;
    margin-top: 12px;

    color: #f2c14e;
    font-size: 11px;
    font-weight: 800;
}


/* Tablet */

@media (max-width: 900px) {
    .campaign-duelist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 600px) {
    .campaign-duelists-section {
        padding: 14px;
    }

    .campaign-duelist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .campaign-duelist-image {
        height: 105px;
        padding: 8px;
    }

    .campaign-duelist-image img {
        width: 72px;
        height: 72px;
    }

    .campaign-duelist-info {
        padding: 10px;
        text-align: center;
    }

    .campaign-duelist-info h3 {
        margin: 5px 0 9px;
        font-size: 13px;
    }

    .campaign-duelist-stats {
        justify-content: center;
        flex-direction: column;
    }

    .campaign-duelist-link {
        font-size: 10px;
    }
}

/* =========================================================
   FESTIVAL / TOWN PLAZA
========================================================= */

.festival-duelist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    margin: 0 auto;
}

.festival-duelist-grid .campaign-duelist-image {
    min-height: 180px;
}

.festival-duelist-grid .campaign-duelist-image img {
    width: 120px;
    height: 120px;
}

.festival-duelist-grid .campaign-duelist-info {
    text-align: center;
}

.festival-duelist-grid .campaign-duelist-stats {
    justify-content: center;
}

@media (max-width: 600px) {

    .festival-duelist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .festival-duelist-grid .campaign-duelist-image {
        min-height: 115px;
    }

    .festival-duelist-grid .campaign-duelist-image img {
        width: 78px;
        height: 78px;
    }
}
/* =========================================================
   JONO E SETO
========================================================= */

.campaign-boss-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.campaign-boss-danger {
    border-color: rgba(242, 193, 78, .65);
}

.campaign-boss-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 215px;
    padding: 25px;

    border-right: 1px solid var(--campaign-border);

    background:
        radial-gradient(
            circle,
            rgba(242, 193, 78, .15),
            transparent 68%
        ),
        #0b1425;
}

.campaign-boss-image img {
    display: block;

    width: 135px;
    height: 135px;

    object-fit: cover;

    border: 3px solid #a87918;
    border-radius: 12px;
}

.campaign-boss-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 28px;
}

.campaign-boss-info h2 {
    margin: 7px 0 10px;
    font-size: 28px;
}

.campaign-boss-info p {
    max-width: 650px;
    margin: 0 0 16px;

    color: var(--campaign-muted);
}

.campaign-boss-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 18px;
}

.campaign-boss-stats span {
    padding: 7px 10px;

    border: 1px solid var(--campaign-border);
    border-radius: 8px;

    background: #0b1425;
    color: var(--campaign-muted);

    font-size: 12px;
}

.campaign-boss-stats strong {
    color: var(--campaign-gold);
}

.campaign-boss-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;

    border: 1px solid var(--campaign-gold);
    border-radius: 9px;

    color: var(--campaign-gold);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.campaign-boss-button:hover {
    background: var(--campaign-gold);
    color: #111827;
}


/* Estratégia */

.campaign-strategy {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.campaign-strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.campaign-strategy-grid article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 11px;

    padding: 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 10px;

    background: #0b1425;
}

.campaign-strategy-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.campaign-strategy-grid strong {
    color: #fff;
}

.campaign-strategy-grid p {
    margin: 4px 0 0;

    color: var(--campaign-muted);
    font-size: 12px;
}

.campaign-check-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Celular */

@media (max-width: 640px) {

    .campaign-boss-card {
        grid-template-columns: 1fr;
    }

    .campaign-boss-image {
        min-height: 155px;
        padding: 18px;

        border-right: 0;
        border-bottom: 1px solid var(--campaign-border);
    }

    .campaign-boss-image img {
        width: 100px;
        height: 100px;
    }

    .campaign-boss-info {
        align-items: center;
        padding: 20px;
        text-align: center;
    }

    .campaign-boss-info h2 {
        font-size: 23px;
    }

    .campaign-boss-stats {
        justify-content: center;
    }

    .campaign-strategy {
        padding: 16px;
    }

    .campaign-strategy-grid {
        grid-template-columns: 1fr;
    }

    .campaign-check-grid-two {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   INVASÃO AO PALÁCIO
========================================================= */

.campaign-hero-danger {
    border-color: rgba(222, 74, 74, .58);
}

.campaign-hero-danger .campaign-chapter {
    border-color: rgba(255, 105, 105, .75);
    color: #ff9d9d;
}


/* Escolhas mostradas na tela */

.campaign-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 13px;
    padding: 9px 15px;

    border: 1px solid var(--campaign-gold);
    border-radius: 8px;

    background: rgba(242, 193, 78, .09);
    color: var(--campaign-gold);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}


/* Alertas */

.campaign-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 19px 21px;

    border: 1px solid var(--campaign-border);
    border-radius: 13px;

    background: var(--campaign-panel);
}

.campaign-alert-danger {
    border-color: rgba(226, 81, 81, .55);
    background: rgba(181, 46, 46, .1);
}

.campaign-alert-icon {
    font-size: 27px;
}

.campaign-alert strong {
    color: #ff9d9d;
}

.campaign-alert p {
    margin: 5px 0 0;
    color: var(--campaign-muted);
}


/* Boss impossível */

.campaign-boss-impossible {
    border-color: rgba(226, 81, 81, .65);
}

.campaign-boss-impossible .campaign-boss-image {
    background:
        radial-gradient(
            circle,
            rgba(190, 40, 55, .23),
            transparent 68%
        ),
        #0b1425;
}

.campaign-boss-impossible .campaign-boss-image img {
    border-color: #b93e4f;
}

.campaign-difficulty-impossible {
    display: inline-flex;

    margin-bottom: 13px;
    padding: 6px 9px;

    border: 1px solid rgba(255, 105, 105, .55);
    border-radius: 999px;

    background: rgba(190, 40, 55, .13);
    color: #ff9d9d;

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}


/* Resumo da história */

.campaign-story-summary {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.campaign-story-summary > p {
    margin: 0 0 20px;
    color: var(--campaign-muted);
}

.campaign-story-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.campaign-story-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    min-height: 105px;
    padding: 15px 10px;

    border: 1px solid var(--campaign-border);
    border-radius: 10px;

    background: #0b1425;
    text-align: center;
}

.campaign-story-flow > div span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.campaign-story-flow > div strong {
    font-size: 12px;
}

.campaign-story-flow > b {
    color: var(--campaign-gold);
    font-size: 20px;
}

.campaign-check-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Celular */

@media (max-width: 640px) {

    .campaign-alert {
        padding: 15px;
    }

    .campaign-story-summary {
        padding: 16px;
    }

    .campaign-story-flow {
        grid-template-columns: 1fr;
    }

    .campaign-story-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .campaign-story-flow > div {
        width: 100%;
        min-height: 88px;
    }

    .campaign-check-grid-three {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   INÍCIO DO TORNEIO
========================================================= */

.tournament-hero {
    border-color: rgba(242, 193, 78, .58);
}

.tournament-hero .campaign-hero-image {
    background:
        radial-gradient(
            circle at center,
            rgba(242, 193, 78, .13),
            transparent 68%
        ),
        #08101e;
}


/* Duelistas das preliminares */

.tournament-duelist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto;
}

.tournament-duelist-card {
    position: relative;
}

.tournament-match-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;

    padding: 5px 8px;

    border: 1px solid rgba(242, 193, 78, .55);
    border-radius: 999px;

    background: rgba(7, 11, 22, .86);
    color: var(--campaign-gold);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}

.tournament-duelist-grid .campaign-duelist-image {
    min-height: 175px;
}

.tournament-duelist-grid .campaign-duelist-image img {
    width: 115px;
    height: 115px;
}

.tournament-duelist-grid .campaign-duelist-info {
    text-align: center;
}

.tournament-duelist-grid .campaign-duelist-stats {
    justify-content: center;
}


/* Links das ferramentas */

.tournament-tool-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* Resumo dos adversários */

.tournament-opponent-summary {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.tournament-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.tournament-summary-grid article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 11px;

    padding: 15px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
}

.tournament-summary-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.tournament-summary-grid strong {
    color: #fff;
}

.tournament-summary-grid p {
    margin: 5px 0 0;

    color: var(--campaign-muted);
    font-size: 12px;
    line-height: 1.45;
}


/* Tablet */

@media (max-width: 900px) {

    .tournament-duelist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tournament-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* Celular */

@media (max-width: 640px) {

    .tournament-duelist-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .tournament-duelist-grid .campaign-duelist-image {
        min-height: 130px;
    }

    .tournament-duelist-grid .campaign-duelist-image img {
        width: 88px;
        height: 88px;
    }

    .tournament-tool-links {
        flex-direction: column;
        align-items: stretch;
    }

    .tournament-tool-links .guide-inline-link {
        justify-content: space-between;
        margin-top: 0;
    }

    .tournament-opponent-summary {
        padding: 16px;
    }
}
/* =========================================================
   FINAIS DO TORNEIO
========================================================= */

.tournament-finals-hero {
    border-color: rgba(242, 193, 78, .72);
}


/* Caminho das finais */

.finals-route {
    display: grid;
    gap: 9px;
}

.finals-route-card {
    display: grid;
    grid-template-columns:
        42px
        70px
        minmax(0, 1fr)
        30px;
    align-items: center;
    gap: 13px;

    padding: 10px 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.finals-route-card:hover {
    transform: translateX(4px);
    border-color: var(--campaign-gold);
    background: #111e34;
}

.finals-route-champion {
    border-color: rgba(242, 193, 78, .68);
    background:
        linear-gradient(
            90deg,
            rgba(242, 193, 78, .1),
            #0b1425
        );
}

.finals-route-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.finals-route-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.finals-route-image img {
    width: 58px;
    height: 58px;

    object-fit: cover;

    border: 2px solid #a87918;
    border-radius: 8px;
}

.finals-route-info {
    min-width: 0;
}

.finals-route-info small {
    color: var(--campaign-muted);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.finals-route-info h3 {
    margin: 3px 0 5px;
    font-size: 16px;
}

.finals-route-info > span {
    display: inline-block;
    margin-right: 12px;

    color: var(--campaign-muted);
    font-size: 10px;
}

.finals-route-info strong {
    color: #fff;
}

.finals-route-arrow {
    color: var(--campaign-gold);
    font-size: 20px;
}


/* Isis e Kaiba */

.tournament-final-bosses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tournament-final-boss-card {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 18px;

    padding: 18px;

    border: 1px solid var(--campaign-border);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );

    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.tournament-final-boss-card:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
}

.tournament-final-boss-card img {
    width: 110px;
    height: 110px;

    object-fit: cover;

    border: 3px solid #a87918;
    border-radius: 11px;
}

.kaiba-final-card {
    border-color: rgba(242, 193, 78, .7);
}

.kaiba-final-card img {
    border-color: var(--campaign-gold);
}

.tournament-final-boss-card small {
    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
}

.tournament-final-boss-card h3 {
    margin: 5px 0 7px;
    font-size: 22px;
}

.tournament-final-boss-card p {
    margin: 0 0 10px;

    color: var(--campaign-muted);
    font-size: 12px;
}

.tournament-final-boss-card div > span {
    color: var(--campaign-gold);
    font-size: 11px;
    font-weight: 800;
}


/* Checklist */

.finals-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.finals-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border: 1px solid var(--campaign-border);
    border-radius: 9px;

    background: #0b1425;
    color: var(--campaign-muted);

    cursor: pointer;
}

.finals-check-grid input {
    width: 18px;
    height: 18px;

    accent-color: var(--campaign-gold);
}


/* Campeão */

.tournament-champion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 28px;

    border: 1px solid var(--campaign-gold);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at left,
            rgba(242, 193, 78, .18),
            transparent 45%
        ),
        var(--campaign-panel);
}

.tournament-champion-icon {
    font-size: 56px;
}

.tournament-champion small {
    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.tournament-champion h2 {
    margin: 5px 0 7px;
}

.tournament-champion p {
    margin: 0;
    color: var(--campaign-muted);
}


/* Tablet */

@media (max-width: 900px) {

    .tournament-final-bosses {
        grid-template-columns: 1fr;
    }

    .finals-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .finals-route-card {
        grid-template-columns: 34px 52px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
    }

    .finals-route-position {
        width: 30px;
        height: 30px;
    }

    .finals-route-image img {
        width: 46px;
        height: 46px;
    }

    .finals-route-info h3 {
        font-size: 13px;
    }

    .finals-route-info > span {
        display: block;
        margin: 2px 0;
        font-size: 9px;
    }

    .finals-route-arrow {
        display: none;
    }

    .tournament-final-boss-card {
        grid-template-columns: 85px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
    }

    .tournament-final-boss-card img {
        width: 78px;
        height: 78px;
    }

    .tournament-final-boss-card h3 {
        font-size: 17px;
    }

    .finals-check-grid {
        grid-template-columns: 1fr;
    }

    .tournament-champion {
        flex-direction: column;
        padding: 22px 17px;
        text-align: center;
    }

    .tournament-champion-icon {
        font-size: 46px;
    }
}
/* =========================================================
   RETORNO AO ANTIGO EGITO
========================================================= */

.return-egypt-hero {
    border-color: rgba(123, 101, 177, .7);
}

.return-egypt-hero .campaign-hero-image {
    background:
        radial-gradient(
            circle,
            rgba(111, 79, 170, .2),
            transparent 68%
        ),
        #08101e;
}


/* Estado do mundo */

.return-world-status,
.return-choice-guide,
.return-route-card {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.return-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.return-status-grid article {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 16px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
}

.return-status-grid article > span {
    font-size: 26px;
}

.return-status-grid strong {
    color: #fff;
}

.return-status-grid p {
    margin: 5px 0 0;

    color: var(--campaign-muted);
    font-size: 12px;
}


/* Lista de escolhas */

.campaign-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 14px;
}

.campaign-choice-list span,
.campaign-choice-list strong {
    display: inline-flex;
    align-items: center;

    padding: 7px 10px;

    border: 1px solid var(--campaign-border);
    border-radius: 7px;

    background: #0b1425;
    color: var(--campaign-muted);

    font-size: 10px;
    font-weight: 800;
}

.campaign-choice-list strong {
    border-color: var(--campaign-gold);
    color: var(--campaign-gold);
}


/* Fluxo das escolhas */

.return-choice-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.return-choice-flow article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    padding: 15px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
}

.return-choice-flow article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.return-choice-flow p {
    margin: 4px 0 0;

    color: var(--campaign-muted);
    font-size: 12px;
}

.return-choice-flow > b {
    color: var(--campaign-gold);
    font-size: 22px;
}


/* Rota */

.return-route-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.return-route-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 100px;
    padding: 12px 8px;

    border: 1px solid var(--campaign-border);
    border-radius: 10px;

    background: #0b1425;
    text-align: center;
}

.return-route-flow > div span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
}

.return-route-flow > div strong {
    font-size: 11px;
}

.return-route-flow > b {
    color: var(--campaign-gold);
    font-size: 19px;
}


/* Recusar duelo */

.return-decline-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 24px;

    border: 1px solid rgba(222, 74, 74, .58);
    border-radius: 15px;

    background: rgba(181, 46, 46, .09);
}

.return-decline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    border: 2px solid #ff8f8f;
    border-radius: 50%;

    color: #ff8f8f;
    font-size: 25px;
    font-weight: 900;
}

.return-decline-card small {
    color: #ff9d9d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.return-decline-card h2 {
    margin: 4px 0 5px;
}

.return-decline-card p {
    margin: 0;
    color: var(--campaign-muted);
}


/* Salvar */

.return-save-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;

    border: 1px solid var(--campaign-gold);
    border-radius: 15px;

    background:
        radial-gradient(
            circle at left,
            rgba(242, 193, 78, .18),
            transparent 50%
        ),
        var(--campaign-panel);
}

.return-save-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 210px;

    border-right: 1px solid rgba(242, 193, 78, .35);

    font-size: 52px;
}

.return-save-content {
    padding: 25px;
}

.return-save-content h2 {
    margin: 7px 0 10px;
}

.return-save-content p {
    margin: 8px 0;
    color: var(--campaign-muted);
}


/* Checklist */

.return-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.return-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border: 1px solid var(--campaign-border);
    border-radius: 9px;

    background: #0b1425;
    color: var(--campaign-muted);

    cursor: pointer;
}

.return-check-grid input {
    width: 18px;
    height: 18px;

    accent-color: var(--campaign-gold);
}


/* Tablet */

@media (max-width: 900px) {

    .return-status-grid {
        grid-template-columns: 1fr;
    }

    .return-route-flow {
        grid-template-columns: 1fr;
    }

    .return-route-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .return-route-flow > div {
        min-height: 80px;
    }

    .return-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .return-world-status,
    .return-choice-guide,
    .return-route-card {
        padding: 16px;
    }

    .return-choice-flow {
        grid-template-columns: 1fr;
    }

    .return-choice-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .return-decline-card {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .return-save-card {
        grid-template-columns: 1fr;
    }

    .return-save-icon {
        min-height: 105px;

        border-right: 0;
        border-bottom: 1px solid rgba(242, 193, 78, .35);

        font-size: 42px;
    }

    .return-save-content {
        padding: 20px;
        text-align: center;
    }

    .return-check-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   HIGH MAGES
========================================================= */

.high-mages-hero {
    border-color: rgba(155, 104, 208, .68);
}


/* Regras */

.high-mages-rules,
.high-mages-order {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.high-mages-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.high-mages-rule-grid article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px;

    padding: 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 10px;

    background: #0b1425;
}

.high-mages-rule-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.high-mages-rule-grid strong {
    color: #fff;
}

.high-mages-rule-grid p {
    margin: 4px 0 0;

    color: var(--campaign-muted);
    font-size: 11px;
}


/* Ordem */

.high-mages-order-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.high-mages-order-flow a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 95px;
    padding: 10px;

    border: 1px solid var(--campaign-border);
    border-radius: 10px;

    background: #0b1425;
    color: #fff;
    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.high-mages-order-flow a:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
}

.high-mages-order-flow a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
}

.high-mages-order-flow a strong {
    font-size: 11px;
}

.high-mages-order-flow > b {
    color: var(--campaign-gold);
    font-size: 18px;
}


/* Templos */

.high-mages-shrines {
    display: grid;
    gap: 16px;
}

.high-mages-shrine-card {
    scroll-margin-top: 100px;

    padding: 22px;

    border: 1px solid var(--campaign-border);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.high-mages-shrine-header {
    display: flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 16px;
    margin-bottom: 16px;

    border-bottom: 1px solid var(--campaign-border);
}

.high-mages-shrine-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    flex: 0 0 58px;

    border: 1px solid var(--campaign-gold);
    border-radius: 14px;

    background: rgba(242, 193, 78, .08);
    font-size: 28px;
}

.high-mages-shrine-header small {
    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.high-mages-shrine-header h2 {
    margin: 4px 0;
}

.high-mages-shrine-header p {
    margin: 0;

    color: var(--campaign-muted);
    font-size: 12px;
}

.high-mages-shrine-header p strong {
    color: #fff;
}

.high-mages-shrine-description {
    margin-bottom: 16px;
}

.high-mages-shrine-description p {
    margin: 0 0 7px;
    color: var(--campaign-muted);
}

.high-mages-shrine-description span {
    color: var(--campaign-gold);
    font-size: 12px;
}


/* Fluxo dos duelos */

.high-mages-duel-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}

.high-mages-duelist-card,
.high-mages-duelist-missing {
    position: relative;

    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;

    min-height: 132px;
    padding: 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 12px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.high-mages-duelist-card:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
}

.high-mages-boss-card {
    border-color: rgba(242, 193, 78, .55);

    background:
        radial-gradient(
            circle at left,
            rgba(242, 193, 78, .11),
            transparent 48%
        ),
        #0b1425;
}

.high-mages-duelist-label {
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 4px 7px;

    border: 1px solid var(--campaign-border);
    border-radius: 999px;

    background: rgba(5, 10, 20, .83);
    color: var(--campaign-gold);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.high-mages-duelist-card img {
    width: 82px;
    height: 82px;

    object-fit: cover;

    border: 2px solid #a87918;
    border-radius: 9px;
}

.high-mages-boss-card img {
    border-color: var(--campaign-gold);
}

.high-mages-duelist-card h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.high-mages-duelist-card div > span {
    display: inline-block;
    margin-right: 9px;

    color: var(--campaign-muted);
    font-size: 10px;
}

.high-mages-duelist-card strong {
    color: #fff;
}

.high-mages-duel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--campaign-gold);
    font-size: 27px;
    font-weight: 900;
}

.high-mages-duelist-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--campaign-muted);
    text-align: center;
}

.high-mages-duelist-missing strong {
    color: #ff9d9d;
}

.high-mages-duelist-missing span {
    font-size: 11px;
}


/* Concluído */

.high-mages-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 14px;
    padding: 11px;

    border: 1px solid var(--campaign-border);
    border-radius: 9px;

    background: #0b1425;
    color: var(--campaign-muted);

    cursor: pointer;
}

.high-mages-complete input {
    width: 18px;
    height: 18px;

    accent-color: var(--campaign-gold);
}


/* Alerta Seto */

.high-mages-seto-alert {
    border-color: rgba(242, 193, 78, .6);
    background: rgba(242, 193, 78, .07);
}

.high-mages-seto-alert strong {
    color: var(--campaign-gold);
}


/* Checklist */

.high-mages-check-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.high-mages-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px;

    border: 1px solid var(--campaign-border);
    border-radius: 9px;

    background: #0b1425;
    color: var(--campaign-muted);

    cursor: pointer;
}

.high-mages-check-grid input {
    width: 18px;
    height: 18px;

    accent-color: var(--campaign-gold);
}


/* Tablet */

@media (max-width: 900px) {

    .high-mages-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .high-mages-order-flow {
        grid-template-columns: 1fr;
    }

    .high-mages-order-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .high-mages-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .high-mages-rules,
    .high-mages-order,
    .high-mages-shrine-card {
        padding: 16px;
    }

    .high-mages-rule-grid {
        grid-template-columns: 1fr;
    }

    .high-mages-duel-flow {
        grid-template-columns: 1fr;
    }

    .high-mages-duel-arrow {
        transform: rotate(90deg);
    }

    .high-mages-duelist-card,
    .high-mages-duelist-missing {
        grid-template-columns: 75px minmax(0, 1fr);
        min-height: 110px;
        padding: 11px;
    }

    .high-mages-duelist-card img {
        width: 66px;
        height: 66px;
    }

    .high-mages-duelist-card h3 {
        padding-top: 12px;
        font-size: 13px;
    }

    .high-mages-duelist-label {
        font-size: 7px;
    }

    .high-mages-check-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   ESCONDERIJO
========================================================= */

.hideout-hero {
    border-color: rgba(78, 145, 190, .62);
}

.hideout-duel-order {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.hideout-order-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.hideout-order-flow a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 100px;
    padding: 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.hideout-order-flow a:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
}

.hideout-order-flow a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.hideout-order-flow a strong {
    font-size: 13px;
}

.hideout-order-flow > b {
    color: var(--campaign-gold);
    font-size: 21px;
}


/* Três duelistas */

.hideout-duelist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto;
}

.hideout-duelist-card {
    position: relative;
    scroll-margin-top: 100px;
}

.hideout-duel-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;

    padding: 5px 8px;

    border: 1px solid rgba(242, 193, 78, .55);
    border-radius: 999px;

    background: rgba(7, 11, 22, .86);
    color: var(--campaign-gold);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.hideout-duelist-grid .campaign-duelist-image {
    min-height: 170px;
}

.hideout-duelist-grid .campaign-duelist-image img {
    width: 112px;
    height: 112px;
}

.hideout-duelist-grid .campaign-duelist-info {
    text-align: center;
}

.hideout-duelist-grid .campaign-duelist-stats {
    justify-content: center;
}


/* Tablet */

@media (max-width: 900px) {

    .hideout-duelist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .hideout-duel-order {
        padding: 16px;
    }

    .hideout-order-flow {
        grid-template-columns: 1fr;
    }

    .hideout-order-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .hideout-duelist-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .hideout-duelist-grid .campaign-duelist-image {
        min-height: 130px;
    }

    .hideout-duelist-grid .campaign-duelist-image img {
        width: 88px;
        height: 88px;
    }
}

/* =========================================================
   VAST SHRINE
========================================================= */

.vast-shrine-hero {
    border-color: rgba(157, 74, 74, .72);
}

.vast-shrine-warning {
    border-color: rgba(242, 193, 78, .6);
    background: rgba(242, 193, 78, .07);
}

.vast-shrine-warning strong {
    color: var(--campaign-gold);
}


/* Rota */

.vast-shrine-route {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.vast-shrine-route-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.vast-shrine-route-flow a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 100px;
    padding: 14px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.vast-shrine-route-flow a:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
}

.vast-shrine-route-flow a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.vast-shrine-route-flow a strong {
    font-size: 13px;
}

.vast-shrine-route-flow > b {
    color: var(--campaign-gold);
    font-size: 22px;
}


/* Duelistas */

.vast-shrine-duelist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto;
}

.vast-shrine-duelist-card {
    position: relative;
    scroll-margin-top: 100px;
}

.vast-shrine-duel-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;

    padding: 5px 8px;

    border: 1px solid rgba(242, 193, 78, .55);
    border-radius: 999px;

    background: rgba(7, 11, 22, .86);
    color: var(--campaign-gold);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.vast-shrine-duelist-grid .campaign-duelist-image {
    min-height: 175px;
}

.vast-shrine-duelist-grid .campaign-duelist-image img {
    width: 115px;
    height: 115px;
}

.vast-shrine-duelist-grid .campaign-duelist-info {
    text-align: center;
}

.vast-shrine-duelist-grid .campaign-duelist-stats {
    justify-content: center;
}


/* Celular */

@media (max-width: 640px) {

    .vast-shrine-route {
        padding: 16px;
    }

    .vast-shrine-route-flow {
        grid-template-columns: 1fr;
    }

    .vast-shrine-route-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .vast-shrine-duelist-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .vast-shrine-duelist-grid .campaign-duelist-image {
        min-height: 130px;
    }

    .vast-shrine-duelist-grid .campaign-duelist-image img {
        width: 88px;
        height: 88px;
    }
}

/* =========================================================
   BATALHA FINAL
========================================================= */

.final-battle-hero {
    border-color: rgba(197, 55, 73, .75);
}

.final-battle-hero .campaign-hero-image {
    background:
        radial-gradient(
            circle,
            rgba(187, 35, 61, .22),
            transparent 68%
        ),
        #080d19;
}


/* Aviso */

.final-battle-warning {
    border-color: rgba(242, 193, 78, .65);
    background: rgba(242, 193, 78, .07);
}

.final-battle-warning strong {
    color: var(--campaign-gold);
}


/* Rota final */

.final-battle-route {
    padding: 24px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}

.final-battle-route-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.final-battle-route-flow a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 115px;
    padding: 15px;

    border: 1px solid var(--campaign-border);
    border-radius: 12px;

    background: #0b1425;
    color: #fff;
    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.final-battle-route-flow a:hover {
    transform: translateY(-3px);
    border-color: var(--campaign-gold);
    background: #111d32;
}

.final-battle-route-flow a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);
    font-size: 10px;
    font-weight: 900;
}

.final-battle-route-flow a strong {
    font-size: 15px;
}

.final-battle-route-flow a small {
    color: var(--campaign-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.final-battle-route-flow > b {
    color: var(--campaign-gold);
    font-size: 23px;
}


/* Cards dos adversários */

.final-battle-duelist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto;
}

.final-battle-duelist-card {
    position: relative;
    scroll-margin-top: 100px;
}

.final-battle-duel-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;

    padding: 5px 8px;

    border: 1px solid rgba(242, 193, 78, .55);
    border-radius: 999px;

    background: rgba(7, 11, 22, .88);
    color: var(--campaign-gold);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.final-battle-duelist-grid .campaign-duelist-image {
    min-height: 180px;
}

.final-battle-duelist-grid .campaign-duelist-image img {
    width: 118px;
    height: 118px;
}

.final-battle-duelist-grid .campaign-duelist-info {
    text-align: center;
}

.final-battle-duelist-grid .campaign-duelist-stats {
    justify-content: center;
}


/* Bosses */

.final-battle-seto {
    border-color: rgba(83, 142, 213, .68);
}

.final-battle-seto .campaign-boss-image {
    background:
        radial-gradient(
            circle,
            rgba(71, 137, 221, .22),
            transparent 68%
        ),
        #0b1425;
}

.final-battle-darknite {
    border-color: rgba(157, 77, 184, .7);
}

.final-battle-darknite .campaign-boss-image {
    background:
        radial-gradient(
            circle,
            rgba(137, 55, 165, .25),
            transparent 68%
        ),
        #0b1425;
}

.final-battle-nitemare {
    border-color: rgba(215, 53, 70, .82);
}

.final-battle-nitemare .campaign-boss-image {
    background:
        radial-gradient(
            circle,
            rgba(209, 40, 61, .3),
            transparent 68%
        ),
        #0b1425;
}

.final-battle-nitemare .campaign-boss-image img {
    border-color: #d6374d;
}


/* Transformação */

.final-battle-transformation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 26px;

    border: 1px solid rgba(215, 53, 70, .72);
    border-radius: 15px;

    background:
        radial-gradient(
            circle at left,
            rgba(209, 40, 61, .18),
            transparent 48%
        ),
        #101321;
}

.final-battle-transformation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;
    flex: 0 0 65px;

    border: 2px solid #e34d61;
    border-radius: 50%;

    color: #ff8292;
    font-size: 32px;
}

.final-battle-transformation small {
    color: #ff8292;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.final-battle-transformation h2 {
    margin: 5px 0 7px;
}

.final-battle-transformation p {
    margin: 0;
    color: var(--campaign-muted);
}


/* Estratégia final */

.final-battle-strategy {
    border-color: rgba(242, 193, 78, .6);
}


/* Conclusão */

.final-battle-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;

    padding: 34px;

    border: 1px solid var(--campaign-gold);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at left,
            rgba(242, 193, 78, .2),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #18233a,
            #0e1729
        );
}

.final-battle-complete-icon {
    font-size: 65px;
}

.final-battle-complete small {
    color: var(--campaign-gold);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.final-battle-complete h2 {
    margin: 5px 0 7px;
    font-size: 32px;
}

.final-battle-complete p {
    margin: 0;
    color: var(--campaign-muted);
}


/* Tablet */

@media (max-width: 900px) {

    .final-battle-duelist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Celular */

@media (max-width: 640px) {

    .final-battle-route {
        padding: 16px;
    }

    .final-battle-route-flow {
        grid-template-columns: 1fr;
    }

    .final-battle-route-flow > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .final-battle-duelist-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .final-battle-duelist-grid .campaign-duelist-image {
        min-height: 135px;
    }

    .final-battle-duelist-grid .campaign-duelist-image img {
        width: 90px;
        height: 90px;
    }

    .final-battle-transformation {
        flex-direction: column;
        padding: 21px 17px;
        text-align: center;
    }

    .final-battle-complete {
        flex-direction: column;
        gap: 12px;
        padding: 25px 18px;
        text-align: center;
    }

    .final-battle-complete-icon {
        font-size: 51px;
    }

    .final-battle-complete h2 {
        font-size: 26px;
    }
}

/* =========================================================
   FUSÕES INICIAIS
========================================================= */

.starter-fusion-list {
    display: grid;
    gap: 11px;

    margin: 20px 0;
}

.starter-fusion-item {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1.2fr);
    align-items: center;
    gap: 10px;

    padding: 14px;

    border: 1px solid var(--guide-border);
    border-radius: 11px;

    background: #0d1628;
}

.starter-fusion-item > b {
    color: var(--guide-gold);
    font-size: 21px;
}

.starter-fusion-material,
.starter-fusion-result {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
    padding: 12px;

    border: 1px solid var(--guide-border);
    border-radius: 9px;

    background: #101a2e;
    text-align: center;
}

.starter-fusion-material span,
.starter-fusion-result span {
    color: var(--guide-muted);
    font-size: 10px;
}

.starter-fusion-result {
    border-color: rgba(242, 193, 78, .55);
}

.starter-fusion-result strong {
    color: var(--guide-gold);
}


/* Fusão destacada */

.starter-featured-fusion {
    padding: 22px;
    margin: 19px 0;

    border: 1px solid rgba(242, 193, 78, .55);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at top,
            rgba(242, 193, 78, .11),
            transparent 58%
        ),
        #0d1628;
}

.starter-featured-materials {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.starter-featured-materials > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    padding: 17px;

    border: 1px solid var(--guide-border);
    border-radius: 11px;

    background: #101a2e;
}

.starter-featured-materials > div span {
    font-size: 31px;
}

.starter-featured-materials > b {
    color: var(--guide-gold);
    font-size: 25px;
}

.starter-featured-arrow {
    margin: 13px 0;

    color: var(--guide-gold);
    font-size: 31px;
    font-weight: 900;
    text-align: center;
}

.starter-featured-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    padding: 19px;

    border: 1px solid var(--guide-gold);
    border-radius: 11px;

    background: rgba(242, 193, 78, .07);
    text-align: center;
    text-decoration: none;
}

.starter-featured-result strong {
    color: var(--guide-gold);
    font-size: 19px;
}

.starter-featured-result span {
    color: #fff;
    font-weight: 800;
}

.starter-featured-result small {
    color: var(--guide-muted);
}


/* Ferramentas */

.starter-fusion-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-top: 18px;
}

.starter-fusion-tools a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;

    padding: 14px;

    border: 1px solid var(--guide-border);
    border-radius: 10px;

    background: #0d1628;
    color: #fff;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.starter-fusion-tools a:hover {
    transform: translateY(-3px);
    border-color: var(--guide-gold);
}

.starter-fusion-tools a > span {
    font-size: 25px;
}

.starter-fusion-tools a div {
    min-width: 0;
}

.starter-fusion-tools strong,
.starter-fusion-tools small {
    display: block;
}

.starter-fusion-tools strong {
    color: var(--guide-gold);
}

.starter-fusion-tools small {
    margin-top: 3px;
    color: var(--guide-muted);
    font-size: 10px;
}

.starter-fusion-tools a > b {
    color: var(--guide-gold);
    font-size: 20px;
}


/* Tablet */

@media (max-width: 900px) {

    .starter-fusion-tools {
        grid-template-columns: 1fr;
    }
}


/* Celular */

@media (max-width: 640px) {

    .starter-fusion-item {
        grid-template-columns: 1fr;
    }

    .starter-fusion-item > b {
        text-align: center;
    }

    .starter-fusion-item > b:last-of-type {
        transform: rotate(90deg);
    }

    .starter-featured-materials {
        grid-template-columns: 1fr;
    }

    .starter-featured-materials > b {
        text-align: center;
    }

    .starter-featured-fusion {
        padding: 15px;
    }

    .starter-featured-result strong {
        font-size: 16px;
    }
}
/* =========================================================
   INDEX DO GUIA — PROGRESSO DA CAMPANHA
========================================================= */

.guide-campaign-progress {
    display: flex;
    align-items: center;
    gap: 8px;

    overflow-x: auto;

    padding: 8px 2px 14px;

    scrollbar-width: thin;
}

.guide-campaign-progress a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 115px;
    min-height: 92px;
    padding: 12px;

    border: 1px solid var(--guide-border);
    border-radius: 11px;

    background: #0d1628;
    color: #fff;
    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.guide-campaign-progress a:hover {
    transform: translateY(-3px);
    border-color: var(--guide-gold);
    background: #14213a;
}

.guide-campaign-progress a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 1px solid var(--guide-gold);
    border-radius: 50%;

    color: var(--guide-gold);
    font-size: 10px;
    font-weight: 900;
}

.guide-campaign-progress a strong {
    font-size: 11px;
}

.guide-campaign-progress > b {
    flex: 0 0 auto;

    color: var(--guide-gold);
    font-size: 20px;
}


/* Celular */

@media (max-width: 640px) {

    .guide-campaign-progress {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .guide-campaign-progress a {
        width: 100%;
        min-height: 70px;
    }

    .guide-campaign-progress > b {
        text-align: center;
        transform: rotate(90deg);
    }
}
/* =========================================================
   COMO LIBERAR SETO 2ND
========================================================= */

.seto2-hero {
    border-color: rgba(70, 128, 210, .7);
}


/* ALERTA */

.seto2-critical-alert {
    border-color: rgba(230, 71, 71, .75);
    background:
        linear-gradient(
            135deg,
            rgba(194, 42, 58, .13),
            rgba(12, 20, 37, .96)
        );
}

.seto2-critical-alert strong {
    color: #ff7785;
}


/* LABIRINTO */

.seto2-labyrinth {
    padding: 25px;

    border: 1px solid var(--campaign-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--campaign-panel-light),
            var(--campaign-panel)
        );
}


.seto2-labyrinth-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    margin-top: 18px;
}


.seto2-labyrinth-flow > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 115px;
    padding: 15px;

    border: 1px solid var(--campaign-border);
    border-radius: 11px;

    background: #0b1425;

    text-align: center;
}


.seto2-labyrinth-flow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--campaign-gold);
    border-radius: 50%;

    color: var(--campaign-gold);

    font-size: 10px;
    font-weight: 900;
}


.seto2-labyrinth-flow strong {
    color: #fff;
    font-size: 14px;
}


.seto2-labyrinth-flow b {
    color: var(--campaign-gold);
    font-size: 24px;
}


/* R R L R */

.seto2-labyrinth-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-top: 20px;
    padding: 17px;

    border: 1px solid rgba(242, 193, 78, .45);
    border-radius: 11px;

    background: rgba(242, 193, 78, .05);
}


.seto2-labyrinth-code span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 2px solid var(--campaign-gold);
    border-radius: 9px;

    background: #0b1425;

    color: var(--campaign-gold);

    font-size: 21px;
    font-weight: 900;
}


.seto2-labyrinth-code b {
    color: var(--campaign-muted);
}


/* LABYRINTH MAGE */

.seto2-labyrinth-boss {
    border-color: rgba(137, 99, 183, .6);
}


/* SETO */

.seto2-boss-card {
    border-color: rgba(74, 140, 221, .8);
}

.seto2-boss-card .campaign-boss-image {
    background:
        radial-gradient(
            circle,
            rgba(64, 128, 215, .22),
            transparent 68%
        ),
        #0b1425;
}


/* CELULAR */

@media (max-width: 640px) {

    .seto2-labyrinth {
        padding: 17px;
    }

    .seto2-labyrinth-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seto2-labyrinth-flow > div {
        min-height: 95px;
    }

    .seto2-labyrinth-code {
        gap: 7px;
        padding: 12px 8px;
    }

    .seto2-labyrinth-code span {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
}