/* ===================================================================
   IMPARA GLI EURO — stile

   Stessa struttura visiva delle altre app kids (cornice bianca, cards,
   scheda tratteggiata per gli adulti, attestato). Le monete e le
   banconote sono disegnate in CSS, senza immagini.
   =================================================================== */

body { touch-action: pan-y; }

.app-container {
    width: 100%;
    max-width: 820px;
    margin: 0.5rem auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 500px;
    position: relative;
    padding-bottom: 20px;
}

.screen { display: none; padding: 1.5rem; text-align: center; }
.screen.active { display: block; }

.title {
    font-size: 2.5rem;
    color: var(--brand);
    margin-bottom: 1rem;
    font-family: 'Fredoka', sans-serif;
}

.subtitle { font-size: 1.2rem; color: #64748b; margin-bottom: 2rem; }

/* ---------- Selettore della lingua ---------- */
.lang-switch { display: flex; gap: 6px; margin: 0 0 1.4rem; flex-wrap: wrap; justify-content: center; }
.lang-btn {
    appearance: none; border: 2px solid #d7efec; background: #fff; border-radius: 999px;
    padding: 0.35rem 0.8rem; font-family: var(--kids-font-body); font-size: 0.9rem; font-weight: 800;
    color: var(--ink-2); cursor: pointer; box-shadow: var(--kids-shadow-sm);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.lang-btn:hover { transform: translateY(-2px); }
.lang-btn.active { border-color: var(--brand); background: #eff6ff; color: var(--brand); }

/* ---------- Le modalità ---------- */
.choose-label {
    font-family: 'Fredoka', sans-serif; font-size: 1.15rem; font-weight: 600;
    color: var(--brand); margin: 0 0 1rem;
}
.level-grid { display: grid; gap: 0.7rem; max-width: 480px; margin: 0 auto 2rem; }
.level-card {
    display: flex; align-items: center; gap: 0.9rem; text-align: left;
    background: #fff; border: 3px solid #e2e8f0; border-radius: 20px; padding: 0.9rem 1rem;
    cursor: pointer; font-family: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.level-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 8px 18px rgba(0, 0, 0, .1); }
.level-card.riconosci:hover { border-color: #f59e0b; }
.level-card.spesa:hover { border-color: #22c55e; }
.level-card.resto:hover { border-color: #3b82f6; }
.level-icon { font-size: 2.1rem; line-height: 1; flex: none; }
.level-text { display: flex; flex-direction: column; gap: 2px; }
.level-name { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.level-desc { font-size: .9rem; color: #4b5563; line-height: 1.25; }

/* ---------- HUD ---------- */
.game-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.btn-mini-home {
    background: #f1f5f9; border: none; font-size: 1.5rem; padding: 10px; border-radius: 50%;
    cursor: pointer; box-shadow: 0 2px 0 #cbd5e1; line-height: 1;
}
.score { font-size: 1.15rem; font-weight: bold; color: var(--ink); }
.audio-btn.spento { opacity: .55; }

/* ---------- La consegna, sempre anche a voce ---------- */
.prompt-card {
    position: relative; background: #fff; border: 3px solid #e2e8f0; border-radius: 20px;
    padding: 0.9rem 3.4rem 0.9rem 1rem; margin: 0 auto 1rem; max-width: 620px;
}
.prompt-text {
    font-family: 'Fredoka', sans-serif; font-size: 1.15rem; font-weight: 600;
    color: var(--ink); line-height: 1.35; min-height: 1.4em;
}
.prompt-text .ogg-emoji { font-size: 1.5rem; }
.say-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--brand);
    background: #eff6ff; font-size: 1.3rem; cursor: pointer; line-height: 1;
}

/* ---------- Area di gioco ---------- */
.game-area-dynamic {
    min-height: 200px; display: flex; align-items: center; justify-content: center;
    gap: 20px; padding: 16px; background: #f8fafc; border-radius: 20px;
    border: 2px dashed #e2e8f0; flex-wrap: wrap; margin: 0 auto; max-width: 620px;
}
.spesa-area { flex-direction: column; }

/* ---------- Salvadanai (riconosci) ---------- */
.piggy-bank {
    background: white; border-radius: 20px; padding: 16px 14px;
    display: flex; flex-direction: column; align-items: center;
    min-width: 130px; flex: 1 1 130px; max-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border: 4px solid transparent; transition: transform 0.2s, box-shadow 0.2s, border-color .2s;
}
.piggy-bank.highlight { transform: scale(1.04); border-color: var(--brand); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15); }
.piggy-bank.pieno { border-color: #22c55e; background: #f0fdf4; }
.piggy-icon { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.piggy-label { font-size: 1.3rem; font-weight: bold; color: var(--ink); font-family: 'Fredoka', sans-serif; }
.piggy-slot { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 8px; }

/* ---------- Negozio (spesa / resto) ---------- */
.store-item {
    display: flex; flex-direction: column; align-items: center; background: white;
    padding: 16px 24px; border-radius: 24px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.store-item-icon { font-size: 4.5rem; line-height: 1; margin-bottom: 10px; }
.store-item-price {
    font-size: 2rem; color: #e11d48; font-family: 'Fredoka', sans-serif;
    background: #fdf2f8; padding: 6px 18px; border-radius: 12px; border: 2px dashed #f472b6;
}
.paid-line { margin-top: 8px; font-family: 'Fredoka', sans-serif; font-size: 1.3rem; color: var(--brand); }

.drop-zone {
    width: 100%; max-width: 460px; min-height: 120px; background: #fff;
    border: 3px dashed var(--brand); border-radius: 20px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; padding: 16px; transition: all 0.2s;
}
.drop-zone.resto { border-color: #10b981; }
.drop-zone.highlight { background: #eff6ff; border-style: solid; transform: scale(1.02); }
.drop-hint {
    width: 100%; text-align: center; color: var(--brand);
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.2rem;
}
.drop-zone.resto .drop-hint { color: #10b981; }

/* ---------- Portafoglio / cassa ---------- */
.wallet-tray-container {
    background: white; padding: 16px; border-radius: 20px; margin: 1rem auto 0;
    max-width: 620px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); border: 2px solid #eef2f7;
}
.wallet-tray-container h3 {
    margin: 0 0 12px; color: var(--ink); font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: 1.25rem; text-align: center;
}
.wallet-tray {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    min-height: 90px; padding: 10px; background: #f8fafc; border-radius: 16px; border: 2px solid #e2e8f0;
}

/* ---------- Le monete e le banconote (disegnate in CSS) ---------- */
.draggable { cursor: grab; user-select: none; touch-action: none; will-change: transform; z-index: 10; }
.draggable:active { cursor: grabbing; }
.draggable.dragging { opacity: 0.95 !important; pointer-events: none; z-index: 9999 !important; transition: none !important; }

.money-item {
    display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 600;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}
.money-item span { pointer-events: none; }

.coin { border-radius: 50%; color: #4a4a4a; }
.coin-size-xs { width: 42px; height: 42px; font-size: 0.85rem; }
.coin-size-s  { width: 50px; height: 50px; font-size: 0.95rem; }
.coin-size-m  { width: 58px; height: 58px; font-size: 1.05rem; }
.coin-size-l  { width: 66px; height: 66px; font-size: 1.15rem; }
.coin-size-xl { width: 74px; height: 74px; font-size: 1.2rem; }

.coin.copper {
    background: radial-gradient(circle at 30% 30%, #ffad73, #d35400, #a04000);
    border: 2px solid #a04000; color: #fff3e9; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.coin.gold {
    background: radial-gradient(circle at 30% 30%, #fff080, #f1c40f, #d4ac0d);
    border: 2px solid #b7950b; color: #5d4037; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.coin.bimetallic-1 {
    background: radial-gradient(circle at center, #ecf0f1 0%, #bdc3c7 45%, #f1c40f 46%, #d4ac0d 100%);
    border: 2px solid #b7950b; color: #333;
}
.coin.bimetallic-2 {
    background: radial-gradient(circle at center, #f1c40f 0%, #d4ac0d 50%, #ecf0f1 51%, #bdc3c7 100%);
    border: 2px solid #95a5a6; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.bill {
    width: 116px; height: 62px; border-radius: 6px; color: white; font-size: 1.4rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.2);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 20px);
}
.bill-5 { background-color: #7f8c8d; }
.bill-10 { background-color: #e74c3c; }
.bill-20 { background-color: #3498db; }
.bill-50 { background-color: #e67e22; }

/* ---------- Il riscontro ---------- */
.feedback-msg {
    display: none; max-width: 620px; margin: 1rem auto 0; padding: 0.9rem 1rem;
    border-radius: 18px; font-size: 1.1rem; font-weight: 600; line-height: 1.35;
}
.feedback-msg.correct, .feedback-msg.mostra { display: block; }
.feedback-msg.correct { background: #f0fdf4; border: 3px solid #22c55e; color: #166534; }
.feedback-msg.mostra  { background: #fff7ed; border: 3px solid #f59e0b; color: #b45309; }

/* ---------- Bottoni ---------- */
.actions-footer { display: flex; justify-content: center; margin-top: 1rem; }
.btn-play {
    background-color: var(--brand); color: white; border: none; padding: 0.9rem 1.8rem;
    font-size: 1.2rem; border-radius: 50px; cursor: pointer; font-family: 'Fredoka', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 0 #3b82f6; margin: 0.5rem;
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #3b82f6; }
.btn-play:active { transform: translateY(2px); box-shadow: 0 2px 0 #3b82f6; }
.btn-verify { background-color: #10b981; box-shadow: 0 4px 0 #059669; }
.btn-verify:hover { box-shadow: 0 6px 0 #059669; }
.btn-verify:active { box-shadow: 0 2px 0 #059669; }
.btn-stampa { background-color: #3b82f6; }
.result-buttons { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Animazioni ---------- */
.popIn { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.shake { animation: shakeAnim 0.4s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shakeAnim {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .popIn, .shake { animation: none; } }

/* ---------- La scheda per gli adulti ---------- */
.info-box {
    background: #fff; border: 2px dashed #cfe2e2; border-radius: 18px; padding: 1.3rem 1.4rem;
    margin-top: 2.2rem; width: 100%; text-align: left; color: #3b4a4a; font-size: 0.95rem; line-height: 1.6;
}
.info-box h2 { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; color: var(--brand); margin: 0 0 0.7rem; }
.info-box h3 { font-family: 'Fredoka', sans-serif; font-size: 1rem; color: var(--brand); margin: 1.1rem 0 0.4rem; }
.info-box p { margin: 0 0 0.55rem; }
.info-box ul { margin: 0 0 0.55rem; padding-left: 1.2rem; }
.info-box li { margin-bottom: 0.35rem; }
.info-box .info-tip { margin-top: 0.9rem; background: #f0fdfa; border-radius: 12px; padding: 0.6rem 0.8rem; }

/* ---------- L'attestato ---------- */
.certificate-container {
    background: #fffbef; border: 4px dashed #f59e0b; outline: 6px solid #10b981; outline-offset: 3px;
    padding: 15px; border-radius: 15px; max-width: 500px; width: 90%; margin: 5px auto 15px;
    position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); text-align: center;
}
.certificate-container::before, .certificate-container::after {
    content: '★'; position: absolute; font-size: 24px; color: #fbbf24; top: 5px;
}
.certificate-container::before { left: 8px; transform: rotate(-15deg); }
.certificate-container::after { right: 8px; transform: rotate(15deg); }
.cert-header {
    font-family: 'Fredoka', sans-serif; color: #fff; background: #ef4444; display: inline-block;
    padding: 5px 20px; border-radius: 50px; font-size: 1.2rem; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 5px; box-shadow: 0 3px 0 #b91c1c; transform: rotate(-2deg);
}
.cert-text { font-size: 0.9rem; color: #4b5563; margin: 2px 0; font-family: 'Inter', sans-serif; }
.cert-title {
    font-family: 'Fredoka', sans-serif; font-size: 1.3rem; color: #d97706; margin: 2px 0 8px;
    text-decoration: underline wavy #fcd34d; text-underline-offset: 4px;
}
.cert-body { background: #fff; padding: 10px; border-radius: 10px; margin: 5px 0; border: 2px solid #e5e7eb; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); }
.cert-message { font-size: 0.95rem; color: #374151; font-style: italic; margin-bottom: 5px; line-height: 1.3; }
.cert-score { font-size: 1.1rem; font-weight: bold; color: #10b981; background: #ecfdf5; display: inline-block; padding: 3px 10px; border-radius: 6px; }
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; font-size: 0.8rem; color: #9ca3af; border-top: 1px dashed #d1d5db; padding-top: 5px; }
.cert-signature { font-family: 'Fredoka', sans-serif; color: var(--brand); font-size: 1rem; }
.cert-date { font-weight: bold; }

/* ---------- Tablet ---------- */
@media (min-width: 700px) {
    .level-grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
    .prompt-text { font-size: 1.3rem; }
}

/* ---------- Telefono ---------- */
@media (max-width: 600px) {
    .app-container { margin: 1rem auto; width: 95%; border-radius: 15px; }
    .screen { padding: 1rem; }
    .title { font-size: 1.8rem; }
    .store-item-icon { font-size: 3.5rem; }
    .store-item-price { font-size: 1.6rem; }
    .piggy-bank { min-width: 100px; padding: 12px 8px; }
    .piggy-icon { font-size: 2.4rem; }
    .piggy-label { font-size: 1.1rem; }
    .wallet-tray { gap: 10px; }
    .coin-size-xs { width: 38px; height: 38px; }
    .coin-size-s  { width: 44px; height: 44px; }
    .coin-size-m  { width: 52px; height: 52px; }
    .coin-size-l  { width: 60px; height: 60px; }
    .coin-size-xl { width: 66px; height: 66px; }
    .bill { width: 98px; height: 54px; font-size: 1.2rem; }
}

/* ---------- Stampa dell'attestato ---------- */
@media print {
    body * { visibility: hidden !important; }
    #certificate, #certificate * { visibility: visible !important; }
    #certificate { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
    .site-header, .site-footer, .result-buttons, .btn-play { display: none !important; }
}