/* ==========================================================================
   Vote page (vote.php)
   --------------------------------------------------------------------------
   The page used to be a lone 450px card: a heading, a paragraph, the audio
   captcha and a promo box, with nothing that showed which server the vote
   was for beyond its name. It is now cut on the same parts as the server
   and category pages:

     breadcrumb
     +- .ph -------------------------------------------------------------+
     | GAME                                   |   203      #2       3d    |
     | [ the server's own banner ]            |   votes    rank     reset |
     | Vote for Freya                         |                            |
     +------------------------------------------------------------------+
     +- main -----------------------------+  +- side -------------------+
     | 1 Listen  2 Type  3 Vote           |  | How voting works         |
     | [ audio captcha ]                  |  | Back to server / promo   |
     | [ VOTE ] appears once verified     |  +--------------------------+
     +------------------------------------+

   Every id and name the scripts use is unchanged: #voteForm and its hidden
   inputs, #audioCaptcha (the widget builds itself inside it), #captcha-token,
   #captcha-answer, #voteButton and its vote-reveal / vote-ready /
   vote-submitting classes, #time_on_page, and the countdown ids of the
   result states. The widget's own look comes from audio-captcha.css; the
   rules below re-dress it under .vp only.
   ========================================================================== */

.vp {
    --vp-line: rgba(0, 255, 255, 0.12);
    --vp-ink: #d5d9e2;
    --vp-ink-2: #aab0bd;
    --vp-ink-3: #7c8594;
    --vp-ok: #00ff9d;
    --vp-warn: #f5c451;
    --vp-bad: #ff7bff;
    padding-top: 10px;
    padding-bottom: 36px;
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    color: var(--vp-ink);
}
.vp a { text-decoration: none; }

/* ---------- breadcrumb ---------- */
.vp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vp-ink-3);
}
.vp-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vp-crumbs li + li::before { content: "\203A"; font-size: 1.05rem; line-height: 1; color: rgba(0, 255, 255, 0.5); }
.vp-crumbs a { color: var(--vp-ink-2); }
.vp-crumbs a:hover { color: #ffffff; }
.vp-crumbs a i { color: var(--primary-color, #00ffff); opacity: .8; font-size: .7rem; margin-right: 5px; }
.vp-crumbs [aria-current] { color: #ffffff; }

/* ---------- header additions (the rest is .ph from page-hero.css) ---------- */
.vp .ph { margin-bottom: 14px; }
.vp-banner {
    display: block;
    width: 100%;
    max-width: 468px;
    height: auto;
    aspect-ratio: 728 / 90;
    object-fit: cover;
    margin: 2px 0 4px;
    border: 1px solid rgba(0, 255, 255, 0.3);
}
.vp .ph-stat-n small { font-size: .6em; font-weight: 600; color: var(--vp-ink-2); margin-left: 2px; }

/* ---------- two-column body ---------- */
.vp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}
.vp-main, .vp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.vp-panel { background: rgba(10, 10, 15, 0.9); border: 1px solid rgba(0, 255, 255, 0.16); }
.vp-panel-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--vp-line);
}
.vp-panel-h h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vp-ink-3);
}
.vp-panel-h h2 i { color: var(--primary-color, #00ffff); font-size: .74rem; opacity: .85; }
.vp-panel-h .vp-h-note { margin-left: auto; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vp-ink-3); }
.vp-panel-b { padding: 16px; }

/* ---------- the three steps ---------- */
.vp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--vp-line);
    border-bottom: 1px solid var(--vp-line);
}
.vp-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #0a0a0f;
    font-size: .86rem;
    font-weight: 600;
    color: var(--vp-ink-2);
    min-width: 0;
}
.vp-steps b {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 255, 255, 0.4);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .72rem;
    color: var(--primary-color, #00ffff);
}

/* ---------- the audio captcha widget, re-dressed ---------- */
.vp #audioCaptcha { max-width: 460px; margin: 0 auto; }
.vp .audio-captcha-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
}
/* The panel head and the step row say what the widget's own title and
   instruction line said */
