/* ============================================================
   MAGICHE PAROLE — stile locale
   Carica prima css/kids-base.css (variabili, header, footer).
   Le parti condivise (schermate, HUD, card, scheda adulti, pulsanti
   grandi) sono identiche alle altre app kids: così restano parenti.
   In fondo, le parti proprie di questa app: fotocamera e magia.
   ============================================================ */

/* ---------- Layout principale ---------- */
.game-container {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vw, 36px) 12px 48px;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--kids-font-body);
    /* Sfondo «magico»: viola e oro caldo */
    background:
        radial-gradient(620px 320px at 6% -40px, rgba(168, 85, 247, .16), transparent 60%),
        radial-gradient(720px 420px at 104% 104%, rgba(250, 168, 0, .16), transparent 60%),
        linear-gradient(180deg, #faf5ff 0%, #fffbeb 100%);
}

.bg-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.bg-decor span {
    position: absolute;
    opacity: .13;
    line-height: 1;
    animation: decorFloat 9s ease-in-out infinite alternate;
}

@keyframes decorFloat {
    from { transform: translateY(-12px) rotate(-8deg); }
    to   { transform: translateY(14px) rotate(10deg); }
}

/* ---------- Schermate ---------- */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 760px;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.screen.active { display: flex; animation: fadeIn 0.4s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Schermata iniziale ---------- */
.hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 18px);
    margin-bottom: 0.9rem;
    min-height: 92px;
}

.hero-item {
    width: clamp(62px, 12vw, 88px);
    aspect-ratio: 1;
    border-radius: 20px;
    background: #fff;
    border: 3px solid #ecd9f7;
    box-shadow: 0 5px 0 rgba(124, 58, 237, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    line-height: 1;
    animation: heroBob 2.6s ease-in-out infinite;
}

.hero-item:nth-child(2) { animation-delay: .35s; }
.hero-item:nth-child(3) { animation-delay: .7s; }
.hero-item:nth-child(4) { animation-delay: 1.05s; }

@keyframes heroBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.game-title {
    font-family: var(--kids-font-title);
    font-size: clamp(2rem, 5.6vw, 3.2rem);
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 0.4rem;
    text-shadow: 0 3px 0 rgba(10, 91, 99, .12);
}

.game-subtitle {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    color: var(--ink-2);
    font-weight: 700;
    margin: 0 0 1.8rem;
}

/* Card di avvio (una sola: «Inizia la magia») */
.level-grid {
    display: grid;
    grid-template-columns: minmax(220px, 360px);
    gap: clamp(12px, 2.5vw, 22px);
    justify-content: center;
    width: 100%;
}

.level-card {
    --lvl: #22c55e;
    --lvl-dark: #15803d;
    --lvl-soft: #f0fdf4;
    appearance: none;
    border: 3px solid var(--lvl);
    background: #fff;
    border-radius: var(--kids-radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 7px 0 var(--lvl-dark), var(--kids-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    font-family: var(--kids-font-body);
}

.level-card.libera { --lvl: #a855f7; --lvl-dark: #7c3aed; --lvl-soft: #faf5ff; }

.level-card:hover {
    transform: translateY(-4px);
    background: var(--lvl-soft);
    box-shadow: 0 11px 0 var(--lvl-dark), var(--kids-shadow);
}

.level-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lvl-dark); }

.level-card:disabled,
.level-card[disabled] {
    opacity: .55;
    cursor: default;
    pointer-events: none;
    filter: grayscale(.3);
}

.level-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }

.level-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }

.level-name { font-family: var(--kids-font-title); font-size: 1.25rem; font-weight: 700; color: var(--ink); }

.level-desc { font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }

/* ---------- Scheda per gli adulti ---------- */
.info-box {
    background: #fff;
    border: 2px dashed #e6d3f2;
    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: var(--kids-font-title); font-size: 1.15rem; color: var(--brand); margin: 0 0 0.7rem; }
.info-box h3 { font-family: var(--kids-font-title); 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: #faf5ff; border-radius: 12px; padding: 0.6rem 0.8rem; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 1rem; }

.hud-pill {
    background: #fff;
    border: 2px solid #ecd9f7;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-family: var(--kids-font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--kids-shadow-sm);
    white-space: nowrap;
    margin-right: auto;
}

.hud-right { display: flex; gap: 8px; }

.hud-btn {
    appearance: none;
    border: 2px solid #ecd9f7;
    background: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--kids-shadow-sm);
    transition: transform .15s ease, background .15s ease;
    padding: 0;
    line-height: 1;
}

