/* ════════════════════════════════════════
   ingredients.css — SushiDAW Pixel Art Edition
   OFF: dark recessed slot tint per ingredient
   ON:  food illustration (same as before, but with pixel slot depth)
   ════════════════════════════════════════ */

/* ─── OFF tints — RPG slot with ingredient tint ─── */
.cell[data-ch="0"] { background: #E0DAC6; } /* cream cheese */
.cell[data-ch="1"] { background: #DFCFC5; } /* salmon */
.cell[data-ch="2"] { background: #D8C4C4; } /* tuna */
.cell[data-ch="3"] { background: #C4D8C4; } /* avocado */
.cell[data-ch="4"] { background: #BADACC; } /* cucumber */
.cell[data-ch="5"] { background: #DFDAB0; } /* egg */
.cell[data-ch="6"] { background: #DEC8B8; } /* prawn */
.cell[data-ch="7"] { background: #B8D0BC; } /* wasabi */

[data-theme="dark"] .cell[data-ch="0"] { background: #2C2416; }
[data-theme="dark"] .cell[data-ch="1"] { background: #2E1A12; }
[data-theme="dark"] .cell[data-ch="2"] { background: #2A1414; }
[data-theme="dark"] .cell[data-ch="3"] { background: #162214; }
[data-theme="dark"] .cell[data-ch="4"] { background: #122018; }
[data-theme="dark"] .cell[data-ch="5"] { background: #2A200E; }
[data-theme="dark"] .cell[data-ch="6"] { background: #2A1A10; }
[data-theme="dark"] .cell[data-ch="7"] { background: #101C12; }

/* ─── ON STATES — pixel food illustrations ─── */

/* Cream Cheese */
.cell.on[data-ch="0"] {
  background:
    repeating-linear-gradient(12deg, rgba(255,255,255,0.38) 0px, rgba(255,255,255,0.38) 3px, transparent 3px, transparent 9px),
    linear-gradient(160deg, #FFF9E8 0%, #F5E8C0 50%, #E8D898 100%);
  border-color: #C8B060 !important;
  border-radius: 2px !important;
}

/* Salmon */
.cell.on[data-ch="1"] {
  background:
    repeating-linear-gradient(-40deg, #FF9C70 0px, #FF9C70 2px, #F0603C 2px, #F0603C 5px, #FF8060 5px, #FF8060 7px, #E84832 7px, #E84832 10px);
  border-color: #C83820 !important;
  border-radius: 2px !important;
}

/* Tuna */
.cell.on[data-ch="2"] {
  background:
    radial-gradient(ellipse 75% 28% at 18% 50%, rgba(230,190,180,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 55% 22% at 72% 28%, rgba(220,175,165,0.38) 0%, transparent 100%),
    radial-gradient(ellipse 48% 18% at 55% 72%, rgba(210,165,155,0.32) 0%, transparent 100%),
    linear-gradient(160deg, #C41E3A 0%, #940C18 45%, #AC1620 70%, #880E18 100%);
  border-color: #680A12 !important;
  border-radius: 2px !important;
}

/* Avocado */
.cell.on[data-ch="3"] {
  background-image: url('../resources/avocado.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: #286022 !important;
    border-radius: 2px !important;
    background-blend-mode: multiply;
    background-color: #3A8030;
}

/* Cucumber */
.cell.on[data-ch="4"] {
  background:
    radial-gradient(circle 2px at 34% 34%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(circle 2px at 66% 34%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(circle 2px at 50% 70%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(ellipse 52% 62% at 50% 50%, #DCF0CC 0%, #AADE8C 55%, transparent 100%),
    radial-gradient(ellipse 92% 96% at 50% 50%, #58C068 0%, #36A850 52%, #1C6830 100%);
  border-color: #185828 !important;
  border-radius: 2px !important;
}

/* Egg */
.cell.on[data-ch="5"] {
  background:
    radial-gradient(ellipse 44% 48% at 52% 56%, #FFCC22 0%, #FF9900 55%, #D87800 100%),
    radial-gradient(ellipse 94% 92% at 50% 50%, #FFFCF0 0%, #FFF4C0 100%);
  border-color: #C09010 !important;
  border-radius: 2px !important;
}

/* Prawn */
.cell.on[data-ch="6"] {
  background:
    radial-gradient(ellipse 72% 82% at 55% 50%, rgba(255,205,185,0.55) 0%, transparent 60%),
    repeating-linear-gradient(92deg, #F07050 0px, #F07050 3px, #D84830 3px, #D84830 6px, #E86040 6px, #E86040 9px, #C84030 9px, #C84030 12px);
  border-color: #B03020 !important;
  border-radius: 2px !important;
}

/* Wasabi */
.cell.on[data-ch="7"] {
  background:
    repeating-linear-gradient(180deg, #1A5830 0px, #1A5830 3px, #0C3A1C 3px, #0C3A1C 5px, #1E6438 5px, #1E6438 8px, #123220 8px, #123220 10px),
    linear-gradient(90deg, rgba(28,80,48,0.7) 0%, transparent 40%, rgba(18,60,32,0.7) 100%);
  border-color: #082814 !important;
  border-radius: 2px !important;
}

/* ─── Ghost Ingredient Hints ─── */
.cell.ghost[data-ch="0"] { background: rgba(232,216,154,0.22) !important; }
.cell.ghost[data-ch="1"] { background: rgba(240,96,64,0.17) !important; }
.cell.ghost[data-ch="2"] { background: rgba(200,32,64,0.17) !important; }
.cell.ghost[data-ch="3"] { background: rgba(74,154,58,0.17) !important; }
.cell.ghost[data-ch="4"] { background: rgba(90,184,104,0.17) !important; }
.cell.ghost[data-ch="5"] { background: rgba(255,204,34,0.20) !important; }
.cell.ghost[data-ch="6"] { background: rgba(240,112,80,0.17) !important; }
.cell.ghost[data-ch="7"] { background: rgba(26,80,48,0.20) !important; }

/* ─── PIANO ROLL sub-cells ─── */
#piano-roll-grid .sub-cell.active {
  background: var(--row-color, var(--accent));
  filter: brightness(1.1);
  border: 1px solid rgba(0,0,0,0.2);
}