/* Gut Feeling — "card hand on the dinner table" look.
   Palette: deep teal table, paper cream, butter yellow, tomato red, ink. */

:root {
  --paper: #FAF3E3;
  --paper-edge: #EFE3C8;
  --ink: #26221B;
  --green: #2E7D4F;
  --table: #0E5450;
  --table-deep: #073634;
  --table-light: #167A72;
  --tomato: #E2452D;
  --butter: #FFC53D;
  --display: "Lilita One", sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
}

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

body {
  font-family: var(--body);
  color: var(--paper);
  background: radial-gradient(ellipse at 50% 120%, var(--table-light) 0%, var(--table) 55%, var(--table-deep) 100%) fixed;
}

button, input { font: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; }

.game { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* -------- budget meters -------- */

.budget { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; padding: clamp(.5rem, 2svh, 1.2rem) 1.5rem 0; }

.budget__meter { background: rgba(0, 0, 0, .28); border-radius: 14px; padding: .5rem 1rem .55rem; min-width: 130px; }

.budget__label {
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .3rem;
}

.budget__bar { height: 8px; background: rgba(255, 255, 255, .18); border-radius: 4px; overflow: hidden; }

.budget__fill { height: 100%; border-radius: inherit; background: var(--butter); transition: width .4s; }

.budget__left { font-size: .62rem; font-weight: 700; opacity: .75; margin-top: .3rem; }

/* mobile-only compact variants, hidden on desktop */
.budget__abbr, .budget__mini { display: none; }

.budget__meter--warn .budget__fill { background: #F5933B; }
.budget__meter--hot .budget__fill { background: var(--tomato); }
.budget__meter--over .budget__fill { background: var(--tomato); }
.budget__meter--over { outline: 2px solid var(--tomato); }
.budget__meter--over .budget__label, .budget__meter--over .budget__left { color: #FFB4A6; opacity: 1; }

/* -------- stage -------- */

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; padding: clamp(.9rem, 5svh, 3.2rem) 1.5rem 1.2rem; text-align: center; }

.stage--end { justify-content: safe center; }

.stage__round { font-weight: 900; text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--butter); }

.stage__meal {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: min(clamp(2.2rem, 6vw, 3.4rem), 5.5svh); line-height: 1.05;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}

.stage__prompt { font-weight: 700; opacity: .9; max-width: 34rem; }

.stage__count { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .15em; margin-top: .3rem; opacity: .8; }

/* -------- plate -------- */

.plate {
  width: min(290px, 62vw, 30svh); aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); border: 9px solid #fffdf4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 0 0 13px var(--paper-edge);
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: .8rem;
}

.plate__food { text-align: center; color: var(--ink); }

.plate__food .art { height: 3.6rem; width: auto; display: block; margin: 0 auto; }

.plate__cost {
  font-weight: 900; font-size: .72rem; background: var(--tomato); color: #fff;
  border-radius: 999px; padding: .18em .75em; display: inline-block; margin-top: .35rem;
}

