/* ==========================================
   РАЗИГРА — ПРОФИЛИ И ТИМОВИ
   Shared by profile.php and team.php. Both pages also load styles.css,
   so everything here builds on the arcade palette already defined there
   and only adds what the two history pages need.
   ========================================== */

body.history-page {
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 224, 208, 0.06), transparent 26rem),
        linear-gradient(180deg, var(--darker) 0%, var(--dark) 45%, var(--darker) 100%);
    min-height: 100vh;
}

/* ---------- top bar ---------- */

.hx-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    background: var(--dark);
    border-bottom: 3px solid var(--primary);
    font-size: clamp(0.55rem, 1.2vw, 0.55rem);
    color: var(--muted);
}

.hx-bar a {
    color: var(--accent-alt);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.hx-bar a:hover,
.hx-bar a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.hx-bar a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------- shell ---------- */

/* The site header is fixed, so the first thing on the page has to clear it. */
.hx-shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(clamp(24px, 5vw, 56px) + 76px) clamp(14px, 3vw, 28px) 90px;
}

.hx-head {
    text-align: center;
    margin-bottom: clamp(24px, 4vw, 42px);
}

.hx-head h1 {
    font-size: clamp(1.1rem, 4.4vw, 2.2rem);
    color: var(--light);
    line-height: 1.35;
    word-break: break-word;
    text-shadow: 4px 0 0 var(--primary), -4px 0 0 var(--accent-alt);
}

.hx-head .hx-sub {
    font-size: clamp(0.6rem, 1.4vw, 0.6rem);
    color: var(--muted);
    line-height: 2.2;
    margin-top: 1.1rem;
}

.hx-head .hx-aliases {
    font-size: clamp(0.52rem, 1.2vw, 0.52rem);
    color: var(--dim);
    margin-top: 0.7rem;
}

.hx-head .hx-directory-links {
    margin: 1rem 0 0;
    font-size: clamp(0.5rem, 1.1vw, 0.5rem);
}

.hx-head .hx-directory-links a {
    color: var(--accent);
    text-decoration: none;
}

.hx-head .hx-directory-links a:hover { text-decoration: underline; }

/* ---------- stat strip ---------- */

.hx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
    margin: 0 auto clamp(26px, 4vw, 44px);
}

.hx-stat {
    background: var(--panel);
    border: 2px solid var(--line);
    border-top: 5px solid var(--accent-alt);
    padding: 1.3rem 0.9rem;
    text-align: center;
}

.hx-stat b {
    display: block;
    font-size: clamp(1.1rem, 3.6vw, 1.8rem);
    color: var(--accent);
    line-height: 1;
    font-weight: normal;
}

.hx-stat span {
    display: block;
    font-size: clamp(0.45rem, 1vw, 0.45rem);
    color: var(--dim);
    letter-spacing: 1px;
    margin-top: 0.85rem;
}

/* ---------- section headings ---------- */

.hx-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: clamp(0.8rem, 1.7vw, 0.8rem);
    color: var(--accent);
    margin: 0 0 1.2rem;
}

.hx-heading em {
    font-style: normal;
    font-size: 0.7em;
    color: var(--darker);
    background: var(--accent-alt);
    padding: 0.35rem 0.6rem;
}

.hx-heading i {
    color: var(--accent-alt);
}

/* styles.css gives every <section> 80px of padding for the landing page.
   These sections sit inside an already-padded shell, so they reset it. */
.hx-section {
    padding: 0;
    margin-bottom: clamp(30px, 5vw, 52px);
}

/* ---------- edition timeline ---------- */

.hx-timeline {
    display: grid;
    gap: 1rem;
}

.hx-card {
    background: var(--panel);
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-alt);
    padding: clamp(14px, 2.4vw, 22px);
}

.hx-card.is-win {
    border-left-color: var(--accent);
    background: linear-gradient(120deg, rgba(255, 217, 61, 0.08), var(--panel) 45%);
}

.hx-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.hx-card-title {
    font-size: clamp(0.85rem, 1.8vw, 0.85rem);
    color: var(--light);
}

.hx-card-title small {
    display: block;
    font-size: 0.62em;
    color: var(--dim);
    margin-top: 0.55rem;
}

.hx-placing {
    font-size: clamp(0.7rem, 1.5vw, 0.7rem);
    color: var(--accent);
    white-space: nowrap;
}

.hx-placing span {
    color: var(--dim);
    font-size: 0.75em;
}

/* ---------- role / meta chips ---------- */

.hx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    margin-bottom: 1rem;
}

.hx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: clamp(0.48rem, 1.1vw, 0.48rem);
    letter-spacing: 1px;
    color: var(--light);
    background: var(--dark);
    border: 2px solid var(--line);
    padding: 0.45rem 0.7rem;
    line-height: 1.6;
    text-decoration: none;
}

a.hx-chip:hover,
a.hx-chip:focus-visible {
    border-color: var(--accent-alt);
    color: var(--accent-alt);
}

.hx-chip i {
    color: var(--accent-alt);
}

