/* ============ FIZZ — the menu ============
   A second, NARROW stylesheet loaded only by /fizz, on top of style.css, in
   the shape breakui.css set for BREAK: every selector here is inside
   #fizz-menu or prefixed fz-, so nothing it does can reach another page, and
   every value is a var() off the arcade's own tokens.

   The one picture on it is the game's own: fizz-hero.png is a frame of the
   diner drawn by fizz.js, kept at the art's native 224 x 150 and scaled up
   here with nearest-neighbour, so it is the same pixels the cabinet paints. */

/* ---------------------------------------------------- menu versus cabinet */
/* Both sections live in the document at all times and exactly one is shown. */
body.fz-menuing #lobby { display: none; }
body:not(.fz-menuing) #fizz-menu { display: none; }

#fizz-menu {
  width: 100%; max-width: var(--container);
  display: flex; flex-direction: column; gap: var(--s5);
}
#fizz-menu > .cab-back { align-self: flex-start; margin-bottom: calc(var(--s4) * -1); }

/* ------------------------------------------------------------- the hero */
/* The picture and the words side by side, never one over the other: the
   diner is busy pixel art, and type laid on it is type nobody can read. On a
   wide screen the picture is exactly twice its size, so every art pixel is a
   whole 2x2 block; on a phone it takes the card's width above the words. */
.fz-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--elevated); overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-panel);
}
.fz-hero-art {
  display: block; width: 100%; height: auto; aspect-ratio: 224 / 150;
  image-rendering: pixelated;
}
.fz-hero-body { padding: var(--s4); min-width: 0; }
.fz-hero-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.fz-hero-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 6vw, 44px); line-height: 1; letter-spacing: 0.02em;
}
.fz-hero-sub { color: var(--dim); font-size: 14px; line-height: 1.5; margin-top: var(--s3); max-width: 460px; }
/* The one primary action on the page, and it is allowed to be big. */
.fz-cta {
  margin-top: var(--s4); min-height: 56px; width: 100%; max-width: 320px;
  font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
}
@media (min-width: 900px) {
  .fz-hero { grid-template-columns: 448px minmax(0, 1fr); align-items: center; }
  .fz-hero-art { width: 448px; height: 300px; border-right: 1px solid var(--border); }
  .fz-hero-body { padding: var(--s5); }
}

/* ------------------------------------------------------------- the modes */
.fz-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .fz-modes { grid-template-columns: 1fr; } }

.fz-mode {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-panel); padding: var(--s4); min-width: 0;
  display: flex; flex-direction: column; gap: var(--s3);
}
.fz-mode-head { display: flex; align-items: center; gap: var(--s2); min-height: 26px; }
.fz-mode-name {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.fz-mode-sub { color: var(--dim); font-size: 13.5px; line-height: 1.55; flex: 1 1 auto; }
.fz-mode-foot {
  color: var(--faint); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
}
.fz-mode .btn-ghost { width: 100%; justify-content: center; text-align: center; }

/* How it plays: three rules, each named in the accent. */
.fz-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.fz-rules li { color: var(--dim); font-size: 13px; line-height: 1.55; }
.fz-rules b {
  display: block; margin-bottom: 2px;
  font-family: var(--body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow);
}

/* --------------------------------------------------------------- chips */
.fz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border-radius: var(--r-chip); padding: 5px 8px;
  color: var(--dim); border: 1px solid var(--border);
}
.fz-chip-on { color: var(--yellow); border-color: var(--yellow-line); background: var(--yellow-dim); }
.fz-chip-good { color: var(--good); border-color: rgba(74, 222, 128, 0.35); }