/* ═══════════════════════════════════════════════════════════
   LearnyPlay — Calcolo  |  calcolo.css  v1.3.0
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');

/* ── Variabili ───────────────────────────────────────────── */
:root {
    --lypc-bg:        #0f1535;
    --lypc-surface:   #1a2555;
    --lypc-card:      #212e6a;
    --lypc-border:    #2d3f8e;
    --lypc-accent:    #3b82f6;
    --lypc-accent2:   #60a5fa;
    --lypc-green:     #2ECC71;
    --lypc-red:       #E74C3C;
    --lypc-yellow:    #FFD93D;
    --lypc-title:     #FFD93D;
    --lypc-text:      #F0F4FF;
    --lypc-muted:     #a8b4d8;
    --lypc-carry:     #FFD93D;
    --lypc-radius:    18px;
    --lypc-shadow:    0 8px 32px rgba(0,0,0,.45);
    --lypc-font-h:    'Fredoka One', cursive;
    --lypc-font-b:    'Nunito', sans-serif;
}

/* ── Wrapper principale con sfondo proprio ───────────────── */
.lypc-wrapper {
    font-family: var(--lypc-font-b);
    background: var(--lypc-bg);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    min-height: 520px;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: var(--lypc-shadow);
    color: var(--lypc-text);
}

/* Stelle di sfondo */
.lypc-stars-bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
.lypc-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:.35;
}

/* Schermata base */
.lypc-screen {
    display: none;
    padding: 24px 20px 28px;
    position: relative;
    z-index: 1;
    min-height: 520px;
    animation: lypc-in .3s ease;
}
.lypc-screen.active { display: block; }
@keyframes lypc-in { from { opacity:.4; transform:translateY(6px); } to { opacity:1; transform:none; } }

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

/* ── HOME ────────────────────────────────────────────────── */
.lypc-home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 10px;
}
.lypc-home-logo { display:flex; align-items:center; gap:12px; }
.lypc-home-icon { font-size:42px; flex-shrink:0; }
.lypc-home-title {
    font-family: var(--lypc-font-h);
    font-size: 32px;
    margin: 0;
    color: var(--lypc-title);
    line-height: 1;
}
.lypc-home-sub { margin:4px 0 0; color:var(--lypc-muted); font-size:13px; font-weight:600; }
.lypc-home-stats { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; flex-shrink:0; }
.lypc-btn-small {
    background: rgba(255,255,255,.1);
    border: none;
    color: var(--lypc-text);
    font-family: var(--lypc-font-b);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s;
}
.lypc-btn-small:hover { background: rgba(255,255,255,.2); }

/* Griglia livelli */
.lypc-livelli-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media(max-width:420px) { .lypc-livelli-grid { grid-template-columns:1fr; } }

.lypc-livello-card {
    background: var(--lypc-card);
    border: 2px solid rgba(255,255,255,.07);
    border-radius: var(--lypc-radius);
    padding: 18px 16px;
    cursor: pointer;
    transition: transform .18s, border-color .18s;
    position: relative;
    min-height: 110px;
}
.lypc-livello-card:hover { transform:translateY(-3px); border-color:var(--lypc-accent2); }
.lypc-livello-card.locked { opacity:.45; cursor:not-allowed; }
.lypc-livello-card.locked:hover { transform:none; border-color:rgba(255,255,255,.07); }
.lypc-livello-card-icon  { font-size:28px; margin-bottom:6px; display:block; }
.lypc-livello-card-label { font-size:13px; font-weight:800; margin-bottom:5px; line-height:1.3; }
.lypc-livello-card-stars { font-size:12px; color:var(--lypc-yellow); }
.lypc-livello-card-medal { position:absolute; top:12px; right:12px; font-size:18px; }
.lypc-livello-card-lock  { position:absolute; top:12px; right:12px; font-size:16px; opacity:.7; }

