/* ── LearnyPlay Grammatica Italiana ───────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap');

:root {
    --it-bg:      #0f1535;
    --it-surface: #1a2555;
    --it-card:    #1f2d50;
    --it-text:    #e8f0fe;
    --it-muted:   #7a90b0;
    --it-label:   #a8bdd8;
    --it-yellow:  #FFD93D;
    --it-green:   #55efc4;
    --it-red:     #ff4757;
    --it-radius:  16px;
    --it-font-h:  'Fredoka One', cursive;
    --it-font-b:  'Nunito', sans-serif;
    --it-shadow:  0 20px 60px rgba(0,0,0,.5);
}

/* ── WRAPPER ─────────────────────────────────────────────── */
.lypi-wrapper {
    font-family: var(--it-font-b);
    background:  var(--it-bg);
    border-radius: 24px;
    max-width: 680px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: var(--it-shadow);
    color: var(--it-text);
    position: relative;
    min-height: 540px;
}
.lypi-screen { display:none; padding:28px 24px 32px; animation:it-fadeIn .3s ease; min-height:540px; }
.lypi-screen.active { display:block; }
@keyframes it-fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── SFONDO ──────────────────────────────────────────────── */
.lypi-stars-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:24px; }
.lypi-stars-bg::before { content:''; position:absolute; width:2px; height:2px; border-radius:50%; background:white; box-shadow:40px 30px 0 white,120px 80px 0 white,220px 40px 0 white,320px 120px 0 white,80px 180px 0 white,400px 60px 0 white,500px 150px 0 white,60px 260px 0 white,180px 300px 0 white,280px 240px 0 white,450px 280px 0 white,350px 340px 0 white,150px 380px 0 white,520px 380px 0 white,240px 440px 0 white; opacity:.4; }

