/* More polished theme + animations */
:root{--bg1:#f6f8ff;--bg2:#eef7f9;--card:#ffffff;--muted:#6b7280;--accent1:#5b8cff;--accent2:#6ee7b7;--glass:rgba(255,255,255,0.6)}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;display:flex;align-items:flex-start;justify-content:center;margin:0;padding:20px;background:linear-gradient(135deg,var(--bg1),var(--bg2));}
.wrap{width:100%;max-width:900px}
.card{width:100%;max-width:720px;background:linear-gradient(180deg,var(--glass),rgba(250,250,255,0.9));backdrop-filter:blur(8px);border-radius:14px;padding:20px;box-shadow:0 12px 40px rgba(12,38,63,0.14);border:1px solid rgba(20,40,80,0.06);transform:translateY(6px);transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(0);box-shadow:0 20px 60px rgba(12,38,63,0.18)}
h2{margin:0 0 8px 0;font-weight:700;color:#0f172a}
.subtitle{color:var(--muted);margin-bottom:14px}
/* mobile-first: stack controls vertically */
.controls{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-bottom:14px}
label{font-weight:600;color:#111827;margin-right:6px}
select,button{height:44px;border-radius:12px;border:none;background:#f3f4f6;padding:0 12px;font-weight:600;transition:transform .18s ease,box-shadow .18s ease;width:100%}
select{min-width:0}
#start{background:linear-gradient(90deg,var(--accent1),#7aa9ff);color:#fff;box-shadow:0 6px 18px rgba(91,140,255,0.18)}
/* single-column by default for vertical layout */
.verb-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.verb-grid div{background:linear-gradient(180deg,#fff,#fbfdff);padding:12px;border-radius:12px;border:1px solid rgba(15,23,42,0.04);display:flex;align-items:center;justify-content:space-between;gap:8px}
.hidden-input{width:100%;padding:12px;font-size:16px;border-radius:12px;border:1px solid rgba(15,23,42,0.06);transition:box-shadow .15s ease,border-color .15s ease;box-sizing:border-box}
.hidden-input:focus{box-shadow:0 6px 18px rgba(91,140,255,0.12);border-color:rgba(91,140,255,0.3);outline:none}
.button-slot{display:inline-block}
#action{background:linear-gradient(90deg,var(--accent1),#7aa9ff);color:#fff;border-radius:12px;border:none;padding:10px 18px;font-weight:800;letter-spacing:.2px;box-shadow:0 10px 26px rgba(91,140,255,0.14);transition:transform .12s ease,box-shadow .12s ease}
#action:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(91,140,255,0.18)}
#action[data-state="next"]{background:linear-gradient(90deg,var(--accent2),#34d399);color:#05323d}
#action:disabled{opacity:0.5}
.result-badge{display:inline-block;padding:8px 12px;border-radius:999px;font-weight:700;margin-left:12px;transform-origin:center;animation:pop .28s cubic-bezier(.2,.9,.2,1)}
.result-badge.ok{background:rgba(16,185,129,0.12);color:#059669}
.result-badge.bad{background:rgba(239,68,68,0.08);color:#b91c1c}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.inf-meaning{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:16px 0}
.inf-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px}
.inf-pair{display:flex;flex-direction:column;align-items:center;gap:6px}
.infinitive{font-size:42px;font-weight:900;color:#071033;letter-spacing:0.3px;text-shadow:0 6px 22px rgba(7,16,51,0.06);line-height:1}
.infinitive::after{content:"";display:block;width:72px;height:5px;border-radius:6px;margin:10px auto 0;background:linear-gradient(90deg,var(--accent1),#7aa9ff);opacity:0.95}
.meaning{font-size:15px;color:var(--muted);margin-top:4px;font-weight:600;font-style:italic;opacity:0.95}

@media(max-width:480px){
    .infinitive{font-size:32px}
    .infinitive::after{width:56px;height:4px}
    .meaning{font-size:14px}
}
.score{float:right;font-weight:700;color:#111827}
.progress-wrap{height:8px;background:rgba(12,20,30,0.06);border-radius:999px;margin-top:12px;overflow:hidden}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#7aa9ff,#5b8cff);transition:width .35s cubic-bezier(.2,.9,.2,1)}
.meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* wider screens: use two-column grid and row controls */
@media(min-width:700px){
    .verb-grid{grid-template-columns:1fr 1fr}
    .controls{flex-direction:row;align-items:center}
    select,button{width:auto}
    .button-slot{display:inline-block}
    .score{float:right}
}

@media(max-width:700px){
    .score{float:none;margin-top:8px}
}

/* buttons near the answer */
#showBtn,#correctBtn,#wrongBtn{height:36px;padding:8px 12px;border-radius:10px;font-weight:700}
#showBtn{background:#eef2ff;color:#123;border:none}
#correctBtn{background:#10b981;color:#fff;border:none}
#wrongBtn{background:#ef4444;color:#fff;border:none}

/* value spans — allow natural width (no fixed width) but keep visual transitions */
#presentVal,#pastVal,#supineVal{display:inline-block;padding:6px 8px;box-sizing:border-box;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .18s ease,box-shadow .18s ease,opacity .12s ease}

/* reveal modifies background/shadow only (no padding changes) */
.reveal{background:linear-gradient(90deg,#fff7cc,#fff1b8);box-shadow:0 6px 18px rgba(250,200,60,0.08);border-radius:8px;font-weight:800;transition:background .2s ease,box-shadow .2s ease}

/* blank highlight for prepositions exercise */
.blank{padding:4px 8px;border-radius:8px;display:inline-block;min-width:80px;text-align:center;white-space:nowrap}
.blank.ok{background:#10b981;color:#fff;box-shadow:0 6px 18px rgba(16,185,129,0.12);font-weight:800}
.blank.bad{background:#ef4444;color:#fff;box-shadow:0 6px 18px rgba(239,68,68,0.12);font-weight:800}

/* choice buttons feedback */
.choice-btn.ok{background:#10b981;color:#fff;border:none;box-shadow:0 8px 26px rgba(16,185,129,0.12)}
.choice-btn.bad{background:#ef4444;color:#fff;border:none;box-shadow:0 8px 26px rgba(239,68,68,0.12)}
.choice-btn:disabled{opacity:0.85}

/* Category selector styles */
.category-selector{margin-bottom:1rem}
.category-label{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.category-card{position:relative;cursor:pointer}
.category-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.category-content{background:linear-gradient(180deg,#fff,#fbfdff);border:2px solid rgba(15,23,42,0.08);border-radius:14px;padding:16px 12px;text-align:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;gap:6px;min-height:110px;justify-content:center}
.category-card:hover .category-content{transform:translateY(-4px) scale(1.02);border-color:rgba(91,140,255,0.4);box-shadow:0 12px 32px rgba(91,140,255,0.15)}
.category-card:active .category-content{transform:translateY(-1px) scale(0.98)}
.category-card input[type="radio"]:checked + .category-content{background:linear-gradient(180deg,#5b8cff,#7aa9ff);border-color:#5b8cff;box-shadow:0 16px 40px rgba(91,140,255,0.35);transform:translateY(-4px) scale(1.05);animation:selectCategory .3s cubic-bezier(.34,1.56,.64,1)}
.category-card input[type="radio"]:checked + .category-content .category-icon{transform:scale(1.2);animation:iconPop .4s cubic-bezier(.34,1.56,.64,1) .1s}
.category-card input[type="radio"]:disabled + .category-content{opacity:0.5;cursor:not-allowed;pointer-events:none}
.category-icon{font-size:32px;line-height:1;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.category-name{font-size:15px;font-weight:700;color:#0f172a;transition:color .3s ease;line-height:1.2}
.category-preps{font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;opacity:0.8;transition:color .3s ease,opacity .3s ease;line-height:1.3;text-align:center}
.category-card input[type="radio"]:checked + .category-content .category-preps{color:rgba(255,255,255,0.9);opacity:0.95}
.category-card input[type="radio"]:checked + .category-content .category-name{color:#fff;font-weight:800}
@keyframes selectCategory{
    0%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.08)}
    100%{transform:translateY(-4px) scale(1.05)}
}
@keyframes iconPop{
    0%{transform:scale(1)}
    50%{transform:scale(1.4)}
    100%{transform:scale(1.2)}
}
@media(max-width:480px){
    .category-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .category-content{padding:14px 10px;min-height:100px}
    .category-icon{font-size:28px}
    .category-name{font-size:13px}
    .category-preps{font-size:9px}
    .category-card:active .category-content{transform:translateY(-2px) scale(1.03);border-color:rgba(91,140,255,0.5);box-shadow:0 8px 24px rgba(91,140,255,0.2)}
    .category-card input[type="radio"]:checked + .category-content{animation:selectCategoryMobile .5s cubic-bezier(.34,1.56,.64,1)}
    .category-card input[type="radio"]:checked + .category-content .category-icon{animation:iconPopMobile .5s cubic-bezier(.34,1.56,.64,1) .1s}
}
@keyframes selectCategoryMobile{
    0%{transform:translateY(0) scale(1)}
    40%{transform:translateY(-8px) scale(1.1)}
    70%{transform:translateY(-5px) scale(1.07)}
    100%{transform:translateY(-4px) scale(1.05)}
}
@keyframes iconPopMobile{
    0%{transform:scale(1)}
    50%{transform:scale(1.5)}
    100%{transform:scale(1.2)}
}

/* Noun practice styles */
.noun-practice-header{background:linear-gradient(135deg,rgba(91,140,255,0.08),rgba(110,231,183,0.06));border-radius:12px;padding:16px 20px;margin-bottom:20px;border:1px solid rgba(91,140,255,0.12)}
.noun-practice-title{font-size:15px;font-weight:700;color:#0f172a;margin:0;letter-spacing:0.3px}
.noun-practice-score{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#5b8cff,#7aa9ff);color:#fff;padding:8px 16px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:0 6px 20px rgba(91,140,255,0.2);transition:transform .2s ease,box-shadow .2s ease}
.noun-practice-score:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(91,140,255,0.25)}
.noun-practice-score-icon{font-size:16px;line-height:1}

/* Level selector styles */
.level-selector{margin-bottom:8px}
.level-label{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.level-card{position:relative;cursor:pointer;display:block}
.level-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.level-content{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:2px solid rgba(15,23,42,0.08);border-radius:16px;padding:20px 16px;text-align:center;transition:all .3s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;align-items:center;gap:8px;min-height:100px;justify-content:center;box-shadow:0 2px 8px rgba(15,23,42,0.04)}
.level-card:hover .level-content{transform:translateY(-4px);border-color:rgba(91,140,255,0.4);box-shadow:0 8px 30px rgba(91,140,255,0.15)}
.level-card:active .level-content{transform:scale(0.97)}
.level-card input[type="radio"]:checked + .level-content{background:linear-gradient(135deg,#5b8cff 0%,#7aa9ff 100%);border-color:#5b8cff;box-shadow:0 12px 35px rgba(91,140,255,0.3);transform:translateY(-4px)}
.level-number{font-size:32px;font-weight:800;color:#0f172a;line-height:1;transition:color .25s ease}
.level-desc{font-size:14px;font-weight:600;color:var(--muted);margin-top:4px;opacity:0.85;transition:color .25s ease;line-height:1.3;text-align:center}
.level-card input[type="radio"]:checked + .level-content .level-number{color:#fff}
.level-card input[type="radio"]:checked + .level-content .level-desc{color:rgba(255,255,255,0.95)}
@media(max-width:480px){.level-grid{grid-template-columns:repeat(3,1fr);gap:10px}.level-content{padding:16px 10px;min-height:85px}.level-number{font-size:26px}.level-desc{font-size:12px}}

/* Button styles for preposition exercise */
.controls-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-primary{background:linear-gradient(90deg,var(--accent1),#7aa9ff);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-weight:700;font-size:15px;letter-spacing:0.3px;box-shadow:0 8px 24px rgba(91,140,255,0.2);transition:all .2s cubic-bezier(.2,.9,.2,1);cursor:pointer;min-height:44px}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px rgba(91,140,255,0.3)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn-secondary{background:#fff;color:#0f172a;border:2px solid rgba(15,23,42,0.12);border-radius:12px;padding:12px 20px;font-weight:700;font-size:15px;letter-spacing:0.3px;transition:all .2s cubic-bezier(.2,.9,.2,1);cursor:pointer;min-height:44px;box-shadow:0 2px 8px rgba(15,23,42,0.06)}
.btn-secondary:hover{background:#f8fafc;border-color:rgba(15,23,42,0.2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,0.1)}
.btn-secondary:active{transform:translateY(0)}
.btn-retry{background:linear-gradient(90deg,#f59e0b,#f97316);color:#fff;border:none;border-radius:12px;padding:12px 20px;font-weight:700;font-size:15px;letter-spacing:0.3px;box-shadow:0 8px 24px rgba(245,158,11,0.25);transition:all .2s cubic-bezier(.2,.9,.2,1);cursor:pointer;min-height:44px}
.btn-retry:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(245,158,11,0.35)}
.btn-retry:active{transform:translateY(0)}
@media(max-width:480px){.controls-row{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary,.btn-retry{width:100%}}