/* ══════════════════════════════════════════════════════════════════════════
   CHAIN REACTION — landing screen
   Same teal/amber-on-blue-black language as the Reactor itself, so the menu
   and the game read as one product rather than two.
   ══════════════════════════════════════════════════════════════════════════ */

root {
    /* Declared so no panel in this tree ever claims the OS pointer -- a hovered
       panel outranks Mouse.CursorType, and one that declares nothing still claims
       the default arrow. GameCursor draws the cursor instead. */
    cursor: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.rm-root {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Backdrop ─────────────────────────────────────────────────────────── */

.rm-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #04070d;
}

.rm-bg-glow {
    position: absolute;
    top: -30%; left: 10%;
    width: 80%;
    height: 140%;
    border-radius: 50%;
    background-color: rgba(20, 130, 130, 0.09);
    filter: blur(140px);
    animation: rm-breathe 11s ease-in-out infinite alternate;
}

@keyframes rm-breathe {
    0%   { transform: scale(1.00); opacity: 0.7; }
    100% { transform: scale(1.16); opacity: 1.0; }
}

/* Faint reactor lattice */
.rm-grid-bg {
    position: absolute;
    left: -90px;
    top: -90px;
    width: 3200px;
    height: 1900px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    transform-origin: center center;
    animation: rm-grid-drift 26s ease-in-out infinite alternate;
}

@keyframes rm-grid-drift {
    0%   { transform: scale(1.00) translateX(0px); }
    100% { transform: scale(1.07) translateX(-24px); }
}

.rm-gc, .rm-gc-lit, .rm-gc-hot {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    flex-shrink: 0;
    background-color: rgba(12, 22, 30, 0.55);
    border: 2px solid rgba(30, 48, 62, 0.55);
}

.rm-gc-lit {
    background-color: rgba(13, 44, 46, 0.55);
    border-color: rgba(45, 212, 191, 0.20);
    animation: rm-cell-pulse 5s ease-in-out infinite alternate;
}

.rm-gc-hot {
    background-color: rgba(58, 40, 10, 0.45);
    border-color: rgba(251, 191, 36, 0.20);
    animation: rm-cell-pulse 6.5s ease-in-out infinite alternate;
}

@keyframes rm-cell-pulse {
    0%   { opacity: 0.35; }
    100% { opacity: 1.00; }
}

.rm-particle {
    position: absolute;
    bottom: -12px;
    border-radius: 50%;
    animation: rm-rise linear infinite;
}

@keyframes rm-rise {
    0%   { transform: translateY(0px);     opacity: 0; }
    12%  {                                 opacity: 1; }
    100% { transform: translateY(-1200px); opacity: 0; }
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.rm-ui {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
}

.rm-left {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-left: 64px;
    pointer-events: none;
    animation: rm-enter 0.6s ease-out both;
}

.rm-center {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    height: 100%;
    pointer-events: none;
}

.rm-right {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding-right: 64px;
    pointer-events: none;
    animation: rm-enter 0.6s ease-out 0.12s both;
}

@keyframes rm-enter {
    0%   { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0px); }
}

/* ── Title block ──────────────────────────────────────────────────────── */

.rm-eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.55);
    margin-bottom: 8px;
}

.rm-title {
    font-size: 62px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 0.94;
    color: #e2f6f2;
    white-space: nowrap;
}

.rm-title.accent {
    color: #5eead4;
    text-shadow: 0px 0px 30px rgba(45, 212, 191, 0.45);
}

.rm-tagline {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.6);
}

.rm-stats {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 18px;
    border-radius: 12px;
    background-color: rgba(8, 15, 22, 0.7);
    border: 2px solid rgba(45, 212, 191, 0.16);
}

.rm-stat-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.rm-stat-icon { font-size: 15px; width: 22px; flex-shrink: 0; }

.rm-stat-val {
    font-size: 17px;
    font-weight: 900;
    color: #5eead4;
    white-space: nowrap;
}

.rm-stat-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.5);
    margin-left: auto;
    white-space: nowrap;
}

.rm-ver {
    margin-top: 26px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(100, 116, 139, 0.45);
}

/* ── Center card ──────────────────────────────────────────────────────── */

.rm-card {
    width: 100%;
    max-width: 620px;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 32px;
    border-radius: 16px;
    background-color: rgba(8, 14, 22, 0.94);
    border: 2px solid rgba(45, 212, 191, 0.24);
    box-shadow: 0px 0px 50px rgba(13, 148, 136, 0.14);
    pointer-events: all;
    animation: rm-card-in 0.32s ease-out both;
}

@keyframes rm-card-in {
    0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
    100% { opacity: 1; transform: translateY(0px) scale(1.0); }
}

.rm-card-hd {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #5eead4;
    margin-bottom: 6px;
}

