@font-face {
    font-family: 'Learninglings';
    src: url('/Learninglings.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Learninglings', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    color: #333;
    position: relative; /* Added for positioning reset button relative to body */
    transition: background 1s ease-in-out, color 1s ease-in-out, filter 0.5s ease; /* Smooth transition for background changes and filter */
}

/* Color Inversion */
.inverted {
    filter: invert(1);
}

/* Negative numbers turn the background black */
body.negative-bg {
    background: #000;
    color: #eee;
}

body.negative-bg .container {
    background-color: #111;
}

.space-bg {
    background: url('space_background.png') no-repeat center center fixed;
    background-size: cover;
    color: #eee; /* Lighten text for contrast */
}

/* New style for the Universe background */
.universe-bg {
    background: url('universe_background.png') no-repeat center center fixed;
    background-size: cover;
    color: #00ff00; /* Neon green text for extreme contrast */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

/* New style for the Multiverse background */
.multiverse-bg {
    background: url('multiverse_background.png') no-repeat center center fixed;
    background-size: cover;
    color: #ffff00; /* Bright yellow/gold text for chaos */
    text-shadow: 0 0 10px rgba(255, 165, 0, 1), 0 0 20px rgba(255, 0, 255, 0.8); /* Orange and Magenta glow */
}

.multiverse-bg .container {
    background-color: rgba(10, 0, 20, 0.9); /* Very dark, opaque container */
    box-shadow: 0 0 40px rgba(255, 255, 0, 1); /* Intense glow */
}

.multiverse-bg h1 {
    color: #00ffff; /* Cyan header */
}

/* New style for Hyper/Omega background */
.hyper-bg {
    background: url('hyper_background.png') no-repeat center center fixed;
    background-size: cover;
    color: #000; /* Dark text for blinding white background */
    text-shadow: 0 0 5px #fff;
}

.hyper-bg .container {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.9);
    border: 3px solid #ffd700;
}

.hyper-bg h1 {
    color: #ff4500;
}

.universe-bg .container {
    background-color: rgba(0, 0, 0, 0.8); /* Darker, more prominent container */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.7); /* Ethereal glow */
}

.universe-bg h1 {
    color: #ff00ff; /* Magenta for header in universe */
}

.space-bg .container {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent container */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); /* Lighter shadow */
}

.space-bg h1 {
    color: #00ffff; /* Cyan for header in space */
}

.reset-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #6c757d; /* Grey */
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    z-index: 10; /* Ensure it's above other elements if they overlap */
}

/* Like button styling */
#likeBtn {
    background-color: #e83e8c;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#likeBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(232,62,140,0.18); }
#likeBtn:active { transform: scale(0.98); box-shadow: none; }
#likeCount {
    font-size: 1.1em;
    color: #e83e8c;
    min-width: 28px;
    text-align: left;
}

.reset-button:hover {
    background-color: #5a6268;
}

/* New style for the Revealer button */
.revealer-button {
    right: auto;
    left: 20px; /* Position it on the left */
    background-color: #ff4500; /* Orange Red */
}

.revealer-button:hover {
    background-color: #cc3700;
}

/* New style for the Display-rators button */
.display-separators-button {
    top: 65px; /* Position it below the reset button */
    background-color: #000080; /* Navy Blue */
}

.display-separators-button:hover {
    background-color: #000066; /* Darker Navy Blue on hover */
}

/* New style for the Mode button */
.mode-button {
    top: 110px; /* Position it below the display-rators button */
    background-color: #8a2be2; /* Blue Violet */
}

.mode-button:hover {
    background-color: #7a1fd1;
}

/* New style for the Base button */
.base-button {
    top: 155px; /* Position it below the mode button */
    background-color: #d63384; /* Deep Pink */
}

.base-button:hover {
    background-color: #b82a71;
}

/* New style for the Zero button */
.zero-button {
    top: 200px; /* Position it below the base button */
    background-color: #34495e; /* Midnight Blue/Grey */
}

.zero-button:hover {
    background-color: #2c3e50;
}

/* Custom symbol button: only shown when at Ω */
#customOmegaBtn {
    right: auto;
    left: 20px;
    top: 65px;
    background-color: #ffd700;
    color: #000;
    display: none;
}

#customOmegaBtn:hover {
    background-color: #e6c200;
}

/* Restart button: full reset, fixes everything */
#restartBtn {
    right: auto;
    left: 20px;
    top: 110px;
    background-color: #e67e22;
}

#restartBtn:hover {
    background-color: #c96a1a;
}

/* Light button: removes the 1998 effects and resets */
#lightBtn {
    right: auto;
    left: 20px;
    top: 155px;
    background-color: #8e44ad;
}

#lightBtn:hover {
    background-color: #7a3a94;
}

#lightBtn.lit {
    background-color: #fff;
    color: #000;
    box-shadow: 0 0 22px #fff;
}

/* Red REBOOT button (always visible) */
#rebootMainBtn {
    right: auto;
    left: 20px;
    top: 200px;
    background-color: #d50000;
}

#rebootMainBtn:hover {
    background-color: #ff0000;
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.6);
}

/* Exit button: goes to the title screen */
#exitBtn {
    right: auto;
    left: 20px;
    top: 245px;
    background-color: #333;
}

#exitBtn:hover {
    background-color: #111;
}

