/* 🍕 Kugelfam Pizza — warm pizzeria colors, big kid-friendly buttons */
:root {
  --tomato: #e63946;
  --tomato-dark: #c1121f;
  --cheese: #ffb703;
  --cheese-light: #ffe8b0;
  --basil: #2a9d3a;
  --dough: #fff7ec;
  --crust: #b5651d;
  --ink: #3a2b1e;
}

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

body {
  font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", "Segoe UI", sans-serif;
  background: var(--dough);
  background-image: radial-gradient(#ffe8b0 12%, transparent 13%),
    radial-gradient(#ffe8b0 12%, transparent 13%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  color: var(--ink);
  min-height: 100vh;
  padding: 16px;
  overflow-x: hidden;
}

/* ---- floating kosher topping decorations ---- */
.decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.decorations span {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.35;
  animation: floaty linear infinite;
}
@keyframes floaty {
  0%   { transform: translateY(105vh) rotate(0deg); }
  100% { transform: translateY(-10vh) rotate(360deg); }
}

header, main, footer, .my-orders { position: relative; z-index: 1; }

/* ---- logo ---- */
.logo { text-align: center; margin: 8px 0 20px; }
.logo-pizza {
  font-size: 4rem;
  display: inline-block;
  animation: wiggle 2.5s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.1); }
}
.logo h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--tomato);
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--cheese);
}
.logo h1 span { color: var(--basil); }
.logo.small { margin-bottom: 16px; }
.logo.small h1 { font-size: clamp(1.4rem, 5vw, 2.2rem); }
.tagline { margin-top: 6px; font-size: 1rem; color: var(--crust); }

/* ---- cards ---- */
.card {
  background: #fff;
  border: 4px solid var(--cheese);
  border-radius: 24px;
  box-shadow: 0 8px 0 rgba(181, 101, 29, 0.25);
  padding: 20px;
  max-width: 560px;
  margin: 0 auto 20px;
}
.card section { margin-bottom: 22px; }
.card h2 { font-size: 1.25rem; margin-bottom: 10px; }
.card h3 { margin: 14px 0 8px; }
.hint { font-size: 0.9rem; color: #8a7a68; margin-bottom: 8px; }

/* ---- inputs ---- */
input[type="text"], select {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: 12px 14px;
  border: 3px solid var(--cheese);
  border-radius: 14px;
  background: var(--dough);
  color: var(--ink);
  outline: none;
}
input[type="text"]:focus { border-color: var(--tomato); }

/* ---- segmented pickers ---- */
.segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-btn {
  flex: 1;
  min-width: 90px;
  font: inherit;
  font-size: 1rem;
  padding: 12px 8px;
  border: 3px solid var(--cheese);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.seg-btn small { font-size: 0.75rem; color: #8a7a68; }
.seg-btn:active { transform: scale(0.93); }
.seg-btn.selected {
  background: var(--cheese);
  border-color: var(--tomato);
  font-weight: bold;
}

/* ---- counter ---- */
.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.counter button {
  font-size: 1.6rem;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--tomato);
  background: #fff;
  cursor: pointer;
  transition: transform 0.1s;
}
.counter button:active { transform: scale(0.85); }
.count-display {
  text-align: center;
  min-width: 90px;
  background: var(--cheese-light);
  border-radius: 16px;
  padding: 8px 12px;
}
.count-display span { font-size: 2.2rem; font-weight: bold; display: block; }
.count-display small { color: var(--crust); }

/* ---- topping/side chips ---- */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.chip {
  font: inherit;
  font-size: 1rem;
  padding: 12px 8px;
  border: 3px solid var(--cheese);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chip .chip-emoji { font-size: 1.8rem; }
.chip:active { transform: scale(0.92); }
.chip.selected {
  background: var(--basil);
  border-color: var(--basil);
  color: #fff;
  font-weight: bold;
  transform: scale(1.03);
}
.chip.out {
  opacity: 0.45;
  cursor: not-allowed;
  background: #eee;
  position: relative;
}
.chip .gone-tag {
  font-size: 0.7rem;
  background: var(--tomato);
  color: #fff;
  border-radius: 8px;
  padding: 1px 8px;
}

/* ---- big button ---- */
.big-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 18px;
  border: none;
  border-radius: 20px;
  background: var(--tomato);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--tomato-dark);
  transition: transform 0.1s, box-shadow 0.1s;
  letter-spacing: 1px;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tomato-dark); }
.big-btn.slim { font-size: 1.1rem; padding: 12px; width: auto; }
.danger-btn {
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 14px;
  border: 2px solid var(--tomato);
  border-radius: 12px;
  background: #fff;
  color: var(--tomato);
  cursor: pointer;
}
.error { color: var(--tomato); font-weight: bold; margin-top: 10px; text-align: center; }

/* ---- my orders (cousin status cards) ---- */
.my-orders { max-width: 560px; margin: 0 auto 20px; }
.my-orders h2 { text-align: center; margin-bottom: 10px; }
.status-card {
  background: #fff;
  border: 4px solid var(--basil);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
  box-shadow: 0 6px 0 rgba(42, 157, 58, 0.25);
}
.status-card .status-line { font-size: 1.3rem; font-weight: bold; margin: 6px 0; }
.status-card .order-summary { font-size: 0.95rem; color: #6b5d4d; }
.status-card .countdown {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--tomato);
  font-variant-numeric: tabular-nums;
}
.status-card.ready {
  border-color: var(--cheese);
  background: var(--cheese-light);
  animation: party 0.6s ease-in-out infinite alternate;
}
@keyframes party {
  from { transform: rotate(-1deg) scale(1); }
  to { transform: rotate(1deg) scale(1.02); }
}