.vp .audio-captcha-title,
.vp .audio-captcha-instructions { display: none; }
.vp .audio-captcha-player { background: transparent; border: 0; padding: 0; }
.vp .audio-captcha-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.vp .audio-captcha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(0, 255, 255, 0.28);
    border-radius: 0;
    box-shadow: none;
    color: #e6e9ef;
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: border-color .15s, background .15s, color .15s;
}
.vp .audio-captcha-btn svg { width: 18px; height: 18px; color: var(--primary-color, #00ffff); }
.vp .audio-captcha-btn:hover { border-color: var(--primary-color, #00ffff); background: rgba(0, 255, 255, 0.06); color: #ffffff; }
.vp .audio-captcha-btn-secondary { border-color: rgba(255, 255, 255, 0.14); color: var(--vp-ink-2); }
.vp .audio-captcha-btn-secondary svg { color: var(--vp-ink-3); }
/* The message and the Vote button below bring their own top margin */
.vp .audio-captcha-input-group { margin-bottom: 0; }
.vp .audio-captcha-label {
    display: block;
    margin: 0 0 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vp-ink-3);
    text-align: left;
}
.vp .audio-captcha-input {
    display: block;
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 255, 255, 0.28);
    border-radius: 0;
    color: #ffffff;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .5em;
    text-align: center;
    text-indent: .5em;
}
.vp .audio-captcha-input::placeholder { color: rgba(255, 255, 255, 0.16); }
.vp .audio-captcha-input:focus { outline: none; border-color: var(--primary-color, #00ffff); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1); }
.vp .audio-captcha-input.success { border-color: var(--vp-ok); }
.vp .audio-captcha-input.error { border-color: var(--vp-bad); }
.vp .audio-captcha-wave { margin: 0 auto 12px; }
.vp .audio-captcha-wave-bar { background: var(--primary-color, #00ffff); }
.vp #audio-captcha-message:not(:empty) { margin-top: 12px; }
.vp .audio-captcha-message { border-radius: 0; font-size: .9rem; }

/* ---------- the vote button: the glass .srv-vote, full width ---------- */
.vp #voteButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin: 16px 0 0;
    font-size: .95rem;
    border-radius: 0;
    cursor: pointer;
}
.vp #voteButton i { font-size: .9rem; }
#voteButton.vote-reveal {
    animation: voteReveal 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
               voteReadyPulse 1.6s ease-in-out 0.5s infinite;
}
@keyframes voteReveal {
    0%   { opacity: 0; transform: translateY(12px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#voteButton.vote-ready { animation: voteReadyPulse 1.6s ease-in-out infinite; }
@keyframes voteReadyPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 0 rgba(0, 255, 255, 0.3); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px 3px rgba(0, 255, 255, 0.35); }
}
/* Submitting: a light sweep across the glass and animated dots */
#voteButton.vote-submitting {
    position: relative;
    overflow: hidden;
    cursor: progress;
    background: linear-gradient(180deg, rgba(0, 255, 255, .34) 0%, rgba(0, 255, 255, .14) 100%);
    border-color: rgba(0, 255, 255, .8);
    color: #ffffff;
    opacity: 1;
}
#voteButton.vote-submitting::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    animation: voteShimmer 1.1s linear infinite;
}
@keyframes voteShimmer { to { left: 150%; } }
.vote-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: voteSpin 0.65s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
@keyframes voteSpin { to { transform: rotate(360deg); } }
.vote-submitting-text { vertical-align: middle; }
.vote-dots::after { content: ''; animation: voteDots 1.2s steps(4, end) infinite; }
@keyframes voteDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }
.vote-scan-note {
    margin-top: 12px;
    text-align: center;
    font-size: .86rem;
    color: #7fd7e6;
    animation: voteScanFade 0.4s ease both, voteScanPulse 1.6s ease-in-out infinite;
}
.vote-scan-note i { margin-right: 6px; }
@keyframes voteScanFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes voteScanPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

.vp-trust {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--vp-line);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--vp-ink-3);
}
.vp-trust i { color: var(--vp-ok); margin-top: 3px; }

