/* =====================================================================================================
   NeuroShrub — player game screens: dashboard command center, hardware assets, infrastructure visuals,
   contracts, the compute exchange, leaderboard podium, referrals network and automation.
   ===================================================================================================== */

.min-w-0 { min-width: 0; }

/* =====================================================================================================
   Dashboard
   ===================================================================================================== */
.dash-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.dash-hero .ai-grid-floor { height: 70%; opacity: .55; }
.dash-company {
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem) !important;
    letter-spacing: .08em !important;
    background: linear-gradient(90deg, #fff 0%, var(--ai-violet-pale) 55%, var(--ai-violet-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    word-break: break-word;
}
.dash-xp { max-width: 30rem; }
.dash-status {
    position: relative;
    display: grid;
    gap: .55rem;
    padding: 1rem 1.1rem;
    background: rgba(9, 6, 17, .7);
    border: 1px solid var(--ai-border);
    border-inline-start: 2px solid var(--ai-violet-soft);
}
.dash-status__row { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ai-text-muted); }
.dash-status__row strong { margin-inline-start: auto; color: var(--ai-text); font-family: var(--ai-font-display); letter-spacing: .06em; text-transform: uppercase; }
.dash-status__flow { width: 100%; height: 42px; margin-top: .25rem; opacity: .9; }

.ops-core .card-body { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
.ops-core__visual { position: relative; }
.ops-core__visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(124, 58, 237, .35)); }
@media (max-width: 575.98px) {
    .ops-core .card-body { grid-template-columns: 1fr; }
    .ops-core__visual { max-width: 10rem; margin-inline: auto; }
}
.milestone { padding: .6rem .75rem; background: rgba(13, 9, 24, .55); border: 1px solid var(--ai-border-soft); height: 100%; }
.tx-feed .list-group-item { border-color: var(--ai-border-soft); }

/* Running contracts (dashboard + jobs). The column may shrink below its content (minmax(0, 1fr), not the implicit auto column): a long
   contract name is then cut with an ellipsis instead of widening the card and the page (and pushing the Collect button out of view). */
.run-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding-top: .5rem; }
.run-item__name { max-width: 100%; }
.run-item { position: relative; padding: .65rem .7rem; background: rgba(13, 9, 24, .55); border: 1px solid var(--ai-border-soft); border-inline-start: 2px solid var(--ai-compute); }
.run-item.is-ready { border-inline-start-color: var(--ai-success); background: linear-gradient(90deg, rgba(52, 211, 153, .1), rgba(13, 9, 24, .55) 60%); }
.run-item__icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; color: var(--ai-compute); border: 1px solid rgba(129, 140, 248, .45); background: rgba(129, 140, 248, .1); }
.run-item__processing { display: inline-block; width: 1.4rem; height: 2px; vertical-align: middle; margin-inline-end: .35rem; background: linear-gradient(90deg, transparent, var(--ai-compute), transparent); background-size: 200% 100%; position: relative; overflow: hidden; }
.run-item__processing::after { content: ""; position: absolute; inset: 0; background: var(--ai-violet-pale); width: 30%; animation: ai-scan 1.2s linear infinite; }

/* Production strip used on Servers + Infrastructure */
.ops-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--ai-border);
    background: var(--ai-panel);
}
.ops-strip__cell { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border-inline-end: 1px solid var(--ai-border-soft); border-top: 2px solid var(--ai-accent, var(--ai-violet-bright)); }
.ops-strip__cell:last-of-type { border-inline-end: 0; }
.ops-strip__value { font-family: var(--ai-font-display); font-size: 1.2rem; font-weight: 700; color: var(--ai-text); font-variant-numeric: tabular-nums; }
.ops-strip__value small { color: var(--ai-text-muted); font-size: .7em; }
.ops-strip__alert, .ops-strip__mods { grid-column: 1 / -1; margin: .75rem; }
@media (max-width: 767.98px) {
    .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-strip__cell:nth-of-type(2n) { border-inline-end: 0; }
    .ops-strip__cell:nth-of-type(-n + 2) { border-bottom: 1px solid var(--ai-border-soft); }
}

/* In-page section navigation */
.section-nav { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.section-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    font-family: var(--ai-font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ai-text-muted);
    border: 1px solid var(--ai-border);
    background: rgba(13, 9, 24, .6);
    transition: var(--ai-transition);
}
.section-nav a:hover, .section-nav a:focus-visible { color: #fff; border-color: var(--ai-violet-soft); background: rgba(124, 58, 237, .16); }
.section-nav .bi { color: var(--ai-violet-soft); }

/* =====================================================================================================
   Hardware assets (servers)
   ===================================================================================================== */
.ai-asset__art {
    position: relative;
    padding: .9rem 1rem .4rem;
    background:
        radial-gradient(70% 90% at 50% 100%, rgba(124, 58, 237, .25), transparent 70%),
        linear-gradient(180deg, rgba(9, 6, 17, .6), transparent);
    border-bottom: 1px solid var(--ai-border-soft);
}
.ai-asset__art::after { content: ""; position: absolute; inset-inline-start: 1rem; inset-inline-end: 1rem; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--ai-violet-soft), transparent); opacity: .6; }
.ai-asset__name { font-family: var(--ai-font-display); font-size: 1rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ai-text); }

