/* ==========================================================
   ARCANA76 - RELEASE-01 additions
   Loaded after style.css (the original theme, kept as it was). This file adds the shared components of the
   complete site and overrides the few original rules that hurt readability, mobile use or keyboard use.
   ========================================================== */

:root {
    --bg: #07070c;
    --panel: #12111a;
    --panel-2: #0d0d14;
    --line: #2d2838;
    --line-soft: #24212c;
    --text: #e4e1ec;
    --text-2: #b4afc4;
    --text-3: #9690a8;
    --violet: #a77cff;
    --violet-strong: #8b55e9;
    --ok: #76e89b;
    --bad: #ff9a9a;
    --ryven: #6fb4ff;
    --brannor: #ff9a52;
    --zelior: #e6c877;
    --belvar: #5fd899;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--text);
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

.pixel {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

a {
    color: var(--violet);
}

a:hover {
    color: #c9adff;
}

:focus-visible {
    outline: 2px solid #c9adff;
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 30;
    padding: 10px 16px;
    background: var(--violet-strong);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 12px;
}

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

/* ---------- readability of the original theme (contrast) ---------- */

.hero p,
.section-heading p,
.champion p,
.news-section p,
.account-intro > p {
    color: var(--text-2);
}

.label,
.account-feature p,
.account-card-heading p,
.form-group small,
.terms-row,
footer p,
.development-status span {
    color: var(--text-3);
}

.form-group label {
    color: var(--text-2);
    font-size: 11px;
}

.form-group small {
    font-size: 12px;
    line-height: 1.5;
}

.form-group input::placeholder {
    color: #6f6a80;
}

.hero {
    min-height: 0;
    padding: 72px max(30px, calc((100% - 1200px) / 2)) 80px;
}

.hero-content { max-width: 800px; }

.hero h1 {
    font-size: clamp(42px, 6.2vw, 88px);
    letter-spacing: -2px;
    line-height: 1.02;
}

.hero p { margin-top: 24px; }
.hero-buttons { margin-top: 28px; }
.hero-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.account-intro h1 {
    font-size: clamp(38px, 6vw, 82px);
    letter-spacing: -2px;
    line-height: .95;
}

/* ---------- header and navigation ---------- */

.topbar {
    height: auto;
    min-height: 82px;
    gap: 24px;
    padding: 12px 5%;
    flex-wrap: wrap;
}

nav#site-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 26px;
}

nav#site-nav a,
.nav-logout button {
    color: var(--text-2);
    padding: 8px 0;
}

nav#site-nav a:hover,
nav#site-nav a.active,
.nav-logout button:hover {
    color: #c9adff;
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 22px;
    border-left: 1px solid var(--line);
}

nav#site-nav a.nav-cta {
    padding: 9px 16px;
    background: var(--violet-strong);
    color: #fff;
}

.button.primary:hover,
nav#site-nav a.nav-cta:hover,
nav#site-nav a.nav-cta.active {
    background: #7742c8;
    color: #fff;
}

.nav-logout {
    margin: 0;
}

.nav-logout button {
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.nav-toggle {
    display: none;
    padding: 10px 16px;
    background: none;
    border: 1px solid #4a4160;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
}

@media (max-width: 980px) {

    /* the original theme hid the navigation on small screens; it is a menu instead */
    nav#site-nav {
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 8px;
    }

    nav#site-nav a,
    .nav-logout button {
        padding: 13px 4px;
        border-top: 1px solid var(--line-soft);
        text-align: left;
        width: 100%;
        font-size: 14px;
    }

    .nav-account {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-left: 0;
        border-left: 0;
    }

    nav#site-nav a.nav-cta {
        margin-top: 10px;
        padding: 13px 16px;
        text-align: center;
        border-top: 0;
    }

    .js .nav-toggle {
        display: inline-block;
    }

    .js nav#site-nav {
        display: none;
    }

    .js nav#site-nav.open {
        display: flex;
    }
}

/* ---------- alerts and form messages ---------- */

.flash-area {
    max-width: 1150px;
    margin: 0 auto;
    padding: 22px 30px 0;
}