/* ---------- messages from the previous attempt (errors, VPN block) ---------- */
.vp .alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 0, 255, 0.4);
    border-left: 3px solid var(--vp-bad);
    border-radius: 0;
    background: rgba(255, 0, 255, 0.05);
    color: #f1dcf1;
    font-size: .92rem;
    line-height: 1.55;
}
.vp .alert a { color: var(--primary-color, #00ffff); text-decoration: underline; }
.vp .alert-success { border-color: rgba(0, 255, 157, 0.4); border-left-color: var(--vp-ok); background: rgba(0, 255, 157, 0.05); color: #d5f8e8; }
.vp .alert-warning, .vp .alert-info { border-color: rgba(245, 196, 81, 0.4); border-left-color: var(--vp-warn); background: rgba(245, 196, 81, 0.05); color: #f8ecd0; }
.vp .alert-rich { padding: 0; border: 0; background: transparent; }
.security-block {
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 0, 255, 0.35);
    border-left: 3px solid var(--vp-bad, #ff7bff);
    background: rgba(255, 0, 255, 0.04);
    text-align: left;
}
.security-block-icon { font-size: 1.6rem; color: var(--vp-bad, #ff7bff); margin-bottom: 6px; }
.security-block-title { margin: 0 0 6px; font-family: var(--font-heading, 'Orbitron', sans-serif); font-size: 1rem; color: #ffffff; }
.security-block-desc { margin: 0 0 10px; color: #d5d9e2; font-size: .92rem; line-height: 1.55; }
.security-block-ip { margin: 0 0 10px; font-size: .84rem; color: var(--vp-ink-2, #aab0bd); }
.security-block-ip code { padding: 2px 6px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; font-size: .84rem; }
.security-block-list { margin: 0 0 12px; padding: 0; list-style: none; }
.security-block-list li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: .9rem; color: #d5d9e2; }
.security-block-list li:first-child { border-top: 0; }
.security-block-list li i { color: var(--primary-color, #00ffff); margin-top: 3px; width: 16px; text-align: center; }
.security-block-actions { margin: 0 0 10px; }
.security-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #e6e9ef !important;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none !important;
}
.security-block-btn:hover { border-color: var(--primary-color, #00ffff); color: #ffffff !important; }
.security-block-footer { margin: 0; font-size: .82rem; color: var(--vp-ink-3, #7c8594); }

/* ---------- result states (voted, already voted, banned) ---------- */
.vp-state { text-align: center; padding: 30px 20px 24px; }
.vp-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 255, 157, 0.45);
    background: rgba(0, 255, 157, 0.06);
    font-size: 1.7rem;
    color: var(--vp-ok);
}
.vp-state--wait .vp-state-icon { border-color: rgba(245, 196, 81, 0.45); background: rgba(245, 196, 81, 0.06); color: var(--vp-warn); }
.vp-state--bad .vp-state-icon { border-color: rgba(255, 0, 255, 0.45); background: rgba(255, 0, 255, 0.06); color: var(--vp-bad); }
.vp-state h2 {
    margin: 0 0 8px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    font-weight: 800;
    color: #ffffff;
}
.vp-state p { margin: 0 auto 10px; max-width: 46ch; color: var(--vp-ink); font-size: 1rem; line-height: 1.55; }
.vp-state p b { color: #ffffff; }
.vp-countdown {
    display: inline-block;
    margin: 6px 0 14px;
    padding: 10px 18px;
    border: 1px solid rgba(245, 196, 81, 0.35);
    background: rgba(245, 196, 81, 0.05);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.vp-countdown:empty { display: none; }
.vp-redirect { font-size: .84rem; color: var(--vp-ink-3); }
.vp-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.vp-state-actions .srv-vote { height: 42px; padding: 0 22px; margin: 0; }
.vp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    color: #e6e9ef;
    font-size: .9rem;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.vp-btn i { color: var(--primary-color, #00ffff); font-size: .8rem; }
.vp-btn:hover { border-color: var(--primary-color, #00ffff); color: #ffffff; }

/* ---------- side column ---------- */
.vp-how { margin: 0; padding: 4px 16px 8px; list-style: none; }
.vp-how li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 255, 255, 0.07);
    font-size: .9rem;
    line-height: 1.45;
    color: var(--vp-ink);
}
.vp-how li:first-child { border-top: 0; }
.vp-how li i { flex: none; width: 16px; margin-top: 3px; text-align: center; color: var(--primary-color, #00ffff); font-size: .84rem; }
.vp-how li.is-reward i { color: var(--vp-warn); }
.vp-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vp-line); }
.vp-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid rgba(0, 255, 255, 0.07);
    color: #cfd3dc;
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.vp-links li:first-child a { border-top: 0; }
.vp-links a i:first-child { width: 18px; text-align: center; color: var(--primary-color, #00ffff); }
.vp-links a:hover { background: rgba(0, 255, 255, 0.05); color: #ffffff; }

/* Promo: RateMyRagnarok on Ragnarok servers, the referral programme elsewhere */
.vp-promo { display: flex; gap: 12px; align-items: center; padding: 14px 16px; color: var(--vp-ink); transition: background .15s; }
.vp-promo:hover { background: rgba(0, 255, 255, 0.04); }
.vp-promo img { flex: none; width: 52px; height: 52px; object-fit: cover; border: 1px solid rgba(0, 255, 255, 0.25); }
.vp-promo-i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(245, 196, 81, 0.4); color: var(--vp-warn); font-size: 1.2rem; }
.vp-promo b { display: block; margin-bottom: 2px; font-family: var(--font-heading, 'Orbitron', sans-serif); font-size: .84rem; color: #ffffff; }
.vp-promo span { display: block; font-size: .84rem; line-height: 1.4; color: var(--vp-ink-2); }
.vp-promo em { display: block; margin-top: 4px; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--primary-color, #00ffff); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .vp-grid { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 900px) {
    .vp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    /* three figures stay on one row instead of two-plus-one */
    .vp .ph-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .vp-banner { max-width: none; }
    .vp-panel-b { padding: 14px 12px; }
    .vp-panel-h { padding: 10px 12px; }
    .vp-steps li { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; font-size: .78rem; }
    .vp .ph-stat-n { font-size: 1.15rem; }
    .vp .ph-stat-l { font-size: .6rem; letter-spacing: .08em; }
    .vp-state { padding: 24px 14px 20px; }
    .vp-state-actions .srv-vote, .vp-state-actions .vp-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    #voteButton.vote-reveal, #voteButton.vote-ready, #voteButton.vote-submitting::after,
    .vote-scan-note, .vote-spinner, .vote-dots::after { animation: none; }
    .vp-links a, .vp-btn, .vp-promo, .vp .audio-captcha-btn { transition: none; }
}