.rm-blurb {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.66);
}

.rm-empty {
    font-size: 13px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.5);
    padding: 26px 0px;
    text-align: center;
}

.rm-section-title {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.7);
}

/* ── Storage tank ─────────────────────────────────────────────────────── */

.rm-tank {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: rgba(6, 26, 28, 0.7);
    border: 2px solid rgba(45, 212, 191, 0.25);
}

.rm-tank-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.rm-tank-lbl {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: rgba(153, 246, 228, 0.65);
}

.rm-tank-val {
    font-size: 12px;
    font-weight: 900;
    color: rgba(226, 232, 240, 0.8);
    white-space: nowrap;
}

.rm-tank-track {
    width: 100%;
    height: 11px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.rm-tank-fill {
    height: 100%;
    border-radius: 6px;
    background-color: #2dd4bf;
    transition: width 0.25s;
}
.rm-tank-fill.full { background-color: #fbbf24; }

.rm-tank-note {
    font-size: 12px;
    font-weight: 700;
    color: rgba(94, 234, 212, 0.85);
}

.rm-daily {
    padding: 10px 14px;
    border-radius: 10px;
    background-color: rgba(76, 29, 149, 0.4);
    border: 2px solid rgba(167, 139, 250, 0.55);
    font-size: 13px;
    font-weight: 900;
    color: #ddd6fe;
}

/* Same shape as the daily banner. Neutral slate at rest so it does not shout
   over the tank readout; amber when it wants attention, which is the meaning
   amber already carries on this screen — it is the colour of the waiting-for-
   you dot on the play button. */
.rm-contracts {
    padding: 10px 14px;
    border-radius: 10px;
    background-color: rgba(10, 17, 26, 0.8);
    border: 2px solid rgba(100, 116, 139, 0.25);
    font-size: 13px;
    font-weight: 800;
    color: rgba(203, 213, 225, 0.8);
}
.rm-contracts.ready, .rm-contracts.fresh {
    background-color: rgba(69, 45, 3, 0.45);
    border-color: rgba(251, 191, 36, 0.7);
    color: #fde68a;
    font-weight: 900;
}
.rm-contracts.done {
    border-color: rgba(52, 211, 153, 0.45);
    color: rgba(167, 243, 208, 0.85);
}

.rm-grid-stats {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 6px;
}

.rm-gs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rm-gs-val { font-size: 19px; font-weight: 900; color: #e2e8f0; white-space: nowrap; }

.rm-gs-lbl {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.45);
    white-space: nowrap;
}

/* ── Pet ──────────────────────────────────────────────────────────────── */

.rm-pet-hero {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 190px;
    margin-top: 4px;
}

.rm-pet-img {
    width: 170px;
    height: 170px;
    animation: rm-pet-bob 2.4s ease-in-out infinite alternate;
}

.rm-pet-emoji {
    font-size: 110px;
    animation: rm-pet-bob 2.4s ease-in-out infinite alternate;
}

@keyframes rm-pet-bob {
    0%   { transform: translateY(0px) scale(1.00); }
    100% { transform: translateY(-10px) scale(1.03); }
}

.rm-pet-name {
    font-size: 26px;
    font-weight: 900;
    color: #e2f6f2;
    text-align: center;
}

.rm-pet-level {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.75);
    text-align: center;
}

.rm-pet-blurb {
    font-size: 13px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.6);
    text-align: center;
    margin-top: 6px;
}

.rm-pet-bonus {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    background-color: rgba(13, 40, 44, 0.7);
    border: 2px solid rgba(45, 212, 191, 0.35);
}

.rm-pet-bonus-val { font-size: 30px; font-weight: 900; color: #5eead4; }

.rm-pet-bonus-lbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.65);
}

.rm-pet-next {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(203, 213, 225, 0.75);
    text-align: center;
}

.rm-pet-buy {
    margin-top: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 11px;
    border: 2px solid rgba(167, 139, 250, 0.5);
    background-color: rgba(46, 20, 90, 0.7);
    color: rgba(221, 214, 254, 0.75);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.10em;
    align-items: center;
    justify-content: center;
    cursor: none;
    pointer-events: all;
}

.rm-pet-buy.afford {
    border-color: #a78bfa;
    background-color: rgba(76, 29, 149, 0.9);
    color: #ede9fe;
}
.rm-pet-buy.afford:hover { background-color: rgba(109, 40, 217, 0.95); }
.rm-pet-buy.poor { opacity: 0.5; cursor: none; }

.rm-pet-foot {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.42);
    text-align: center;
}

/* ── Leaderboard ──────────────────────────────────────────────────────── */

.rm-lb-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.rm-lb-row.me {
    background-color: rgba(13, 40, 44, 0.8);
    border-color: rgba(45, 212, 191, 0.5);
}

