/* Spud & Root: retail/production/index.html, the Packing Floor's menu
   (packaging-menu.js). The Flat look of the games: no outlines, flat fills,
   calm, chunky for a phone; a column no wider than 520 px. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --pm-page: #102229;
  --pm-floor: #16303b;
  --pm-wall: #1c3a47;
  --pm-circle: #21434f;
  --pm-rail: #1f3e4a;
  --pm-teal: #2a9d8f;
  --pm-hero: #e76f51;
  --pm-belt: #264653;
  --pm-bag: #e9c46a;
  --pm-card: #f4f1de;
  --pm-ink: #16303b;
  --pm-muted: #8fa8b2;
  --pm-alarm: #ff4438;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.pm-page {
  min-height: 100vh;
  background: var(--pm-page);
  color: var(--pm-card);
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.pm {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
  background: var(--pm-floor);
}
.js .pm-noscript { display: none; }
.pm-noscript a { color: var(--pm-bag); }

/* The header: back, the title, the boss button. */
.pm-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 -14px;
  padding: 10px 14px 14px;
  background: var(--pm-wall);
}
.pm-leave {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--pm-circle);
  color: var(--pm-card);
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}
.pm-kicker { margin: 0; color: var(--pm-muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.pm-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.05; }
.pm-boss {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--pm-alarm);
  color: #fff;
  font: 700 16px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.pm-boss:active { transform: translateY(2px); }
.pm-pitch { margin: 16px 2px 6px; color: var(--pm-card); font-size: 17px; font-weight: 500; line-height: 1.35; }
.pm-total { margin: 0 2px 16px; color: var(--pm-muted); font-size: 15px; }
.pm-total b { color: var(--pm-bag); font-size: 20px; font-variant-numeric: tabular-nums; }

/* The line: the stations down a belt, in the order the potatoes go. */
.pm-line {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.pm-line::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 4px;
  width: 8px;
  border-radius: 4px;
  background: var(--pm-belt);
}
.pm-stop { position: relative; }
.pm-stop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 14px;
  height: 6px;
  margin-top: -3px;
  background: var(--pm-rail);
}
.pm-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 12px 10px 10px;
  border-radius: 8px;
  background: var(--pm-card);
  color: var(--pm-ink);
  text-decoration: none;
  transition: transform 0.12s ease-out;
}
.pm-card:hover { transform: translateX(3px); }
.pm-card:active { transform: scale(0.98); }
.pm-card:focus-visible { outline: 4px solid var(--pm-bag); outline-offset: 3px; }
.pm-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--pm-circle);
}
.pm-card__icon svg { width: 44px; height: 44px; }
.pm-card__text { display: grid; gap: 3px; min-width: 0; }
.pm-card__name { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; line-height: 1.1; }
.pm-card__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--pm-teal);
  color: #fff;
  font: 700 14px/1 system-ui, sans-serif;
}
.pm-card__job { font-size: 15px; font-weight: 600; line-height: 1.25; }
.pm-card__tag { color: #5a6f78; font-size: 14px; font-weight: 500; }
.pm-stars { display: flex; gap: 2px; }
.pm-stars i {
  width: 18px;
  height: 18px;
  background: #d6d2bd;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pm-stars i.is-on { background: var(--pm-bag); }
.pm-start {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--pm-hero);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pm-card--start { box-shadow: inset 0 0 0 3px var(--pm-hero); }

@media (max-width: 380px) {
  .pm-card { grid-template-columns: 48px 1fr; }
  .pm-card__icon { width: 48px; height: 48px; }
  .pm-stars { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-card { transition: none; }
}


/* The production floor map, above the cards: packaging-map.js and .css. */
.pm-map { margin: 0 0 18px; }

/* A wide screen, edge to edge, laid out like a game's page (pk-game.css): the
   floor panel on the left (PackMap.panel, the same panel at the same size as
   on every game), and where the game would be, the stars, BOSS! and the nine
   cards, stretched to the window's height. No scrolling. */
@media (min-width: 1200px) and (min-height: 560px) {
  .pm-has-floor body.pm-page { background: var(--pm-page); }
  .pm-has-floor .pm {
    width: auto;
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 16px;
    background: none;
  }
  .pm-has-floor .pg-floor { grid-column: 1; grid-row: 1 / -1; max-width: calc(100vw - 100dvh * 0.66 - 48px); }   /* pk-game.css's */
  .pm-has-floor .pm-head { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; margin: 12px 0 0; padding: 0; background: none; pointer-events: none; }
  .pm-has-floor .pm-boss { pointer-events: auto; }
  .pm-has-floor .pm-leave, .pm-has-floor .pm-pitch, .pm-has-floor .pm-map { display: none; }
  .pm-has-floor .pm-head__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the panel shows the title */
  .pm-has-floor .pm-total { grid-column: 2; grid-row: 1; align-self: center; margin: 12px 0 0; pointer-events: none; }   /* over the head: BOSS! takes the clicks */
  .pm-has-floor .pm-line { grid-column: 2; grid-row: 2; grid-auto-rows: minmax(0, 1fr); gap: 8px; min-height: 0; margin: 12px 0; }
  .pm-has-floor .pm-card { height: 100%; min-height: 0; padding-top: 4px; padding-bottom: 4px; }
}
/* a short window: the cards without their tag line, so all nine still fit */
@media (min-width: 1200px) and (min-height: 560px) and (max-height: 860px) {
  .pm-has-floor .pm-card__tag { display: none; }
  .pm-has-floor .pm-card__icon { width: 40px; height: 40px; }
  .pm-has-floor .pm-card__icon svg { width: 32px; height: 32px; }
  .pm-has-floor .pm-card { grid-template-columns: 40px 1fr auto; }
}

/* To a game and back: a cross-fade instead of a blank (pk-game.css has the
   other half). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }