/*
 * Haftir UI kit (redesign phase 1).
 *
 * Colours, fonts and shared components for the new look. Everything is scoped
 * under the .hx class, so linking this file changes nothing on pages that do not
 * use it. Preview: /ui-kit (admins only).
 *
 * Fonts are self-hosted (Google Fonts is unreliable from Iran), both SIL OFL 1.1:
 * Vazirmatn for text, Lalezar for page titles. Licences in fonts/haftir-ui/.
 */

@font-face {
    font-family: 'HX Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/haftir-ui/vazirmatn-arabic-400-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'HX Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/haftir-ui/vazirmatn-arabic-700-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'HX Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/haftir-ui/vazirmatn-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'HX Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/haftir-ui/vazirmatn-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'HX Lalezar';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/haftir-ui/lalezar-arabic-400-normal.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'HX Lalezar';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/haftir-ui/lalezar-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
.hx {
    --hx-ink: #0d0b0a;      /* page background */
    --hx-soot: #161210;     /* menu, frames */
    --hx-ash: #201a17;      /* cards */
    --hx-ash2: #2b231f;     /* active / hover */
    --hx-line: #3b302a;     /* borders */
    --hx-bone: #efe7de;     /* text, 16:1 on ink */
    --hx-dust: #a99d93;     /* secondary text, 7.4:1 */
    --hx-blood: #a3191a;    /* bars, primary button */
    --hx-flare: #ef5146;    /* red text on dark, 5.5:1 */
    --hx-kraft: #d8b878;    /* "ready", highlights, 10:1 */
    --hx-ok: #7fb069;       /* online */

    --hx-font: 'HX Vazirmatn', BYekan, Tahoma, sans-serif;
    --hx-display: 'HX Lalezar', 'HX Vazirmatn', BYekan, Tahoma, sans-serif;

    --hx-radius: 6px;
    --hx-gap: 12px;

    direction: rtl;
    text-align: right;
    font-family: var(--hx-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--hx-bone);
}
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx a { color: var(--hx-bone); }
.hx :focus-visible { outline: 2px solid var(--hx-kraft); outline-offset: 2px; }
.hx .hx-num { font-variant-numeric: tabular-nums; }

/* ---- Type ---- */
.hx .hx-title {
    font-family: var(--hx-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    margin: 0;
    color: var(--hx-bone);
}
.hx .hx-h2 {
    font-family: var(--hx-display);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
}
.hx .hx-muted { color: var(--hx-dust); font-size: 12.5px; }
.hx .hx-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Surfaces ---- */
.hx .hx-card {
    background: var(--hx-ash);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hx .hx-stack { display: flex; flex-direction: column; gap: var(--hx-gap); }
.hx .hx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hx .hx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

/* ---- Buttons ---- */
.hx .hx-btn {
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 5px;
    padding: 7px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    min-height: 36px;
}
.hx .hx-btn-primary { background: var(--hx-blood); color: #fff; border-color: #c22a26; }
.hx .hx-btn-primary:hover { background: #b8201f; }
.hx .hx-btn-secondary { background: transparent; color: var(--hx-bone); border-color: var(--hx-line); }
.hx .hx-btn-secondary:hover { background: var(--hx-ash2); }
.hx .hx-btn[disabled],
.hx .hx-btn.hx-is-disabled { background: var(--hx-ash); color: #7c716a; border-color: var(--hx-ash2); cursor: not-allowed; }
.hx .hx-btn-sm { padding: 4px 10px; font-size: 12px; min-height: 30px; }

/* ---- Status chips: ready / wait / claim / lock ---- */
.hx .hx-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
    padding: 1px 8px;
    border-radius: 99px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hx .hx-chip-ready { background: var(--hx-kraft); color: #1a140c; }
.hx .hx-chip-online { background: var(--hx-ok); color: #0f1a0b; }
.hx .hx-chip-wait { background: var(--hx-ash2); color: var(--hx-dust); }
.hx .hx-chip-claim { background: var(--hx-flare); color: #1a0705; }
.hx .hx-chip-lock { background: transparent; color: var(--hx-dust); border: 1px solid var(--hx-line); }

/* ---- Count badge ---- */
.hx .hx-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--hx-flare);
    color: #1a0705;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Stat (label over value, optional bar) ---- */
.hx .hx-stat { display: inline-flex; flex-direction: column; line-height: 1.3; }
.hx .hx-stat small { font-size: 10.5px; color: var(--hx-dust); }
.hx .hx-stat b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx .hx-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--hx-ash2);
    overflow: hidden;
    margin-top: 3px;
    min-width: 60px;
}
.hx .hx-bar > i { display: block; height: 100%; background: var(--hx-flare); }
.hx .hx-bar.hx-bar-kraft > i { background: var(--hx-kraft); }

/* ---- Tile (big number) ---- */
.hx .hx-tile {
    background: var(--hx-ash);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    padding: 10px 12px;
}
.hx .hx-tile small { display: block; font-size: 11px; color: var(--hx-dust); }
.hx .hx-tile b { display: block; font-size: 19px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hx .hx-tile span { font-size: 11px; color: var(--hx-dust); }

/* ---- Notice ---- */
.hx .hx-note {
    display: flex;
    gap: 9px;
    align-items: center;
    background: var(--hx-ash);
    border-radius: var(--hx-radius);
    padding: 9px 12px;
    font-size: 13px;
}
.hx .hx-note b { color: var(--hx-kraft); }
.hx .hx-note.hx-note-danger { border: 1px solid #5c1a17; }
.hx .hx-note.hx-note-danger b { color: var(--hx-flare); }

/* ---- Empty state: what it is, why it is empty, next step ---- */
.hx .hx-empty {
    border: 1px dashed var(--hx-line);
    border-radius: var(--hx-radius);
    padding: 16px;
    text-align: center;
    color: var(--hx-dust);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hx .hx-empty b { color: var(--hx-bone); }

/* ---- Tabs (pill row) ---- */
.hx .hx-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.hx .hx-tabs a,
.hx .hx-tabs span {
    font-size: 12px;
    padding: 3px 11px;
    border-radius: 99px;
    color: var(--hx-dust);
    border: 1px solid var(--hx-line);
    text-decoration: none;
}
.hx .hx-tabs button {
    font: inherit;
    font-size: 12px;
    padding: 3px 11px;
    border-radius: 99px;
    color: var(--hx-dust);
    background: none;
    border: 1px solid var(--hx-line);
    cursor: pointer;
}
.hx .hx-tabs button:not(.hx-on):hover { color: var(--hx-bone); }
.hx .hx-tabs .hx-on { background: var(--hx-bone); color: var(--hx-ink); border-color: var(--hx-bone); font-weight: 700; }

/* ---- Stepper (quantity) ---- */
.hx .hx-stepper { display: inline-flex; border: 1px solid var(--hx-line); border-radius: 5px; overflow: hidden; }
.hx .hx-stepper button {
    font: inherit;
    width: 30px;
    border: 0;
    background: var(--hx-ash2);
    color: var(--hx-bone);
    font-weight: 700;
    cursor: pointer;
}
.hx .hx-stepper input {
    font: inherit;
    width: 48px;
    border: 0;
    background: var(--hx-ink);
    color: var(--hx-bone);
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 4px 2px;
}

/* ---- Shop (pieces to buy, with a total bar that stays on screen) ---- */
.hx .hx-spread { justify-content: space-between; }
.hx .hx-item { gap: 6px; padding: 9px; }
.hx .hx-item-img { height: 58px; display: flex; align-items: center; justify-content: center; }
.hx .hx-item-img img { max-height: 56px; max-width: 100%; }
.hx .hx-item.hx-picked { border-color: var(--hx-kraft); }
.hx .hx-buybar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--hx-soot);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    font-variant-numeric: tabular-nums;
}
.hx .hx-buybar .hx-over { color: var(--hx-flare); }
@media (max-width: 768px) {
    /* Above the phone's bottom bar. */
    .hx .hx-buybar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Profile ---- */
.hx .hx-profile { flex-direction: row; align-items: center; gap: 14px; }
.hx .hx-profile-avatar { width: 96px; height: 96px; border-radius: var(--hx-radius); object-fit: cover; flex: none; border: 1px solid var(--hx-line); }
.hx .hx-profile-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hx .hx-profile-main .hx-title { margin: 0; overflow-wrap: anywhere; }
.hx .hx-profile-rank { display: flex; flex-direction: column; gap: 4px; max-width: 320px; font-size: 13px; }
.hx .hx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hx .hx-rows.hx-rows-plain > div { grid-template-columns: minmax(0, 1fr) auto; }
.hx .hx-badges { display: flex; flex-wrap: wrap; gap: 6px; font-size: 22px; }
.hx .hx-badges span { cursor: help; }
.hx .hx-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hx .hx-gear > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); }
.hx .hx-gear img { max-height: 40px; max-width: 100%; }
@media (max-width: 480px) {
    .hx .hx-profile-avatar { width: 72px; height: 72px; }
}

/* ---- Crimes (each a card that picks its radio) ---- */
.hx .hx-crime,
.hx .hx-pick { position: relative; gap: 6px; padding: 9px; cursor: pointer; font-weight: 400; }
.hx .hx-crime input,
.hx .hx-pick input { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; accent-color: var(--hx-kraft); }
.hx .hx-crime img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 4px; }
/* A crime the player has no skill for yet: greyed out. */
.hx .hx-crime-locked { cursor: default; opacity: .7; }
.hx .hx-crime-locked img { filter: grayscale(1) brightness(.6); }
.hx .hx-crime-needs { font-size: 12px; color: var(--hx-kraft); }
.hx .hx-crime:has(input:checked),
.hx .hx-pick:has(input:checked) { border-color: var(--hx-kraft); box-shadow: 0 0 0 1px var(--hx-kraft) inset; }
.hx .hx-crime:has(input:focus-visible),
.hx .hx-pick:has(input:focus-visible) { outline: 2px solid var(--hx-kraft); outline-offset: 2px; }
.hx .hx-pick .hx-who { padding-inline-end: 22px; }
.hx .hx-crime-chance { display: flex; flex-direction: column; gap: 3px; }
.hx .hx-crime-send { flex-direction: row; flex-wrap: wrap; align-items: end; justify-content: space-between; }
.hx .hx-crime-result {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-inline-start: 4px solid var(--hx-stamp);
}
.hx .hx-crime-result-ok { --hx-stamp: var(--hx-ok); }
.hx .hx-crime-result-spotted { --hx-stamp: var(--hx-kraft); }
.hx .hx-crime-result-jailed { --hx-stamp: var(--hx-flare); }
.hx .hx-crime-result img { display: block; width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.hx .hx-crime-result-body { display: flex; flex-direction: column; gap: 6px; padding-inline-end: 84px; min-width: 0; }
.hx .hx-crime-result-body .hx-h2 { margin: 0; }
.hx .hx-crime-story { margin: 0; font-size: 14px; line-height: 1.9; }
.hx .hx-crime-loot { margin: 0; font-size: 13px; color: var(--hx-dust); }
.hx .hx-crime-loot b { color: var(--hx-stamp); }
.hx .hx-stamp {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 12px;
    padding: 2px 10px;
    border: 3px double var(--hx-stamp);
    border-radius: 4px;
    color: var(--hx-stamp);
    font-family: var(--hx-display);
    font-size: 22px;
    line-height: 1.5;
    transform: rotate(-12deg);
    opacity: .9;
    animation: hx-stamp .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes hx-stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx .hx-stamp { animation: none; } }
@media (max-width: 480px) {
    .hx .hx-crime-result { grid-template-columns: 64px minmax(0, 1fr); }
    .hx .hx-crime-result img { width: 64px; }
    .hx .hx-crime-result-body { padding-inline-end: 0; padding-block-end: 40px; }
    .hx .hx-stamp { inset-block-start: auto; inset-block-end: 12px; font-size: 18px; }
}
.hx .hx-crime-back { align-self: flex-start; }
.hx .hx-crime-gain { color: var(--hx-ok); }
/* The categories as picture tiles (tabs); a closed one is a dark silhouette with a lock. */
.hx .hx-crime-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-block-end: var(--hx-gap); }
.hx .hx-crime-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--hx-ash);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    color: var(--hx-bone);
    font: inherit;
    text-align: start;
    min-width: 0;
}
.hx button.hx-crime-tile { cursor: pointer; }
.hx button.hx-crime-tile:not(.hx-on):hover { background: var(--hx-ash2); }
.hx .hx-crime-tile img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.hx .hx-crime-tile b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx .hx-crime-tile small { font-size: 11px; color: var(--hx-dust); }
.hx .hx-crime-tile.hx-on { border-color: var(--hx-kraft); box-shadow: 0 0 0 1px var(--hx-kraft) inset; }
.hx .hx-crime-tile.hx-on b { color: var(--hx-kraft); }
.hx .hx-crime-tile-locked { background: var(--hx-soot); color: var(--hx-dust); }
.hx .hx-crime-lock { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; background: var(--hx-ink); border-radius: 4px; color: var(--hx-dust); position: relative; overflow: hidden; }
.hx .hx-crime-tile .hx-crime-lock img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; filter: grayscale(1) brightness(.35); }
.hx .hx-crime-lock svg { position: relative; opacity: .8; }
.hx .hx-crime-tile-locked b { color: var(--hx-dust); }
.hx .hx-crime-panel .hx-h2 { margin-block-start: 0; }
@media (max-width: 480px) {
    .hx .hx-crime-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .hx .hx-crime-tile { padding: 4px; }
    .hx .hx-crime-tile b { font-size: 12px; }
    .hx .hx-crime-tile small { font-size: 10px; }
}
.hx .hx-crime-hour { align-self: flex-start; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--hx-ash2); }
.hx .hx-crime-hour-up { color: var(--hx-ok); }
.hx .hx-crime-hour-down { color: var(--hx-flare); }
.hx .hx-crime-heat { grid-column: 1 / -1; font-size: 12px; color: var(--hx-flare); }
.hx .hx-crime-skills { gap: 0; padding-block: 4px; }
.hx .hx-crime-skills > div {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(100px, 2fr) auto;
    gap: 10px;
    align-items: center;
    padding-block: 8px;
    border-bottom: 1px solid var(--hx-line);
    font-size: 13px;
}
.hx .hx-crime-skills > div:last-child { border-bottom: 0; }
.hx .hx-crime-skill { display: flex; flex-direction: column; gap: 3px; }
.hx .hx-crime-skills .hx-muted { font-size: 12px; white-space: nowrap; }
.hx .hx-crime-items { gap: 0; padding-block: 4px; }
.hx .hx-crime-items > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    padding-block: 8px;
    border-bottom: 1px solid var(--hx-line);
    font-size: 13px;
}
.hx .hx-crime-items > div:last-child { border-bottom: 0; }
.hx .hx-crime-items .hx-muted { font-size: 12px; }
.hx .hx-crime-items > div { align-items: center; }
.hx .hx-crime-items > div > b { margin-inline-end: auto; }
.hx .hx-crime-item-pic { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.hx .hx-crime-item { color: var(--hx-ok); }
@media (max-width: 480px) {
    .hx .hx-crime-skills > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hx .hx-crime-skills .hx-muted { grid-column: 1 / -1; }
}

/* ---- Ranked rows (leaderboards) ---- */
.hx .hx-rows { display: flex; flex-direction: column; }
.hx .hx-rows > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 5px 2px;
    border-bottom: 1px solid var(--hx-line);
    font-variant-numeric: tabular-nums;
}
.hx .hx-rows > div:last-child { border-bottom: 0; }
.hx .hx-rows > div.hx-me { background: rgba(216, 184, 120, .08); border-radius: 4px; }
.hx .hx-rows .hx-n { color: var(--hx-dust); text-align: center; }
/* Tab panels hide only when scripts run (html.hx-js); without them every panel shows and
   the tab buttons go away. */
