/* Nutri Duel: game layer on top of seam.css */
:root {
  /* Nutri-Score grade chips: semantic colours, kept muted next to marigold and sky */
  --ns-a: oklch(52% 0.13 150); --ns-b: oklch(66% 0.14 135); --ns-c: oklch(80% 0.14 95);
  --ns-d: oklch(70% 0.15 60);  --ns-e: oklch(58% 0.18 35);
  --bar-h: 72px;
  --pic-h: 200px;
}

/* bar: mirrored on the seam, the piles left and right, New game in the middle */
.bar {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
  min-height: var(--bar-h); padding: var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}
.bar p { margin: 0; }
.bar__side { display: flex; align-items: baseline; gap: var(--space-sm); }
.bar__side--them { justify-content: flex-end; }
.bar__side strong { font: 700 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; text-underline-offset: 6px; }
.bar__side--you strong { text-decoration: underline 4px var(--color-you); }
.bar__side--them strong { text-decoration: underline 4px var(--color-them); }
.bar__mid { display: grid; justify-items: center; gap: var(--space-xs); padding: 0 var(--space-md); }
.bar__mark { font: 700 var(--text-lg)/1 var(--font-display); }
.btn--small { min-height: 36px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.unit { color: var(--color-muted); font-size: var(--text-sm); }
.msg { margin: 0; min-height: 1.5em; font-weight: 700; }

/* table */
.table { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px, 300px) minmax(0,1fr); min-height: calc(100svh - var(--bar-h) - 72px); }
.side { display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
.side--you { background: var(--color-you); }
.side--them { background: var(--color-them); }
.seam {
  display: grid; align-content: center; justify-items: center; gap: var(--space-md); text-align: center;
  padding: var(--space-xl) var(--space-lg); background: var(--color-paper);
  border-inline: 2px solid var(--color-ink);
}
.seam p { margin: 0; }
.seam__turn { font: 700 var(--text-lg)/1.2 var(--font-display); }
.seam__verdict { font-size: var(--text-md); min-height: 3em; }
.seam__pot { color: var(--color-muted); font-size: var(--text-sm); min-height: 1.5em; }

/* card */
.card {
  width: min(100%, 340px); background: var(--color-paper); border-radius: var(--radius-card);
  border: var(--rule-hair) solid var(--color-ink); overflow: hidden;
}
.card--empty { display: grid; place-items: center; min-height: 420px; color: var(--color-muted); background: var(--color-you-2); }
.card--empty p { margin: 0; }
/* the whole pack is always visible: scaled down inside a fixed box, never cropped */
.card__pic { height: var(--pic-h); background: var(--color-paper-2); display: flex; align-items: center; justify-content: center; padding: var(--space-sm); }
.card__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.card__head { padding: var(--space-md) var(--space-md) var(--space-sm); display: grid; gap: var(--space-xs); }
.card__name { font: 700 var(--text-lg)/1.15 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__brand { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.card__brand a { text-underline-offset: 2px; }
.stats { list-style: none; margin: 0; padding: 0 var(--space-sm) var(--space-sm); }
.stat {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-sm);
  width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-inner);
  background: transparent; color: var(--color-ink); font: inherit; text-align: left;
}
li + li .stat { border-top: var(--rule-hair) solid var(--color-rule); border-radius: 0; }
.stat__label small { color: var(--color-muted); font-size: var(--text-sm); }
.stat__value { font-weight: 700; font-variant-numeric: tabular-nums; }
button.stat { cursor: pointer; transition: background-color var(--dur-short) linear; }
button.stat:hover { background: var(--color-you-2); }
button.stat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.stat.is-picked { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-inner); }
.stat.is-picked .stat__label small { color: var(--color-paper-3); }
.card.is-lost { opacity: .5; transition: opacity var(--dur-med) var(--ease); }

/* your turn to pick: the rows read as buttons */
.card.is-picking { outline: 3px solid var(--color-ink); outline-offset: 4px; }
.card.is-picking .stats { display: grid; gap: var(--space-xs); padding-top: var(--space-xs); }
.card.is-picking li + li .stat { border-top: 0; }
.card.is-picking button.stat { border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-inner); background: var(--color-paper); }
.card.is-picking button.stat:hover { background: var(--color-you-2); }

.grade { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-inner); font: 700 var(--text-md)/1 var(--font-display); color: var(--color-paper); }
.grade--a { background: var(--ns-a); } .grade--b { background: var(--ns-b); } .grade--c { background: var(--ns-c); color: var(--color-ink); }
.grade--d { background: var(--ns-d); color: var(--color-ink); } .grade--e { background: var(--ns-e); }

/* the opponent's card turns over on the reveal */
.flip { width: min(100%, 340px); perspective: 1200px; }
.flip__inner { display: grid; transform-style: preserve-3d; transition: transform var(--dur-med) var(--ease); }
.flip__inner > * { grid-area: 1 / 1; backface-visibility: hidden; }
.flip__inner > .card--them { transform: rotateY(180deg); }
.flip.is-open .flip__inner { transform: rotateY(180deg); }
.card--back { display: grid; place-items: center; min-height: 420px; background: var(--color-them-2); }
.card--back span { font: 700 6rem/1 var(--font-display); color: var(--color-ink); opacity: .25; }

/* new-game dialog */
.setup {
  width: calc(100% - 2 * var(--space-md)); max-width: 560px; max-height: calc(100svh - 2 * var(--space-md));
  padding: 0; border: 2px solid var(--color-ink); border-radius: var(--radius-card);
  background: var(--color-paper); color: var(--color-ink);
}
.setup::backdrop { background: linear-gradient(90deg, var(--color-you) 50%, var(--color-them) 50%); opacity: .92; }
.setup form { display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); }
.setup h1 { font-size: var(--text-xl); }
.setup__lede { margin: calc(-1 * var(--space-md)) 0 0; color: var(--color-muted); }
.setup__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-sm); }
.setup__group legend { font-weight: 700; padding: 0; margin-bottom: var(--space-sm); }
.setup__row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-lg); align-items: start; }
.setup__field { display: grid; gap: var(--space-sm); font-weight: 700; }
.setup__field select { font: 400 var(--text-md) var(--font-body); min-height: 44px; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: 0 var(--space-md); background: var(--color-paper); color: var(--color-ink); }
.setup__actions { display: flex; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) linear;
}
.pill:hover span { background: var(--color-paper-2); }
.pill input:checked + span { background: var(--color-ink); color: var(--color-paper); }
.pill input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.foot { padding: var(--space-md) var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.foot p { margin: 0; }
.foot .foot__source { margin-top: var(--space-xs); }

/* phones: the seam turns horizontal, the computer on top, you at the bottom near your thumb */
@media (max-width: 760px) {
  :root { --pic-h: 130px; --bar-h: 64px; }
  .bar { padding: var(--space-sm) var(--space-md); }
  .bar__mark { font-size: var(--text-md); }
  .unit { display: none; }
  .table { grid-template-columns: 1fr; }
  .side--them { order: 1; padding: var(--space-md); }
  .seam { order: 2; border-inline: 0; border-block: 2px solid var(--color-ink); padding: var(--space-md); }
  .side--you { order: 3; padding: var(--space-md); }
  .card--back, .card--empty { min-height: 200px; }
  .card--back span { font-size: 3.5rem; }
  .setup form { padding: var(--space-lg) var(--space-md); }
  .setup__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
}