/* ── Verso Prop Firm Quiniela – Public Styles ───────────────────────────────
   Design tokens follow BEM-like naming: .vq-* (verso-quiniela)
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --vq-bg:        #0f1117;
    --vq-surface:   #1a1d27;
    --vq-border:    #2a2d3a;
    --vq-accent:    #1daa91;
    --vq-accent2:   #4ade80;
    --vq-danger:    #f87171;
    --vq-text:      #e8eaed;
    --vq-muted:     #8b8fa8;
    --vq-radius:    12px;
    --vq-shadow:    0 4px 24px rgba(0,0,0,.4);
}

/* ── CSS Isolation ────────────────────────────────────────────────────────── */
:where(#verso-quiz-wrap),
:where(#verso-quiz-wrap) *,
:where(#verso-quiz-wrap) *::before,
:where(#verso-quiz-wrap) *::after {
    box-sizing: border-box;
}
:where(#verso-quiz-wrap) h2,
:where(#verso-quiz-wrap) p,
:where(#verso-quiz-wrap) ul,
:where(#verso-quiz-wrap) li {
    margin: 0;
    padding: 0;
    line-height: normal;
}

/* ── Wrap ─────────────────────────────────────────────────────────────────── */
.vq-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    color: var(--vq-text);
}
@media (max-width: 760px) {
    .vq-wrap { grid-template-columns: 1fr; }
    .vq-prizes { order: 2; }
    .vq-main   { order: 1; }
}

/* ── Prizes sidebar ───────────────────────────────────────────────────────── */
.vq-prizes {
    display: flex;
    flex-direction: column;
    background: var(--vq-surface);
    border: 1px solid var(--vq-border);
    border-radius: var(--vq-radius);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 165px;
    gap: 20px;
}
.vq-prizes__header {
    font-family: initial;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--vq-accent);
}
.vq-prizes__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vq-prize {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--vq-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vq-prize--gold   { border-color: #f5a623; }
.vq-prize--silver { border-color: #9ca3af; }
.vq-prize--bronze { border-color: #d97706; }
.vq-prize__rank   { font-size: 11px; color: var(--vq-muted); font-weight: 600; }
.vq-prize__name   { font-size: 14px; font-weight: 600; color: var(--vq-text); }

.vq-prizes__info  { margin-bottom: 16px; font-size: 13px; color: var(--vq-muted); line-height: 1.6; }
.vq-prizes__tc    { font-size: 12px; text-align: center; }
.vq-prizes__tc a  { color: var(--vq-muted); text-decoration: underline; }
.vq-prizes__tc a:hover { color: var(--vq-text); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.vq-card {
    display: flex;
    flex-direction: column;
    background: var(--vq-surface);
    border: 1px solid var(--vq-border);
    border-radius: var(--vq-radius);
    padding: 32px;
    box-shadow: var(--vq-shadow);
    gap: 20px;
}
.vq-card__icon  { font-size: 40px; margin-bottom: 12px; text-align: center; }
.vq-card__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--vq-text); text-align: center; }
.vq-card__sub   { font-size: 14px; color: var(--vq-muted); text-align: center; }

.vq-bracket .vq-card__title,
.vq-bracket .vq-card__sub,
.vq-result .vq-card__title,
.vq-result .vq-card__sub { text-align: left; }

/* ── Bracket header ───────────────────────────────────────────────────────── */
.vq-bracket__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* ── Form elements ────────────────────────────────────────────────────────── */
.vq-form  { display: flex; flex-direction: column; gap: 14px; }
.vq-field { display: flex; flex-direction: column; gap: 6px; }
.vq-label { font-size: 12px; font-weight: 600; color: var(--vq-muted); text-transform: uppercase; letter-spacing: .05em; }

.vq-input,
.vq-select {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--vq-border);
    border-radius: 8px;
    color: var(--vq-text);
    font-family: inherit;
    font-size: 15px;
    padding: 11px 14px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.vq-input:focus,
.vq-select:focus {
    outline: none;
    border-color: var(--vq-accent);
    box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}
.vq-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8fa8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.vq-select option { background: #1a1d27; color: var(--vq-text); }
.vq-select option:disabled { color: var(--vq-danger); }

/* ── Phase rows ───────────────────────────────────────────────────────────── */
.vq-phases { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
}
@media (max-width: 900px) {
    .vq-phases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .vq-phases { grid-template-columns: 1fr; }
}

.vq-phase-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--vq-border);
    border-radius: 8px;
    transition: border-color .2s;
}
.vq-phase-row:hover { border-color: rgba(245,166,35,.3); }
.vq-phase-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vq-muted);
    margin-bottom: 4px;
}

/* Nickname field in header */
.vq-nickname-header {
    margin-top: 12px;
    max-width: 380px;
}
label.vq-nickname-label {
    display: inline-block;
    letter-spacing: .05em;
    margin: 10px 0;
    font-size: 14px; 
    color: var(--vq-muted);


}
.vq-nickname-header .vq-input {
    font-size: 14px;
    padding: 5px 8px;
    margin-left: 10px;
    display: inline-block;
}
p.vq-field__desc {
    font-size: 12px;
    color: var(--vq-muted);
    margin-top: 4px;
}

/* Read-only phase rows */
.vq-phase-row--readonly:hover { border-color: var(--vq-border); }
.vq-phase-row__pick {
    font-size: 15px;
    font-weight: 600;
    color: var(--vq-accent2);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.vq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.vq-btn:hover  { opacity: .88; transform: translateY(-1px); }
.vq-btn:active { transform: translateY(0); }
.vq-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.vq-btn--primary  { background: var(--vq-accent); color: #fff; }
.vq-btn--cta      { background: var(--vq-accent); color: #fff !important; width: 100%; margin-top: 8px; }
.vq-btn--ghost    { background: transparent; color: var(--vq-muted); border: 1px solid var(--vq-border); }
.vq-btn--ghost:hover { color: var(--vq-text); border-color: var(--vq-text); }
.vq-btn--full     { width: 100%; margin-top: 6px; }
.vq-btn--lg       { font-size: 16px; padding: 14px 24px; border-radius: 10px; }
.vq-btn--sm       { font-size: 12px; padding: 7px 12px; border-radius: 6px; }

/* Share buttons */
.vq-btn--twitter  { background: #000; color: #fff; }
.vq-btn--whatsapp { background: #25d366; color: #fff; }
.vq-btn--facebook { background: #1877f2; color: #fff; }
.vq-btn--copy     { background: var(--vq-border); color: var(--vq-text); }

.vq-bracket__actions { margin-top: 20px; display: flex; justify-content: flex-end; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.vq-alert {
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    padding: 12px 16px;
}
.vq-alert--error   { background: rgba(248,113,113,.12); border: 1px solid var(--vq-danger); color: var(--vq-danger); }
.vq-alert--success { background: rgba(74,222,128,.12); border: 1px solid var(--vq-accent2); color: var(--vq-accent2); }

/* ── Points badge ─────────────────────────────────────────────────────────── */
.vq-points { color: var(--vq-accent); font-size: 18px; }

/* ── Share section ────────────────────────────────────────────────────────── */
.vq-share {
    border-top: 1px solid var(--vq-border);
    margin-top: 28px;
    padding-top: 20px;
}
.vq-share__title  { font-size: 14px; font-weight: 600; color: var(--vq-muted); margin: 0 0 12px; }
.vq-share__buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Leaderboard ──────────────────────────────────────────────────────────── */
.vq-leaderboard { max-width: 800px; margin: 0 auto; }
.vq-leaderboard__title { font-size: 22px; font-weight: 700; color: var(--vq-text); margin-bottom: 16px; }
.vq-leaderboard__empty { color: var(--vq-muted); }

.vq-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vq-surface);
    border-radius: var(--vq-radius);
    overflow: hidden;
    font-size: 14px;
}
.vq-table th {
    background: rgba(255,255,255,.05);
    color: var(--vq-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 16px;
    text-align: left;
}
.vq-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--vq-border);
    color: var(--vq-text);
}
.vq-table__row--me { background: rgba(245,166,35,.07); }
.vq-table__rank    { font-size: 18px; width: 40px; }
.vq-table__points  { font-weight: 700; color: var(--vq-accent); }