/* =====================================================
   JUGA — PÀGINA DE JOCS
   La Família Reciclatge
   ===================================================== */

/* ==================== HERO ==================== */
.g-hero {
    padding-top: calc(var(--header-h) + 1rem);
    padding-bottom: 0;
}

.g-hero__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
}

.g-hero__char {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: .75rem;
}

.g-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--verde);
    line-height: 1.1;
    margin-bottom: .5rem;
}

.g-hero__sub {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--muted);
    line-height: 1.65;
    max-width: 500px;
}

/* ==================== FEATURED GAME ==================== */
.g-featured {
    padding: 1.25rem 0 .75rem;
}

.g-featured__label {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
    padding-left: .25rem;
}

.g-featured__card {
    display: flex;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.g-featured__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.09);
}

.g-featured__media {
    flex: 0 0 40%;
    background: linear-gradient(150deg, #d4edbc 0%, #e8f5d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 1.5rem;
}

.g-featured__img {
    max-width: 240px;
    max-height: 180px;
    object-fit: contain;
}

.g-featured__body {
    flex: 1;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.g-featured__badges {
    margin-bottom: .5rem;
}

.g-featured__title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: var(--text);
    margin-bottom: .35rem;
}

.g-featured__desc {
    font-size: 1.1rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: .75rem;
}

.g-featured__learn {
    font-size: .9rem;
    font-weight: 700;
    color: var(--verde);
    padding-left: .75rem;
    border-left: 3px solid var(--verde);
    line-height: 1.45;
    margin-bottom: 1rem;
}

.g-featured__meta {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ==================== BADGES (reutilitzable) ==================== */
.badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    background: var(--bg);
    color: var(--muted);
    padding: .2rem .55rem;
    border-radius: var(--r-full);
}

.badge--green {
    background: var(--verde);
    color: var(--white);
}

/* ==================== TOTS ELS JOCS ==================== */
.g-all {
    padding: .75rem 0 1rem;
}

.g-all__title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 1rem;
}

.g-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* ==================== GAME CARD ==================== */
.g-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.g-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

/* Media zone */
.g-card__media {
    position: relative;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.g-media--verde { background: linear-gradient(140deg, #c4eac1, #e0f5de); }  /* Crunchy #3fa535 */
.g-media--blau  { background: linear-gradient(140deg, #b3e0f5, #d6f0fc); }  /* Blupi   #009fe3 */
.g-media--marro { background: linear-gradient(140deg, #e8d5c0, #f5ece0); }  /* Bruna   #9d6333 */
.g-media--groc  { background: linear-gradient(140deg, #fffaa0, #fffde0); }  /* Brickly #ffef26 */
.g-media--gris  { background: linear-gradient(140deg, #d5d5d6, #e8e8e9); }  /* Dusty   #5b5b5d */

/* Character inside media */
.g-card__char {
    width: 75px;
    height: 75px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.g-card__char--fly {
    animation: g-fly 3s ease-in-out infinite;
}

/* Goal emoji */
.g-card__goal {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 1.5rem;
    z-index: 1;
}

/* Mini cards (memory) */
.g-card__minicard {
    width: 52px;
    height: 66px;
    object-fit: contain;
    border-radius: 7px;
    border: 2px solid rgba(0,0,0,.05);
    background: var(--white);
}

.g-mc--back {
    transform: rotate(-8deg);
    margin-right: -14px;
    z-index: 1;
}

.g-mc--front {
    transform: rotate(6deg);
    z-index: 2;
}

/* Letters (sopa) */
.g-card__letters {
    position: absolute;
    bottom: 10px;
    right: 12px;
    display: flex;
    gap: 2px;
}

.g-card__letters span {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.85);
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 900;
    color: var(--verde);
}

/* V/M (veritat) */
.g-card__vm {
    position: absolute;
    bottom: 12px;
    right: 14px;
    display: flex;
    gap: .3rem;
}

.g-vm--v, .g-vm--m {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 900;
}

.g-vm--v { background: var(--verde); color: var(--white); }
.g-vm--m { background: #e53935; color: var(--white); }

/* Bubble (quiz) */
.g-card__bubble {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--white);
    color: var(--verde);
    font-size: .7rem;
    font-weight: 800;
    padding: .3rem .6rem;
    border-radius: 9px 9px 9px 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Card body */
.g-card__body {
    padding: 1.1rem 1.2rem 1.35rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.g-card__title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: .2rem;
}

.g-card__desc {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: .5rem;
}

.g-card__learn {
    font-size: .8rem;
    font-weight: 700;
    color: var(--verde);
    padding-left: .6rem;
    border-left: 3px solid var(--verde);
    line-height: 1.4;
    margin-bottom: .6rem;
}

.g-card__meta {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ==================== CONSELL FINAL ==================== */
.g-footer-tip {
    padding: .5rem 0 2rem;
}

.g-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    padding: 1.5rem 2rem;
}

.g-tip__char {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.g-tip__text {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.55;
}

/* ==================== ANIMACIONS ==================== */
@keyframes g-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes g-fly {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-7px) rotate(3deg); }
}

/* ==================== RESPONSIVE — TABLET ==================== */
@media (max-width: 900px) {
    .g-featured__card {
        flex-direction: column;
    }

    .g-featured__media {
        flex: none;
        min-height: 180px;
    }

    .g-featured__body {
        padding: 1.5rem;
    }

    .g-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== RESPONSIVE — MÒBIL ==================== */
@media (max-width: 560px) {
    .g-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }

    .g-card__media { height: 135px; }
    .g-featured__media { min-height: 150px; }

    .g-featured__body { padding: 1.25rem; }

    .g-tip {
        flex-direction: column;
        text-align: center;
    }
}