/* ── SOTTO-LIVELLI ───────────────────────────────────────── */
.lypc-sl-header { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.lypc-sl-icon  { font-size:38px; }
.lypc-sl-title { font-family:var(--lypc-font-h); font-size:26px; margin:0; color:var(--lypc-title); }
.lypc-sl-sub   { margin:3px 0 0; color:var(--lypc-muted); font-size:13px; font-weight:600; }

.lypc-sl-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.lypc-sl-card {
    background: var(--lypc-card);
    border: 2px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .15s, border-color .15s;
}
.lypc-sl-card:hover { transform:translateX(5px); border-color:var(--lypc-accent2); }
.lypc-sl-card.locked { opacity:.45; cursor:not-allowed; }
.lypc-sl-card.locked:hover { transform:none; border-color:rgba(255,255,255,.07); }
.lypc-sl-card-icon  { font-size:22px; flex-shrink:0; }
.lypc-sl-card-label { font-size:14px; font-weight:700; flex:1; }
.lypc-sl-card-medal { font-size:18px; flex-shrink:0; }
.lypc-sl-card-stars { font-size:12px; color:var(--lypc-yellow); }

/* Sezione Impara */
.lypc-impara-section { margin-top:4px; }
.lypc-impara-heading { font-size:15px; font-weight:800; margin:0 0 12px; color:var(--lypc-accent2); }
.lypc-regola-block {
    background: rgba(59,130,246,.08);
    border-left: 4px solid var(--lypc-accent);
    border-radius: 0 12px 12px 0;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.lypc-regola-titolo { font-size:14px; font-weight:800; margin:0 0 6px; color:var(--lypc-accent2); }
.lypc-regola-testo  { font-size:13px; color:var(--lypc-muted); margin:0 0 8px; line-height:1.6; }
.lypc-regola-esempi {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--lypc-accent2);
    white-space: pre-wrap;
    margin: 0;
}

/* ── HEADER GIOCO ────────────────────────────────────────── */
.lypc-game-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.lypc-game-progress-wrap { flex:1; min-width:100px; }
.lypc-game-progress { font-size:12px; color:var(--lypc-muted); display:block; margin-bottom:4px; font-weight:700; }
.lypc-progress-bar-bg   { background:rgba(255,255,255,.1); border-radius:4px; height:5px; }
.lypc-progress-bar-fill { background:var(--lypc-accent); border-radius:4px; height:5px; width:0; transition:width .35s; }
.lypc-lives-wrap { font-size:20px; letter-spacing:2px; flex-shrink:0; }
.lypc-score-wrap { font-size:14px; font-weight:800; color:var(--lypc-yellow); flex-shrink:0; }
.lypc-game-subtitle { text-align:center; color:var(--lypc-muted); font-size:13px; font-weight:600; margin:6px 0 20px; }

/* ════════════════════════════════════════════════════════════
   RENDERER COLONNA — approccio FLEXBOX
   Struttura HTML per ogni addizione/sottrazione:

   .lypc-op-wrap
     .lypc-carries-row          ← numerini riporto/prestito
     .lypc-num-row              ← riga A
     .lypc-num-row.with-sign    ← riga B (ha .lypc-sign a dx)
     .lypc-divider
     .lypc-num-row.with-sign    ← riga risultato

   Ogni riga è display:flex con i box allineati a DESTRA.
   Il segno è posizionato DOPO i box cifre.
════════════════════════════════════════════════════════════ */
.lypc-op-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 auto 20px;
}

/* Contenitore centrato */
.lypc-op-center {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* Riga numeri */
.lypc-num-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    justify-content: flex-end;
}

/* Riga riporti */
.lypc-carries-row {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: 2px;
    min-height: 22px;
    justify-content: flex-end;
}
.lypc-carry-cell {
    width: 52px;
    min-height: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    color: var(--lypc-carry);
    transition: opacity .25s;
}
/* Cella vuota per il segno nella riga riporti */
.lypc-carry-sign-spacer {
    width: 44px;
    min-height: 22px;
    flex-shrink: 0;
}