.rm-lb-rank {
    width: 42px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 900;
    color: rgba(203, 213, 225, 0.7);
}

.rm-lb-name-col { display: flex; flex-direction: column; flex-grow: 1; }

.rm-lb-name {
    font-size: 14px;
    font-weight: 800;
    color: #e2e8f0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.rm-lb-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.45);
}

.rm-lb-score {
    font-size: 14px;
    font-weight: 900;
    color: #93c5fd;
    white-space: nowrap;
}

/* ── Community ────────────────────────────────────────────────────────── */

.rm-comm-greeting {
    font-size: 22px;
    font-weight: 900;
    color: #e2f6f2;
}

.rm-devnote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: rgba(13, 40, 44, 0.55);
    border-left: 3px solid rgba(45, 212, 191, 0.7);
    margin-top: 6px;
}

.rm-devnote-lbl {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.20em;
    color: rgba(94, 234, 212, 0.7);
}

.rm-devnote-txt {
    font-size: 12px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.75);
}

.rm-event-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.rm-event-badge {
    width: 66px;
    flex-shrink: 0;
    text-align: center;
    padding: 3px 0px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.10em;
    background-color: rgba(100, 116, 139, 0.2);
    color: rgba(203, 213, 225, 0.7);
}
.rm-event-badge.green  { background-color: rgba(16, 122, 90, 0.35);  color: #6ee7b7; }
.rm-event-badge.purple { background-color: rgba(76, 29, 149, 0.35);  color: #c4b5fd; }
.rm-event-badge.gray   { background-color: rgba(71, 85, 105, 0.28);  color: rgba(203,213,225,0.6); }

.rm-event-text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.7);
}

.rm-discord {
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 10px;
    border: 2px solid rgba(129, 140, 248, 0.5);
    background-color: rgba(30, 41, 90, 0.6);
    color: #c7d2fe;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.10em;
    align-items: center;
    justify-content: center;
    cursor: none;
    pointer-events: all;
}
.rm-discord:hover  { background-color: rgba(49, 46, 129, 0.9); }
.rm-discord.copied { border-color: #34d399; color: #6ee7b7; }

/* ── Credits ──────────────────────────────────────────────────────────── */

.rm-credit { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }

.rm-credit-role {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.6);
}

