/*
 * Hyzion Nexus — design language.
 *
 * Loaded after the inherited DefaultRevamp sheet, so everything here wins. Nothing below
 * restyles a component the theme does not actually ship; the surface treatment is applied
 * through variables and a small number of overrides, so a NamelessMC upgrade to the base
 * markup does not silently break the look.
 *
 * The finish is flat and modern rather than glassy-and-glowing: deep violet-black surfaces,
 * hairline borders tinted with the accent instead of drawn in grey, generous radii, pill
 * buttons, and a full-bleed hero the navigation floats over. Glow survives as a signal on
 * exactly three things, not as an ambient property of every card.
 *
 * The palette is arcane rather than electronic: the violet and cyan read as Nexus energy lit
 * from within stone, not as neon. Violet leads; cyan is the interactive accent and is what
 * keeps this from being one more purple gaming template.
 *
 * This file is the default look and stands on its own. Theme settings are emitted as a
 * <style> block after it (template_settings/vars.php) and carry only the values an admin has
 * changed — so the defaults below are what a stock install renders.
 *
 * The values in :root are mirrored as field defaults in
 * template_settings/settings_pages/colours.php. Change one and change the other, or the
 * panel will show a value the page is not using.
 */

:root {
    /* Surfaces — violet-black, not neutral grey. Each step is deliberately small. */
    --hyzion-bg: #0a0612;
    --hyzion-bg-elevated: #120a1f;
    --hyzion-surface: #180f29;
    --hyzion-surface-raised: #201535;
    --hyzion-border: #2b1a45;

    /* Energy. Violet leads; cyan is the interactive accent, never the base. */
    --hyzion-primary: #b14dff;
    --hyzion-primary-deep: #7a2bff;
    --hyzion-nexus-violet: #4a1d7a;
    --hyzion-secondary: #00e2ff;
    --hyzion-secondary-bright: #60f0ff;
    --hyzion-magenta: #ff65df;

    /*
     * Accent-tinted hairlines. A border that is a transparent wash of the accent sits on any
     * surface without needing a matching solid colour per surface — which is what makes the
     * whole page read as one material. Regenerated from the primary colour by vars.php.
     */
    --hyzion-tint: rgba(177, 77, 255, 0.16);
    --hyzion-tint-soft: rgba(177, 77, 255, 0.06);
    --hyzion-tint-strong: rgba(177, 77, 255, 0.38);

    /* Text */
    --hyzion-text: #ece6f7;
    --hyzion-text-muted: #a394c0;
    --hyzion-text-dim: #6f6390;

    /* Semantic */
    --hyzion-success: #76e6b2;
    --hyzion-warning: #ff9f43;
    --hyzion-danger: #ff6b7e;

    /*
     * Three glow strengths, and only three. Glow is a signal — if everything glows nothing
     * reads as interactive, which is why there is no "subtle glow on every card" here.
     */
    --hyzion-glow-soft: 0 0 12px rgba(177, 77, 255, 0.18);
    --hyzion-glow-active: 0 0 16px rgba(0, 226, 255, 0.35);
    --hyzion-glow-legendary:
        0 0 18px rgba(177, 77, 255, 0.45),
        0 0 34px rgba(0, 226, 255, 0.22);

    /* Generous on containers, fully round on controls. */
    --hyzion-radius-card: 16px;
    --hyzion-radius-button: 999px;
    --hyzion-radius-input: 12px;

    /* Type. Outfit sets display and UI; Inter carries body copy. */
    --hyzion-font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hyzion-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

    /* Chrome */
    --hyzion-nav-height: 84px;
    --hyzion-hero-min-height: 560px;
    --hyzion-hero-logo-width: 420px;
}

/* Honour a reader who has asked for less motion, rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- Page ------------------------------------------------------------------------------ */

html,
body,
body.pushable > .pusher {
    /*
     * The inherited sheet paints `body.pushable > .pusher` as well as body, and the pusher
     * sits on top — so setting body alone leaves a near-white page showing around the cards.
     */
    background-color: var(--hyzion-bg) !important;
}

