Chain Reaction
Released
Place bombs, pop chests, chain the blast across the grid. Survive waves, run the reactor, climb the leaderboards.
game/idle/ui/idlehud.razor.scss
/* ══════════════════════════════════════════════════════════════════════════
THE REACTOR — Idle mode HUD
Palette leans teal/amber against the same deep purple-black the rest of
10XPLOSION uses, so it reads as "the same game, different room".
══════════════════════════════════════════════════════════════════════════ */
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;
/* Sits above the wave HUD's layers — those hide themselves in this mode,
but ScreenShaker and PopupLayer share the same ScreenPanel. */
z-index: 200;
}
.idle-root {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
pointer-events: none;
}
/* ── Backdrop ─────────────────────────────────────────────────────────── */
.idle-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #04070d;
}
.idle-bg-glow {
position: absolute;
top: -20%; left: 15%;
width: 70%;
height: 120%;
border-radius: 50%;
background-color: rgba(20, 130, 130, 0.10);
filter: blur(120px);
animation: idle-breathe 9s ease-in-out infinite alternate;
transition: background-color 0.5s;
}
.idle-bg-glow.surging {
background-color: rgba(251, 146, 60, 0.22);
}
@keyframes idle-breathe {
0% { transform: scale(1.00); opacity: 0.75; }
100% { transform: scale(1.18); opacity: 1.00; }
}
.idle-particle {
position: absolute;
bottom: -12px;
border-radius: 50%;
animation: idle-rise linear infinite;
}
@keyframes idle-rise {
0% { transform: translateY(0px); opacity: 0; }
12% { opacity: 1; }
100% { transform: translateY(-1180px); opacity: 0; }
}
/* ── Top bar ──────────────────────────────────────────────────────────── */
.idle-top {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 12px 22px;
flex-shrink: 0;
background-color: rgba(6, 12, 20, 0.82);
border-bottom: 2px solid rgba(45, 212, 191, 0.18);
pointer-events: all;
overflow: hidden;
}
.idle-back {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 10px;
border: 2px solid rgba(148, 163, 184, 0.28);
background-color: rgba(15, 23, 35, 0.9);
color: rgba(226, 232, 240, 0.85);
font-size: 22px;
font-weight: 900;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
transition: background-color 0.1s, border-color 0.1s;
}
.idle-back:hover {
background-color: rgba(45, 212, 191, 0.18);
border-color: rgba(45, 212, 191, 0.6);
}
/* Without an explicit no-shrink the currency row squeezes this to nothing and
the title wraps one letter per line. */
.idle-brand {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
}
.idle-brand-title {
white-space: nowrap;
font-size: 22px;
font-weight: 900;
letter-spacing: 0.24em;
color: #5eead4;
text-shadow: 0px 0px 18px rgba(45, 212, 191, 0.45);
}
.idle-brand-sub {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.55);
}
.idle-currencies {
display: flex;
flex-direction: row;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
flex-grow: 0;
}
.idle-cur {
display: flex;
flex-direction: row;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 10px;
background-color: rgba(12, 20, 30, 0.92);
border: 2px solid rgba(100, 116, 139, 0.22);
width: 172px;
flex-shrink: 0;
flex-grow: 0;
overflow: hidden;
}
.idle-cur-icon { font-size: 17px; flex-shrink: 0; }
.idle-cur-val {
font-size: 19px;
font-weight: 900;
color: #e2e8f0;
white-space: nowrap;
flex-shrink: 0;
}
.idle-cur-lbl {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.55);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.idle-cur.cores { border-color: rgba(45, 212, 191, 0.45); }
.idle-cur.cores .idle-cur-val { color: #5eead4; }
.idle-cur.rate .idle-cur-val { color: #a7f3d0; font-size: 17px; }
.idle-cur.flux { border-color: rgba(96, 165, 250, 0.42); width: 132px; }
.idle-cur.flux .idle-cur-val { color: #93c5fd; }
.idle-cur.frag { border-color: rgba(167, 139, 250, 0.42); width: 152px; }
.idle-cur.frag .idle-cur-val { color: #c4b5fd; }
/* ── Body layout ──────────────────────────────────────────────────────── */
.idle-body {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 14px;
padding: 14px 20px 16px 20px;
flex-grow: 1;
flex-shrink: 1;
height: 0; /* lets flex-grow decide the height, so children can scroll */
overflow: hidden;
}
.idle-col { display: flex; flex-direction: column; gap: 12px; }
.idle-left {
width: 300px;
flex-shrink: 0;
overflow-y: scroll;
overflow-x: hidden;
pointer-events: all;
}
.idle-right {
width: 400px;
flex-shrink: 0;
overflow: hidden;
pointer-events: all;
}
.idle-center {
flex-grow: 1;
align-items: center;
justify-content: center;
gap: 16px;
pointer-events: all;
}
/* ── Info cards ───────────────────────────────────────────────────────── */
.idle-card {
background-color: rgba(10, 17, 26, 0.88);
border: 2px solid rgba(100, 116, 139, 0.18);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.idle-card-hd {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(94, 234, 212, 0.75);
margin-bottom: 4px;
}
.idle-card-note {
font-size: 11px;
font-weight: 600;
color: rgba(148, 163, 184, 0.65);
}
.idle-card-note.dim { color: rgba(251, 191, 36, 0.75); }
.idle-stat-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.idle-stat-lbl {
font-size: 12px;
font-weight: 600;
color: rgba(148, 163, 184, 0.75);
}
.idle-stat-val {
font-size: 14px;
font-weight: 900;
color: #e2e8f0;
}
.idle-stat-val.hot { color: #5eead4; }
.idle-stat-val.capped { color: #fbbf24; }
.idle-stat-val.starved { color: #f87171; }
/* ── Reactor rank card ───────────────────────────────────────── */
.idle-rank-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 3px 6px;
border-radius: 6px;
border: 2px solid rgba(0, 0, 0, 0);
}
.idle-rank-row.me {
background-color: rgba(94, 234, 212, 0.10);
border-color: rgba(94, 234, 212, 0.35);
}
.idle-rank-pos {
font-size: 11px;
font-weight: 900;
color: rgba(148, 163, 184, 0.75);
width: 26px;
flex-shrink: 0;
}
.idle-rank-row.me .idle-rank-pos { color: #5eead4; }
.idle-rank-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;
}
.idle-rank-row.me .idle-rank-name { color: #e2e8f0; }
.idle-rank-val {
font-size: 12px;
font-weight: 900;
color: rgba(148, 163, 184, 0.9);
flex-shrink: 0;
}
.idle-rank-row.me .idle-rank-val { color: #5eead4; }
.idle-card-note.up {
color: rgba(74, 222, 128, 0.9);
font-weight: 700;
}
.idle-bar-track {
width: 100%;
height: 10px;
border-radius: 5px;
background-color: rgba(30, 41, 59, 0.9);
overflow: hidden;
}
.idle-bar-fill {
height: 100%;
border-radius: 5px;
background-color: #5eead4;
transition: width 0.2s;
}
.idle-bar-fill.frag { background-color: #a78bfa; }
/* Boosts */
.idle-boost {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
background-color: rgba(30, 41, 59, 0.7);
border-left: 3px solid rgba(94, 234, 212, 0.7);
}
.idle-boost.surge {
border-left-color: #fb923c;
background-color: rgba(120, 53, 15, 0.45);
}
.idle-boost-icon { font-size: 15px; }
.idle-boost-lbl { font-size: 12px; font-weight: 800; color: #e2e8f0; }
.idle-boost-time {
margin-left: auto;
font-size: 11px;
font-weight: 900;
color: rgba(251, 191, 36, 0.9);
}
/* Chest tiers */
.idle-tier {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
padding: 5px 0px;
opacity: 0.42;
}
.idle-tier.on { opacity: 1; }
.idle-tier-icon { font-size: 20px; width: 26px; text-align: center; }
.idle-tier-body { display: flex; flex-direction: column; flex-grow: 1; }
.idle-tier-name { font-size: 12px; font-weight: 900; color: #e2e8f0; }
.idle-tier-blurb {
font-size: 10px;
font-weight: 600;
color: rgba(148, 163, 184, 0.7);
}
.idle-tier.on .idle-tier-name { color: #5eead4; }
/* ── The board ────────────────────────────────────────────────────────── */
.idle-board-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.idle-board {
display: flex;
flex-direction: column;
gap: 5px;
padding: 14px;
border-radius: 16px;
background-color: rgba(6, 14, 22, 0.9);
border: 2px solid rgba(45, 212, 191, 0.22);
box-shadow: 0px 0px 40px rgba(13, 148, 136, 0.14);
transition: border-color 0.3s, box-shadow 0.3s;
}
.idle-board.surging {
border-color: rgba(251, 146, 60, 0.65);
box-shadow: 0px 0px 60px rgba(251, 146, 60, 0.35);
}
.idle-row { display: flex; flex-direction: row; gap: 5px; }
.idle-cell {
position: relative;
border-radius: 9px;
background-color: rgba(17, 27, 40, 0.85);
border: 2px solid rgba(71, 85, 105, 0.28);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: none;
pointer-events: all;
overflow: hidden;
}
.idle-cell.empty { background-color: rgba(13, 21, 32, 0.7); }
.idle-cell.filled { border-color: rgba(148, 163, 184, 0.35); }
.idle-chest {
font-size: 30px;
text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);
}
/* chest type tinting */
.idle-cell.c-normal { background-color: rgba(59, 44, 20, 0.55); border-color: rgba(217, 160, 60, 0.45); }
.idle-cell.c-gem { background-color: rgba(14, 60, 78, 0.6); border-color: rgba(56, 189, 248, 0.55); }
.idle-cell.c-bomb { background-color: rgba(70, 24, 24, 0.62); border-color: rgba(248, 113, 113, 0.6); }
.idle-cell.c-locked { background-color: rgba(45, 39, 74, 0.65); border-color: rgba(167, 139, 250, 0.6); }
.idle-cell.c-cursed { background-color: rgba(56, 20, 52, 0.7); border-color: rgba(232, 121, 249, 0.65); }
.idle-cell.c-void { background-color: rgba(10, 10, 20, 0.95); border-color: rgba(129, 140, 248, 0.7); }
.idle-cell.c-boss { background-color: rgba(80, 55, 8, 0.75); border-color: rgba(251, 191, 36, 0.85); }
/* detonation feedback */
.idle-cell.fx-blast {
background-color: rgba(94, 234, 212, 0.30);
border-color: rgba(153, 246, 228, 0.85);
}
.idle-cell.fx-kill {
background-color: rgba(251, 191, 36, 0.55);
border-color: rgba(254, 240, 138, 0.95);
}
.idle-cell.fx-drone {
background-color: rgba(248, 113, 113, 0.6);
border-color: rgba(254, 202, 202, 0.95);
}
.idle-hits {
position: absolute;
bottom: 2px;
right: 4px;
font-size: 11px;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
}
/* A drone sits on its target for a beat before the volley goes off, so the
explosion has something to come from. */
.idle-drone {
position: absolute;
font-size: 26px;
text-shadow: 0px 0px 10px rgba(248, 113, 113, 0.9);
}
.idle-cell.armed {
border-color: rgba(248, 113, 113, 0.95);
background-color: rgba(80, 20, 20, 0.55);
}
/* golden chest */
.idle-cell.golden {
background-color: rgba(120, 82, 6, 0.85);
border-color: #fde047;
box-shadow: 0px 0px 26px rgba(253, 224, 71, 0.7);
animation: idle-golden-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes idle-golden-pulse {
0% { transform: scale(1.00); }
100% { transform: scale(1.10); }
}
.idle-golden { font-size: 32px; }
.idle-golden-timer {
position: absolute;
bottom: 1px;
font-size: 11px;
font-weight: 900;
color: #fef9c3;
}
/* floating values */
.idle-float {
position: absolute;
font-size: 17px;
font-weight: 900;
color: #a7f3d0;
text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.9);
pointer-events: none;
}
.idle-float.crit {
font-size: 22px;
color: #fde047;
}
.idle-callout {
position: absolute;
top: 40%;
font-size: 34px;
font-weight: 900;
letter-spacing: 0.06em;
color: #5eead4;
text-shadow: 0px 0px 22px rgba(45, 212, 191, 0.8), 0px 3px 8px rgba(0, 0, 0, 0.9);
pointer-events: none;
}
.idle-callout.big { color: #a7f3d0; }
.idle-callout.mega { color: #fbbf24; font-size: 40px; }
.idle-callout.crit { color: #fb923c; font-size: 44px; }
/* ── Controls ─────────────────────────────────────────────────────────── */
.idle-controls {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.idle-overload {
position: relative;
overflow: hidden;
width: 290px;
padding-top: 14px;
padding-bottom: 14px;
border-radius: 14px;
border: 3px solid rgba(248, 113, 113, 0.55);
background-color: rgba(60, 12, 12, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
cursor: none;
pointer-events: all;
transition: transform 0.06s, border-color 0.12s;
}
.idle-overload.ready {
border-color: #f87171;
animation: idle-overload-pulse 1.4s ease-in-out infinite alternate;
}
.idle-overload.cooling { opacity: 0.62; cursor: none; }
.idle-overload:active { transform: translateY(2px); }
@keyframes idle-overload-pulse {
0% { box-shadow: 0px 0px 12px rgba(248, 113, 113, 0.25); }
100% { box-shadow: 0px 0px 34px rgba(248, 113, 113, 0.65); }
}
.idle-overload-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background-color: rgba(248, 113, 113, 0.18);
pointer-events: none;
}
.idle-overload-label {
font-size: 20px;
font-weight: 900;
letter-spacing: 0.14em;
color: #fecaca;
}
.idle-overload-sub {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(254, 202, 202, 0.6);
}
.idle-surge-wrap {
display: flex;
flex-direction: column;
gap: 8px;
width: 300px;
}
.idle-surge-track {
position: relative;
height: 34px;
border-radius: 9px;
background-color: rgba(15, 23, 35, 0.92);
border: 2px solid rgba(148, 163, 184, 0.24);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.idle-surge-track.ready {
border-color: #fb923c;
animation: idle-overload-pulse 0.9s ease-in-out infinite alternate;
}
.idle-surge-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background-color: rgba(251, 146, 60, 0.42);
transition: width 0.2s;
}
.idle-surge-lbl {
position: relative;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.16em;
color: #fed7aa;
}
.idle-surge-btn {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 9px;
border: 2px solid #fb923c;
background-color: rgba(154, 52, 18, 0.85);
color: #ffedd5;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.12em;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
}
.idle-surge-btn:hover { background-color: rgba(194, 65, 12, 0.95); }
/* ── Meltdown strip ───────────────────────────────────────────────────── */
.idle-meltdown-strip {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
width: 620px;
padding: 10px 16px;
border-radius: 12px;
background-color: rgba(10, 17, 26, 0.85);
border: 2px solid rgba(100, 116, 139, 0.18);
flex-shrink: 0;
}
.idle-meltdown-strip.ready {
border-color: rgba(251, 191, 36, 0.7);
background-color: rgba(69, 26, 3, 0.6);
}
.idle-melt-icon { font-size: 20px; flex-shrink: 0; }
.idle-melt-text {
font-size: 12px;
font-weight: 700;
color: rgba(203, 213, 225, 0.85);
flex-grow: 1;
}
.idle-meltdown-strip.ready .idle-melt-text { color: #fde68a; font-weight: 900; }
.idle-melt-bar {
margin-left: auto;
width: 180px;
height: 8px;
border-radius: 4px;
background-color: rgba(30, 41, 59, 0.9);
overflow: hidden;
}
.idle-melt-fill {
height: 100%;
background-color: #fbbf24;
border-radius: 4px;
}
.idle-melt-btn {
margin-left: auto;
padding: 8px 20px;
border-radius: 9px;
border: 2px solid #fbbf24;
background-color: rgba(120, 53, 15, 0.9);
color: #fef3c7;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.14em;
cursor: none;
pointer-events: all;
}
.idle-melt-btn:hover { background-color: rgba(180, 83, 9, 0.95); }
/* ── Right panel ──────────────────────────────────────────────────────── */
.idle-tabs { display: flex; flex-direction: row; gap: 6px; flex-shrink: 0; }
.idle-tab {
flex-grow: 1;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 9px;
border: 2px solid rgba(100, 116, 139, 0.22);
background-color: rgba(12, 20, 30, 0.85);
font-size: 18px;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
opacity: 0.55;
transition: opacity 0.1s, border-color 0.1s;
}
.idle-tab:hover { opacity: 0.85; }
.idle-tab.on {
opacity: 1;
border-color: rgba(45, 212, 191, 0.7);
background-color: rgba(13, 40, 44, 0.9);
}
.idle-tab.fluxtab.on { border-color: rgba(96, 165, 250, 0.8); background-color: rgba(15, 32, 60, 0.9); }
.idle-buyrow {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.idle-buyrow-lbl {
font-size: 10px;
font-weight: 900;
letter-spacing: 0.16em;
color: rgba(148, 163, 184, 0.6);
margin-right: 4px;
}
.idle-buy-amt {
padding: 5px 14px;
border-radius: 7px;
border: 2px solid rgba(100, 116, 139, 0.22);
background-color: rgba(12, 20, 30, 0.85);
color: rgba(203, 213, 225, 0.7);
font-size: 11px;
font-weight: 900;
cursor: none;
pointer-events: all;
}
.idle-buy-amt.on {
border-color: rgba(45, 212, 191, 0.75);
color: #5eead4;
background-color: rgba(13, 40, 44, 0.9);
}
/* height:0 + flex-grow is what makes this actually scroll instead of pushing
its content off the bottom of the screen. */
.idle-panel {
flex-grow: 1;
flex-shrink: 1;
height: 0;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 8px;
}
/* ── Upgrade rows ─────────────────────────────────────────────────────── */
.idle-up {
display: flex;
flex-direction: row;
gap: 12px;
padding: 10px 12px;
border-radius: 11px;
background-color: rgba(10, 17, 26, 0.9);
border: 2px solid rgba(100, 116, 139, 0.16);
cursor: none;
pointer-events: all;
flex-shrink: 0;
transition: border-color 0.1s, background-color 0.1s, transform 0.06s;
}
.idle-up:hover { background-color: rgba(18, 28, 42, 0.95); }
.idle-up:active { transform: translateY(1px); }
.idle-up.afford { border-color: rgba(45, 212, 191, 0.55); }
.idle-up.afford:hover { border-color: rgba(94, 234, 212, 0.95); }
.idle-up.poor { opacity: 0.62; }
.idle-up.maxed { border-color: rgba(251, 191, 36, 0.45); opacity: 0.9; }
.idle-up.locked { opacity: 0.35; cursor: none; }
.idle-up.perk.afford { border-color: rgba(96, 165, 250, 0.7); }
.idle-up.ach { cursor: none; }
.idle-up.ach.done { border-color: rgba(52, 211, 153, 0.5); }
.idle-up-icon {
font-size: 26px;
width: 34px;
flex-shrink: 0;
text-align: center;
align-items: center;
justify-content: center;
}
.idle-up-body {
display: flex;
flex-direction: column;
gap: 3px;
flex-grow: 1;
}
.idle-up-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.idle-up-name {
font-size: 14px;
font-weight: 900;
color: #e2e8f0;
}
.idle-up-lvl {
font-size: 11px;
font-weight: 800;
color: rgba(148, 163, 184, 0.7);
}
.idle-up-desc {
font-size: 11px;
font-weight: 600;
color: rgba(148, 163, 184, 0.72);
}
.idle-up-bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 3px;
}
.idle-up-effect {
font-size: 11px;
font-weight: 800;
color: rgba(94, 234, 212, 0.85);
}
.idle-up-cost {
font-size: 13px;
font-weight: 900;
color: #cbd5e1;
}
.idle-up.afford .idle-up-cost { color: #5eead4; }
.idle-up-cost.flux { color: #93c5fd; }
.idle-up-cost.maxed { color: #fbbf24; }
/* ── Flux / log headers ───────────────────────────────────────────────── */
.idle-flux-head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
border-radius: 11px;
background-color: rgba(13, 25, 46, 0.9);
border: 2px solid rgba(96, 165, 250, 0.3);
flex-shrink: 0;
}
.idle-flux-amount {
font-size: 22px;
font-weight: 900;
color: #93c5fd;
}
.idle-flux-sub {
font-size: 11px;
font-weight: 700;
color: rgba(148, 163, 184, 0.75);
}
.idle-ach-reward {
font-size: 11px;
font-weight: 900;
color: rgba(251, 191, 36, 0.9);
}
.idle-ach-bar {
width: 100%;
height: 6px;
border-radius: 3px;
background-color: rgba(30, 41, 59, 0.9);
overflow: hidden;
margin-top: 4px;
}
.idle-ach-fill {
height: 100%;
border-radius: 3px;
background-color: rgba(94, 234, 212, 0.8);
}
.idle-ach-prog {
font-size: 10px;
font-weight: 800;
color: rgba(148, 163, 184, 0.6);
margin-top: 2px;
}
/* ── Toasts ───────────────────────────────────────────────────────────── */
.idle-toasts {
position: absolute;
top: 96px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
pointer-events: none;
}
.idle-toast {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
padding: 8px 18px;
border-radius: 10px;
background-color: rgba(8, 14, 22, 0.94);
border: 2px solid rgba(100, 116, 139, 0.35);
}
.idle-toast-icon { font-size: 17px; }
.idle-toast-text { font-size: 13px; font-weight: 800; color: #e2e8f0; }
.idle-toast.idle-toast-gold { border-color: rgba(253, 224, 71, 0.8); }
.idle-toast.idle-toast-chain { border-color: rgba(94, 234, 212, 0.75); }
.idle-toast.idle-toast-crit { border-color: rgba(251, 146, 60, 0.85); }
.idle-toast.idle-toast-frag { border-color: rgba(167, 139, 250, 0.8); }
.idle-toast.idle-toast-flux { border-color: rgba(96, 165, 250, 0.85); }
.idle-toast.idle-toast-surge { border-color: rgba(251, 146, 60, 0.9); }
.idle-toast.idle-toast-big { border-color: rgba(52, 211, 153, 0.85); }
.idle-toast.idle-toast-achievement { border-color: rgba(251, 191, 36, 0.9); }
.idle-toast.idle-toast-dim { opacity: 0.6; }
/* ── Modals ───────────────────────────────────────────────────────────── */
.idle-modal-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(2, 4, 8, 0.86);
pointer-events: all;
}
.idle-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
max-height: 88%;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 34px 40px;
border-radius: 18px;
background-color: rgba(9, 15, 24, 0.98);
border: 3px solid rgba(45, 212, 191, 0.45);
box-shadow: 0px 0px 70px rgba(13, 148, 136, 0.28);
pointer-events: all;
}
.idle-modal.meltdown { border-color: rgba(251, 191, 36, 0.6); box-shadow: 0px 0px 70px rgba(180, 83, 9, 0.35); }
.idle-modal.daily { border-color: rgba(167, 139, 250, 0.6); }
.idle-modal.intro { width: 720px; }
.idle-modal-eyebrow {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.30em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.55);
}
.idle-modal-title {
font-size: 34px;
font-weight: 900;
letter-spacing: 0.06em;
color: #5eead4;
text-shadow: 0px 0px 24px rgba(45, 212, 191, 0.4);
}
.idle-modal.meltdown .idle-modal-title { color: #fbbf24; }
.idle-modal.daily .idle-modal-title { color: #c4b5fd; }
.idle-modal-sub {
font-size: 13px;
font-weight: 600;
color: rgba(203, 213, 225, 0.75);
text-align: center;
max-width: 520px;
margin-bottom: 8px;
}
.idle-modal-btn {
margin-top: 14px;
padding: 14px 40px;
border-radius: 11px;
border: 2px solid #2dd4bf;
background-color: rgba(13, 78, 74, 0.9);
color: #ccfbf1;
font-size: 16px;
font-weight: 900;
letter-spacing: 0.16em;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
}
.idle-modal-btn:hover { background-color: rgba(15, 118, 110, 0.95); }
.idle-modal-btn.ghost {
border-color: rgba(148, 163, 184, 0.4);
background-color: rgba(30, 41, 59, 0.7);
color: rgba(203, 213, 225, 0.85);
}
.idle-modal-btn.danger {
border-color: #fbbf24;
background-color: rgba(146, 64, 14, 0.9);
color: #fef3c7;
}
.idle-modal-btn.danger:hover { background-color: rgba(180, 83, 9, 0.95); }
.idle-modal-btns { display: flex; flex-direction: row; gap: 14px; }
/* offline report */
.idle-offline-haul {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 18px 44px;
border-radius: 14px;
background-color: rgba(13, 40, 44, 0.7);
border: 2px solid rgba(45, 212, 191, 0.35);
margin-top: 6px;
}
.idle-offline-amount {
font-size: 46px;
font-weight: 900;
color: #5eead4;
text-shadow: 0px 0px 26px rgba(45, 212, 191, 0.5);
}
.idle-offline-lbl {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.20em;
color: rgba(148, 163, 184, 0.7);
}
.idle-offline-extra {
font-size: 13px;
font-weight: 800;
color: #c4b5fd;
margin-top: 6px;
}
.idle-offline-warn {
font-size: 12px;
font-weight: 700;
color: rgba(251, 191, 36, 0.9);
text-align: center;
max-width: 480px;
margin-top: 8px;
}
/* daily */
.idle-streak-row { display: flex; flex-direction: row; gap: 8px; margin-top: 6px; }
.idle-streak-pip {
width: 44px;
height: 44px;
border-radius: 10px;
background-color: rgba(30, 41, 59, 0.8);
border: 2px solid rgba(100, 116, 139, 0.25);
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 900;
color: rgba(148, 163, 184, 0.6);
}
.idle-streak-pip.on {
background-color: rgba(76, 29, 149, 0.6);
border-color: rgba(167, 139, 250, 0.7);
color: #ddd6fe;
}
.idle-streak-pip.today {
border-color: #fbbf24;
color: #fde68a;
animation: idle-overload-pulse 1.1s ease-in-out infinite alternate;
}
.idle-daily-reward {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 14px;
}
.idle-daily-mult {
font-size: 44px;
font-weight: 900;
color: #fbbf24;
}
.idle-daily-lbl {
font-size: 13px;
font-weight: 800;
color: rgba(203, 213, 225, 0.8);
}
/* meltdown */
.idle-melt-payout {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 14px 38px;
border-radius: 14px;
background-color: rgba(30, 41, 90, 0.6);
border: 2px solid rgba(96, 165, 250, 0.45);
}
.idle-melt-payout-val { font-size: 44px; font-weight: 900; color: #93c5fd; }
.idle-melt-payout-lbl { font-size: 15px; font-weight: 900; color: rgba(148, 163, 184, 0.85); }
.idle-melt-cols {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 14px;
width: 100%;
}
.idle-melt-col {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: 11px;
background-color: rgba(15, 23, 35, 0.85);
border: 2px solid rgba(100, 116, 139, 0.2);
}
.idle-melt-col.keep { border-color: rgba(52, 211, 153, 0.4); }
.idle-melt-col.lose { border-color: rgba(248, 113, 113, 0.4); }
.idle-melt-col-hd {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.16em;
color: rgba(203, 213, 225, 0.8);
margin-bottom: 4px;
}
.idle-melt-line {
font-size: 12px;
font-weight: 700;
color: rgba(148, 163, 184, 0.85);
}
/* intro */
.idle-intro-steps {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
width: 100%;
}
.idle-intro-step {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 10px 14px;
border-radius: 11px;
background-color: rgba(15, 23, 35, 0.8);
border-left: 3px solid rgba(45, 212, 191, 0.6);
}
.idle-intro-num {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background-color: rgba(13, 78, 74, 0.9);
border: 2px solid rgba(45, 212, 191, 0.6);
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
color: #99f6e4;
}
.idle-intro-txt {
font-size: 13px;
font-weight: 600;
color: rgba(203, 213, 225, 0.9);
}
/* ── Board shake ──────────────────────────────────────────────────────── */
/* Own keyframes rather than reusing Gamehud's, so this stylesheet stands
on its own if that file ever changes. */
.idle-board.idle-shake-1 { animation: idle-shake-1 0.28s ease-out; }
.idle-board.idle-shake-2 { animation: idle-shake-2 0.28s ease-out; }
.idle-board.idle-shake-3 { animation: idle-shake-3 0.45s ease-out; }
@keyframes idle-shake-1 {
0% { transform: translate(0px, 0px); }
30% { transform: translate(-2px, 1px); }
60% { transform: translate(2px, -1px); }
100% { transform: translate(0px, 0px); }
}
@keyframes idle-shake-2 {
0% { transform: translate(0px, 0px) rotate(0deg); }
20% { transform: translate(-4px, 2px) rotate(-0.3deg); }
45% { transform: translate(4px, -3px) rotate(0.3deg); }
70% { transform: translate(-3px, -1px) rotate(-0.2deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes idle-shake-3 {
0% { transform: translate(0px, 0px) rotate(0deg) scale(1.00); }
15% { transform: translate(-7px, 4px) rotate(-0.6deg) scale(1.01); }
35% { transform: translate(7px, -5px) rotate(0.6deg) scale(1.02); }
55% { transform: translate(-5px, -3px) rotate(-0.4deg) scale(1.01); }
78% { transform: translate(4px, 2px) rotate(0.3deg) scale(1.00); }
100% { transform: translate(0px, 0px) rotate(0deg) scale(1.00); }
}
/* ── Singularity — the second prestige layer ──────────────────────────── */
/* Violet throughout, so nothing on screen can be mistaken for Flux blue or
Meltdown amber. The layer is rare enough that it has to read instantly. */
.idle-sing-strip {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
width: 620px;
padding: 10px 16px;
border-radius: 12px;
background-color: rgba(10, 17, 26, 0.85);
border: 2px solid rgba(100, 116, 139, 0.18);
flex-shrink: 0;
}
.idle-sing-strip.ready {
border-color: rgba(192, 132, 252, 0.75);
background-color: rgba(46, 16, 101, 0.6);
}
.idle-sing-strip.ready .idle-melt-text { color: #e9d5ff; font-weight: 900; }
.idle-sing-fill {
height: 100%;
background-color: #c084fc;
border-radius: 4px;
}
.idle-sing-btn {
margin-left: auto;
padding: 8px 20px;
border-radius: 9px;
border: 2px solid #c084fc;
background-color: rgba(76, 29, 149, 0.9);
color: #f3e8ff;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.14em;
cursor: none;
pointer-events: all;
}
.idle-sing-btn:hover { background-color: rgba(109, 40, 217, 0.95); }
.idle-tab.singtab.on {
border-color: rgba(192, 132, 252, 0.8);
background-color: rgba(38, 18, 62, 0.9);
}
.idle-up.power.afford { border-color: rgba(192, 132, 252, 0.7); }
.idle-up-cost.shard { color: #d8b4fe; }
.idle-flux-head.sing {
background-color: rgba(30, 15, 52, 0.9);
border-color: rgba(192, 132, 252, 0.35);
}
.idle-flux-head.sing .idle-flux-amount { color: #d8b4fe; }
.idle-sing-payout-val {
font-size: 44px;
font-weight: 900;
color: #d8b4fe;
}
.idle-modal.singularity {
border-color: rgba(192, 132, 252, 0.6);
box-shadow: 0px 0px 70px rgba(109, 40, 217, 0.4);
}
.idle-modal.singularity .idle-modal-title {
color: #d8b4fe;
text-shadow: 0px 0px 24px rgba(168, 85, 247, 0.45);
}
.idle-modal-btn.sing {
border-color: #c084fc;
background-color: rgba(76, 29, 149, 0.9);
color: #f3e8ff;
}
.idle-modal-btn.sing:hover { background-color: rgba(109, 40, 217, 0.95); }
/* Board glows violet while a Twin Reactor / Cascade follow-up is in the air,
so an extra volley reads as an event rather than as the board stuttering. */
.idle-board.cascading {
border-color: rgba(192, 132, 252, 0.65);
box-shadow: 0px 0px 46px rgba(168, 85, 247, 0.35);
}
/* ══════════════════════════════════════════════════════════════════════════
DAILY CONTRACTS
Violet, because contracts pay Fragments and Fragments are already violet
everywhere else in this HUD — the currency chip, the condenser bar, the
toast. Amber belongs to Meltdown and would have read as prestige.
Green marks a finished contract, matching the "collect" green the offline
and achievement toasts already use.
══════════════════════════════════════════════════════════════════════════ */
.idle-card-contracts { border-color: rgba(167, 139, 250, 0.28); }
.idle-card-contracts.ready { border-color: rgba(52, 211, 153, 0.5); }
.idle-card-contracts .idle-card-hd { color: rgba(196, 181, 253, 0.85); }
.idle-card-hd.row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.idle-card-hd-txt {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
color: rgba(196, 181, 253, 0.85);
}
/* The parent .idle-card-hd is uppercased; a live countdown reading
"RESETS IN 5H 12M" is a lot louder than it deserves to be. */
.idle-card-hd-side {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(148, 163, 184, 0.6);
}
.idle-contract {
display: flex;
flex-direction: row;
gap: 9px;
padding: 7px 8px;
border-radius: 9px;
background-color: rgba(10, 14, 22, 0.75);
border: 2px solid rgba(100, 116, 139, 0.16);
cursor: none;
pointer-events: all;
transition: border-color 0.12s, background-color 0.12s, transform 0.06s;
}
.idle-contract:hover { background-color: rgba(20, 26, 38, 0.85); }
.idle-contract.ready {
border-color: rgba(52, 211, 153, 0.85);
background-color: rgba(6, 46, 38, 0.6);
animation: idle-contract-ready 1.1s ease-in-out infinite alternate;
}
.idle-contract.ready:active { transform: translateY(1px); }
.idle-contract.claimed { opacity: 0.45; }
@keyframes idle-contract-ready {
0% { box-shadow: 0px 0px 6px rgba(52, 211, 153, 0.18); }
100% { box-shadow: 0px 0px 20px rgba(52, 211, 153, 0.50); }
}
.idle-contract-icon {
font-size: 19px;
width: 24px;
flex-shrink: 0;
text-align: center;
align-items: center;
justify-content: center;
}
.idle-contract-body {
display: flex;
flex-direction: column;
gap: 2px;
flex-grow: 1;
}
.idle-contract-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.idle-contract-name {
font-size: 12px;
font-weight: 900;
color: #e2e8f0;
}
.idle-contract-reward {
font-size: 10px;
font-weight: 900;
color: rgba(196, 181, 253, 0.9);
flex-shrink: 0;
}
.idle-contract.ready .idle-contract-reward { color: #6ee7b7; }
.idle-contract.claimed .idle-contract-reward { color: rgba(148, 163, 184, 0.7); }
.idle-contract-desc {
font-size: 10px;
font-weight: 600;
color: rgba(148, 163, 184, 0.72);
}
.idle-contract-track {
width: 100%;
height: 5px;
border-radius: 3px;
background-color: rgba(30, 41, 59, 0.9);
overflow: hidden;
margin-top: 3px;
}
/* Same violet as the condenser bar — both are the road to a Fragment. */
.idle-contract-fill {
height: 100%;
border-radius: 3px;
background-color: #a78bfa;
transition: width 0.25s;
}
.idle-contract.ready .idle-contract-fill { background-color: rgba(52, 211, 153, 0.85); }
.idle-contract.claimed .idle-contract-fill { background-color: rgba(52, 211, 153, 0.7); }
.idle-contract-prog {
font-size: 9px;
font-weight: 800;
color: rgba(148, 163, 184, 0.55);
}
.idle-toast.idle-toast-contract { border-color: rgba(167, 139, 250, 0.8); }
/* ══════════════════════════════════════════════════════════════════════════
NEXT GOAL PIN
══════════════════════════════════════════════════════════════════════════ */
.idle-card-goal { border-color: rgba(94, 234, 212, 0.22); }
.idle-goal-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
}
.idle-goal-icon {
font-size: 20px;
width: 26px;
flex-shrink: 0;
text-align: center;
}
.idle-goal-body { display: flex; flex-direction: column; flex-grow: 1; }
.idle-goal-name { font-size: 12px; font-weight: 900; color: #e2e8f0; }
.idle-goal-desc {
font-size: 10px;
font-weight: 600;
color: rgba(148, 163, 184, 0.7);
}
.idle-bar-fill.goal { background-color: rgba(94, 234, 212, 0.85); }
.idle-goal-foot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.idle-goal-prog {
font-size: 10px;
font-weight: 800;
color: rgba(148, 163, 184, 0.6);
}
.idle-goal-reward {
font-size: 10px;
font-weight: 900;
color: rgba(251, 191, 36, 0.85);
}
/* ══════════════════════════════════════════════════════════════════════════
GUIDED WALKTHROUGH — coach marks over the live HUD
The spotlight is a real cut-out: four dim quads that stop at the target
rect, so the highlighted control stays fully lit AND fully clickable while
everything else eats the click. There is no masking in the panel renderer,
which is why it is built this way rather than as one sheet with a hole.
══════════════════════════════════════════════════════════════════════════ */
.rt-layer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 400;
}
/* Background scrim and click blocker. The actual visual dimming of HUD content
is done by .tut-dim below — a scrim alone leaves every emoji punching
through it at full brightness. */
.rt-dim {
position: absolute;
/* Explicit origin: a collapsed quad is given only a width and a height,
and an absolute panel with no anchor falls back to its static position. */
left: 0;
top: 0;
background-color: rgba(2, 5, 10, 0.55);
pointer-events: all;
z-index: 1;
}
/* Applied to whichever HUD blocks are not the subject of the current step. */
.tut-dim {
opacity: 0.24;
transition: opacity 0.22s;
}
.rt-ring {
position: absolute;
border-radius: 18px;
border: 2px solid rgba(94, 234, 212, 0.75);
pointer-events: none;
z-index: 4;
animation: rt-ring 1.9s ease-out infinite;
}
@keyframes rt-ring {
0% { transform: scale(1.00); opacity: 0.85; }
65% { transform: scale(1.07); opacity: 0.00; }
100% { transform: scale(1.07); opacity: 0.00; }
}
.rt-spot {
position: absolute;
border-radius: 16px;
border: 3px solid rgba(94, 234, 212, 0.95);
pointer-events: none;
z-index: 5;
animation: rt-spot 1.5s ease-in-out infinite alternate;
}
@keyframes rt-spot {
0% {
border-color: rgba(94, 234, 212, 0.45);
box-shadow: 0px 0px 14px rgba(45, 212, 191, 0.25);
}
100% {
border-color: rgba(167, 243, 208, 1.00);
box-shadow: 0px 0px 46px rgba(45, 212, 191, 0.70);
}
}
/* Corner brackets — the bit that makes it read as a targeting reticle rather
than as a selected list item. */
.rt-corner {
position: absolute;
width: 20px;
height: 20px;
animation: rt-corner 1.5s ease-in-out infinite alternate;
}
.rt-corner.tl { top: -7px; left: -7px; border-top: 4px solid #fde047; border-left: 4px solid #fde047; }
.rt-corner.tr { top: -7px; right: -7px; border-top: 4px solid #fde047; border-right: 4px solid #fde047; }
.rt-corner.bl { bottom: -7px; left: -7px; border-bottom: 4px solid #fde047; border-left: 4px solid #fde047; }
.rt-corner.br { bottom: -7px; right: -7px; border-bottom: 4px solid #fde047; border-right: 4px solid #fde047; }
@keyframes rt-corner {
0% { opacity: 0.55; transform: scale(0.90); }
100% { opacity: 1.00; transform: scale(1.00); }
}
.rt-card {
position: absolute;
width: 380px;
padding: 16px 18px 14px 18px;
border-radius: 16px;
background-color: rgba(9, 15, 24, 0.98);
border: 2px solid rgba(45, 212, 191, 0.45);
box-shadow: 0px 0px 50px rgba(13, 148, 136, 0.28);
display: flex;
flex-direction: column;
gap: 7px;
pointer-events: all;
z-index: 10;
}
.rt-card.in-a { animation: rt-card-in 0.24s ease-out; }
.rt-card.in-b { animation: rt-card-in 0.24s ease-out; }
@keyframes rt-card-in {
0% { opacity: 0; transform: scale(0.94) translateY(8px); }
100% { opacity: 1; transform: scale(1.00) translateY(0px); }
}
.rt-card-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rt-eyebrow {
font-size: 9px;
font-weight: 900;
letter-spacing: 0.28em;
color: rgba(94, 234, 212, 0.7);
}
.rt-count {
font-size: 10px;
font-weight: 900;
letter-spacing: 0.10em;
color: rgba(148, 163, 184, 0.55);
}
.rt-title {
font-size: 19px;
font-weight: 900;
color: #ccfbf1;
text-shadow: 0px 0px 18px rgba(45, 212, 191, 0.35);
}
.rt-text {
font-size: 13px;
font-weight: 600;
line-height: 1.45;
color: rgba(203, 213, 225, 0.9);
}
.rt-dots {
display: flex;
flex-direction: row;
gap: 4px;
margin-top: 4px;
margin-bottom: 2px;
}
.rt-dot {
width: 16px;
height: 4px;
border-radius: 2px;
background-color: rgba(100, 116, 139, 0.30);
transition: background-color 0.2s, width 0.2s;
}
.rt-dot.done { background-color: rgba(45, 212, 191, 0.45); }
.rt-dot.on { background-color: #5eead4; width: 24px; }
.rt-next {
margin-top: 4px;
padding-top: 11px;
padding-bottom: 11px;
border-radius: 10px;
border: 2px solid #2dd4bf;
background-color: rgba(13, 78, 74, 0.9);
color: #ccfbf1;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.16em;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
transition: background-color 0.1s, transform 0.06s;
}
.rt-next:hover { background-color: rgba(15, 118, 110, 0.95); }
.rt-next:active { transform: translateY(1px); }
/* Shown instead of the button when the step is gated on an action — the two
are mutually exclusive, so there is no way to click past the doing. */
.rt-hint {
margin-top: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
padding: 10px 12px;
border-radius: 10px;
background-color: rgba(69, 26, 3, 0.65);
border: 2px solid rgba(251, 191, 36, 0.65);
animation: rt-hint 1.0s ease-in-out infinite alternate;
}
@keyframes rt-hint {
0% { border-color: rgba(251, 191, 36, 0.35); }
100% { border-color: rgba(253, 224, 71, 0.95); }
}
.rt-hint-pip { font-size: 15px; flex-shrink: 0; }
.rt-hint-txt {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
color: #fde68a;
}
.rt-foot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
}
.rt-back, .rt-skip {
padding: 5px 10px;
border-radius: 7px;
border: 2px solid rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
color: rgba(148, 163, 184, 0.6);
cursor: none;
pointer-events: all;
transition: color 0.1s;
}
.rt-back:hover, .rt-skip:hover { color: rgba(226, 232, 240, 0.95); }
.rt-back.hidden { opacity: 0; pointer-events: none; }
/* ── Help button in the top bar ───────────────────────────────────────── */
.idle-help {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 10px;
border: 2px solid rgba(148, 163, 184, 0.28);
background-color: rgba(15, 23, 35, 0.9);
color: rgba(226, 232, 240, 0.85);
font-size: 20px;
font-weight: 900;
align-items: center;
justify-content: center;
cursor: none;
pointer-events: all;
transition: background-color 0.1s, border-color 0.1s;
}
.idle-help:hover {
background-color: rgba(45, 212, 191, 0.18);
border-color: rgba(45, 212, 191, 0.6);
}
.idle-help.on {
border-color: rgba(45, 212, 191, 0.9);
background-color: rgba(13, 78, 74, 0.9);
color: #5eead4;
}
/* ── Meltdown income preview ──────────────────────────────────────────── */
.idle-melt-gain {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 9px 18px;
border-radius: 11px;
background-color: rgba(15, 23, 35, 0.85);
border: 2px solid rgba(52, 211, 153, 0.35);
}
.idle-melt-gain-from {
font-size: 18px;
font-weight: 900;
color: rgba(148, 163, 184, 0.8);
}
.idle-melt-gain-arrow {
font-size: 16px;
font-weight: 900;
color: rgba(148, 163, 184, 0.6);
}
.idle-melt-gain-to {
font-size: 22px;
font-weight: 900;
color: #6ee7b7;
text-shadow: 0px 0px 16px rgba(52, 211, 153, 0.45);
}
.idle-melt-gain-lbl {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.65);
}