.server-art { display: block; width: 100%; max-height: 7rem; color: var(--tier); }
.server-art .sa-frame { fill: #0d0918; stroke: color-mix(in srgb, var(--tier) 65%, transparent); stroke-width: 1.5; }
.server-art .sa-blade { fill: #171026; stroke: #2c2145; }
.server-art .sa-led { fill: var(--tier); }
.server-art .sa-vent { stroke: #2c2145; stroke-width: 2; }
.server-art .sa-bar { fill: color-mix(in srgb, var(--tier) 75%, #4c1d95); transform-box: fill-box; transform-origin: 50% 100%; animation: ai-bar 1.9s ease-in-out infinite; }
.server-art .sa-ring { fill: none; stroke: var(--tier); stroke-width: 2; }
.server-art .sa-core { fill: var(--tier); filter: drop-shadow(0 0 6px var(--tier)); }
@keyframes ai-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.ai-level { display: flex; align-items: baseline; gap: .15rem; padding: .25rem .55rem; flex: none; border: 1px solid rgba(139, 92, 246, .55); background: rgba(124, 58, 237, .14); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.ai-level__label { font-family: var(--ai-font-display); font-size: .6rem; font-weight: 700; letter-spacing: .18em; color: var(--ai-violet-soft); margin-inline-end: .2rem; }
.ai-level__value { font-family: var(--ai-font-display); font-size: 1.45rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 12px rgba(139, 92, 246, .8); }
.ai-level__max { font-size: .72rem; color: var(--ai-text-muted); }
.ai-level--sm .ai-level__value { font-size: 1.15rem; }

.ai-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--ai-border-soft); border: 1px solid var(--ai-border-soft); }
.ai-specs > div { padding: .45rem .6rem; background: var(--ai-panel); }
.ai-specs__wide { grid-column: 1 / -1; }
.ai-specs dt { font-family: var(--ai-font-display); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ai-text-muted); }
.ai-specs dd { margin: 0; font-family: var(--ai-font-display); font-size: 1rem; font-weight: 600; color: var(--ai-text); font-variant-numeric: tabular-nums; }
.ai-specs dd small { color: var(--ai-text-muted); font-weight: 500; }
.ai-next { display: inline-block; margin-inline-start: .3rem; font-size: .8em; color: var(--ai-violet-soft); }
.ai-next--muted { color: var(--ai-text-muted); }
.ai-price { font-family: var(--ai-font-display); font-weight: 700; font-size: 1.05rem; color: var(--ai-text); white-space: nowrap; padding: .2rem .5rem; border: 1px solid var(--ai-border); background: rgba(13, 9, 24, .7); }

.building-icon { color: var(--ai-accent, var(--ai-violet-soft)); }
.hw-row { transition: background-color .3s ease; }
.hw-row:hover { background: rgba(124, 58, 237, .06); }
.hw-row.ai-upgraded { position: relative; }

/* =====================================================================================================
   Infrastructure visuals
   ===================================================================================================== */
.infra-hero-art { width: clamp(12rem, 9rem + 14vw, 24rem); }
.dc-visual {
    position: relative;
    min-height: 18rem;
    padding: 1.25rem;
    border: 1px solid var(--ai-border);
    border-top: 2px solid var(--ai-violet-bright);
    background:
        linear-gradient(90deg, rgba(9, 6, 17, .94) 0%, rgba(9, 6, 17, .75) 55%, rgba(20, 10, 40, .5)),
        url("../images/game/infrastructure/datacenter-hall.svg") center / cover no-repeat,
        var(--ai-panel);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.dc-visual__title { font-size: 1.5rem; margin: .2rem 0 1rem; }
.dc-visual__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; max-width: 26rem; }
.dc-visual__value { display: block; font-family: var(--ai-font-display); font-size: 1.6rem; font-weight: 700; color: var(--ai-text); line-height: 1.15; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.dc-visual__value small { font-size: .55em; color: var(--ai-text-muted); }

.energy-panel, .cooling-panel {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ai-border);
    border-inline-start: 2px solid var(--ai-energy);
    background: radial-gradient(60% 120% at 15% 50%, rgba(251, 191, 36, .1), transparent 70%), var(--ai-panel);
}
.energy-panel.is-strained { border-inline-start-color: var(--ai-danger); background: radial-gradient(60% 120% at 15% 50%, rgba(251, 113, 133, .12), transparent 70%), var(--ai-panel); }
.cooling-panel { border-inline-start-color: var(--ai-info); background: radial-gradient(60% 120% at 15% 50%, rgba(96, 165, 250, .1), transparent 70%), var(--ai-panel); }
.energy-stats__value { display: block; font-family: var(--ai-font-display); font-size: 1.3rem; font-weight: 700; color: var(--ai-text); font-variant-numeric: tabular-nums; }
.energy-stats__value small { color: var(--ai-text-muted); font-size: .65em; }

.gen-badge { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .3rem; font-family: var(--ai-font-display); font-weight: 700; color: #fff; background: var(--ai-gradient-primary); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.spec-option { padding: .7rem; border: 1px solid var(--ai-border); background: rgba(13, 9, 24, .55); transition: var(--ai-transition); }
.spec-option:hover { border-color: var(--ai-violet-soft); }

/* =====================================================================================================
   Contracts (jobs)
   ===================================================================================================== */
.contract { --contract: var(--ai-success); border-inline-start: 2px solid var(--contract) !important; }
.contract--medium { --contract: var(--ai-info); }
.contract--hard { --contract: var(--ai-warning); }
.contract--enterprise { --contract: var(--ai-danger); }
.contract--specialized, .contract--expert { --contract: var(--ai-reputation); }
.contract__ref { font-family: var(--ai-font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--ai-text-muted); text-transform: uppercase; }
.contract__name { font-family: var(--ai-font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-text); margin: .15rem 0; }
.contract__reward { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: .75rem 0 .5rem; padding: .55rem .7rem; background: linear-gradient(90deg, rgba(52, 211, 153, .1), transparent); border: 1px solid rgba(52, 211, 153, .3); }
.contract__reward-value { font-family: var(--ai-font-display); font-size: 1.25rem; font-weight: 700; color: var(--ai-success); font-variant-numeric: tabular-nums; }
.contract-rule { flex: 1 1 auto; height: 1px; min-width: 2rem; background: linear-gradient(90deg, var(--ai-border-strong), transparent); }

/* =====================================================================================================
   Compute exchange (market)
   ===================================================================================================== */
.exchange__price { font-family: var(--ai-font-display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 22px rgba(139, 92, 246, .55); }
.exchange__price small { font-size: .4em; color: var(--ai-text-muted); letter-spacing: .1em; }
.exchange__change { font-family: var(--ai-font-display); font-weight: 600; padding: .2rem .55rem; border: 1px solid currentColor; }
.exchange__change.is-up { color: var(--ai-success); background: rgba(52, 211, 153, .08); }
.exchange__change.is-down { color: var(--ai-danger); background: rgba(251, 113, 133, .08); }
.exchange__chart { position: relative; padding: .75rem .75rem .25rem; background: rgba(9, 6, 17, .6); border: 1px solid var(--ai-border-soft); }
.exchange__bracket { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ai-violet-soft); pointer-events: none; }
.exchange__bracket.tl { top: -1px; inset-inline-start: -1px; border-top-width: 2px; border-inline-start-width: 2px; }
.exchange__bracket.tr { top: -1px; inset-inline-end: -1px; border-top-width: 2px; border-inline-end-width: 2px; }
.exchange__bracket.bl { bottom: -1px; inset-inline-start: -1px; border-bottom-width: 2px; border-inline-start-width: 2px; }
.exchange__bracket.br { bottom: -1px; inset-inline-end: -1px; border-bottom-width: 2px; border-inline-end-width: 2px; }
.exchange__grid line { stroke: var(--ai-border); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.exchange__line { stroke: var(--ai-violet-soft); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .8)); }
.exchange__now { stroke: var(--ai-violet-pale); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.exchange__axis { display: flex; justify-content: space-between; color: var(--ai-text-muted); margin-top: .25rem; font-family: var(--ai-font-mono); font-size: .7rem; }
.exchange__stats strong { display: block; color: var(--ai-text); font-family: var(--ai-font-display); font-variant-numeric: tabular-nums; }
.tape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding-top: .4rem; font-family: var(--ai-font-mono); font-size: .78rem; }
.tape__row { display: grid; grid-template-columns: 1fr auto auto; gap: .9rem; padding: .35rem .2rem; border-bottom: 1px solid var(--ai-border-soft); }
.tape__row:last-child { border-bottom: 0; }

/* =====================================================================================================
   Leaderboard
   ===================================================================================================== */
.lb-hero-art { width: clamp(6rem, 4rem + 8vw, 11rem); filter: drop-shadow(0 0 30px rgba(251, 191, 36, .35)); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.podium__card {
    --medal: #cbd5e1;
    position: relative;
    text-align: center;
    padding: 1.4rem 1rem 0;
    border: 1px solid color-mix(in srgb, var(--medal) 45%, var(--ai-border));
    border-top: 2px solid var(--medal);
    background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--medal) 18%, transparent), transparent 70%), var(--ai-panel);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    overflow: hidden;
}
.podium__card--1 { --medal: #fbbf24; order: 2; padding-top: 2.4rem; box-shadow: inset 0 0 40px rgba(251, 191, 36, .12); }
.podium__card--2 { --medal: #cbd5e1; order: 1; }
.podium__card--3 { --medal: #d97706; order: 3; }
.podium__crown { position: absolute; top: .35rem; left: 50%; width: 3rem; transform: translateX(-50%); filter: drop-shadow(0 0 12px rgba(251, 191, 36, .6)); }
.podium__rank { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: .6rem; font-family: var(--ai-font-display); font-size: 1.3rem; font-weight: 700; color: #120a03; background: var(--medal); transform: rotate(45deg); box-shadow: 0 0 18px color-mix(in srgb, var(--medal) 60%, transparent); }
.podium__rank > span { transform: rotate(-45deg); }
.podium__name { font-size: 1.05rem; margin: 1rem 0 .15rem; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__value { font-family: var(--ai-font-display); font-size: 1.35rem; font-weight: 700; color: var(--medal); margin: .5rem 0 1rem; font-variant-numeric: tabular-nums; }
.podium__base { height: .5rem; margin: 0 -1rem; background: linear-gradient(90deg, transparent, var(--medal), transparent); opacity: .55; }
.podium__card--1 .podium__base { height: 2.4rem; }
.podium__card--2 .podium__base { height: 1.4rem; }
.podium__card.is-me { outline: 1px solid var(--ai-violet-soft); outline-offset: -4px; }
@media (max-width: 767.98px) {
    .podium { grid-template-columns: 1fr; }
    .podium__card { order: 0 !important; }
    .podium__card .podium__base { height: .4rem !important; }
}

.rank-badge { display: inline-grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .3rem; flex: none; font-family: var(--ai-font-display); font-weight: 700; color: var(--ai-text); border: 1px solid var(--ai-border); background: rgba(13, 9, 24, .7); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.rank-list__row { display: flex; align-items: center; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--ai-border-soft); transition: background-color .3s ease; }
.rank-list__row:last-child { border-bottom: 0; }
.rank-list__row:hover { background: rgba(124, 58, 237, .06); }

/* =====================================================================================================
   Referrals network
   ===================================================================================================== */
.ref-network { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; }
.ref-network__art { width: 100%; max-width: 24rem; margin-inline: auto; display: block; }
.ref-levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.ref-level { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--ai-border); background: var(--ai-panel); border-inline-start: 2px solid color-mix(in srgb, var(--ai-violet-soft) calc(100% - var(--depth, 0) * 18%), var(--ai-border)); margin-inline-start: calc(var(--depth, 0) * .9rem); transition: var(--ai-transition); }
.ref-level:hover { border-color: var(--ai-violet-soft); }
.ref-level::before { content: ""; position: absolute; inset-inline-start: -.95rem; top: -0.65rem; height: calc(50% + .65rem); width: .9rem; border-inline-start: 1px solid var(--ai-border-strong); border-bottom: 1px solid var(--ai-border-strong); }
.ref-level:first-child::before { display: none; }
.ref-level__tag { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; font-family: var(--ai-font-display); font-weight: 700; color: #fff; background: rgba(124, 58, 237, calc(.55 - var(--depth, 0) * .1)); border: 1px solid var(--ai-violet-soft); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ref-level__count { font-family: var(--ai-font-display); font-size: 1.3rem; font-weight: 700; color: var(--ai-text); line-height: 1; }
@media (max-width: 991.98px) { .ref-network { grid-template-columns: 1fr; } .ref-network__art { max-width: 16rem; } }
.ref-code { font-family: var(--ai-font-mono); font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 600; letter-spacing: .14em; color: #fff; text-shadow: 0 0 18px rgba(139, 92, 246, .7); }

/* =====================================================================================================
   Automation
   ===================================================================================================== */
.automation-module { border-inline-start: 2px solid var(--ai-border) !important; }
.automation-module.is-on { border-inline-start-color: var(--ai-success) !important; }
.exchange__stop-top { stop-color: var(--ai-violet-bright); stop-opacity: .45; }
.exchange__stop-bottom { stop-color: var(--ai-violet-bright); stop-opacity: 0; }