.plate__seat { color: #b3a88d; font-weight: 900; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }

.plate__seat--prompt { max-width: 72%; line-height: 1.5; font-size: .82rem; color: #8a7b4f; }

/* -------- this round's picks -------- */

.picks {
  margin-top: 1.1rem; display: flex; flex-direction: column; gap: .7rem;
  background: rgba(0, 0, 0, .28); border-radius: 16px; padding: .9rem 1.3rem;
  text-align: left; max-width: 34rem; height: min(84px, 10svh); overflow-y: auto; justify-content: center;
  min-width: 20rem;
}

/* empty state reserves its space (no first-pick layout jump) but shows nothing */
.picks--empty { visibility: hidden; }

.picks__item { display: flex; align-items: center; gap: .9rem; }

.picks__item .art { height: 2.6rem; width: 2.6rem; flex: none; margin: 0; font-size: .5rem; }

.picks__name { display: block; font-weight: 900; color: var(--butter); }

.picks__costs { display: block; font-size: .82rem; opacity: .85; margin-top: .1rem; }

/* -------- the hand -------- */

.hand { display: flex; justify-content: center; align-items: flex-end; padding: .5rem 1rem clamp(1.5rem, 3.5svh, 2.4rem); }

.hand > form { display: contents; }

/* interstitial: the round's hand keeps its place in the layout (so the plate
   never changes size) but the cards themselves are hidden — just the button
   centred on the empty felt. The picks panel needs two rows here where the
   playing screen needs one; the difference comes out of the hidden hand area
   so the plate maths stays identical. */
.stage--break .picks { height: min(132px, 16svh); }
.hand--finished { position: relative; margin-top: calc(min(84px, 10svh) - min(132px, 16svh)); }
.hand--finished .card { visibility: hidden; }
.hand__next {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
.hand__next .button { margin-top: 0; }

.hand > :nth-child(1) { --tilt: -10deg; --drop: 20px; }
.hand > :nth-child(2) { --tilt: -5deg;  --drop: 7px; }
.hand > :nth-child(3) { --tilt: 0deg;   --drop: 0px; }
.hand > :nth-child(4) { --tilt: 5deg;   --drop: 7px; }
.hand > :nth-child(5) { --tilt: 10deg;  --drop: 20px; }

.card {
  width: 176px; height: min(236px, 26svh); background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 1.1rem .7rem 1rem; text-align: center;
  display: flex; flex-direction: column; overflow: hidden;
  margin: 0 -6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0px));
  transition: transform .15s;
}

button.card:focus-visible { transform: rotate(0deg) translateY(-24px); z-index: 5; position: relative; }

@media (hover: hover) {
  button.card:hover { transform: rotate(0deg) translateY(-24px); z-index: 5; position: relative; }
}

.card .art { height: min(4rem, 8svh); width: auto; display: block; margin: 0 auto; flex: none; }

.card__name { flex: 1; display: flex; align-items: center; justify-content: center; margin-top: .6rem; font-weight: 900; font-size: .95rem; line-height: 1.25; }

.card--played {
  background: #FFF3D1; border-color: var(--butter);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}



/* typographic tile for foods with no drawing yet */
.art--tile {
  display: flex; align-items: center; justify-content: center;
  height: 3.2rem; width: 3.2rem; margin: 0 auto; border-radius: 10px;
  background: var(--green); color: var(--paper);
  font-family: var(--display); font-size: .62rem; text-transform: uppercase;
  line-height: 1.1; padding: .3em; text-align: center;
}

/* -------- splash -------- */

.splash { justify-content: center; min-height: 100dvh; padding-bottom: 3rem; }

.splash__fan { display: flex; align-items: flex-end; margin-bottom: 1.2rem; }

.splash__card {
  width: 108px; height: 118px; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 -8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0px));
}

.splash__card .art { height: 4rem; width: auto; }

.splash__fan > :nth-child(1) { --tilt: -14deg; --drop: 16px; }
.splash__fan > :nth-child(2) { --tilt: -7deg;  --drop: 5px; }
.splash__fan > :nth-child(4) { --tilt: 7deg;   --drop: 5px; }
.splash__fan > :nth-child(5) { --tilt: 14deg;  --drop: 16px; z-index: -1; }

.splash__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 6rem); line-height: .95;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, .35), 5px 5px 0 rgba(0, 0, 0, .35);
  color: var(--butter);
  -webkit-text-stroke: 2px var(--ink);
  margin: .2rem 0 .6rem;
}

.splash__how {
  list-style: none; counter-reset: step; max-width: 30rem; margin: .8rem 0 0; padding: 0;
  text-align: left; display: flex; flex-direction: column; gap: .8rem;
}

.splash__how li { counter-increment: step; display: flex; gap: .9rem; align-items: baseline; font-size: 1.08rem; opacity: .95; }