/* Cella cifra */
.lypc-cell {
    width: 52px;
    height: 60px;
    background: var(--lypc-surface);
    border: 2px solid var(--lypc-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    color: var(--lypc-text);
    flex-shrink: 0;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
    box-sizing: border-box;
}
@media(max-width:400px) {
    .lypc-cell { width:44px; height:52px; font-size:24px; }
    .lypc-carry-cell { width:44px; }
    .lypc-sign { width:36px !important; font-size:22px !important; }
}
@media(max-width:340px) {
    .lypc-cell { width:38px; height:46px; font-size:20px; }
    .lypc-carry-cell { width:38px; }
}

.lypc-cell.ghost {
    background: transparent !important;
    border-color: transparent !important;
    pointer-events: none;
}
.lypc-cell.editable {
    border-color: var(--lypc-accent);
    background: rgba(59,130,246,.12);
    cursor: pointer;
}
.lypc-cell.editable.focused {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147,197,253,.3);
    background: rgba(29,78,216,.35);
}
.lypc-cell.correct { border-color:var(--lypc-green); background:rgba(46,204,113,.2); color:#86efac; }
.lypc-cell.wrong   { border-color:var(--lypc-red); background:rgba(231,76,60,.2); animation:lypc-shake .3s; }
@keyframes lypc-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Segno operatore (+, −, =) — a DESTRA della riga */
.lypc-sign {
    width: 44px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    font-family: var(--lypc-font-b);
    color: var(--lypc-accent2);
    flex-shrink: 0;
}
.lypc-sign.ghost-sign {
    visibility: hidden;
}

/* Linea separatrice */
.lypc-divider {
    height: 3px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    margin: 4px 44px 4px 0; /* margine dx = larghezza colonna segno */
    align-self: stretch;
    width: 100%;
}

/* ── DIVISIONI ───────────────────────────────────────────── */
.lypc-div-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}
.lypc-div-op {
    font-size: 28px;
    font-weight: 900;
    color: var(--lypc-accent2);
    flex-shrink: 0;
}
.lypc-cell-wide {
    width: 72px;
}

/* ── TASTIERINO ──────────────────────────────────────────── */
.lypc-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 300px;
    margin: 0 auto 14px;
}
.lypc-numpad-btn {
    background: var(--lypc-card);
    border: 1px solid var(--lypc-border);
    color: var(--lypc-text);
    border-radius: 12px;
    padding: 16px 0;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--lypc-font-b);
    cursor: pointer;
    transition: background .1s, transform .08s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.lypc-numpad-btn:active { transform:scale(.93); }
.lypc-numpad-del { background:rgba(231,76,60,.18); color:var(--lypc-red); font-size:18px; }
.lypc-numpad-ok  { background:var(--lypc-accent); color:#fff; font-size:18px; font-weight:900; }
.lypc-numpad-ok:hover { background:#2563eb; }
.lypc-numpad-ok:active { background:#1d4ed8; }

/* ── FEEDBACK ────────────────────────────────────────────── */
.lypc-feedback-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}
.lypc-feedback-bar.lypc-hidden { display:none; }
.lypc-fb-correct { background:rgba(46,204,113,.15); border:1px solid var(--lypc-green); color:#86efac; }
.lypc-fb-wrong   { background:rgba(231,76,60,.15); border:1px solid var(--lypc-red); color:#fca5a5; }

.lypc-btn-next {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--lypc-font-b);
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 14px rgba(59,130,246,.4);
}
.lypc-btn-next:hover { opacity:.9; }
.lypc-btn-next:active { transform:scale(.98); }
.lypc-btn-next.lypc-hidden { display:none; }

/* ── RISULTATI ───────────────────────────────────────────── */
.lypc-result-content { text-align:center; padding:28px 0; }
.lypc-result-trophy  { font-size:72px; margin-bottom:14px; }
.lypc-result-title   { font-family:var(--lypc-font-h); font-size:30px; margin:0 0 10px; color:var(--lypc-title); }
.lypc-result-stars   { font-size:36px; margin-bottom:12px; letter-spacing:4px; }
.lypc-result-msg     { color:var(--lypc-muted); font-size:14px; font-weight:600; margin:0 0 18px; }
.lypc-result-errors  { background:var(--lypc-card); border-radius:12px; padding:14px 16px; text-align:left; margin-bottom:18px; font-size:13px; max-height:200px; overflow-y:auto; }
.lypc-result-errors h4 { margin:0 0 8px; font-size:13px; color:var(--lypc-red); font-weight:800; }
.lypc-err-item { padding:5px 0; border-bottom:1px solid var(--lypc-border); color:var(--lypc-muted); }
.lypc-result-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lypc-btn-primary   { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border:none; border-radius:12px; padding:12px 26px; font-size:14px; font-weight:800; cursor:pointer; font-family:var(--lypc-font-b); }
.lypc-btn-secondary { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:var(--lypc-text); border-radius:12px; padding:12px 26px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--lypc-font-b); }

/* Confetti */
.lypc-confetti { position:relative; height:0; pointer-events:none; }
.lypc-conf-dot { position:absolute; width:9px; height:9px; border-radius:50%; animation:lypc-fall 1.3s ease-out forwards; }
@keyframes lypc-fall { 0%{transform:translateY(-10px) rotate(0deg);opacity:1} 100%{transform:translateY(90px) rotate(360deg);opacity:0} }