/* Bürokratopia – Minispiel „Kantinen-Bestellung merken“. Präfix s-kantinenfolge-, nur Variablen aus app.css.
   Sechs Teller in zwei Spalten (≥ 44 px), Tellerfarbe über --farbe (per JS gesetzt, kein Inline-Style im HTML). */
.s-kantinenfolge-tablett { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 10px; padding: 10px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: var(--radius); touch-action: manipulation; }
@media (min-width: 480px) { .s-kantinenfolge-tablett { grid-template-columns: repeat(3, 1fr); } }
.s-kantinenfolge-teller { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 96px; padding: 10px 8px 9px; border: 2px solid var(--linie2); border-radius: 14px; background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: border-color var(--dauer), box-shadow var(--dauer), transform .12s, opacity var(--dauer); }
.s-kantinenfolge-teller[disabled] { cursor: default; }
.s-kantinenfolge-tablett:not(.zeigt) .s-kantinenfolge-teller[disabled]:not(.leuchtet):not(.richtig):not(.falsch) { opacity: .75; }
.s-kantinenfolge-teller:not([disabled]):hover { border-color: var(--akzent); }
.s-kantinenfolge-teller:not([disabled]):active { transform: scale(.97); }
.s-kantinenfolge-speise { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--farbe, #999) 65%, #fff) 0 22%, var(--farbe, #999) 23% 72%, var(--flaeche3) 73% 100%); box-shadow: inset 0 0 0 2px var(--linie2), 0 1px 2px rgba(17,24,39,.08); transition: transform .18s var(--kurve), box-shadow .18s; }
.s-kantinenfolge-name { font-size: .82rem; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.s-kantinenfolge-nr { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--akzent); color: #fff; font-size: .78rem; font-weight: 800; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.s-kantinenfolge-nr:empty { display: none; }
.s-kantinenfolge-teller.leuchtet { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 30%, transparent), var(--schatten-hoch); opacity: 1; z-index: 1; }
.s-kantinenfolge-teller.leuchtet .s-kantinenfolge-speise { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--akzent), 0 0 0 6px color-mix(in srgb, var(--farbe, #999) 35%, transparent); }
.s-kantinenfolge-teller.richtig { border-color: var(--gruen); background: var(--gruen-hell); }
.s-kantinenfolge-teller.falsch { border-color: var(--rot); background: var(--rot-hell); animation: s-kantinenfolge-wackeln .3s ease-in-out; }
.s-kantinenfolge-tablett.fertig .s-kantinenfolge-teller { opacity: .6; }
.s-kantinenfolge-sprech { min-height: 2.6em; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-k); background: var(--flaeche); border: 1px solid var(--linie); font-size: .94rem; line-height: 1.35; }
.s-kantinenfolge-sprech::before { content: "Kantinenkraft: "; font-weight: 700; color: var(--leise); }
.s-kantinenfolge-start { display: grid; place-items: center; margin: 4px 0 8px; }
.s-kantinenfolge-start .knopf { min-width: 220px; }
.s-kantinenfolge-regel { margin: 6px 0 0; color: var(--leise); }
@keyframes s-kantinenfolge-wackeln { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) {
  .s-kantinenfolge-teller, .s-kantinenfolge-speise { transition: none; }
  .s-kantinenfolge-teller.falsch { animation: none; }
  .s-kantinenfolge-teller.leuchtet { box-shadow: none; }
  .s-kantinenfolge-teller.leuchtet .s-kantinenfolge-speise { transform: none; box-shadow: inset 0 0 0 2px var(--akzent); }
}