/* ============================================================
   ПОЛИГЛОТ 16 — Італійська мова
   Темна тема, натхнення від оригінального React-застосунку
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --pg-dark0:     #0d1520;
    --pg-dark1:     #0f1a28;
    --pg-dark2:     #1a2535;
    --pg-dark3:     #2a3f5a;
    --pg-gold:      #c8a96e;
    --pg-gold-d:    #a07840;
    --pg-blue:      #3d5a80;
    --pg-blue-l:    #a0b4c8;
    --pg-text:      #e8e4d8;
    --pg-text-dim:  #a0b4c8;
    --pg-green:     #5a9a5a;
    --pg-green-l:   #7ec87e;
    --pg-red:       #e84040;
    --pg-red-d:     #c85050;
    --pg-radius:    14px;
    --pg-shadow:    0 4px 20px rgba(0,0,0,.35);
}

/* ── RESET + BASE ──────────────────────────────────────────── */
* { box-sizing: border-box; }

#pg16-app {
    font-family: 'Lora', serif;
    background: transparent;
    min-height: auto;
    max-width: 640px;
    margin: 0 auto;
    color: var(--pg-text);
}

/* ── UTILITY ───────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── SCREENS ───────────────────────────────────────────────── */
.pg16-screen         { display: none; }
.pg16-screen.active  { display: block; }

/* ── HOME HEADER ───────────────────────────────────────────── */
.pg16-header {
    text-align: center;
    padding: 24px 24px 16px;
}
.pg16-logo {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
}
.pg16-subtitle {
    color: var(--pg-text-dim);
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}
.pg16-subtitle em { color: var(--pg-gold); font-style: normal; font-family: 'Cinzel', serif; letter-spacing: 1px; }

/* ── LESSON GRID ───────────────────────────────────────────── */
.pg16-lessons-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 20px;
}
.pg16-lesson-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pg-dark2);
    border: 1.5px solid var(--pg-blue);
    border-radius: var(--pg-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.pg16-lesson-card:hover {
    border-color: var(--pg-gold);
    box-shadow: 0 4px 16px rgba(200,169,110,.15);
    transform: translateY(-2px);
}
.pg16-lesson-card.completed {
    border-color: var(--pg-green);
    background: #1a2e1a;
}
.pg16-lesson-num {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pg-blue), var(--pg-dark3));
    border: 2px solid var(--pg-blue);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 700; font-size: 1rem;
    color: var(--pg-text);
}
.pg16-lesson-card.completed .pg16-lesson-num {
    background: linear-gradient(135deg, var(--pg-green), #3a6a3a);
    border-color: var(--pg-green);
}
.pg16-lesson-info    { flex: 1; min-width: 0; }
.pg16-lesson-title   { font-weight: 600; font-size: .88rem; line-height: 1.3; color: var(--pg-text); }
.pg16-lesson-count   { color: var(--pg-text-dim); font-size: .75rem; margin-top: 3px; }
.pg16-lesson-progress { width: 80px; text-align: right; }
.pg16-progress-bar   { height: 5px; background: var(--pg-dark1); border-radius: 3px; overflow: hidden; }
.pg16-progress-fill  {
    height: 100%; background: var(--pg-blue); border-radius: 3px;
    width: 0%; transition: width .5s ease;
}
.pg16-lesson-card.completed .pg16-progress-fill { background: var(--pg-green); }
.pg16-progress-label { font-size: .7rem; color: var(--pg-text-dim); }
.pg16-lesson-arrow   { font-size: 1.4rem; color: var(--pg-blue); flex-shrink: 0; }

/* ── STATS PANEL ───────────────────────────────────────────── */
.pg16-stats-panel {
    margin: 0 16px 24px;
    background: var(--pg-dark2);
    border: 1px solid var(--pg-blue);
    border-radius: var(--pg-radius);
    padding: 16px 20px;
    text-align: center;
}
.pg16-stats-panel h3 {
    font-family: 'Cinzel', serif;
    font-size: .9rem;
    letter-spacing: 1.5px;
    color: var(--pg-gold);
    margin: 0 0 12px;
}
#pg16-global-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.pg16-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pg16-stat span {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem; font-weight: 700;
    color: var(--pg-gold); line-height: 1;
}
.pg16-stat small { font-size: .7rem; color: var(--pg-text-dim); letter-spacing: .5px; }

