/* Fizz uses the gate's night, toy letters and TV set. */
[hidden] { display: none !important; }

.fz-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: min(760px, 100% - 24px);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 0 10px;
}
.fz-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px 8px 11px;
  border-radius: 8px;
  background: var(--sign);
  color: var(--sign-ink);
  font: 800 1rem/1 var(--f-sign);
  text-decoration: none;
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--sign-ink), 0 5px 0 -2px var(--sign-deep);
}
.fz-back:hover { background: var(--sign-hi); }
.fz-back svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(180deg); }
#sound { justify-self: end; font-size: 1.15rem; padding: 8px 12px 7px; }

.fz-title { margin: 0; font: 400 clamp(1.7rem, 7vw, 2.7rem)/1 var(--f-toy); white-space: nowrap; }
.fzt { display: inline-flex; gap: .01em; }
.fzt span {
  color: #e65eaf;
  text-shadow:
    -.015em -.015em 0 #ffb8e6,
    .01em .02em 0 #6c2454, .02em .04em 0 #6c2454, .03em .06em 0 #6c2454,
    .05em .1em 0 #6c2454, .06em .15em .1em rgba(6, 3, 18, .65);
}
.fzt span:nth-child(2) { color: #f7be58; text-shadow: -.015em -.015em 0 #ffe4ad, .01em .02em 0 #6b4013, .02em .04em 0 #6b4013, .03em .06em 0 #6b4013, .05em .1em 0 #6b4013; }
.fzt span:nth-child(4) { color: #91d96d; text-shadow: -.015em -.015em 0 #d8ffc2, .01em .02em 0 #3a6330, .02em .04em 0 #3a6330, .03em .06em 0 #3a6330, .05em .1em 0 #3a6330; }

.fz-main {
  display: grid;
  justify-items: center;
  width: min(760px, 100% - 24px);
  margin: 0 auto;
  padding-bottom: 20px;
  -webkit-user-select: none;
  user-select: none;
}
.fz-set { width: auto; padding: 14px 14px 46px; }
.fz-screen {
  aspect-ratio: 9 / 16;
  height: min(72vh, 700px);
  width: auto;
  border-radius: 16px / 20px;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fz-screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.fz-ch { top: 10px; left: 12px; }
.fz-score { top: 10px; right: 12px; color: #f5d47c; }
.fz-misses { top: 36px; right: 12px; font-size: 1.1rem; color: #d7c3db; }
.fz-status {
  position: absolute;
  z-index: 3;
  left: 6%;
  right: 6%;
  bottom: 3%;
  margin: 0;
  color: #fff;
  font: 400 1.55rem/1 var(--f-osd);
  text-align: center;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}
.fz-status.good { color: #cbff9e; }
.fz-status.bad { color: #ffb6ba; }

.fz-card {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 20px;
  background: rgba(16, 8, 27, .74);
  text-align: center;
  cursor: default;
}
.fz-card p {
  max-width: 24ch;
  margin: 0;
  font: 400 1.3rem/1.1 var(--f-osd);
  color: #fff0d4;
  text-wrap: pretty;
}
.fz-card .fz-keys { color: #d4c7e6; font-size: 1.15rem; }
.fz-card .title { max-width: 9ch; margin: 0; font-size: 2rem; }
.fz-play {
  padding: 10px 24px 8px;
  border: 2px solid #ffe2a0;
  border-radius: 5px;
  background: #b33678;
  color: #fff;
  font: 800 1.05rem/1 var(--f-sign);
  cursor: pointer;
  box-shadow: 0 4px 0 #542045;
}
.fz-play:hover { background: #d54891; }
.fz-play:active { transform: translateY(2px); box-shadow: 0 2px 0 #542045; }
.fz-actions { display: flex; align-items: center; gap: 12px; }
.fz-share { font-size: 1.1rem; padding: 7px 12px 6px; }

.fz-stir {
  width: min(320px, 100%);
  min-height: 58px;
  margin-top: 8px;
  border: 3px solid #ffc46f;
  border-radius: 8px;
  background: #a83272;
  color: #fff6d8;
  font: 800 1.05rem/1 var(--f-sign);
  letter-spacing: .035em;
  box-shadow: 0 6px 0 #4b1c48;
  cursor: pointer;
  touch-action: none;
}
.fz-stir:hover:not(:disabled) { background: #c24285; }
.fz-stir:active:not(:disabled), .fz-stir.is-held { transform: translateY(4px); box-shadow: 0 2px 0 #4b1c48; }
.fz-stir:disabled { opacity: .45; cursor: default; }
.fz-best { margin: 17px 0 4px; color: var(--cream); }
.fz-about { max-width: 48ch; margin: 12px 0 0; text-align: center; }

@media (max-width: 540px) {
  .fz-bar { gap: 6px; }
  .fz-back { padding: 8px 9px 7px; font-size: .85rem; gap: 3px; }
  #sound { padding: 7px 8px 6px; font-size: .94rem; }
  .fz-screen { height: min(65vh, 640px); }
  .fz-set { padding: 10px 10px 40px; }
  .fz-card { padding: 14px; }
  .fz-card p { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fzt span { animation: none; }
  .fz-play, .fz-stir { transition: none; }
}