/* ------------------------------------------------------------------
   Theoria — driving-license practice. Theme mirrors the official exam UI:
   deep teal gradient, thin-bordered dark panels, white number boxes.
------------------------------------------------------------------ */

:root {
    --bg-1:        #173a42;
    --bg-2:        #0c2026;
    --bg-3:        #050e11;
    --panel:       rgba(8, 24, 29, 0.55);
    --panel-2:     rgba(10, 30, 36, 0.75);
    --border:      rgba(173, 209, 214, 0.55);
    --border-soft: rgba(173, 209, 214, 0.25);
    --text:        #e9f2f2;
    --text-dim:    #9fb6ba;
    --num-bg:      #f3f6f6;
    --num-text:    #15242a;
    --accent:      #2bd1c4;
    --correct:     #1f8a4c;
    --correct-bd:  #57e08a;
    --wrong:       #b5333a;
    --wrong-bd:    #ef6b72;
    --gold:        #ffcf4d;
    --radius:      4px;
    --maxw:        1120px;
    --font: "Segoe UI", "Noto Sans Georgian", "BPG Nino Mtavruli",
            system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--font);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
        radial-gradient(ellipse 85% 75% at 50% 42%,
            var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
    background-attachment: fixed;
}

/* faint central emblem-like glow */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%,
        rgba(120, 170, 175, 0.06) 0, transparent 38%);
}

.app {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 22px 96px;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- groups */
.groups {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 6px 0 26px;
}

.group-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.group-btn:hover { color: var(--text); border-color: var(--border); }
.group-btn.active {
    color: #04161a;
    background: linear-gradient(180deg, #aee6e0, #6fc9c1);
    border-color: var(--accent);
}
.group-btn .badge {
    min-width: 22px;
    padding: 1px 7px;
    text-align: center;
    border-radius: 11px;
    font-size: 12px;
    background: rgba(0,0,0,0.28);
    color: inherit;
}
.group-btn.active .badge { background: rgba(4,22,26,0.18); }

/* ---------------------------------------------------------------- card */
.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* margin-auto centers vertically yet stays scrollable when content
   is taller than the viewport (unlike justify-content: center). */
.card {
    width: 100%;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.image {
    border: 1px solid var(--border);
    background: #000;
    line-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
}
.image img { width: 100%; height: auto; display: block; }

.question {
    border: 1px solid var(--border);
    background: var(--panel-2);
    border-radius: var(--radius);
    padding: 20px 26px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- answers */
.answers {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.answers.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 16px;
}

.answer {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
    min-height: 56px;
}
.answer:hover:not(.locked) { border-color: #cfeef0; box-shadow: 0 0 0 1px rgba(207,238,240,.25) inset; }
.answer.locked { cursor: default; }

.answer .num {
    flex: 0 0 auto;
    width: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--num-bg);
    color: var(--num-text);
    font-size: 30px;
    font-weight: 700;
}
.answers.grid .answer .num { width: 56px; font-size: 24px; }

.answer .text {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 14.5px;
    line-height: 1.45;
    background: var(--panel);
}

/* answered states */
.answer.correct { border-color: var(--correct-bd); }
.answer.correct .text {
    background: linear-gradient(180deg, rgba(31,138,76,.85), rgba(20,95,52,.9));
    color: #eafff0;
}
.answer.wrong { border-color: var(--wrong-bd); }
.answer.wrong .text {
    background: linear-gradient(180deg, rgba(181,51,58,.85), rgba(130,32,38,.9));
    color: #ffecec;
}

/* ---------------------------------------------------------------- description */
.desc {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    background: rgba(12, 32, 38, 0.6);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #d6e6e7;
}

/* ---------------------------------------------------------------- actions */
.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.btn {
    flex: 1 1 0;
    min-width: 140px;
    padding: 13px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover { border-color: var(--border); background: var(--panel-2); }
.btn-hide:hover    { border-color: var(--wrong-bd);   color: #ffd9db; }
.btn-restore:hover { border-color: var(--correct-bd); color: #d6ffe6; }
.btn-mark.on       { border-color: var(--gold); color: var(--gold); }
.btn-next {
    background: linear-gradient(180deg, #2bd1c4, #1ba89d);
    border-color: var(--accent);
    color: #04181a;
    flex: 1.4 1 0;
}
.btn-next:hover { filter: brightness(1.08); background: linear-gradient(180deg, #44ddd0, #1ba89d); }

/* ---------------------------------------------------------------- empty / loading */
.notice {
    text-align: center;
    color: var(--text-dim);
    padding: 60px 20px;
    font-size: 16px;
    margin: auto 0;
}

/* ---------------------------------------------------------------- footer */
.footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 24px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    font-size: 13px;
    color: var(--text-dim);
    pointer-events: none;
    background: linear-gradient(to top, rgba(5, 14, 17, 0.92) 35%, transparent);
    backdrop-filter: blur(2px);
}
.footer > * { pointer-events: auto; }

.help {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.help:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.help:disabled { opacity: .35; cursor: default; }

.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    padding: 7px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s ease;
}
.chip:hover { color: var(--text); border-color: var(--border); }
.chip-progress { cursor: default; color: var(--accent); border-color: var(--border-soft); }
.chip-ready    { cursor: default; color: var(--correct-bd); border-color: var(--correct-bd); }

button.session-info {
    letter-spacing: .3px;
    background: none;
    border: none;
    color: var(--text-dim);
    font: inherit;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}
button.session-info:not(:disabled):hover { color: var(--text); background: var(--panel); }
button.session-info:disabled { cursor: default; opacity: .6; }
.hist-wrong { color: var(--wrong-bd); font-weight: 700; }
.hist-open { opacity: .6; font-size: 11px; }

/* ---------------------------------------------------------------- history overlay */
.history-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(3, 10, 12, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.history-panel {
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0d2329, #0a191e);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    animation: fade .16s ease;
}

.history-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.history-head strong { font-size: 14.5px; color: var(--text); }

.history-tabs { margin-left: auto; display: flex; gap: 6px; }
.history-tabs button {
    padding: 6px 11px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.history-tabs button.active {
    color: #04161a;
    background: linear-gradient(180deg, #aee6e0, #6fc9c1);
    border-color: var(--accent);
}

.history-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
}
.history-close:hover { color: var(--text); border-color: var(--border); }

.history-list {
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hist-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease;
}
/* outrank the UA `a:any-link { text-decoration: underline }` (specificity 0,1,1) */
a.hist-row, a.hist-row:link, a.hist-row:visited, a.hist-row:hover, a.hist-row:focus {
    text-decoration: none;
    color: var(--text);
}
.hist-row:hover { border-color: var(--border); }
.hist-badge { font-size: 15px; font-weight: 700; text-align: center; }
.hist-row.ok .hist-badge { color: var(--correct-bd); }
.hist-row.wrong { border-left: 3px solid var(--wrong-bd); }
.hist-row.wrong .hist-badge { color: var(--wrong-bd); }
.hist-q {
    font-size: 13.5px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hist-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.hist-meta b { color: var(--text); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
    .app { padding: 12px 12px calc(78px + env(safe-area-inset-bottom)); }

    /* top-align on mobile: tall cards (image + 4 answers) scroll naturally */
    .card, .notice { margin: 0; }
    .notice { padding: 48px 16px; }

    /* group selector: three equal segments, label over badge */
    .groups { gap: 6px; margin: 2px 0 16px; }
    .group-btn {
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }

    .card { gap: 12px; }
    .question { font-size: 15px; padding: 14px 14px; }

    /* all answers single column on phones */
    .answers, .answers.grid { display: flex; flex-direction: column; gap: 10px; }
    .answer { min-height: 52px; }
    .answer .num, .answers.grid .answer .num { width: 54px; font-size: 24px; }
    .answer .text { font-size: 13.5px; padding: 10px 12px; }

    .desc { font-size: 13px; padding: 12px 14px; }

    /* stack actions full-width — no truncated labels, thumb-friendly */
    .actions { flex-direction: column; gap: 10px; }
    .btn { width: 100%; min-width: 0; flex: none; padding: 13px; font-size: 14.5px; }

    /* compact single-row footer; chip labels collapse to icons */
    .footer { gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
    .footer-left { gap: 8px; flex-wrap: nowrap; }
    .chip { padding: 7px 9px; font-size: 12px; }
    .chip-label { display: none; }
    .session-info { font-size: 11.5px; white-space: nowrap; }

    /* history overlay: full screen, meta under the question */
    .history-overlay { padding: 0; }
    .history-panel { max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
    .history-head { padding: 12px; }
    .history-head strong { font-size: 13.5px; }
    .hist-row { grid-template-columns: 24px 1fr; }
    .hist-meta { grid-column: 2; white-space: normal; font-size: 11.5px; }
}

/* very small / landscape phones */
@media (max-width: 360px) {
    .group-btn { font-size: 11px; }
    .answer .text { font-size: 13px; }
}