.account-page .flash-area {
    padding: 0 0 28px;
}

.alert {
    margin: 0 0 18px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    color: var(--text);
}

.alert-error {
    color: var(--bad);
    border-color: rgba(255, 120, 120, .4);
    background: rgba(255, 60, 60, .08);
}

.alert-success {
    color: var(--ok);
    border-color: rgba(70, 220, 120, .4);
    background: rgba(40, 190, 90, .08);
}

.alert-info {
    color: #cdbcf5;
    border-color: rgba(167, 124, 255, .4);
    background: rgba(140, 90, 230, .08);
}

.field-error {
    margin: 8px 0 0;
    color: var(--bad);
    font-size: 13px;
    line-height: 1.45;
}

.form-group input[aria-invalid="true"] {
    border-color: rgba(255, 120, 120, .7);
}

.form-footnote {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

.account-page {
    padding: 70px 30px 90px;
}

.account-layout {
    gap: 70px;
}

/* ---------- buttons ---------- */

.button {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    line-height: 1.2;
}

.button.secondary {
    border: 1px solid #5a5070;
    color: var(--text);
    background: none;
}

.button.secondary:hover {
    border-color: #a77cff;
    color: #fff;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 26px;
}

.account-submit-inline {
    width: auto;
    padding: 0 28px;
}

.button[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- dashboard and generic panels ---------- */

.dashboard {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

.dashboard-narrow {
    max-width: 560px;
}

.account-card {
    padding: 38px;
}

.card-title {
    margin: 10px 0;
    color: #eee;
    font-family: Georgia, serif;
    font-size: 34px;
    line-height: 1.1;
}

.detail-list {
    margin: 0;
    display: grid;
    gap: 0;
}

.detail-list > div {
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--line-soft);
}

.detail-list dt {
    color: var(--text-3);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.detail-list dd {
    margin: 0;
    color: var(--text);
}

.empty-state {
    padding: 28px;
    border: 1px dashed #4a4160;
    text-align: center;
    color: var(--text-2);
    line-height: 1.6;
}

.empty-state .button {
    margin-top: 12px;
}

.simple-page {
    padding: 80px 30px;
}

.panel {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px;
    background: linear-gradient(145deg, rgba(19, 17, 28, .98), rgba(8, 8, 13, .98));
    border: 1px solid var(--line);
}

.panel h1 {
    font-family: Georgia, serif;
    font-size: clamp(30px, 5vw, 44px);
    margin: 14px 0;
    color: #eee;
}

.panel p {
    color: var(--text-2);
    line-height: 1.7;
}

/* ---------- tables ---------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line-soft);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.data-table th {
    color: var(--text-3);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .02);
    white-space: nowrap;
}

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

.data-table tbody tr:hover {
    background: rgba(167, 124, 255, .05);
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table td a {
    font-weight: bold;
    text-decoration: none;
}

.data-table td a:hover {
    text-decoration: underline;
}

.voc {
    font-weight: bold;
}

.voc-ryven, .accent-ryven .champion-role, .accent-ryven h3 { color: var(--ryven); }
.voc-brannor, .accent-brannor .champion-role, .accent-brannor h3 { color: var(--brannor); }
.voc-zelior, .accent-zelior .champion-role, .accent-zelior h3 { color: var(--zelior); }
.voc-belvar, .accent-belvar .champion-role, .accent-belvar h3 { color: var(--belvar); }

/* ---------- champion selection (character creation) ---------- */

.champion-select {
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.champion-select legend {
    padding: 0;
    margin-bottom: 12px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

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

.champion-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.champion-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.champion-option-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 22px 16px 18px;
    text-align: center;
    background: linear-gradient(145deg, #15131f, #0a0a10);
    border: 2px solid var(--line);
    transition: border-color .15s, background .15s;
}

.champion-option:hover .champion-option-body {
    border-color: #6b5a94;
}

.champion-option-body > img.pixel {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.champion-option-name {
    margin-top: 12px;
    color: #eee;
    font-family: Georgia, serif;
    font-size: 22px;
}

.champion-option .champion-role {
    margin-top: 4px;
    font-weight: bold;
}

.champion-option-text {
    margin-top: 12px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
    flex: 1;
}

.champion-option-abilities {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}

.champion-option-abilities img.pixel {
    width: 32px;
    height: 32px;
    background: #050508;
    border: 1px solid var(--line);
}

.champion-option-check {
    display: none;
    margin-top: 14px;
    padding: 5px 12px;
    background: var(--violet-strong);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
}

.champion-option input:checked + .champion-option-body {
    border-color: #c9adff;
    background: linear-gradient(145deg, #241c3a, #110f1c);
    box-shadow: 0 0 0 2px rgba(167, 124, 255, .25);
}

.champion-option input:checked + .champion-option-body .champion-option-check {
    display: inline-block;
}

.champion-option input:focus-visible + .champion-option-body {
    outline: 2px solid #c9adff;
    outline-offset: 3px;
}

.form-group-narrow {
    max-width: 460px;
}

/* ---------- content pages ---------- */

.page-hero {
    padding: 70px 30px 30px;
    background: radial-gradient(circle at 75% 0%, rgba(116, 63, 180, .22), transparent 45%);
}

.page-hero-inner,
.page-body {
    max-width: 1100px;
    margin: 0 auto;
}

.page-hero h1 {
    margin: 12px 0 14px;
    font-family: Georgia, serif;
    font-size: clamp(34px, 6vw, 60px);
    line-height: 1;
    color: #eee;
}

.page-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--text-2);
    line-height: 1.7;
}

.page-body {
    padding: 30px 30px 90px;
    display: grid;
    gap: 28px;
}

/* grid children may be narrower than their content: a wide table then scrolls inside its own wrapper instead of
   widening the whole page */
.page-body > *,
.dashboard > * {
    min-width: 0;
}

/* Align the introduction with the existing homepage status/content width. */
.page-body.home-introduction {
    width: calc(100% - 28px);
    max-width: 1200px;
    padding: 28px 0 0;
}

.block {
    padding: 34px;
    background: linear-gradient(145deg, rgba(19, 17, 28, .98), rgba(8, 8, 13, .98));
    border: 1px solid var(--line);
}

.block h2 {
    margin: 0 0 14px;
    font-family: Georgia, serif;
    font-size: 28px;
    color: #eee;
}

.block h3 {
    margin: 22px 0 8px;
    font-family: Georgia, serif;
    font-size: 20px;
    color: #eee;
}

.block p,
.block li {
    color: var(--text-2);
    line-height: 1.75;
}

.block p {
    margin: 0 0 14px;
    max-width: 78ch;
}

.block ul,
.block ol {
    margin: 0 0 14px;
    padding-left: 22px;
    max-width: 78ch;
}

.block > :last-child {
    margin-bottom: 0;
}

/* lists that are laid out as cards, not as bullet lists */
.block ul.ability-list,
.block ol.steps {
    padding-left: 0;
    max-width: none;
}

.block .champion-jump,
.block .pagination,
.block .fact-grid,
.block .table-wrap {
    margin-bottom: 18px;
}

.eyebrow {
    display: block;
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: step;
    max-width: none;
}

.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, .2);
}

.steps > li::before {
    content: counter(step, decimal-leading-zero);
    color: var(--violet);
    font-family: Georgia, serif;
    font-size: 26px;
}

.steps strong {
    color: #eee;
    font-family: Georgia, serif;
    font-size: 18px;
}

.steps p {
    margin: 6px 0 0;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.fact {
    padding: 18px;
    border: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, .2);
}

.fact span {
    display: block;
    color: var(--text-3);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fact strong {
    display: block;
    margin-top: 8px;
    color: #eee;
    font-family: Georgia, serif;
    font-size: 22px;
}

/* champion guide */

.champion-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.champion-jump a {
    padding: 10px 16px;
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

.champion-detail {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 34px;
    align-items: start;
}

.champion-portrait {
    text-align: center;
}

.champion-portrait img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.champion-detail h2 {
    font-size: 36px;
    margin-bottom: 4px;
}

.champion-detail .champion-role {
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 2px;
}

.ability-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: none;
}

.ability-list > li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, .22);
}

.ability-list img {
    width: 48px;
    height: 48px;
    background: #050508;
    border: 1px solid var(--line);
}

.ability-list h3,
.ability-list h4 {
    margin: 0;
    color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.ability-key {
    display: inline-block;
    min-width: 22px;
    margin-right: 8px;
    padding: 1px 6px;
    border: 1px solid #5a5070;
    color: var(--text-2);
    font-size: 12px;
    text-align: center;
}

.ability-meta {
    margin: 4px 0 6px;
    color: var(--text-3);
    font-size: 12px;
    letter-spacing: .5px;
}

.ability-list p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* home */

.champion-grid .champion {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.champion-grid .champion-role {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .6px;
}

.champion-grid .champion img.pixel {
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin-bottom: 18px;
}

.champion-grid .champion a.more {
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
}

.server-panel {
    position: relative;
    z-index: 2;
    gap: 0;
}

.status-online,
.fact strong.status-online { color: var(--ok); }
.fact strong.status-offline { color: var(--bad); }
.fact strong.status-unknown { color: var(--text-3); }
.status-offline { color: var(--bad); font-weight: bold; font-size: 14px; }
.status-unknown { color: var(--text-3); font-weight: bold; font-size: 14px; }

.news-list {
    display: grid;
    gap: 22px;
}

.news-item {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-soft);
}

.news-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.news-item h3 {
    margin: 6px 0 10px;
    font-family: Georgia, serif;
    font-size: 24px;
    color: #eee;
}

.news-item time {
    color: var(--text-3);
    font-size: 11px;
    letter-spacing: 2px;
}

.news-item p {
    margin: 0 0 10px;
}

.news-section {
    padding: 80px 30px;
}

.news-section .news-container {
    grid-template-columns: 1.4fr 1fr;
    gap: 70px;
}

/* highscores / search */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.filters a {
    padding: 9px 15px;
    border: 1px solid var(--line);
    color: var(--text-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

.filters a[aria-current="true"] {
    border-color: #a77cff;
    color: #fff;
    background: rgba(140, 90, 230, .18);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-3);
}

.pagination a,
.pagination span.current {
    padding: 8px 13px;
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: bold;
}

.pagination span.current {
    border-color: #a77cff;
    color: #fff;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.search-form .form-group {
    flex: 1 1 260px;
    margin-bottom: 0;
}

.search-form button {
    height: 50px;
    width: auto;
    padding: 0 26px;
}

.rank {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
}

.profile-head img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.profile-head h1 {
    margin: 0 0 6px;
    font-family: Georgia, serif;
    font-size: clamp(30px, 5vw, 46px);
    color: #eee;
}

.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--ok);
}

.download-box {
    display: grid;
    gap: 6px;
    padding: 22px;
    border: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, .22);
}

.download-box code,
.block code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #d8ccf5;
    word-break: break-all;
}

