/* The Yakult production line that the selfie, the bingo and its admin share: process-white floor, brushed-steel trays,
   a graphite control strip, one Yakult red for "now", and the blue foil cap as the reward. The fun is in the machine:
   belts that keep moving, caps that snap onto bottles, and big heavy numbers. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wdth,wght@62.5..100,400..900&display=swap');

:root {
  --white: #f2f3f0;        /* process white: the floor */
  --panel: #ffffff;
  --steel: #c9ced2;        /* trays and belts */
  --steel-2: #dde1e4;
  --steel-3: #8d959b;
  --graphite: #1e2225;     /* the control strip, and all text */
  --graphite-2: #4a5157;
  --red: #e3001b;          /* Yakult red: whatever is happening now */
  --red-2: #b30015;
  --cobalt: #2251c4;       /* the foil cap */
  --cobalt-2: #173a94;
  --ui: 'Noto Sans Thai', system-ui, sans-serif;
  --code: 'Noto Sans Thai', system-ui, sans-serif;   /* numbers: the same face, heavy and tabular (the dot-matrix face read badly on the projector) */
  --snap: cubic-bezier(.34, 1.56, .64, 1);   /* a cap pressed on: overshoots, settles */
  --out: cubic-bezier(.16, 1, .3, 1);
  --lift: 0 10px 24px -14px rgba(30, 34, 37, .55);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-variant-numeric: tabular-nums; font-family: var(--ui); color: var(--graphite); background: var(--white); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--steel-3) transparent; }
input { caret-color: var(--red); }

/* condensed display type: the stencil on a machine housing */
.disp { font-stretch: 78%; font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.code { font-family: var(--code); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* the belt: rollers that keep moving */
.belt { height: 12px; background: repeating-linear-gradient(90deg, var(--steel) 0 18px, var(--steel-3) 18px 20px); animation: roll 1.6s linear infinite; }
.belt.dark { background: repeating-linear-gradient(90deg, #2d3236 0 18px, #474e54 18px 20px); }
@keyframes roll { to { background-position: 40px 0; } }

/* the foil cap (cap.svg): pinked rim, one flat highlight */
.cap { border-radius: 50%; color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800;
       background: url(cap.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 5px rgba(23, 58, 148, .35)); }

/* buttons: machine keys */
.key { font: 800 18px/1.2 var(--ui); font-stretch: 85%; color: #fff; background: var(--graphite); border: 0; border-radius: 10px;
       padding: 15px 22px; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28); transition: transform .12s var(--out), box-shadow .12s, background .15s; }
.key:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28); }
.key.now { background: var(--red); }
.key.cap-key { background: var(--cobalt); }
.key.plain { background: var(--panel); color: var(--graphite); box-shadow: inset 0 0 0 2px var(--graphite), inset 0 -4px 0 2px var(--graphite); }
.key.plain:active { box-shadow: inset 0 0 0 2px var(--graphite), inset 0 -1px 0 2px var(--graphite); }
.key:disabled { background: var(--steel-2); color: var(--steel-3); box-shadow: none; cursor: default; transform: none; }

.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; flex: none; }

/* a cap pressed onto a bottle: drops, squashes, settles */
@keyframes cap-on { 0% { transform: translateY(-70%) scale(1.3); opacity: 0; } 55% { transform: translateY(4%) scale(1.08, .86); opacity: 1; } 75% { transform: scale(.96, 1.04); } 100% { transform: none; } }
@keyframes rise-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-in { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }