:root {
  --red: #E4002B; --red-deep: #B80022; --cream: #FFF6EE; --card: #fff;
  --ink: #2B2622; --muted: #8A7E76;
  --grill: #4a4a4d; --grate-a: #1c1c1e; --grate-b: #34343a;
  --green: #2FAE5E; --amber: #F2A33C; --burn: #E4582B;
}
/* touch-action: manipulation stops iOS Safari's double-tap-to-zoom on fast taps
   (user-scalable=no is ignored by iOS); panning + pinch-zoom still work. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--cream); color: var(--ink);
  display: flex; justify-content: center;
  padding-bottom: 40px;          /* clear the fixed language switcher */
}
#app { width: 100%; max-width: 420px; min-height: 100%; }

/* ---- language picker + footer switcher ---- */
.screen.lang { align-items: center; justify-content: center; min-height: 100vh; text-align: center; }
.lang-prompt { font-size: 16px; color: var(--ink); margin: 2px 0; }
.lang-options { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lang-btn { min-width: 200px; }
#langbar { position: fixed; bottom: 0; left: 0; right: 0; height: 36px; z-index: 40;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  background: rgba(255,246,238,.92); border-top: 1px solid #eadfd4;
  backdrop-filter: blur(4px); }
.langopt { background: transparent; color: var(--muted); font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; }
.langopt.on { background: var(--red); color: #fff; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ---- screens ---- */
.screen { padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 12px; }
.screen.title, .screen.win { align-items: center; text-align: center; justify-content: center; min-height: 100vh; }
.screen h1 { color: var(--red-deep); font-size: 26px; line-height: 1.15; margin: 6px 0; }
.screen p { color: var(--muted); margin: 0; }
.tagline { font-size: 14px; }
.hero { font-size: 54px; }

/* ---- how-to-play panel (title screen) ---- */
.howto { background: #fff; border-radius: 14px; padding: 12px 14px; width: 100%; max-width: 320px;
  box-shadow: 0 2px 10px rgba(43,38,34,.08); text-align: left; }
.howto-title { font-weight: 800; color: var(--red-deep); margin: 0 0 8px; text-align: center; }
.howto .hstep { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink);
  margin: 7px 0; line-height: 1.25; }