body {
    /*
     * Two very wide, very low-opacity pools of light. They read as ambient energy in the room
     * rather than as gradients on a box, which is the whole difference between "arcane" and
     * "gamer RGB".
     */
    background-image:
        radial-gradient(ellipse 80% 50% at 15% -10%, rgba(74, 29, 122, 0.55), transparent 70%),
        radial-gradient(ellipse 70% 45% at 90% 0%, rgba(0, 226, 255, 0.10), transparent 70%);
    background-attachment: fixed;
    color: var(--hyzion-text);
    font-family: var(--hyzion-font-body);
    -webkit-font-smoothing: antialiased;
}

body.pushable > .pusher {
    /* Transparent so the body's ambient light shows through rather than being covered. */
    background: transparent !important;

    /*
     * Fomantic clips the pusher with `overflow: hidden` so the sliding sidebar cannot produce
     * a horizontal scrollbar. That also makes the pusher a scroll container, which silently
     * disqualifies `position: sticky` inside it — the navigation bar simply scrolls away
     * instead of sticking, with no error anywhere to explain why. `clip` does the same
     * clipping without creating the scroll container.
     *
     * The `:not(.overflowing)` is not decoration — Fomantic's own rule carries it, and
     * without it this selector is a specificity short of winning.
     */
    overflow: clip;
}

body.pushable > .pusher:not(.overflowing) {
    overflow: clip;
}

/* ---- Type ------------------------------------------------------------------------------ */

h1, h2, h3, h4, h5,
.ui.header,
.ui.menu .item,
.ui.button,
.ui.statistic > .value {
    font-family: var(--hyzion-font-display) !important;
}

h1, h2, h3, h4, h5,
.ui.header {
    color: var(--hyzion-text) !important;
    font-weight: 700;
    /* Tight rather than airy: display type at this weight sets better closed up. */
    letter-spacing: -0.01em;
}

h1, .ui.huge.header {
    font-size: 2.6rem;
    line-height: 1.15;
}

a {
    color: var(--hyzion-secondary);
    text-decoration: none;
    transition: color 140ms ease;
}

a:hover {
    color: var(--hyzion-secondary-bright);
}

.text-muted,
.ui.sub.header,
small {
    color: var(--hyzion-text-muted) !important;
}

/* ---- Surfaces -------------------------------------------------------------------------- */

.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.menu,
.ui.table,
.ui.form,
.ui.accordion,
.ui.popup,
.ui.modal {
    background-color: var(--hyzion-surface) !important;
    border: 1px solid var(--hyzion-tint) !important;
    border-radius: var(--hyzion-radius-card) !important;
    color: var(--hyzion-text) !important;
    box-shadow: none !important;
    background-image: none;
}

.ui.segment {
    padding: 1.75rem;
}

/*
 * Cards carry no padding of their own — Fomantic puts it on `.content`, and setting both
 * insets the text twice. So the roomier padding goes where the padding already was.
 */
.ui.card > .content,
.ui.cards > .card > .content {
    padding: 1.5rem;
    border-top: 1px solid var(--hyzion-tint) !important;
}

.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
    border-top: none !important;
}

/*
 * Hover is a border brightening and a one-pixel lift, not a bloom. The card is a surface the
 * cursor is over, not a thing that has powered up.
 */
