/*
 * Viqtorina web design system.
 * Tokens follow the Android app (res/values/color.xml). Components use the
 * v- prefix; legacy selectors that page scripts depend on (answer states,
 * timer, sweetalert, blockUI, bootstrap modal) are restyled at the end.
 */

/* ------------------------------------------------------------------ tokens */
:root {
    --v-primary: #2563EB;
    --v-primary-strong: #1D4ED8;
    --v-primary-soft: #DBE7FF;
    --v-navy: #173B79;
    --v-navy-strong: #11306A;
    --v-navy-muted: #D8E6FF;
    --v-bg: #F5F7FC;
    --v-surface: #FFFFFF;
    --v-surface-2: #F8FAFE;
    --v-tonal: #EAF0FF;
    --v-outline: #DCE4F0;
    --v-outline-strong: #C5D2E6;
    --v-text: #172B4D;
    --v-text-2: #5B6B82;
    --v-text-3: #5F6E85;
    --v-correct: #16855B;
    --v-correct-bg: #E6F6EF;
    --v-incorrect: #C83948;
    --v-incorrect-bg: #FCEBED;
    --v-amber: #F59E0B;
    --v-amber-bg: #FFF4DE;

    /* Playful accents for illustration tints */
    --v-tint-sky: #E3F0FF;
    --v-tint-amber: #FFF1DC;
    --v-tint-mint: #DDF6EC;
    --v-tint-coral: #FFE6E3;
    --v-tint-violet: #EEE9FF;
    --v-accent-sky: #38BDF8;
    --v-accent-amber: #FBBF24;
    --v-accent-coral: #F87171;
    --v-accent-mint: #34D399;
    --v-accent-violet: #8B7CEA;

    --v-radius-sm: 10px;
    --v-radius: 16px;
    --v-radius-lg: 20px;
    --v-radius-xl: 24px;
    --v-radius-pill: 999px;

    --v-space-1: 4px;
    --v-space-2: 8px;
    --v-space-3: 12px;
    --v-space-4: 16px;
    --v-space-5: 20px;
    --v-space-6: 24px;
    --v-space-8: 32px;
    --v-space-10: 40px;
    --v-space-12: 48px;

    --v-shadow-sm: 0 1px 2px rgba(23, 43, 77, .05);
    --v-shadow: 0 1px 2px rgba(23, 43, 77, .04), 0 4px 14px rgba(23, 43, 77, .06);
    --v-shadow-lg: 0 10px 30px rgba(23, 43, 77, .12);
    --v-focus: 0 0 0 3px rgba(37, 99, 235, .35);

    --v-font: "Inter", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --v-ease: cubic-bezier(.2, .7, .2, 1);

    --v-sidebar-w: 232px;
    --v-bottom-nav-h: 64px;
    --v-content-max: 1040px;
}

/* ------------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body.v-body {
    margin: 0;
    background: var(--v-bg);
    color: var(--v-text);
    font-family: var(--v-font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.v-body *, body.v-body *::before, body.v-body *::after { box-sizing: border-box; }
:where(.v-body) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--v-text);
    font-family: var(--v-font);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}
:where(.v-body) p { margin: 0; }
.v-body a { color: var(--v-primary); }
.v-body a:hover { color: var(--v-primary-strong); }
.v-body img { max-width: 100%; }
.v-body button { font-family: inherit; }
/* Georgian is wider and has no case; avoid uppercase transforms and long-word overflow. */
html[lang="ka"] .v-body, html[lang="ka"] body { word-break: normal; overflow-wrap: anywhere; }
html[lang="ka"] .v-eyebrow, html[lang="ka"] .text-uppercase { text-transform: none !important; letter-spacing: .02em; }
.v-body :focus-visible { outline: none; box-shadow: var(--v-focus); border-radius: 8px; }

.ic {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }
.ic-xl { width: 28px; height: 28px; }

.v-sr-only, .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.v-skip-link {
    position: fixed; left: 12px; top: 12px; z-index: 2000;
    transform: translateY(calc(-100% - 24px));
    background: var(--v-navy); color: #fff !important;
    padding: 10px 16px; border-radius: var(--v-radius-sm);
    text-decoration: none; font-weight: 600;
    transition: transform .15s;
}
.v-skip-link:focus { transform: none; }

.v-muted { color: var(--v-text-2); }
.v-hidden { display: none !important; }

/* ------------------------------------------------------------------ shell */
.v-shell { min-height: 100vh; }
.v-shell-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.v-main {
    flex: 1;
    width: 100%;
    max-width: calc(var(--v-content-max) + 2 * var(--v-space-8));
    margin: 0 auto;
    padding: var(--v-space-2) var(--v-space-4) calc(var(--v-bottom-nav-h) + var(--v-space-8));
}
.wapper { min-height: 0 !important; }

/* Sidebar: drawer below 1024px, persistent column above. */
.v-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: min(300px, 86vw);
    background: var(--v-surface);
    border-right: 1px solid var(--v-outline);
    display: flex; flex-direction: column;
    padding: var(--v-space-5) var(--v-space-4);
    z-index: 1050;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .25s var(--v-ease), visibility 0s linear .25s;
    overflow-y: auto;
}
.v-sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--v-shadow-lg); transition: transform .25s var(--v-ease); }
.v-scrim {
    position: fixed; inset: 0; background: rgba(15, 30, 60, .38);
    z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.v-scrim.is-open { opacity: 1; pointer-events: auto; }

.v-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none !important; color: var(--v-text) !important;
    font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em;
}
.v-brand img { width: 40px; height: 40px; border-radius: 11px; }
.v-sidebar .v-brand { padding: 0 var(--v-space-2) var(--v-space-5); }

.v-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-nav-label {
    font-size: 0.75rem; font-weight: 600; color: var(--v-text-3);
    padding: var(--v-space-4) var(--v-space-3) var(--v-space-1);
}
.v-nav-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 8px 12px;
    border-radius: 12px;
    color: var(--v-text) !important; text-decoration: none !important;
    font-weight: 500; font-size: 0.9375rem;
    transition: background .15s, color .15s;
}
.v-nav-link .ic { color: var(--v-text-2); }
.v-nav-link:hover { background: var(--v-surface-2); }
.v-nav-link.is-active, .v-nav-link[aria-current="page"] {
    background: var(--v-tonal); color: var(--v-primary) !important; font-weight: 600;
}
.v-nav-link.is-active .ic, .v-nav-link[aria-current="page"] .ic { color: var(--v-primary); }
.v-sidebar-foot { margin-top: auto; padding-top: var(--v-space-4); display: grid; gap: var(--v-space-3); }
.v-sidebar-foot hr { border: 0; border-top: 1px solid var(--v-outline); margin: 0; width: 100%; }