/* Title screen with random numbers floating in the air */
.title-screen {
    position: fixed;
    inset: 0;
    z-index: 10007;
    background: radial-gradient(circle at 50% 30%, #1a2a6c 0%, #b21f1f 55%, #fdbb2d 110%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.title-screen.hidden {
    display: none;
}

.title-content {
    text-align: center;
    z-index: 2;
}

.title-logo {
    font-size: 3.2em;
    color: #fff;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
    margin-bottom: 34px;
    letter-spacing: 2px;
}

.title-enter {
    font-family: 'Learninglings', Arial, sans-serif;
    font-size: 1.6em;
    padding: 14px 44px;
    border-radius: 10px;
    border: 3px solid #fff;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.title-enter:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.5);
}

.title-bases {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.title-bases-label {
    font-family: 'Learninglings', Arial, sans-serif;
    color: #fff;
    font-size: 1.3em;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    margin-right: 4px;
}

.title-base {
    font-family: 'Learninglings', Arial, sans-serif;
    font-size: 1.1em;
    min-width: 52px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.title-base:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.title-base.active {
    background: #fdbb2d;
    color: #1a2a6c;
    border-color: #fdbb2d;
    box-shadow: 0 0 18px rgba(253, 187, 45, 0.7);
}

.title-number {
    position: absolute;
    color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
    user-select: none;
    pointer-events: none;
    animation: float-up linear infinite;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

@keyframes float-up {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.7; }
    85% { opacity: 0.7; }
    100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

/* Felix: waving character on the title screen */
.felix {
    margin-top: 44px;
    display: inline-block;
    text-align: center;
}

.felix-text {
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 12px;
}

.felix-body {
    width: 90px;
    height: 80px;
    background: #e74c3c;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    position: relative;
    margin: 0 auto;
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12);
    animation: blob-idle 3s ease-in-out infinite;
}

.felix-eye {
    position: absolute;
    top: 26px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}

.felix-eye.left { left: 22px; }
.felix-eye.right { right: 22px; }

.felix-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    background: #222;
    border-radius: 50%;
}

.felix-mouth {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 8px;
    border-bottom: 3px solid #222;
    border-radius: 0 0 50% 50%;
}

.felix-arm {
    position: absolute;
    top: 22px;
    width: 11px;
    height: 36px;
    background: #e74c3c;
    border-radius: 6px;
    transform-origin: top center;
}

.felix-arm.left {
    left: -12px;
    animation: wave-left 0.9s ease-in-out infinite;
}

.felix-arm.right {
    right: -12px;
    animation: wave-right 0.9s ease-in-out infinite;
}

@keyframes wave-left {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(-62deg); }
}

@keyframes wave-right {
    0%, 100% { transform: rotate(18deg); }
    50% { transform: rotate(62deg); }
}

/* Blob creator on the title screen */
.blob-creator-btn {
    margin-top: 26px;
    font-size: 1.1em;
    padding: 10px 26px;
}

.blob-creator-panel {
    margin: 20px auto 0;
    max-width: 320px;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
}

.blob-creator-panel.hidden {
    display: none;
}

.blob-creator-title {
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 12px;
}

.blob-colors {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.blob-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.15s;
}

.blob-color:hover {
    transform: scale(1.15);
}

.blob-color.selected {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.blob-slider-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.blob-slider-label {
    color: #fff;
    font-size: 0.9em;
}

.blob-color-picker {
    width: 40px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

#blobNameInput {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: none;
    font-size: 0.95em;
    margin-bottom: 12px;
    text-align: center;
}

.blob-create {
    font-size: 1em;
    padding: 8px 24px;
}

.created-blobs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
}

.created-blob {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: blob-pop 0.4s ease;
}

.created-blob-body {
    width: 60px;
    height: 54px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.15);
    animation: blob-idle 3s ease-in-out infinite;
}

.created-eye {
    position: absolute;
    top: 16px;
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
}

.created-eye.l { left: 15px; }
.created-eye.r { right: 15px; }

.created-eye::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 4px;
    height: 4px;
    background: #222;
    border-radius: 50%;
}

.created-mouth {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 6px;
    border-bottom: 2px solid #222;
    border-radius: 0 0 50% 50%;
}

.created-name {
    color: #fff;
    font-size: 0.85em;
    margin-top: 8px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

@keyframes blob-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Band mode */
#bandBtn {
    right: auto;
    left: 20px;
    top: 290px;
    background-color: #9b59b6;
}

#bandBtn:hover {
    background-color: #8540a0;
}

.band-mode {
    position: fixed;
    inset: 0;
    z-index: 10008;
    background: radial-gradient(circle at 50% 120%, #3d1f00 0%, #1a0b00 60%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.band-mode.hidden {
    display: none;
}

.band-stage {
    text-align: center;
    position: relative;
    width: min(720px, 94vw);
}

.band-title {
    font-size: 2em;
    color: #ffd700;
    letter-spacing: 4px;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.7);
    margin-bottom: 40px;
}

.band-members {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 44px;
    max-height: 46vh;
    overflow-y: auto;
}

.band-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.band-name {
    color: #ffd700;
    font-size: 1.1em;
    margin-top: 14px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.band-member {
    width: 90px;
    height: 80px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.15);
    animation: band-bounce 0.7s ease-in-out infinite;
}

.band-member.red {
    background: #e74c3c;
    animation-delay: 0s;
}

.band-member.green {
    background: #2ecc71;
    animation-delay: 0.18s;
}

.band-member.monster {
    background: #17101f;
    animation-delay: 0.36s;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 0, 0, 0.4);
}

/* Empty band slot (placeholder) */
.band-member.empty {
    background: transparent;
    border: 3px dashed rgba(255, 255, 255, 0.35);
    box-shadow: none;
    animation: none;
}

.band-member.empty::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.6em;
}

.band-eye {
    position: absolute;
    top: 26px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}

.band-eye.l { left: 22px; }
.band-eye.r { right: 22px; }

.band-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    background: #222;
    border-radius: 50%;
}

.band-member.monster .band-eye::after {
    background: #ff2222;
    box-shadow: 0 0 6px #ff2222;
}

.band-member.monster2 {
    background: #2d1b4e;
    animation-delay: 0.42s;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(150, 60, 255, 0.5);
}

.band-member.monster2 .band-eye::after {
    background: #3dff7a;
    box-shadow: 0 0 6px #3dff7a;
}

/* Three more monsters */
.band-member.monster3 {
    background: #0d3d1f;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(60, 255, 60, 0.45);
}

.band-member.monster3 .band-eye::after {
    background: #ff4444;
    box-shadow: 0 0 6px #ff4444;
}

.band-member.monster4 {
    background: #0b1f3d;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(60, 140, 255, 0.5);
}

.band-member.monster4 .band-eye::after {
    background: #ffa500;
    box-shadow: 0 0 6px #ffa500;
}

.band-member.monster5 {
    background: #3d0b0b;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 60, 60, 0.5);
}

.band-member.monster5 .band-eye::after {
    background: #fff000;
    box-shadow: 0 0 6px #fff000;
}

/* Ninny: a green hippo */
.band-member.hippo {
    background: #4caf50;
    animation-delay: 0.24s;
    border-radius: 48% 48% 46% 46% / 55% 55% 45% 45%;
}

/* Penny: a dark green hippo */.band-member.hippo.penny {
    background: #1b5e20;
}

