/* ================================
   SPELLRATE.CSS – Styles für das Spellrate-Minispiel
   Nutzt ausschließlich die vorhandenen WürfelWächter-Design-Tokens (--ww-*),
   damit das Spiel optisch zum Rest der Seite passt. Eigenständige Datei in
   wwwroot/spellrate/, unabhängig vom restlichen CSS.
================================ */

.spellrate {
    --sr-yellow: #d9b25c;
    --sr-yellow-bg: rgba(217, 178, 92, 0.16);
    --sr-green: #4caf7d;
    --sr-green-bg: rgba(76, 175, 125, 0.16);
    --sr-blue: #5b9be0;
    --sr-blue-bg: rgba(91, 155, 224, 0.16);
    --sr-purple: var(--ww-magic);
    --sr-purple-bg: var(--ww-magic-light);
}

.sr-subtitle {
    text-align: center;
    color: var(--ww-text-secondary);
    max-width: 720px;
    margin: -20px auto 24px;
    font-size: var(--ww-text-lg);
}

/* ---------- Tabs zwischen Spielen / Bibliothek / Kategorien ---------- */

.sr-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto 34px;
}

.sr-tab {
    background: rgba(10, 20, 25, 0.6);
    color: var(--ww-text-secondary);
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--ww-font-heading);
    font-weight: 600;
    font-size: var(--ww-text-sm);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.sr-tab:hover {
    color: var(--ww-text-primary);
    border-color: var(--ww-accent);
    text-decoration: none;
}

.sr-tab.active {
    background: linear-gradient(135deg, var(--ww-accent), var(--ww-accent-dark));
    color: #1a1103;
    border-color: transparent;
}

.spellrate section {
    max-width: 900px;
    margin: 0 auto 40px;
}

.spellrate .library,
.spellrate .categories {
    max-width: 1080px;
}

.how-to-play {
    background: var(--ww-card-bg);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
    padding: 14px 20px;
    margin-bottom: 24px;
}

.how-to-play summary {
    cursor: pointer;
    font-weight: 700;
    font-family: var(--ww-font-heading);
    color: var(--ww-accent);
}

.how-to-play ul {
    margin: 14px 0 4px;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--ww-text-secondary);
}

/* ---------- Spielseite ---------- */

.mode-switch,
.difficulty-switch {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mode-btn,
.difficulty-btn {
    background: rgba(10, 20, 25, 0.6);
    color: var(--ww-text-secondary);
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-family: var(--ww-font-body);
    cursor: pointer;
}

.difficulty-btn {
    padding: 6px 15px;
    font-size: var(--ww-text-sm);
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--ww-accent), var(--ww-accent-dark));
    color: #1a1103;
    border-color: transparent;
}

.difficulty-btn[data-difficulty="easy"].active {
    background: var(--sr-green-bg);
    color: var(--sr-green);
    border-color: var(--sr-green);
}

.difficulty-btn[data-difficulty="medium"].active {
    background: var(--sr-blue-bg);
    color: var(--sr-blue);
    border-color: var(--sr-blue);
}

.difficulty-btn[data-difficulty="hard"].active {
    background: var(--sr-purple-bg);
    color: var(--sr-purple);
    border-color: var(--sr-purple);
}

.difficulty-hint {
    text-align: center;
    color: var(--ww-text-muted);
    font-size: var(--ww-text-sm);
    margin: 0 0 20px;
}

.solved-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.solved-group {
    border-radius: var(--ww-radius-sm);
    padding: 14px 18px;
    text-align: center;
    animation: sr-reveal 0.35s ease;
}

.solved-group .group-title {
    font-family: var(--ww-font-heading);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--ww-text-sm);
}

.solved-group .group-spells {
    font-size: var(--ww-text-base);
    margin-top: 4px;
}

.solved-group.Yellow { background: var(--sr-yellow-bg); color: var(--sr-yellow); }
.solved-group.Green { background: var(--sr-green-bg); color: var(--sr-green); }
.solved-group.Blue { background: var(--sr-blue-bg); color: var(--sr-blue); }
.solved-group.Purple { background: var(--sr-purple-bg); color: var(--sr-purple); }

@keyframes sr-reveal {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.tile {
    background: var(--ww-card-bg);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    color: var(--ww-text-primary);
    font-weight: 600;
    font-size: var(--ww-text-sm);
    padding: 14px 8px;
    min-height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
    animation: sr-settle 0.25s ease;
}

.tile:hover {
    border-color: var(--ww-accent);
}

.tile.selected {
    background: linear-gradient(135deg, var(--ww-accent), var(--ww-accent-dark));
    color: #1a1103;
    border-color: transparent;
    transform: scale(0.97);
}

@keyframes sr-settle {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tile.shake {
    animation: sr-shake 0.4s ease;
}

@keyframes sr-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

.message {
    min-height: 1.4rem;
    text-align: center;
    font-weight: 700;
    color: var(--ww-accent);
}

.game-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.mistakes {
    color: var(--ww-text-secondary);
    font-weight: 600;
}

.lives {
    letter-spacing: 0.2em;
    color: var(--sr-purple);
}

.buttons {
    display: flex;
    gap: 10px;
}

.buttons button {
    background: rgba(10, 20, 25, 0.6);
    color: var(--ww-text-primary);
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--ww-font-body);
    font-weight: 700;
    cursor: pointer;
}

.buttons button:hover:not(:disabled) {
    border-color: var(--ww-accent);
}

.buttons button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#btn-submit {
    background: linear-gradient(135deg, var(--ww-accent), var(--ww-accent-dark));
    color: #1a1103;
    border-color: transparent;
}

/* ---------- Bibliothek ---------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.filters input,
.filters select,
.filters button {
    background: rgba(10, 20, 25, 0.6);
    color: var(--ww-text-primary);
    border: 1.5px solid var(--ww-border-strong);
    border-radius: var(--ww-radius-sm);
    padding: 9px 12px;
    font-family: var(--ww-font-body);
    font-size: var(--ww-text-sm);
}

.filters input {
    flex: 1 1 220px;
}

.filters select option {
    background: var(--ww-card-bg-solid);
    color: var(--ww-text-primary);
}

.filters button {
    cursor: pointer;
    font-weight: 700;
}

.filters button:hover {
    border-color: var(--ww-accent);
}

.results-count {
    text-align: center;
    color: var(--ww-text-muted);
    font-size: var(--ww-text-sm);
    margin: 0 0 12px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
}

#spell-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ww-text-sm);
    white-space: nowrap;
}

#spell-table thead th {
    position: sticky;
    top: 0;
    background: var(--ww-card-bg-solid);
    color: var(--ww-accent);
    text-align: left;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ww-border);
    font-family: var(--ww-font-heading);
}

#spell-table thead th:hover {
    color: var(--ww-text-primary);
}

#spell-table thead th.sorted::after {
    content: " " attr(data-dir);
    color: var(--ww-text-muted);
}

#spell-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--ww-border);
    color: var(--ww-text-secondary);
}

#spell-table tbody td:first-child {
    color: var(--ww-text-primary);
    font-weight: 600;
}

#spell-table tbody tr:hover td {
    background: var(--ww-accent-light);
}

/* ---------- Kategorien ---------- */

.categories-list {
    color: var(--ww-text-secondary);
}

.tier-section {
    margin-bottom: 32px;
}

.tier-title {
    display: inline-block;
    font-family: var(--ww-font-heading);
    margin: 0 0 4px;
    font-size: var(--ww-text-h3);
    padding: 3px 16px;
    border-radius: 999px;
}

.tier-title.tier-easy { background: var(--sr-green-bg); color: var(--sr-green); }
.tier-title.tier-medium { background: var(--sr-blue-bg); color: var(--sr-blue); }
.tier-title.tier-hard { background: var(--sr-purple-bg); color: var(--sr-purple); }

.tier-blurb {
    color: var(--ww-text-muted);
    font-size: var(--ww-text-sm);
    margin: 6px 0 16px;
}

.axis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.axis-card {
    background: var(--ww-card-bg);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
    padding: 16px 18px;
}

.axis-name {
    color: var(--ww-text-primary);
    font-family: var(--ww-font-heading);
    font-weight: 700;
    margin-bottom: 6px;
}

.axis-description {
    color: var(--ww-text-muted);
    font-size: var(--ww-text-sm);
    margin-bottom: 12px;
    line-height: 1.5;
}

.axis-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.value-chip {
    background: rgba(10, 20, 25, 0.6);
    border: 1px solid var(--ww-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--ww-text-xs);
    color: var(--ww-text-secondary);
}

.value-count {
    color: var(--ww-accent);
    font-weight: 700;
}

@media (max-width: 640px) {
    .grid {
        gap: 6px;
    }

    .tile {
        font-size: var(--ww-text-xs);
        min-height: 3.6rem;
        padding: 8px 5px;
    }

    .game-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .axis-grid {
        grid-template-columns: 1fr;
    }
}