.hud-btn:hover { transform: translateY(-2px); background: #faf5ff; }
.hud-btn.home { border-color: var(--brand); background: #f0fdfa; }

.hud-btn.audio-btn { border-color: #ffe1a6; background: #fff8ec; }
.hud-btn.audio-btn.spento { border-color: #fecaca; background: #fef2f2; opacity: .85; }

/* ---------- Viste del gioco ---------- */
.view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.view-container[hidden] { display: none; }

/* ---------- Scanner / fotocamera ---------- */
.camera-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--kids-radius);
    box-shadow: 0 10px 25px rgba(124, 58, 237, .22);
    background: #000;
}

/* Il video si mostra alla sua proporzione naturale (niente object-fit:cover
   né tetto d'altezza): così il rettangolo bianco combacia ESATTAMENTE con
   la parte che il codice ritaglia e legge. Con «cover» + max-height il
   riquadro mostrava una banda e il codice ne ritagliava un'altra, e la
   parola inquadrata non era quella letta. */
#video-feed {
    width: 100%;
    height: auto;
    display: block;
}

.crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

.crop-box {
    width: 80%;
    height: 30%;
    border: 4px dashed rgba(255, 255, 255, 0.85);
    border-radius: 14px;
}

.controls-area { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; }

.instruction-text { margin-top: 0.9rem; color: var(--ink-2); font-weight: 700; }

/* Pulsante grande d'azione (Leggi / Un'altra) */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--kids-font-title);
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 7px 0 #b45309;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-action.btn-blue { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 7px 0 #5b21b6; }

.btn-action:hover { transform: translateY(-2px); }
.btn-action:active { transform: translateY(4px); box-shadow: 0 2px 0 #b45309; }
.btn-action.btn-blue:active { box-shadow: 0 2px 0 #5b21b6; }

.btn-action:disabled,
.btn-action[disabled] { opacity: 0.7; pointer-events: none; filter: grayscale(0.4); }

.btn-action .icon { font-size: 1.4rem; }

.pulse { animation: pulseSlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes pulseSlow {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* ---------- Errore e «cosa ho letto» ---------- */
.error-box {
    margin-top: 1rem;
    background: #ef4444;
    color: #fff;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: var(--kids-shadow-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: bounceShort 0.5s;
    text-align: center;
}

.error-box[hidden] { display: none; }

@keyframes bounceShort {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.debug-box {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    padding: 0.6rem 1rem;
    border: 2px dashed #e6d3f2;
    border-radius: 14px;
    font-size: 0.9rem;
    box-shadow: var(--kids-shadow-sm);
    max-width: 100%;
    text-align: center;
    word-break: break-word;
}

.debug-box[hidden] { display: none; }
.debug-label { font-weight: 700; color: var(--brand); }

#debug-canvas-img {
    display: block;
    margin: 0.5rem auto 0;
    max-width: 220px;
    width: 100%;
    height: auto;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: var(--kids-shadow-sm);
    image-rendering: crisp-edges;
}

/* ---------- Vista della magia ---------- */
#success-view {
    background: #fff;
    border: 3px solid #ecd9f7;
    border-radius: 28px;
    box-shadow: var(--kids-shadow);
    padding: clamp(1.6rem, 5vw, 2.6rem);
    width: min(480px, 96%);
    margin: 0 auto;
    gap: 0.4rem;
}

.emoji-display {
    font-size: clamp(6rem, 30vw, 10rem);
    line-height: 1;
    filter: drop-shadow(0 16px 18px rgba(124, 58, 237, .18));
}

.emoji-display[hidden] { display: none; }

.image-display {
    width: clamp(11rem, 55vw, 16rem);
    height: clamp(11rem, 55vw, 16rem);
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    border: 8px solid #fff;
    margin-bottom: 0.6rem;
}

.image-display[hidden] { display: none; }

.word-display {
    font-family: var(--kids-font-title);
    font-size: clamp(2.2rem, 9vw, 3rem);
    font-weight: 700;
    color: #16a34a;
    margin: 0.6rem 0 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    word-break: break-word;
}

/* ---------- Animazioni della magia ---------- */
@keyframes pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-pop { animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-pop-delayed { animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both; }

/* ---------- Header (bottoni) ---------- */
.site-header .btn {
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 14px;
    box-shadow: none;
}

/* ---------- Touch ----------
   kids-base.css impone min-height:44px a tutti i button sugli schermi
   touch: sui pulsanti tondi alzava solo l'altezza. Il minimo va imposto
   anche in larghezza. NON togliere. */
@media (pointer: coarse) {
    .hud-btn { min-width: 44px; min-height: 44px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .hud { flex-wrap: wrap; gap: 8px; }
    .hud-pill { font-size: 1rem; padding: 0.4rem 0.8rem; }
    .hud-right { margin-left: auto; }
    .btn-action { font-size: 1.25rem; padding: 0.8rem 1.6rem; }
}

@media (min-width: 768px) {
    .btn-action { font-size: 1.6rem; padding: 1rem 2.4rem; }
    .btn-action .icon { font-size: 1.6rem; }
}

/* ---------- Meno animazioni se richiesto ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-item,
    .bg-decor span,
    .emoji-display,
    .image-display,
    .pulse,
    .screen.active { animation: none !important; }
}