.band-member.hippo.penny .band-arm {
    background: #1b5e20;
}

.band-member.hippo.penny .hippo-ear {
    background: #14521a;
}

.band-member.hippo.penny .hippo-snout {
    background: #2e7d32;
}

.band-member.hippo.penny .hippo-nostril,
.band-member.hippo.penny .hippo-mouth {
    background: #0d3311;
    border-color: #0d3311;
}

.band-member.hippo .band-arm {
    background: #4caf50;
}

.band-member.hippo .hippo-ear {
    position: absolute;
    top: -10px;
    width: 22px;
    height: 22px;
    background: #3d8b40;
    border-radius: 50%;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.band-member.hippo .hippo-ear.l { left: 8px; }
.band-member.hippo .hippo-ear.r { right: 8px; }

.band-member.hippo .band-eye {
    top: 30px;
    width: 14px;
    height: 14px;
}

.band-member.hippo .band-eye.l { left: 26px; }
.band-member.hippo .band-eye.r { right: 26px; }

.band-member.hippo .hippo-snout {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 34px;
    background: #5cbb60;
    border-radius: 50% 50% 48% 48% / 70% 70% 30% 30%;
}

.band-member.hippo .hippo-nostril {
    position: absolute;
    top: 8px;
    width: 7px;
    height: 9px;
    background: #2e7d32;
    border-radius: 50%;
}

.band-member.hippo .hippo-nostril.l { left: 16px; }
.band-member.hippo .hippo-nostril.r { right: 16px; }

.band-member.hippo .hippo-mouth {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 7px;
    border-bottom: 3px solid #2e7d32;
    border-radius: 0 0 50% 50%;
}

/* Blue ninny hippo variant */
.band-member.hippo.blue {
    background: #42a5f5;
}

.band-member.hippo.blue .band-arm {
    background: #42a5f5;
}

.band-member.hippo.blue .hippo-ear {
    background: #1e88e5;
}

.band-member.hippo.blue .hippo-snout {
    background: #64b5f6;
}

.band-member.hippo.blue .hippo-nostril,
.band-member.hippo.blue .hippo-mouth {
    background: #1565c0;
    border-color: #1565c0;
}

/* Flying ninny: blue hippo with wings (bounces normally like other members) */
.band-member.hippo.flying {
    background: #42a5f5;
}

.band-member.hippo.flying .band-arm {
    background: #42a5f5;
}

.band-member.hippo.flying .hippo-ear {
    background: #1e88e5;
}

.band-member.hippo.flying .hippo-snout {
    background: #64b5f6;
}

.band-member.hippo.flying .hippo-nostril,
.band-member.hippo.flying .hippo-mouth {
    background: #1565c0;
    border-color: #1565c0;
}

.band-member.hippo.flying .hippo-wing {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 20px;
    background: #90caf9;
    border-radius: 60% 60% 45% 45% / 70% 70% 30% 30%;
    animation: wing-flap 0.5s ease-in-out infinite;
}

.band-member.hippo.flying .hippo-wing.l {
    left: -20px;
    --wing-rot: -18deg;
}

.band-member.hippo.flying .hippo-wing.r {
    right: -20px;
    --wing-rot: 18deg;
}

@keyframes wing-flap {
    0%, 100% { transform: rotate(var(--wing-rot)) scaleY(1); }
    50% { transform: rotate(var(--wing-rot)) scaleY(0.5); }
}

/* bucket iron: an iron bucket */
.band-member.bucket {
    width: 86px;
    height: 70px;
    border-radius: 6px 6px 4px 4px / 6px 6px 4px 4px;
    background: linear-gradient(180deg, #7d8b99 0%, #5d6d7e 60%, #4b5a67 100%);
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.2);
    animation: band-bounce 0.7s ease-in-out infinite;
}

.band-member.bucket .band-eye {
    top: 24px;
}

.band-member.bucket .band-eye.l { left: 20px; }
.band-member.bucket .band-eye.r { right: 20px; }

.band-member.bucket .band-mouth {
    top: 44px;
}

.bucket-handle {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 24px;
    border: 4px solid #7d8b99;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}

.bucket-rim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: #93a2b0;
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

/* Nini the bear */
.band-member.bear {
    background: #8d5524;
    border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
    animation-delay: 0.2s;
}

.band-member.bear .bear-ear {
    position: absolute;
    top: -10px;
    width: 24px;
    height: 24px;
    background: #8d5524;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #c68642;
}

.band-member.bear .bear-ear.l { left: 6px; }
.band-member.bear .bear-ear.r { right: 6px; }

.band-member.bear .band-eye {
    top: 26px;
}

.band-member.bear .bear-snout {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 30px;
    background: #c68642;
    border-radius: 50%;
}

.band-member.bear .bear-nose {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 9px;
    background: #3a2816;
    border-radius: 50%;
}

.band-member.bear .bear-mouth {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    border-bottom: 2px solid #3a2816;
    border-radius: 0 0 50% 50%;
}

/* Minecraft Steve */
.band-member.steve {
    width: 84px;
    height: 108px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: band-bounce 0.7s ease-in-out infinite;
}

.steve-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    background: #c68b6b;
    border: 3px solid #2b2b2b;
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.12);
}

.steve-hair {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    height: 18px;
    background: #523719;
    border-bottom: 3px solid #2b2b2b;
}

.steve-hair::after {
    content: '';
    position: absolute;
    left: 8px;
    bottom: -6px;
    width: 8px;
    height: 10px;
    background: #523719;
    border: 3px solid #2b2b2b;
    border-top: none;
}

.steve-eye {
    position: absolute;
    top: 22px;
    width: 7px;
    height: 7px;
    background: #3a6ea5;
    border: 2px solid #2b2b2b;
}

.steve-eye.l { left: 10px; }
.steve-eye.r { right: 10px; }

.steve-nose {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 6px;
    background: #a8724f;
}

.steve-mouth {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 5px;
    background: #7a4a2b;
}

.steve-body {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #3a7bd5;
    border: 3px solid #2b2b2b;
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.12);
}

.steve-body::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #c68b6b;
    border: 2px solid #2b2b2b;
}

.band-mouth {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 8px;
    border-bottom: 3px solid #222;
    border-radius: 0 0 50% 50%;
}

.band-arm {
    position: absolute;
    top: 22px;
    width: 11px;
    height: 36px;
    background: #e74c3c;
    border-radius: 6px;
    transform-origin: top center;
}

