* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        
   -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    }
        body {
            font-family: 'Comic Sans MS', 'Segoe UI Emoji', sans-serif;
            background: linear-gradient(135deg, #3742fa 0%, #2f3542 100%);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 5px;
        }

        .game-container {
            width: 480px;
            height: 750px;
            background: linear-gradient(145deg, #ff9ff3, #f368e0);

            border-radius: 30px;
            border: 6px solid #8b5a96;
            box-shadow: 
                0 0 30px rgba(255, 105, 180, 0.6),
                inset 0 2px 10px rgba(255, 255, 255, 0.3),
                0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .game-container::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border: 3px solid rgba(139, 90, 150, 0.3);
            border-radius: 25px;
            pointer-events: none;
        }

        /* MAIN DISPLAY - Bright and colorful */
        .main-display {
            height: 240px;

	    transition: background-color 1s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 5px;
            border-bottom: 4px solid #2980b9;
            position: relative;
            margin: 20px;
	    margin-bottom: 0px;
            border-radius: 20px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
        }

        .being-form {
            font-size: 125px;
            line-height: 1;

            margin: 0 auto 12px auto;
	    margin-top: 0px;
            margin-bottom: 0px;
            text-shadow: 
                0 0 20px rgba(255, 255, 255, 0.8),
                0 0 40px rgba(255, 255, 0, 0.6);
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 150px;
        }

        .being-name {
            font-size: 28px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2px;
	    margin-top: 0px;
            margin-bottom: 2px;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }


        /* ENHANCED GRADE NAME (being-stage) STYLES */
        .being-stage {
            font-size: 16px;
            font-weight: 800;
	    margin-top: 0px;
            margin-bottom: 3px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: transparent;
            background: linear-gradient(45deg, 
                #ffffff 0%,  /* white */
                #ffeb3b 33%,  /* Bright yellow */
                #fff9c4 66%,  /* Light cream */
                #ffd700 100%  /* Gold */
            );

	    background: #ffeb3b;
            background-clip: text;
            padding: 4px;
            position: relative;
        }



        .being-description {
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 1.4;
            max-width: 320px;
            margin: 0 auto;
            padding: 4px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        /* STATS - Colorful and playful */
        .stats-panel {
            height: 100px;
            background: linear-gradient(145deg, #ffa726, #ff7043);
            margin: 5px 15px;
	    margin-bottom: 0px;
            border-radius: 15px;
            border: 3px solid #e17055;
            padding: 4px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 5px 15px rgba(255, 112, 67, 0.4);
        }

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
        }

        .stat-emoji {
            font-size: 42px;
            margin: .5px;
	    margin-top: 8px;
	    margin-bottom: 4px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .stat-value {
            font-size: 16px;
            font-weight: 900;
            margin: .5px;
	    margin-top: 4px;
            color: #000;
            text-shadow: none;
        }

        .stat-bar {
            width: 70px;
            height: 8px;
	    margin: .5px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid #d17a00;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .stat-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff3838, #ff9500, #ffdd00);
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(255, 221, 0, 0.6);
        }

        /* ACTIONS - Bright button grid */
        .actions-panel {

	    max-height: 180px;
            background: linear-gradient(145deg, #a29bfe, #6c5ce7);
            margin: 15px;
	    margin-bottom: 5px;
	    margin-top: 5px;
            border-radius: 15px;
            border: 3px solid #6c5ce7;
            padding: 4px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
        }

        .action-btn {
            background: linear-gradient(145deg, #ff6b9d, #c44569);
            border: 3px solid #a83256;
            border-radius: 15px;
            color: #000;
            cursor: pointer;
	    max-height: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 4px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 8px rgba(196, 69, 105, 0.4);
            position: relative;
        }

        .action-btn:hover {
            background: linear-gradient(145deg, #fd79a8, #e84393);
        }

        .action-btn:active {
            background: linear-gradient(145deg, #c44569, #a83256);
        }

        .action-emoji {
            font-size: 48px;
            margin-bottom: 0px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        /* Tooltip styles - Works for action buttons and stat emojis */
        .action-btn[data-tooltip]:hover::after,
        .stat-emoji[data-tooltip]:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 6px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }

        .action-btn[data-tooltip]:hover::before,
        .stat-emoji[data-tooltip]:hover::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid rgba(0, 0, 0, 0.9);
            z-index: 1000;
            pointer-events: none;
        }

        /* Make stat emojis relative positioned for tooltips */
        .stat-emoji {
            position: relative;
        }

        /* LOG - Bright message area */
        .log-panel {
            flex: 1;
            background: linear-gradient(145deg, #55efc4, #00b894);
            margin: 0 15px 15px 15px;
            border-radius: 15px;
            border: 3px solid #fff;
            padding: 1px;
	     
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 16px;
	    line-height: 1.1;
	    max-height: 145px;
	    letter-spacing: 0.9;
            box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
        }

        #log-text {
            color: #000;
            font-weight: 400;
            text-shadow: none;
            max-width: 90%;
        }

        /* Special states */
        .being-form.nondual { 
            background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ee82ee, #ff1493);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbow 3s linear infinite;
        }

        .being-form.physical { 
            color: #ff1744;
            text-shadow: 
                0 0 20px rgba(255, 23, 68, 0.8),
                0 0 40px rgba(255, 23, 68, 0.6);
        }


        /* Responsive */
        @media (max-width: 480px) {
            .game-container {
                width: 95vw;
                max-width: 380px;
                height: 90vh;
                max-height: 600px;
            }
            
            .being-form {
                font-size: 80px;
            }
        }



/* ADD THIS NEW RULE to allow text selection only where needed: */
input, textarea, .json-editor {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}




/* Minimal Divine Enhancement - Add to your existing style.css */

/* Enhanced divine glow and shimmer for the egg */
.being-form {
    position: relative;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(255, 255, 190, 0.6),
        0 0 60px rgba(255, 255, 120, 0.4),
        0 0 80px rgba(255, 255, 30, 0.2);
}






/* Add this to style.css */

/* This targets only buttons that have a name element inside them */
.action-btn:has(.action-name) {
    flex-direction: column;
    height: 80px;
    justify-content: center;
    padding-top: 2px;
}

.action-name {
    font-size: 16px;
    margin-top: 1px;

	font-weight: 900;
    color: #000;
}