.recycling-engine-root {
    width: 100%;
    height: 100%;
    overflow: auto;
    color: #2d2440;
    background: linear-gradient(145deg, #edfff2, #f7f1ff)
}

.recycling-game {
    box-sizing: border-box;
    max-width: 1050px;
    min-height: 100%;
    margin: auto;
    padding: clamp(14px, 3vw, 30px);
    text-align: center
}

.recycling-header h2 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem)
}

.recycling-header p {
    margin: .4rem auto;
    font-size: 1.1rem;
    font-weight: 700
}

.recycling-score {
    display: inline-block;
    margin: .4rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 900;
    box-shadow: 0 3px 12px rgba(45, 36, 64, .14)
}

.waste-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 112px;
    margin: 14px auto;
    
  
   
}

.waste-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92px;
    min-height: 88px;
    padding: 7px;
    border: 2px solid #ddd0ef;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    cursor: grab;
    box-shadow: 0 5px 12px rgba(45, 36, 64, .12)
}

.waste-card:active {
    cursor: grabbing
}

.waste-emoji {
    font-size: 3rem;
    line-height: 1
}

.waste-label {
    margin-top: 5px;
    
}

/* A visszajelzés színe a válasz helyességét is mutatja: az indulóüzenet
   semleges, a jó válasz zöld, a hibás piros. */
.recycling-feedback {
    min-height: 26px;
    margin: 8px;
    font-weight: 900;
    color: #475c20
}

.recycling-feedback.helyes {
    color: #1c7a3c
}

.recycling-feedback.rossz {
    color: #c0271f
}

/* ============================================================
   KUKÁK – SVG rajz, egyetlen alapszínből származtatott árnyalatokkal
   ============================================================
   A kuka mind a hat része a --bin-color értékéből jön, color-mix()-szel.
   A színmegadás így a régi rendszerben marad: elég a BIN_INFO-ban a color
   mezőt átírni, a többi árnyalat automatikusan követi.
   Az arányok külön változókban vannak, hogy egy helyen hangolhatók legyenek. */

.bins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    align-items: end;
    gap: 14px;
    margin-top: 12px
}

.recycling-bin {
    position: relative;
    transition: transform .12s ease; max-width: 200px;
    --bin-front-sotet: 22%;
    --bin-rim-sotet: 10%;
    --bin-lid-vilagos: 14%;
    --bin-handle-sotet: 16%;
    --bin-slot-szin: #140833
}

.bin-svg {
    display: block;  
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(45, 36, 64, .22))
}

.bin-svg .bin-part-body {
    fill: var(--bin-color)
}

.bin-svg .bin-part-front {
    fill: color-mix(in srgb, var(--bin-color) calc(100% - var(--bin-front-sotet)), #000)
}

.bin-svg .bin-part-rim {
    fill: color-mix(in srgb, var(--bin-color) calc(100% - var(--bin-rim-sotet)), #000)
}

.bin-svg .bin-part-lid {
    fill: color-mix(in srgb, var(--bin-color) calc(100% - var(--bin-lid-vilagos)), #fff)
}

.bin-svg .bin-part-handle {
    fill: color-mix(in srgb, var(--bin-color) calc(100% - var(--bin-handle-sotet)), #000)
}

.bin-svg .bin-part-slot {
    fill: color-mix(in srgb, var(--bin-color) 16%, var(--bin-slot-szin))
}

/* Ha a böngésző nem ismeri a color-mix()-et: minden rész az alapszínt kapja,
   a nyílás sötét marad – a kuka így is felismerhető. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {

    .bin-svg .bin-part-front,
    .bin-svg .bin-part-rim,
    .bin-svg .bin-part-lid,
    .bin-svg .bin-part-handle {
        fill: var(--bin-color)
    }

    .bin-svg .bin-part-slot {
        fill: var(--bin-slot-szin)
    }
}

/* A felirat az elülső panelre kerül. A százalékok az 537×709-es rajzból
   számolt panelterületet fedik le. */
.bin-face {
    position: absolute;
    top: 39%;
    left: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 50%;
    height: 54%;
    padding: 4px;
    color: #fff;
    text-align: center;
    pointer-events: none
}

.bin-face strong {
    font-size: clamp(.68rem, 1.7vw, 1.05rem);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45)
}

.recycle-mark {
    width: clamp(18px, 3.4vw, 30px);
    height: auto;
    fill: currentColor;
    opacity: .85
}

.recycling-bin.drag-over {
    transform: translateY(-3px)
}

.recycling-bin.drag-over .bin-svg {
    filter: drop-shadow(0 8px 14px rgba(45, 36, 64, .22)) brightness(1.12)
}

@media(max-width:650px) {
    .recycling-game {
        padding: 10px
    }

    .bins-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px
    }
}

@media(max-width:390px) {
    .bins-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

/* Alacsony ablakban a kukák ne nyomják ki a játékteret */
@media(max-height:700px) {
    .bin-svg {
        width: auto;
        max-height: 34svh;
        margin: 0 auto
    }

    .recycling-bin {
        display: flex;
        justify-content: center
    }
}