/* ── LESSON HEADER ─────────────────────────────────────────── */
.pg16-lesson-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 8px;
    flex-wrap: wrap;
}
.pg16-back-btn, .pg16-grammar-btn {
    background: var(--pg-dark2);
    border: 1.5px solid var(--pg-blue);
    border-radius: 10px;
    padding: 8px 14px;
    font-family: 'Cinzel', serif;
    font-size: .78rem; letter-spacing: .5px;
    cursor: pointer; color: var(--pg-text-dim);
    transition: all .15s;
}
.pg16-back-btn:hover    { border-color: var(--pg-gold); color: var(--pg-gold); }
.pg16-grammar-btn       { margin-left: auto; }
.pg16-grammar-btn:hover { background: var(--pg-gold); color: var(--pg-dark1); border-color: var(--pg-gold); }
#pg16-lesson-screen-title {
    flex: 1; min-width: 120px; margin: 0;
    font-family: 'Cinzel', serif;
    font-size: .82rem; letter-spacing: .5px;
    color: var(--pg-text);
}

/* ── GRAMMAR PANEL ─────────────────────────────────────────── */
.pg16-grammar-panel {
    margin: 0 16px 12px;
    background: #12201a;
    border: 1.5px solid #3a7a4a66;
    border-radius: var(--pg-radius);
    padding: 14px 14px;
    font-size: .85rem; line-height: 1.7;
    color: var(--pg-text-dim);
}
.pg16-grammar-panel h3 { margin: 0 0 10px; color: var(--pg-gold); font-family: 'Cinzel', serif; font-size: .9rem; }
.pg16-grammar-panel .pg16-grammar-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0;
}
.pg16-grammar-panel table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: .78rem;
}
.pg16-grammar-panel th {
    background: var(--pg-dark3);
    padding: 6px 7px; text-align: left;
    border: 1px solid var(--pg-blue);
    color: var(--pg-gold); font-family: 'Cinzel', serif; font-size: .7rem;
    white-space: nowrap;
}
.pg16-grammar-panel td {
    padding: 5px 7px; border: 1px solid #3d5a8033;
    color: var(--pg-text); white-space: nowrap;
}
.pg16-grammar-panel p  { margin: 6px 0; font-size: .82rem; }
.pg16-grammar-panel b  { color: var(--pg-text); }

/* ── EXERCISE PROGRESS BAR ─────────────────────────────────── */
.pg16-exercise-progress {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 16px 8px;
}
.pg16-ex-counter {
    font-family: 'Cinzel', serif;
    font-size: .72rem; color: var(--pg-text-dim);
    white-space: nowrap; letter-spacing: .5px;
}
.pg16-ex-progressbar {
    flex: 1; height: 6px; background: var(--pg-dark2);
    border-radius: 3px; overflow: hidden;
    border: 1px solid var(--pg-blue);
}
.pg16-ex-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pg-blue), var(--pg-gold));
    border-radius: 3px; width: 0%;
    transition: width .5s ease;
}

/* ── TIMELINE ──────────────────────────────────────────────── */
.pg16-timeline {
    position: relative;
    margin: 0 32px 12px;
    height: 52px;
    display: flex;
    align-items: flex-end;
}
.pg16-tl-track {
    position: absolute;
    left: 0; right: 0; bottom: 20px; height: 3px;
    background: linear-gradient(90deg, #6a3f9a, var(--pg-blue), #9a6a3f);
    border-radius: 2px;
}
.pg16-tl-dot {
    position: absolute;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; bottom: 14px;
    transform: translateX(-50%);
    transition: all .3s;
}
.pg16-tl-dot:nth-child(2) { left: 0%;   transform: none; }
.pg16-tl-dot:nth-child(3) { left: 50%;  transform: translateX(-50%); }
.pg16-tl-dot:nth-child(4) { right: 0%;  transform: none; }
.pg16-tl-pip {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ffffff22;
    border: 2px solid #ffffff33;
    transition: all .3s;
}
.pg16-tl-dot.active .pg16-tl-pip {
    background: var(--pg-red);
    border-color: var(--pg-red);
    box-shadow: 0 0 10px rgba(232,64,64,.6);
}
.pg16-tl-dot span {
    font-family: 'Cinzel', serif;
    font-size: 7px; letter-spacing: 1.2px;
    color: #ffffff33; transition: color .3s;
}
.pg16-tl-dot.active span { color: var(--pg-text); font-weight: 700; }
.pg16-tl-arrow {
    position: absolute;
    bottom: 26px;
    font-size: 12px; color: var(--pg-red);
    transition: left .5s cubic-bezier(0.34,1.56,0.64,1);
    text-shadow: 0 2px 6px rgba(232,64,64,.5);
    line-height: 1; left: calc(50% - 6px);
}

/* ── EXERCISE CARD ─────────────────────────────────────────── */
.pg16-exercise-card {
    margin: 0 16px;
    background: var(--pg-dark2);
    border: 1.5px solid var(--pg-blue);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--pg-shadow);
}

