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

body {

    font-family: 'Walter Turncoat', 'Lucida Sans';

    background: #2c97ad;

    color: white;

    min-height: 100vh;

}

.hidden {

    display: none !important;

}

#loading {

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;

}

.loader-ball {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: 6px solid #333;

    border-top-color: #00d084;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}

.hero {

    padding: 30px 20px;

    text-align: center;

}

.hero-title {

    font-size: 2rem;

    font-weight: 800;

}

.hero-subtitle {

    margin-top: 8px;

    opacity: .7;

}

.bottom-nav {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 70px;

    background: #1f2937;

    display: flex;

    justify-content: space-around;

    align-items: center;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.bottom-nav button {

    background: none;

    border: none;

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    font-size: 22px;

}

.bottom-nav span {

    font-size: 11px;

}

#content {

    padding: 20px;

    padding-bottom: 100px;

}

.card {

    background: #1f2937;

    border-radius: 18px;

    padding: 20px;

    margin-bottom: 18px;

}

.participant-card {

    background: #1f2937;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 15px;

    cursor: pointer;

    transition: .2s;

}

.participant-card:hover {

    transform: scale(1.02);

}

.participant-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #374151;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

}

.ranking-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #1f2937;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 14px;

}

.ranking-position {

    font-size: 30px;

    width: 50px;

}

.ranking-info {

    flex: 1;

}

.ranking-info h3 {

    font-size: 18px;

}

.ranking-info small {

    opacity: .7;

}

.ranking-points {

    font-size: 28px;

    font-weight: bold;

}

.ranking-points span {

    font-size: 14px;

    opacity: .6;

}

.match-card {

    background: #1f2937;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 16px;

}

.teams {

    display: flex;

    justify-content: space-between;

    font-weight: 600;

    margin-bottom: 12px;

}

.prediction {

    font-size: 22px;

    margin-bottom: 10px;

}

.hero-card {

    background: linear-gradient(135deg, #0F172A, #1D4ED8);

    border-radius: 24px;

    padding: 30px;

    text-align: center;

    margin-bottom: 20px;

}

.hero-logo {

    font-size: 70px;

    margin-bottom: 15px;

}

.hero-card h1 {

    font-size: 32px;

}

.hero-card p {

    margin-top: 10px;

    opacity: .8;

}

.next-match {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    margin-bottom: 20px;

}

.next-match div {

    flex: 1;

    text-align: center;

}

.vs {

    font-size: 26px;

    font-weight: bold;

}

.progress {

    width: 100%;

    height: 16px;

    background: #374151;

    border-radius: 999px;

    overflow: hidden;

    margin-top: 20px;

}

.progress-fill {

    height: 100%;

    background: #22C55E;

}

.profile-card {

    background: linear-gradient(135deg, #2563EB, #1E40AF);

    border-radius: 24px;

    padding: 30px;

    text-align: center;

    margin-bottom: 25px;

}

.profile-avatar {

    font-size: 70px;

    margin-bottom: 10px;

}

.fixture-card {

    background: #1f2937;

    border-radius: 20px;

    padding: 20px;

    margin-bottom: 18px;

}

.fixture-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

    font-size: 13px;

    opacity: .8;

}

.teams-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

}

.teams-row>div {

    width: 33%;

    text-align: center;

}

.vs-score {

    font-size: 28px;

    font-weight: bold;

}

.real-result {

    text-align: center;

    margin-bottom: 10px;

    opacity: .8;

}

.points-earned {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

}

.badge {

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 12px;

}

.badge.pending {

    background: #374151;

}

.badge.exact {

    background: #15803D;

}

.badge.trend {

    background: #D97706;

}

.badge.fail {

    background: #B91C1C;

}

.fixture-card,
.ranking-card,
.participant-card,
.card {

    animation: fadeUp .35s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

/* ── Capture Screen ─────────────────────────────── */

.capture-header {

    margin-bottom: 20px;

}

.capture-header h2 {

    font-size: 22px;

    margin-bottom: 14px;

}

.participant-select {

    width: 100%;

    padding: 14px 16px;

    border-radius: 14px;

    border: 2px solid rgba(255, 255, 255, .15);

    background: #1f2937;

    color: white;

    font-size: 16px;

    font-family: inherit;

    -webkit-appearance: none;

    appearance: none;

    cursor: pointer;

    outline: none;

    transition: border-color .2s;

}

.participant-select:focus {

    border-color: #38bdf8;

}

.capture-group-label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

    opacity: .55;

    margin: 22px 0 10px;

    padding-left: 4px;

}

.capture-match {

    background: #1f2937;

    border-radius: 16px;

    padding: 14px 16px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    animation: fadeUp .25s ease;

}

.capture-team {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    width: 36%;

    text-align: center;

}

.capture-team-away {

    align-items: center;

}

.capture-flag {

    font-size: 28px;

    line-height: 1;

}

.capture-name {

    font-size: 11px;

    opacity: .75;

    line-height: 1.2;

}

.capture-score {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

}

.score-input {

    width: 46px;

    height: 46px;

    border-radius: 10px;

    border: 2px solid rgba(255, 255, 255, .15);

    background: #111827;

    color: white;

    font-size: 20px;

    font-family: inherit;

    font-weight: bold;

    text-align: center;

    outline: none;

    transition: border-color .2s, box-shadow .2s, background .2s;

    -moz-appearance: textfield;

}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

.score-input:focus {

    border-color: #38bdf8;

    box-shadow: 0 0 0 3px rgba(56, 189, 248, .2);

}

.score-input.saved {

    border-color: #22c55e;

    background: rgba(34, 197, 94, .12);

}

.capture-vs {

    font-size: 20px;

    font-weight: bold;

    opacity: .5;

}

.capture-empty {

    text-align: center;

    opacity: .5;

    margin-top: 40px;

    font-size: 16px;

    line-height: 1.6;

}

.capture-actions {

    margin-top: 28px;

    text-align: center;

}

.btn-export {

    background: linear-gradient(135deg, #0ea5e9, #2563eb);

    border: none;

    border-radius: 14px;

    color: white;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    padding: 15px 30px;

    cursor: pointer;

    width: 100%;

    transition: opacity .2s, transform .1s;

}

.btn-export:active {

    opacity: .85;

    transform: scale(.97);

}

.capture-hint {

    margin-top: 12px;

    font-size: 12px;

    opacity: .45;

}