/* ImparaGiocando — stile responsive e autonomo */
:root {
    --background: #f5f7fb;
    --surface: #ffffff;
    --text: #202637;
    --muted: #697386;
    --line: #e4e8f0;
    --green: #67c89b;
    --green-dark: #287b5d;
    --blue: #78a9ed;
    --orange: #f6b56c;
    --purple: #ad94e7;
    --shadow: 0 18px 45px rgba(50, 62, 91, 0.09);
    --radius-large: 28px;
    --radius-medium: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-content { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: Trebuchet MS, Arial, sans-serif; font-size: 19px; letter-spacing: -.04em; }
.brand strong { font-weight: 800; }
.brand em { color: var(--green-dark); font-style: normal; font-weight: 500; }
.brand-symbol { width: 34px; height: 34px; display: grid; place-items: center; background: var(--green); color: white; border-radius: 50% 50% 50% 10px; font-size: 20px; transform: rotate(-10deg); }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.main-nav a:hover { color: var(--green-dark); }
.hero { overflow: hidden; padding: 105px 0 110px; background: radial-gradient(circle at 85% 20%, rgba(120,169,237,.17), transparent 27%), radial-gradient(circle at 15% 90%, rgba(103,200,155,.13), transparent 28%); }
.hero-grid { min-height: 520px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr); align-items: center; gap: 60px; }
.eyebrow { margin: 0 0 18px; color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1,h2,h3 { font-family: Trebuchet MS, Arial, sans-serif; letter-spacing: -.055em; }
h1 { max-width: 680px; margin: 0; font-size: clamp(42px,6vw,76px); line-height: 1.04; font-weight: 800; }
h1 span { color: var(--green-dark); }
.hero-description { max-width: 560px; margin: 28px 0 0; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--text); color: white; box-shadow: 0 9px 20px rgba(32,38,55,.16); }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.button-secondary:hover { border-color: var(--green); }
.hero-visual { min-height: 440px; position: relative; display: grid; place-items: center; }
.visual-orbit { position: absolute; border: 1px solid rgba(103,200,155,.45); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 350px; height: 210px; }
.orbit-two { width: 300px; height: 420px; transform: rotate(55deg); border-color: rgba(120,169,237,.35); }
.visual-card { position: absolute; border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); }
.visual-card-main { width: 260px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 42% 22% 40% 22%; background: linear-gradient(145deg,#d9f4e8,#acdcbf); transform: rotate(-7deg); }
.visual-icon { position: absolute; top: 42px; left: 37px; font-size: 78px; }
.visual-label { margin-bottom: 10px; color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.visual-card-main strong { color: #245940; font-family: Trebuchet MS, Arial, sans-serif; font-size: 27px; line-height: 1.08; letter-spacing: -.07em; }
.visual-card-small { display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 999px; font-size: 13px; background: white; }
.visual-card-small span { font-size: 18px; }
.visual-card-top { top: 63px; right: 2px; background: #e6efff; color: #3766ad; transform: rotate(7deg); }
.visual-card-bottom { bottom: 60px; left: 3px; background: #fff0dc; color: #b66d28; transform: rotate(-5deg); }
.intro-section,.topics-section,.method-section { padding: 98px 0; }
.intro-section,.method-section { background: var(--surface); }
.section-heading { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 60px; margin-bottom: 42px; }
.section-heading h2,.method-section h2 { max-width: 620px; margin: 0; font-size: clamp(30px,4vw,48px); line-height: 1.1; }
.section-heading > p { max-width: 370px; margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.game-card { min-height: 450px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); transition: transform .25s ease, box-shadow .25s ease; }
.game-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.game-card-featured { background: #f0faf5; border-color: #cfeede; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-number { color: #9ca5b5; font-family: Trebuchet MS, Arial, sans-serif; font-size: 12px; font-weight: 800; }
.card-status { padding: 5px 9px; border-radius: 999px; background: #e8edf3; color: #728096; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.game-icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 33px 0 25px; border-radius: 22px; font-size: 34px; }
.icon-green { background: #d2f1e1; }
.icon-blue { background: #dfeaff; }
.icon-orange { background: #ffead1; }
.card-category { margin: 0 0 11px; color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.game-card h3 { margin: 0; font-size: 24px; line-height: 1.13; }
.game-card > p:not(.card-category) { margin: 18px 0 25px; color: var(--muted); font-size: 14px; }
.card-link,.text-link { color: var(--text); font-size: 13px; font-weight: 800; text-decoration: none; }
.card-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.card-link span,.text-link span { color: var(--green-dark); font-size: 19px; }
.card-link.disabled { color: #8791a2; cursor: default; }
.empty-state { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; margin-top: 20px; padding: 25px 30px; border: 1px dashed #cdd5e1; border-radius: var(--radius-medium); background: #fbfcfe; }
.empty-state-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e4f5ec; color: var(--green-dark); font-size: 27px; }
.empty-state h3 { margin: 0; font-size: 17px; }
.empty-state p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.empty-state-decoration { position: absolute; right: 35px; color: var(--green); font-size: 42px; transform: rotate(12deg); }
.topics-section { background: linear-gradient(180deg,#f5f7fb,#eef3f8); }
.centered-heading { display: block; text-align: center; }
.centered-heading h2 { margin: 0 auto; }
.centered-heading > p:last-child { max-width: 400px; margin: 18px auto 0; }
.topics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 45px; }
.topic-card { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 23px; border-radius: var(--radius-medium); color: var(--text); text-decoration: none; transition: transform .2s ease; }
.topic-card:hover { transform: translateY(-6px); }
.topic-green { background: #d6f1e3; }.topic-blue { background: #dce9fc; }.topic-orange { background: #ffead2; }.topic-purple { background: #e7defa; }
.topic-icon { font-size: 34px; }.topic-name { font-family: Trebuchet MS, Arial, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }.topic-arrow { align-self: flex-end; font-size: 22px; }
.method-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 100px; align-items: center; }
.method-introduction { max-width: 500px; margin: 27px 0; color: var(--muted); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; }.text-link:hover { color: var(--green-dark); }
.steps { display: grid; gap: 12px; }.step { display: grid; grid-template-columns: 57px 1fr; gap: 19px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: #fbfcfe; }
.step-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e5f4eb; color: var(--green-dark); font-family: Trebuchet MS, Arial, sans-serif; font-size: 12px; font-weight: 800; }
.step h3 { margin: 0; font-size: 17px; }.step p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.site-footer { padding: 28px 0; background: var(--text); color: white; }.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.footer-brand { color: white; }.footer-brand em { color: var(--green); }.footer-content p { margin: 0; color: #b9c1d1; font-size: 12px; }.footer-copy { white-space: nowrap; }
@media (max-width: 620px) {
    .container {
        width: min(100% - 32px, 1120px);
    }

    .header-content {
        min-height: 70px;
    }

    .main-nav {
        display: none;
    }

    .hero {
        padding: 64px 0;
    }

    h1 {
        font-size: clamp(38px, 12vw, 58px);
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-visual {
        min-height: 340px;
        transform: scale(0.88);
        transform-origin: center;
    }

    .visual-card-top {
        right: -14px;
    }

    .visual-card-bottom {
        left: -14px;
    }

    .intro-section,
    .topics-section,
    .method-section {
        padding: 70px 0;
    }

    .game-grid,
    .topics-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        min-height: 410px;
    }

    .empty-state {
        align-items: flex-start;
        padding: 20px;
    }

    .empty-state-decoration {
        display: none;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* -------------------------------------------------
   NOTA DIDATTICA: riquadro sopra il footer
------------------------------------------------- */

.notice-section {
    padding: 0 0 80px;
    background: var(--surface);
}

.notice-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-medium);
    background: var(--background);
}

.notice-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.notice-box h2 {
    margin: 0 0 9px;
    color: var(--text);
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 20px;
}

.notice-box p {
    max-width: 850px;
    margin: 6px 0;
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}
.notice-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 92px;
}

.notice-box h2 {
    margin: 0 0 12px;
    line-height: 1.2;
}

.notice-box p {
    max-width: 960px;
    margin: 0;
    line-height: 1.55;
}
.notice-box strong {
    color: var(--text);
}


/* Versione per smartphone della nota didattica */

@media (max-width: 620px) {
    .notice-section {
        padding-bottom: 55px;
    }

    .notice-box {
        grid-template-columns: 1fr;
        padding: 22px;
    }
}
/* Schede delle attività di Chimica */
.game-card.game-card-chimica {
    background: #f0faf5;
    border-color: #cfeede;
}

/* Schede delle attività di Biologia */
.game-card.game-card-biologia {
    background: #eff6ff;
    border-color: #cddff5;
}