.v-store-badges { display: grid; gap: var(--v-space-2); }
.v-store-badge {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 12px;
    border: 1px solid var(--v-outline); background: var(--v-surface);
    text-decoration: none !important; color: var(--v-text) !important;
    line-height: 1.15;
}
.v-store-badge small { display: block; font-size: 0.75rem; color: var(--v-text-2); }
.v-store-badge strong { font-size: 0.875rem; font-weight: 600; }
.v-store-badge:hover { border-color: var(--v-outline-strong); background: var(--v-surface-2); }

/* Top bar */
.v-topbar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; gap: var(--v-space-2);
    min-height: 60px;
    padding: 8px var(--v-space-4);
    background: rgba(245, 247, 252, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, background .2s;
}
.v-topbar.is-scrolled { border-bottom-color: var(--v-outline); background: rgba(255, 255, 255, .94); }
.v-topbar .v-brand { font-size: 1.25rem; }
.v-topbar .v-brand img { width: 34px; height: 34px; border-radius: 9px; }
.v-topbar-spacer { flex: 1; }
.v-icon-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    border: 0; background: transparent; color: var(--v-text);
    cursor: pointer; text-decoration: none !important;
    transition: background .15s, transform .1s;
}
.v-icon-btn:hover { background: var(--v-tonal); }
.v-icon-btn:active { transform: scale(.94); }
.v-icon-btn .ic { width: 24px; height: 24px; }

/* Language menu (populated by webquiz.js into #langDropdown) */
.v-lang { position: relative; }
.v-lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 10px;
    border-radius: 12px; border: 0; background: transparent;
    color: var(--v-text); font-weight: 500; font-size: 0.9375rem; cursor: pointer;
}
.v-lang-btn:hover { background: var(--v-tonal); }
.v-lang-btn .ic-sm { color: var(--v-text-2); }
.v-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 180px; padding: 6px;
    background: var(--v-surface); border: 1px solid var(--v-outline);
    border-radius: 14px; box-shadow: var(--v-shadow-lg);
    display: none; z-index: 1100;
}
.v-menu.is-open { display: block; animation: v-pop .14s var(--v-ease); }
.v-menu a, .v-menu .dropdown-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 42px; padding: 8px 12px; border-radius: 10px;
    color: var(--v-text) !important; text-decoration: none !important; font-weight: 500;
    white-space: nowrap; background: transparent;
}
.v-menu a:hover, .v-menu .dropdown-item:hover { background: var(--v-tonal); }
.v-menu a[aria-current="true"] { color: var(--v-primary) !important; background: var(--v-tonal); }

.v-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: var(--v-primary); flex: none;
    border: 2px solid var(--v-surface); box-shadow: 0 0 0 1px var(--v-outline);
}
.v-avatar-lg { width: 96px; height: 96px; }
.v-user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 12px 3px 3px; border-radius: var(--v-radius-pill);
    text-decoration: none !important; color: var(--v-text) !important; font-weight: 600; font-size: 0.875rem;
    max-width: 200px;
}
.v-user-chip:hover { background: var(--v-tonal); }
.v-user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-user-chip .v-avatar { width: 34px; height: 34px; }

/* Bottom navigation (phones and tablets) */
.v-bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: 1000;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--v-bottom-nav-h) + env(safe-area-inset-bottom, 0rem));
    padding: 6px 8px env(safe-area-inset-bottom, 0rem);
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--v-outline);
}
.v-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--v-text-2) !important; text-decoration: none !important;
    font-size: 0.75rem; font-weight: 500; line-height: 1.1; text-align: center;
    border-radius: 12px; min-width: 0;
}
.v-bottom-nav a span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-bottom-nav .v-bn-icon {
    display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--v-radius-pill);
    transition: background .2s;
}
.v-bottom-nav a[aria-current="page"] { color: var(--v-primary) !important; font-weight: 600; }
.v-bottom-nav a[aria-current="page"] .v-bn-icon { background: var(--v-tonal); }
.v-bottom-nav a:active .v-bn-icon { transform: scale(.94); }

