/* The County Fair (town/fall-fair.html). The scene is a canvas; everything else
   here is laid over it: the buttons for things you can tap, the speech box,
   the pocket, the way out and the sound button, and the prompt at the gate.
   docs/pages/fair.md. */

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #070916;
  /* Nothing on this page is for selecting or copying: on an iPhone, a finger
     held still in a game would start selecting text or bring up the copy
     menu. fair.js also cancels the touch's default on the scene. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.fair-page {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
}
.fair {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* a long press (pouring the cider, holding the Zipper's bar) mustn't bring up iOS's menu */
  -webkit-touch-callout: none;
  touch-action: none;
  background: #070916;
}
.fair__scene,
.fair__sky {
  position: absolute;
  inset: 0;
  display: block;
}
.fair__sky {
  pointer-events: none;
}

/* ---------- Things you can tap ---------- */
.spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spot {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.spot:focus {
  outline: none;
}
.spot:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: -3px;
}
.spot[hidden] {
  display: none;
}
.fair.is-locked .spot:not(.spot--always) {
  pointer-events: none;
}
.spot--booth {
  border-radius: 6px;
}

/* ---------- Way out, sound ---------- */
.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
  z-index: 5;
}
.leave,
.sound {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}
.leave {
  left: max(12px, env(safe-area-inset-left));
}
.sound {
  right: max(12px, env(safe-area-inset-right));
}
.sound[hidden] {
  display: none;
}
.sound[aria-pressed="false"] {
  background: #d9cfb8;
}
.leave:hover,
.sound:hover {
  background: var(--logo-yellow);
}