.band-arm.left {
    left: -12px;
    animation: wave-left 0.7s ease-in-out infinite;
}

.band-arm.right {
    right: -12px;
    animation: wave-right 0.7s ease-in-out infinite;
}

@keyframes band-bounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-24px); }
}

/* Mario band member */
.band-member.mario {
    width: 90px;
    height: 112px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation-delay: 0.1s;
}

.mario-face {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 54px;
    background: #ffc8a0;
    border-radius: 50% 50% 46% 46%;
    z-index: 1;
}

.mario-cap {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 26px;
    background: #e02020;
    border-radius: 50% 50% 6px 6px;
    z-index: 3;
}

.mario-cap::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 18px;
    width: 42px;
    height: 8px;
    background: #e02020;
    border-radius: 4px;
}

.mario-hair {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 8px;
    background: #4a2c17;
    border-radius: 50%;
    z-index: 2;
}

.mario-eye {
    position: absolute;
    top: 20px;
    width: 7px;
    height: 9px;
    background: #000;
    border-radius: 50%;
}

.mario-eye.l { left: 15px; }
.mario-eye.r { right: 15px; }

.mario-mustache {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 9px;
    background: #6b3b1f;
    border-radius: 0 0 50% 50%;
}

.mario-body {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 36px;
    background: #2255dd;
    border-radius: 6px 6px 10px 10px;
    z-index: 1;
}

.mario-body::before,
.mario-body::after {
    content: '';
    position: absolute;
    top: 0;
    width: 12px;
    height: 22px;
    background: #e02020;
    border-radius: 6px;
}

.mario-body::before { left: -12px; }
.mario-body::after { right: -12px; }

/* Mario's speech bubble */
.mario-bubble {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    z-index: 5;
    opacity: 0;
    animation: mario-say 3.2s ease-in-out infinite;
}

.mario-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}

/* Luigi band member (reuses Mario's structure, recolored green) */
.band-member.luigi {
    width: 90px;
    height: 112px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation-delay: 0.2s;
}

.band-member.luigi .mario-cap,
.band-member.luigi .mario-cap::after {
    background: #1fa839;
}

.band-member.luigi .mario-body,
.band-member.luigi .mario-body::before,
.band-member.luigi .mario-body::after {
    background: #1fa839;
}

/* Dad band member */
.band-member.dad {
    background: #f39c12;
    animation-delay: 0.5s;
}

.band-member.dad .band-arm {
    background: #f39c12;
}

.dad-glasses {
    position: absolute;
    top: 23px;
    left: 0;
    width: 100%;
    height: 16px;
    z-index: 2;
    pointer-events: none;
}

.dad-glass {
    position: absolute;
    top: 0;
    width: 22px;
    height: 16px;
    border: 3px solid #2c2c2c;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.dad-glass.l { left: 17px; }
.dad-glass.r { right: 17px; }

.dad-mustache {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 8px;
    background: #6b3b1f;
    border-radius: 0 0 50% 50%;
}

/* Mom band member (blue blob) */
.band-member.mom {
    background: #3498db;
    animation-delay: 0.56s;
}

.band-member.mom .band-arm {
    background: #3498db;
}

/* Green sulfur spike */
.band-member.spike {
    background: #a8e61d;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(100% 50%, 76% 65%, 75% 93%, 50% 80%, 25% 93%, 24% 65%, 0 50%, 24% 35%, 25% 7%, 50% 20%, 75% 7%, 76% 35%);
    animation-delay: 0.64s;
}

@keyframes mario-say {
    0%, 72% { opacity: 0; transform: translateX(-50%) translateY(5px); }
    80%, 92% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(5px); }
}

.band-note {
    position: absolute;
    font-size: 2em;
    color: #ffd700;
    opacity: 0;
    animation: note-rise 2.5s linear infinite;
}

.band-note.n1 { left: 8%; bottom: 10%; animation-delay: 0s; }
.band-note.n2 { left: 70%; bottom: 16%; animation-delay: 1s; }
.band-note.n3 { left: 40%; bottom: 5%; animation-delay: 2s; }

@keyframes note-rise {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translateY(-90vh); opacity: 0; }
}

.band-close {
    margin-top: 48px;
    padding: 12px 30px;
    font-size: 1.2em;
    font-family: 'Learninglings', Arial, sans-serif;
    border: 2px solid #ffd700;
    background: rgba(0, 0, 0, 0.4);
    color: #ffd700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.band-close:hover {
    background: rgba(255, 215, 0, 0.2);
}

/* Character adder in band mode */
.band-adder {
    margin-top: 22px;
}

.band-adder-panel {
    margin: 14px auto 0;
    max-width: 260px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 12px;
}

.band-adder-panel.hidden {
    display: none;
}

.band-adder-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.band-slider-label {
    color: #ffd700;
    font-size: 0.9em;
}

.band-add-name {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: none;
    font-size: 0.95em;
    margin-bottom: 12px;
    text-align: center;
}

/* Pre-made character selector in band mode */
.band-preset-title {
    color: #ffd700;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 12px;
}

.band-preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.band-preset {
    padding: 8px 14px;
    border: 2px solid #ffd700;
    background: rgba(0, 0, 0, 0.4);
    color: #ffd700;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Learninglings', Arial, sans-serif;
    transition: background 0.2s;
}

.band-preset:hover {
    background: rgba(255, 215, 0, 0.2);
}

.band-preset:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.25);
    text-decoration: line-through;
}

/* Retro 1998 CRT effect overlay */
.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    animation: crt-flicker 0.12s steps(2) infinite;
}

.crt-overlay.hidden {
    display: none;
}

@keyframes crt-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.92; }
    100% { opacity: 1; }
}

/* When 1998 effects are active */
body.effects1998 {
    filter: saturate(0.85) sepia(0.12);
}

/* Boot screen when the computer starts */
.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    color: #0f0;
}

.boot-screen.hidden {
    display: none;
}

.boot-text {
    font-size: 5em;
    letter-spacing: 8px;
    text-shadow: 0 0 18px #0f0;
    animation: boot-fadein 0.3s ease;
}

.boot-text::after {
    content: '_';
    animation: boot-blink 0.9s steps(2) infinite;
}

