<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador Ultra Realista de Dados</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        :root {
            --primary: #00ffd5;
            --primary-glow: rgba(0, 255, 213, 0.5);
            --secondary: #ff00bb;
            --secondary-glow: rgba(255, 0, 187, 0.5);
            --accent: #9900ff;
            --background: #0a0a20;
            --surface: #1a1a3a;
            --surface-alt: #2a2a5a;
            --on-background: #ffffff;
            --on-surface: #ffffff;
            --neon-border: 0 0 5px var(--primary), 0 0 10px var(--primary-glow);
            --glass-background: rgba(26, 26, 58, 0.7);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: var(--background);
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(153, 0, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 255, 213, 0.15) 0%, transparent 50%);
            color: var(--on-background);
            min-height: 100vh;
            overflow-x: hidden;
            font-family: 'Poppins', sans-serif;
            position: relative;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxmaWx0ZXIgaWQ9Im5vaXNlIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4wNCIvPgo8L3N2Zz4=');
            pointer-events: none;
            z-index: -1;
        }
        
        .cursor-trail {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--primary);
            pointer-events: none;
            opacity: 0;
            mix-blend-mode: screen;
            box-shadow: 0 0 15px var(--primary-glow);
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
        }
        
        /* Floating grid lines */
        .grid-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.1;
            z-index: -1;
        }
        
        .horizontal-line, .vertical-line {
            position: absolute;
            background-color: var(--primary);
        }
        
        .horizontal-line {
            height: 1px;
            width: 100%;
        }
        
        .vertical-line {
            width: 1px;
            height: 100%;
        }
        
        /* Header styles */
        header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            padding: 2rem 0;
        }
        
        header::before, header::after {
            content: '';
            position: absolute;
            height: 2px;
            width: 60%;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            left: 20%;
        }
        
        header::before {
            top: 0;
        }
        
        header::after {
            bottom: 0;
        }
        
        h1 {
            font-family: 'Orbitron', sans-serif;
            font-weight: 900;
            font-size: 4rem;
            letter-spacing: 3px;
            margin-bottom: 1rem;
            text-shadow: 
                0 0 10px var(--primary-glow),
                0 0 20px var(--primary-glow);
            text-transform: uppercase;
            position: relative;
            display: inline-block;
        }
        
        h1 span {
            position: relative;
            display: inline-block;
            animation: text-flicker 5s infinite alternate;
        }
        
        h1 span:nth-child(1) { animation-delay: 0.1s; color: var(--primary); }
        h1 span:nth-child(2) { animation-delay: 0.2s; }
        h1 span:nth-child(3) { animation-delay: 0.3s; color: var(--primary); }
        h1 span:nth-child(4) { animation-delay: 0.4s; }
        h1 span:nth-child(5) { animation-delay: 0.5s; color: var(--secondary); }
        h1 span:nth-child(6) { animation-delay: 0.6s; }
        h1 span:nth-child(7) { animation-delay: 0.7s; color: var(--primary); }
        h1 span:nth-child(8) { animation-delay: 0.8s; }
        h1 span:nth-child(9) { animation-delay: 0.9s; color: var(--accent); }
        h1 span:nth-child(10) { animation-delay: 1.0s; }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.8;
            margin-bottom: 1rem;
            font-weight: 300;
            letter-spacing: 1px;
        }
        
        /* Main game area */
        .game-container {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        @media (max-width: 1100px) {
            .game-container {
                grid-template-columns: 1fr;
            }
        }
        
        /* Sidebar/Controls styles */
        .controls-panel {
            background: var(--glass-background);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), var(--neon-border);
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .panel-section {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 1.5rem;
        }
        
        .panel-section:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .panel-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: var(--primary);
        }
        
        .panel-header i {
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }
        
        .panel-header h3 {
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin: 0;
        }
        
        .control-group {
            margin-bottom: 1rem;
        }
        
        .control-group:last-child {
            margin-bottom: 0;
        }
        
        label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: var(--on-surface);
            opacity: 0.9;
        }
        
        select, input {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(10, 10, 32, 0.6);
            color: var(--on-background);
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            transition: all 0.3s;
        }
        
        select:focus, input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-glow);
        }
        
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        input[type=number] {
            -moz-appearance: textfield;
        }
        
        .dice-theme-selector {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .theme-option {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            border: 2px solid transparent;
        }
        
        .theme-option.active {
            transform: scale(1.1);
            border-color: var(--primary);
            box-shadow: 0 0 10px var(--primary-glow);
        }
        
        .theme-option:hover {
            transform: scale(1.05);
        }
        
        .theme-option.cyan { background: linear-gradient(135deg, #00ffd5, #00a3ff); }
        .theme-option.magenta { background: linear-gradient(135deg, #ff00bb, #ff7b00); }
        .theme-option.rainbow { background: linear-gradient(135deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff); }
        .theme-option.gold { background: linear-gradient(135deg, #ffd700, #ff7b00); }
        .theme-option.crystal { background: linear-gradient(135deg, #9900ff, #9900ff20); }
        
        .sliders {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .slider-control {
            width: 100%;
        }
        
        .slider-control label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        
        .slider-control label span {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            background-color: var(--surface-alt);
            border-radius: 4px;
        }
        
        .slider-input {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 10px;
            background: var(--surface-alt);
            outline: none;
        }
        
        .slider-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 0 10px var(--primary-glow);
        }
        
        .slider-input::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 0 10px var(--primary-glow);
            border: none;
        }
        
        .dice-size-preview {
            width: 40px;
            height: 40px;
            background-color: var(--primary);
            border-radius: 6px;
            margin: 0 auto;
            transition: all 0.3s;
        }
        
        /* Buttons styles */
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        button {
            position: relative;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 12px;
            background-color: transparent;
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s;
            overflow: hidden;
            z-index: 1;
        }
        
        button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            z-index: -1;
            border-radius: 12px;
            transition: all 0.3s;
        }
        
        button::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background-color: var(--surface-alt);
            z-index: -1;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        button:hover {
            transform: translateY(-3px);
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
        }
        
        button:hover::before {
            filter: brightness(1.2);
            box-shadow: 0 5px 15px rgba(0, 255, 213, 0.4);
        }
        
        button:active {
            transform: translateY(-1px);
        }
        
        #roll-button {
            padding: 1.2rem 2rem;
            margin-top: 1rem;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            color: var(--background);
            font-size: 1.2rem;
            text-shadow: none;
            animation: pulse-glow 2s infinite;
        }
        
        #roll-button::before, #roll-button::after {
            display: none;
        }
        
        #roll-button:hover {
            filter: brightness(1.1);
            box-shadow: 0 0 20px var(--primary-glow);
        }
        
        /* Dice area and 3D canvas */
        #canvas-container {
            position: relative;
            width: 100%;
            min-height: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        
        #dice-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .canvas-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 30%, var(--background) 100%);
            pointer-events: none;
            z-index: 2;
            mix-blend-mode: overlay;
        }
        
        .glow-effects {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 3;
        }
        
        .glow {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
            opacity: 0;
            filter: blur(20px);
            mix-blend-mode: screen;
        }
        
        /* Results area */
        .results-area {
            background: var(--glass-background);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 1.5rem;
            margin-top: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 1rem;
        }
        
        .results-title {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary);
            font-size: 1.3rem;
            margin: 0;
        }
        
        .current-roll {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background-color: var(--surface-alt);
            border-radius: 10px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s;
        }
        
        .current-roll.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .roll-info {
            flex: 1;
        }
        
        .roll-type {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--secondary);
        }
        
        .roll-formula {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .roll-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            text-shadow: 0 0 10px var(--primary-glow);
        }
        
        .roll-time {
            font-size: 0.8rem;
            opacity: 0.7;
        }
        
        /* History table */
        .history-container {
            max-height: 300px;
            overflow-y: auto;
            border-radius: 10px;
            background-color: rgba(10, 10, 32, 0.4);
        }
        
        .history-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .history-table th {
            position: sticky;
            top: 0;
            background-color: var(--surface-alt);
            padding: 0.8rem 1rem;
            text-align: left;
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 600;
        }
        
        .history-table td {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.9rem;
        }
        
        .history-table tr:last-child td {
            border-bottom: none;
        }
        
        .history-table tr:hover td {
            background-color: rgba(255, 255, 255, 0.05);
        }
        
        .history-value {
            font-weight: 600;
            color: var(--primary);
        }
        
        .delete-history {
            background-color: rgba(255, 60, 60, 0.2);
            color: #ff5555;
            border: 1px solid rgba(255, 60, 60, 0.3);
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            border-radius: 6px;
        }
        
        .delete-history:hover {
            background-color: rgba(255, 60, 60, 0.3);
        }
        
        /* Footer */
        footer {
            margin-top: 3rem;
            text-align: center;
            padding: 2rem 0;
            font-size: 0.9rem;
            opacity: 0.7;
            position: relative;
        }
        
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20%;
            width: 60%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }
        
        /* Animations */
        @keyframes pulse-glow {
            0% {
                box-shadow: 0 0 5px var(--primary-glow);
            }
            50% {
                box-shadow: 0 0 20px var(--primary-glow), 0 0 30px var(--primary-glow);
            }
            100% {
                box-shadow: 0 0 5px var(--primary-glow);
            }
        }
        
        @keyframes text-flicker {
            0%, 100% {
                opacity: 1;
            }
            92% {
                opacity: 0.8;
            }
            94% {
                opacity: 0.9;
            }
            96% {
                opacity: 0.3;
            }
            98% {
                opacity: 0.9;
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        /* Modal styles */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 32, 0.8);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .modal.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .modal-content {
            background: var(--surface);
            border-radius: 16px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), var(--neon-border);
            transform: scale(0.9);
            transition: transform 0.3s;
        }
        
        .modal.active .modal-content {
            transform: scale(1);
        }
        
        .modal-header {
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .modal-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--surface-alt);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .modal-close:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2.5rem;
            }
            
            .game-container {
                grid-template-columns: 1fr;
            }
            
            .panel-section {
                padding-bottom: 1rem;
            }
            
            #canvas-container {
                min-height: 300px;
            }
            
            .current-roll {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
    <div class="cursor-trail"></div>
    <div class="grid-lines"></div>
    
    <div class="container">
        <header>
            <h1>
                <span>S</span><span>i</span><span>m</span><span>u</span><span>l</span><span>a</span><span>d</span><span>o</span><span>r</span> <span>d</span><span>e</span> <span>D</span><span>a</span><span>d</span><span>o</span><span>s</span>
            </h1>
            <p class="subtitle">Experimenta un lanzamiento de dados en 3D con efectos visuales impresionantes</p>
        </header>
        
        <div class="game-container">
            <div class="controls-panel">
                <div class="panel-section">
                    <div class="panel-header">
                        <i class="fas fa-dice"></i>
                        <h3>Configuración de Dados</h3>
                    </div>
                    
                    <div class="control-group">
                        <label for="dice-type">Tipo de Dado</label>
                        <select id="dice-type">
                            <option value="4">D4 (Tetraedro)</option>
                            <option value="6" selected>D6 (Cubo)</option>
                            <option value="8">D8 (Octaedro)</option>
                            <option value="10">D10 (Decaedro)</option>
                            <option value="12">D12 (Dodecaedro)</option>
                            <option value="20">D20 (Icosaedro)</option>
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="dice-count">Cantidad de Dados</label>
                        <input type="number" id="dice-count" min="1" max="10" value="2">
                    </div>
                </div>
                
                <div class="panel-section">
                    <div class="panel-header">
                        <i class="fas fa-paint-brush"></i>
                        <h3>Personalización</h3>
                    </div>
                    
                    <div class="control-group">
                        <label>Tema de Dados</label>
                        <div class="dice-theme-selector">
                            <div class="theme-option cyan active" data-theme="cyan"></div>
                            <div class="theme-option magenta" data-theme="magenta"></div>
                            <div class="theme-option rainbow" data-theme="rainbow"></div>
                            <div class="theme-option gold" data-theme="gold"></div>
                            <div class="theme-option crystal" data-theme="crystal"></div>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="sliders">
                            <div class="slider-control">
                                <label>
                                    Tamaño de Dados
                                    <span id="size-value">100%</span>
                                </label>
                                <input type="range" class="slider-input" id="dice-size" min="50" max="150" value="100">
                                <div class="dice-size-preview" id="size-preview"></div>
                            </div>
                            
                            <div class="slider-control">
                                <label>
                                    Fuerza de Lanzamiento
                                    <span id="force-value">Normal</span>
                                </label>
                                <input type="range" class="slider-input" id="throw-force" min="1" max="5" value="3">
                            </div>
                            
                            <div class="slider-control">
                                <label>
                                    Gravedad
                                    <span id="gravity-value">Normal</span>
                                </label>
                                <input type="range" class="slider-input" id="gravity" min="1" max="5" value="3">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="panel-section">
                    <div class="panel-header">
                        <i class="fas fa-cog"></i>
                        <h3>Ajustes</h3>
                    </div>
                    
                    <div class="control-group">
                        <label for="sound-toggle">Efectos de Sonido</label>
                        <select id="sound-toggle">
                            <option value="on" selected>Activados</option>
                            <option value="off">Desactivados</option>
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="animation-speed">Velocidad de Animación</label>
                        <select id="animation-speed">
                            <option value="slow">Lenta</option>
                            <option value="normal" selected>Normal</option>
                            <option value="fast">Rápida</option>
                        </select>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button id="roll-button">¡Lanzar Dados!</button>
                    <button id="settings-button">Configuración Avanzada</button>
                </div>
            </div>
            
            <div id="canvas-container">
                <div id="dice-canvas"></div>
                <div class="canvas-overlay"></div>
                <div class="glow-effects"></div>
            </div>
        </div>
        
        <div class="results-area">
            <div class="results-header">
                <h3 class="results-title">Resultados</h3>
                <button class="delete-history">Limpiar Historial</button>
            </div>
            
            <div class="current-roll" id="current-roll">
                <div class="roll-info">
                    <div class="roll-type">Último Lanzamiento</div>
                    <div class="roll-formula">2D6</div>
                    <div class="roll-value">7</div>
                    <div class="roll-time">12:45:30</div>
                </div>
            </div>
            
            <div class="history-container">
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>Hora</th>
                            <th>Tipo</th>
                            <th>Dados</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="history-list">
                        <!-- Historial de lanzamientos se añade aquí -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <footer>
            <p>Simulador de Dados Avanzado v2.0 | Desarrollado con tecnología WebGL y Three.js</p>
        </footer>
    </div>
    
    <!-- Modal de configuración avanzada -->
    <div class="modal" id="settings-modal">
        <div class="modal-content">
            <div class="modal-close" id="modal-close">✕</div>
            <div class="modal-header">
                <h2 class="modal-title">Configuración Avanzada</h2>
                <p>Personaliza aún más tu experiencia de lanzamiento de dados</p>
            </div>
            
            <div class="control-group">
                <label for="physics-quality">Calidad de Física</label>
                <select id="physics-quality">
                    <option value="low">Baja (Mejor rendimiento)</option>
                    <option value="medium" selected>Media</option>
                    <option value="high">Alta (Más realista)</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="visual-effects">Efectos Visuales</label>
                <select id="visual-effects">
                    <option value="minimal">Mínimos</option>
                    <option value="standard" selected>Estándar</option>
                    <option value="ultra">Ultra</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="table-texture">Textura de Mesa</label>
                <select id="table-texture">
                    <option value="felt">Fieltro</option>
                    <option value="wood">Madera</option>
                    <option value="space" selected>Espacio</option>
                    <option value="abstract">Abstracto</option>
                </select>
            </div>
            
            <button id="save-settings">Guardar Configuración</button>
        </div>
    </div>
    
    <div style="position:fixed; bottom:20px; right:20px; z-index:9999;">
        <button onclick="document.getElementById('roll-button').click()" 
                style="padding:15px 30px; background:linear-gradient(90deg,#00ffd5,#9900ff); 
                       border:none; color:#0a0a20; font-weight:bold; border-radius:10px; 
                       font-size:16px; cursor:pointer;">
            ¡LANZAR DADOS!
        </button>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Elementos del DOM
            const diceTypeSelect = document.getElementById('dice-type');
            const diceCountInput = document.getElementById('dice-count');
            const animationSpeedSelect = document.getElementById('animation-speed');
            const rollButton = document.getElementById('roll-button');
            const settingsButton = document.getElementById('settings-button');
            const historyList = document.getElementById('history-list');
            const currentRoll = document.getElementById('current-roll');
            const deleteHistoryButton = document.querySelector('.delete-history');
            const settingsModal = document.getElementById('settings-modal');
            const modalClose = document.getElementById('modal-close');
            const saveSettingsButton = document.getElementById('save-settings');
            const themeOptions = document.querySelectorAll('.theme-option');
            const diceSizeSlider = document.getElementById('dice-size');
            const throwForceSlider = document.getElementById('throw-force');
            const gravitySlider = document.getElementById('gravity');
            const sizeValue = document.getElementById('size-value');
            const forceValue = document.getElementById('force-value');
            const gravityValue = document.getElementById('gravity-value');
            const sizePreview = document.getElementById('size-preview');
            
            // Variables globales
            let isRolling = false;
            let history = [];
            let currentTheme = 'cyan';
            let diceSize = 100;
            let scene, camera, renderer, dice = [];
            let physicsWorld, rigidBodies = [];
            
            // Configuraciones
            const settings = {
                physicsQuality: 'medium',
                visualEffects: 'standard',
                tableTexture: 'space',
                soundEnabled: true
            };
            
            // Efectos de sonido simplificados usando AudioContext
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            
            // Función para crear sonido de dados
            function createDiceSound() {
                if (!settings.soundEnabled) return;
                
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.type = 'triangle';
                oscillator.frequency.value = Math.random() * 100 + 150;
                gainNode.gain.value = 0.1;
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.start();
                gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);
                oscillator.stop(audioContext.currentTime + 0.5);
            }
            
            // Inicializar Three.js
            function initThreeJS() {
                // Crear escena
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0x0a0a20);
                
                // Crear cámara
                camera = new THREE.PerspectiveCamera(
                    75, 
                    document.getElementById('canvas-container').offsetWidth / 
                    document.getElementById('canvas-container').offsetHeight, 
                    0.1, 
                    1000
                );
                camera.position.z = 10;
                camera.position.y = 5;
                camera.lookAt(0, 0, 0);
                
                // Configurar renderer
                renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                renderer.setSize(
                    document.getElementById('canvas-container').offsetWidth, 
                    document.getElementById('canvas-container').offsetHeight
                );
                renderer.shadowMap.enabled = true;
                
                // Agregar al DOM
                document.getElementById('dice-canvas').appendChild(renderer.domElement);
                
                // Agregar luces
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
                scene.add(ambientLight);
                
                const spotLight = new THREE.SpotLight(0x00ffd5, 1);
                spotLight.position.set(5, 10, 5);
                spotLight.castShadow = true;
                spotLight.shadow.mapSize.width = 1024;
                spotLight.shadow.mapSize.height = 1024;
                scene.add(spotLight);
                
                // Agregar piso/mesa
                createTable();
                
                // Iniciar animación
                animate();
            }
            
            // Crear mesa según textura seleccionada
            function createTable() {
                const textureLoader = new THREE.TextureLoader();
                let texture;
                
                switch(settings.tableTexture) {
                    case 'felt':
                        texture = createFeltTexture();
                        break;
                    case 'wood':
                        texture = createWoodTexture();
                        break;
                    case 'space':
                        texture = createSpaceTexture();
                        break;
                    case 'abstract':
                        texture = createAbstractTexture();
                        break;
                    default:
                        texture = createSpaceTexture();
                }
                
                const geometry = new THREE.PlaneGeometry(20, 20);
                const material = new THREE.MeshStandardMaterial({ 
                    map: texture,
                    roughness: 0.8,
                    metalness: 0.2
                });
                
                const table = new THREE.Mesh(geometry, material);
                table.rotation.x = -Math.PI / 2;
                table.position.y = -2;
                table.receiveShadow = true;
                scene.add(table);
            }
            
            // Funciones para crear texturas proceduralmente
            function createFeltTexture() {
                const canvas = document.createElement('canvas');
                canvas.width = 256;
                canvas.height = 256;
                const context = canvas.getContext('2d');
                
                // Fondo verde oscuro
                context.fillStyle = '#0a3a20';
                context.fillRect(0, 0, canvas.width, canvas.height);
                
                // Agregar textura
                for (let i = 0; i < 5000; i++) {
                    const x = Math.random() * canvas.width;
                    const y = Math.random() * canvas.height;
                    const radius = Math.random() * 0.5 + 0.5;
                    context.beginPath();
                    context.arc(x, y, radius, 0, Math.PI * 2);
                    context.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.03})`;
                    context.fill();
                }
                
                const texture = new THREE.CanvasTexture(canvas);
                return texture;
            }
            
            function createSpaceTexture() {
                const canvas = document.createElement('canvas');
                canvas.width = 512;
                canvas.height = 512;
                const context = canvas.getContext('2d');
                
                // Fondo negro
                const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
                gradient.addColorStop(0, '#0a0a20');
                gradient.addColorStop(1, '#1a1a4a');
                context.fillStyle = gradient;
                context.fillRect(0, 0, canvas.width, canvas.height);
                
                // Estrellas
                for (let i = 0; i < 200; i++) {
                    const x = Math.random() * canvas.width;
                    const y = Math.random() * canvas.height;
                    const radius = Math.random() * 1.5 + 0.5;
                    const brightness = Math.random() * 0.8 + 0.2;
                    
                    context.beginPath();
                    context.arc(x, y, radius, 0, Math.PI * 2);
                    context.fillStyle = `rgba(255, 255, 255, ${brightness})`;
                    context.fill();
                    
                    // Brillo para algunas estrellas
                    if (Math.random() > 0.8) {
                        context.beginPath();
                        context.arc(x, y, radius * 3, 0, Math.PI * 2);
                        context.fillStyle = `rgba(255, 255, 255, 0.1)`;
                        context.fill();
                    }
                }
                
                // Nebulosas
                for (let i = 0; i < 3; i++) {
                    const x = Math.random() * canvas.width;
                    const y = Math.random() * canvas.height;
                    const radius = Math.random() * 150 + 50;
                    
                    const nebulaGradient = context.createRadialGradient(
                        x, y, 0, x, y, radius
                    );
                    
                    const hue = Math.random() * 60 + 180; // Azules y cianes
                    nebulaGradient.addColorStop(0, `hsla(${hue}, 100%, 70%, 0.2)`);
                    nebulaGradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 0)`);
                    
                    context.beginPath();
                    context.arc(x, y, radius, 0, Math.PI * 2);
                    context.fillStyle = nebulaGradient;
                    context.fill();
                }
                
                const texture = new THREE.CanvasTexture(canvas);
                return texture;
            }
            
            // Función para crear un dado 3D
            function createDie(type, index, theme) {
                let geometry, material, die;
                
                // Diferentes geometrías según el tipo de dado
                switch(parseInt(type)) {
                    case 4:
                        geometry = new THREE.TetrahedronGeometry(diceSize / 100);
                        break;
                    case 6:
                        geometry = new THREE.BoxGeometry(diceSize / 100, diceSize / 100, diceSize / 100);
                        break;
                    case 8:
                        geometry = new THREE.OctahedronGeometry(diceSize / 100);
                        break;
                    case 10:
                        geometry = new THREE.ConeGeometry(diceSize / 150, diceSize / 75, 10);
                        break;
                    case 12:
                        geometry = new THREE.DodecahedronGeometry(diceSize / 100);
                        break;
                    case 20:
                        geometry = new THREE.IcosahedronGeometry(diceSize / 100);
                        break;
                    default:
                        geometry = new THREE.BoxGeometry(diceSize / 100, diceSize / 100, diceSize / 100);
                }
                
                // Material según el tema seleccionado
                let color, emissive, metalness, roughness;
                
                switch(theme) {
                    case 'cyan':
                        color = 0x00ffd5;
                        emissive = 0x007a66;
                        metalness = 0.7;
                        roughness = 0.3;
                        break;
                    case 'magenta':
                        color = 0xff00bb;
                        emissive = 0x7a0059;
                        metalness = 0.7;
                        roughness = 0.3;
                        break;
                    case 'gold':
                        color = 0xffd700;
                        emissive = 0x7a6a00;
                        metalness = 0.9;
                        roughness = 0.1;
                        break;
                    case 'crystal':
                        color = 0x9900ff;
                        emissive = 0x4a007a;
                        metalness = 0.2;
                        roughness = 0.1;
                        break;
                    case 'rainbow':
                        // Material especial con animación de arcoíris
                        const uniforms = {
                            time: { value: 0.0 }
                        };
                        
                        material = new THREE.ShaderMaterial({
                            uniforms: uniforms,
                            vertexShader: `
                                varying vec2 vUv;
                                void main() {
                                    vUv = uv;
                                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                                }
                            `,
                            fragmentShader: `
                                uniform float time;
                                varying vec2 vUv;
                                
                                vec3 hsb2rgb(vec3 c) {
                                    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
                                    rgb = rgb*rgb*(3.0-2.0*rgb);
                                    return c.z * mix(vec3(1.0), rgb, c.y);
                                }
                                
                                void main() {
                                    float hue = vUv.x + vUv.y + time * 0.2;
                                    vec3 color = hsb2rgb(vec3(hue, 0.8, 0.9));
                                    gl_FragColor = vec4(color, 1.0);
                                }
                            `
                        });
                        break;
                    default:
                        color = 0x00ffd5;
                        emissive = 0x007a66;
                        metalness = 0.7;
                        roughness = 0.3;
                }
                
                // Para dados de 6 caras, usamos texturas con puntos
                if (parseInt(type) === 6 && !material) {
                    const materials = [];
                    
                    // Crear texturas para las 6 caras
                    for (let i = 1; i <= 6; i++) {
                        const dieTexture = createDieTexture(i, color);
                        const faceMaterial = new THREE.MeshStandardMaterial({
                            map: dieTexture,
                            color: color,
                            emissive: emissive,
                            metalness: metalness,
                            roughness: roughness
                        });
                        materials.push(faceMaterial);
                    }
                    
                    // Orden de las caras: right, left, top, bottom, front, back
                    material = materials;
                } else if (!material) {
                    material = new THREE.MeshStandardMaterial({
                        color: color,
                        emissive: emissive,
                        metalness: metalness,
                        roughness: roughness,
                        transparent: theme === 'crystal',
                        opacity: theme === 'crystal' ? 0.8 : 1.0
                    });
                }
                
                die = new THREE.Mesh(geometry, material);
                die.castShadow = true;
                die.receiveShadow = true;
                die.userData = { type: type, index: index, value: 1 };
                
                // Posición inicial
                die.position.set(
                    (index - 1) * 2, 
                    5 + Math.random() * 2,
                    Math.random() * 2 - 1
                );
                
                // Rotación inicial aleatoria
                die.rotation.set(
                    Math.random() * Math.PI * 2,
                    Math.random() * Math.PI * 2,
                    Math.random() * Math.PI * 2
                );
                
                scene.add(die);
                dice.push(die);
                
                return die;
            }
            
            // Función para crear texturas con puntos para los dados
            function createDieTexture(value, dieColor) {
                const canvas = document.createElement('canvas');
                canvas.width = 128;
                canvas.height = 128;
                const context = canvas.getContext('2d');
                
                // Color de fondo (ajustamos el color ligeramente más oscuro para el fondo)
                const colorObj = new THREE.Color(dieColor);
                const r = Math.floor(colorObj.r * 200);
                const g = Math.floor(colorObj.g * 200);
                const b = Math.floor(colorObj.b * 200);
                context.fillStyle = `rgb(${r}, ${g}, ${b})`;
                context.fillRect(0, 0, canvas.width, canvas.height);
                
                // Color de los puntos (blanco o negro según el color de fondo)
                const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                context.fillStyle = luminance > 0.5 ? 'black' : 'white';
                
                const padding = 20;
                const dotSize = 16;
                
                // Posiciones de los puntos según el valor
                const positions = {
                    1: [[64, 64]],
                    2: [[padding, padding], [128 - padding, 128 - padding]],
                    3: [[padding, padding], [64, 64], [128 - padding, 128 - padding]],
                    4: [[padding, padding], [padding, 128 - padding], 
                       [128 - padding, padding], [128 - padding, 128 - padding]],
                    5: [[padding, padding], [padding, 128 - padding], 
                       [64, 64],
                       [128 - padding, padding], [128 - padding, 128 - padding]],
                    6: [[padding, padding], [padding, 64], [padding, 128 - padding],
                       [128 - padding, padding], [128 - padding, 64], [128 - padding, 128 - padding]]
                };
                
                // Dibujar los puntos
                const dots = positions[value] || [];
                dots.forEach(([x, y]) => {
                    context.beginPath();
                    context.arc(x, y, dotSize, 0, Math.PI * 2);
                    context.fill();
                });
                
                // Añadir un borde para definir mejor la cara
                context.strokeStyle = luminance > 0.5 ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)';
                context.lineWidth = 5;
                context.strokeRect(5, 5, canvas.width - 10, canvas.height - 10);
                
                const texture = new THREE.CanvasTexture(canvas);
                return texture;
            }
            
            // Función para lanzar dados con animación 3D (modificada)
            function rollDice3D(type, count, force, gravity) {
                if (isRolling) return;
                isRolling = true;
                
                // Limpiar dados anteriores
                dice.forEach(die => scene.remove(die));
                dice = [];
                
                // Crear nuevos dados
                for (let i = 0; i < count; i++) {
                    createDie(type, i, currentTheme);
                }
                
                // Sonido de lanzamiento
                if (settings.soundEnabled) {
                    createDiceSound();
                }
                
                // Animar caída
                const results = [];
                const duration = getAnimationDuration();
                
                // Generar resultados
                for (let i = 0; i < count; i++) {
                    results.push(Math.floor(Math.random() * type) + 1);
                }
                
                // Animar los dados
                const tl = gsap.timeline({
                    onComplete: function() {
                        // Actualizar UI
                        updateResults(results);
                        isRolling = false;
                    }
                });
                
                dice.forEach((die, index) => {
                    // Animación de caída
                    tl.to(die.position, {
                        duration: duration * 0.8,
                        y: Math.random() * 0.5 - 1.5,
                        ease: "bounce.out"
                    }, 0);
                    
                    // Animación de rotación para que muestre el resultado
                    const resultValue = results[index];
                    const targetRotation = getDieRotationForResult(die, resultValue, type);
                    
                    tl.to(die.rotation, {
                        duration: duration,
                        x: targetRotation.x,
                        y: targetRotation.y,
                        z: targetRotation.z,
                        ease: "power2.out"
                    }, 0);
                    
                    // Guardar resultado
                    die.userData.value = resultValue;
                });
                
                // Crear efectos de partículas 3D
                createParticles3D();
            }
            
            // Nueva función para determinar la rotación correcta según el resultado
            function getDieRotationForResult(die, result, type) {
                // Rotación aleatoria base con muchas vueltas
                const baseX = Math.PI * 2 * (Math.random() * 3 + 2);
                const baseY = Math.PI * 2 * (Math.random() * 3 + 2);
                const baseZ = Math.PI * 2 * (Math.random() * 3 + 2);
                
                // Para dados de 6 caras (cubos), podemos definir rotaciones específicas
                if (type === 6) {
                    switch(result) {
                        case 1: return { x: baseX + 0, y: baseY + 0, z: baseZ + 0 };
                        case 2: return { x: baseX + Math.PI/2, y: baseY + 0, z: baseZ + 0 };
                        case 3: return { x: baseX + 0, y: baseY + Math.PI/2, z: baseZ + 0 };
                        case 4: return { x: baseX + 0, y: baseY - Math.PI/2, z: baseZ + 0 };
                        case 5: return { x: baseX - Math.PI/2, y: baseY + 0, z: baseZ + 0 };
                        case 6: return { x: baseX + Math.PI, y: baseY + 0, z: baseZ + 0 };
                    }
                }
                
                // Para otros tipos de dados, usamos rotación aleatoria
                return { x: baseX, y: baseY, z: baseZ };
            }
            
            // Efectos visuales 3D
            function createParticles3D() {
                const particlesGroup = new THREE.Group();
                scene.add(particlesGroup);
                
                const count = settings.visualEffects === 'ultra' ? 100 : 
                              settings.visualEffects === 'standard' ? 50 : 20;
                
                for (let i = 0; i < count; i++) {
                    const geometry = new THREE.SphereGeometry(0.05, 8, 8);
                    const material = new THREE.MeshBasicMaterial({
                        color: getParticleColor(),
                        transparent: true,
                        opacity: Math.random() * 0.5 + 0.5
                    });
                    
                    const particle = new THREE.Mesh(geometry, material);
                    
                    // Posición aleatoria alrededor de los dados
                    particle.position.set(
                        Math.random() * 6 - 3,
                        Math.random() * 3 + 1,
                        Math.random() * 6 - 3
                    );
                    
                    particlesGroup.add(particle);
                    
                    // Animación de partícula
                    gsap.to(particle.position, {
                        duration: Math.random() * 1.5 + 0.5,
                        x: particle.position.x + (Math.random() * 2 - 1) * 3,
                        y: particle.position.y + Math.random() * 3,
                        z: particle.position.z + (Math.random() * 2 - 1) * 3,
                        ease: "power1.out"
                    });
                    
                    gsap.to(particle.material, {
                        duration: Math.random() * 1.5 + 0.5,
                        opacity: 0,
                        ease: "power1.out",
                        onComplete: function() {
                            particlesGroup.remove(particle);
                            particle.geometry.dispose();
                            particle.material.dispose();
                            
                            // Eliminar el grupo cuando todas las partículas desaparezcan
                            if (particlesGroup.children.length === 0) {
                                scene.remove(particlesGroup);
                            }
                        }
                    });
                }
            }
            
            // Obtener un color aleatorio para las partículas basado en el tema actual
            function getParticleColor() {
                switch(currentTheme) {
                    case 'cyan':
                        return 0x00ffd5;
                    case 'magenta':
                        return 0xff00bb;
                    case 'gold':
                        return 0xffd700;
                    case 'crystal':
                        return 0x9900ff;
                    case 'rainbow':
                        // Colores aleatorios para el tema arcoíris
                        const hue = Math.random();
                        return new THREE.Color().setHSL(hue, 1, 0.5);
                    default:
                        return 0x00ffd5;
                }
            }
            
            // Actualizar resultados en la UI
            function updateResults(results) {
                const total = results.reduce((sum, val) => sum + val, 0);
                const diceType = parseInt(diceTypeSelect.value);
                const diceCount = parseInt(diceCountInput.value);
                
                // Actualizar el área de resultados actuales
                currentRoll.classList.add('visible');
                currentRoll.querySelector('.roll-formula').textContent = `${diceCount}D${diceType}`;
                currentRoll.querySelector('.roll-value').textContent = total;
                currentRoll.querySelector('.roll-time').textContent = new Date().toLocaleTimeString();
                
                // Agregar al historial
                const historyEntry = {
                    type: `${diceCount}D${diceType}`,
                    results: results,
                    total: total,
                    timestamp: new Date()
                };
                
                addToHistory(historyEntry);
                
                // Efecto visual para el resultado
                showResultEffect(total);
            }
            
            // Crear efecto visual para destacar el resultado
            function showResultEffect(total) {
                const glowEffects = document.querySelector('.glow-effects');
                glowEffects.innerHTML = '';
                
                // Más efectos para resultados más altos
                const count = Math.min(Math.ceil(total / 4), 5);
                
                for (let i = 0; i < count; i++) {
                    const glow = document.createElement('div');
                    glow.className = 'glow';
                    
                    // Posición aleatoria
                    const x = Math.random() * 80 + 10;
                    const y = Math.random() * 80 + 10;
                    
                    glow.style.left = `${x}%`;
                    glow.style.top = `${y}%`;
                    
                    glowEffects.appendChild(glow);
                    
                    // Animación de brillo
                    gsap.fromTo(glow, 
                        { opacity: 0, scale: 0 },
                        { 
                            duration: Math.random() * 1 + 1,
                            opacity: 0.7, 
                            scale: 1,
                            ease: "power2.out",
                            onComplete: function() {
                                gsap.to(glow, {
                                    duration: Math.random() * 1 + 0.5,
                                    opacity: 0,
                                    scale: 1.5,
                                    ease: "power2.in"
                                });
                            }
                        }
                    );
                }
            }
            
            // Función de animación principal
            function animate() {
                requestAnimationFrame(animate);
                
                // Actualizar lógica de animación aquí
                dice.forEach(die => {
                    if (die.material.type === 'ShaderMaterial') {
                        die.material.uniforms.time.value += 0.01;
                    }
                });
                
                renderer.render(scene, camera);
            }
            
            // Retornar duración de animación según la velocidad seleccionada
            function getAnimationDuration() {
                const speed = animationSpeedSelect.value;
                switch(speed) {
                    case 'slow': return 3;
                    case 'fast': return 1;
                    default: return 2;
                }
            }
            
            // Configurar efectos visuales de líneas de cuadrícula
            function setupGridLines() {
                const gridLines = document.querySelector('.grid-lines');
                gridLines.innerHTML = '';
                
                // Líneas horizontales
                for (let i = 1; i < 10; i++) {
                    const line = document.createElement('div');
                    line.className = 'horizontal-line';
                    line.style.top = `${i * 10}%`;
                    gridLines.appendChild(line);
                }
                
                // Líneas verticales
                for (let i = 1; i < 10; i++) {
                    const line = document.createElement('div');
                    line.className = 'vertical-line';
                    line.style.left = `${i * 10}%`;
                    gridLines.appendChild(line);
                }
            }
            
            // Configurar efecto de rastro de cursor
            function setupCursorTrail() {
                const trailElements = [];
                const trailCount = 5;
                
                // Crear elementos de rastro
                for (let i = 0; i < trailCount; i++) {
                    const trail = document.createElement('div');
                    trail.className = 'cursor-trail';
                    document.body.appendChild(trail);
                    trailElements.push({
                        element: trail,
                        x: 0,
                        y: 0
                    });
                }
                
                // Seguir al cursor con delay
                document.addEventListener('mousemove', function(e) {
                    gsap.to(trailElements[0], {
                        duration: 0.1,
                        x: e.clientX,
                        y: e.clientY,
                        opacity: 0.8,
                        overwrite: true
                    });
                    
                    // Efecto de cascada para los demás elementos
                    for (let i = 1; i < trailCount; i++) {
                        gsap.to(trailElements[i], {
                            duration: 0.2,
                            x: trailElements[i-1].x,
                            y: trailElements[i-1].y,
                            opacity: 0.8 - (i * 0.15),
                            overwrite: true,
                            delay: i * 0.02
                        });
                    }
                });
                
                // Ocultar cuando el cursor sale de la ventana
                document.addEventListener('mouseout', function() {
                    trailElements.forEach(trail => {
                        gsap.to(trail.element, {
                            duration: 0.5,
                            opacity: 0
                        });
                    });
                });
            }
            
            // Iniciar la aplicación 3D
            function init() {
                // Inicializar Three.js
                initThreeJS();
                
                // Configurar efectos visuales de la UI
                setupGridLines();
                setupCursorTrail();
                
                // Event listeners
                rollButton.addEventListener('click', function() {
                    const type = parseInt(diceTypeSelect.value);
                    const count = parseInt(diceCountInput.value);
                    const force = parseInt(throwForceSlider.value);
                    const gravity = parseInt(gravitySlider.value);
                    
                    rollDice3D(type, count, force, gravity);
                });
                
                // Event listeners para tema de dados
                themeOptions.forEach(option => {
                    option.addEventListener('click', function() {
                        themeOptions.forEach(opt => opt.classList.remove('active'));
                        this.classList.add('active');
                        currentTheme = this.dataset.theme;
                    });
                });
                
                // Control deslizante de tamaño
                diceSizeSlider.addEventListener('input', function() {
                    diceSize = parseInt(this.value);
                    sizeValue.textContent = `${diceSize}%`;
                    sizePreview.style.transform = `scale(${diceSize / 100})`;
                });
                
                // Control deslizante de fuerza
                throwForceSlider.addEventListener('input', function() {
                    const value = parseInt(this.value);
                    switch(value) {
                        case 1: forceValue.textContent = 'Muy Suave'; break;
                        case 2: forceValue.textContent = 'Suave'; break;
                        case 3: forceValue.textContent = 'Normal'; break;
                        case 4: forceValue.textContent = 'Fuerte'; break;
                        case 5: forceValue.textContent = 'Muy Fuerte'; break;
                    }
                });
                
                // Control deslizante de gravedad
                gravitySlider.addEventListener('input', function() {
                    const value = parseInt(this.value);
                    switch(value) {
                        case 1: gravityValue.textContent = 'Muy Baja'; break;
                        case 2: gravityValue.textContent = 'Baja'; break;
                        case 3: gravityValue.textContent = 'Normal'; break;
                        case 4: gravityValue.textContent = 'Alta'; break;
                        case 5: gravityValue.textContent = 'Muy Alta'; break;
                    }
                });
                
                // Modal de configuración
                settingsButton.addEventListener('click', function() {
                    settingsModal.classList.add('active');
                });
                
                modalClose.addEventListener('click', function() {
                    settingsModal.classList.remove('active');
                });
                
                saveSettingsButton.addEventListener('click', function() {
                    settings.physicsQuality = document.getElementById('physics-quality').value;
                    settings.visualEffects = document.getElementById('visual-effects').value;
                    settings.tableTexture = document.getElementById('table-texture').value;
                    settings.soundEnabled = document.getElementById('sound-toggle').value === 'on';
                    
                    // Actualizar escena 3D con nuevas configuraciones
                    updateScene();
                    
                    // Cerrar modal
                    settingsModal.classList.remove('active');
                    
                    // Mostrar notificación
                    Swal.fire({
                        title: '¡Configuración guardada!',
                        text: 'Los cambios se han aplicado correctamente',
                        icon: 'success',
                        background: 'var(--surface)',
                        color: 'var(--on-surface)',
                        confirmButtonColor: 'var(--primary)'
                    });
                });
                
                // Botón de limpiar historial
                deleteHistoryButton.addEventListener('click', function() {
                    Swal.fire({
                        title: '¿Estás seguro?',
                        text: 'Se eliminará todo el historial de lanzamientos',
                        icon: 'warning',
                        background: 'var(--surface)',
                        color: 'var(--on-surface)',
                        showCancelButton: true,
                        confirmButtonColor: 'var(--primary)',
                        cancelButtonColor: '#ff5555',
                        confirmButtonText: 'Sí, eliminar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            history = [];
                            updateHistoryDisplay();
                        }
                    });
                });
                
                // Responsive
                window.addEventListener('resize', resizeRenderer);
                
                // Animaciones iniciales para la UI
                animateUI();
            }
            
            // Actualizar escena 3D con nuevas configuraciones
            function updateScene() {
                // Actualizar mesa con nueva textura
                scene.children.forEach(child => {
                    if (child.geometry instanceof THREE.PlaneGeometry) {
                        scene.remove(child);
                    }
                });
                
                createTable();
            }
            
            // Redimensionar renderer cuando cambia el tamaño de la ventana
            function resizeRenderer() {
                const container = document.getElementById('canvas-container');
                camera.aspect = container.offsetWidth / container.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(container.offsetWidth, container.offsetHeight);
            }
            
            // Animaciones iniciales de la UI
            function animateUI() {
                // Animar encabezado
                gsap.from('header', { duration: 1, y: -50, opacity: 0, ease: "power3.out" });
                
                // Animar contenedor de juego
                gsap.from('.game-container', { duration: 1, opacity: 0, y: 30, ease: "power2.out", delay: 0.3 });
                
                // Animar área de resultados
                gsap.from('.results-area', { duration: 1, opacity: 0, y: 30, ease: "power2.out", delay: 0.6 });
                
                // Animar controles de forma escalonada
                gsap.from('.panel-section', { 
                    duration: 0.5, 
                    opacity: 0, 
                    y: 20, 
                    stagger: 0.2, 
                    ease: "power2.out",
                    delay: 0.8
                });
                
                // Animar botones
                gsap.from('.action-buttons button', { 
                    duration: 0.5, 
                    opacity: 0, 
                    y: 20, 
                    stagger: 0.2, 
                    ease: "back.out(1.5)",
                    delay: 1.4
                });
            }
            
            // Función para actualizar la visualización del historial
            function updateHistoryDisplay() {
                historyList.innerHTML = '';
                
                history.forEach((entry) => {
                    const row = document.createElement('tr');
                    
                    // Hora
                    const timeCell = document.createElement('td');
                    timeCell.textContent = entry.timestamp.toLocaleTimeString();
                    row.appendChild(timeCell);
                    
                    // Tipo
                    const typeCell = document.createElement('td');
                    typeCell.textContent = entry.type;
                    row.appendChild(typeCell);
                    
                    // Dados
                    const diceCell = document.createElement('td');
                    diceCell.textContent = entry.results.join(', ');
                    row.appendChild(diceCell);
                    
                    // Total
                    const totalCell = document.createElement('td');
                    totalCell.textContent = entry.total;
                    totalCell.className = 'history-value';
                    row.appendChild(totalCell);
                    
                    historyList.appendChild(row);
                });
            }
            
            // Función para agregar un resultado al historial
            function addToHistory(entry) {
                // Agregar la entrada al inicio del array para mostrar los más recientes primero
                history.unshift(entry);
                
                // Actualizar la visualización del historial
                updateHistoryDisplay();
            }
            
            // Iniciar la aplicación
            init();
        });
    </script>
</body>
</html>