/*
 * Gameplay pages (quiz, results, review). Shared gameplay components live in
 * viq.css; only rules specific to these screens are here.
 */

/* ------------------------------------------------------------ quiz screen */
.v-game-crumbs { margin: 2px 2px var(--v-space-3); font-size: 0.8125rem; }
.v-game-crumbs li { min-width: 0; }

.v-quiz-panel { position: relative; z-index: 5; }
.v-quiz-count { margin: 0; line-height: 1.25; }
.v-quiz-meta { align-items: center; }
.v-quiz-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.v-coin-ic { color: var(--v-accent-amber); }
.v-quiz-tally .v-chip { gap: 5px; }
.v-quiz-tally .v-chip .ic { width: 14px; height: 14px; stroke-width: 2.4; }

/* Slim tally bars: scripts animate the fill height as a share of all questions. */
.v-tally-bar {
    position: relative; display: inline-flex; align-items: flex-end;
    width: 5px; height: 16px; border-radius: 3px; overflow: hidden;
    background: rgba(255, 255, 255, .16);
}
.v-tally-bar > span { display: block; width: 100%; height: 0; border-radius: 3px; }
.progressBar_fill_green { background: #6EE7B7; }
.progressBar_fill_red { background: #FCA5A5; }

.v-quiz-timer { display: grid; justify-items: center; gap: 2px; }
.v-quiz-timer-caption { font-size: 0.75rem; color: var(--v-navy-muted); line-height: 1; }
#app { min-width: 72px; min-height: 72px; }

/* Keep the countdown in view while long content scrolls, on screens tall enough for it. */
@media (min-height: 700px) {
    .v-game .v-quiz-panel { position: sticky; top: 64px; box-shadow: 0 8px 18px -12px rgba(15, 30, 60, .55); }
}

/* Question card: image first, shown complete, then the text. */
.v-game .v-question-media { margin: 0 0 var(--v-space-3); }
.v-game .v-question-media img {
    display: block; width: auto !important; height: auto; max-width: 100%;
    max-height: min(280px, 38vh); object-fit: contain; background: var(--v-surface-2);
}
.v-game .v-question-media:not(:empty) + .v-question-text { padding-right: 0; }
.v-game .v-question-tools ~ .v-question-media:not(:empty) { padding: 0 44px; }
@media (max-width: 479px) {
    .v-game .v-question-tools ~ .v-question-media:not(:empty) { padding: 36px 0 0; }
}
.v-question-text p { margin: 0; }
.v-question-text p + p { margin-top: 8px; }

/* Answers (.v-answer-group wrappers come from viq.css). */
.v-answer { min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
.v-answer-text p { margin: 0; }
.v-answer[id] .progress { margin-left: auto; }

/* Lifeline dock stays in the page flow so it never covers answers. */
.v-game .v-lifelines { margin-top: var(--v-space-5); }
.v-lifeline { min-width: 0; }
.v-lifeline-name { overflow-wrap: normal; word-break: normal; hyphens: auto; max-width: 100%; }
html[lang="ka"] .v-lifeline-name { font-size: 0.75rem; }
.v-lifeline.is-used { cursor: not-allowed; opacity: 1; }
/* Used: fade the tile and icon, keep the label readable (4.5:1 or better). */
.v-lifeline.is-used { border-style: dashed; }
.v-lifeline.is-used > .ic { opacity: .4; }
.v-lifeline.is-used .v-lifeline-name { color: var(--v-text-2); }
/* Paused during the answer feedback second (see game-ui.js). */
.v-lifelines.is-paused .v-lifeline { cursor: default; }
.v-lifelines.is-paused .v-lifeline:hover { border-color: var(--v-outline); background: var(--v-surface); }
/* Empty answer options are never shown or selectable (see game-ui.js). */
.v-answer-slot.is-empty-option { display: none !important; }
@media (min-width: 560px) {
    .v-lifeline { min-height: 92px; }
    html[lang="ka"] .v-lifeline-name { font-size: 0.8125rem; }
}

/* Larger image overlay */
.v-zoom {
    position: fixed; inset: 0; z-index: 2500;
    display: grid; place-items: center; padding: 64px 16px 24px;
    background: rgba(10, 22, 46, .88);
}
.v-zoom[hidden] { display: none; }
.v-zoom img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--v-radius); background: #fff;
}
.v-zoom-close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255, 255, 255, .14) !important; color: #fff !important;
}
body.v-zoom-open { overflow: hidden; }