.hx-js .hx .hx-rows[hidden] { display: none; }
html:not(.hx-js) .hx [role="tabpanel"][hidden] { display: block; }
html:not(.hx-js) .hx [data-hx-tabs],
html:not(.hx-js) .hx [data-hx-go] { display: none; }
.hx .hx-rows-wide > div { grid-template-columns: 20px minmax(0, 1fr) auto; }
.hx .hx-who { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx .hx-who img { border-radius: 50%; flex: none; object-fit: cover; }

/* ---- Forms ---- */
.hx .hx-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hx-js .hx .hx-form[hidden] { display: none; }
.hx .hx-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.hx .hx-field > span { font-size: 12px; color: var(--hx-dust); }
.hx .hx-field input,
.hx .hx-field select {
    font: inherit;
    font-size: 15px;
    color: var(--hx-bone);
    background: var(--hx-ink);
    border: 1px solid var(--hx-line);
    border-radius: 5px;
    padding: 8px 10px;
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
}
.hx .hx-field input:focus,
.hx .hx-field select:focus { outline: 2px solid var(--hx-kraft); outline-offset: 1px; }
.hx .hx-field input[inputmode="numeric"] { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx .hx-field small { font-size: 11px; color: var(--hx-dust); }
.hx .hx-captcha { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.hx .hx-captcha img { border: 1px solid var(--hx-line); border-radius: 5px; height: 40px; }
.hx .hx-captcha .hx-field { flex: 1; min-width: 140px; }
.hx .hx-list { margin: 0; padding-inline-start: 18px; line-height: 1.9; }
.hx .hx-note.hx-note-ok { border: 1px solid #2f5a32; }
.hx .hx-note.hx-note-ok b { color: var(--hx-ok); }
.hx .hx-lockcard { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: #7a6740; }
.hx .hx-lockcard p { margin: 4px 0 0; }

/* ---- Two columns that stack on narrow screens ---- */
.hx .hx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--hx-gap); align-items: start; }

/* ---- Text written by people (news, changelog lines) ---- */
.hx .hx-prose { line-height: 1.9; overflow-wrap: anywhere; }
.hx .hx-prose img { max-width: 100%; height: auto; vertical-align: middle; }

/* ---- Action card (image + name + status chip) ---- */
.hx .hx-act {
    background: var(--hx-ash);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--hx-bone);
}
.hx .hx-act img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hx .hx-act > div { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hx .hx-act b { font-size: 13px; }
.hx .hx-act.hx-is-ready { border-color: #7a6740; }
.hx .hx-act.hx-is-locked img { filter: grayscale(1) brightness(.55); }

@media (prefers-reduced-motion: no-preference) {
    .hx .hx-act.hx-is-ready .hx-chip-ready { animation: hx-pulse 2.4s ease-in-out infinite; }
}
@keyframes hx-pulse { 50% { box-shadow: 0 0 0 4px rgba(216, 184, 120, .18); } }

/* ---- Label / value lines inside a card ---- */
.hx .hx-kv { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.hx .hx-kv > span { display: flex; justify-content: space-between; gap: 8px; color: var(--hx-dust); }
.hx .hx-kv b { color: var(--hx-bone); font-variant-numeric: tabular-nums; }

/* ---- Wider cards (jail, cars) and the chat frame ---- */
.hx .hx-grid.hx-grid-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hx .hx-car img { display: block; width: 100%; max-height: 110px; object-fit: contain; }
.hx details > summary { cursor: pointer; font-weight: 700; }
.hx .hx-chat { width: 100%; height: 600px; border: 0; border-radius: 4px; background: var(--hx-ink); }

/* ---- Text area and the mailbox ---- */
.hx .hx-field textarea {
    font: inherit;
    font-size: 14px;
    color: var(--hx-bone);
    background: var(--hx-ink);
    border: 1px solid var(--hx-line);
    border-radius: 5px;
    padding: 8px 10px;
    width: 100%;
    min-height: 180px;
    box-sizing: border-box;
    resize: vertical;
}
.hx .hx-field textarea:focus { outline: 2px solid var(--hx-kraft); outline-offset: 1px; }
.hx .hx-mail > div { grid-template-columns: 10px minmax(0, 1.2fr) minmax(0, 2fr) auto 22px; }
.hx .hx-mail a { color: var(--hx-bone); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx .hx-mail .hx-unread a { font-weight: 700; }
.hx .hx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-kraft); }
.hx .hx-mail .hx-del { color: var(--hx-dust); text-align: center; }
.hx .hx-mail .hx-del:hover { color: var(--hx-flare); }
@media (max-width: 600px) {
    .hx .hx-mail > div { grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1fr) 22px; }
    .hx .hx-mail .hx-mail-date { display: none; }
}
.hx .hx-pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hx .hx-pager a,
.hx .hx-pager span { min-width: 30px; text-align: center; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--hx-line); color: var(--hx-dust); text-decoration: none; }
.hx .hx-pager .hx-on { background: var(--hx-bone); color: var(--hx-ink); border-color: var(--hx-bone); font-weight: 700; }

/* ---- Daily reward days and tasks, players online ---- */
.hx .hx-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.hx .hx-day { gap: 4px; padding: 9px; font-size: 12.5px; }
.hx .hx-day small { color: var(--hx-dust); font-size: 11px; }
.hx .hx-day.hx-done { opacity: .6; }
.hx .hx-day.hx-on { border-color: var(--hx-kraft); box-shadow: 0 0 0 1px var(--hx-kraft) inset; }
.hx .hx-tasks > div { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 2px; }
.hx .hx-tasks .hx-form { margin: 0; }
.hx .hx-online > div { grid-template-columns: 24px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.hx .hx-online-head { font-size: 11px; }
@media (max-width: 600px) {
    .hx .hx-online > div { grid-template-columns: 24px minmax(0, 2fr) minmax(0, 1fr) auto; }
    .hx .hx-online .hx-hide-sm { display: none; }
}
.hx .hx-pick.hx-off { cursor: default; opacity: .75; }
.hx .hx-medal { gap: 4px; }
.hx .hx-medal.hx-off { opacity: .55; }
.hx .hx-spies > div { grid-template-columns: minmax(0, 1fr) auto auto; }
.hx .hx-grow { flex: 1; min-width: 0; }
@media (max-width: 600px) {
    .hx .hx-spies > div { grid-template-columns: minmax(0, 1fr) auto; }
    .hx .hx-spies > div > .hx-muted { grid-column: 1 / -1; grid-row: 2; }
}
.hx .hx-form .hx-head:has(.hx-grow) { align-items: end; }

/* ---- Trade markets: count fields on the goods, the price list ---- */
.hx .hx-good .hx-field input { min-height: 34px; padding: 4px 8px; }
.hx .hx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hx .hx-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx .hx-table th,
.hx .hx-table td { padding: 6px 8px; border-bottom: 1px solid var(--hx-line); text-align: start; }
.hx .hx-table thead th { color: var(--hx-dust); font-weight: 400; font-size: 11.5px; }
.hx .hx-table .hx-low { color: var(--hx-ok); font-weight: 700; }
.hx .hx-table .hx-high { color: var(--hx-flare); }

/* ---- A checkbox with its label (black list) ---- */
.hx .hx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.hx .hx-check input { accent-color: var(--hx-kraft); width: 16px; height: 16px; }

/* ---- Games of chance: picks with a picture or a big number, the result, the prize list ---- */
.hx .hx-pick-center { align-items: center; text-align: center; }
.hx .hx-pick-center img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.hx .hx-big { font-size: 22px; font-variant-numeric: tabular-nums; }
.hx .hx-versus { flex-direction: row; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.hx .hx-versus figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--hx-dust); }
.hx .hx-versus img { width: 110px; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.hx .hx-grid.hx-prizes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hx .hx-prizes .hx-card { padding: 9px; font-size: 12.5px; text-align: center; }
.hx fieldset.hx-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.hx .hx-grid.hx-picks { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* ---- Uncle Rahim, the new players' tutorial (/rahim) ---- */
.hx .hx-npc { flex-direction: row; gap: 14px; align-items: flex-start; }
.hx .hx-npc-face { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--hx-ash2); color: var(--hx-kraft); border: 1px solid #7a6740; }
.hx .hx-npc-talk { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hx .hx-npc-talk p { margin: 0; line-height: 1.9; }
.hx a.hx-npc { color: inherit; text-decoration: none; align-items: center; }
.hx a.hx-npc .hx-chip { margin-inline-start: auto; }
.hx .hx-tutor-bar { flex: 1; }
.hx .hx-rank-bar { display: block; height: 8px; border-radius: 4px; }
.hx .hx-step-done { opacity: .6; }
.hx .hx-step-now b { color: var(--hx-kraft); }
@media (prefers-reduced-motion: no-preference) {
    .hx .hx-chip-tutor { animation: hx-pulse 2.4s ease-in-out infinite; }
}

/* ---- My progress (/progress): what the next ranks open ---- */
.hx .hx-rows > a.hx-unlock { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--hx-line); color: inherit; text-decoration: none; }
.hx .hx-rows > a.hx-unlock:last-child { border-bottom: 0; }
.hx .hx-unlock-pic { width: 64px; height: 32px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--hx-ash2); color: var(--hx-dust); }
.hx .hx-unlock-pic img { width: 100%; height: 100%; object-fit: cover; }
.hx .hx-unlock-pic.hx-is-locked img { filter: grayscale(1) brightness(.55); }
/* Pictures: page banners (images/banners), Uncle Rahim's face, mission cards. */
.hx-page-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 8px; margin: 0 0 12px; background: var(--hx-ash2, #1d1a17); }
.hx .hx-tutor-scene { aspect-ratio: 2 / 1; margin: 0; }
.hx .hx-npc-face { overflow: hidden; }
.hx .hx-npc-face img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.hx .hx-mission-pic { position: relative; margin: -2px 0 4px; }
.hx .hx-mission-pic img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 4px; }
.hx .hx-mission-pic .hx-mission-stamp { position: absolute; inset-inline-end: 8px; top: 8px; width: 64px; aspect-ratio: 1; object-fit: contain; border-radius: 0; opacity: .9; transform: rotate(-12deg); }
@media (max-width: 640px) { .hx-page-banner { aspect-ratio: 5 / 2; margin-bottom: 8px; } }
.hx .hx-medal-pic { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.hx .hx-medal.hx-off .hx-medal-pic { filter: grayscale(1); }
.hx .hx-badges img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; }
.hx .hx-inline-badge { width: 22px; height: 22px; border-radius: 5px; vertical-align: middle; object-fit: cover; }