:root {
    --pr-accent: #6c5ce7;
}

body {
    background: #f4f5f9;
}

.navbar-brand i { color: #ffd54f; }

/* Star rating widget */
.star-rate { display: inline-flex; flex-direction: row-reverse; gap: .15rem; font-size: 2rem; }
.star-rate input { display: none; }
.star-rate label { color: #d8d8e0; cursor: pointer; transition: color .1s; }
.star-rate label:hover,
.star-rate label:hover ~ label,
.star-rate input:checked ~ label { color: #ffb400; }

.picture-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: .5rem;
}

.rate-stage img {
    max-height: 60vh;
    width: auto;
    max-width: 100%;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.special-btn {
    border: 2px solid transparent;
    border-radius: .6rem;
    padding: .5rem .75rem;
    background: #fff;
    cursor: pointer;
    transition: transform .08s, border-color .1s;
    min-width: 90px;
}
.special-btn:hover { transform: translateY(-2px); }
.special-btn:disabled { opacity: .4; cursor: not-allowed; }
.special-btn .gem-icon { font-size: 1.6rem; display: block; }

.rank-badge {
    width: 2rem; height: 2rem; line-height: 2rem; text-align: center;
    border-radius: 50%; font-weight: 700; display: inline-block;
}
.rank-1 { background: #ffd700; color: #000; }
.rank-2 { background: #c0c0c0; color: #000; }
.rank-3 { background: #cd7f32; color: #fff; }

.stat-tile { background:#fff; border-radius:.75rem; padding:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.stat-tile .h2 { margin:0; color: var(--pr-accent); }

.hero {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color:#fff; border-radius:1rem; padding:3rem 2rem;
}