.howto .hicon { font-size: 20px; flex: none; width: 30px; text-align: center; }
.howto .ok { color: #1c7a44; } .howto .amber { color: #c77f15; } .howto .burn { color: var(--burn); }
.howto .leg { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
/* a live tile that cycles through the doneness states so guests learn the cue */
.demo-tile { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #3a2a20;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  animation: demo-cook 4.4s infinite; }
@keyframes demo-cook {
  0%, 18%   { box-shadow: inset 0 0 0 3px var(--muted); }  /* cooking */
  30%, 42%  { box-shadow: inset 0 0 0 3px var(--amber); }  /* flip */
  54%, 72%  { box-shadow: inset 0 0 0 3px var(--green); }  /* perfect */
  86%, 100% { box-shadow: inset 0 0 0 3px var(--burn); }   /* burnt */
}
.big {
  background: linear-gradient(180deg, #ff3b53, var(--red)); color: #fff;
  font-size: 20px; font-weight: 800; padding: 14px 28px; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(228,0,43,.35);
}
.ghost { background: #fff; color: var(--muted); border: 1px solid #e2c9c9;
  padding: 10px 18px; border-radius: 14px; font-size: 13px; opacity: .7; }

/* ---- landing (front door) ---- */
.screen.landing { align-items: center; justify-content: center; min-height: 100vh; text-align: center; }
.landing .tagline { font-size: 14px; margin-top: 4px; line-height: 1.5; }
.landing .tagline .fr { color: var(--muted); }
/* French title matches the English <h1> size exactly — only the opacity differs. */
.landing .fr-title { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--red-deep); margin: 2px 0 0; opacity: .85; }
.landing-btns { display: flex; flex-direction: column; gap: 11px; margin-top: 18px;
  width: 100%; max-width: 320px; }
.landing-btns .big { text-decoration: none; display: block; text-align: center; }
.big.rsvp { background: linear-gradient(180deg, #3fa3ff, #1f7fd0);
  box-shadow: 0 6px 16px rgba(31,127,208,.32); }

/* ---- HUD ---- */
.hud { display: flex; justify-content: space-between; align-items: center;
  background: #3a2d27; color: #fff; border-radius: 12px; padding: 7px 10px; }
.hud .score b { font-size: 18px; }
/* guest-happiness meter: a face on a pill whose colour goes green -> red */
.happy { display: flex; align-items: center; justify-content: center; min-width: 56px;
  height: 34px; border-radius: 999px; border: 2px solid rgba(255,255,255,.7);
  transition: background-color .4s; }
.happy-face { font-size: 22px; line-height: 1; }
.happy-5 { background: #2FAE5E; }   /* happy */
.happy-4 { background: #7DC832; }
.happy-3 { background: #F2C200; }
.happy-2 { background: #F2882A; }
.happy-1 { background: #E4582B; }   /* angry */

/* ---- grill (first-person, looking down at the grates) ---- */
.grill { background: linear-gradient(180deg,#2a2a2c,#454548); border-radius: 6px 6px 12px 12px;
  padding: 10px 8px 12px; box-shadow: 0 8px 18px rgba(0,0,0,.25); perspective: 720px; }
.grill .lid { height: 26px; margin: -10px -8px 8px; border-radius: 50% 50% 10px 10px / 90% 90% 10px 10px;
  background: linear-gradient(180deg,#3a3a3d,#202022); box-shadow: inset 0 4px 8px rgba(255,255,255,.1); }
/* the grill bed: a trapezoid (narrower at the back) tinted darker toward the rear,
   tilted toward the viewer so the grates recede into the scene */
.cookbox {
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 42%),
    repeating-linear-gradient(180deg, var(--grate-a) 0 9px, var(--grate-b) 9px 13px);
  padding: 14px 12px; border-radius: 8px; position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,.7);
  /* depth comes from the tilt + the back row being smaller — no clip-path, so
     the back-row burner corners are never sliced off */
  transform: perspective(900px) rotateX(13deg); transform-origin: center bottom;
}
.grate { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 0.82fr 1fr;
  gap: 8px; transform-style: preserve-3d; position: relative; z-index: 1; }

/* animated flames under every burner (front + rear), aligned with the grate grid */
.burners { position: absolute; top: 14px; left: 12px; right: 12px; bottom: 14px; z-index: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 0.82fr 1fr;
  gap: 8px; pointer-events: none; }
.burner { position: relative; }
.flame { position: absolute; bottom: -2px; left: 22%; right: 22%; transform-origin: bottom;
  height: calc(5px + var(--lvl, .15) * 24px);
  background: linear-gradient(0deg, #ff2a00, #ff8a00 50%, #ffd000 82%, transparent);
  border-radius: 50% 50% 42% 42%; filter: blur(1.3px);
  opacity: calc(.35 + var(--lvl, .15) * .6);
  animation: flicker .22s infinite alternate; }
@keyframes flicker { from { transform: scaleY(.82) scaleX(.95); } to { transform: scaleY(1.14); } }
.slot { aspect-ratio: 1; border-radius: 9px; background: #00000022; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; font-size: 30px; transition: box-shadow .1s; }
/* depth: the back row (first 3 slots) reads smaller/further, the front row larger/nearer */
.grate > .slot:nth-child(-n+3) { font-size: 21px; transform: scale(.9); }
.grate > .slot:nth-child(n+4)  { font-size: 34px; }
.slot.empty { background: #00000033; border: 2px dashed #ffffff2e; }
.slot[disabled] { cursor: default; }      /* empty burners aren't interactive */
.slot.phase-cooking { box-shadow: inset 0 0 0 3px var(--muted); }
.slot.phase-perfect { box-shadow: inset 0 0 0 3px var(--green); }
.slot.phase-burnt   { box-shadow: inset 0 0 0 3px var(--burn); }
.slot.flip-due      { box-shadow: inset 0 0 0 3px var(--amber); animation: flip-glow .55s infinite alternate; }
@keyframes flip-glow {
  from { box-shadow: inset 0 0 0 3px var(--amber); }
  to   { box-shadow: inset 0 0 0 3px var(--amber), 0 0 9px 1px rgba(242,163,60,.95); }
}
/* food art on the grill (with an emoji fallback if an image is missing) */
.slot .food-img { width: 74%; height: auto; max-height: 78%; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
/* never flipped → one side chars: the food visibly darkens (lower quality, shorter window) */
.slot.charred .food-img, .slot.charred .emoji { filter: brightness(.5) saturate(.6); }
.slot.charred { box-shadow: inset 0 0 0 3px #7a4a23; }
.slot .tag { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px;
  color: #fff; margin-top: 2px; }
.slot .tag-go   { background: rgba(0,0,0,.5); }
.slot .tag-toss { background: var(--burn); }

/* ---- food grid (tap a food to start it cooking) ---- */
.cook-label { font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.foodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.food-cell { background: #fff; border-radius: 12px; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 2px 6px rgba(43,38,34,.1); border: 2px solid transparent;
  transition: transform .08s, box-shadow .08s; }
.food-cell:active { transform: scale(.95); }
.food-cell .fc-emoji { font-size: 26px; line-height: 1; }
.food-cell .fc-img { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
.food-cell .fc-name { font-size: 11px; font-weight: 600; color: var(--ink); }
.food-cell .fc-count { font-size: 11px; font-weight: 800; color: var(--red-deep); }
.food-cell:disabled { opacity: .45; box-shadow: none; cursor: default; }
.food-cell.done { background: #E5F7EC; opacity: 1; border-color: #b6e6c8; }
.food-cell.done .fc-count { color: #1c7a44; }

/* ---- serving counter: plated food + drop-off banner ---- */
.counter { display: flex; flex-direction: column; gap: 8px; }
.plates { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center;
  background: linear-gradient(180deg,#e7d3bd,#d8bf9f); border-radius: 10px; padding: 6px 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15); }
.plate { background: radial-gradient(circle at 50% 40%, #fff 62%, #eee 63%); border-radius: 999px;
  padding: 4px 9px; font-size: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.2); display: inline-flex;
  align-items: center; gap: 2px; }
.plate b { font-size: 12px; color: var(--ink); }
.plates-empty { color: #8a6f57; font-size: 12px; }
.dropoff-zone:empty { display: none; }
.dropoff { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  align-items: center; background: #fff; color: var(--ink); border-radius: 12px;
  padding: 8px 12px; text-align: left; box-shadow: 0 3px 10px rgba(0,0,0,.12);
  border: 2px solid var(--green); animation: do-pop .5s infinite alternate; }
.do-img { width: 46px; height: 46px; object-fit: contain; grid-row: 1 / span 2; }
.do-emoji { font-size: 38px; grid-row: 1 / span 2; }
.do-text { display: flex; flex-direction: column; gap: 1px; }
.do-msg { font-size: 15px; font-weight: 800; line-height: 1.15; }
.do-tap { font-size: 12px; font-weight: 700; color: var(--green); }
.do-bar { grid-column: 1 / -1; height: 6px; margin-top: 6px; border-radius: 3px;
  background: #eee; overflow: hidden; }
.do-bar i { display: block; height: 100%; width: 100%; background: var(--green); transition: width .12s linear; }
@keyframes do-pop {
  from { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
  to   { box-shadow: 0 3px 10px rgba(0,0,0,.12), 0 0 0 4px rgba(47,174,94,.25); }
}

/* ---- serve ---- */
/* green so players read it as the final "go" step; pulses once the spread is ready */
.serve { width: 100%; background: linear-gradient(180deg,#3fbf6a,#1f9e50); color: #fff;
  font-size: 16px; font-weight: 800; padding: 14px; border-radius: 13px;
  box-shadow: 0 6px 16px rgba(31,158,80,.3); transition: box-shadow .2s; }
/* lights up when the whole spread is ready (still tappable anytime) */
.serve.ready { background: linear-gradient(180deg,#36c46a,#0f8f43);
  box-shadow: 0 0 0 0 rgba(47,174,94,.55); animation: ready-pulse 1.1s infinite; }
@keyframes ready-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,174,94,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(47,174,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,174,94,0); }
}

/* ---- win ---- */
.fireworks { font-size: 40px; }
.finalScore { font-size: 52px; font-weight: 900; color: var(--red-deep); }
.breakdown { list-style: none; padding: 0; margin: 0; text-align: left;
  background: #fff; border-radius: 12px; padding: 12px 16px; width: 100%; max-width: 280px; }
.breakdown li { display: flex; justify-content: space-between; padding: 3px 0;
  border-bottom: 1px solid #f0e6dd; font-size: 14px; }
.breakdown li:last-child { border-bottom: none; }
.hero img { width: 260px; max-width: 84%; height: auto; border-radius: 16px;
  box-shadow: 0 8px 22px rgba(180,0,34,.14); }

/* ---- intro countdown (animation before a round) ---- */
.screen.countdown { align-items: center; justify-content: center; min-height: 100vh; gap: 0; text-align: center; }
.cd { width: 100%; font-size: clamp(44px, 16vw, 88px); font-weight: 900;
  color: var(--red-deep); line-height: 1.05; text-align: center; }
.cd.pop { animation: cd-pop .5s ease-out; }
@keyframes cd-pop {
  0%   { transform: scale(.3) rotate(-8deg); opacity: 0; }
  45%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.cd-hint { width: 100%; text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }

/* ---- serve-early confirmation modal ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; background: rgba(43,38,34,.55); padding: 20px; }
.modal { background: #fff; border-radius: 16px; padding: 20px; max-width: 320px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal-msg { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0 0 16px; line-height: 1.35; }
.modal-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.modal-secondary { background: transparent; color: var(--muted); font-size: 13px; padding: 8px;
  border-radius: 10px; text-decoration: underline; }

/* ---- floating "+N" points feedback ---- */
.floater { position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 50;
  font-weight: 900; font-size: 20px; color: #1c9e50; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  animation: float-up .9s ease-out forwards; }
.floater.neg { color: var(--burn); }
@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, -95%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -185%) scale(1); }
}