Chain Reaction
Released
●5
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; }
.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); }
}