@keyframes boot-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes boot-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Retro 1998 crash screen with red REBOOT button */
.retro-crash {
    position: fixed;
    inset: 0;
    z-index: 10006;
    background: #0000a0;
    color: #fff;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

.retro-crash.hidden {
    display: none;
}

.retro-crash-box {
    max-width: 640px;
    width: 90%;
    text-align: center;
}

.retro-crash-title {
    font-size: 2.2em;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 8px #fff;
    margin-bottom: 20px;
}

.retro-crash-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 12px;
}

.reboot-button {
    margin-top: 24px;
    padding: 14px 34px;
    font-size: 1.4em;
    font-family: monospace;
    font-weight: bold;
    background: #d50000;
    color: #fff;
    border: 3px solid #ff8a80;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
    transition: background 0.2s, box-shadow 0.2s;
}

.reboot-button:hover {
    background: #ff0000;
    box-shadow: 0 0 26px #ff0000;
}

.reboot-button.retro-continue {
    background: #0040c0;
    border-color: #80b0ff;
    box-shadow: 0 0 18px rgba(80, 140, 255, 0.6);
    text-transform: lowercase;
    margin-left: 12px;
}

.reboot-button.retro-continue:hover {
    background: #0060ff;
    box-shadow: 0 0 26px #4090ff;
}

#turnToZeroBtn {
    background-color: #2ecc40;
}

#turnToZeroBtn:hover {
    background-color: #27ae60;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #007bff;
    margin-bottom: 20px;
}

.number-display {
    font-size: 4em;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    display: inline-block; /* To make padding effective */
    min-width: 100px; /* Ensure consistent width */
    text-align: center;
}

/* Negative numbers show inverted digit colors */
.number-display.neg-inverted {
    border-color: #444;
}

/* Invert applied to individual digit spans for negative numbers */
.digit-invert {
    filter: invert(1);
}

/* Minus sign stays white even when digits are inverted */
.digit-minus {
    color: #fff;
    opacity: 1;
}

/* Little ears on the zero digit in ninny base */
.digit-eared {
    position: relative;
}

.digit-eared::before,
.digit-eared::after {
    content: '';
    position: absolute;
    top: -6px;
    width: 7px;
    height: 7px;
    background: #FF4136;
    border-radius: 50% 50% 0 50%;
}

.digit-eared::before {
    left: 1px;
    transform: rotate(-15deg);
}

.digit-eared::after {
    right: 1px;
    transform: rotate(15deg);
}

/* small name label under the main number display */
.number-name {
    font-size: 0.95rem;
    color: #444;
    margin-top: 6px;
    text-align: center;
    min-height: 1.2em;
    font-weight: 600;
}

/* Rainbow text via background-clip; used for number "7" mapping */
.num-rainbow {
    background: linear-gradient(90deg, #FF4136 0%, #FF851B 12%, #FFDC00 24%, #2ECC40 36%, #00FFFF 48%, #800080 60%, #FF69B4 72%, #808080 84%, #FFFFFF 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Fallback outline helper (used for 10) */
.num-outline-red {
    color: #FFFFFF;
    -webkit-text-stroke: 2px #FF4136;
    text-stroke: 2px #FF4136;
}

/* Per-digit span styling so each digit can be colored independently */
.digit-span {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    /* ensure digits remain visually continuous but separable */
    margin: 0 0px;
    padding: 0 0px;
    font-weight: inherit;
    font-size: inherit;
}

/* Rainbow variant applied to individual digits (for '7') */
.digit-rainbow {
    background: linear-gradient(90deg, #FF4136 0%, #FF851B 12%, #FFDC00 24%, #2ECC40 36%, #00FFFF 48%, #800080 60%, #FF69B4 72%, #808080 84%, #FFFFFF 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Outline helper for digits that need an outline instead of fill */
.digit-outline {
    -webkit-text-stroke: 2px #FF4136;
    text-stroke: 2px #FF4136;
}

/* Neutral styling for non-digit tokens (signs, decimals, unit symbols) */
.digit-neutral {
    color: inherit;
    opacity: 0.95;
}

.buttons {
    margin-bottom: 10px; /* Space below the first row of buttons */
}

.buttons button {
    font-size: 2em;
    padding: 10px 25px;
    margin: 0 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #fff;
}

#minusBtn {
    background-color: #dc3545; /* Red */
}

#minusBtn:hover {
    background-color: #c82333;
}

#plusBtn {
    background-color: #28a745; /* Green */
}

#plusBtn:hover {
    background-color: #218838;
}

#plusIBtn {
    background-color: #007bff; /* Blue */
}

#plusIBtn:hover {
    background-color: #0069d9;
}

#minusIBtn {
    background-color: #6610f2; /* Indigo */
}

#minusIBtn:hover {
    background-color: #550dc9;
}

#plusVBtn {
    background-color: #8B4513; /* Saddle Brown */
}

#plusVBtn:hover {
    background-color: #703610;
}

#minusVBtn {
    background-color: #5D4037; /* Darker Brown */
}

#minusVBtn:hover {
    background-color: #4E342E;
}

#multiplyBtn {
    background-color: #ffc107; /* Yellow/Orange */
    color: #333; /* Dark text for contrast */
}

#multiplyBtn:hover {
    background-color: #e0a800;
}

#divideBtn {
    background-color: #17a2b8; /* Cyan/Blue */
}

#divideBtn:hover {
    background-color: #138496;
}

.power-buttons {
    margin-top: 10px; /* Space between the two rows of buttons */
    display: flex; /* To center buttons within this div */
    justify-content: center;
    gap: 20px; /* Space between square and cube buttons */
}

.power-buttons button {
    font-size: 2em;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #fff;
}

#squareBtn {
    background-color: #6f42c1; /* Purple */
}

#squareBtn:hover {
    background-color: #5a359b;
}

#cubeBtn {
    background-color: #fd7e14; /* Orange */
}

#cubeBtn:hover {
    background-color: #e66b0d;
}

#powerBtn {
    background-color: #20c997; /* Teal/Green */
}

#powerBtn:hover {
    background-color: #1aa079;
}

#tetrateBtn {
    background-color: #8b0000; /* Dark Red */
}

#tetrateBtn:hover {
    background-color: #a52a2a;
}

#pentateBtn {
    background-color: #2c003e; /* Very Dark Purple */
}

#pentateBtn:hover {
    background-color: #1a0025;
}