/* ── HOME ────────────────────────────────────────────────── */
.lypi-home-content { position:relative; z-index:1; }
.lypi-logo { display:flex; align-items:center; gap:14px; margin-bottom:8px; justify-content:center; }
.lypi-logo-icon { font-size:52px; animation:lypi-bounce 2s infinite ease-in-out; }
@keyframes lypi-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.lypi-title { font-family:var(--it-font-h); font-size:34px; margin:0; line-height:1.1; color:#fff; }
.lypi-title span { color:var(--it-yellow); }
.lypi-subtitle { color:var(--it-muted); font-size:15px; margin:0 0 22px; text-align:center; }

/* ── GRIGLIA CATEGORIE ───────────────────────────────────── */
.lypi-cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.lypi-cat-card {
    background: var(--it-card);
    border: 2px solid rgba(255,255,255,.06);
    border-left: 4px solid var(--cc, #A29BFE);
    border-radius: var(--it-radius);
    padding: 14px 14px 10px;
    display: flex; flex-direction: column; gap: 10px;
    transition: background .18s;
}
.lypi-cat-card:hover { background: #2a3880; }
.lypi-cat-top {
    display: flex; flex-direction: column; gap: 3px;
}
.lypi-cat-icon   { font-size:26px; }
.lypi-cat-label  { font-family:var(--it-font-h); font-size:16px; color:#fff; }
.lypi-cat-medal  { font-size:18px; min-height:22px; }
.lypi-cat-stars  { font-size:10px; letter-spacing:1px; white-space:nowrap; overflow:hidden; }
.lypi-cat-actions { display:flex; gap:6px; }
.lypi-cat-btn-learn,
.lypi-cat-btn-play {
    flex:1; border:none; border-radius:10px;
    font-family:var(--it-font-b); font-size:12px; font-weight:700;
    padding:6px 4px; cursor:pointer; transition:transform .15s, opacity .15s;
    white-space:nowrap;
}
.lypi-cat-btn-learn {
    background:rgba(255,255,255,.1); color:var(--it-text);
}
.lypi-cat-btn-learn:hover { background:rgba(255,255,255,.2); }
.lypi-cat-btn-play {
    background:linear-gradient(135deg, var(--cc,#A29BFE), color-mix(in srgb, var(--cc,#A29BFE) 70%, #fff));
    color:#fff;
    box-shadow:0 2px 8px color-mix(in srgb, var(--cc,#A29BFE) 40%, transparent);
}
.lypi-cat-btn-play:hover { transform:scale(1.05); }

/* ── SCORE BAR ───────────────────────────────────────────── */
.lypi-score-bar {
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(255,255,255,.06); border-radius:12px;
    padding:10px 16px; font-size:15px; font-weight:700; margin-top:16px;
}
.lypi-btn-small {
    background:rgba(255,255,255,.1); border:none; color:var(--it-text);
    font-family:var(--it-font-b); font-size:13px; font-weight:700;
    padding:5px 12px; border-radius:20px; cursor:pointer; transition:background .2s;
}
.lypi-btn-small:hover { background:rgba(255,255,255,.2); }

/* ── BACK BTN ────────────────────────────────────────────── */
.lypi-back-btn {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    color:var(--it-text); font-family:var(--it-font-b); font-weight:700;
    font-size:14px; padding:7px 14px; border-radius:30px;
    cursor:pointer; margin-bottom:18px; display:inline-block; transition:background .2s;
}
.lypi-back-btn:hover { background:rgba(255,255,255,.2); }

/* ── IMPARA ──────────────────────────────────────────────── */
.lypi-learn-content { display:flex; flex-direction:column; gap:14px; }
.lypi-learn-heading { font-family:var(--it-font-h); font-size:24px; color:#fff; margin:0; }
.lypi-learn-intro   { color:var(--it-label); font-size:14px; margin:0; line-height:1.6; }
.lypi-rules-list    { display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; padding-right:4px; }
.lypi-rule-block {
    background: var(--it-card);
    border-radius: 12px;
    padding: 14px 16px;
    animation: it-fadeIn .4s ease both;
}
.lypi-rule-title    { font-family:var(--it-font-h); font-size:16px; color:var(--it-yellow); margin-bottom:6px; }
.lypi-rule-text     { font-size:14px; color:var(--it-text); line-height:1.6; margin-bottom:8px; }
.lypi-rule-esempi   { display:flex; flex-direction:column; gap:4px; }
.lypi-rule-esempio  { font-size:13px; color:var(--it-label); background:rgba(255,255,255,.05); border-radius:8px; padding:5px 10px; }

.lypi-btn-primary {
    background:linear-gradient(135deg,#A29BFE,#6c63ff);
    border:none; border-radius:14px; color:#fff;
    font-family:var(--it-font-h); font-size:18px;
    padding:12px 24px; cursor:pointer; transition:transform .15s;
    box-shadow:0 4px 16px rgba(162,155,254,.4);
}
.lypi-btn-primary:hover { transform:scale(1.04); }
.lypi-btn-secondary {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    color:var(--it-text); font-family:var(--it-font-h); font-size:18px;
    padding:12px 24px; border-radius:14px; cursor:pointer; transition:background .2s;
}
.lypi-btn-secondary:hover { background:rgba(255,255,255,.2); }
.lypi-btn-fullwidth { width:100%; margin-top:4px; text-align:center; }

/* ── QUIZ ────────────────────────────────────────────────── */
.lypi-quiz-content { display:flex; flex-direction:column; gap:16px; }
.lypi-quiz-header  { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; }
.lypi-quiz-cat     { font-family:var(--it-font-h); font-size:16px; color:#fff; }
.lypi-quiz-progress{ font-size:13px; color:var(--it-muted); }
.lypi-quiz-stars-row{ display:flex; gap:3px; font-size:16px; }
.lypi-star-dot     { transition:transform .2s; }
.lypi-star-dot.earned { transform:scale(1.3); }

.lypi-question-box {
    background: linear-gradient(135deg, var(--it-card), #263660);
    border:2px solid rgba(255,255,255,.08);
    border-radius:18px; padding:22px 20px;
    min-height:90px; display:flex; align-items:center; justify-content:center;
}
.lypi-question-text {
    font-family:var(--it-font-h); font-size:20px; color:#fff;
    text-align:center; line-height:1.4;
}

.lypi-answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* Durante il reset: nasconde il container per evitare bordi residui tra domande */
.lypi-answers-clearing { visibility:hidden; }
/* Nessun outline di focus visibile sui bottoni risposta */
.lypi-answer-btn:focus { outline:none; }
.lypi-answer-btn:focus-visible { outline:none; }
.lypi-answer-btn {
    background:var(--it-card); border:2px solid rgba(255,255,255,.1);
    border-radius:12px; color:var(--it-text);
    font-family:var(--it-font-b); font-size:14px; font-weight:700;
    padding:12px 10px; cursor:pointer; text-align:left; line-height:1.4;
    transition:background .15s, border-color .15s, transform .1s;
}
.lypi-answer-btn:hover:not(:disabled)  { background:#263660; border-color:rgba(162,155,254,.5); transform:scale(1.02); }
.lypi-answer-btn:disabled { cursor:default; pointer-events:none; -webkit-tap-highlight-color:transparent; }
.lypi-answer-btn.lypi-answer-correct { background:rgba(85,239,196,.2); border-color:var(--it-green); color:var(--it-green); }
.lypi-answer-btn.lypi-answer-wrong   { background:rgba(255,71,87,.18); border-color:var(--it-red);   color:var(--it-red); }

.lypi-feedback { font-size:14px; font-weight:700; min-height:20px; text-align:center; }
.lypi-feedback-ok  { color:var(--it-green); }
.lypi-feedback-err { color:var(--it-red); }

/* ── RISULTATO ───────────────────────────────────────────── */
.lypi-result-content { text-align:center; padding-top:12px; }
.lypi-result-trophy  { font-size:72px; margin-bottom:12px; }
.lypi-result-title   { font-family:var(--it-font-h); font-size:28px; color:#fff; margin:0 0 8px; }
.lypi-result-stars   { font-size:20px; letter-spacing:2px; margin-bottom:10px; }
.lypi-result-msg     { color:var(--it-label); font-size:15px; margin:0 0 14px; }
.lypi-result-record-badge {
    display:inline-block; background:rgba(255,217,61,.15);
    border:1px solid rgba(255,217,61,.4); border-radius:12px;
    padding:6px 16px; font-size:14px; font-weight:700;
    color:var(--it-yellow); margin-bottom:14px;
}
.lypi-result-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Confetti */
.lypi-confetti { position:relative; height:0; overflow:visible; }
@keyframes lypi-confetti-fall { to{transform:translateY(500px) rotate(720deg);opacity:0} }
.lypi-confetti-piece { position:absolute; border-radius:2px; top:-20px; animation:lypi-confetti-fall linear forwards; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:600px) {
    .lypi-screen { padding:18px 14px 24px; }
    .lypi-cat-grid { grid-template-columns:1fr; gap:10px; }
    .lypi-cat-card { flex-direction:row; align-items:center; padding:12px 12px 12px 14px; gap:12px; }
    .lypi-cat-top  { flex:1; }
    .lypi-cat-icon { font-size:22px; }
    .lypi-cat-label{ font-size:15px; }
    .lypi-cat-stars{ font-size:9px; }
    .lypi-cat-actions { flex-direction:column; gap:5px; min-width:80px; }
    .lypi-answers { grid-template-columns:1fr; }
    .lypi-question-text { font-size:17px; }
    .lypi-rule-block { padding:11px 12px; }
    .lypi-rule-title { font-size:14px; }
    .lypi-rule-text  { font-size:13px; }
}

/* ── PULSANTE MUTO ─────────────────────────────────────────── */
/* lyp-mute-btn moved to platform */