/* ---------- The pocket: tickets, what you're holding ---------- */
.pocket {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  top: calc(max(12px, env(safe-area-inset-top)) + 50px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  max-width: calc(100% - 24px);
  z-index: 4;
  pointer-events: none;
}
.pocket[hidden] {
  display: none;
}
.pocket__tickets,
.pocket__held {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.9em 0.25em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: #ffd84d;
  border: var(--stroke) solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.pocket__tickets {
  /* a strip of tickets: notched ends */
  background:
    radial-gradient(circle at 0 50%, transparent 7px, #ffd84d 7.5px) left / 50% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 7px, #ffd84d 7.5px) right / 50% 100% no-repeat;
  border-style: solid;
}
.pocket__cash {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.8em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--herb-light);
  border: var(--stroke) solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.pocket__cash.is-empty {
  background: #e8dcc2;
  color: var(--ink-soft);
}
.pocket__tickets[hidden] {
  display: none;
}
.pocket__cash.is-bump,
.pocket__tickets.is-bump {
  animation: pocket-bump 0.45s var(--ease-spring);
}
.pocket__tickets b {
  font-size: 1.25em;
  line-height: 1;
}
.pocket__held {
  background: var(--white);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.pocket__held.is-bump {
  animation: pocket-bump 0.45s var(--ease-spring);
}
.pocket__icon {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
}
.pocket__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pocket__held[hidden] {
  display: none;
}

@keyframes pocket-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18) rotate(-3deg); }
  100% { transform: scale(1); }
}

/* ---------- The speech box ---------- */
.talk {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(100% - 24px, 520px);
  padding: 12px 14px 12px;
  background: var(--white);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 6;
  animation: talk-in 0.22s var(--ease-out);
}
.talk[hidden] {
  display: none;
}
@keyframes talk-in {
  from { opacity: 0; translate: -50% 10px; }
  to { opacity: 1; translate: -50% 0; }
}
.talk__who {
  margin: 0 36px 4px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.talk__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font: 700 1.3rem/1 var(--font-display);
  cursor: pointer;
}
.talk__close:hover {
  background: var(--cream);
}
.talk__say {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.talk__say p {
  margin: 0 0 0.35em;
}
.talk__say p:last-child {
  margin-bottom: 0;
}
.talk__say .talk__other {
  color: var(--ink-soft);
}
.talk__say .talk__other b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.talk__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.talk__opts:empty {
  display: none;
}
.talk__opt {
  padding: 0.4em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: left;
}
.talk__opt:hover {
  background: var(--logo-yellow);
}
.talk__opt.is-heard {
  color: var(--ink-soft);
  border-color: #b8ad95;
  background: #f4efe3;
}
.talk__opt.is-doing {
  font-style: italic;
  background: var(--white);
}
.talk__opt.talk__done {
  margin-left: auto;
}

/* ---------- A game's bar, its end card, and the prize shelf ---------- */
/* During a game or a ride the usual top bar and pocket step aside: the
   game's bar has Done, the game's name, your money and what's going on. */
.fair.in-game .spots,
.fair.is-riding .spots,
.fair.in-game .topbar,
.fair.in-game .pocket,
.fair.is-riding .topbar,
.fair.is-riding .pocket {
  display: none;
}
.gamebar {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  max-width: 600px;
  margin: 0 auto;
  padding: 6px 8px 7px 6px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  font-family: var(--font-display);
}
.gamebar[hidden] {
  display: none;
}
.gamebar__title {
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gamebar__money {
  display: flex;
  gap: 6px;
}
.gamebar__money b {
  padding: 0.05em 0.55em;
  font-weight: 700;
  font-size: 0.92rem;
  border: 2px solid var(--ink);
  border-radius: 7px;
}
.gamebar__cash {
  background: var(--herb-light);
}
.gamebar__tickets {
  background: #ffd84d;
}
.gamebar__tickets::after {
  content: " tix";
  font-weight: 500;
  font-size: 0.8em;
}
.gamebar__tickets[hidden] {
  display: none;
}
.gamebar__status {
  grid-column: 1 / -1;
  padding: 0 4px;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gamebar__status:empty {
  display: none;
}
.gamebar__done,
.gameover__share,
.gameover__again,
.gameover__done,
.shelf__done,
.shelf__take {
  padding: 0.3em 0.8em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.gamebar__done::before {
  content: "\2039\00a0";
  font-weight: 700;
}
.gameover {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(100% - 28px, 420px);
  padding: 12px 14px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 6;
  animation: talk-in 0.25s var(--ease-out);
}
.gameover[hidden] {
  display: none;
}
.gameover__text {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
}
.gameover__buttons {
  display: flex;
  gap: 10px;
}
.gameover__again {
  flex: 1;
  padding: 0.55em 1em;
  font-size: 1.05rem;
  background: var(--logo-yellow);
}
.gameover__done {
  padding: 0.55em 1em;
  font-size: 1.05rem;
}
/* Share, on the photo booth's card: the main button, Again beside it */
.gameover__share {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.55em 1em;
  font-size: 1.05rem;
  background: var(--logo-yellow);
  touch-action: manipulation;
}
.gameover__share svg {
  width: 1.1em;
  height: 1.1em;
  margin-top: -0.15em;
}
.gameover__share[hidden],
.gameover__again[hidden] {
  display: none;
}
.gameover.has-share .gameover__again {
  flex: 0 1 auto;
  background: var(--cream);
}
.gamebar__done:hover,
.gameover__share:hover,
.gameover__again:hover,
.gameover__done:hover,
.shelf__done:hover,
.shelf__take:hover:not(:disabled) {
  background: var(--logo-yellow);
}
.shelf {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(100% - 24px, 420px);
  padding: 10px 12px 12px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 6;
}
.shelf[hidden] {
  display: none;
}
.shelf__list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.shelf__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
}
.shelf__icon {
  width: 28px;
  height: 28px;
  flex: none;
}
.shelf__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.shelf__name {
  flex: 1;
  font-weight: 600;
}
.shelf__cost {
  font-weight: 700;
  padding: 0.1em 0.5em;
  background: #ffd84d;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: 0.9rem;
}
.shelf__cost::after {
  content: " tickets";
  font-weight: 500;
  font-size: 0.8em;
}
.shelf__cost.is-yours {
  background: #fff5dc;
  font-weight: 500;
}
.shelf__cost.is-yours::after {
  content: none;
}
.shelf__take:disabled {
  opacity: 0.45;
  cursor: default;
}
.shelf__done {
  display: block;
  margin-left: auto;
}


/* ---------- The gate prompt ---------- */
.gate-prompt {
  position: absolute;
  left: 50%;
  bottom: max(16%, 110px);
  translate: -50% 0;
  padding: 0.5em 1.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  white-space: nowrap;
  cursor: pointer;
  z-index: 6;
  animation: prompt-bob 1.6s ease-in-out infinite;
}
.gate-prompt[hidden] {
  display: none;
}
.gate-prompt.is-going {
  animation: prompt-go 0.6s var(--ease-out) forwards;
}
@keyframes prompt-bob {
  0%, 100% { translate: -50% 0; }
  50% { translate: -50% -6px; }
}
@keyframes prompt-go {
  to { opacity: 0; translate: -50% 20px; scale: 0.9; }
}

/* ---------- Without JavaScript ---------- */
.fair__noscript {
  position: absolute;
  left: 50%;
  top: max(64px, 8%);
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.5em 1em;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  text-align: center;
  z-index: 7;
}
html.js .fair__noscript {
  display: none;
}
html:not(.js) .fair__scene,
html:not(.js) .fair__sky,
html:not(.js) .spots,
html:not(.js) .gate-prompt,
html:not(.js) .pocket {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gate-prompt,
  .talk,
  .pocket__cash.is-bump,
  .pocket__tickets.is-bump {
    animation: none;
  }
}