#hexateBtn {
    background-color: #000000; /* Black */
    box-shadow: 0 0 10px #ff00ff; /* Neon magenta glow */
}

#hexateBtn:hover {
    background-color: #111111;
    box-shadow: 0 0 20px #ff00ff;
}

.hyper-power-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hyper-power-buttons button {
    font-size: 1.5em;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-weight: bold;
}

#heptateBtn {
    background: linear-gradient(to bottom, #4b0082, #000);
    box-shadow: 0 0 5px #4b0082;
}

#octateBtn {
    background: linear-gradient(to bottom, #8b0000, #000);
    box-shadow: 0 0 5px #8b0000;
}

#enneateBtn {
    background: linear-gradient(to bottom, #006400, #000);
    box-shadow: 0 0 5px #006400;
}

#decateBtn {
    background: linear-gradient(to bottom, #00008b, #000);
    box-shadow: 0 0 10px #00008b, 0 0 20px #fff;
}

.general-hyper-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

#hyperBtn {
    font-size: 1.5em;
    padding: 8px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(45deg, #4b0082, #8b0000, #00008b);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

#hyperBtn:hover {
    transform: scale(1.05);
    filter: brightness(1.3);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.hyper-power-buttons button:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* New styles for root and factorial buttons */
.root-factorial-buttons {
    margin-top: 20px; /* Space between power buttons and new buttons */
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
}

.root-factorial-buttons button {
    font-size: 2em;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

#sqrtBtn {
    background-color: #6610f2; /* Indigo */
}

#sqrtBtn:hover {
    background-color: #550dc9;
}

#cbrtBtn {
    background-color: #e83e8c; /* Pink */
}

#cbrtBtn:hover {
    background-color: #d12270;
}

/* New style for the Nth Root button */
#nthRootBtn {
    background-color: #ff6347; /* Tomato */
}

#nthRootBtn:hover {
    background-color: #e5533d;
}

#factorialBtn {
    background-image: linear-gradient(to right, #dc3545, #28a745, #e83e8c); /* Red, Green, Pink Gradient */
    transition: opacity 0.3s ease;
}

#factorialBtn:hover {
    opacity: 0.9;
}

/* New style for Self Factorial (Iron Blocks) */
#selfFactorialBtn {
    background-color: #3f454c; /* Dark Grey/Iron base */
    background-image: linear-gradient(to bottom, #555a60 0%, #3f454c 50%, #2e3236 100%);
    color: #fff;
    box-shadow: 0 4px #222529; /* Block feel */
}

#selfFactorialBtn:hover {
    background-color: #4c545c;
    background-image: linear-gradient(to bottom, #60666c 0%, #4c545c 50%, #3a3f44 100%);
    box-shadow: 0 2px #222529;
    transform: translateY(2px);
}

/* New style for Unnorial Button */
#unnorialBtn {
    background-color: #17a2b8; /* Cyan/Blue, similar to divideBtn */
    transition: background-color 0.3s ease;
}

#unnorialBtn:hover {
    background-color: #138496;
}

/* New styles for logarithm buttons */
.logarithm-buttons {
    margin-top: 20px; /* Space between previous buttons and new buttons */
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
}

.logarithm-buttons button {
    font-size: 2em;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff; /* White text for gradient buttons */
    transition: opacity 0.3s ease; /* Transition for hover effect on gradients */
}

.logarithm-buttons button:hover {
    opacity: 0.9; /* Slightly reduce opacity on hover for gradient buttons */
}

#log10Btn {
    background-image: linear-gradient(to right, #dc3545, #007bff); /* Red-Blue gradient */
}

#ylogBtn {
    background-image: linear-gradient(to right, #28a745, #17a2b8); /* Green-Blue gradient */
}

/* New styles for floor and round buttons */
.floor-round-buttons {
    margin-top: 20px; /* Space between previous buttons and new buttons */
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
}

.floor-round-buttons button {
    font-size: 2em;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.3s ease;
}

#floorBtn {
    background-color: #ff8c00; /* Dark Orange */
}

#floorBtn:hover {
    background-color: #cc7000;
}

#roundBtn {
    background-color: #008080; /* Teal */
}

#roundBtn:hover {
    background-color: #006666;
}

#recipBtn {
    background-color: #4682b4; /* Steel Blue */
}

#modBtn {
    background-color: #9acd32; /* Yellow Green */
}

.iterative-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.iterative-buttons button {
    font-size: 1.2em;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.2s, background-color 0.3s;
}

.iterative-buttons button:active {
    transform: scale(0.95);
}

#collatzBtn {
    background-color: #800000; /* Maroon */
}

#chaosStepBtn {
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    color: #000;
    font-weight: bold;
}

#fibBtn {
    background-color: #daa520; /* Goldenrod */
}

#sgnBtn {
    background-color: #2f4f4f; /* Dark Slate Gray */
}

/* New styles for complex operations buttons */
.complex-operation-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.complex-operation-buttons button {
    font-size: 2em;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.3s ease;
}

#addIInvertBtn {
    background-color: #6495ED; /* Cornflower Blue */
}

#addIInvertBtn:hover {
    background-color: #4b73b5;
}

#removeIRevertBtn {
    background-color: #AAAAAA; /* Silver/Gray */
}

#removeIRevertBtn:hover {
    background-color: #888888;
}

.input-control {
    margin-top: 30px; /* Space above the input box */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.input-control label {
    font-size: 1.2em;
    color: #555;
}

.input-control input[type="number"] {
    font-size: 1.5em;
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    width: 100px; /* Fixed width for the input box */
    text-align: center;
    -moz-appearance: textfield; /* Hide arrows for Firefox */
}

/* Hide arrows for Chrome, Safari, Edge */
.input-control input[type="number"]::-webkit-outer-spin-button,
.input-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.equation-control {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

#equationInput {
    font-size: 1.1em;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    width: 250px;
    text-align: center;
}

#customEqBtn {
    padding: 8px 20px;
    font-size: 1em;
    background-color: #4b0082; /* Indigo */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

#customEqBtn:hover {
    background-color: #310055;
}

.more-tools-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1.1em;
    background-color: #343a40;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.more-tools-button:hover {
    background-color: #23272b;
}

/* Tools Overlay */
.tools-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* Script editor textarea styling (slightly different from tools content defaults) */
#scriptEditorTextarea {
    background: #0f1724;
    color: #e6eef8;
    border: 1px solid #2b3948;
    resize: none;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}