/* ---------- footer ---------- */

footer {
    padding: 44px 24px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin-top: 18px;
}

.footer-nav a {
    color: var(--text-2);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 0;
}

.footer-nav a:hover {
    color: #c9adff;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {

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

    .champion-detail {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .champion-portrait {
        text-align: left;
    }

    .champion-portrait img {
        width: 120px;
        height: 120px;
    }

    .news-section .news-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 520px) {

    .hero {
        min-height: 0;
        padding: 48px 22px 56px;
    }

    .server-panel {
        margin: -25px 14px 0;
        padding: 18px 10px;
    }

    .content-section {
        padding: 70px 20px;
    }

    .champion-options {
        grid-template-columns: 1fr;
    }

    .account-page,
    .simple-page {
        padding: 44px 16px 70px;
    }

    .account-card,
    .panel,
    .block {
        padding: 26px 20px;
    }

    .page-hero {
        padding: 44px 20px 20px;
    }

    .page-body {
        padding: 20px 14px 70px;
    }

    .detail-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .steps > li {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ability-list > li {
        grid-template-columns: 40px 1fr;
        gap: 12px;
        padding: 14px;
    }

    .ability-list img {
        width: 40px;
        height: 40px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 8px;
    }

    /* the experience column of the ranking is left out on a phone; the level stays, the profile has the rest */
    .data-table .opt {
        display: none;
    }

    .flash-area {
        padding: 16px 14px 0;
    }

    .button-row .button,
    .button-row .account-submit {
        flex: 1 1 100%;
    }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .champion:hover,
    .account-submit:hover {
        transform: none;
    }
}

/* Player information: shared Arcana palette, ordinary server-rendered content. */
.download-page { min-height: 55vh; display: grid; align-content: center; }
.download-minimal { max-width: 650px; width: 100%; margin: 0 auto; text-align: center; }
.download-minimal h1 { color: #e6ce8b; font-size: clamp(1.6rem,4vw,2.3rem); }
.download-version { color: #beb6ca; margin: 18px 0 26px; }
.information-section, .information-toc { scroll-margin-top: 100px; }
.information-toc { display: block; }
#monster-tasks .data-table th { white-space: normal; }
.information-toc ol { list-style: none; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 24px; }
.information-toc a { display: flex; align-items: center; min-height: 44px; height: 100%; font-size: 14px; line-height: 1.6; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.information-intro { font-size: 1.08rem; color: #d6cbdc; }
.information-list { padding-left: 22px; line-height: 1.8; }
.information-list li + li { margin-top: 8px; }
.information-detail { border-top: 1px solid #403548; margin-top: 14px; padding-top: 14px; }
.information-detail summary { cursor: pointer; color: #dbc38b; line-height: 1.5; font-weight: 600; padding-bottom: 5px; }
.information-detail summary:focus-visible { outline: 2px solid #d8bb76; outline-offset: 4px; }
.information-back { margin-top: 26px; font-size: .9rem; }
.information-vocations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.information-vocation { display: grid; justify-items: center; align-content: start; gap: 9px; text-align: center; padding: 18px 10px; background: #1d1725; border: 1px solid #3b3044; border-radius: 10px; text-decoration: none; }
.information-vocation span { color: #b9b0c4; font-size: .85rem; }
.rune-filters:not([hidden]) { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 28px; }
.rune-filters label { display: block; font-size: .9rem; margin-bottom: 8px; color: #d5c7de; }
.rune-filters input, .rune-filters select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #554361; background: #16121e; color: #f0eaf5; border-radius: 5px; padding: 10px; font: inherit; }
.rune-filters .button { min-height: 44px; white-space: nowrap; padding: 10px 14px; }
.rune-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.rune-card { min-width: 0; display: flex; flex-direction: column; background: #1b1522; border: 1px solid #403248; border-radius: 10px; padding: 24px; scroll-margin-top: 100px; }
.rune-card > .information-detail { margin-top: auto; }
.rune-card[hidden] { display: none; }
.rune-heading { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.rune-heading > div { min-width: 0; }
.rune-heading img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
.rune-heading h3 { font-size: 1.12rem; line-height: 1.35; margin: 0; color: #ead6a2; }
.rune-heading .rune-meta { margin: 5px 0 0; color: #b5a7c2; font-size: .85rem; }
.rune-ability { font-weight: 600; color: #d0b4ed; }
.rune-availability { font-size: .85rem; color: #c2b7c9; border-left: 2px solid #8c72a4; padding-left: 10px; }
.information-page [hidden] { display: none !important; }
@media (max-width: 900px) {
    .information-toc ol, .information-vocations { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rune-filters:not([hidden]) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .rune-catalog { grid-template-columns: minmax(0,1fr); }
    .rune-card { padding: 18px; }
    .information-toc ol { gap: 7px 14px; }
    .rune-filters:not([hidden]) { grid-template-columns: minmax(0,1fr); }
}

/* ==========================================================
   WEBSITE POLISH 01 (2026-10-26): typography, header, home, downloads, small fixes.
   Colours stay the RELEASE-01 palette. Fonts: "Cinzel" (headings, wordmark) and "Inter" (text) when the self-hosted
   files are present (css/fonts.css); otherwise the close system fonts named after them.
   ========================================================== */

:root {
    --font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --gold: #e9d08f;
    --header-h: 76px;
}

html {
    /* an in-page jump (#runes, #news ...) stops below the sticky header, not under it */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    font-family: var(--font-body);
    line-height: 1.5;
}

.hero h1,
.section-heading h2,
.champion h3,
.news-section h2,
.news-item h3,
.card-title,
.panel h1,
.page-hero h1,
.block h2,
.block h3,
.steps strong,
.steps > li::before,
.fact strong,
.server-stat strong,
.champion-option-name,
.profile-head h1,
.account-intro h1,
.feature h3,
.community-cta h2,
.download-minimal h1 {
    font-family: var(--font-display);
    font-weight: 700;
}

.hero h1 {
    letter-spacing: .01em;
}

.section-heading h2 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
}

/* ---------- header: opaque, one row from 981 px up, always above the page ---------- */

.topbar {
    min-height: var(--header-h);
    padding: 10px max(20px, calc((100% - 1240px) / 2));
    background: #07060d;
    box-shadow: 0 1px 0 rgba(169, 126, 255, .16), 0 10px 28px rgba(0, 0, 0, .45);
    z-index: 50;
}

.logo,
.logo.logo-link {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    letter-spacing: 0;
    font-weight: 700;
}

.logo-emblem {
    flex: none;
    width: 34px;
    height: 34px;
}

.logo-words {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-main {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #f2eeff;
}

.logo-sub {
    margin-top: 5px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .64em;
    color: var(--violet);
}

nav#site-nav {
    gap: 8px 22px;
}

nav#site-nav a,
.nav-logout button {
    font-size: 13.5px;
    font-weight: 600;
}

@media (min-width: 981px) and (max-width: 1180px) {
    nav#site-nav {
        gap: 8px 15px;
    }

    nav#site-nav a,
    .nav-logout button {
        font-size: 13px;
    }

    .nav-account {
        padding-left: 14px;
        gap: 12px;
    }
}

/* the status strip is a normal block below the hero: the sticky header stays on top of it while scrolling */
.server-panel {
    z-index: 1;
}

/* ---------- home: hero with a real render ---------- */

.hero.hero-home {
    padding: 56px max(24px, calc((100% - 1200px) / 2)) 64px;
    background:
        radial-gradient(circle at 78% 30%, rgba(116, 63, 180, .26), transparent 42%),
        radial-gradient(circle at 10% 90%, rgba(70, 40, 120, .18), transparent 40%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.hero-home .hero-content {
    max-width: 620px;
}

.hero-home h1 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.04;
}

.render-figure {
    margin: 0;
    min-width: 0;
}

.render-frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000;
    border: 1px solid #3a3150;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(167, 124, 255, .07);
}

a.render-frame:hover,
a.render-frame:focus-visible {
    border-color: #8c6bd6;
}

/* renders are shown 1:1 (one sprite pixel = one CSS pixel), cut to the frame: no blurry scaling */
img.render {
    display: block;
    width: 100%;
    max-width: none;
    height: 420px;
    object-fit: none;
    object-position: 50% 50%;
}

.render-figure figcaption {
    margin-top: 10px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
}

.render-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border: 1px solid rgba(233, 208, 143, .45);
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.render-tag-overlay {
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0;
    background: rgba(7, 6, 13, .84);
}

/* ---------- home: status strip ---------- */

.server-stat {
    gap: 6px;
    padding: 0 10px;
}

.stat-note {
    display: block;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.4;
}

/* ---------- home: introduction, one-line controls hint ---------- */

.play-hint {
    color: var(--text-2);
}

.key {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #5a5070;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    color: #f0ecf8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}

/* ---------- home: what makes Arcana different ---------- */

.features-section {
    padding-top: 90px;
    padding-bottom: 40px;
}

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

.feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 22px;
    background: linear-gradient(145deg, #12111a, #09090e);
    border: 1px solid var(--line-soft);
}

.feature-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    overflow: hidden;
    background: #050508;
    border-bottom: 1px solid var(--line-soft);
}

.feature-media img.render {
    height: 170px;
}

/* which part of a 1:1 render a frame shows: percentages keep every frame inside the 1152 x 704 picture at every
   width; audit/tools/crops_check.py measures the visible window, and the alt texts in content/home.php describe it */
.feature-media img.render-arena-sunscar { object-position: 48% 52%; }
.feature-media img.render-grayhaven-harbour { object-position: 62% 84%; }

.feature-vocations {
    background: radial-gradient(circle at 50% 75%, rgba(116, 63, 180, .32), transparent 70%), #08070d;
}

.feature-vocations img {
    width: 76px;
    height: 96px;
    object-fit: contain;
    object-position: center bottom;
}

.feature-vocations img + img {
    margin-left: -14px;
}

.feature-icons {
    background: radial-gradient(circle at 50% 50%, rgba(233, 208, 143, .12), transparent 70%), #08070d;
}

.feature-icons img {
    width: 212px;
    height: 68px;
}

.feature h3 {
    margin: 18px 22px 8px;
    color: #eee;
    font-size: 19px;
    line-height: 1.25;
}

.feature p {
    margin: 0 22px 16px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.65;
}

.feature .more {
    margin: auto 22px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

/* the champion sprites are 6x enlargements: one third keeps every sprite pixel exactly 2 x 2 */
.champion-grid .champion img.pixel {
    width: 76px;
    height: 96px;
}

#vocations {
    padding-top: 70px;
}

/* ---------- home: gallery ---------- */

.gallery-section {
    padding-top: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.gallery-item {
    grid-column: span 2;
}

.gallery-item:nth-child(-n+2) {
    grid-column: span 3;
}

.gallery-item img.render {
    height: 210px;
}

.gallery-item:nth-child(-n+2) img.render {
    height: 300px;
}

.gallery-item img.render-grayhaven-harbour { object-position: 62% 100%; }
.gallery-item img.render-grayhaven-plaza { object-position: 54% 20%; }
.gallery-item img.render-arena-sunscar { object-position: 48% 53%; }

/* ---------- home: community ---------- */

.community-cta {
    padding: 0 30px 90px;
}

.community-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    padding: 34px 40px;
    border: 1px solid rgba(167, 124, 255, .32);
    background: linear-gradient(120deg, rgba(88, 101, 242, .16), rgba(139, 85, 233, .12) 60%, rgba(8, 8, 13, .6));
}

.community-cta h2 {
    margin: 8px 0 8px;
    color: #eee;
    font-size: clamp(26px, 3.4vw, 34px);
}

.community-cta p {
    margin: 0;
    max-width: 60ch;
    color: var(--text-2);
    line-height: 1.6;
}

.community-cta .eyebrow {
    margin-bottom: 0;
}

.discord-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    background: #5865f2;
    color: #fff;
}

.button.primary.discord-button:hover {
    background: #4752c4;
}

/* ---------- home: news and roadmap ---------- */

.news-item time {
    text-transform: uppercase;
}

.news-older {
    /* no border-top: the news item above it already draws the rule */
    padding-top: 0;
}

.news-older summary {
    cursor: pointer;
    color: #cdbcf5;
    font-weight: 600;
    font-size: 14px;
}

.news-older .news-item {
    margin-top: 20px;
}

.roadmap .development-status {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, .25);
}

.roadmap {
    align-self: start;
}

/* ---------- footer ---------- */

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    letter-spacing: .22em;
}

.footer-emblem {
    width: 28px;
    height: 28px;
}

footer p.footer-community {
    margin-top: 18px;
    font-size: 13px;
}

.discord-link {
    color: #c9b8ff;
    font-weight: 600;
}

/* ---------- downloads ---------- */

.download-page {
    min-height: 0;
    display: grid;
    align-content: start;
}

.download-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.download-card {
    display: grid;
    gap: 14px;
    align-content: start;
}

.download-card .button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
}

.download-facts {
    margin: 4px 0 0;
}

.download-facts > div {
    grid-template-columns: minmax(110px, 150px) 1fr;
}

.checksum {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    color: #d8ccf5;
    word-break: break-all;
}

.download-note {
    padding: 12px 14px;
    border-left: 2px solid #8c72a4;
    background: rgba(140, 90, 230, .06);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

.block pre.command {
    margin: 8px 0 14px;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    background: #050508;
    color: #d8ccf5;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}

.trouble details {
    border-top: 1px solid var(--line-soft);
    padding: 14px 0;
}

.trouble details:last-child {
    border-bottom: 1px solid var(--line-soft);
}

.trouble summary {
    cursor: pointer;
    color: #e4dcf5;
    font-weight: 600;
}

.trouble details p {
    margin: 10px 0 0;
}

/* ---------- highscores ---------- */

.ranking-note {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(167, 124, 255, .3);
    background: rgba(140, 90, 230, .07);
    color: var(--text-2);
    line-height: 1.6;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {

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

@media (max-width: 980px) {

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .hero-home img.render {
        height: 320px;
    }

    .download-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {

    .gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery-item,
    .gallery-item:nth-child(-n+2) {
        grid-column: auto;
    }

    .gallery-item img.render,
    .gallery-item:nth-child(-n+2) img.render {
        height: 220px;
    }
}

@media (max-width: 620px) {

    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-inner {
        padding: 26px 20px;
    }

    .community-cta {
        padding: 0 14px 70px;
    }
}

@media (max-width: 520px) {

    :root {
        --header-h: 64px;
    }

    .topbar {
        padding: 10px 16px;
    }

    .logo-emblem {
        width: 30px;
        height: 30px;
    }

    .logo-main {
        font-size: 18px;
    }

    .hero.hero-home {
        padding: 36px 16px 56px;
    }

    .hero-home img.render {
        height: 240px;
    }

    .server-stat {
        padding: 10px 4px;
    }

    .download-facts > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================
   WEBSITE SCREENSHOTS 01: the gameplay screenshots of the home page.
   A screenshot is shown whole and in its own proportions, and the browser scales it smoothly: it has no whole-number
   scale, so .pixel (nearest neighbour) would break its outlines and text. The renders keep .pixel and their 1:1 frames.
   ========================================================== */

img.shot {
    display: block;
    width: 100%;
    height: auto;
}

/* a tablet shows the hero picture at about the width it has on a desktop, not stretched across the whole page */
@media (max-width: 980px) {

    .hero-figure {
        max-width: 640px;
    }
}

/* feature cards: 200 px is the height of a whole screenshot in a card of the four-column row */
.feature-media,
.feature-media img.render {
    height: 200px;
}

.feature-shot {
    background: radial-gradient(circle at 50% 50%, rgba(116, 63, 180, .26), transparent 70%), #08070d;
}

.feature-shot a {
    display: block;
    width: 100%;
    height: 100%;
}

/* the frame cuts anything outside it, so the keyboard focus ring goes inside the picture */
.feature-shot a:focus-visible {
    outline-offset: -3px;
}

.feature-shot img.shot {
    height: 100%;
    object-fit: contain;
}

@media (max-width: 620px) {

    .feature-shot,
    .feature-shot img.shot {
        height: auto;
    }
}

/* gallery: every frame has the proportions of a screenshot, so the rows line up. A screenshot fills its frame without
   being cut (their proportions differ by less than 1 %); an Arena render shows a 1:1 window of the same size. */
.gallery-item .render-frame {
    aspect-ratio: 1118 / 816;
}

.gallery-item img.shot,
.gallery-item img.render,
.gallery-item:nth-child(-n+2) img.render {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gallery-item img.shot {
    object-fit: contain;
}

/* the <picture> around a screenshot adds no box of its own */
picture {
    display: contents;
}

/* from 1270 px (View::screenshot() has the same number) a slot stops following the window, and the files are made for it:
   shown unscaled they paint one file pixel on one screen pixel at 100 % and 125 %, in hardware and software alike. Anything
   a browser has to rescale goes soft, and a larger file does not cure that on a graphics card. 818 instead of 816 gives
   the tallest file of a slot the room it needs. */
@media (min-width: 1270px) {

    .hero-figure img.shot,
    .feature-shot img.shot,
    .gallery-item img.shot {
        object-fit: none;
    }

    .gallery-item .render-frame {
        aspect-ratio: 1118 / 818;
    }
}