.hx-chip.role-participant { border-color: var(--accent-alt); }
.hx-chip.role-volunteer   { border-color: #7f6bd0; }
.hx-chip.role-organizer   { border-color: var(--accent); }
.hx-chip.role-audience    { border-color: var(--dim); }

/* A number riding along inside a chip — a member's dubari, say — needs a
   rule of its own or it reads as part of the name. */
.hx-chip .hx-chip-num {
    color: var(--accent);
    font-weight: normal;
    border-left: 1px solid var(--line);
    margin-left: 0.2rem;
    padding-left: 0.5rem;
}

.hx-chip.is-points {
    color: var(--accent);
    border-color: rgba(255, 217, 61, 0.5);
}

/* ---------- key/value rows ---------- */

.hx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.hx-fact {
    background: var(--dark);
    border: 1px solid var(--line);
    padding: 0.8rem 0.9rem;
}

.hx-fact b {
    display: block;
    font-size: clamp(0.85rem, 1.8vw, 0.85rem);
    color: var(--accent);
    font-weight: normal;
    line-height: 1;
}

.hx-fact span {
    display: block;
    font-size: clamp(0.42rem, 0.95vw, 0.42rem);
    color: var(--dim);
    letter-spacing: 1px;
    margin-top: 0.6rem;
}

/* ---------- name / team chip lists ---------- */

.hx-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hx-names li { display: contents; }

.hx-label {
    display: block;
    font-size: clamp(0.44rem, 1vw, 0.44rem);
    color: var(--dim);
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
}

/* ---------- directory grid ---------- */

.hx-search {
    width: 100%;
    max-width: 460px;
    margin: 0 auto clamp(22px, 3.5vw, 34px);
    display: block;
    font-family: inherit;
    font-size: clamp(0.6rem, 1.3vw, 0.6rem);
    color: var(--light);
    background: var(--panel);
    border: 3px solid var(--line);
    padding: 0.9rem 1rem;
    line-height: 1.8;
}

.hx-search:focus {
    outline: none;
    border-color: var(--accent-alt);
}

.hx-search::placeholder { color: var(--dim); }

.hx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 1rem;
}

.hx-tile {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: var(--panel);
    border: 2px solid var(--line);
    border-top: 5px solid var(--accent-alt);
    padding: 1.1rem 1.1rem 1.2rem;
    text-decoration: none;
    color: var(--light);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.hx-tile:hover,
.hx-tile:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent-alt);
    border-top-color: var(--accent);
    box-shadow: var(--pixel-shadow);
    outline: none;
}

.hx-tile-name {
    font-size: clamp(0.72rem, 1.6vw, 0.72rem);
    color: var(--light);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.hx-all-time-rank {
    display: inline-block;
    min-width: 3.2em;
    color: var(--board-gold, #ffd700);
    text-shadow: 0 0 0.55em rgba(255, 215, 0, 0.38);
}

.hx-tile-name .hx-tag {
    color: var(--accent-alt);
}

.hx-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    font-size: clamp(0.44rem, 0.95vw, 0.44rem);
    color: var(--dim);
    letter-spacing: 1px;
    margin-top: auto;
}

.hx-tile-meta b {
    color: var(--accent);
    font-weight: normal;
}

.hx-editions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hx-pip {
    font-size: clamp(0.4rem, 0.9vw, 0.4rem);
    letter-spacing: 1px;
    color: var(--darker);
    background: var(--accent-alt);
    padding: 0.3rem 0.45rem;
    line-height: 1.5;
}

.hx-pip.is-organizer { background: var(--accent); }
.hx-pip.is-volunteer { background: #7f6bd0; color: var(--light); }
.hx-pip.is-audience  { background: var(--dim); color: var(--darker); }

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

.hx-empty {
    font-size: clamp(0.6rem, 1.3vw, 0.6rem);
    color: var(--dim);
    text-align: center;
    line-height: 2.2;
    padding: 2.5rem 1.2rem;
    border: 3px dashed var(--line);
}

.hx-foot {
    font-size: clamp(0.48rem, 1.1vw, 0.48rem);
    color: var(--dim);
    text-align: center;
    line-height: 2.4;
    margin-top: clamp(28px, 4vw, 46px);
}

.hx-foot a { color: var(--accent); text-decoration: none; }
.hx-foot a:hover { text-decoration: underline; }

/* .profile-link / .team-link live in styles.css: every page prints names,
   not just these two. */

@media (max-width: 560px) {
    .hx-card-top { flex-direction: column; align-items: flex-start; }
    .hx-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   NOT-YET-PLAYED EDITIONS
   Totals count finished editions only, so anything still to come is drawn
   hollow — visible on the timeline, clearly not a result.
   ========================================== */

.hx-stats-note {
    font-size: clamp(0.42rem, 0.95vw, 0.42rem);
    color: var(--dim);
    letter-spacing: 1px;
    text-align: center;
    margin: -0.6rem 0 clamp(26px, 4vw, 44px);
}

.hx-pending-note {
    color: var(--accent-alt);
}

.hx-card.is-pending {
    border-left-style: dashed;
    border-left-color: var(--dim);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.014) 0 8px,
            transparent 8px 16px
        ),
        var(--panel);
}

.hx-chip.is-pending {
    color: var(--muted);
    border-style: dashed;
    border-color: var(--dim);
}

.hx-chip.is-pending i {
    color: var(--muted);
}

.hx-pip.is-pending {
    color: var(--muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--dim);
}