/* ---- kitchen ---- */
.kitchen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .kitchen-grid { grid-template-columns: 3fr 2fr; align-items: start; }
  .kitchen-grid .card { max-width: none; margin: 0; }
}
.kitchen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.totals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.totals .pill {
  background: var(--cheese-light);
  border: 2px solid var(--cheese);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 0.95rem;
}
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  border: 3px solid var(--cheese);
  border-radius: 16px;
  padding: 14px;
  background: var(--dough);
}
.order-card.fresh { animation: pop-in 0.5s ease; border-color: var(--tomato); }
@keyframes pop-in {
  0% { transform: scale(0.7); background: var(--cheese); }
  100% { transform: scale(1); }
}
.order-card.done { opacity: 0.55; }
.order-card .who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.order-card .who b { font-size: 1.2rem; }
.order-card .when { font-size: 0.8rem; color: #8a7a68; }
.order-card .what { font-size: 1rem; margin-bottom: 4px; }
.order-card .req {
  background: #fff;
  border-left: 4px solid var(--tomato);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0;
  font-style: italic;
}
.order-card .status-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.status-btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 10px 14px;
  border-radius: 12px;
  border: 3px solid var(--cheese);
  background: #fff;
  cursor: pointer;
  transition: transform 0.1s;
}
.status-btn:active { transform: scale(0.93); }
.status-btn.working-btn.active { background: var(--cheese); border-color: var(--crust); }
.status-btn.done-btn.active { background: var(--basil); border-color: var(--basil); color: #fff; }
.status-badge {
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 10px;
  background: #eee;
}
.status-badge.working { background: var(--cheese); }
.status-badge.done { background: var(--basil); color: #fff; }

/* ---- menu manager ---- */
details.manager summary {
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: bold;
  list-style: none;
  user-select: none;
}
details.manager summary::-webkit-details-marker { display: none; }
details.manager summary .chev {
  display: inline-block;
  transition: transform 0.2s;
  color: var(--tomato);
}
details.manager[open] summary .chev { transform: rotate(90deg); }
details.manager[open] summary { margin-bottom: 8px; }

.chip-grid.manage .chip { cursor: pointer; }
.manage-chip { position: relative; padding-bottom: 34px; }
.manage-chip.out { cursor: pointer; opacity: 0.6; }
.mini-row {
  position: absolute;
  bottom: 6px;
  display: flex;
  gap: 6px;
}
.mini {
  font-size: 0.85rem;
  padding: 3px 8px;
  border: 2px solid var(--cheese);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.mini:active { transform: scale(0.9); }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.add-row input { flex: 2; min-width: 140px; }
.add-row input.emoji-input { flex: 0 0 90px; min-width: 90px; text-align: center; }
.add-row select { flex: 1; min-width: 110px; width: auto; }

/* ---- confetti ---- */
.confetti-piece {
  position: fixed;
  top: -40px;
  font-size: 1.8rem;
  z-index: 99;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

footer {
  text-align: center;
  color: #8a7a68;
  font-size: 0.85rem;
  margin: 30px 0 10px;
}

/* ---- iPad & bigger: everything fits on ONE screen, no scrolling ---- */
@media (min-width: 700px) {
  body { padding: 10px 16px; }
  .logo { margin: 0 0 10px; }
  .logo-pizza { font-size: 2rem; }
  .logo h1 { font-size: 1.9rem; }
  .tagline { font-size: 0.85rem; margin-top: 0; }
  .card { max-width: 960px; padding: 16px 22px; }
  .card section { margin-bottom: 12px; }
  .card h2 { font-size: 1.05rem; margin-bottom: 6px; }
  .hint { font-size: 0.8rem; margin-bottom: 4px; }
  input[type="text"], select { font-size: 1rem; padding: 9px 12px; }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-template-areas:
      "who     toppings"
      "amount  toppings"
      "crisp   sides"
      "special sides"
      "send    send";
    column-gap: 26px;
  }
  .sec-who { grid-area: who; }
  .sec-amount { grid-area: amount; }
  .sec-toppings { grid-area: toppings; }
  .sec-crisp { grid-area: crisp; }
  .sec-sides { grid-area: sides; }
  .sec-special { grid-area: special; }
  .sec-send { grid-area: send; }

  .chip-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .chip { padding: 8px 6px; font-size: 0.85rem; gap: 2px; }
  .chip .chip-emoji { font-size: 1.3rem; }
  .seg-btn { padding: 9px 6px; font-size: 0.9rem; min-width: 80px; }
  .counter { margin-top: 10px; gap: 14px; }
  .counter button { width: 48px; height: 48px; font-size: 1.2rem; }
  .count-display { min-width: 76px; padding: 5px 10px; }
  .count-display span { font-size: 1.6rem; }
  .big-btn { font-size: 1.25rem; padding: 13px; }
  .manage-chip { padding-bottom: 32px; }
  footer { margin: 14px 0 4px; }
}