/* PinMine — Mining for Pinball Gold */

/* ===== Mining Color Palette ===== */
:root {
    --mine-gold: #D4A017;
    --mine-gold-light: #F5D76E;
    --mine-gold-dark: #8B6914;
    --mine-brown: #5C3317;
    --mine-brown-light: #8B5A2B;
    --mine-rust: #B7410E;
    --mine-copper: #B87333;
    --mine-stone: #4A4A4A;
    --mine-stone-light: #6B6B6B;
    --mine-cream: #FFF8E7;
    --mine-dark: #1A1A2E;
}

/* ===== Global ===== */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--mine-cream);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
main {
    flex: 1;
}

/* ===== Navbar — Dark mine shaft ===== */
.navbar-mine {
    background: linear-gradient(135deg, var(--mine-dark) 0%, var(--mine-brown) 100%);
    border-bottom: 3px solid var(--mine-gold);
}
.navbar-mine .navbar-brand {
    color: var(--mine-gold) !important;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.3rem;
}
.navbar-mine .nav-link {
    color: var(--mine-gold-light) !important;
    font-weight: 500;
}
.navbar-mine .nav-link:hover {
    color: #fff !important;
}

/* ===== Mobile-first: touch-friendly targets ===== */
.btn, .form-check-input, .nav-link {
    min-height: 44px;
    min-width: 44px;
}

/* ===== Machine Cards ===== */
.machine-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--mine-copper);
    border-radius: 8px;
    overflow: hidden;
}
.machine-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.3);
    border-color: var(--mine-gold);
}
.machine-card .card-footer {
    background: linear-gradient(to right, var(--mine-cream), #fff);
    border-top: 1px solid var(--mine-gold-light);
}

/* ===== Cards ===== */
.card {
    border-color: var(--mine-copper);
    border-radius: 8px;
}
.card-header {
    background: linear-gradient(135deg, var(--mine-brown) 0%, var(--mine-brown-light) 100%);
    color: var(--mine-gold-light);
    border-bottom: 2px solid var(--mine-gold);
}
.card-header strong {
    color: #fff;
}

/* ===== External link buttons ===== */
.btn-mine-gold {
    background-color: var(--mine-gold);
    border-color: var(--mine-gold-dark);
    color: var(--mine-dark);
    font-weight: 600;
}
.btn-mine-gold:hover {
    background-color: var(--mine-gold-light);
    border-color: var(--mine-gold);
}

/* ===== Tips section ===== */
.tip-vote-badge {
    background: linear-gradient(135deg, var(--mine-gold) 0%, var(--mine-gold-dark) 100%);
    color: #fff;
    font-weight: 700;
    border: none;
    min-width: 42px;
    text-align: center;
}

/* ===== Tournament progress ===== */
.progress {
    background-color: #e0d5c0;
    border-radius: 4px;
}
.progress-bar {
    background: linear-gradient(90deg, var(--mine-gold-dark) 0%, var(--mine-gold) 50%, var(--mine-gold-light) 100%);
}

/* ===== Studied checkmark ===== */
.studied-check {
    color: var(--mine-gold);
    font-size: 1.3em;
}

/* ===== Page headings ===== */
h1, h2, h3, h4, h5 {
    color: var(--mine-brown);
}

/* ===== Empty state placeholder images ===== */
.machine-placeholder {
    background: linear-gradient(135deg, var(--mine-stone) 0%, var(--mine-stone-light) 100%);
}

/* ===== Owned badge ===== */
.badge-owned {
    background: linear-gradient(135deg, var(--mine-gold) 0%, var(--mine-gold-dark) 100%);
    color: #fff;
    border: 1px solid var(--mine-gold-dark);
    font-weight: 600;
}

/* ===== Footer ===== */
.footer-mine {
    background: var(--mine-dark);
    color: var(--mine-gold-light);
    border-top: 2px solid var(--mine-gold);
}

/* ===== Compact list items ===== */
.list-group-item {
    font-size: 0.85rem;
}

/* ===== Badge adjustments ===== */
.badge {
    font-weight: 500;
}

/* ===== Search bar ===== */
.search-mine {
    border: 2px solid var(--mine-copper);
    border-radius: 8px;
}
.search-mine:focus {
    border-color: var(--mine-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}