/* ══════════════════════════════════════════════════════════════ */
/*  VOTE PAGE  —  World of Warcraft Epic Theme                   */
/* ══════════════════════════════════════════════════════════════ */

/* ── Panel body ─────────────────────────────────────────────── */
.vote-panel-body {
    padding: 1.5rem 1.5rem 2.5rem;
    background: linear-gradient(160deg,
        rgba(10,14,20,.98) 0%,
        rgba(15,20,28,.98) 60%,
        rgba(18,12,6,.98) 100%);
    border-top: 2px solid rgba(201,162,39,.4);
}

/* ── Hero strip ─────────────────────────────────────────────── */
.vote-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.vote-hero-sub {
    margin: 0;
    white-space: nowrap;
    font-size: .75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7a6040;
}
.vote-hero-divider {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,162,39,.5) 40%,
        rgba(201,162,39,.5) 60%,
        transparent 100%);
}

/* ── Grid ───────────────────────────────────────────────────── */
.vote-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 2rem 1.25rem;
    justify-items: center;
}

/* ── Card ───────────────────────────────────────────────────── */
.vote-site-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 180px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .35s ease;
    transition: transform .35s ease;
    position: relative;
}
.vote-site-card:not(.vote-site-disabled):hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}
.vote-site-card.vote-site-disabled {
    cursor: default;
    opacity: .55;
}

/* ── Orb wrap ───────────────────────────────────────────────── */
.vote-orb-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* outer glow ring */
.vote-ring-outer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    border: 3px solid #c9a227;
    box-shadow:
        0 0 16px 3px rgba(201,162,39,.5),
        inset 0 0 12px rgba(0,0,0,.6);
    pointer-events: none;
    z-index: 4;
}
.vote-site-card:not(.vote-site-disabled) .vote-ring-outer {
    -webkit-animation: ring-glow 2.8s ease-in-out infinite;
    animation: ring-glow 2.8s ease-in-out infinite;
}
@-webkit-keyframes ring-glow {
    0%,100% { box-shadow: 0 0 12px 2px rgba(201,162,39,.4), inset 0 0 10px rgba(0,0,0,.6); border-color: #c9a227; }
    50%      { box-shadow: 0 0 28px 8px rgba(201,162,39,.75), inset 0 0 10px rgba(0,0,0,.6); border-color: #f5d840; }
}
@keyframes ring-glow {
    0%,100% { box-shadow: 0 0 12px 2px rgba(201,162,39,.4), inset 0 0 10px rgba(0,0,0,.6); border-color: #c9a227; }
    50%      { box-shadow: 0 0 28px 8px rgba(201,162,39,.75), inset 0 0 10px rgba(0,0,0,.6); border-color: #f5d840; }
}

/* inner accent ring */
.vote-ring-inner {
    position: absolute;
    top: 10px; right: 10px; bottom: 10px; left: 10px;
    border-radius: 50%;
    border: 1px solid rgba(201,162,39,.2);
    pointer-events: none;
    z-index: 4;
}

/* Circular image container */
.vote-orb {
    position: absolute;
    top: 6px; right: 6px; bottom: 6px; left: 6px;
    border-radius: 50%;
    overflow: hidden;
    background: #0a0e14;
    z-index: 2;
}

/* Image fills the circle */
.vote-site-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
}
.vote-site-card:not(.vote-site-disabled):hover .vote-site-img {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.vote-site-name-fallback {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a227;
    font-family: 'Cinzel Decorative', serif;
    font-size: .75rem;
    text-align: center;
    padding: .5rem;
}

/* Spinning rune decoration (active only) */
.vote-site-card:not(.vote-site-disabled) .vote-orb-wrap::after {
    content: '';
    position: absolute;
    top: -8px; right: -8px; bottom: -8px; left: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(201,162,39,.25);
    -webkit-animation: spin-dashed 18s linear infinite;
    animation: spin-dashed 18s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@-webkit-keyframes spin-dashed {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin-dashed {
    to { transform: rotate(360deg); }
}

/* ── Card info ──────────────────────────────────────────────── */
.vote-card-bottom {
    width: 100%;
    text-align: center;
}

.vote-site-label {
    font-family: 'Cinzel Decorative', serif;
    font-size: .78rem;
    letter-spacing: 1px;
    color: #c9a227;
    text-shadow: 0 0 10px rgba(201,162,39,.4);
    margin-bottom: .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Vote button ────────────────────────────────────────────── */
.vote-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    padding: .45rem .8rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Cinzel Decorative', serif;
    font-size: .7rem;
    letter-spacing: 1px;
    color: #1a0e00;
    background: -webkit-linear-gradient(top, #f5e060 0%, #d4a820 40%, #9a6818 100%);
    background: linear-gradient(180deg, #f5e060 0%, #d4a820 40%, #9a6818 100%);
    -webkit-box-shadow:
        inset 0 1px 0 rgba(255,240,120,.4),
        inset 0 -2px 0 rgba(0,0,0,.5),
        0 0 14px rgba(201,162,39,.45),
        0 3px 8px rgba(0,0,0,.7);
    box-shadow:
        inset 0 1px 0 rgba(255,240,120,.4),
        inset 0 -2px 0 rgba(0,0,0,.5),
        0 0 14px rgba(201,162,39,.45),
        0 3px 8px rgba(0,0,0,.7);
    text-shadow: 0 1px 0 rgba(255,230,80,.4);
    position: relative;
    overflow: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.vote-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: -webkit-linear-gradient(left, transparent, rgba(255,255,200,.35), transparent);
    background: linear-gradient(90deg, transparent, rgba(255,255,200,.35), transparent);
    -webkit-transition: left .45s ease;
    transition: left .45s ease;
}
.vote-btn:hover::before { left: 160%; }
.vote-btn:hover {
    background: -webkit-linear-gradient(top, #ffe866 0%, #e0b428 40%, #b07c18 100%);
    background: linear-gradient(180deg, #ffe866 0%, #e0b428 40%, #b07c18 100%);
    color: #0e0700;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow:
        inset 0 1px 0 rgba(255,240,120,.5),
        inset 0 -2px 0 rgba(0,0,0,.5),
        0 0 24px rgba(201,162,39,.75),
        0 3px 10px rgba(0,0,0,.7);
    box-shadow:
        inset 0 1px 0 rgba(255,240,120,.5),
        inset 0 -2px 0 rgba(0,0,0,.5),
        0 0 24px rgba(201,162,39,.75),
        0 3px 10px rgba(0,0,0,.7);
}
.vote-btn:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}
.vote-btn-sword {
    font-size: .9rem;
    line-height: 1;
}

.vote-reward {
    margin-top: .4rem;
    font-size: .7rem;
    color: #7a6030;
    letter-spacing: .5px;
}

/* ── Cooldown ───────────────────────────────────────────────── */
.vote-cooldown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}
.vote-cooldown-hourglass {
    font-size: 1.2rem;
    opacity: .6;
    -webkit-animation: hg-rock 2.5s ease-in-out infinite;
    animation: hg-rock 2.5s ease-in-out infinite;
}
@-webkit-keyframes hg-rock {
    0%,100% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }
    50%      { -webkit-transform: rotate(8deg);  transform: rotate(8deg); }
}
@keyframes hg-rock {
    0%,100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
.vote-cooldown-timer {
    font-family: 'Cinzel Decorative', serif;
    font-size: .82rem;
    color: #6a5020;
}
.vote-cooldown-remaining {
    font-size: .65rem;
    color: #4a3818;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
    .vote-sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }
    .vote-orb-wrap {
        width: 120px;
        height: 120px;
    }
}