#scriptEditorTextarea:focus { outline: none; border-color: #4b9cff; box-shadow: 0 0 8px rgba(75,156,255,0.2); }

.tools-content .tool-btn {
    min-width: 80px;
}

.tools-overlay.hidden {
    display: none;
}

.tools-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.inverted .tools-content {
    background: #222;
    color: white;
}

.tools-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.tools-header h2 {
    margin: 0;
    color: #007bff;
}

#closeToolsBtn {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #666;
}

.tool-section {
    margin-bottom: 20px;
}

.tool-section h3 {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}

.tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tool-btn {
    padding: 8px 12px;
    font-size: 1em;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    min-width: 60px;
}

.inverted .tool-btn {
    background: #444;
    border-color: #555;
    color: white;
}

.tool-btn:hover {
    background: #e2e6ea;
}

.chaos-btn {
    background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
}

.negate-btn {
    background-color: #6c757d;
    color: white;
    border: none;
}

.converter-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
}

.inverted .converter-box {
    background: #333;
}

.converter-box input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}

#convertApplyBtn {
    background-color: #007bff;
    color: white;
    border: none;
    margin-top: 5px;
}

.achievement-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2ecc40;
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    padding: 14px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10003;
    animation: toast-pop 0.4s ease;
}

.achievement-toast.hidden {
    display: none;
}

@keyframes toast-pop {
    from { opacity: 0; transform: translateX(-50%) scale(0.8); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Omega crash screen */
.crash-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    color: #0f0;
    font-family: monospace;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crash-overlay.hidden {
    display: none;
}

.crash-box {
    max-width: 620px;
    width: 90%;
    border: 3px solid #0f0;
    padding: 24px 28px;
    box-shadow: 0 0 24px rgba(0, 255, 0, 0.6);
}

.crash-title {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 12px;
    text-shadow: 0 0 8px #0f0;
}

.crash-code {
    font-size: 1.1em;
    color: #ff0;
    margin-bottom: 12px;
}

.crash-text {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 10px;
    opacity: 0.9;
}

.crash-continue {
    margin-top: 12px;
    background: #000;
    color: #0f0;
    border: 2px solid #0f0;
    font-family: monospace;
    font-size: 1em;
    padding: 8px 16px;
    cursor: pointer;
    text-transform: lowercase;
}

.crash-continue:hover {
    background: #0f0;
    color: #000;
    box-shadow: 0 0 12px #0f0;
}

/* Screen cracks: glass damage accumulated after crashes */
.crack-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    overflow: hidden;
}

.crack-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

.crack-overlay path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
    stroke-linecap: butt;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.crack-overlay.cracking {
    animation: crack-fade-in 0.4s forwards;
}

.crack-overlay.cracking path {
    animation: crack-draw 0.5s ease forwards;
}

.crack-overlay.cracking path:nth-child(2) {
    animation-delay: 0.06s;
}

.crack-overlay.cracking path:nth-child(3) {
    animation-delay: 0.12s;
}

.crack-overlay.cracking.deeper path {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}

@keyframes crack-fade-in {
    to { opacity: 1; }
}

@keyframes crack-draw {
    to { stroke-dashoffset: 0; }
}

/* Glitch effects: RGB split + shake + scanlines */
.crash-overlay.glitching .crash-box {
    animation: crash-shake 0.12s infinite;
}

.crash-overlay.glitching .crash-title,
.crash-overlay.glitching .crash-code,
.crash-overlay.glitching .crash-text {
    position: relative;
    animation: crash-jitter 0.18s infinite;
}

@keyframes crash-shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(3px, -3px); }
    75% { transform: translate(-2px, -2px); }
    100% { transform: translate(0, 0); }
}

@keyframes crash-jitter {
    0% { clip-path: inset(0 0 88% 0); transform: translateX(-6px); filter: hue-rotate(0deg); }
    20% { clip-path: inset(12% 0 70% 0); transform: translateX(6px); filter: hue-rotate(90deg); }
    40% { clip-path: inset(40% 0 40% 0); transform: translateX(-4px); filter: hue-rotate(180deg); }
    60% { clip-path: inset(70% 0 10% 0); transform: translateX(4px); filter: hue-rotate(270deg); }
    80% { clip-path: inset(30% 0 55% 0); transform: translateX(-6px); filter: hue-rotate(120deg); }
    100% { clip-path: inset(0 0 88% 0); transform: translateX(0); filter: hue-rotate(0deg); }
}

body.crash-glitch {
    animation: body-glitch 0.1s infinite;
}

@keyframes body-glitch {
    0% { transform: translateX(0); filter: invert(0); }
    25% { transform: translateX(8px); filter: invert(0.3); }
    50% { transform: translateX(-8px); filter: invert(0.6); }
    75% { transform: translateX(4px); filter: invert(0.4); }
    100% { transform: translateX(0); filter: invert(0); }
}