/* Site footer (links only, compact) */
.v-footer {
    padding: var(--v-space-6) var(--v-space-4) calc(var(--v-bottom-nav-h) + var(--v-space-6));
    color: var(--v-text-2); font-size: 0.8125rem;
    border-top: 1px solid var(--v-outline);
}
.v-footer-inner {
    max-width: var(--v-content-max); margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: var(--v-space-2) var(--v-space-5); align-items: center; justify-content: space-between;
}
.v-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.v-footer a { color: var(--v-text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.v-footer a:hover { color: var(--v-primary); text-decoration: underline; }
.v-footer .SocialMedia { display: flex; gap: 8px; }
.v-footer .SocialMedia img { width: 28px; height: 28px; }

@media (min-width: 1024px) {
    .v-shell { display: grid; grid-template-columns: var(--v-sidebar-w) minmax(0, 1fr); }
    .v-sidebar {
        position: sticky; top: 0; height: 100vh; width: auto;
        transform: none; box-shadow: none; z-index: 10; visibility: visible;
    }
    .v-scrim, .v-bottom-nav, .v-topbar .v-menu-toggle, .v-topbar .v-brand { display: none !important; }
    .v-topbar { padding: 12px var(--v-space-8); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .v-topbar.is-scrolled { background: rgba(245, 247, 252, .94); }
    .v-main { padding: var(--v-space-2) var(--v-space-8) var(--v-space-12); }
    .v-footer { padding-bottom: var(--v-space-6); }
}

/* Focused gameplay layout: no navigation chrome, centered column */
.v-game-bar {
    position: sticky; top: 0; z-index: 1000;
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
    min-height: 60px; padding: 8px var(--v-space-3);
    background: rgba(245, 247, 252, .95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.v-game-title {
    font-size: 1.125rem; font-weight: 700; text-align: center; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v-main--game {
    max-width: 760px;
    padding: var(--v-space-2) var(--v-space-4) var(--v-space-8);
}
.v-game-shell .v-footer { display: none; }

/* ------------------------------------------------------------ typography */
.v-greeting { color: var(--v-text-2); font-size: 0.9375rem; font-weight: 500; }
.v-display { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.v-lede { color: var(--v-text-2); font-size: 1.0625rem; margin-top: 6px; }
.v-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.v-h2 { font-size: 1.375rem; font-weight: 700; }
.v-h3 { font-size: 1.125rem; font-weight: 700; }

/* ----------------------------------------------------------------- layout */
.v-stack { display: grid; gap: var(--v-space-4); }
.v-stack-lg { display: grid; gap: var(--v-space-8); }
.v-row { display: flex; align-items: center; gap: var(--v-space-3); }
.v-section { margin-top: var(--v-space-8); }
.v-section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--v-space-3);
    margin-bottom: var(--v-space-3);
}
.v-section-head a { font-weight: 600; font-size: 0.9375rem; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.v-page-head { padding: var(--v-space-4) 0 var(--v-space-5); display: grid; gap: 6px; }
.v-page-head h1 { font-size: clamp(1.625rem, 4.5vw, 2.125rem); font-weight: 800; letter-spacing: -0.02em; }
.v-page-head p { color: var(--v-text-2); }
.v-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

.v-grid { display: grid; gap: var(--v-space-3); }
.v-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-grid-auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) {
    .v-grid { gap: var(--v-space-4); }
    .v-grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v-grid-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v-grid-auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ------------------------------------------------------------------ cards */
.v-card {
    background: var(--v-surface);
    border: 1px solid var(--v-outline);
    border-radius: var(--v-radius);
    padding: var(--v-space-5);
    box-shadow: var(--v-shadow-sm);
}
.v-card-flush { padding: 0; overflow: hidden; }
.v-tap {
    cursor: pointer;
    transition: transform .16s var(--v-ease), box-shadow .16s var(--v-ease), border-color .16s;
    -webkit-tap-highlight-color: transparent;
}
.v-tap:hover { transform: translateY(-2px); box-shadow: var(--v-shadow); border-color: var(--v-outline-strong); }
.v-tap:active { transform: translateY(0) scale(.98); box-shadow: var(--v-shadow-sm); }
a.v-tap, a.v-card { color: inherit !important; text-decoration: none !important; }
a.v-card:not(.v-mode):not(.v-battle):not(.v-topic):not(.v-list-item):not(.v-level) { display: block; }

/* Components rendered as buttons or links keep their layout and type. */
button.v-mode, button.v-battle, button.v-topic, button.v-list-item, button.v-level {
    width: 100%; font: inherit; color: var(--v-text); cursor: pointer; text-align: inherit;
}
button.v-mode, button.v-battle, button.v-list-item { text-align: left; }
button.v-topic, button.v-level { text-align: center; }
.v-mode-title, .v-mode-desc, .v-topic-name, .v-topic-meta, .v-list-item-title, .v-list-item-sub, .v-level-num, .v-level-label { display: block; }

/* --------------------------------------------------------------- buttons */
.v-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 22px;
    border-radius: var(--v-radius-pill);
    border: 1px solid transparent;
    font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none !important;
    cursor: pointer; user-select: none;
    transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.v-btn:active { transform: scale(.97); }
.v-btn:disabled, .v-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.v-btn-primary { background: var(--v-primary); color: #fff !important; }
.v-btn-primary:hover { background: var(--v-primary-strong); color: #fff !important; }
.v-btn-light { background: #fff; color: var(--v-navy) !important; }
.v-btn-light:hover { background: var(--v-navy-muted); }
.v-btn-tonal { background: var(--v-tonal); color: var(--v-primary) !important; }
.v-btn-tonal:hover { background: var(--v-primary-soft); }
.v-btn-outline { background: var(--v-surface); border-color: var(--v-outline-strong); color: var(--v-text) !important; }
.v-btn-outline:hover { border-color: var(--v-primary); color: var(--v-primary) !important; }
.v-btn-ghost { background: transparent; color: var(--v-primary) !important; }
.v-btn-ghost:hover { background: var(--v-tonal); }
.v-btn-danger { background: var(--v-incorrect); color: #fff !important; }
.v-btn-sm { min-height: 38px; padding: 6px 16px; font-size: 0.875rem; }
.v-btn-block { display: flex; width: 100%; }
.v-btn .ic { width: 18px; height: 18px; }
.v-btn-row { display: flex; flex-wrap: wrap; gap: var(--v-space-3); }
.v-btn-row > .v-btn { flex: 1 1 180px; }

/* ----------------------------------------------------------------- chips */
.v-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 30px; padding: 4px 12px; border-radius: var(--v-radius-pill);
    background: var(--v-tonal); color: var(--v-primary-strong);
    font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.v-chip .ic { width: 16px; height: 16px; }
.v-chip-correct { background: var(--v-correct-bg); color: #0F7350; }
.v-chip-incorrect { background: var(--v-incorrect-bg); color: #B02E3D; }
.v-chip-amber { background: var(--v-amber-bg); color: #9A5B00; }
.v-chip-plain { background: var(--v-surface); border: 1px solid var(--v-outline); color: var(--v-text); }
.v-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-incorrect); display: inline-block; }

/* ------------------------------------------------------------ stat strip */
.v-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--v-surface); border: 1px solid var(--v-outline);
    border-radius: var(--v-radius-lg); padding: var(--v-space-4) var(--v-space-2);
}
.v-stat { text-align: center; padding: 0 var(--v-space-2); min-width: 0; }
.v-stat + .v-stat { border-left: 1px solid var(--v-outline); }
.v-stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.v-stat-label { font-size: 0.8125rem; color: var(--v-text-2); display: flex; align-items: center; justify-content: center; gap: 4px; }
.v-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--v-space-4); }
.v-stats-4 .v-stat:nth-child(3) { border-left: 0; }
@media (min-width: 640px) {
    .v-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v-stats-4 .v-stat:nth-child(3) { border-left: 1px solid var(--v-outline); }
}

/* ------------------------------------------------------- quick-start hero */
.v-hero {
    position: relative; overflow: hidden;
    background: var(--v-navy); color: #fff;
    border-radius: var(--v-radius-xl);
    padding: var(--v-space-6);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-4);
    isolation: isolate;
}
.v-hero .v-eyebrow { color: var(--v-navy-muted); }
.v-hero h2 { color: #fff; font-size: clamp(1.375rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.v-hero p { color: rgba(255, 255, 255, .85); margin-top: 8px; max-width: 46ch; }
.v-hero .v-btn { margin-top: var(--v-space-5); min-width: 200px; }
.v-hero-art {
    position: absolute; right: -10px; bottom: -14px; width: 150px; height: 150px;
    color: #fff; opacity: .95; z-index: -1; pointer-events: none;
}
.v-hero-art .v-emblem { width: 100%; height: 100%; }
.v-spark { position: absolute; border-radius: 4px; height: 5px; width: 18px; }
.v-spark-a { background: var(--v-accent-sky); top: 18%; left: 8%; transform: rotate(-35deg); }
.v-spark-b { background: var(--v-accent-amber); top: 46%; left: -2%; transform: rotate(20deg); }
.v-spark-c { background: var(--v-accent-sky); top: 6%; right: 12%; transform: rotate(60deg); }
@media (max-width: 559px) {
    .v-hero { padding-right: 120px; }
    .v-hero-art { width: 130px; height: 130px; right: -18px; bottom: -6px; }
    .v-hero .v-btn { min-width: 0; }
}
@media (min-width: 560px) {
    .v-hero { padding: var(--v-space-8); padding-right: 230px; }
    .v-hero-art { width: 200px; height: 200px; right: 20px; bottom: 50%; transform: translateY(50%); }
}

.v-emblem { display: inline-block; width: 1em; height: 1em; }

/* -------------------------------------------------------------- topics */
.v-topic {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--v-space-3);
    min-height: 150px; padding: var(--v-space-5) var(--v-space-3) var(--v-space-4);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    text-align: center; color: var(--v-text) !important; text-decoration: none !important;
}
.v-topic-art {
    position: relative; width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center; background: var(--v-tint-sky);
    flex: none;
}
.v-topic-art img { width: 60px; height: 60px; object-fit: contain; border-radius: 50%; }
.v-topic-art .ic { width: 34px; height: 34px; color: var(--v-primary); }
/* small playful dashes around the topic art */
.v-topic-art::before, .v-topic-art::after {
    content: ""; position: absolute; width: 11px; height: 4px; border-radius: 3px;
}
.v-topic-art::before { left: -16px; top: 46%; transform: rotate(-18deg); background: var(--v-accent-coral); }
.v-topic-art::after { right: -16px; top: 28%; transform: rotate(-30deg); background: var(--v-primary); }
.v-tint-1 { background: var(--v-tint-sky); }
.v-tint-2 { background: var(--v-tint-amber); }
.v-tint-3 { background: var(--v-tint-mint); }
.v-tint-4 { background: var(--v-tint-coral); }
.v-tint-5 { background: var(--v-tint-violet); }
.v-topic-name { font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.v-topic-meta { font-size: 0.8125rem; color: var(--v-text-2); margin-top: -6px; }

/* Horizontal topic list (subcategories) */
.v-list { display: grid; gap: var(--v-space-2); }
.v-list-item {
    display: flex; align-items: center; gap: var(--v-space-3);
    min-height: 64px; padding: var(--v-space-3) var(--v-space-4);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text) !important; text-decoration: none !important;
}
.v-list-item-body { flex: 1; min-width: 0; }
.v-list-item-title { font-weight: 600; overflow-wrap: anywhere; }
.v-list-item-sub { font-size: 0.8125rem; color: var(--v-text-2); overflow-wrap: anywhere; }
.v-list-item > .ic:last-child { color: var(--v-text-3); }
.v-list-icon {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--v-tonal); color: var(--v-primary);
}
.v-list-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Breadcrumb */
.v-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--v-text-2); list-style: none; padding: 0; margin: 0; }
.v-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.v-crumbs li + li::before { content: "/"; color: var(--v-text-3); margin-right: 4px; }
.v-crumbs a, .v-crumbs button { color: var(--v-primary); background: none; border: 0; padding: 2px 0; font: inherit; cursor: pointer; text-decoration: none; }
.v-crumbs a:hover, .v-crumbs button:hover { text-decoration: underline; }
.v-crumbs [aria-current] { color: var(--v-text); font-weight: 600; }

/* Levels */
.v-level {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 104px; padding: var(--v-space-4);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text); text-align: center;
}
.v-level-num { font-size: 1.625rem; font-weight: 800; line-height: 1; }
.v-level-label { font-size: 0.8125rem; color: var(--v-text-2); }
.v-level .ic { color: var(--v-primary); }
.v-level.is-locked { background: var(--v-surface-2); color: var(--v-text-3); cursor: not-allowed; }
.v-level.is-locked .ic, .v-level.is-locked .v-level-label { color: var(--v-text-3); }
.v-level.is-current { border-color: var(--v-primary); box-shadow: inset 0 0 0 1px var(--v-primary); }

/* ----------------------------------------------------------------- modes */
.v-mode {
    display: flex; align-items: center; gap: var(--v-space-3);
    min-height: 84px; padding: var(--v-space-4);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text) !important; text-decoration: none !important;
}
.v-mode-icon {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
}
.v-mode-icon .ic { width: 26px; height: 26px; stroke-width: 2.1; }
.v-mode-icon.is-coral { background: var(--v-tint-coral); color: #E0453A; }
.v-mode-icon.is-amber { background: var(--v-tint-amber); color: #E08A00; }
.v-mode-icon.is-blue { background: var(--v-tint-sky); color: var(--v-primary); }
.v-mode-icon.is-mint { background: var(--v-tint-mint); color: var(--v-correct); }
.v-mode-icon.is-violet { background: var(--v-tint-violet); color: #6B5BD6; }
.v-mode-body { flex: 1; min-width: 0; }
.v-mode-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.v-mode-desc { font-size: 0.8125rem; color: var(--v-text-2); line-height: 1.4; margin-top: 2px; }
.v-mode > .ic { color: var(--v-text-3); }
/* Compact tiles on phones: icon over label */
@media (max-width: 559px) {
    .v-modes-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-space-2); }
    .v-modes-compact .v-mode { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 96px; padding: var(--v-space-3) var(--v-space-2); }
    .v-modes-compact .v-mode-icon { width: 44px; height: 44px; }
    .v-modes-compact .v-mode-title { font-size: 0.8125rem; font-weight: 600; }
    .v-modes-compact .v-mode-desc, .v-modes-compact .v-mode > .ic { display: none; }
}

/* Battle cards with illustration */
.v-battle {
    display: flex; align-items: center; gap: var(--v-space-4);
    min-height: 104px; padding: var(--v-space-3) var(--v-space-4) var(--v-space-3) var(--v-space-3);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text) !important; text-decoration: none !important;
}
.v-battle-art {
    width: 80px; height: 80px; flex: none; border-radius: 18px;
    background: linear-gradient(160deg, var(--v-tint-sky), var(--v-tint-violet));
    display: grid; place-items: center;
}
.v-battle-art img { width: 68px; height: 68px; }

/* ----------------------------------------------------------- empty/error */
.v-empty {
    display: grid; justify-items: center; gap: var(--v-space-2);
    text-align: center; padding: var(--v-space-10) var(--v-space-5);
    background: var(--v-surface); border: 1px dashed var(--v-outline-strong); border-radius: var(--v-radius);
    color: var(--v-text-2);
}
.v-empty .v-empty-icon {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: var(--v-tonal); color: var(--v-primary); margin-bottom: 4px;
}
.v-empty .v-empty-icon .ic { width: 30px; height: 30px; }
.v-empty strong { color: var(--v-text); font-size: 1.0625rem; }
.v-empty.is-error .v-empty-icon { background: var(--v-incorrect-bg); color: var(--v-incorrect); }
.v-empty .v-btn { margin-top: var(--v-space-3); }

.v-alert {
    display: flex; gap: var(--v-space-3); align-items: flex-start;
    padding: var(--v-space-3) var(--v-space-4); border-radius: var(--v-radius-sm);
    background: var(--v-tonal); color: var(--v-text); font-size: 0.875rem;
}
.v-alert-error { background: var(--v-incorrect-bg); color: #8E1F2C; }
.v-alert-success { background: var(--v-correct-bg); color: #0D5C3E; }

/* Skeleton + spinner */
.v-skel {
    background: linear-gradient(90deg, #E9EEF7 25%, #F3F6FB 37%, #E9EEF7 63%);
    background-size: 400% 100%; animation: v-shimmer 1.3s ease infinite;
    border-radius: var(--v-radius); border: 0;
}
.v-skel-topic { height: 150px; }
.v-skel-row { height: 64px; }
.v-skel-text { height: 1em; border-radius: 6px; }
.v-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3.5px solid var(--v-primary-soft); border-top-color: var(--v-primary);
    animation: v-spin .8s linear infinite; display: inline-block;
}
.v-loading { display: grid; justify-items: center; gap: var(--v-space-3); padding: var(--v-space-10) 0; color: var(--v-text-2); }

/* --------------------------------------------------------------- tabs */
.v-segmented {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--v-tonal); border-radius: var(--v-radius-pill);
    max-width: 100%; overflow-x: auto;
}
.v-segmented button, .v-segmented a {
    flex: 1 0 auto; min-height: 40px; padding: 6px 18px; border-radius: var(--v-radius-pill);
    border: 0; background: transparent; color: var(--v-text-2) !important; font-weight: 600; font-size: 0.875rem;
    cursor: pointer; text-decoration: none !important; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}
.v-segmented [aria-selected="true"], .v-segmented .is-active, .v-segmented .active {
    background: var(--v-surface); color: var(--v-primary) !important; box-shadow: var(--v-shadow-sm);
}

/* ------------------------------------------------------- ranking rows */
.v-rank-row {
    display: grid; grid-template-columns: 36px 44px minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-3);
    min-height: 64px; padding: var(--v-space-2) var(--v-space-4);
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
}
.v-rank-pos { font-weight: 800; color: var(--v-text-2); text-align: center; font-variant-numeric: tabular-nums; }
.v-rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-rank-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.v-rank-row.is-me { border-color: var(--v-primary); background: var(--v-tonal); }
.v-podium {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--v-space-2);
    background: var(--v-navy); color: #fff; border-radius: var(--v-radius-xl); padding: var(--v-space-6) var(--v-space-3) var(--v-space-4);
}
.v-podium-slot { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.v-podium-slot .v-avatar { width: 56px; height: 56px; border-color: rgba(255,255,255,.7); box-shadow: none; }
.v-podium-slot.is-first .v-avatar { width: 72px; height: 72px; border-color: var(--v-accent-amber); }
.v-podium-name { font-weight: 600; font-size: 0.875rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.v-podium-score { font-size: 0.8125rem; color: var(--v-navy-muted); }
.v-podium-place {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.16); font-weight: 800; font-size: 0.8125rem;
}
.v-podium-slot.is-first .v-podium-place { background: var(--v-accent-amber); color: var(--v-navy); }

/* ------------------------------------------------------------- forms */
.v-field { display: grid; gap: 6px; margin-bottom: var(--v-space-4); }
.v-field label, .v-label { font-size: 0.875rem; font-weight: 600; color: var(--v-text); margin: 0; }
.v-input, .v-body .v-field .form-control, .v-select {
    width: 100%; min-height: 50px; padding: 12px 16px;
    border: 1.5px solid var(--v-outline); border-radius: 14px;
    background: var(--v-surface); color: var(--v-text);
    font: inherit; font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none;
}
.v-input:focus, .v-body .v-field .form-control:focus, .v-select:focus { border-color: var(--v-primary); box-shadow: var(--v-focus); outline: none; }
.v-input::placeholder, .v-body .form-control::placeholder { color: var(--v-text-3); }
.v-field .text-danger, .v-field-error { color: var(--v-incorrect) !important; font-size: 0.8125rem; margin: 0; }
.v-field-error:empty, .v-field .text-danger:empty { display: none; }
.v-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.v-divider-text { display: flex; align-items: center; gap: 12px; color: var(--v-text-3); font-size: 0.8125rem; margin: var(--v-space-4) 0; }
.v-divider-text::before, .v-divider-text::after { content: ""; flex: 1; border-top: 1px solid var(--v-outline); }

/* ------------------------------------------------------------ prose */
.v-prose { font-size: 1rem; line-height: 1.7; color: var(--v-text); overflow-wrap: anywhere; }
.v-prose p, .v-prose ul, .v-prose ol { margin: 0 0 1em; }
.v-prose h1, .v-prose h2, .v-prose h3 { margin: 1.4em 0 .5em; }
.v-prose strong { font-weight: 700; }
.v-prose ul, .v-prose ol { padding-left: 1.3em; }
.v-prose img { height: auto; border-radius: var(--v-radius-sm); }

/* ===================================================== gameplay components */
/* Navy status panel: question progress, score, coins and timer */
.v-quiz-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-4);
    background: var(--v-navy); color: #fff;
    border-radius: var(--v-radius-lg); padding: var(--v-space-4) var(--v-space-5);
}
.v-quiz-panel-info { min-width: 0; display: grid; gap: 8px; }
.v-quiz-count { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.v-quiz-count span { font-variant-numeric: tabular-nums; }
.v-quiz-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.v-quiz-track-fill { height: 100%; width: 0; border-radius: 8px; background: #4D9BFF; transition: width .35s var(--v-ease); }
.v-quiz-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.875rem; color: var(--v-navy-muted); }
.v-quiz-meta b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; }
.v-quiz-tally { display: flex; gap: 6px; }
.v-quiz-tally .v-chip { min-height: 26px; padding: 2px 10px; }
.v-quiz-panel .v-chip-correct { background: rgba(52, 211, 153, .2); color: #A7F3D0; }
.v-quiz-panel .v-chip-incorrect { background: rgba(248, 113, 113, .2); color: #FECACA; }

/* Countdown ring (markup injected by page scripts into #app) */
.base-timer { position: relative; width: 4.5rem; height: 4.5rem; }
.base-timer__svg { transform: scaleX(-1); width: 100%; height: 100%; }
.base-timer__circle { fill: none; stroke: none; }
.base-timer__path-elapsed { stroke-width: 8px; stroke: rgba(255, 255, 255, .18); }
.base-timer__path-remaining {
    stroke-width: 8px; stroke-linecap: round; transform: rotate(90deg); transform-origin: center;
    transition: .9s linear all; fill-rule: nonzero; stroke: #fff;
}
.base-timer__path-remaining.is-warning { stroke: var(--v-accent-amber); }
.base-timer__label {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.v-timer-warning .base-timer__label { color: var(--v-accent-amber); }
/* Timers rendered on light surfaces */
.v-on-light .base-timer__path-elapsed { stroke: var(--v-tonal); }
.v-on-light .base-timer__path-remaining { stroke: var(--v-primary); }
.v-on-light .base-timer__label { color: var(--v-text); }

/* Question card */
.v-question {
    position: relative;
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius-lg);
    padding: var(--v-space-5); margin-top: var(--v-space-4);
}
.v-question-text { font-size: clamp(1.1875rem, 3.6vw, 1.5rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; padding-right: 44px; }
.v-question-text img { max-width: 100%; height: auto; }
.v-question-media { margin-top: var(--v-space-3); display: grid; place-items: center; }
.v-question-media:empty { display: none; }
.v-question-media img {
    width: auto !important; max-width: 100%; max-height: min(240px, 34vh); object-fit: contain;
    border-radius: var(--v-radius-sm); cursor: zoom-in; padding-top: 0 !important;
}
.v-question-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.v-question-tools button {
    width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--v-text-2);
    display: grid; place-items: center; cursor: pointer;
}
.v-question-tools button:hover { background: var(--v-tonal); color: var(--v-primary); }
.v-question-tools button.active, .v-question-tools button[aria-pressed="true"] { color: var(--v-primary); }
.v-question-tools button.active .ic, .v-question-tools button[aria-pressed="true"] .ic { fill: currentColor; }

/* Answers. Each label sits in its own slot wrapper because page scripts
   hide/show options with input.parent().parent(). */
.v-answers { display: grid; gap: var(--v-space-3); margin-top: var(--v-space-4); }
.v-answer-slot { min-width: 0; }
.v-answer {
    position: relative;
    display: flex; align-items: center; gap: var(--v-space-3);
    width: 100%; min-height: 60px; margin: 0;
    padding: 10px var(--v-space-4) 10px 10px;
    background: var(--v-surface); border: 1.5px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text); cursor: pointer; user-select: none;
    transition: border-color .15s, background .15s, transform .12s var(--v-ease), box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.v-answer:hover { border-color: var(--v-primary); box-shadow: var(--v-shadow); }
.v-answer:active { transform: scale(.985); }
.v-answer:focus-visible, .v-answer:focus-within { border-color: var(--v-primary); box-shadow: var(--v-focus); outline: none; }
.v-answer-letter {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--v-tonal); color: var(--v-primary);
    font-weight: 700; font-size: 1.0625rem; text-transform: uppercase;
}
.v-answer-text { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.v-answer-text img { max-height: 120px; width: auto; }
.v-answer .progress { width: 46px; height: 46px; background: none; border-radius: 0; overflow: visible; flex: none; font-size: 0.75rem; font-weight: 700; color: var(--v-primary); position: relative; }
.v-answer .progress:empty { display: none; }
.v-answer .progress .progressbar-text { color: var(--v-text) !important; font-size: 0.75rem; font-weight: 700; }
.v-answer input[type="radio"], .hiddenRadioButton {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
/* States applied by page scripts */
.v-answer.bg-success-green, .bg-success-green {
    background: var(--v-correct-bg) !important; border-color: var(--v-correct) !important; color: var(--v-text) !important;
}
.v-answer.bg-success-green .v-answer-letter { background: var(--v-correct); color: #fff; }
.v-answer.bg-danger-red, .bg-danger-red {
    background: var(--v-incorrect-bg) !important; border-color: var(--v-incorrect) !important; color: var(--v-text) !important;
}
.v-answer.bg-danger-red .v-answer-letter { background: var(--v-incorrect); color: #fff; }
.v-answer.bg-success-green { animation: v-pop .28s var(--v-ease); }
.v-answer.bg-danger-red { animation: v-shake .32s var(--v-ease); }
.v-answer:has(input:disabled) { cursor: default; }
.v-answer:has(input:disabled):hover { box-shadow: none; }
@media (min-width: 768px) {
    .v-answers-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lifeline dock */
.v-lifelines-wrap { container: viq-dock / inline-size; }
.v-lifelines {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-space-2);
    margin-top: var(--v-space-5);
}
.v-lifeline {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 84px; padding: var(--v-space-2) 4px;
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius);
    color: var(--v-text); cursor: pointer; text-align: center; font: inherit;
    transition: transform .12s, border-color .15s, background .15s, opacity .15s;
}
.v-lifeline:hover { border-color: var(--v-primary); background: var(--v-surface-2); }
.v-lifeline:active { transform: scale(.95); }
.v-lifeline .ic { width: 26px; height: 26px; color: var(--v-primary); }
.v-lifeline-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.v-lifeline-cost { font-size: 0.75rem; color: var(--v-text-2); display: inline-flex; align-items: center; gap: 3px; }
.v-lifeline-cost .ic { width: 13px; height: 13px; color: var(--v-amber); }
.v-lifeline.is-used { opacity: .45; background: var(--v-surface-2); }
.v-lifeline.is-used .v-lifeline-cost { visibility: hidden; }
@media (max-width: 400px) {
    .v-lifeline { min-height: 76px; }
    .v-lifeline-name { font-size: 0.75rem; }
}

/* Results */
.v-result {
    background: var(--v-navy); color: #fff;
    border-radius: var(--v-radius-xl); padding: var(--v-space-6) var(--v-space-5);
    text-align: center; display: grid; justify-items: center; gap: var(--v-space-3);
}
.v-result h1, .v-result h2 { color: #fff; }
.v-result p { color: var(--v-navy-muted); }
.v-result .progress {
    width: 148px; height: 148px; background: none; border-radius: 50%; overflow: visible; position: relative; margin: 0;
}
.v-result .progressbar-text { color: #fff !important; font-size: 2rem; font-weight: 800; }
.v-result-ring { position: relative; width: 148px; height: 148px; }
.v-result-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.v-result-ring-label b { font-size: 2.125rem; font-weight: 800; line-height: 1; color: #fff; }
.v-result-ring-label span { font-size: 0.8125rem; color: var(--v-navy-muted); }
.v-result-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-2);
    width: 100%; margin-top: var(--v-space-2);
}
.v-result-stat { background: rgba(255,255,255,.08); border-radius: var(--v-radius); padding: var(--v-space-3); text-align: left; display: grid; gap: 2px; }
.v-result-stat span { font-size: 0.8125rem; color: var(--v-navy-muted); display: flex; align-items: center; gap: 6px; }
.v-result-stat b { font-size: 1.375rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .v-result-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Versus header for battles */
.v-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--v-space-3); }
.v-versus-player { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.v-versus-player .v-avatar { width: 64px; height: 64px; }
.v-versus-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-versus-vs { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--v-accent-amber); color: var(--v-navy); font-weight: 800; }

/* Review list */
.v-review-item { display: grid; gap: var(--v-space-3); }
.v-review-option { display: flex; gap: var(--v-space-3); align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--v-outline); }
.v-review-option.is-correct { background: var(--v-correct-bg); border-color: var(--v-correct); }
.v-review-option.is-wrong { background: var(--v-incorrect-bg); border-color: var(--v-incorrect); }

/* ========================================================= legacy overrides */
/* Preloader */
#preloader {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--v-bg); display: grid; place-items: center;
}
#loader-img {
    width: 64px; height: 64px; border-radius: 18px;
    background: var(--v-primary) url("../brand/emblem-white.svg") center / 44px no-repeat;
    animation: v-bob 1s ease-in-out infinite;
}

/* blockUI overlay */
.blockUI.blockOverlay { background: rgba(245, 247, 252, .82) !important; opacity: 1 !important; }
.blockUI.blockMsg { background: transparent !important; border: 0 !important; }
.blockUI.blockMsg h1 { margin: 0; }

/* Bootstrap modal */
.v-body .modal-backdrop.show { opacity: .45; background: #0F1E3C; }
.v-body .modal-dialog { max-width: 460px; margin: 16px auto; padding: 0 12px; }
.v-body .modal-content {
    border: 0; border-radius: var(--v-radius-xl); box-shadow: var(--v-shadow-lg);
    padding: var(--v-space-2) var(--v-space-2) var(--v-space-4); background: var(--v-surface);
}
.v-body .modal-header { border: 0; padding: var(--v-space-4) var(--v-space-5) 0; }
.v-body .modal-body { padding: var(--v-space-4) var(--v-space-5); }
.v-body .modal-footer { border: 0; }
.v-body .modal .close { opacity: 1; color: var(--v-text-2); text-shadow: none; font-size: 1.75rem; }

/* SweetAlert (v2) */
.swal-overlay { background-color: rgba(15, 30, 60, .45); }
.swal-modal { border-radius: var(--v-radius-xl); font-family: var(--v-font); padding: 8px 4px 4px; width: min(420px, calc(100vw - 32px)); }
.swal-title { color: var(--v-text); font-size: 1.3125rem; font-weight: 700; padding: 8px 20px 0; }
.swal-text { color: var(--v-text-2); font-size: 1rem; text-align: center; padding: 0 20px; display: block; }
.swal-footer { text-align: center; padding: 8px 16px 16px; }
.swal-button {
    background: var(--v-primary); border-radius: var(--v-radius-pill); padding: 12px 28px; font-weight: 600; font-size: 0.9375rem;
    min-height: 46px;
}
.swal-button:not([disabled]):hover { background: var(--v-primary-strong); }
.swal-button:focus { box-shadow: var(--v-focus); }
.swal-button--cancel { background: var(--v-tonal); color: var(--v-primary); }
.swal-button--cancel:not([disabled]):hover { background: var(--v-primary-soft); }
.swal-button--danger { background: var(--v-incorrect); }
.swal-icon--success__line { background-color: var(--v-correct); }
.swal-icon--success__ring { border-color: rgba(22, 133, 91, .25); }
.swal-icon--warning { border-color: var(--v-amber); }
.swal-icon--warning__body, .swal-icon--warning__dot { background-color: var(--v-amber); }

/* intl-tel-input inside forms */
.v-body .iti { width: 100%; }

/* DataTables (legacy leaderboard markup) */
.v-body .dataTables_wrapper { font-size: 0.875rem; }
.v-body table.dataTable { border-collapse: separate !important; border-spacing: 0 8px; width: 100% !important; }
.v-body table.dataTable thead th { border: 0 !important; color: var(--v-text-2); font-weight: 600; }
.v-body table.dataTable tbody td { background: var(--v-surface); border-top: 1px solid var(--v-outline) !important; border-bottom: 1px solid var(--v-outline); padding: 12px; vertical-align: middle; }
.v-body table.dataTable tbody td:first-child { border-left: 1px solid var(--v-outline); border-radius: 14px 0 0 14px; }
.v-body table.dataTable tbody td:last-child { border-right: 1px solid var(--v-outline); border-radius: 0 14px 14px 0; }
.v-body .dataTables_paginate .paginate_button { border-radius: 10px !important; }

/* ------------------------------------------------------------- motion */
@keyframes v-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes v-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes v-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes v-spin { to { transform: rotate(360deg); } }
@keyframes v-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes v-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v-rise { animation: v-rise .35s var(--v-ease) both; }

@media (prefers-reduced-motion: reduce) {
    .v-body *, .v-body *::before, .v-body *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

/* Compact top bar on phones */
.v-topbar .v-btn, .v-lang-btn { white-space: nowrap; }
@media (max-width: 559px) {
    .v-topbar { gap: 2px; padding-left: 8px; padding-right: 12px; }
    .v-lang-btn #currentLangName { display: none; }
    .v-lang-btn { padding: 6px 8px; min-height: 44px; }
    .v-lang-btn .ic-sm:first-child { width: 22px; height: 22px; }
    .v-topbar .v-btn-sm { padding: 6px 14px; }
}
@media (max-width: 374px) {
    .v-topbar .v-brand span { display: none; }
}

/* ================================================================ auth */
.v-auth-modal .modal-dialog { max-width: 440px; }
.v-auth-modal .modal-content { position: relative; padding: var(--v-space-6) var(--v-space-5) var(--v-space-5); }
.v-modal-close { position: absolute; top: 10px; right: 10px; color: var(--v-text-2); }
.v-auth-head { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: var(--v-space-5); padding: 0 var(--v-space-6); }
.v-auth-head img { border-radius: 14px; margin-bottom: 4px; }
.v-auth-head .v-muted { font-size: 0.9375rem; }
.v-auth-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--v-tonal); color: var(--v-primary); margin-bottom: 4px; }

.v-auth-tabs.nav-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    background: var(--v-tonal); border: 0; border-radius: var(--v-radius-pill);
    margin: 0 0 var(--v-space-5); list-style: none;
}
.v-auth-tabs li { margin: 0; min-width: 0; }
.v-auth-tabs a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 42px; padding: 6px 12px; border-radius: var(--v-radius-pill); border: 0 !important;
    color: var(--v-text-2) !important; font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
    text-decoration: none !important; background: transparent; transition: background .15s, color .15s;
}
.v-auth-tabs a.active, .v-auth-tabs a[aria-selected="true"] { background: var(--v-surface); color: var(--v-primary) !important; box-shadow: var(--v-shadow-sm); }
.v-auth-panel .tab-pane { outline: none; }

.v-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v-space-3); flex-wrap: wrap; }
.v-link-sm { font-size: 0.875rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.v-link-sm:hover { text-decoration: underline; }
.v-pw { position: relative; }
.v-body .v-pw .form-control { padding-right: 52px; }
.v-pw-toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px;
    color: var(--v-text-2); display: grid; place-items: center; cursor: pointer;
}
.v-pw-toggle:hover { background: var(--v-tonal); color: var(--v-primary); }
.v-pw-toggle .v-pw-hide, .v-pw-toggle[aria-pressed="true"] .v-pw-show { display: none; }
.v-pw-toggle[aria-pressed="true"] .v-pw-hide { display: inline; }
.v-auth-error { margin: calc(-1 * var(--v-space-2)) 0 var(--v-space-3); padding: 10px 12px; border-radius: var(--v-radius-sm); background: var(--v-incorrect-bg); }
.v-auth-error:empty { display: none; }
.v-auth-consent { font-size: 0.8125rem; color: var(--v-text-2); margin-bottom: var(--v-space-4); line-height: 1.45; }
.v-auth-consent a { text-decoration: underline; text-underline-offset: 2px; }
.v-social { display: grid; gap: var(--v-space-2); }
.v-social .v-btn { justify-content: flex-start; gap: 14px; padding: 10px 18px; font-weight: 600; font-size: 0.9375rem; }
.v-social .v-btn span { flex: 1; text-align: left; min-width: 0; }
.v-auth-switch { text-align: center; margin-top: var(--v-space-5); color: var(--v-text-2); font-size: 0.9375rem; }
.v-auth-switch a { font-weight: 600; }
.v-otp { font-size: 1.375rem !important; letter-spacing: .3em; text-align: center; }
.v-auth-modal .v-btn-row > .v-btn { flex: 1 1 140px; }
.v-auth-modal .iti, .v-auth-card .iti { width: 100%; }
.v-auth-modal .iti__country-list { white-space: normal; max-width: min(360px, 80vw); }

/* Standalone sign-in page */
.v-auth-page {
    display: grid; gap: var(--v-space-5);
    max-width: 960px; margin: var(--v-space-4) auto var(--v-space-8);
}
.v-auth-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--v-navy); color: #fff; border-radius: var(--v-radius-xl);
    padding: var(--v-space-6); padding-right: 130px; min-height: 150px;
}
.v-auth-hero h2 { color: #fff; font-size: clamp(1.375rem, 4vw, 2.125rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.v-auth-hero p { color: rgba(255,255,255,.85); margin-top: 8px; }
.v-auth-hero .v-eyebrow { color: var(--v-navy-muted); }
.v-auth-hero-art { position: absolute; right: -6px; bottom: -6px; width: 130px; height: 130px; z-index: -1; }
.v-auth-hero-art img { width: 100%; height: 100%; }
.v-auth-card { background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius-xl); padding: var(--v-space-6) var(--v-space-5); }
@media (min-width: 900px) {
    .v-auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 27.5rem); align-items: stretch; margin-top: var(--v-space-8); }
    .v-auth-hero { padding: var(--v-space-10) var(--v-space-8); display: flex; flex-direction: column; justify-content: center; }
    .v-auth-hero-art { position: relative; right: auto; bottom: auto; z-index: 0; width: 200px; height: 200px; margin: 0 0 var(--v-space-8) -12px; }
    .v-auth-hero h2 { font-size: 2.375rem; }
    .v-auth-hero p:last-child { font-size: 1.125rem; max-width: 34ch; }
    .v-auth-card { padding: var(--v-space-8); }
}
/* Sign-in dialog opens directly on the tabs; the close button sits beside them. */
.v-auth-modal--tabs .modal-content { padding-top: var(--v-space-5); }
.v-auth-modal--tabs .v-auth-tabs.nav-tabs { margin-right: 48px; }
.v-auth-modal--tabs .v-modal-close { top: 22px; right: 12px; }

/* Promoted from page styles */
.v-answer:focus-visible { outline: 3px solid var(--v-primary); outline-offset: 2px; }
.v-answer-group { display: contents; }
.progressbar-text { white-space: nowrap; overflow-wrap: normal !important; }

/* Auth tabs stay on one line, including Georgian */
.v-auth-tabs a { font-size: 0.875rem; padding: 6px 8px; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 374px) { .v-auth-tabs a { font-size: 0.8125rem; padding: 6px 4px; } }

/* How to play (admin-authored HTML) */
.v-help { padding: var(--v-space-6); }
.v-help > div > p:first-child, .v-help > p:first-child { font-size: 1.125rem; color: var(--v-text-2); }
.v-help h3 { font-size: 1.125rem; margin: var(--v-space-6) 0 var(--v-space-2); padding-top: var(--v-space-5); border-top: 1px solid var(--v-outline); }
.v-help ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.v-help li { position: relative; padding-left: 26px; }
.v-help li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--v-primary); box-shadow: 0 0 0 4px var(--v-tonal); }
.v-help li strong { color: var(--v-text); }

/* Podium variants and link levels (promoted from page styles) */
.v-podium-1 { grid-template-columns: minmax(0, 1fr); }
.v-podium-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
a.v-level { width: 100%; color: var(--v-text) !important; text-decoration: none !important; }

/*
 * Large browser text sizes on phones. Labels in the bottom navigation are
 * capped relative to the viewport so single long words (Georgian) still fit
 * in a quarter of the screen; the sign-in tabs stack when their labels do not
 * fit side by side.
 */
.v-bottom-nav a { font-size: min(0.75rem, 3.6vw); }
.v-auth-tabs.nav-tabs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr)); border-radius: 22px; }

/* SweetAlert draws its icons for content-box sizing; keep the global border-box rule out of them. */
body.v-body .swal-icon,
body.v-body .swal-icon *,
body.v-body .swal-icon::before,
body.v-body .swal-icon::after,
body.v-body .swal-icon *::before,
body.v-body .swal-icon *::after { box-sizing: content-box; }

/* Compact title in the top bar once the page heading scrolls away (viq.js). */
.v-topbar-title {
    flex: 0 1 auto; min-width: 0;
    font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--v-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .2s var(--v-ease), transform .2s var(--v-ease);
    max-width: 0;
}
.v-topbar.has-title .v-topbar-title { opacity: 1; transform: none; max-width: 100%; flex: 1 1 auto; }
.v-topbar.has-title .v-topbar-spacer { flex: 0 0 var(--v-space-2); }
@media (max-width: 1023px) {
    .v-topbar.has-title .v-brand span { display: none; }
}
.v-topbar .v-brand { flex: none; }
.v-topbar .v-brand img { flex: none; }
.v-topbar.has-title .v-topbar-title { margin-left: var(--v-space-2); }
@media (min-width: 1024px) {
    .v-topbar.has-title .v-topbar-title { margin-left: 0; }
    .v-topbar.is-scrolled {
        background: rgba(245, 247, 252, .97);
        backdrop-filter: saturate(1.4) blur(10px);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
    }
}