/* Styling for the arcade rating widget. Same discipline as /arcade-return.css, and
 * for the same reason: this file is linked INSIDE a cabinet, alongside a stylesheet
 * that was written with no idea this one exists.
 *
 * So the rules here are:
 *   1. Every selector starts `.arcade-feedback`. Nothing bare, no element selectors,
 *      no `button {}`. arcade.css defines `body`, `.panel`, `.eyebrow` and
 *      `.primary-button`, and every cabinet's own CSS defines its own versions —
 *      linking a shared stylesheet that touches any of those would not add a widget,
 *      it would restyle the game.
 *   2. Values are hardcoded, not `var(--token)`. A cabinet does not have to define
 *      the arcade's custom properties, and a `var()` with no fallback resolving to
 *      nothing is an invisible widget rather than an ugly one.
 *   3. It styles a block that flows in the cabinet's own layout. Unlike the return
 *      chip this is NOT fixed to the viewport — it belongs to a finished run, so it
 *      sits where the cabinet puts the mount node.
 *
 * ⚠️ Colours are NEUTRAL, not the shell's and not the cabinet's. That is a third
 *    option, and it is the right one here for the same reason as /arcade-return.css:
 *    this block renders inside a cabinet whose surface this file cannot know. The
 *    shell's navy would be invisible inside the elevator's dark summary panel and
 *    garish inside Thumbspell's cream one.
 *
 *    This header used to claim the colours were "the arcade's ... so the widget reads
 *    as the building rather than the game". They were in fact the ELEVATOR's cream
 *    and brass, copied via an arcade.css that had itself copied them from
 *    elevator/style.css — so the comment described the intent and the code did the
 *    opposite, and nobody could see it while the elevator was the only cabinet with a
 *    rating widget. Corrected 2026-08-24 with the shell restyle. The arcade's cyan
 *    survives on hover and focus only, where it is small enough to read as chrome. */

.arcade-feedback {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(15, 18, 30, 0.14);
  border-radius: 0.9rem;
  background: rgba(127, 140, 160, 0.09);
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  color: inherit;
  text-align: center;
}

/* Empty until a run finishes. Without this the cabinet shows a bordered blank box
   through the whole game — and `:empty` is exact here because the widget renders by
   replaceChildren(), so it is either empty or fully drawn, never whitespace. */
.arcade-feedback:empty {
  display: none;
}

.arcade-feedback-label {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}

.arcade-feedback-thanks {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.75;
}

.arcade-feedback-thumbs,
.arcade-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.arcade-feedback-thumb {
  min-width: 3.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(15, 18, 30, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  font-size: 1.35rem;
  line-height: 1.2;
  cursor: pointer;
}

.arcade-feedback-chip {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(15, 18, 30, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: #0f121e;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
}

.arcade-feedback-chip.is-skip {
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-weight: 500;
}

.arcade-feedback-thumb:hover,
.arcade-feedback-chip:hover,
.arcade-feedback-thumb:focus-visible,
.arcade-feedback-chip:focus-visible {
  background: #ffffff;
  border-color: #0e7490;
}

.arcade-feedback-thumb:focus-visible,
.arcade-feedback-chip:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

@media print {
  .arcade-feedback {
    display: none;
  }
}