/* The place after Ω */
.omega-place {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: radial-gradient(ellipse at 50% 30%, #dcc27a 0%, #c7ad67 45%, #8f7743 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: backrooms-flicker 4s linear infinite;
}

.omega-place.hidden {
    display: none;
}

.omega-place-inner {
    text-align: center;
    color: #3a2f14;
    font-family: 'Learninglings', Arial, sans-serif;
}

.omega-place-title {
    font-size: 1.6em;
    letter-spacing: 6px;
    color: #5a4516;
    margin-bottom: 24px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.omega-circle {
    width: 250px;
    height: 250px;
    margin: 0 auto 12px;
    border: 6px solid #5a4516;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 246, 214, 0.25);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 0, 0, 0.3);
}

.omega-place-number {
    font-size: 3.2em;
    font-weight: bold;
    color: #2c230e;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

.omega-place-hint {
    margin-top: 30px;
    font-size: 0.9em;
    color: #6b5b2f;
}

@keyframes backrooms-flicker {
    0%, 100% { filter: brightness(1); }
    91% { filter: brightness(1); }
    92% { filter: brightness(0.75); }
    93% { filter: brightness(1); }
    95% { filter: brightness(0.85); }
    96% { filter: brightness(1); }
}

.omega-place-controls {
    margin-top: 24px;
}

.omega-place-btn {
    font-family: 'Learninglings', Arial, sans-serif;
    font-size: 1.2em;
    padding: 10px 28px;
    border-radius: 8px;
    border: 2px solid #5a4516;
    background: rgba(255, 246, 214, 0.55);
    color: #3a2f14;
    cursor: pointer;
    transition: background 0.2s;
}

.omega-place-btn:hover {
    background: rgba(255, 246, 214, 0.85);
}

.omega-place-continue {
    border-color: #8a1f00;
    color: #8a1f00;
    margin-left: 12px;
}

.omega-place-continue:hover {
    background: rgba(200, 60, 30, 0.25);
}

.omega-place-big {
    border-color: #6b4d00;
    color: #6b4d00;
    margin-left: 12px;
}

.omega-place-big:hover {
    background: rgba(160, 120, 20, 0.3);
}

.omega-place-inner.big {
    animation: omega-big 0.9s ease;
}

@keyframes omega-big {
    0% { transform: scale(1); }
    40% { transform: scale(2.4); filter: brightness(2.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Fatal error screen (17 MAKE ME BIG presses) */
.fatal-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    color: #111;
    font-family: 'Learninglings', Arial, sans-serif;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fatal-overlay.hidden {
    display: none;
}

.fatal-box {
    max-width: 640px;
    width: 90%;
    text-align: center;
}

.fatal-text {
    font-size: 2em;
    font-weight: bold;
    color: #111;
}

.fatal-label {
    font-size: 1.1em;
    color: #555;
    margin-top: 18px;
}

.fatal-number {
    font-size: 4.5em;
    font-weight: bold;
    color: #111;
    margin: 8px 0 26px;
    display: inline-block;
    padding: 6px 26px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.08);
}

.fatal-controls {
    margin-top: 8px;
}

/* Creepy face in the white place */
.creepy-face {
    width: 100px;
    height: 110px;
    background: #eae6dc;
    border-radius: 50% 50% 46% 46%;
    margin: 0 auto 20px;
    position: relative;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.12);
    animation: creepy-sway 4s ease-in-out infinite;
}

.creepy-eye {
    position: absolute;
    top: 32px;
    width: 22px;
    height: 28px;
    background: #000;
    border-radius: 50%;
}

.creepy-eye.left { left: 19px; }
.creepy-eye.right { right: 19px; }

.creepy-eye::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 5px;
    width: 6px;
    height: 6px;
    background: #ff2222;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff2222;
}

.creepy-mouth {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 24px;
    background: #000;
    border-radius: 0 0 55% 55%;
}

.creepy-mouth::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

@keyframes creepy-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* End scene: blob creature at its computer */
.end-scene {
    position: fixed;
    inset: 0;
    z-index: 10004;
    background: linear-gradient(#3a4a5a 0%, #24303c 70%, #1a232e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.end-scene.hidden {
    display: none;
}

.end-room {
    position: relative;
    width: min(720px, 92vw);
    height: 420px;
}

.end-desk {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #4a3322;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}

.end-stage {
    position: relative;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 40px;
}

/* Monster that climbs out of the computer and chases the blob */
.end-monster {
    position: absolute;
    right: 150px;
    bottom: 8px;
    width: 64px;
    height: 76px;
    background: #17101f;
    border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6);
    z-index: 6;
    transform: scale(0);
    transform-origin: bottom center;
    opacity: 0;
    animation: monster-chase 2s ease-in forwards;
    animation-delay: 0.8s;
}

.monster-eye {
    position: absolute;
    top: 24px;
    width: 12px;
    height: 12px;
    background: #ff2222;
    border-radius: 50%;
    box-shadow: 0 0 9px #ff2222;
    animation: monster-blink 0.4s infinite;
}

.monster-eye.left { left: 12px; }
.monster-eye.right { right: 12px; }

@keyframes monster-chase {
    0% { transform: scale(0) translateX(0); opacity: 0; }
    12% { transform: scale(0.7) translateX(0); opacity: 1; }
    30% { transform: scale(1.1) translateX(-60px); opacity: 1; }
    70% { transform: scale(0.95) translateX(-210px); opacity: 1; }
    100% { transform: scale(1.25) translateX(-300px); opacity: 1; }
}

@keyframes monster-blink {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.15); }
}

/* Blob flees, then gets eaten by the monster */
.end-blob {
    animation: blob-flee 0.8s ease-in 1.9s forwards;
}

.blob-body {
    animation: blob-idle 3s ease-in-out infinite, blob-eaten 0.45s ease-in 2.8s forwards;
}

@keyframes blob-flee {
    0% { transform: translateX(0) translateY(0); }
    40% { transform: translateX(-60px) translateY(-26px) rotate(-8deg); }
    100% { transform: translateX(-120px) translateY(-2px); opacity: 0.95; }
}

@keyframes blob-eaten {
    0% { transform: scale(1); opacity: 1; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

.end-blob {
    width: 110px;
}

.blob-body {
    width: 100px;
    height: 90px;
    background: #8fe0cf;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.08);
    animation: blob-idle 3s ease-in-out infinite;
}

.blob-eye {
    position: absolute;
    top: 24px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
}

.blob-eye.left { left: 24px; }
.blob-eye.right { right: 24px; }

.blob-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 5px;
    background: #222;
    border-radius: 50%;
}

.blob-mouth {
    position: absolute;
    top: 52px;
    left: 42px;
    width: 18px;
    height: 8px;
    border-bottom: 3px solid #222;
    border-radius: 0 0 50% 50%;
}

@keyframes blob-idle {
    0%, 100% { transform: scaleY(1) translateY(0); }
    50% { transform: scaleY(1.05) translateY(-2px); }
}

.end-monitor {
    width: 170px;
}

.end-screen {
    width: 170px;
    height: 110px;
    background: #10151a;
    border: 8px solid #2c2c2c;
    border-radius: 6px;
    box-shadow: 0 0 24px rgba(120, 180, 255, 0.35);
    position: relative;
    overflow: hidden;
}

.end-screen::after {
    content: '';
    display: block;
    height: 100%;
    background: radial-gradient(circle at center, #66ccff 0%, #0a1420 75%);
}

.end-stand {
    width: 10px;
    height: 26px;
    background: #2c2c2c;
    margin: 0 auto;
}

.end-speech {
    position: absolute;
    top: 0;
    left: 20px;
    background: #fff;
    color: #222;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.end-speech::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 34px;
    border: 8px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
}

@keyframes omega-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}