/* Task badge */
.pg16-task-badge {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: .7rem; letter-spacing: 1.5px;
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 14px;
}
.badge-affirm   { background: #2a3f5a44; border: 1px solid var(--pg-blue); color: var(--pg-blue-l); }
.badge-neg      { background: #5a2a2a44; border: 1px solid var(--pg-red-d); color: #e08888; }
.badge-question { background: #3a3a2a44; border: 1px solid var(--pg-gold); color: var(--pg-gold); }

/* Ukrainian sentence */
.pg16-ua-sentence {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pg-text);
    line-height: 1.35;
    margin-bottom: 18px;
    min-height: 48px;
}

/* ── ANSWER AREA ───────────────────────────────────────────── */
.pg16-answer-area {
    min-height: 58px;
    background: var(--pg-dark1);
    border: 2px dashed #3d5a8055;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    transition: all .3s;
}
.pg16-answer-area.has-words { border-style: solid; border-color: var(--pg-blue); background: #162030; }
.pg16-answer-area.correct   { border-color: var(--pg-green); background: #1a2e1a; box-shadow: 0 0 20px rgba(90,154,90,.25); }
.pg16-answer-area.wrong     { border-color: var(--pg-red-d); background: #2a1515; }
.pg16-answer-placeholder    { color: #3d5a8066; font-size: .85rem; font-style: italic; width: 100%; text-align: center; }
.pg16-answer-word {
    background: var(--pg-red);
    color: #fff;
    padding: 5px 12px; border-radius: 8px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
    user-select: none; letter-spacing: .3px;
    border: 1px solid rgba(232,64,64,.3);
}
.pg16-answer-area.correct .pg16-answer-word {
    background: var(--pg-green);
    border-color: rgba(90,154,90,.3);
    cursor: default;
}
.pg16-answer-word:hover { background: var(--pg-red-d); transform: scale(.97); }
.pg16-answer-area.correct .pg16-answer-word:hover { background: var(--pg-green); transform: none; }

/* ── FEEDBACK ──────────────────────────────────────────────── */
.pg16-feedback {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: .82rem; letter-spacing: .5px;
    min-height: 22px;
    margin-bottom: 8px;
    transition: all .2s;
}
.pg16-feedback.correct  { color: var(--pg-green-l); }
.pg16-feedback.wrong    { color: #e08888; }
.pg16-feedback.hint     { color: var(--pg-gold); }

/* ── WORD BANK ─────────────────────────────────────────────── */
.pg16-word-bank {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0 4px;
}
.pg16-bank-word {
    font-family: 'Lora', serif;
    font-weight: 600; font-size: .9rem;
    padding: 11px 8px; border-radius: 12px;
    min-height: 50px;
    cursor: pointer;
    border: 2px solid var(--pg-blue);
    background: linear-gradient(145deg, var(--pg-dark3), #1e2f45);
    color: var(--pg-text);
    box-shadow: 0 3px 10px rgba(0,0,0,.3), inset 0 1px 0 #ffffff10;
    transition: all .15s;
    letter-spacing: .3px;
    -webkit-tap-highlight-color: transparent;
}
.pg16-bank-word:hover:not(.used) {
    border-color: var(--pg-gold);
    background: linear-gradient(145deg, #3a4f6a, #2a3f55);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.pg16-bank-word.used {
    background: linear-gradient(145deg, #151e2b, #111827);
    border-color: #2a3f5a33;
    color: #ffffff18; opacity: .45;
    cursor: default; pointer-events: none;
    box-shadow: none;
}

/* ── ACTION BUTTONS ────────────────────────────────────────── */
.pg16-exercise-actions {
    display: flex; gap: 8px; justify-content: center;
    margin-top: 18px; flex-wrap: wrap;
}
.pg16-btn {
    font-family: 'Cinzel', serif;
    border: none; border-radius: 10px;
    padding: 10px 18px; font-size: .78rem; letter-spacing: 1px;
    font-weight: 700; cursor: pointer; transition: all .15s;
}
.pg16-btn:disabled { opacity: .4; pointer-events: none; }
.pg16-btn-hint  { background: #2a2a1a; color: var(--pg-gold); border: 1px solid #c8a96e44; }
.pg16-btn-hint:hover { background: #3a3a1a; }
.pg16-btn-clear { background: #2a1515; color: #e08888; border: 1px solid var(--pg-red-d); }
.pg16-btn-clear:hover { background: #3a1515; }
.pg16-btn-check { background: linear-gradient(135deg, var(--pg-blue), #2a3f5a); color: var(--pg-text); padding: 10px 28px; }
.pg16-btn-check:hover:not(:disabled) { background: linear-gradient(135deg, #4a6a90, var(--pg-blue)); transform: translateY(-1px); }
.pg16-btn-primary { background: linear-gradient(135deg, var(--pg-green), #3a6a3a); color: #fff; padding: 10px 28px; }
.pg16-btn-primary:hover { background: linear-gradient(135deg, #6aaa6a, var(--pg-green)); }

/* ── LESSON COMPLETE ───────────────────────────────────────── */
.pg16-lesson-complete {
    text-align: center;
    padding: 48px 24px;
}
.pg16-complete-icon { font-size: 72px; margin-bottom: 16px; }
.pg16-lesson-complete h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem; letter-spacing: 2px;
    color: var(--pg-gold); margin: 0 0 16px;
}
#pg16-complete-stats {
    font-size: 1rem; color: var(--pg-text-dim);
    margin-bottom: 28px; line-height: 2;
}
#pg16-complete-stats div:first-child { font-size: 1.6rem; }
#pg16-complete-stats b { color: var(--pg-text); }
.pg16-lesson-complete .pg16-btn { margin: 0 6px; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-7px); }
    30%      { transform: translateX(7px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(3px); }
}
.pg16-answer-area.shake { animation: shake 0.45s ease; }

/* ── SCROLLBAR ─────────────────────────────────────────────── */
#pg16-app ::-webkit-scrollbar       { width: 4px; }
#pg16-app ::-webkit-scrollbar-thumb { background: var(--pg-blue); border-radius: 2px; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pg16-exercise-card   { padding: 16px; }
    .pg16-ua-sentence     { font-size: 1.2rem; }
    .pg16-word-bank       { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pg16-bank-word       { font-size: .83rem; padding: 9px 6px; min-height: 44px; }
    .pg16-lesson-header   { gap: 6px; }
    #pg16-lesson-screen-title { font-size: .75rem; }
    .pg16-grammar-btn     { font-size: .72rem; padding: 7px 10px; }
    .pg16-title           { font-size: 1.5rem; }
}