.ui.card,
.ui.cards > .card {
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.ui.card:hover,
.ui.cards > .card:hover {
    border-color: var(--hyzion-tint-strong) !important;
    background-color: var(--hyzion-surface-raised) !important;
    transform: translateY(-2px);
}

.ui.raised.segment {
    border-color: var(--hyzion-tint-strong) !important;
}

/*
 * Text inside cards and segments is coloured explicitly by Fomantic (roughly rgba(0,0,0,.87)),
 * so colouring only the container never reaches it.
 */
.ui.card,
.ui.card .content,
.ui.card .content .header,
.ui.card .content .description,
.ui.card .content p,
.ui.cards > .card .content,
.ui.segment,
.ui.segment p,
.ui.list .item,
.ui.list .item .content,
.ui.list .item .header,
.ui.statistic > .value,
.ui.statistic > .label,
.ui.table td,
.ui.feed .event .content {
    color: var(--hyzion-text) !important;
}

.ui.card .content .meta,
.ui.card .meta,
.ui.list .item .description,
.ui.feed .event .content .date,
.ui.statistic > .label {
    /* Timestamps and counts: dimmer than body copy, but still comfortably legible. */
    color: var(--hyzion-text-muted) !important;
}

.ui.card .content a:not(.ui.button),
.ui.segment a:not(.ui.button) {
    color: var(--hyzion-secondary) !important;
}

/* ---- Buttons --------------------------------------------------------------------------- */

.ui.button {
    border-radius: var(--hyzion-radius-button);
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.85em 1.6em;
    transition: box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease,
        border-color 140ms ease, color 140ms ease;
}

.ui.primary.button {
    background: linear-gradient(135deg, var(--hyzion-primary-deep), var(--hyzion-primary));
    border: 1px solid transparent;
    color: #fff;
}

.ui.primary.button:hover,
.ui.primary.button:focus {
    background: linear-gradient(135deg, var(--hyzion-primary), var(--hyzion-secondary));
    box-shadow: var(--hyzion-glow-active);
    /* Deliberately small: a button that leaps is a button that feels cheap. */
    transform: translateY(-1px);
}

/*
 * The default button is an outline, following the accent. Filled grey blocks next to a
 * gradient primary is what makes a dark theme look assembled rather than designed.
 */
.ui.button:not(.primary):not(.negative):not(.positive) {
    background-color: transparent;
    color: var(--hyzion-text);
    border: 1px solid var(--hyzion-tint-strong);
}

.ui.button:not(.primary):not(.negative):not(.positive):hover {
    background-color: var(--hyzion-tint-soft);
    border-color: var(--hyzion-primary);
    color: var(--hyzion-text);
}

.ui.negative.button {
    background-color: var(--hyzion-danger);
    color: #24101a;
}

.ui.positive.button {
    background-color: var(--hyzion-success);
    color: #0e2a20;
}

/*
 * "Forgot password?" and "Register" are laid out with Fomantic's negative and positive
 * classes, which the palette above painted alarm-red and success-green. Neither is a
 * destructive or a confirming action, and shouting at that volume next to the real primary
 * action is worse than the stock theme was. They become quiet secondary buttons; the semantic
 * colours stay available for actual alerts.
 */
.ui.negative.button:not([type="submit"]),
.ui.positive.button:not([type="submit"]) {
    background-color: transparent !important;
    color: var(--hyzion-text-muted) !important;
    border: 1px solid var(--hyzion-tint) !important;
    box-shadow: none !important;
}

.ui.negative.button:not([type="submit"]):hover,
.ui.positive.button:not([type="submit"]):hover {
    color: var(--hyzion-text) !important;
    border-color: var(--hyzion-primary) !important;
}

/* ---- Inputs ---------------------------------------------------------------------------- */

.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.form select,
.ui.input > input,
.ui.selection.dropdown {
    background-color: var(--hyzion-bg-elevated) !important;
    border: 1px solid var(--hyzion-tint) !important;
    border-radius: var(--hyzion-radius-input) !important;
    color: var(--hyzion-text) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input > input:focus {
    border-color: var(--hyzion-secondary) !important;
    box-shadow: var(--hyzion-glow-active) !important;
}

::placeholder {
    color: var(--hyzion-text-dim) !important;
}

/* ---- Form labels ------------------------------------------------------------------------ */

/*
 * Fomantic paints labels `rgba(0,0,0,.87)` unless the form is marked `inverted`, which ours are
 * not — so every field label on the site was near-black on a near-black panel, about 1.3:1.
 * Styling the inputs was never enough: the words telling you what to type into them were the
 * part that had gone missing.
 *
 * The selectors mirror Fomantic's own, including the `:not()`s, because those carry specificity
 * and a shorter selector loses to them however late it is loaded.
 */
.ui.form:not(.inverted) .field > label:not(.button),
.ui.form .grouped.fields > label,
.ui.form .inline.field > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields > label,
.ui.form .field > p,
.ui.checkbox label,
.ui.checkbox + label {
    color: var(--hyzion-text);
}

/* A required field's asterisk is the one place the danger colour is right on a form. */
.ui.form .required.field > label:after {
    color: var(--hyzion-danger);
}

/*
 * The checkbox itself is a white square by default, which on this palette reads as a hole in
 * the page rather than as a control.
 */
.ui.checkbox label:before,
.ui.checkbox .box:before {
    background-color: var(--hyzion-bg-elevated) !important;
    border: 1px solid var(--hyzion-tint-strong) !important;
    border-radius: 5px;
}

.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:checked ~ .box:before {
    background-color: var(--hyzion-primary) !important;
    border-color: var(--hyzion-primary) !important;
}

.ui.checkbox label:after,
.ui.checkbox .box:after,
.ui.checkbox input:checked ~ label:after {
    color: #fff !important;
}

.ui.checkbox:hover label:before,
.ui.checkbox:hover .box:before {
    border-color: var(--hyzion-primary) !important;
}

/* ---- Navigation ------------------------------------------------------------------------ */

/*
 * The bar floats over the hero rather than sitting above it, and only acquires a surface once
 * the page has scrolled — `is-scrolled` is added by the theme's own script. Transparent over
 * artwork is the single change that most separates this from a stock NamelessMC install.
 */
#navbar.ui.menu {
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: var(--hyzion-nav-height);
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none;
    transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}

#navbar.ui.menu.is-scrolled {
    background-color: rgba(18, 10, 31, 0.86) !important;
    border-bottom: 1px solid var(--hyzion-tint) !important;
    backdrop-filter: blur(14px);
}

