/* The packing floor's game kit (pk-game.js): everything around a station's
   canvas, the same in every game. The phone column, the HUD (score, the
   round timer, the streak), the boss's line, the title and end cards, the
   mute and BOSS! buttons. The Flat look: no outlines, flat fills, a calm
   palette. docs/pages/packaging/game-kit.md has the rules. */

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

:root {
  /* the Flat palette (the same as PkGame.K) */
  --pg-page: #102229;
  --pg-floor: #16303b;
  --pg-wall: #1c3a47;
  --pg-panel: #1c3a47;
  --pg-card: #f4f1de;
  --pg-ink: #1f2a37;
  --pg-text: #fff8ea;
  --pg-teal: #2a9d8f;
  --pg-hero: #e76f51;
  --pg-accent: #f4a261;
  --pg-good: #8ab17d;
  --pg-alarm: #ff4438;
  --pg-bag: #e9c46a;
  --pg-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.pg-page {
  background: var(--pg-page);
  color: var(--pg-text);
  font-family: var(--pg-sans);
  font-weight: 600;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pg { height: 100%; display: flex; justify-content: center; }
.js .pg-noscript { display: none; }
.pg-noscript { padding: 24px; }

/* The game is a phone-shaped column, centred on wide screens. */
.pg-game {
  position: relative;
  width: min(100vw, 520px, calc(100dvh * 0.66));
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}

/* A wide screen, edge to edge: the packing floor on the left (PackMap.panel,
   in packaging-map.js and .css: the same panel as the menu's, its width set by
   the window's height), the game in the rest. The media query is PackMap.WIDE;
   packaging-menu.css lays the menu out the same way. The panel leaves the game
   at least its phone shape; pk-game.js's resize() has the game fill the rest. */
@media (min-width: 1200px) and (min-height: 560px) {
  .pg-has-floor .pg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 100%);
    gap: 16px;
    padding: 0 16px;
  }
  .pg-has-floor .pg-game { width: auto; min-width: 0; }
  .pg-has-floor .pg-floor { max-width: calc(100vw - 100dvh * 0.66 - 48px); }
}