/* ---------------------------------------------------------- results screen */
.v-result { position: relative; overflow: hidden; }
.v-result-badge {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: var(--v-accent-amber);
}
.v-result-badge .ic { width: 28px; height: 28px; }
.v-result.is-retry .v-result-badge { color: #fff; }
.v-result h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); font-weight: 800; }
.v-result-ring { margin: var(--v-space-2) 0; }
.v-result-ring .progress { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-result-ring-caption { font-size: 0.8125rem; color: var(--v-navy-muted); margin-top: -4px; }
.v-result-total { background: rgba(255, 255, 255, .1); color: #fff; }
.v-result-total .ic { color: var(--v-accent-amber); }
.v-result-stat .ic { width: 16px; height: 16px; }
.v-result-stat .is-correct { color: #6EE7B7; }
.v-result-stat .is-wrong { color: #FCA5A5; }
.v-result-stat .is-amber { color: var(--v-accent-amber); }

/* Calm celebration: a few twinkling sparkles around the summary. */
.v-sparkle { position: absolute; color: var(--v-accent-amber); opacity: .9; pointer-events: none; animation: v-twinkle 2.6s ease-in-out infinite; }
.v-sparkle .ic { width: 100%; height: 100%; }
.v-sparkle-1 { top: 22px; left: 9%; width: 22px; height: 22px; }
.v-sparkle-2 { top: 64px; right: 11%; width: 16px; height: 16px; animation-delay: .8s; color: var(--v-accent-sky); }
.v-sparkle-3 { top: 200px; left: 12%; width: 12px; height: 12px; animation-delay: 1.5s; color: #fff; }
.v-sparkle-4 { top: 176px; right: 18%; width: 18px; height: 18px; animation-delay: 2s; }
@keyframes v-twinkle {
    0%, 100% { transform: scale(.7) rotate(0deg); opacity: .35; }
    50% { transform: scale(1.1) rotate(20deg); opacity: 1; }
}

.v-result-actions { display: grid; gap: var(--v-space-3); margin-top: var(--v-space-5); }
.v-result-actions .v-btn { width: 100%; }
@media (min-width: 640px) {
    .v-result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-result-actions .v-result-primary { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- review screen */
.v-review-summary { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin-bottom: var(--v-space-4); }
.v-review-list { display: grid; gap: var(--v-space-4); list-style: none; margin: 0; padding: 0; }
.v-review-card { display: grid; gap: var(--v-space-3); padding: var(--v-space-4); }
.v-review-head { display: flex; align-items: center; gap: var(--v-space-2); flex-wrap: wrap; }
.v-review-head .v-review-num { font-size: 0.875rem; font-weight: 700; color: var(--v-text-2); }
.v-review-tools { margin-left: auto; display: flex; gap: 2px; }
.v-review-tools button {
    width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--v-text-2);
    display: grid; place-items: center; cursor: pointer;
}
.v-review-tools button:hover { background: var(--v-tonal); color: var(--v-primary); }
.v-review-tools button[aria-pressed="true"] { color: var(--v-primary); }
.v-review-tools button[aria-pressed="true"] .ic { fill: currentColor; }
.v-review-card .v-question-text { padding-right: 0; font-size: clamp(1.125rem, 3.2vw, 1.3125rem); }
.v-review-card .v-question-media { margin: 0; justify-content: start; }
.v-review-card .v-question-media img { max-height: 220px; width: auto !important; cursor: default; }
.v-review-options { display: grid; gap: var(--v-space-2); }
.v-review-option { align-items: flex-start; min-height: 52px; }
.v-review-option .v-answer-letter { width: 32px; height: 32px; font-size: 0.9375rem; }
.v-review-option.is-correct .v-answer-letter { background: var(--v-correct); color: #fff; }
.v-review-option.is-wrong .v-answer-letter { background: var(--v-incorrect); color: #fff; }
.v-review-option-body { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 4px; }
.v-review-option-text { overflow-wrap: anywhere; line-height: 1.35; }
.v-review-option-text p { margin: 0; }
.v-review-tag { font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.v-review-option.is-correct .v-review-tag { color: #0D6B48; }
.v-review-option.is-wrong .v-review-tag { color: #A32636; }
.v-review-tag .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.v-review-note { border-top: 1px solid var(--v-outline); padding-top: var(--v-space-2); }
.v-review-note summary { cursor: pointer; font-weight: 600; color: var(--v-primary); min-height: 36px; display: flex; align-items: center; }
.v-review-note div { color: var(--v-text-2); font-size: 0.9375rem; margin-top: 4px; overflow-wrap: anywhere; }
.v-review-foot { display: grid; gap: var(--v-space-3); margin-top: var(--v-space-6); }
@media (min-width: 640px) { .v-review-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#myReportModal .v-report-question { color: var(--v-text-2); font-size: 0.9375rem; margin-bottom: var(--v-space-3); overflow-wrap: anywhere; }
.v-result-stats { margin-bottom: 0; }
.v-result-stats dt, .v-result-stats dd { margin: 0; font-weight: 500; }
/*
 * Lifeline dock columns follow the space available in rem, so they reflow when
 * the browser text size grows (rem in container queries tracks the root font).
 */
@container viq-dock (max-width: 20rem) {
    .v-lifelines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container viq-dock (max-width: 10rem) {
    .v-lifelines { grid-template-columns: minmax(0, 1fr); }
}
@container viq-dock (max-width: 27.5rem) {
    /* Georgian names do not fit four across: use a 2 x 2 dock with the icon beside the text. */
    html[lang="ka"] .v-lifelines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[lang="ka"] .v-lifeline {
        display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
        column-gap: 10px; row-gap: 2px; align-items: center; justify-items: start; text-align: left;
        min-height: 60px; padding: 8px 12px;
    }
    html[lang="ka"] .v-lifeline > .ic { grid-row: 1 / 3; }
    html[lang="ka"] .v-lifeline-name { font-size: 0.75rem; }
}
@container viq-dock (max-width: 16rem) {
    html[lang="ka"] .v-lifelines { grid-template-columns: minmax(0, 1fr); }
}
.v-question-media img:focus-visible { outline: 3px solid var(--v-primary); outline-offset: 2px; }
.v-result-stat { align-content: space-between; }
@media (min-width: 640px) { .v-result-actions .v-btn-ghost { grid-column: 1 / -1; } }

/* ======================================================= phase B: modes */
.v-quiz-hint { font-size: 0.8125rem; color: var(--v-navy-muted); margin: 0; }
.v-game-actions { display: flex; justify-content: center; margin-top: var(--v-space-5); }
.v-game-actions .v-btn { min-width: 220px; }
.v-result-title { color: #fff; font-size: clamp(1.5rem, 5vw, 1.875rem); font-weight: 800; }
@media (min-width: 560px) { .v-result-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v-result-ring--time .base-timer { width: 148px; height: 148px; }
.v-result-ring--time .base-timer__label { font-size: 1.875rem; font-weight: 800; }
.v-result-ring--time #app { min-width: 0; min-height: 0; }

/* ---------------------------------------------------------- battles */
.v-game-versus {
    background: var(--v-surface); border: 1px solid var(--v-outline); border-radius: var(--v-radius-lg);
    padding: var(--v-space-3) var(--v-space-4); margin-bottom: var(--v-space-3);
}
.v-game-versus .v-avatar { width: 52px; height: 52px; }
.v-versus-score { font-size: 0.8125rem; color: var(--v-text-2); display: inline-flex; align-items: baseline; gap: 4px; }
.v-versus-score b { font-size: 1.375rem; font-weight: 800; color: var(--v-text); font-variant-numeric: tabular-nums; }
.v-avatar-robot { display: grid; place-items: center; background: var(--v-tonal); color: var(--v-primary); }
.v-avatar-robot .ic { width: 28px; height: 28px; }
.v-game--battle .v-quiz-panel { padding-top: var(--v-space-3); padding-bottom: var(--v-space-3); }
/* The opponent's pick, shown by the scripts on the chosen answer. */
.v-answer-opp {
    flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 4px 10px; border-radius: var(--v-radius-pill);
    background: var(--v-amber-bg); color: #8A5300; font-size: 0.75rem; font-weight: 700;
}
.v-answer-opp:empty { display: none; }

/* Find opponent */
.v-find { display: grid; gap: var(--v-space-5); justify-items: center; padding: var(--v-space-6) var(--v-space-4); }
.v-find .v-versus { width: 100%; max-width: 460px; }
.v-find .v-avatar { width: 76px; height: 76px; }
.v-find-opp { position: relative; display: inline-grid; }
.v-find-status { display: grid; justify-items: center; gap: 4px; min-height: 48px; text-align: center; }
.v-find-countdown { font-size: 1.75rem; font-weight: 800; color: var(--v-primary); font-variant-numeric: tabular-nums; }
.v-find-countdown:empty, .v-find-text:empty { display: none; }
.v-find-text { color: var(--v-text-2); }
.v-find-actions { width: 100%; max-width: 360px; }
.v-find-btn { width: 100%; }
/* While searching the script sets pointer-events: none on #find_Opponent. */
#find_Opponent[style*="pointer-events: none"] .v-find-btn { opacity: .6; }
#find_Opponent[style*="pointer-events: none"] .v-find-opp::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 3px solid var(--v-primary-soft); border-top-color: var(--v-primary);
    animation: v-spin 1s linear infinite;
}
.v-battle-topics { list-style: none; margin: 0; padding: 0; }
.v-battle-topics > li { display: flex; min-width: 0; }
.v-battle-topics .v-topic { width: 100%; }
.v-battle-stat .v-avatar { width: 44px; height: 44px; }
.v-battle-outcome { flex: none; }
.swal-content .play_robot {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
    background: var(--v-accent-amber); color: var(--v-navy) !important; cursor: pointer;
}

/* ------------------------------------------------------ self challenge */
.sc-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v-space-3) var(--v-space-6); }
.sc-head-text { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.sc-head h1 { overflow-wrap: anywhere; }
.sc-head h1:focus { outline: none; box-shadow: none; }
.sc-lang { margin: 0; flex: 0 1 240px; min-width: 180px; }
.sc-lang label { font-size: 0.8125rem; color: var(--v-text-2); }
.v-crumbs a { color: var(--v-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.sc-grid, .sc-sublist { list-style: none; margin: 0; padding: 0; }
.sc-grid > li { display: flex; min-width: 0; }
.sc-grid .v-topic { width: 100%; }
@media (min-width: 1200px) { .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-sublist .v-list-item { cursor: pointer; }
@media (min-width: 768px) { .sc-sublist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-step { display: grid; gap: var(--v-space-3); margin-bottom: var(--v-space-4); }
.sc-choices { display: flex; flex-wrap: wrap; gap: var(--v-space-2); }
.sc-choice {
    min-width: 56px; min-height: 48px; padding: 6px 14px; border-radius: var(--v-radius-sm);
    border: 1.5px solid var(--v-outline); background: var(--v-surface); color: var(--v-text);
    font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.sc-choice:hover { border-color: var(--v-primary); }
.sc-choice.active { background: var(--v-primary); border-color: var(--v-primary); color: #fff; }
.sc-start .v-btn { gap: 10px; }
.sc-start-label { pointer-events: none; }

.v-game--sc .base-timer__label { font-size: 1.1875rem; }
/* Self challenge marks the chosen answer (not correctness) until submission. */
.v-game--sc .v-answer.bg-success-green {
    background: var(--v-tonal) !important; border-color: var(--v-primary) !important; animation: none;
}
.v-game--sc .v-answer.bg-success-green .v-answer-letter { background: var(--v-primary); }
.v-sc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-space-3); margin-top: var(--v-space-5); }
.v-sc-nav .v-btn { width: 100%; position: relative; }
#ar-left:empty { visibility: hidden; }
#ar-right #resultData { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; }
.v-sc-submit { display: flex; justify-content: center; margin-top: var(--v-space-3); }

/* --------------------------------------------------------- contests */
.v-contest-tabs { margin-bottom: var(--v-space-5); }
.v-segmented .current { background: var(--v-surface); color: var(--v-primary) !important; box-shadow: var(--v-shadow-sm); }
.tab-contest { display: none; }
.tab-contest.current { display: block; }
.v-contest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-space-4); }
@media (min-width: 900px) { .v-contest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-contest { display: grid; gap: var(--v-space-3); align-content: start; }
.v-contest-head { display: flex; gap: var(--v-space-3); align-items: center; }
.v-contest-img { width: 64px; height: 64px; border-radius: var(--v-radius); object-fit: cover; flex: none; background: var(--v-tonal); }
.v-contest-img--empty { display: grid; place-items: center; color: var(--v-primary); }
.v-contest-title { display: grid; gap: 4px; min-width: 0; }
.v-contest-title h3 { overflow-wrap: anywhere; }
.v-contest-date { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--v-text-2); }
.v-contest-desc { color: var(--v-text-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.v-contest-facts { display: flex; flex-wrap: wrap; gap: var(--v-space-2) var(--v-space-6); margin: 0; }
.v-contest-facts dt { font-size: 0.75rem; color: var(--v-text-2); font-weight: 500; }
.v-contest-facts dd { margin: 0; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.v-contest-actions > .v-btn { flex: 1 1 140px; }
.v-prize-row { display: flex; justify-content: space-between; gap: var(--v-space-3); padding: 10px 0; border-bottom: 1px solid var(--v-outline); }
.v-prize-row span:last-child { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.v-prize-head { color: var(--v-text-2); font-size: 0.8125rem; font-weight: 600; }
.v-contest-board { list-style: none; margin: 0; padding: 0; }
.v-contest-board .v-rank-name { display: flex; align-items: center; gap: 6px; }

/* Guest play (daily quiz): nothing per-user is shown or saved. */
.v-guest #lifeline, .v-guest #boockmark_question { display: none !important; }
.v-guest-card { display: flex; gap: var(--v-space-4); align-items: flex-start; margin-top: var(--v-space-4); }
.v-guest-icon { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--v-tonal); color: var(--v-primary); }
.v-guest-body { display: grid; gap: var(--v-space-2); min-width: 0; }
.v-guest-body p { color: var(--v-text-2); }
.v-guest-body .v-btn-row { margin-top: var(--v-space-2); }
.v-guest-body .v-btn-row > .v-btn { flex: 0 1 auto; }
.v-answers.is-locked .v-answer { cursor: default; }
.v-answers.is-locked .v-answer:hover { box-shadow: none; }
.v-question:not(:has(.v-question-tools)) .v-question-text { padding-right: 0; }
.v-contest-board .v-rank-name { min-width: 0; }
.v-rank-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-contest-board .v-rank-name .v-chip { flex: none; }
.v-contest-tabs { display: flex; width: 100%; max-width: 520px; overflow: visible; }
.v-contest-tabs .projects_select { flex: 1 1 0; min-width: 0; padding: 6px 8px; white-space: normal; overflow-wrap: normal; text-align: center; line-height: 1.2; }
.v-result-page, .v-battle-page { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }

/* Long game titles (often Georgian) wrap to two lines instead of an ellipsis; the bar stays under ~72px. */
.v-game-bar .v-game-title {
    white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    line-height: 1.2; max-height: 2.4em;
}
@media (max-width: 400px) {
    .v-game-bar .v-game-title { font-size: 1rem; }
}