#navbar.ui.menu > .ui.container {
    min-height: var(--hyzion-nav-height);
    align-items: center;
}

#navbar .item {
    color: var(--hyzion-text) !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8em 1.4em;
    border-radius: 12px;
    transition: background-color 140ms ease, color 140ms ease;
}

#navbar .item:hover,
#navbar .active.item {
    background-color: var(--hyzion-tint-soft) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#navbar .active.item {
    /* The marker is a wash plus the accent, not a filled block or an underline. */
    background-color: var(--hyzion-tint) !important;
}

/* Menus that are not the navigation bar keep a surface. */
.ui.menu:not(#navbar) .item {
    color: var(--hyzion-text-muted) !important;
}

.ui.menu:not(#navbar) .item:hover,
.ui.menu:not(#navbar) .active.item {
    color: var(--hyzion-text) !important;
    background-color: var(--hyzion-tint-soft) !important;
}

.ui.menu:not(#navbar) .active.item {
    box-shadow: inset 0 -2px 0 0 var(--hyzion-secondary);
}

.ui.dropdown .menu {
    background-color: var(--hyzion-bg-elevated) !important;
    border: 1px solid var(--hyzion-tint) !important;
    border-radius: var(--hyzion-radius-card) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

.ui.dropdown .menu > .item {
    color: var(--hyzion-text) !important;
}

.ui.dropdown .menu > .item:hover {
    background-color: var(--hyzion-tint-soft) !important;
}

/* ---- Hero ------------------------------------------------------------------------------ */

/*
 * Full bleed, and pulled up under the navigation so the bar floats on the artwork. The
 * background stack itself is generated in template_settings/vars.php — deliberately not
 * !important here, because an !important would beat the generated rule, which is exactly the
 * bug that made the site banner from Layout → Images do nothing on this theme.
 */
.ui.masthead {
    position: relative;
    margin-top: calc(var(--hyzion-nav-height) * -1);
    padding-top: calc(var(--hyzion-nav-height) + 4rem);
    padding-bottom: 4rem;
    min-height: var(--hyzion-hero-min-height);
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(115deg, rgba(10, 6, 18, 0.92) 30%, rgba(10, 6, 18, 0.55) 100%),
        radial-gradient(ellipse 60% 120% at 20% 50%, rgba(122, 43, 255, 0.75), transparent 70%),
        radial-gradient(ellipse 50% 100% at 85% 40%, rgba(0, 226, 255, 0.22), transparent 70%),
        linear-gradient(180deg, var(--hyzion-nexus-violet), var(--hyzion-bg));
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 1px solid var(--hyzion-tint);
    border-radius: 0;
    margin-bottom: 3rem;
    overflow: hidden;
}

/* A pool of accent light rising from the floor of the hero, under the content. */
.ui.masthead::after {
    content: '';
    position: absolute;
    inset: auto 0 -55% 0;
    height: 90%;
    background: radial-gradient(ellipse 55% 100% at 50% 100%, var(--hyzion-tint), transparent 70%);
    pointer-events: none;
}

.ui.masthead > .ui.container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hyzion-hero-content {
    max-width: 44rem;
}

.hyzion-hero-eyebrow {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.45em 1.1em;
    border: 1px solid var(--hyzion-tint-strong);
    border-radius: 999px;
    background-color: var(--hyzion-tint-soft);
    color: var(--hyzion-text);
    font-family: var(--hyzion-font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui.masthead h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
}

.hyzion-hero-tagline {
    margin: 0 0 2rem;
    max-width: 34rem;
    color: var(--hyzion-text-muted) !important;
    font-size: 1.15rem;
    line-height: 1.6;
}

.hyzion-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hyzion-hero-actions .ui.button {
    margin: 0;
    font-size: 1.02rem;
}

/* Centred alignment is a theme setting; these are the pieces it moves. */
.ui.masthead.hyzion-hero-centred .hyzion-hero-content {
    margin: 0 auto;
    text-align: center;
}

.ui.masthead.hyzion-hero-centred .hyzion-hero-tagline {
    margin-left: auto;
    margin-right: auto;
}

.ui.masthead.hyzion-hero-centred .hyzion-hero-actions {
    justify-content: center;
}

/* The server-status block the base theme puts opposite the title. */
.ui.masthead .connect-server {
    background: rgba(18, 10, 31, 0.62) !important;
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

/* ---- Showcase hero --------------------------------------------------------------------- */

/*
 * The server-landing arrangement: a counter, the logo, a counter.
 *
 * The middle column is `auto` and the two sides are equal fractions, which is what keeps the
 * logo optically centred when only one side has a card in it — the empty slot still claims its
 * share. Centring by `margin: auto` instead would let a lone counter shove the logo sideways.
 */
.hyzion-showcase {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.hyzion-showcase-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    min-width: 0;
}

.hyzion-showcase-main h1 {
    margin: 0;
}

.hyzion-showcase-main .hyzion-hero-tagline {
    margin: 0;
}

.hyzion-showcase-logo {
    display: block;
    width: 100%;
    max-width: var(--hyzion-hero-logo-width);
    height: auto;
    /* The artwork sits on the hero's own light, so it gets a shadow rather than a glow —
       a glow behind a logo that already has one reads as a printing error. */
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

.hyzion-showcase-side {
    display: flex;
    min-width: 0;
}

.hyzion-showcase-side-start {
    justify-content: flex-start;
}

.hyzion-showcase-side-end {
    justify-content: flex-end;
}

.hyzion-showcase-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
    background-color: rgba(18, 10, 31, 0.62);
    backdrop-filter: blur(10px);
}

.hyzion-showcase-counter-value {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--hyzion-text);
    font-family: var(--hyzion-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.hyzion-showcase-counter-value i {
    color: var(--hyzion-primary);
    font-size: 1rem;
}

/* The player count is the one number on the page that is true right now, so it says so. */
.hyzion-showcase-counter-value i.hyzion-showcase-live {
    color: #3fd07f;
    font-size: 0.5rem;
    animation: hyzion-showcase-pulse 2.4s ease-in-out infinite;
}

@keyframes hyzion-showcase-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hyzion-showcase-counter-label {
    color: var(--hyzion-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A button rather than a span: it is clickable, so it should be reachable by keyboard too. */
.hyzion-showcase-ip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65em 1.3em;
    border: 1px solid var(--hyzion-tint-strong);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.94);
    color: #1a1030;
    font-family: var(--hyzion-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hyzion-showcase-ip:hover {
    transform: translateY(-1px);
    box-shadow: var(--hyzion-glow-active);
}

.hyzion-showcase-ip i {
    opacity: 0.55;
}

.hyzion-showcase-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.hyzion-showcase-actions .ui.button {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.02rem;
}

/* ---- Homepage blocks ------------------------------------------------------------------- */

/*
 * The homepage is a stack of sections rather than one grid. Spacing between them is the only
 * thing holding the rhythm, so it lives here once instead of on each block.
 */
.hyzion-block {
    margin-bottom: 4rem;
}

.hyzion-block:last-child {
    margin-bottom: 1rem;
}

.hyzion-block-head {
    margin-bottom: 1.75rem;
    max-width: 46rem;
}

.hyzion-block-head h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
}

.hyzion-block-sub {
    margin: 0;
    color: var(--hyzion-text-muted) !important;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Features */

.hyzion-feature {
    height: 100%;
    padding: 1.75rem;
    background-color: var(--hyzion-surface);
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.hyzion-feature:hover {
    border-color: var(--hyzion-tint-strong);
    background-color: var(--hyzion-surface-raised);
    transform: translateY(-2px);
}

.hyzion-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    /* The icon tile is the one place a gradient earns its keep: it is the only mark. */
    background: linear-gradient(135deg, var(--hyzion-primary-deep), var(--hyzion-primary));
    color: #fff;
    font-size: 1.25rem;
}

.hyzion-feature h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.hyzion-feature p {
    margin: 0;
    color: var(--hyzion-text-muted) !important;
    line-height: 1.6;
}

/* News */

.hyzion-news-card.ui.fluid.card {
    height: 100%;
}

/*
 * Clamped in the grid only. News posts are written at any length, and one long post next to
 * three short ones makes a grid look broken — the full post is a click away. The sidebar
 * layout is the classic homepage, where reading the whole post in place is the point.
 */
.hyzion-news-grid .hyzion-news-card .description {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Statistics */

.hyzion-stat-row {
    display: grid;
    /*
     * 140px rather than something roomier so a phone gets two tiles per row. A single column
     * of four numbers reads as a list; two columns still read as a set of statistics.
     */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.hyzion-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    background-color: var(--hyzion-surface);
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
    text-align: center;
}

.hyzion-stat-icon {
    color: var(--hyzion-primary);
    font-size: 1.1rem;
}

.hyzion-stat-value {
    font-family: var(--hyzion-font-display);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hyzion-text);
}

.hyzion-stat-label {
    color: var(--hyzion-text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Call to action */

.hyzion-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2.75rem;
    border: 1px solid var(--hyzion-tint-strong);
    border-radius: var(--hyzion-radius-card);
    /* Lit from the left, so the button at the right end sits on the quiet side. */
    background:
        radial-gradient(ellipse 70% 160% at 0% 50%, var(--hyzion-tint), transparent 70%),
        var(--hyzion-surface);
}

.hyzion-cta-copy {
    max-width: 40rem;
}

.hyzion-cta h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.hyzion-cta p {
    margin: 0;
    color: var(--hyzion-text-muted) !important;
    line-height: 1.6;
}

.hyzion-cta .ui.button {
    margin: 0;
    font-size: 1.05rem;
}

/* ---- Dividers: the rune line ----------------------------------------------------------- */

.ui.divider,
hr {
    border-top: 1px solid transparent !important;
    border-bottom: none !important;
    background-image: linear-gradient(
        to right,
        transparent,
        var(--hyzion-tint) 15%,
        var(--hyzion-primary) 50%,
        var(--hyzion-tint) 85%,
        transparent
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: center;
    height: 1px;
    color: var(--hyzion-text-muted) !important;
}

.ui.horizontal.divider {
    background-image: none;
    color: var(--hyzion-text-muted) !important;
}

/* ---- Tables ---------------------------------------------------------------------------- */

.ui.table thead th {
    background-color: var(--hyzion-bg-elevated) !important;
    color: var(--hyzion-text) !important;
    border-bottom: 1px solid var(--hyzion-tint) !important;
    font-family: var(--hyzion-font-display);
}

.ui.table tr td {
    border-top: 1px solid var(--hyzion-tint) !important;
    color: var(--hyzion-text) !important;
}

.ui.table tbody tr:hover {
    background-color: var(--hyzion-tint-soft) !important;
}

/* ---- Messages -------------------------------------------------------------------------- */

.ui.message {
    background-color: var(--hyzion-bg-elevated) !important;
    color: var(--hyzion-text) !important;
    border: 1px solid var(--hyzion-tint) !important;
    border-radius: var(--hyzion-radius-card) !important;
    box-shadow: none !important;
}

.ui.negative.message { border-left: 3px solid var(--hyzion-danger) !important; }
.ui.positive.message,
.ui.success.message { border-left: 3px solid var(--hyzion-success) !important; }
.ui.warning.message { border-left: 3px solid var(--hyzion-warning) !important; }
.ui.info.message    { border-left: 3px solid var(--hyzion-secondary) !important; }

/* ---- Avatars --------------------------------------------------------------------------- */

/*
 * Hytale renders arrive square with transparent margins. A ring in the accent tint gives them
 * an edge on a dark surface without cropping the character.
 */
.ui.avatar.image,
img.avatar {
    border: 1px solid var(--hyzion-tint);
    background-color: var(--hyzion-bg-elevated);
}

/* ---- Profile identity card -------------------------------------------------------------- */

/*
 * The Hytale character, directly under the profile header. Given its own surface rather than
 * a row in the About list because it is the one thing on this page that is attested by
 * another system — everything else here is self-reported.
 */
.hyzion-identity-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.75rem;
    background:
        radial-gradient(ellipse 60% 160% at 0% 50%, var(--hyzion-tint), transparent 70%),
        var(--hyzion-surface);
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
}

.hyzion-identity-render {
    width: 84px;
    height: auto;
    /* The render arrives with transparent margins; a plate keeps it from floating. */
    padding: 0.35rem;
    background-color: var(--hyzion-bg-elevated);
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
}

.hyzion-identity-label {
    display: block;
    color: var(--hyzion-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hyzion-identity-body h3 {
    margin: 0.15rem 0 0.6rem;
    font-size: 1.5rem;
}

.hyzion-identity-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hyzion-tag {
    padding: 0.3em 0.85em;
    border: 1px solid var(--hyzion-tint);
    border-radius: 999px;
    background-color: var(--hyzion-tint-soft);
    color: var(--hyzion-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.hyzion-tag-verified {
    border-color: rgba(118, 230, 178, 0.35);
    color: var(--hyzion-success);
}

.hyzion-tag-attested {
    border-color: rgba(0, 226, 255, 0.35);
    color: var(--hyzion-secondary);
}

/*
 * Stale and unconsented are amber rather than red on purpose: neither is a refusal, and
 * colouring them like one would tell a member they have been denied something when in fact
 * nobody has asked them yet.
 */
.hyzion-tag-stale,
.hyzion-tag-unconsented {
    border-color: rgba(255, 159, 67, 0.35);
    color: var(--hyzion-warning);
}

.hyzion-tag-denied {
    border-color: rgba(255, 107, 126, 0.35);
    color: var(--hyzion-danger);
}

.hyzion-identity-empty {
    justify-content: space-between;
}

.hyzion-identity-empty .hyzion-identity-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

@media (max-width: 767px) {
    .hyzion-identity-card {
        flex-direction: column;
        text-align: center;
    }

    .hyzion-identity-tags {
        justify-content: center;
    }
}

/* ---- Sign-in --------------------------------------------------------------------------- */

/*
 * The Continue with Discord button is supplied by the Hyzion module, which injects it into
 * the theme's existing provider list. It is given the legendary glow because it is the
 * primary route into the site; the password form below it is the recovery path.
 */
.ui.fluid.button[href*="/hyzion/login"] {
    box-shadow: var(--hyzion-glow-legendary);
    border: none;
    font-size: 1.05em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.ui.fluid.button[href*="/hyzion/login"]:hover {
    filter: brightness(1.1);
}

/* ---- Footer ---------------------------------------------------------------------------- */

#footer.ui.inverted.vertical.footer.segment {
    margin-top: 4rem;
    padding: 3.5rem 0 2rem;
    background-color: var(--hyzion-bg-elevated) !important;
    border: none !important;
    border-top: 1px solid var(--hyzion-tint) !important;
    border-radius: 0 !important;
    color: var(--hyzion-text-muted);
}

#footer .ui.inverted.header {
    color: var(--hyzion-text) !important;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

#footer .ui.inverted.link.list .item,
#footer .ui.inverted.link.list a.item {
    color: var(--hyzion-text-muted) !important;
    padding: 0.3rem 0;
}

#footer .ui.inverted.link.list a.item:hover {
    color: var(--hyzion-secondary) !important;
}

#footer .ui.divided.grid > .column {
    /* The base theme's dividers are opaque white rules; tint them like everything else. */
    box-shadow: -1px 0 0 0 var(--hyzion-tint) !important;
}

/*
 * The light/dark switch. Inherited as a black track with a white ball and a gold moon, which
 * on this palette reads as a stray white blob in the corner of the footer rather than as a
 * control. Same shape, this theme's materials.
 */
#footer .darkmode-toggle-label {
    background-color: var(--hyzion-surface);
    border: 1px solid var(--hyzion-tint);
    padding: 4px 6px;
}

#footer .darkmode-ball {
    background: linear-gradient(135deg, var(--hyzion-primary-deep), var(--hyzion-primary));
    top: 3px;
    left: 3px;
    height: 20px;
    width: 20px;
}

#footer .darkmode-toggle-label .fa-moon,
#footer .darkmode-toggle-label .fa-sun {
    /* Under the ball for half its travel, so they need to stay quiet either way. */
    position: relative;
    z-index: 1;
    color: var(--hyzion-text-muted);
    font-size: 0.72rem;
}

/* ---- Cookie banner --------------------------------------------------------------------- */

.cc-window {
    background-color: var(--hyzion-bg-elevated) !important;
    color: var(--hyzion-text) !important;
    border: 1px solid var(--hyzion-tint);
    border-radius: var(--hyzion-radius-card);
}

.cc-window .cc-btn {
    background-color: var(--hyzion-primary) !important;
    color: #fff !important;
    border-radius: var(--hyzion-radius-button);
}

/* ---- Narrow screens -------------------------------------------------------------------- */

@media (max-width: 767px) {
    :root {
        --hyzion-nav-height: 68px;
        --hyzion-hero-min-height: 420px;
    }

    .ui.masthead {
        padding-top: calc(var(--hyzion-nav-height) + 2.5rem);
        padding-bottom: 2.5rem;
        text-align: center;
    }

    .hyzion-hero-content {
        margin: 0 auto;
    }

    .hyzion-hero-actions {
        justify-content: center;
    }

    /*
     * The counters drop below the logo rather than beside it. Ordered so the logo still comes
     * first: on a phone the artwork is the thing worth the top of the screen, not the numbers.
     */
    .hyzion-showcase {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hyzion-showcase-main {
        order: -1;
    }

    .hyzion-showcase-side {
        justify-content: center;
    }

    .hyzion-showcase-counter {
        width: 100%;
    }
}

/* Tablets keep the three columns but cannot spare the full gap. */
@media (min-width: 768px) and (max-width: 991px) {
    .hyzion-showcase {
        gap: 1rem;
    }

    .hyzion-showcase-counter {
        padding: 0.8rem 1rem;
    }

    .hyzion-showcase-counter-value {
        font-size: 1.35rem;
    }
}