:root {
    --bg: #0d0d12;
    --bg-card: #1a1a24;
    --fg: #e8e6f0;
    --accent: #d4af37;
    --accent-soft: #b8941f;
    --error: #e85d75;
    --success: #6ddc6d;
    --border: #2a2a38;
    --font-display: 'Cinzel', serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: radial-gradient(ellipse at top, #1a1a2e 0%, var(--bg) 60%);
    color: var(--fg);
    min-height: 100vh;
    line-height: 1.6;
    padding: 2rem 1rem;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

h1, h2, h3 { font-family: var(--font-display); margin-bottom: 1rem; }
h1 { font-size: 2rem; color: var(--accent); }
h2 { font-size: 1.4rem; color: var(--accent-soft); margin-top: 1.5rem; }

.tema-tag {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-soft);
    margin-bottom: 0.5rem;
}

.cifra-box, .enigma-box {
    background: #0a0a0f;
    border: 1px dashed var(--accent-soft);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    text-align: center;
    word-break: break-word;
}

form { margin-top: 1.5rem; }

input[type="text"], input[type="number"] {
    width: 100%;
    padding: 0.9rem 1rem;
    background: #0a0a0f;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--fg);
    font-size: 1rem;
    font-family: var(--font-body);
}

input:focus { outline: none; border-color: var(--accent); }

button, .btn {
    display: inline-block;
    background: var(--accent);
    color: #0d0d12;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, background 0.2s;
}

button:hover, .btn:hover { background: #f0c850; transform: translateY(-1px); }

.alert {
    padding: 0.9rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: 0.95rem;
}
.alert-error   { background: rgba(232,93,117,0.15); border: 1px solid var(--error); color: var(--error); }
.alert-success { background: rgba(109,220,109,0.15); border: 1px solid var(--success); color: var(--success); }

.dica {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.ranking-table th, .ranking-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.ranking-table th { color: var(--accent-soft); font-weight: 600; }

.progresso { display: flex; gap: 4px; margin: 1.5rem 0; }
.progresso .step {
    flex: 1; height: 6px; background: var(--border); border-radius: 3px;
}
.progresso .step.done { background: var(--accent); }
.progresso .step.atual { background: var(--accent-soft); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* Variações temáticas */
.tema-harry-potter   { --accent: #ffd700; --accent-soft: #b8860b; }
.tema-mochileiro     { --accent: #00d4ff; --accent-soft: #0099cc; }
.tema-star-wars      { --accent: #ffe81f; --accent-soft: #c4b300; }
.tema-senhor-aneis   { --accent: #c9a961; --accent-soft: #8b7330; }
.tema-matrix         { --accent: #00ff41; --accent-soft: #008f24; --bg: #000; }
.tema-presente       { --accent: #ff6b9d; --accent-soft: #c8407e; }

/* Teclado musical */
.piano { display: flex; justify-content: center; margin: 2rem 0; gap: 2px; }
.piano .tecla {
    width: 60px; height: 200px; background: #fff; color: #333;
    border: 1px solid #ccc; border-radius: 0 0 6px 6px;
    cursor: pointer; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 1rem; font-weight: 600;
    transition: background 0.1s;
}
.piano .tecla:active, .piano .tecla.ativa { background: var(--accent); }

.sequencia-tocada {
    text-align: center; font-size: 1.2rem; letter-spacing: 0.5rem;
    margin: 1rem 0; min-height: 2rem; color: var(--accent);
}