.splash__how li::before {
  content: counter(step);
  flex: none; align-self: flex-start;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}

.splash__how strong { color: var(--butter); }

/* -------- buttons -------- */

.button {
  background: var(--butter); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 999px; padding: .7em 1.8em; font-weight: 900; font-size: 1.25rem;
  box-shadow: 0 5px 0 var(--ink); margin-top: 1.4rem;
  transition: transform .12s, box-shadow .12s;
}

@media (hover: hover) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
}

.stage__home { margin-top: .9rem; font-size: .8rem; font-weight: 700; color: var(--paper); opacity: .65; text-decoration: underline; }

/* -------- till receipt (end of game) -------- */

.receipt {
  background: #fff; color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.5; text-align: left;
  width: min(360px, 92vw); padding: 1.3rem 1.2rem 2rem;
  margin-top: 1.2rem; transform: rotate(-1.2deg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 95% 100%, 90% calc(100% - 9px), 85% 100%, 80% calc(100% - 9px), 75% 100%, 70% calc(100% - 9px), 65% 100%, 60% calc(100% - 9px), 55% 100%, 50% calc(100% - 9px), 45% 100%, 40% calc(100% - 9px), 35% 100%, 30% calc(100% - 9px), 25% 100%, 20% calc(100% - 9px), 15% 100%, 10% calc(100% - 9px), 5% 100%, 0 calc(100% - 9px));
}

.receipt__brand { font-family: var(--display); text-align: center; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }

.receipt__sub { text-align: center; color: #6b6353; }

.receipt__rule { border-top: 2px dashed #c9bfa8; margin: .55rem 0; }

.receipt__meal { font-weight: 700; text-transform: uppercase; margin-top: .35rem; }

.receipt__columns { color: #6b6353; text-transform: uppercase; font-size: .68rem; }

.receipt__line { display: flex; justify-content: space-between; gap: .8rem; }

.receipt__item { text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.receipt__amount { flex: none; }

.receipt__line--over { color: var(--tomato); font-weight: 700; }

.receipt__line--killer { color: var(--tomato); font-weight: 700; }

.receipt__thanks { text-align: center; margin-top: .5rem; color: #6b6353; }

/* -------- gate (password page) -------- */

.gate { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-top: 1rem; width: min(320px, 82vw); }

.gate__input {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: .6em 1.2em; font-weight: 700; font-size: 1.05rem; text-align: center;
}

.gate__input::placeholder { color: #8b8371; }

.gate .button { margin-top: .6rem; }

.gate__alert { margin-top: 1.1rem; color: var(--butter); font-weight: 700; }

/* -------- win-screen celebration -------- */

.stage__meal--pulse { animation: title-pulse .55s ease-in-out 3; }

@keyframes title-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* -------- confetti (win screen) -------- */

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }

.confetti i {
  position: absolute; top: -20px; left: var(--x);
  width: var(--size); height: calc(var(--size) * 1.4);
  background: var(--piece); border-radius: 2px; opacity: 0;
  animation: confetti-fall var(--fall) linear var(--delay) 3;
}

@keyframes confetti-fall {
  0% { transform: translateY(-5vh) rotate3d(1, 1, .3, 0turn); opacity: 1; }
  100% { transform: translateY(108vh) rotate3d(1, 1, .3, 2.5turn); opacity: 1; }
}

/* -------- small screens -------- */

/* -------- viewport lock: narrow (phone) or short (squat window) screens --------
   The game pins to the visible viewport so the hand never falls off the bottom;
   the plate is the flexible element that absorbs leftover height. overflow-y
   auto is the safety valve for pathologically small screens. */

@media (max-width: 640px), (max-height: 1000px) {
  .game { height: 100svh; overflow-y: auto; }
  .stage { min-height: 0; }
  .hand > :nth-child(1), .hand > :nth-child(5) { --drop: min(20px, 1.2svh); }
  .hand > :nth-child(2), .hand > :nth-child(4) { --drop: min(7px, .6svh); }
  .plate {
    flex: 1 1 auto; width: auto; aspect-ratio: 1 / 1;
    min-height: 120px; max-height: min(74vw, 360px); max-width: min(74vw, 360px);
    margin-top: auto; margin-bottom: auto;
  }

  /* plate contents scale with the room the plate actually gets */
  .plate { gap: min(1.2rem, 2svh); }
  .plate__food .art { height: min(3.6rem, 7svh); }
  .plate__cost { font-size: min(.72rem, 1.5svh); }
  .plate__seat { font-size: min(.74rem, 1.5svh); }
  .plate__seat--prompt { font-size: min(1rem, 2.2svh); }

  /* slimmer meters: the remaining figure moves into the label row */
  .budget__meter { padding: .4rem .8rem .45rem; min-width: 118px; }
  .budget__left { display: none; }
}

/* -------- small screens -------- */

@media (max-width: 640px) {

  /* meters: one compact row, full names, bars only (no numbers) */
  .budget { flex-wrap: nowrap; gap: .35rem; padding: .7rem .6rem 0; }
  .budget__meter { flex: 1; min-width: 0; padding: .4rem .45rem .45rem; border-radius: 10px; }
  .budget__label { justify-content: center; gap: 0; font-size: .52rem; letter-spacing: .05em; margin-bottom: .25rem; }
  .budget__figures, .budget__left, .budget__abbr, .budget__mini { display: none; }
  .budget__bar { height: 6px; }

  .splash__card { width: 84px; height: 92px; }
  .splash__card .art { height: 3rem; }
  .splash__how li { font-size: .98rem; }

  .stage { padding: .9rem 1rem .6rem; gap: .3rem; }
  .stage__meal { font-size: clamp(1.5rem, 4.6svh, 2.4rem); }
  .stage__round { font-size: .66rem; }
  .stage__prompt { font-size: .95rem; }
  .stage__count { font-size: .72rem; margin-top: .15rem; }
  .plate { border-width: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .35), inset 0 0 0 10px var(--paper-edge); }
  .plate__food .art { height: 3.1rem; }
  .plate__cost { font-size: .68rem; }
  .plate__seat { font-size: .66rem; }
  .plate__seat--prompt { font-size: .95rem; }

  .picks { margin-top: .7rem; padding: .5rem .9rem; gap: .4rem; height: min(88px, 10.5svh); min-width: 88vw; }
  .stage--break .picks { height: min(150px, 18svh); }
  .hand--finished { margin-top: calc(min(88px, 10.5svh) - min(150px, 18svh)); }
  .picks__item { gap: .6rem; }
  .picks__item .art { height: 1.9rem; width: 1.9rem; }
  .picks__name { font-size: .92rem; }
  .picks__costs { font-size: .76rem; }

  /* cards spread over two rows (3+2) so they stay big enough to read and tap */
  .hand { flex-wrap: wrap; gap: .55rem .5rem; padding: .3rem .75rem 1.4rem; }
  .hand > :nth-child(n) { --drop: 0px; }
  .hand > :nth-child(1) { --tilt: -2.5deg; }
  .hand > :nth-child(2) { --tilt: 1.5deg; }
  .hand > :nth-child(3) { --tilt: -1.5deg; }
  .hand > :nth-child(4) { --tilt: 2.5deg; }
  .hand > :nth-child(5) { --tilt: -2deg; }
  .card { width: 29vw; height: auto; min-height: min(150px, 17svh); margin: 0; padding: .7rem .35rem .6rem; border-width: 2px; border-radius: 12px; }
  .card .art { height: min(2.5rem, 6svh); }
  .card__name { font-size: .95rem; margin-top: .35rem; }

  .button { font-size: 1.1rem; margin-top: 1rem; }

}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}