@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Container ─────────────────────────────────────────────────────────────── */
.game-container {
    max-width: 600px;
    margin: 24px auto;
    padding: 28px 20px 36px;
    background: linear-gradient(160deg, #fffdf7 0%, #fff8f0 100%);
    border-radius: 24px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 8px 40px rgba(0,0,0,.10);
    border: 2px solid #fde68a;
}

.game-title {
    font-family: 'Baloo 2', cursive;
    color: #1d4ed8;
    font-size: clamp(22px, 6vw, 34px);
    font-weight: 800;
    margin-bottom: 4px;
}

.game-subtitle {
    color: #6b7280;
    font-size: clamp(12px, 3.5vw, 15px);
    margin-bottom: 14px;
}

/* ── Score ─────────────────────────────────────────────────────────────────── */
.score-display {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 4px;
}
.score-bar {
    width: min(200px, 60%);
    height: 8px;
    background: #e5e7eb;
    border-radius: 99px;
    margin: 6px auto 0;
    overflow: hidden;
}
.score-fill {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 99px;
    width: 0%;
    transition: width .4s ease;
}

/* ── Message ───────────────────────────────────────────────────────────────── */
.game-message {
    color: white;
    padding: 11px 18px;
    border-radius: 12px;
    margin: 12px 0 8px;
    font-weight: 700;
    font-size: clamp(13px, 3.5vw, 15px);
    animation: slideDown .25s ease;
}
@keyframes slideDown {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Tray ──────────────────────────────────────────────────────────────────── */
.tray-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.food-tray {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 16px 12px;
    min-height: 88px;
    align-items: center;
    margin-bottom: 16px;
}
.food-chip {
    width: clamp(52px, 13vw, 66px);
    height: clamp(52px, 13vw, 66px);
    background: white;
    border: 2.5px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(26px, 7.5vw, 34px);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.food-chip:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,.13);
    border-color: #93c5fd;
}

/* ── Plate ─────────────────────────────────────────────────────────────────── */
.plate-wrap {
    width: min(340px, 88vw);
    margin: 4px auto 16px;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.12));
}
.plate-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.plate-sector { transition: fill .18s ease; }
.drop-overlay { cursor: crosshair; }

/* SVG text labels */
.sec-label {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 15px;
    pointer-events: none;
}
.sec-sublabel {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 11px;
    pointer-events: none;
    opacity: .85;
}
.placed-emoji { pointer-events: none; }

/* ── Legend ────────────────────────────────────────────────────────────────── */
.legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 20px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 600;
    color: #374151;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.legend-item em {
    font-style: normal;
    font-weight: 800;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 12px;
    color: #6b7280;
}
.ldot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.ldot-glow { background:#34d399; }
.ldot-go   { background:#fbbf24; }
.ldot-grow { background:#f87171; }

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.btn-reset {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    border: none;
    padding: 13px 32px;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(251,191,36,.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-reset:hover  { transform:translateY(-2px); box-shadow:0 7px 20px rgba(251,191,36,.5); }
.btn-reset:active { transform:translateY(0); }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .game-container { margin:12px; padding:20px 14px 28px; border-radius:18px; }
    .legend { gap:7px; }
    .legend-item { padding:6px 10px; }
    .food-tray { gap:8px; padding:12px 8px; }
}