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

/* TOP HUD */
.topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    border-bottom: 1px solid rgba(167,139,250,0.15);
    z-index: 10;
    background-color: rgba(18,8,42,0.97);
    animation: topbar-shift 20s ease-in-out infinite alternate;
    overflow: hidden;
    z-index: 11;
}

@keyframes topbar-shift {
    0%   { background-color: rgba(18,8,42,0.97); }
    25%  { background-color: rgba(8,24,48,0.97); }
    50%  { background-color: rgba(24,8,40,0.97); }
    75%  { background-color: rgba(8,18,50,0.97); }
    100% { background-color: rgba(20,6,38,0.97); }
}
.hud-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.hud-lbl {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.30);
    text-transform: uppercase;
}
.hud-val {
    font-size: 32px;
    font-weight: 900;
    color: white;
}
.hud-block.wave  .hud-val { color: #a78bfa; }
.hud-block.score .hud-val { color: #34d399; }
.hud-block.best  .hud-val { color: #fbbf24; }
.hud-sep {
    width: 1px;
    height: 120px;
    background-color: rgba(128,95,128,0.07);
}

/* TIMER */
.timer-track {
    position: absolute;
    top: 90px; left: 0; right: 0;
    height: 14px;
    background-color: rgba(255,255,255,0.06);
    z-index: 10;
}
.timer-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #34d399;
    transition: width 0.25s linear, background-color 0.8s ease;
    min-width: 4px;
}

.timer-fill.mid {
    background-color: #a78bfa;           /* half time: purple */
    transition: width 0.25s linear, background-color 0.6s ease;
}
.timer-fill.hurry {
    background-color: #f59e0b;           /* 30%: amber */
    transition: width 0.25s linear, background-color 0.5s ease;
}
.timer-fill.panic {
    background-color: #ef4444;           /* 15%: red */
    transition: width 0.25s linear, background-color 0.3s ease;
    animation: pulse-bar 0.55s ease-in-out infinite alternate;
}
@keyframes pulse-bar {
    from { opacity: 1.0; }
    to   { opacity: 0.5; }
}
/* 
   Three-stage color shift:
   full → hurry  : purple  → amber   (feels warm, attention-grabbing)
   hurry → panic : amber   → red     (urgent)
   panic         : red + pulse animation
*/

/* Challenge sentence — between timer and grid */

.challenge-bar {
    position: absolute;
    top: 104px; 
    left: 0;
    right: 0px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(13,8,32,0.80);
    border-bottom: 1px solid rgba(167,139,250,0.12);
    pointer-events: none;
    z-index: 9;
    transition: background-color 0.4s ease;
}
.challenge-bar.done {
    background-color: rgba(16,42,16,0.85);
    border-bottom-color: rgba(52,211,153,0.25);
}

.ch-icon {
    font-size: 16px;
    color: rgba(167,139,250,0.70);
}
.challenge-bar.done .ch-icon {
    color: #34d399;
}

.ch-label {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
}
.challenge-bar.done .ch-label {
    color: rgba(52,211,153,0.85);
}

.ch-bonus {
    font-size: 13px;
    font-weight: 800;
    color: rgba(251,191,36,0.60);
    background-color: rgba(251,191,36,0.08);
    border-radius: 5px;
    padding: 2px 7px;
}
.challenge-bar.done .ch-bonus {
    color: rgba(52,211,153,0.80);
    background-color: rgba(52,211,153,0.10);
}

/* CHAIN TRACK — above grid, pointer-events none */
.chain-track {
    position: absolute;
    top: 146px;
    left: 0;
    right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    z-index: 15;
}
.chain-track-inner {
    background-color: rgba(13,8,32,0.75);
    border-radius: 14px;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.step {
    background-color: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 6px 17px;
    font-size: 15px;
    border: 1.5px solid rgba(255,255,255,0.06);
    transition: all 0.15s;
}
.step.lit {
    background-color: rgba(167,139,250,0.2);
    color: #c4b5fd;
    border-color: #7c3aed;
    transform: scale(1.15);
}
.arr { font-size: 15px; color: rgba(255,255,255,0.15); }

/* SIDEBAR */
.sidebar {
    position: absolute;
    top: 140px; right: 0; bottom: 0;
    width: 260px;
    background-color: rgba(18,8,42,0.97);
    border-left: 2px solid rgba(167,139,250,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    pointer-events: all;
    z-index: 10;
}
.divider {
    height: 1px;
    background-color: rgba(167,139,250,0.10);
}
.sbl {
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(166,154,219,0.5);
}

/* Legend */
.legend { display: flex; flex-direction: column; gap: 8px; }
.leg    { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,0.38); font-weight: 600; }
.dot    { width: 10px; height: 10px; border-radius: 2px; }
.dot.p0    { background-color: #60a5fa; }
.dot.p1    { background-color: #34d399; }
.dot.p2    { background-color: #fb923c; }
.dot.red   { background-color: #f87171; }
.dot.chain { background-color: #c4b5fd; }

/* Controls */
.controls-hint {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; color: rgba(255,255,255,0.30); font-weight: 500;
}

.spacer { flex-grow: 1; }

/* Message bottom bar — pointer-events none, no text-align */
.msg {
    position: absolute;
    bottom: 8px;
    left: 12px;
    background-color: rgba(4,1,12,1.0);
    border: 1px solid rgba(167,139,250,0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 18px;
    color: rgba(255,255,255,0.55);
    pointer-events: none;
    font-weight: 600;
    z-index: 5;
}
/* GAME OVER */
/* ── Three column layout ── */
.ov-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4,1,12,1.0);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    pointer-events: all;
    z-index: 50;
    overflow: hidden;
}

.ov-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 220px;
    pointer-events: none;
    z-index: 3;
}

.ov-side-card {
    position: relative; /* needed for ::before */
    background-color: rgba(8,3,22,0.90);
    border: 1px solid rgba(139,92,246,0.18);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.ov-side-card.journey {
    gap: 4px;
}
/* Streak card — orange glow line */
.ov-side-card.streak::before {
    background-color: rgba(251,146,60,0.55);
}

.ov-side-card::before {
    content: "";
    position: absolute;
    top: -1px; left: 20%; right: 20%;
    height: 1px;
    background-color: rgba(139,92,246,0.40);
    border-radius: 50%;
}

.ov-side-card.streak {
    border-color: rgba(251,146,60,0.30);
    background-color: rgba(251,146,60,0.05);
}

.ov-side-card-title {
    font-size: 14px;
    font-weight: 900;
    color: rgb(255, 214, 161);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    width: 100%;
    justify-content: center;
       margin-bottom: 8px;
       gap: 3px;
}

/* ── Personal best bar ── */
.ov-pb-bar-wrap { width: 100%; }

.ov-pb-bar-track {
    width: 100%;
    height: 6px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 3px;
    position: relative;
}

.ov-pb-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #a78bfa;
    border-radius: 3px;
    min-width: 4px;
}

.ov-pb-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background-color: rgba(251,191,36,0.80);
    border-radius: 1px;
}

.ov-pb-scores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.ov-pb-score-current {
    font-size: 22px;
    font-weight: 900;
    color: #a78bfa;
}

.ov-pb-score-best {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.30);
}

.ov-pb-newbest {
    font-size: 12px;
    font-weight: 900;
    color: #fbbf24;
    background-color: rgba(251,191,36,0.10);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 8px;
    padding: 3px 10px;
}

/* Game over background Squares */
@keyframes sq-float-1 {
    0%   { margin-top: 0px;    margin-left: 0px; }
    25%  { margin-top: -14px;  margin-left: 8px; }
    50%  { margin-top: -6px;   margin-left: -10px; }
    75%  { margin-top: 10px;   margin-left: 4px; }
    100% { margin-top: 0px;    margin-left: 0px; }
}

@keyframes sq-float-2 {
    0%   { margin-top: 0px;   margin-left: 0px; }
    30%  { margin-top: 12px;  margin-left: -8px; }
    60%  { margin-top: -8px;  margin-left: 12px; }
    100% { margin-top: 0px;   margin-left: 0px; }
}

@keyframes sq-pulse {
    0%,100% { opacity: 0.4; }
    50%     { opacity: 1.0; }
}

.ov-bg-squares {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ov-bg-sq {
    position: absolute;
    border: 1.5px solid;
}

@keyframes sq-drift-a {
    0%   { margin-top: 0px;   margin-left: 0px;   opacity: 0.35; }
    20%  { margin-top: -12px; margin-left: 8px;   opacity: 0.80; }
    40%  { margin-top: -20px; margin-left: -6px;  opacity: 0.50; }
    60%  { margin-top: -8px;  margin-left: -14px; opacity: 0.90; }
    80%  { margin-top: 6px;   margin-left: 4px;   opacity: 0.45; }
    100% { margin-top: 0px;   margin-left: 0px;   opacity: 0.35; }
}

@keyframes sq-drift-b {
    0%   { margin-top: 0px;  margin-left: 0px;  opacity: 0.25; }
    25%  { margin-top: 14px; margin-left: -10px; opacity: 0.70; }
    50%  { margin-top: 6px;  margin-left: 16px;  opacity: 0.90; }
    75%  { margin-top: -10px; margin-left: 8px;  opacity: 0.40; }
    100% { margin-top: 0px;  margin-left: 0px;   opacity: 0.25; }
}

.ov-bg-sq.sq-a {
    animation-name: sq-drift-a;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ov-bg-sq.sq-b {
    animation-name: sq-drift-b;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Alternate float pattern on even squares */
.ov-bg-sq:nth-child(even) {
    animation-name: sq-float-2, sq-pulse;
}

/* ── Journey ── */
.ov-journey-wave {
    font-size: 32px;
    font-weight: 900;
    color: white;
    gap: 3px;
}

.ov-journey-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(167, 255, 179, 0.719);
    word-spacing: 1px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;  /* ← pushes label left, value right */
}

.ov-journey-tag {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.562);
    background-color: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 3px 10px;
}

.ov-journey-tag.good {
    color: #34d399;
    background-color: rgba(52,211,153,0.08);
}

/* ── Streak ── */
.ov-streak-count {
    font-size: 48px;
    font-weight: 900;
    color: #fb923c;
}

.ov-streak-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 199, 125, 0.404);
}

/* ── Next unlock ── */
.ov-unlock-icon { font-size: 32px; }

.ov-unlock-name {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.75);
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-bottom: 2px;
}

.ov-unlock-cost {
    font-size: 12px;
    flex-direction: row;
    font-weight: 700;
    color: rgba(129,140,248,0.70);
    width: 100%;
    justify-content: center;
    text-align: center;
    gap: 3px; /* adds space b/w elements */
}

.ov-unlock-ready {
    font-size: 12px;
    font-weight: 900;
    color: #34d399;
}

.ov-unlock-bar-track {
    width: 100%;
    height: 4px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 2px;
    position: relative;
    margin-top: 4px;
}

.ov-unlock-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #818cf8;
    border-radius: 2px;
    min-width: 4px;
}

.ov-particles {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}
.ov-particle {
    position: absolute;
    bottom: -20px;
    opacity: 0;
    animation-name: particle-rise;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}
@keyframes particle-rise {
    0%   { opacity: 0;   transform: translateY(0px); }
    15%  { opacity: 1; }
    80%  { opacity: 0.7; transform: translateY(-65vh); }
    100% { opacity: 0;   transform: translateY(-105vh); }
}

.ov-box {
    position: relative;
    background-color: rgba(8,3,22,0.98);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 24px;
    padding: 2rem 2.2rem 2.2rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 600px;
    z-index: 3;
    box-shadow: 0px 0px 0px 1px rgba(139,92,246,0.08),
                0px 2px 0px rgba(139,92,246,0.15),
                0px 24px 60px rgba(0s,0,0,0.80),
                inset 0px 1px 0px rgba(255,255,255,0.04);
}

/* Subtle top glow on the box */
.ov-box::before {
    content: "";
    position: absolute;
    top: -1px; left: 15%; right: 15%;
    height: 1px;
    background-color: rgba(167,139,250,0.50);
    border-radius: 50%;
}

.ov-wave-big {
    font-size: 64px;
    font-weight: 900;
    color: #a78bfa;
    letter-spacing: 0.06em;
    animation: ov-section-in 0.6s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

.ov-stats {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.ov-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: rgba(255,255,255,0.02);
    border-radius: 14px;
    padding: 16px 8px 12px 8px;
    position: relative;
    overflow: hidden;
}

.ov-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.ov-stat-icon { font-size: 18px; opacity: 0.70; }

.ov-stat-val {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.ov-stat-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.575);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.ov-stat:nth-child(1) {
    border: 1px solid rgba(52,211,153,0.18);
    background-color: rgba(52,211,153,0.06);
}
.ov-stat:nth-child(2) {
    border: 1px solid rgba(167,139,250,0.18);
    background-color: rgba(167,139,250,0.06);
}
.ov-stat:nth-child(3) {
    border: 1px solid rgba(251,191,36,0.18);
    background-color: rgba(251,191,36,0.06);
}

/* Color accent per stat — target each by position */
.ov-stat:nth-child(1)::before { background-color: #34d399; }
.ov-stat:nth-child(2)::before { background-color: #a78bfa; }
.ov-stat:nth-child(3)::before { background-color: #fbbf24; }

.ov-stat:nth-child(1) { border: 1px solid rgba(52,211,153,0.12); }
.ov-stat:nth-child(2) { border: 1px solid rgba(167,139,250,0.12); }
.ov-stat:nth-child(3) { border: 1px solid rgba(251,191,36,0.12); }

/* ── Stat label colors ── */
.ov-stat:nth-child(1) .ov-stat-val { color: #6ee7b7; }
.ov-stat:nth-child(2) .ov-stat-val { color: #d8b4fe; }
.ov-stat:nth-child(3) .ov-stat-val { color: #fde68a; }


/* Background orbs still game over (ov)*/
@keyframes orb-drift-1 {
    0%   { margin-left: 0px;   margin-top: 0px; }
    33%  { margin-left: 18px;  margin-top: -12px; }
    66%  { margin-left: -10px; margin-top: 20px; }
    100% { margin-left: 0px;   margin-top: 0px; }
}

@keyframes orb-drift-2 {
    0%   { margin-left: 0px;   margin-top: 0px; }
    40%  { margin-left: -20px; margin-top: 14px; }
    70%  { margin-left: 12px;  margin-top: -8px; }
    100% { margin-left: 0px;   margin-top: 0px; }
}

@keyframes orb-drift-3 {
    0%   { margin-left: 0px;  margin-top: 0px; }
    30%  { margin-left: 14px; margin-top: 18px; }
    60%  { margin-left: -8px; margin-top: -14px; }
    100% { margin-left: 0px;  margin-top: 0px; }
}

.ov-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ov-orb-1 {
    width: 280px;
    height: 280px;
    top: -60px;
    left: -80px;
    background-color: rgba(109,40,217,0.06);
    animation: orb-drift-1 12s ease-in-out infinite;
}

.ov-orb-2 {
    width: 200px;
    height: 200px;
    bottom: 40px;
    right: -60px;
    background-color: rgba(99,102,241,0.05);
    animation: orb-drift-2 16s ease-in-out infinite;
}

.ov-orb-3 {
    width: 150px;
    height: 150px;
    top: 40%;
    left: 30%;
    background-color: rgba(244,114,182,0.03);
    animation: orb-drift-3 20s ease-in-out infinite;
}

/* Game over - secret */
.ov-secret-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(244,114,182,0.70);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: ov-in 0.5s ease-out 1.6s both;
}
.ov-secrets {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.ov-secret {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: rgba(244,114,182,0.08);
    border: 1px solid rgba(244,114,182,0.25);
    border-radius: 14px;
    padding: 14px 18px;
    min-width: 80px;
    overflow: hidden;
}
.ov-secret.locked {
    background-color: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    animation: chest-idle 2s ease-in-out infinite;
}
.ov-secret.rare {
    background-color: rgba(251,191,36,0.10);
    border-color: rgba(251,191,36,0.45);
}
.ov-secret.pop      { animation: chest-pop      0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.ov-secret.rare.pop { animation: chest-pop-rare 1.0s cubic-bezier(0.22,1,0.36,1) forwards; }
.ov-secret-icon { font-size: 28px; color: white; }
.ov-secret-lbl  { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.80); }
.ov-secret.rare .ov-secret-lbl { color: #fbbf24; }
.ov-secret-shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    animation: shine-sweep 0.6s ease-out 0.1s forwards;
    pointer-events: none;
}

.ov-section-enter {
    animation: ov-section-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes ov-section-in {
    0%   { margin-top: 24px; }
    100% { margin-top: 0px; }
}

/* Clickable secret chests during Game Over */
.ov-secret.clickable {
    cursor: pointer;
    border-color: rgba(167,139,250,0.55);
    background-color: rgba(167,139,250,0.10);
    animation: chest-idle 1.0s ease-in-out infinite;
    pointer-events: all;
}

.ov-secret.clickable:hover {
    background-color: rgba(167,139,250,0.20);
    border-color: rgba(167,139,250,0.85);
}

@keyframes chest-idle {
    0%,100% { transform: rotate(0deg); }
    25%     { transform: rotate(-2deg) scale(1.02); }
    75%     { transform: rotate(2deg)  scale(1.02); }
}
@keyframes chest-pop {
    0%   { transform: scale(1.0); }
    20%  { transform: scale(0.88); }
    55%  { transform: scale(1.22); }
    75%  { transform: scale(0.96); }
    100% { transform: scale(1.0); }
}
@keyframes chest-pop-rare {
    0%   { transform: scale(1.0)  rotate(0deg); }
    15%  { transform: scale(0.82) rotate(-4deg); }
    45%  { transform: scale(1.35) rotate(3deg); }
    65%  { transform: scale(0.93) rotate(-1deg); }
    82%  { transform: scale(1.06) rotate(0deg); }
    100% { transform: scale(1.0)  rotate(0deg); }
}
@keyframes shine-sweep {
    0%   { transform: translateX(-200%); }
    100% { transform: translateX(300%); }
}

/* Secret section - when clickicking */
.ov-secret-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ov-secret-eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: rgba(244,114,182,0.70);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ov-secret-hint {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
}

/* ── Chest cards ── */

.ov-chest-cards {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
}

.ov-chest-card {
    width: 130px;
    height: 150px;
    border-radius: 16px;
    border: 1.5px solid rgba(167,139,250,0.15);
    background-color: rgba(13,6,32,0.90);
    position: relative;
    overflow: visible;
    cursor: default;
    box-shadow: 0px 4px 0px rgba(0,0,0,0.40);
}

.ov-chest-card.ready {
    border-color: rgba(167,139,250,0.55);
    background-color: rgba(60,20,140,0.25);
    cursor: pointer;
    pointer-events: all;
    animation: chest-card-ready 1.4s ease-in-out infinite alternate;
    box-shadow: 0px 4px 0px rgba(0,0,0,0.40),
                0px 0px 20px rgba(167,139,250,0.15);
}

.ov-chest-card.ready:hover {
    border-color: rgba(167,139,250,0.90);
    background-color: rgba(109,40,217,0.30);
}

.ov-chest-card.waiting {
    border-color: rgba(255,255,255,0.06);
    background-color: rgba(255,255,255,0.02);
    box-shadow: none;
}

.ov-chest-card.revealed {
    border-color: rgba(129,140,248,0.35);
    background-color: rgba(99,102,241,0.08);
    box-shadow: 0px 4px 0px rgba(0,0,0,0.30),
                0px 0px 16px rgba(129,140,248,0.10);
}

.ov-chest-card.revealed.rare {
    border-color: rgba(251,191,36,0.50);
    background-color: rgba(251,191,36,0.08);
    box-shadow: 0px 4px 0px rgba(0,0,0,0.30),
                0px 0px 24px rgba(251,191,36,0.12);
}

.ov-chest-card.pop-in {
    animation: chest-card-pop 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}

.ov-chest-card-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.ov-chest-emoji {
    font-size: 48px;
    animation: chest-card-idle 2.2s ease-in-out infinite alternate;
}

.ov-chest-card.waiting .ov-chest-emoji {
    opacity: 0.25;
    animation: none;
}

.ov-chest-tap {
    font-size: 10px;
    font-weight: 900;
    color: white;
    background-color: rgba(167,139,250,0.35);
    border: 1px solid rgba(167,139,250,0.50);
    border-radius: 6px;
    padding: 3px 10px;
    letter-spacing: 0.12em;
}

.ov-chest-tap.locked {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.20);
}

.ov-chest-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    animation: chest-glow-pulse 1.2s ease-in-out infinite alternate;
    pointer-events: none;
}

.ov-chest-card.ready {
    border-color: rgba(167,139,250,0.60);
    background-color: rgba(109,40,217,0.18);
    cursor: pointer;
    pointer-events: all;
    animation: chest-card-ready 1.2s ease-in-out infinite alternate;
}

.ov-chest-reward-icon {
    font-size: 40px;
}

.ov-chest-reward-lbl {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.75);
    padding: 0px 8px;
}

/* rare badge */
.ov-chest-revealed-icon {
    font-size: 40px;
}

.ov-chest-revealed-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ov-chest-revealed-lbl {
    font-size: 13px;
    font-weight: 900;
    color: white;
    padding: 0px 4px;
}

.ov-chest-rare-badge {
    font-size: 9px;
    font-weight: 900;
    color: #fbbf24;
    background-color: rgba(251,191,36,0.10);
    border: 1px solid rgba(251,191,36,0.30);
    border-radius: 20px;
    padding: 2px 8px;
    letter-spacing: 0.10em;
}

.ov-confetti-bit {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation-name: confetti-fly;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes confetti-fly {
    0%   { opacity: 1; transform: translateY(0px) rotate(0deg) scale(1.2); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-140px) rotate(520deg) scale(0.4); }
}

@keyframes chest-card-ready {
    0%   { transform: translateY(0px) scale(1.0); }
    100% { transform: translateY(-5px) scale(1.02); }
}

@keyframes chest-card-idle {
    0%   { transform: translateY(0px) rotate(-1.5deg); }
    100% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes chest-card-pop {
    0%   { transform: scale(1.0); }
    20%  { transform: scale(0.85); }
    55%  { transform: scale(1.25); }
    75%  { transform: scale(0.96); }
    100% { transform: scale(1.0); }
}

@keyframes chest-glow-pulse {
    0%   { opacity: 0.4; }
    100% { opacity: 1.0; }
}

@keyframes chest-shine-sweep {
    0%   { transform: translateX(-100%); }
    40%  { transform: translateX(250%); }
    100% { transform: translateX(250%); }
}

@keyframes confetti-fly {
    0%   { opacity: 1; transform: translateY(0px) rotate(0deg) scale(1.0); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-90px) rotate(380deg) scale(0.6); }
}

/* Frags section */
.ov-frag-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background-color: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 18px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer across the top */
.ov-frag-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background-color: rgba(129,140,248,0.35);
}

.ov-frag-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.ov-frag-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: rgba(255,255,255,0.025);
    border-radius: 8px;
    border-left: 2px solid rgba(129,140,248,0.20);
}

.ov-frag-line-lbl {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
}

.ov-frag-line-val {
    font-size: 13px;
    font-weight: 900;
    color: #818cf8;
}

.ov-frag-label {
    font-size: 10px;
    font-weight: 900;
    color: rgba(129,140,248,0.55);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ov-frag-val {
    font-size: 52px;
    font-weight: 900;
    color: #818cf8;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ov-frag-total {
    font-size: 12px;
    font-weight: 700;
    color: rgba(129,140,248,0.50);
    border-top: 1px solid rgba(129,140,248,0.10);
    padding-top: 8px;
    width: 100%;
    text-align: center;
}

.ov-frag-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.22);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/**/

.ov-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: ov-score-appear 0.6s ease-out forwards;
}

@keyframes ov-score-appear {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.ov-score-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 0.18em; text-transform: uppercase; }
.ov-score       { font-size: 62px; font-weight: 900; color: #a78bfa; }
.ov-score.gold  { color: #fbbf24; }
.ov-newbest-badge {
    font-size: 15px;
    font-weight: 900;
    color: #fbbf24;
    background-color: rgba(251,191,36,0.12);
    border: 1.5px solid rgba(251,191,36,0.40);
    border-radius: 8px;
    padding: 4px 14px;
    letter-spacing: 0.12em;
    animation: badge-slam 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}
@keyframes badge-slam {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1.0); }
}
.ov-btns { display: flex; flex-direction: row; gap: 12px; }

/* ── Play Again button sweep ── */
.ov-btn-wrap {
    position: relative;
    overflow: hidden;
    background-color: #3aed3a;
    border: 1.5px solid #8bfa9a;
    border-radius: 12px;
    color: white;
    font-size: 30px;
    font-weight: 800;
    padding: 15px 40px;
    cursor: pointer;
    pointer-events: all;
    animation: btn-breathe 2.2s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes btn-breathe {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.05); }
}

.ov-btn-shine {
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 40%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    animation: btn-shine-sweep 3.0s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn-shine-sweep {
    0%   { left: -80%; }
    45%  { left: 140%; }
    100% { left: 140%; }
}

@keyframes ov-in {
    0%   { opacity: 0; transform: translateY(12px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1.0); }
}

.ov-reveal {
    animation: ov-in 0.4s ease-out both;
}

/* Main Menu Button */
.ov-btn-menu {
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    color: rgba(255,255,255,0.40);
    font-size: 14px;
    font-weight: 700;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov-btn-menu:hover {
    background-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
}

/* -------------------- Modifier strip -----------------------
* This shows the equipped modifiers as a vertical strip in the sidebar
* Each item has its icon, name, and a tooltip on hover showing the full description. 
* The green tint matches the "active" color language used in the shop, 
* creating visual consistency between menu and game.

* Players can now glance at the sidebar mid-run and see exactly what's buffing them
* Combined with the boss multiplier suppression warning I added, 
* the player always knows what's affecting their score
*/
.mod-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.mod-strip-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: rgba(52,211,153,0.06);
    border: 1px solid rgba(52,211,153,0.20);
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.mod-strip-item:hover {
    background-color: rgba(52,211,153,0.12);
}

.mod-strip-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.mod-strip-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.04em;
}

/* ── Game over reason ── */
.ov-reason {
    animation: ov-section-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.5s both;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    padding: 8px 16px;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    width: 100%;
    justify-content: center;
}

/* ---------------- SCREEN SHAKE ---------------- */
.hud-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.hud-overlay.shake-small  { animation: shake-small  0.25s ease-out; }
.hud-overlay.shake-medium { animation: shake-medium 0.35s ease-out; }
.hud-overlay.shake-strong { animation: shake-strong 0.45s ease-out; }
.hud-overlay.shake-insane { animation: shake-insane 0.55s ease-out; }

.mini-hand.shake-small  { animation: shake-small  0.25s ease-out; }
.mini-hand.shake-medium { animation: shake-medium 0.35s ease-out; }
.mini-hand.shake-strong { animation: shake-strong 0.45s ease-out; }
.mini-hand.shake-insane { animation: shake-insane 0.55s ease-out; }

@keyframes shake-small {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(-2px, 1px); }
    50%     { transform: translate(2px, -1px); }
    75%     { transform: translate(-1px, 2px); }
}
@keyframes shake-medium {
    0%,100% { transform: translate(0,0); }
    20%     { transform: translate(-4px, 2px) rotate(-0.3deg); }
    40%     { transform: translate(4px,-3px) rotate(0.3deg); }
    60%     { transform: translate(-3px, 3px) rotate(-0.2deg); }
    80%     { transform: translate(3px,-2px) rotate(0.2deg); }
}
@keyframes shake-strong {
    0%,100% { transform: translate(0,0); }
    15%     { transform: translate(-6px, 3px) rotate(-0.5deg); }
    30%     { transform: translate(6px,-4px) rotate(0.5deg); }
    45%     { transform: translate(-5px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(5px,-4px) rotate(0.4deg); }
    75%     { transform: translate(-3px, 2px); }
    90%     { transform: translate(2px,-2px); }
}
@keyframes shake-insane {
    0%,100% { transform: translate(0,0); }
    10%     { transform: translate(-9px, 5px) rotate(-0.7deg); }
    20%     { transform: translate(9px,-6px) rotate(0.7deg); }
    30%     { transform: translate(-8px, 7px) rotate(-0.6deg); }
    40%     { transform: translate(8px,-6px) rotate(0.6deg); }
    50%     { transform: translate(-6px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(6px,-5px) rotate(0.4deg); }
    70%     { transform: translate(-4px, 3px); }
    80%     { transform: translate(3px,-3px); }
    90%     { transform: translate(-1px, 1px); }
}

/* ────────────────────────────────────────────────────────────────── */
/* ────── Consumable strip — horizontal bar below challenge bar ───── */
/* ────────────────────────────────────────────────────────────────── */
.consumable-strip {
    position: absolute;
    bottom: 120px;         /* sits above the bomb wheel */
    left: 0;
    right: 150px;     /* leave room for sidebar */
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    pointer-events: all;
    z-index: 20;
}

.consumable-slot {
    position: relative;
    left: 70px;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.10);
    background-color: rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    position: relative;
}

.consumable-slot.available {
    border-color: rgba(167,139,250,0.50);
    background-color: rgba(109,40,217,0.15);
    cursor: pointer;
}

.consumable-slot.available:hover {
    background-color: rgba(109,40,217,0.30);
    border-color: rgba(167,139,250,0.80);
}

.consumable-slot.empty {
    opacity: 0.25;
    cursor: default;
}

.consumable-icon {
    font-size: 22px;
    pointer-events: none;
}

/* Count badge — bottom right corner of slot */
.consumable-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 900;
    color: rgba(167,139,250,0.95);
    pointer-events: none;
}

/* ── Screen Flash ── */
.screen-flash {
    position: absolute;
    top: 0; left: 0;
    width: 2200px;
    height: 1400px;
    pointer-events: none;
    z-index: 100;
}

.flash-text {
    position: absolute;
    top: 485px;        /* roughly vertical center of 1080p */
    left: 1055px;       /* roughly horizontal center minus half text width */
    font-size: 72px;
    font-weight: 900;
    color: rgba(255,255,255,0.90);
    pointer-events: none;
    animation: flash-text-pop 1.2s ease-out forwards;
        text-shadow:
        -3px -3px 0 #000,
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000,
        -4px  0   0 #000,
         4px  0   0 #000,
         0   -4px  0 #000,
         0    4px  0 #000;
	z-index: 10;
}

@keyframes flash-text-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

@keyframes flash-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flash-boss-spawn {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flash-wave {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}

.screen-flash.flash-boss-spawn {
    background-color: rgba(220, 30, 30, 0.50);
    animation: flash-boss-spawn 2.5s ease-out forwards;
}

.screen-flash.flash-boss-death {
    background-color: rgba(251,191,36,0.55);
    animation: flash-fade 0.6s ease-out forwards;
}

.screen-flash.flash-wave-start {
    background-color: rgba(138, 92, 246, 0.082);  /* was 0.18 — lighter */
    animation: flash-wave .9s ease-out forwards;  /* was 2.5s — faster */
}

.screen-flash.flash-new-best {
    background-color: rgba(52,211,153,0.45);
    animation: flash-fade 1.0s ease-out forwards;
}

.screen-flash.flash-game-over {
    background-color: rgba(180,20,20,0.60);
    animation: flash-fade 0.8s ease-out forwards;
}

/* ------------------------------------------- */
/* -------------- Pet Companion -------------- */
/* ------------------------------------------- */

.hud-pet-wrap {
    position: absolute;
    bottom: 55px;
    left: 15px;
    width: 220px;
    height: 870px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 14px 0px 14px;
    z-index: 6;
}

.hud-pet {
    font-size: 110px;
    animation: hud-pet-idle 2.5s ease-in-out infinite alternate;
    opacity: 0.8;
    margin-bottom: 10px;
    margin-left: 0px;
}
.hud-pet image {
    width: 110px;
    height: 110px;
}

.hud-pet-egg-icon
{
    width: 110px;
    height: 110px;
}

/* Top section — modifiers + curse */
.hud-pet-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Bottom section — pet + hearts, pinned to bottom */
.hud-pet-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-size: 64px; 

}

@keyframes pet-bob {
    from { transform: translateY(0px); }
    to   { transform: translateY(-8px); }
}

.pet-bob {
    animation: pet-bob 1.4s ease-in-out infinite alternate;
}

.hud-pet-egg {
    width: 120px;
    height: 120px;
}

.hud-pet-bottom image {
    width: 134px;
    height: 134px;
    margin-left: -10px;
}

.pet-sbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(166,154,219,0.5);
}

.hud-pet-card {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(18,8,42,0.92);
    border: 1px solid rgba(167,139,250,0.18);
    border-radius: 14px 14px 0px 0px;
    z-index: -1;
}

@keyframes hud-pet-idle {
    0%   { transform: translateY(0px) scale(1.0); }
    100% { transform: translateY(-6px) scale(1.05); }
}

/* -------------------------------------------------- */
/* -------------- Hearts/Lives Sidebar -------------- */
/* -------------------------------------------------- */

.hud-pet-lives {
    position: absolute;
    right: 0px;
    left: 150px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hud-pet-heart {
    font-size: 40px;
}

.hud-pet-heart.empty {
    opacity: 0.20;
}

/* -------------------------------------------------- */
/* -------------- BACKGROUND (grid-like) ------------ */
/* -------------------------------------------------- */

.game-bg-grid {
    position: absolute;
    top: 90px; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.game-bg-cell {
    position: absolute;
    width: 232px;
    height: 232px;
    border-radius: 10px;
    border: 2px solid rgba(66, 54, 75, 0.04);
    z-index: 0;
}

.game-bg-cell.gbg-idle  { /* inline style from WaveGridColor — already very dark hex */ }
.game-bg-cell.gbg-expl  { background-color: rgba(10,4,24,0.95); border-color: rgba(251,146,60,0.22); }
.game-bg-cell.gbg-expl2 { background-color: rgba(10,4,24,0.95); border-color: rgba(251,191,36,0.22); }
.game-bg-cell.gbg-gold  { background-color: rgba(10,4,24,0.95); border-color: rgba(251,191,36,0.16); }
.game-bg-cell.gbg-red   { background-color: rgba(10,4,24,0.95); border-color: rgba(248,113,113,0.16); }
.game-bg-cell.gbg-chain { background-color: rgba(10,4,24,0.95); border-color: rgba(196,181,253,0.14); }

/* SIDEBAR BUTTON (info) */
.sidebar-toggle {
    position: absolute;
    top: 155px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    background-color: rgba(180,30,30,0.85);
    border: 2px solid rgba(255,100,100,0.60);
    color: white;
    font-size: 20px;
    font-weight: 900;
    pointer-events: all;
    z-index: 20;
    cursor: pointer;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.60);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    background-color: rgba(220,40,40,0.95);
    border-color: rgba(255,140,140,0.80);
}

/**/
.pet-mod-strip {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-top: 8px;
}

.pet-mod-item {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(52,211,153,0.10);
    border: 1px solid rgba(52,211,153,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pet-curse-warning {
    font-size: 13px;
    font-weight: 800;
    color: rgba(248,113,113,0.85);
    margin-top: 6px;
    padding: 4px 8px;
    background-color: rgba(239,68,68,0.10);
    border: 1px solid rgba(248,113,113,0.20);
    border-radius: 6px;
}

/* Min chest requirement (displayed on left side bar)*/
.hud-min-chests {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 23px;
    background-color: rgba(0,0,0,0.35);
    border-radius: 6px;
    margin-top: 4px;
    justify-content: center;
}

.hud-min-chests-lbl {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
}

.hud-min-chests-val {
    font-size: 18px;
    font-weight: 900;
    color: rgba(251,191,36,0.90);
}

/* MUSIC DEBUG */
.mm-dev-music-panel {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background-color: rgba(4,1,13,0.90);
    border: 1px dashed rgba(244,114,182,0.30);
    border-radius: 6px;
    z-index: 99;
    pointer-events: all;
}

.mm-dev-music-label {
    font-size: 9px;
    font-weight: 900;
    color: rgba(244,114,182,0.60);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.mm-dev-btn {
    background-color: rgba(244,114,182,0.15);
    border: 1px solid rgba(244,114,182,0.30);
    border-radius: 4px;
    color: rgba(244,114,182,0.85);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    pointer-events: all;
    letter-spacing: 0.05em;
}

.mm-dev-btn:hover {
    background-color: rgba(244,114,182,0.25);
}

.mm-dev-btn-active {
    background-color: rgba(52,211,153,0.20);
    border-color: rgba(52,211,153,0.50);
    color: rgba(52,211,153,0.90);
}

/* =============== New SURVIVAL mode =============== */
.survival-timer {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(10,4,28,0.80);
    border: 2px solid rgba(239,68,68,0.35);
    border-radius: 10px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.55);
    z-index: 10;
}

.survival-timer-icon {
    font-size: 16px;
}

.survival-timer-val {
    font-size: 20px;
    font-weight: 900;
    color: rgba(251,191,36,0.90);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.survival-spawn-track {
    position: absolute;
    top: 145px; /* just below the timer pill */
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 6px;
    background-color: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    z-index: 10;
}

.survival-spawn-fill {
    height: 100%;
    background-color: rgba(251,191,36,0.85);
    transition: width 0.1s linear;
}

/* CAT */
.mm-pet-hero-emoji image {
    width: 170px;   /* bump this up to whatever size you want */
    height: 170px;
    image-rendering: pixelated; /* keep it crisp if it's pixel art */
    margin-left: -10px;
}

.mm-pet-hero-emoji {
    position: relative;
}
.cat-anchor { position: relative; }



.cat-speech-bubble {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,0.95);
    color: #1a1030;
    font-size: 14px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
    z-index: 10;
    animation: bubble-pop 0.2s ease-out both;
}

.cat-speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.95);
    transform: translateX(-50%) rotate(45deg);
}

@keyframes bubble-pop {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.0); }
}