/* Perfect Pour — the few rules the shared shell does not already cover. */

/* Verdict colours by result band. Set as a data attribute rather than a class
   so the JS writes one value and never has to remember to clear the last one. */
#verdict[data-band="kanpai"]  { color: var(--gold); text-shadow: 0 0 26px rgba(231, 184, 75, 0.45); }
#verdict[data-band="perfect"] { color: var(--gold); }
#verdict[data-band="good"]    { color: var(--matcha); }
#verdict[data-band="ok"]      { color: var(--ink); }
#verdict[data-band="poor"]    { color: rgba(242, 231, 211, 0.65); }
#verdict[data-band="spill"]   { color: var(--ember); }

/*
 * The glass is the control, so the focus ring goes on the canvas. Inset
 * rather than outset: an outline drawn outside a canvas that fills its box
 * gets clipped by the stage and shows up as three sides of a rectangle.
 */
#canvas:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
  border-radius: 4px;
}

/* The round timer, as a hairline under the button rather than a number. A
   countdown in figures makes a relaxed game feel like an exam; a bar that
   quietly shortens is read without being looked at. */
#timer {
  width: min(100%, 28rem);
  height: 3px;
  border-radius: 999px;
  background: rgba(242, 231, 211, 0.12);
  overflow: hidden;
  flex: none;
}
#timer i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform-origin: left center;
  transition: background var(--dur-base) var(--ease-out);
}
#timer[data-low="true"] i { background: var(--ember); }

/* The bar switches meaning when the pour pauses: round clock while the beer
   is running, commit countdown while it is not. Colour is what tells them
   apart — gold reads as "your turn is still yours, for this long". */
#timer[data-commit="true"] i { background: var(--gold); }