:root {
            --coc-green: #4e9421;
            --coc-dark-green: #3a7217;
            --paper: #e6cc9e;
            --wood: #5d3a1a;
            --wood-dark: #3a2410;
        }
        body {
            font-family: 'Ubuntu', sans-serif;
            background: radial-gradient(circle, var(--coc-green) 0%, var(--coc-dark-green) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
        }
        .coc-font { font-family: 'Luckiest Guy', cursive; text-shadow: 2px 2px 0px #000; }
        .coc-panel {
            background: var(--paper);
            border: 6px solid var(--wood);
            border-radius: 25px;
            box-shadow: 0 12px 0 var(--wood-dark), inset 0 0 40px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 800px;
        }
        .input-coc {
            width: 100%;
            padding: 12px;
            border-radius: 12px;
            border: 3px solid var(--wood);
            font-weight: bold;
            background: #fffef0;
            outline: none;
        }
        .btn-coc {
            background: #3b82f6;
            border-bottom: 6px solid #1e3a8a;
            color: white;
            transition: all 0.1s;
        }
        .btn-coc:active { border-bottom-width: 2px; transform: translateY(4px); }
        .btn-add { background: #16a34a; border-bottom: 4px solid #14532d; }
        .ocultar { display: none !important; }

        /* Estilo para el cuadro de mensajes personalizado */
        #customMsg {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: #3a2410;
            color: white;
            padding: 15px 30px;
            border-radius: 15px;
            border: 3px solid #fcc200;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.8rem;
            display: none;
            animation: slideDown 0.3s ease-out;
        }
        @keyframes slideDown { from { top: -100px; } to { top: 20px; } }