.rm-credit-name { font-size: 17px; font-weight: 900; color: #e2e8f0; }

/* ── Right column ─────────────────────────────────────────────────────── */

.rm-play {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 3px solid rgba(45, 212, 191, 0.65);
    background-color: rgba(13, 78, 74, 0.75);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: none;
    pointer-events: all;
    animation: rm-play-glow 2.4s ease-in-out infinite alternate;
    transition: transform 0.07s;
}
.rm-play:hover  { background-color: rgba(15, 118, 110, 0.9); }
.rm-play:active { transform: translateY(2px); }

@keyframes rm-play-glow {
    0%   { border-color: rgba(45, 212, 191, 0.40); box-shadow: 0px 0px 14px rgba(13,148,136,0.20); }
    100% { border-color: rgba(94, 234, 212, 1.00); box-shadow: 0px 0px 40px rgba(13,148,136,0.55); }
}

.rm-play-icon  { font-size: 28px; }

.rm-play-label {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #ccfbf1;
    white-space: nowrap;
}

.rm-play-shine {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35%;
    background-color: rgba(255, 255, 255, 0.05);
    animation: rm-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rm-shine {
    0%   { transform: translateX(-180%); }
    35%  { transform: translateX(420%); }
    100% { transform: translateX(420%); }
}

.rm-play-dot {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #fbbf24;
    box-shadow: 0px 0px 14px rgba(251, 191, 36, 0.9);
    animation: rm-dot 1.1s ease-in-out infinite alternate;
}

@keyframes rm-dot {
    0%   { transform: scale(0.75); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1.0; }
}

/* Sits between PLAY and the tab stack. Quieter than a tab so it never
   competes with the play button, but it is the one thing a returning player
   who bounced off the mode needs to be able to find. */
.rm-howto {
    padding: 11px 18px;
    border-radius: 10px;
    border: 2px solid rgba(45, 212, 191, 0.35);
    background-color: rgba(10, 25, 28, 0.75);
    color: rgba(153, 246, 228, 0.85);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.10em;
    align-items: center;
    justify-content: center;
    cursor: none;
    pointer-events: all;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
.rm-howto:hover {
    background-color: rgba(13, 78, 74, 0.85);
    border-color: rgba(45, 212, 191, 0.8);
    color: #ccfbf1;
}

.rm-tabs { display: flex; flex-direction: column; gap: 6px; }

.rm-tab {
    position: relative;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid rgba(100, 116, 139, 0.2);
    background-color: rgba(10, 17, 26, 0.8);
    color: rgba(203, 213, 225, 0.65);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: none;
    pointer-events: all;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
.rm-tab:hover { background-color: rgba(18, 28, 42, 0.95); color: #e2e8f0; }
.rm-tab.on {
    border-color: rgba(45, 212, 191, 0.7);
    background-color: rgba(13, 40, 44, 0.9);
    color: #5eead4;
}

.rm-tab-pill {
    position: absolute;
    top: 10px;
    right: 12px;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background-color: #a78bfa;
    color: #1e1b4b;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

/* ── Evolution cinematic ──────────────────────────────────────────────── */

.rm-evo-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 4, 8, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    pointer-events: all;

    /* Painted last in the DOM but the shell was still coming out on top, which
       is what let the card show through and made the cinematic read as loose
       elements floating over the pet panel. An explicit stacking order settles
       it rather than relying on sibling paint order. */
    z-index: 100;
}

.rm-evo-bg.evo-flash { background-color: rgba(220, 250, 250, 0.92); }

.rm-evo-text {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.10em;
    color: #5eead4;
    text-shadow: 0px 0px 24px rgba(45, 212, 191, 0.6);
}

.rm-evo-pet {
    width: 260px;
    height: 260px;
    align-items: center;
    justify-content: center;
    display: flex;
}

/* The cinematic image had no class at all, so it fell back to the sprite's
   intrinsic pixel size and rendered as a thumbnail next to the 170px card
   art. Sized explicitly, and a touch larger than the card since this is the
   payoff moment. */
.rm-evo-img {
    width: 220px;
    height: 220px;
}
.rm-evo-pet.evo-shake  { animation: rm-evo-shake 0.22s linear infinite; }
.rm-evo-pet.evo-reveal { animation: rm-evo-pop 0.5s ease-out both; }

@keyframes rm-evo-shake {
    0%,100% { transform: translate(0px, 0px); }
    25%     { transform: translate(-5px, 2px) rotate(-1.5deg); }
    75%     { transform: translate(5px, -2px) rotate(1.5deg); }
}

@keyframes rm-evo-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1.00); opacity: 1; }
}

.rm-evo-name  { font-size: 34px; font-weight: 900; color: #e2f6f2; }

.rm-evo-level {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.8);
}

.rm-evo-btn {
    margin-top: 18px;
    padding: 14px 44px;
    border-radius: 11px;
    border: 2px solid #2dd4bf;
    background-color: rgba(13, 78, 74, 0.9);
    color: #ccfbf1;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.16em;
    align-items: center;
    justify-content: center;
    cursor: none;
    pointer-events: all;
}
.rm-evo-btn:hover { background-color: rgba(15, 118, 110, 0.95); }

/* ── Top reactors card (left column) ──────────────────────────────────── */
.rm-hof {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 310px;
    margin-top: 14px;
    padding: 10px 14px;
    background-color: rgba(8, 14, 24, 0.72);
    border: 2px solid rgba(94, 234, 212, 0.16);
    border-radius: 10px;
}

.rm-hof-hd {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(94, 234, 212, 0.75);
    margin-bottom: 3px;
}

.rm-hof-empty {
    font-size: 11px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.55);
}

.rm-hof-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    border-radius: 5px;
}
.rm-hof-row.me { background-color: rgba(94, 234, 212, 0.10); }

.rm-hof-rank { font-size: 12px; font-weight: 900; width: 26px; color: rgba(148,163,184,0.85); }
.rm-hof-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(226,232,240,0.85);
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.rm-hof-val  { font-size: 12px; font-weight: 900; color: #5eead4; }

/* ── Community energy bar (docked bottom, full width) ─────────────────── */
.rm-energy-dock {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 28px 12px 28px;
    background-color: rgba(6, 10, 22, 0.92);
    border-top: 2px solid rgba(94, 234, 212, 0.30);
    pointer-events: none;
    z-index: 40;
}

.rm-energy-hd, .rm-energy-sub {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.rm-energy-title   { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; color: rgba(94,234,212,0.90); }
.rm-energy-players { font-size: 11px; font-weight: 600; color: rgba(148,163,184,0.70); }
.rm-energy-goal    { font-size: 11px; font-weight: 700; color: rgba(226,232,240,0.75); }
.rm-energy-pct     { font-size: 12px; font-weight: 900; color: #5eead4; }

.rm-energy-track {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background-color: rgba(148,163,184,0.14);
    border: 2px solid rgba(94,234,212,0.20);
    overflow: hidden;
}

.rm-energy-fill {
    height: 100%;
    border-radius: 6px;
    background-color: #5eead4;
    background-image: linear-gradient(to right, rgba(59,130,246,0.95), rgba(94,234,212,1.0));
    transition: width 0.6s ease-out;
    box-shadow: 0px 0px 12px rgba(94,234,212,0.55);
}