:root {
    --bg-system: #c863e791;
    --bg-card: #ee3aee;
    --border-color: #630132;
    --text-light: #f8fafc;
    --text-dim: #000000;
    --emerald: #ab6cf1;
    --rose: #cf6476fb;
    --indigo: #800191;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
body { background-color: var(--bg-system); color: var(--text-light); padding: 2rem 1rem; }
.game-container { max-width: 600px; margin: 0 auto; }

.scoreboard { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.subtitle { color: var(--text-dim); font-size: 0.9rem; margin-top: 0.3rem; }
.score-pills { display: flex; gap: 0.5rem; }
.pill { padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; }
.pill-success { background-color: rgba(197, 8, 255, 0.2); color: var(--emerald); }
.pill-danger { background-color: rgba(211, 117, 133, 0.767); color: var(--rose); }

.game-box { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); }
.progress-bar { background-color: #520044; height: 6px; border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.progress-fill { background: var(--indigo); width: 0%; height: 100%; transition: width 0.3s; }

/* Engine Gráfico 3D */
.viewport-3d { width: 100%; height: 260px; perspective: 1200px; margin-bottom: 2rem; }
.card-3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.card-3d.flipped { transform: rotateY(180deg); }

.face {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    border-radius: 12px; padding: 2rem; display: flex; flex-direction: column;
    justify-content: space-between; align-items: center; text-align: center; border: 2px solid var(--border-color);
}
.face.front { background: #f115df; color: var(--text-light); }
.face.back { background: #8b02ad; color: #f8e8e8; transform: rotateY(180deg); border-color: #4338ca; }

.tracker { font-size: 0.75rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; }
.tracker-back { font-size: 0.75rem; color: #818cf8; font-weight: 700; text-transform: uppercase; }
.main-text { font-size: 1.2rem; font-weight: 600; line-height: 1.6; }
.code-block { font-family: monospace; background: rgba(200, 122, 245, 0.959); padding: 0.6rem 1rem; border-radius: 6px; width: 100%; word-break: break-all; }
.hint-action { font-size: 0.8rem; color: var(--text-dim); }

/* Controladores de Entrada */
.control-actions { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.action-btn { width: 100%; padding: 12px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.action-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.b-red { background-color: var(--rose); color: white; }
.b-green { background-color: var(--emerald); color: white; }

.game-footer { border-top: 1px solid var(--border-color); padding-top: 1rem; text-align: center; }
.btn-restart { background: none; border: none; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.btn-restart:hover { color: var(--text-light); }