/* ---- HUD ---- */
.pg-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.pg-hud__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pg-score, .pg-streak { font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-block; }
.pg-hud__right { text-align: right; }
.pg-mult {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  font-style: normal; font-size: 15px; vertical-align: 5px; background: rgba(255, 255, 255, .14);
}
.pg-mult[data-m="2"] { background: var(--pg-good); color: var(--pg-ink); }
.pg-mult[data-m="3"] { background: var(--pg-accent); color: var(--pg-ink); }
.pg-mult[data-m="4"] { background: var(--pg-alarm); color: #fff; animation: pg-throb .5s ease-in-out infinite alternate; }
.pg-time {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--pg-accent); color: var(--pg-ink);
}
.pg-time.is-low { background: var(--pg-alarm); color: #fff; animation: pg-throb .5s ease-in-out infinite alternate; }
.pg-bump { animation: pg-bump .22s ease-out; }
@keyframes pg-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pg-throb { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---- The boss's line ---- */
.pg-boss {
  margin: 0 4px 6px; min-height: 40px; padding: 8px 12px; border-radius: 6px;
  background: var(--pg-panel); font-size: 14px; line-height: 1.3;
  display: flex; gap: 8px; align-items: center; transition: background .2s;
}
.pg-boss__who { flex: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.pg-boss.is-yell { background: rgba(255, 68, 56, .35); }
.pg-boss.is-praise { background: rgba(138, 177, 125, .35); }
.pg-boss.is-fresh .pg-boss__say { animation: pg-in .25s ease-out; }
@keyframes pg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- The game ---- */
.pg-canvas { flex: 1 1 auto; min-height: 0; width: 100%; border-radius: 6px; display: block; touch-action: none; }

/* ---- Cards ---- */
.pg-card {
  position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-50%);
  padding: 26px 22px 22px; border-radius: 8px;
  background: var(--pg-card); color: var(--pg-ink); text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  animation: pg-pop .35s cubic-bezier(.2, 1.6, .4, 1); z-index: 3;
}
@keyframes pg-pop { from { transform: translateY(-50%) scale(.8); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
.pg-card[hidden] { display: none; }
.pg-card__kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pg-logo { margin: 4px 0 14px; font-size: 60px; line-height: .95; font-weight: 800; letter-spacing: -.04em; color: var(--pg-hero); }
.pg-pitch { margin: 0 0 12px; font-size: 18px; }
.pg-how { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 17px; font-weight: 500; text-align: left; }
.pg-chip { display: inline-block; padding: 2px 10px; border-radius: 4px; text-transform: uppercase; font-size: 15px; font-weight: 700; background: var(--pg-accent); }
.pg-chip--alarm { background: var(--pg-alarm); color: #fff; }
.pg-chip--hero { background: var(--pg-hero); color: #fff; }
.pg-chip--teal { background: var(--pg-teal); color: #fff; }
.pg-go {
  display: block; width: 100%; padding: 16px; border: 0; border-radius: 6px;
  font: inherit; font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  background: var(--pg-teal); color: #fff; cursor: pointer;
}
.pg-go:active { transform: translateY(2px); }
.pg-go:focus-visible { outline: 4px solid var(--pg-ink); outline-offset: 3px; }
.pg-keys { margin: 12px 0 0; font-size: 13px; opacity: .55; font-weight: 500; }
.pg-best { margin: 6px 0 0; font-size: 14px; }
.pg-leave { display: inline-block; margin-top: 12px; color: var(--pg-ink); opacity: .6; font-size: 15px; }

.pg-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.pg-stars i {
  width: 58px; height: 58px; background: #ddd6bd;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pg-stars i:nth-child(2) { transform: translateY(-8px) scale(1.15); }
.pg-stars i.is-on { background: var(--pg-accent); animation: pg-star .45s cubic-bezier(.2, 1.8, .4, 1) both; }
.pg-stars i:nth-child(2).is-on { animation-name: pg-star2; }
@keyframes pg-star { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes pg-star2 { from { transform: translateY(-8px) scale(0) rotate(-40deg); } to { transform: translateY(-8px) scale(1.15) rotate(0); } }
.pg-end__score { margin: 6px 0 0; font-size: 44px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-end__say { margin: 8px 0 12px; font-size: 15px; font-style: italic; font-weight: 500; }
.pg-end__stats {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 10px; padding: 12px 14px;
  border-radius: 6px; background: #e9e4cc; text-align: left; font-size: 15px; font-weight: 500;
}
.pg-end__stats dt, .pg-end__stats dd { margin: 0; }
.pg-end__stats dd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-end__stats .is-pay { font-size: 18px; }
.pg-end__next { margin: 0 0 14px; font-size: 15px; color: var(--pg-hero); min-height: 1em; }

/* ---- Small buttons ---- */
.pg-mute, .pg-bossbtn {
  position: absolute; bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)); z-index: 2;
  height: 40px; border: 0; border-radius: 20px; cursor: pointer; font: inherit;
}
.pg-mute { right: 14px; width: 40px; background: rgba(0, 0, 0, .3); color: #fff; font-size: 18px; }
.pg-mute[aria-pressed="true"] { opacity: .45; text-decoration: line-through; }
.pg-bossbtn { left: 14px; padding: 0 14px; background: var(--pg-alarm); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; }

/* BACK TO EXCEL: the spreadsheet over everything */
.pg-excel { position: fixed; inset: 0; z-index: 50; background: #fff; }
.pg-excel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pg-bump, .pg-mult[data-m="4"], .pg-time.is-low { animation: none; }
}

/* Going from one station's page to another (or from the menu): the browser
   cross-fades between the pages instead of blanking (Chrome, Edge, Safari;
   elsewhere a plain page load), and the floor panel, the same on both, holds
   still (packaging-map.css names it). The game pages' scripts are render-blocking, so the new page's first
   frame already has its panel and game. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }