/* === Base === */
body {
    background: #181818;
    color: #eee;
}
a { color: #eee; }
hr { border-color: #333; }
img { border-radius: 16px; }

.smelotitle, h2 {
    font-family: 'Staatliches', sans-serif;
    letter-spacing: 4px;
    padding-top: 16px;
}
.smelotitle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.smelkarta {
    width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 16px;
}

/* === Suits wave === */
.suits-wave {
    display: inline-flex;
    gap: 4px;
    font-size: 0.55em;
    opacity: 0.45;
    margin: 0 10px;
    vertical-align: middle;
}
.suits-wave span {
    display: inline-block;
    animation: suitBounce 2s ease-in-out infinite;
}
.suits-wave span:nth-child(1) { animation-delay: 0s; }
.suits-wave span:nth-child(2) { animation-delay: 0.15s; }
.suits-wave span:nth-child(3) { animation-delay: 0.3s; }
.suits-wave span:nth-child(4) { animation-delay: 0.45s; }
.suits-wave-right span:nth-child(1) { animation-delay: 0.6s; }
.suits-wave-right span:nth-child(2) { animation-delay: 0.75s; }
.suits-wave-right span:nth-child(3) { animation-delay: 0.9s; }
.suits-wave-right span:nth-child(4) { animation-delay: 1.05s; }
@keyframes suitBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* === Tabs === */
.tab-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 8px;
    flex-wrap: nowrap;
}
.tab-btn {
    font-family: 'Staatliches', sans-serif;
    letter-spacing: 2px;
    font-size: 1em;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px 16px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover { color: #ccc; }
.tab-btn.active {
    color: #ffb300;
    border-bottom-color: #ffb300;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; margin-top: 24px; }

/* === Chart === */
#chartDiv {
    width: 100%;
    max-width: 100%;
    min-width: 400px;
    height: 420px;
    margin: 0 auto;
}

#graphSpinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 100%;
}
#graphSpinner .spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #4E79A7;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === Chart tooltips === */
.google-visualization-tooltip {
    background: #222 !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    pointer-events: none;
}
.tt { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #ddd; padding: 8px 12px; min-width: 180px; text-align: left; }
.tt-header { font-weight: bold; color: #fff; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #444; text-align: left; }
.tt-row { display: flex; align-items: center; padding: 2px 0; font-family: monospace; font-size: 12px; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.tt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tt-val { margin-left: 8px; white-space: nowrap; text-align: right; min-width: 30px; }
.tt-delta { margin-left: 6px; white-space: nowrap; color: #888; text-align: right; min-width: 40px; }
.tt-delta.pos { color: #4ade80; }
.tt-delta.neg { color: #f87171; }

/* === Stats table === */
#statsTableDiv {
    max-width: 100%;
    margin: 10px auto 30px;
    padding: 0 12px;
    font-family: 'Segoe UI', Arial, sans-serif;
}
#statsTableDiv table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    color: #ccc;
    margin: 0;
}
#statsTableDiv th {
    color: #888;
    font-weight: normal;
    text-align: right;
    padding: 4px 8px;
    border-bottom: 1px solid #333;
    font-size: 0.85em;
    cursor: pointer;
    user-select: none;
    background: transparent;
}
#statsTableDiv th:hover { color: #ccc; }
#statsTableDiv th:first-child { text-align: left; }
#statsTableDiv td {
    padding: 3px 8px;
    text-align: right;
    border-bottom: 1px solid #222;
    background: transparent;
}
#statsTableDiv td:first-child { text-align: left; }
#statsTableDiv tr[data-player] { cursor: pointer; }
#statsTableDiv tr[data-player]:hover { background: #2a2a2a; }
#statsTableDiv tr[data-player].selected { background: #333; }
#statsTableDiv .val-pos { color: #4ade80; }
#statsTableDiv .val-neg { color: #f87171; }

/* === Range toggle buttons === */
.range-btn {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    padding: 4px 14px;
    font-size: 0.85em;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 3px;
    font-family: 'Segoe UI', Arial, sans-serif;
    width: auto;
}
.range-btn.active { background: #555; color: #eee; border-color: #888; }
.range-btn:hover { background: #444; }

/* === Teorie cards === */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
a.card { color: var(--text); text-decoration: none; }
.card-title {
    font-family: 'Staatliches', sans-serif;
    letter-spacing: 2px;
    font-size: 1.2em;
    color: #ffb300;
    margin-bottom: 4px;
}
.card-desc { color: #999; font-size: 0.9em; }
.card-tag {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75em;
    color: #666;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 8px;
}

/* === Input panel === */
.input-panel {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
}
.input-panel label { display: block; font-size: 0.85em; color: #888; margin-bottom: 2px; }
.input-panel input, .input-panel select {
    background: #222; color: #eee; border: 1px solid #444;
    border-radius: 6px; padding: 8px 10px; width: 100%;
    box-sizing: border-box; font-size: 0.95em;
}
.input-panel input:focus { outline: none; border-color: #888; }
.player-section {
    border: 1px solid #333; border-radius: 8px; padding: 12px;
    margin-bottom: 14px; background: #1a1a1a;
}
.player-section-label {
    display: block; font-size: 0.85em; color: #888; margin-bottom: 8px;
}
.player-search {
    border-radius: 20px !important; padding: 8px 16px !important; margin-bottom: 0;
    background: #1a1a1a !important; border: 1px solid #333 !important;
}
.player-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.player-chip {
    padding: 6px 14px; border-radius: 20px; background: #222; border: 1px solid #444;
    color: #ccc; cursor: pointer; font-size: 0.9em; user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.player-chip:hover { background: #333; border-color: #888; }
.player-chip.used { opacity: 0.35; pointer-events: none; }
.sum-display { text-align: right; font-size: 0.9em; color: #888; min-height: 1.4em; margin-bottom: 4px; }
.sum-display.sum-nonzero { color: #f87171; }
.entry { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; }
.entry .name-col { flex: 1; }
.entry .amount-col { flex: 0 0 110px; }
.entry .remove-col { flex: 0 0 36px; }
.input-panel .btn {
    padding: 8px 14px; border-radius: 6px; background: #333;
    color: #eee; border: 1px solid #555; cursor: pointer; font-size: 0.9em;
}
.input-panel .btn:hover { background: #444; }
.btn-remove { background: none; border: none; color: #666; font-size: 1.2em; cursor: pointer; padding: 8px 4px; }
.btn-remove:hover { color: #f87171; }
.btn-submit { background: #4E79A7; border-color: #4E79A7; width: 100%; margin-top: 12px; font-size: 1em; padding: 10px; }
.btn-submit:hover { background: #5a8ab5; }
.btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }
#status { margin-top: 10px; font-size: 0.9em; text-align: center; min-height: 1.2em; }
.status-ok { color: #4ade80; }
.status-err { color: #f87171; }
.input-panel .settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid #333; }
.input-panel .settings summary { color: #888; cursor: pointer; font-size: 0.85em; }
.input-panel .settings .fields { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* === Pravidla === */
.pravidla-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pravidlo-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 18px 24px;
    font-family: 'Staatliches', sans-serif;
    font-size: 1.15em;
    letter-spacing: 2px;
    color: #555;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.pravidlo-card:hover {
    color: #888;
    border-color: #555;
}
.pravidlo-card.active {
    color: #ffb300;
    background: linear-gradient(135deg, #1e1a10, #222);
    border-color: #ffb300;
    box-shadow: 0 0 16px rgba(255,179,0,0.25), 0 0 40px rgba(255,179,0,0.08);
    text-shadow: 0 0 12px rgba(255,179,0,0.3);
    animation: glow-pulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.pravidlo-card.active::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,179,0,0.08), transparent);
    animation: shimmer 5s ease-in-out infinite;
    animation-delay: inherit;
}
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255,179,0,0.25), 0 0 40px rgba(255,179,0,0.08); }
    50% { box-shadow: 0 0 24px rgba(255,179,0,0.4), 0 0 60px rgba(255,179,0,0.15); }
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.pravidlo-card.active:hover {
    box-shadow: 0 0 28px rgba(255,179,0,0.45), 0 0 60px rgba(255,179,0,0.18);
}

/* === Mobile: keep title & tabs on one row === */
@media (max-width: 600px) {
    .smelotitle {
        font-size: 1.4em;
        letter-spacing: 2px;
    }
    .suits-wave {
        margin: 0 4px;
        font-size: 0.5em;
        gap: 2px;
    }
    .tab-btn {
        font-size: 0.8em;
        padding: 6px 8px;
        letter-spacing: 1px;
    }
}