/* Up & Adder — component styles. Load after tokens.css.
   Fonts: DynaPuff and Bricolage Grotesque from Google Fonts (see README).
   Every class is prefixed ua-. Objects on the board have ink outlines; interface chrome has lips. */

/* ============ Base ============ */
.ua { font-family: var(--font-ui); font-size: 16px; line-height: 24px; color: var(--ink); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
.ua *, .ua *::before, .ua *::after { box-sizing: border-box; }
.eyebrow, .ua-eyebrow { text-transform: uppercase; }
.ua-eyebrow { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.09em; color: var(--ink-soft); }
.stat, .ua-num { font-variant-numeric: tabular-nums; }
.ua-display { font-family: var(--font-display); }
.ua-soft { color: var(--ink-soft); }
.ua-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The tablecloth: gingham laid over cloth, with afternoon light on top */
.ua-table {
  background-color: var(--cloth);
  background-image:
    linear-gradient(90deg, var(--cloth-check) 50%, transparent 50%),
    linear-gradient(var(--cloth-check) 50%, transparent 50%);
  background-size: 56px 56px;
  color: var(--ink);
}
.ua-sun { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(110% 80% at 6% -4%, var(--sunlight), transparent 58%); }
.ua-sun::before, .ua-sun::after { content: ""; position: absolute; top: -20%; height: 150%; width: 16%;
  background: linear-gradient(180deg, var(--sunlight), transparent 75%); transform: skewX(-22deg);
  filter: blur(22px); opacity: .55; animation: ua-sun-drift 48s ease-in-out infinite alternate; }
.ua-sun::before { left: 8%; }
.ua-sun::after { left: 30%; width: 9%; animation-delay: -12s; }
[data-theme="dark"] .ua-sun { background: radial-gradient(70% 60% at 50% 18%, var(--sunlight), transparent 70%); }
[data-theme="dark"] .ua-sun::before, [data-theme="dark"] .ua-sun::after { display: none; }

/* Paper surfaces */
.ua-panel { background: var(--paper); color: var(--ink); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); padding: var(--space-5); }
.ua-panel--cast { box-shadow: var(--shadow-cast); }
.ua-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), var(--shadow-rest); padding: var(--space-4); }
.ua-well { background: var(--paper-sunk); border-radius: var(--radius-md); padding: var(--space-3); }
.ua-rule { height: 2px; border: 0; background: var(--line); margin: var(--space-4) 0; }

/* Chips and tags */
.ua-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font-weight: 700; font-size: 14px; line-height: 18px;
  box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), var(--shadow-rest); white-space: nowrap; }
.ua-chip svg, .ua-chip img { width: 20px; height: 20px; flex: none; }
.ua-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--paper-sunk); color: var(--ink-soft); }
.ua-tag--tomato { background: var(--tomato-soft); color: var(--tomato-ink); }
.ua-tag--gold { background: var(--gold-soft); color: var(--gold-ink); }
.ua-tag--grape { background: var(--grape-soft); color: var(--grape-ink); }
.ua-tag--mint { background: var(--mint-soft); color: var(--mint-ink); }
.ua-tag--sky { background: var(--sky-soft); color: var(--sky-ink); }

/* ============ Button ============ */
.ua-btn {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-lip: var(--paper-lip); --lip: var(--lip-height);
  appearance: none; border: 0; margin: 0 0 var(--lip) 0; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 52px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 18px; line-height: 20px; font-weight: 700; letter-spacing: -.005em;
  background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 var(--lip) 0 var(--btn-lip), var(--shadow-rest);
  transition: transform var(--dur-tap) var(--ease-snap), box-shadow var(--dur-tap) var(--ease-snap), background-color var(--dur-quick);
}
.ua-btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--lip) + 2px) 0 var(--btn-lip), var(--shadow-lift); }
.ua-btn:active, .ua-btn.is-pressed { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--btn-lip), 0 1px 3px var(--shade); }
.ua-btn:focus-visible { outline: none; box-shadow: 0 var(--lip) 0 var(--btn-lip), var(--focus-ring); }
.ua-btn svg, .ua-btn img { width: 24px; height: 24px; flex: none; }
.ua-btn__cost { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ua-btn__cost::before { content: "·"; margin-right: 4px; font-weight: 700; }
.ua-btn--primary { --btn-bg: var(--tomato); --btn-fg: var(--on-tomato); --btn-lip: var(--tomato-lip); }
.ua-btn--gold { --btn-bg: var(--gold); --btn-fg: var(--on-gold); --btn-lip: var(--gold-lip); }
.ua-btn--mint { --btn-bg: var(--mint); --btn-fg: var(--on-mint); --btn-lip: var(--mint-lip); }
.ua-btn--grape { --btn-bg: var(--grape); --btn-fg: var(--on-grape); --btn-lip: var(--grape-lip); }
.ua-btn--sky { --btn-bg: var(--sky); --btn-fg: var(--on-sky); --btn-lip: var(--sky-lip); }
.ua-btn--ghost { --btn-bg: transparent; --btn-lip: transparent; box-shadow: inset 0 0 0 2px var(--line); margin-bottom: 0; }
.ua-btn--ghost:hover { transform: none; box-shadow: inset 0 0 0 2px var(--ink-soft); }
.ua-btn--ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--ink-soft); }
.ua-btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--line), var(--focus-ring); }
.ua-btn--sm { --lip: var(--lip-height-sm); min-height: 44px; padding: 0 var(--space-4); font-size: 16px; border-radius: var(--radius-sm); gap: var(--space-2); }
.ua-btn--sm svg, .ua-btn--sm img { width: 20px; height: 20px; }
.ua-btn--lg { min-height: 64px; padding: 0 var(--space-6); font-size: 22px; line-height: 24px; border-radius: var(--radius-lg); }
.ua-btn--icon { padding: 0; width: 52px; }
.ua-btn--icon.ua-btn--sm { width: 44px; }
.ua-btn--block { display: flex; width: 100%; }
.ua-btn[disabled], .ua-btn.is-disabled { --btn-bg: var(--paper-sunk); --btn-fg: var(--ink-soft); --btn-lip: var(--line); cursor: not-allowed; transform: none; box-shadow: 0 var(--lip) 0 var(--btn-lip); }

/* ============ Dice ============ */
/* 3D die: .ua-die[data-face] > .ua-die__tumble > .ua-die__cube > cores + six faces */
.ua-die { --die: var(--die-size); --die-body: var(--pip-tomato); --die-lip: #b4321a; --face-rot: rotateY(0deg);
  position: relative; width: var(--die); height: var(--die); perspective: 520px; flex: none; }
.ua-die--a { --die-body: var(--pip-tomato); --die-lip: #b4321a; }
.ua-die--b { --die-body: var(--pip-sky); --die-lip: #1e4fae; }
.ua-die--under { --die-body: var(--pip-grape); --die-lip: #4b2dc4; }
.ua-die[data-face="1"] { --face-rot: rotateY(0deg); }
.ua-die[data-face="2"] { --face-rot: rotateY(-90deg); }
.ua-die[data-face="3"] { --face-rot: rotateX(-90deg); }
.ua-die[data-face="4"] { --face-rot: rotateX(90deg); }
.ua-die[data-face="5"] { --face-rot: rotateY(90deg); }
.ua-die[data-face="6"] { --face-rot: rotateY(180deg); }
.ua-die::after { content: ""; position: absolute; left: 8%; right: -6%; bottom: -16%; height: 22%; border-radius: 50%;
  background: var(--shade); filter: blur(3px); z-index: -1; transform-origin: 50% 50%; }
.ua-die__tumble { position: absolute; inset: 0; transform-style: preserve-3d; }
.ua-die__cube { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-17deg) rotateY(22deg) var(--face-rot); transition: transform var(--dur-pop) var(--ease-spring); }
.ua-die__core { position: absolute; inset: 5%; background: var(--outline); border-radius: 18%; }
.ua-die__core[data-axis="y"] { transform: rotateY(90deg); }
.ua-die__core[data-axis="x"] { transform: rotateX(90deg); }
.ua-die__face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%;
  background: var(--die-body); border: 3px solid var(--outline); border-radius: 22%;
  box-shadow: inset calc(var(--die) * -.06) calc(var(--die) * -.08) 0 var(--die-lip), inset calc(var(--die) * .05) calc(var(--die) * .05) 0 rgba(255, 255, 255, .28); }
.ua-die__face i { width: 82%; height: 82%; place-self: center; border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 calc(var(--die) * .02) 0 rgba(36, 32, 63, .25); }
[data-theme="dark"] .ua-die__face i { background: #fffcf4; }
.ua-die__face[data-n="1"] { transform: translateZ(calc(var(--die) / 2)); }
.ua-die__face[data-n="2"] { transform: rotateY(90deg) translateZ(calc(var(--die) / 2)); }
.ua-die__face[data-n="3"] { transform: rotateX(90deg) translateZ(calc(var(--die) / 2)); }
.ua-die__face[data-n="4"] { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }
.ua-die__face[data-n="5"] { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.ua-die__face[data-n="6"] { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
/* pip placement on a 3 x 3 grid */
.ua-die__face[data-n="1"] i, .ua-pipface[data-n="1"] i { grid-area: 2 / 2; }
.ua-die__face[data-n="2"] i:nth-child(1), .ua-pipface[data-n="2"] i:nth-child(1) { grid-area: 1 / 3; }
.ua-die__face[data-n="2"] i:nth-child(2), .ua-pipface[data-n="2"] i:nth-child(2) { grid-area: 3 / 1; }
.ua-die__face[data-n="3"] i:nth-child(1), .ua-pipface[data-n="3"] i:nth-child(1) { grid-area: 1 / 3; }
.ua-die__face[data-n="3"] i:nth-child(2), .ua-pipface[data-n="3"] i:nth-child(2) { grid-area: 2 / 2; }
.ua-die__face[data-n="3"] i:nth-child(3), .ua-pipface[data-n="3"] i:nth-child(3) { grid-area: 3 / 1; }
.ua-die__face[data-n="4"] i:nth-child(1), .ua-pipface[data-n="4"] i:nth-child(1) { grid-area: 1 / 1; }
.ua-die__face[data-n="4"] i:nth-child(2), .ua-pipface[data-n="4"] i:nth-child(2) { grid-area: 1 / 3; }
.ua-die__face[data-n="4"] i:nth-child(3), .ua-pipface[data-n="4"] i:nth-child(3) { grid-area: 3 / 1; }
.ua-die__face[data-n="4"] i:nth-child(4), .ua-pipface[data-n="4"] i:nth-child(4) { grid-area: 3 / 3; }
.ua-die__face[data-n="5"] i:nth-child(1), .ua-pipface[data-n="5"] i:nth-child(1) { grid-area: 1 / 1; }
.ua-die__face[data-n="5"] i:nth-child(2), .ua-pipface[data-n="5"] i:nth-child(2) { grid-area: 1 / 3; }
.ua-die__face[data-n="5"] i:nth-child(3), .ua-pipface[data-n="5"] i:nth-child(3) { grid-area: 2 / 2; }
.ua-die__face[data-n="5"] i:nth-child(4), .ua-pipface[data-n="5"] i:nth-child(4) { grid-area: 3 / 1; }
.ua-die__face[data-n="5"] i:nth-child(5), .ua-pipface[data-n="5"] i:nth-child(5) { grid-area: 3 / 3; }
.ua-die__face[data-n="6"] i:nth-child(1), .ua-pipface[data-n="6"] i:nth-child(1) { grid-area: 1 / 1; }
.ua-die__face[data-n="6"] i:nth-child(2), .ua-pipface[data-n="6"] i:nth-child(2) { grid-area: 2 / 1; }
.ua-die__face[data-n="6"] i:nth-child(3), .ua-pipface[data-n="6"] i:nth-child(3) { grid-area: 3 / 1; }
.ua-die__face[data-n="6"] i:nth-child(4), .ua-pipface[data-n="6"] i:nth-child(4) { grid-area: 1 / 3; }
.ua-die__face[data-n="6"] i:nth-child(5), .ua-pipface[data-n="6"] i:nth-child(5) { grid-area: 2 / 3; }
.ua-die__face[data-n="6"] i:nth-child(6), .ua-pipface[data-n="6"] i:nth-child(6) { grid-area: 3 / 3; }
/* states */
.ua-die.is-rolling .ua-die__tumble { animation: ua-die-tumble var(--dur-roll) var(--ease-snap) both; }
.ua-die.is-rolling::after { animation: ua-die-shadow var(--dur-roll) var(--ease-snap) both; }
.ua-die.is-picked { transform: translateY(-8px); transition: transform var(--dur-pop) var(--ease-spring); }
.ua-die.is-picked::before { content: ""; position: absolute; inset: -9px; border-radius: 30%; border: 3px dashed var(--gold); animation: ua-spin 9s linear infinite; }
.ua-die.is-spent { opacity: .45; filter: saturate(.35); transition: opacity var(--dur-quick), filter var(--dur-quick); }

/* Flat die face for HUD, choices and logs */
.ua-pipface { --pf: 32px; --die-body: var(--pip-tomato); --die-lip: #b4321a; display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: var(--pf); height: var(--pf); padding: calc(var(--pf) * .14); flex: none; border-radius: 26%; background: var(--die-body);
  border: 2px solid var(--outline); box-shadow: inset calc(var(--pf) * -.06) calc(var(--pf) * -.09) 0 var(--die-lip); vertical-align: middle; }
.ua-pipface i { width: 78%; height: 78%; place-self: center; border-radius: 50%; background: #fffcf4; }
.ua-pipface--b { --die-body: var(--pip-sky); --die-lip: #1e4fae; }
.ua-pipface--under { --die-body: var(--pip-grape); --die-lip: #4b2dc4; }
.ua-pipface--sm { --pf: 22px; border-width: 1.5px; }
.ua-pipface--lg { --pf: 44px; border-width: 2.5px; }

/* Dice tray: where the roll lands */
.ua-tray { display: inline-flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6) var(--space-5);
  border-radius: var(--radius-xl); background: var(--paper-sunk); box-shadow: inset 0 4px 0 var(--paper-lip), inset 0 -2px 0 var(--paper); }

/* ============ Move choice ============ */
.ua-choices { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ua-choice { --c-soft: var(--tomato-soft); --c-ink: var(--tomato-ink); --c-solid: var(--tomato); --c-lip: var(--paper-lip);
  appearance: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  min-width: 196px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); margin-bottom: var(--lip-height);
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: 0 var(--lip-height) 0 var(--c-lip), var(--shadow-rest);
  transition: transform var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-snap); }
.ua-choice--b { --c-soft: var(--sky-soft); --c-ink: var(--sky-ink); --c-solid: var(--sky); }
.ua-choice--sum { --c-soft: var(--gold-soft); --c-ink: var(--gold-ink); --c-solid: var(--gold); }
.ua-choice--under { --c-soft: var(--grape-soft); --c-ink: var(--grape-ink); --c-solid: var(--grape); }
.ua-choice__move { grid-row: 1 / span 2; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px; border-radius: var(--radius-md);
  background: var(--c-soft); color: var(--c-ink); font-family: var(--font-display); font-size: 36px; line-height: 36px; font-weight: 700; }
.ua-choice__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); display: flex; align-items: center; gap: 6px; }
.ua-choice__to { font-size: 18px; line-height: 22px; font-weight: 800; color: var(--ink); display: grid; grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; column-gap: 6px; }
.ua-choice__to svg, .ua-choice__to img { width: 24px; height: 24px; flex: none; }
.ua-choice__to small { grid-column: 1 / -1; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-soft); }
.ua-choice:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 calc(var(--lip-height) + 4px) 0 var(--c-lip), var(--shadow-lift); }
.ua-choice:focus-visible { outline: none; box-shadow: 0 var(--lip-height) 0 var(--c-lip), var(--focus-ring); }
.ua-choice[aria-checked="true"], .ua-choice.is-picked { box-shadow: 0 var(--lip-height) 0 var(--c-lip), 0 0 0 3px var(--c-solid), var(--shadow-lift); transform: translateY(-4px); }
.ua-choice.is-best::after { content: "Best"; position: absolute; top: -10px; right: 12px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--mint); color: var(--on-mint); font-size: 11px; line-height: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ua-choices.is-entering .ua-choice { animation: ua-pop-in var(--dur-pop) var(--ease-spring) both; }
.ua-choices.is-entering .ua-choice:nth-child(2) { animation-delay: 60ms; }
.ua-choices.is-entering .ua-choice:nth-child(3) { animation-delay: 120ms; }
.ua-choices.is-entering .ua-choice:nth-child(4) { animation-delay: 180ms; }

/* ============ Board ============ */
.ua-stage { perspective: 1400px; perspective-origin: 50% 0%; }
.ua-board { --tile: 52px; position: relative; display: grid; grid-template-columns: repeat(10, var(--tile)); grid-auto-rows: var(--tile); gap: 4px; padding: 10px;
  background: var(--board-edge); border-radius: 22px; transform-style: preserve-3d;
  box-shadow: 0 14px 0 var(--board-edge-deep), var(--shadow-cast); }
.ua-board--tilt { transform: rotateX(var(--board-tilt)); transform-origin: 50% 100%; }
.ua-tile { position: relative; border-radius: var(--radius-tile); background: var(--board);
  box-shadow: inset 0 -3px 0 rgba(59, 47, 39, .12), inset 0 2px 0 rgba(255, 255, 255, .6); color: var(--board-ink); overflow: visible; }
.ua-tile:nth-child(even) { background: var(--board-alt); }
.ua-tile__n { position: absolute; top: 4px; left: 5px; font-family: var(--font-ui); font-size: 12px; line-height: 12px; font-weight: 700; color: var(--board-ink); font-variant-numeric: tabular-nums; }
.ua-tile__icon { position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; }
.ua-tile--coin { background: var(--gold-soft) !important; }
.ua-tile--trick { background: var(--grape-soft) !important; }
[data-theme="dark"] .ua-tile--coin { background: #ffe9a8 !important; }
[data-theme="dark"] .ua-tile--trick { background: #e3dbff !important; }
.ua-tile--start, .ua-tile--home { background: var(--mint-soft) !important; }
[data-theme="dark"] .ua-tile--start, [data-theme="dark"] .ua-tile--home { background: #c9efdc !important; }
.ua-tile--home .ua-tile__n { font-family: var(--font-display); font-size: 16px; }
.ua-tile--path::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22%; height: 22%; border-radius: 50%; background: var(--sky); opacity: .75; }
.ua-tile--target { z-index: 2; }
.ua-tile--target::before { content: ""; position: absolute; inset: -5px; border-radius: 12px; border: 3px solid var(--sky); animation: ua-target 1.2s var(--ease-snap) infinite; }
.ua-tile--target.ua-tile--gold-target::before { border-color: var(--gold-lip); }
.ua-tile--danger::before { content: ""; position: absolute; inset: -5px; border-radius: 12px; border: 3px dashed var(--tomato); }
.ua-tile--marbles::after { content: ""; position: absolute; inset: 0; margin: auto; width: 46%; height: 30%;
  background: radial-gradient(circle at 25% 60%, #3b82f6 0 18%, transparent 19%), radial-gradient(circle at 55% 35%, #f06eb0 0 18%, transparent 19%), radial-gradient(circle at 80% 65%, #2dbe7e 0 18%, transparent 19%); }

/* ============ Pip (player piece) ============ */
.ua-pip { --pip: var(--pip-tomato); width: var(--pip-size); height: calc(var(--pip-size) * 1.3125); overflow: visible; display: block; flex: none; }
.ua-pip--sm { width: 32px; height: 42px; }
.ua-pip--md { width: 40px; height: 52.5px; }
.ua-pip--lg { width: 88px; height: 115.5px; }
.ua-pip--xl { width: 140px; height: 184px; }
.ua-pip__bob { transform-box: fill-box; transform-origin: 50% 100%; animation: ua-breathe 3.2s ease-in-out infinite; }
.ua-pip__body { fill: var(--pip); stroke: var(--outline); stroke-width: 3; stroke-linejoin: round; }
.ua-pip__shade { fill: #2c2678; opacity: .2; }
.ua-pip__shine { fill: none; stroke: #ffffff; stroke-opacity: .6; stroke-width: 4; stroke-linecap: round; }
.ua-pip__shadow { fill: var(--shade); }
.ua-pip__eye { fill: #ffffff; stroke: var(--outline); stroke-width: 2; }
.ua-pip__pupil { fill: var(--outline); }
.ua-pip__lid { fill: var(--pip); stroke: var(--outline); stroke-width: 2; stroke-linejoin: round; }
.ua-pip__cheek { fill: #ff7a9a; opacity: .55; }
.ua-pip__line { fill: none; stroke: var(--outline); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ua-pip__fill { fill: var(--outline); }
.ua-pip__sweat { fill: #bfe3ff; stroke: var(--outline); stroke-width: 1.6; }
.ua-pip__hat-ink { stroke: var(--outline); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ua-pip__eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: ua-blink 4.6s infinite; }
.ua-pip [data-m] { display: none; }
.ua-pip:not([data-mood]) [data-m~="happy"], .ua-pip[data-mood="happy"] [data-m~="happy"],
.ua-pip[data-mood="scared"] [data-m~="scared"], .ua-pip[data-mood="smug"] [data-m~="smug"],
.ua-pip[data-mood="dizzy"] [data-m~="dizzy"], .ua-pip[data-mood="sad"] [data-m~="sad"] { display: inline; }
.ua-pip[data-mood="dizzy"] .ua-pip__dizzy { transform-box: fill-box; transform-origin: 50% 50%; animation: ua-spin 1.2s linear infinite; }
.ua-pip[data-mood="scared"] .ua-pip__bob { animation: ua-shiver 180ms linear infinite; }
.ua-pip[data-mood="sad"] .ua-pip__bob { animation: ua-breathe 5s ease-in-out infinite; }
.ua-pip.is-hopping .ua-pip__bob { animation: ua-hop var(--dur-hop) var(--ease-lift) infinite; }
.ua-pip.is-current .ua-pip__shadow { fill: var(--gold); opacity: .8; }
.ua-pip.is-ghost { opacity: .45; filter: saturate(.3); }
/* the little ring that marks you on a crowded board */
.ua-pip-you { position: absolute; left: 50%; bottom: -6px; width: 120%; height: 30%; transform: translateX(-50%); border-radius: 50%; border: 3px solid var(--gold); }

/* ============ Snakes and ladders (SVG drawn on the board) ============ */
.ua-snake { --body: var(--snake-lime); --band: var(--snake-lime-band); overflow: visible; }
.ua-snake--coral { --body: var(--snake-coral); --band: var(--snake-coral-band); }
.ua-snake--teal { --body: var(--snake-teal); --band: var(--snake-teal-band); }
.ua-snake--king { --body: var(--snake-king); --band: var(--snake-king-band); }
.ua-snake__ink { fill: none; stroke: var(--outline); stroke-linecap: round; stroke-linejoin: round; }
.ua-snake__body { fill: none; stroke: var(--body); stroke-linecap: round; stroke-linejoin: round; }
.ua-snake__band { fill: none; stroke: var(--band); stroke-linecap: butt; animation: ua-slither 2.4s linear infinite; }
.ua-snake__shine { fill: none; stroke: #ffffff; stroke-opacity: .45; stroke-linecap: round; }
.ua-snake__head { fill: var(--body); stroke: var(--outline); stroke-width: 3; }
.ua-snake__belly { fill: var(--snake-belly); }
.ua-snake__tongue { fill: none; stroke: #f0533a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; animation: ua-tongue 2.8s ease-in-out infinite; }
.ua-snake__headgroup { transform-box: fill-box; transform-origin: 50% 70%; animation: ua-head-sway 3.6s ease-in-out infinite; }
.ua-snake.is-sliding .ua-snake__band { animation-duration: .5s; }
.ua-snake.is-asleep .ua-snake__band, .ua-snake.is-asleep .ua-snake__headgroup, .ua-snake.is-asleep .ua-snake__tongue { animation: none; }
/* the bribe price on the snake's neck */
.ua-price { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: 6px 12px 12px 6px;
  background: var(--snake-belly); color: var(--board-ink); border: 2px solid var(--outline); font-size: 13px; line-height: 16px; font-weight: 800;
  box-shadow: 2px 3px 0 var(--shade); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-price svg, .ua-price img { width: 14px; height: 14px; }
.ua-price--free { background: var(--mint-soft); color: var(--mint-ink); }
.ua-ladder { overflow: visible; }
.ua-ladder__ink { fill: none; stroke: var(--outline); stroke-linecap: round; }
.ua-ladder__rail { fill: none; stroke: var(--wood); stroke-linecap: round; }
.ua-ladder__lip { fill: none; stroke: var(--wood-lip); stroke-linecap: round; }
.ua-ladder--golden .ua-ladder__rail { stroke: var(--golden); }
.ua-ladder--golden .ua-ladder__lip { stroke: var(--golden-lip); }
.ua-ladder--rickety .ua-ladder__rail { stroke: var(--stick); }
.ua-ladder--rickety .ua-ladder__lip { stroke: var(--wood); }
.ua-ladder__tape { fill: var(--tape); stroke: var(--outline); stroke-width: 1.5; }
.ua-ladder__shine { fill: none; stroke: #ffffff; stroke-opacity: .55; stroke-linecap: round; }
.ua-ladder--golden .ua-ladder__glint { animation: ua-glint 2.6s var(--ease-snap) infinite; }
.ua-ladder__top { transform-box: fill-box; }
.ua-ladder.is-snapping .ua-ladder__top { transform-origin: 0% 100%; animation: ua-snap 900ms var(--ease-gravity) forwards; }
.ua-ladder.is-snapped .ua-ladder__top { opacity: 0; }
.ua-ladder.is-snapped { filter: saturate(.4); opacity: .55; }
.ua-ladder__splinter { opacity: 0; transition: opacity var(--dur-quick) var(--ease-snap) 120ms; }
.ua-ladder.is-snapping .ua-ladder__splinter, .ua-ladder.is-snapped .ua-ladder__splinter { opacity: 1; }

/* ============ Player chip (HUD) ============ */
.ua-player { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--space-3);
  min-width: 232px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), var(--shadow-rest);
  transition: transform var(--dur-pop) var(--ease-spring), box-shadow var(--dur-pop) var(--ease-snap); }
.ua-player__avatar { position: relative; width: 48px; height: 48px; border-radius: 16px; background: var(--paper-sunk); display: grid; place-items: end center; overflow: hidden; }
.ua-player__avatar .ua-pip { width: 38px; height: 50px; margin-bottom: -10px; }
.ua-player__name { font-size: 16px; line-height: 20px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ua-player__meta { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-soft); display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.ua-player__meta b { font-weight: 800; color: var(--ink); }
.ua-player__tile { font-family: var(--font-display); font-size: 24px; line-height: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.ua-player__tile small { display: block; font-family: var(--font-ui); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ua-player.is-turn { transform: translateX(10px) scale(1.03); box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), 0 0 0 3px var(--gold), var(--shadow-lift); }
.ua-player.is-turn::before { content: ""; position: absolute; left: -12px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border: 8px solid transparent; border-left: 10px solid var(--gold); }
.ua-player.is-away { opacity: .6; }
.ua-player.is-away .ua-player__avatar { filter: grayscale(.8); }
.ua-player__crown { position: absolute; top: -10px; left: -6px; width: 26px; height: 26px; transform: rotate(-14deg); }
.ua-player__badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--gold-soft); color: var(--gold-ink); }

/* ============ Coins ============ */
.ua-coins { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px; border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink); box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), var(--shadow-rest);
  font-size: 18px; line-height: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ua-coins svg, .ua-coins img { width: 26px; height: 26px; }
.ua-coins--lg { height: 48px; font-size: 24px; padding: 0 16px 0 8px; }
.ua-coins--lg svg, .ua-coins--lg img { width: 36px; height: 36px; }
.ua-coins__delta { position: absolute; right: -6px; top: -6px; font-size: 16px; font-weight: 800; pointer-events: none; padding: 0 6px; border-radius: var(--radius-pill); }
.ua-coins__delta--up { background: var(--gold-soft); color: var(--gold-ink); animation: ua-float-up 1.2s var(--ease-snap) both; }
.ua-coins__delta--down { background: var(--tomato-soft); color: var(--tomato-ink); animation: ua-float-up 1.2s var(--ease-snap) both; }
.ua-coins.is-bumped svg, .ua-coins.is-bumped img { animation: ua-coin-flip 600ms var(--ease-spring); }
.ua-coin-spin { animation: ua-coin-flip 1.6s var(--ease-snap) infinite; transform-box: fill-box; transform-origin: 50% 50%; }

/* ============ Trick card ============ */
.ua-trick { --t-solid: var(--grape); --t-lip: var(--grape-lip); position: relative; width: 132px; height: 196px; flex: none;
  padding: 8px; border-radius: 18px; background: var(--t-solid); border: 3px solid var(--outline);
  box-shadow: 0 6px 0 var(--t-lip), 4px 10px 18px -6px var(--shade);
  display: grid; grid-template-rows: 84px 1fr; gap: 6px; color: var(--ink); text-align: center;
  transition: transform var(--dur-pop) var(--ease-spring), box-shadow var(--dur-pop) var(--ease-snap); }
.ua-trick__art { display: grid; place-items: center; border-radius: 11px; background: var(--grape-soft); overflow: hidden; position: relative; }
.ua-trick__art svg { width: 76%; height: auto; }
.ua-trick__text { display: grid; align-content: center; background: var(--paper); border-radius: 10px; padding: 6px 6px 8px; }
.ua-trick__name { display: block; font-family: var(--font-display); font-size: 18px; line-height: 20px; font-weight: 700; color: var(--grape-ink); }
.ua-trick__fx { display: block; font-size: 12px; line-height: 15px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
button.ua-trick { appearance: none; font: inherit; cursor: pointer; }
.ua-trick:hover, .ua-trick:focus-visible { transform: translateY(-14px) rotate(0deg) !important; z-index: 3; outline: none; }
.ua-trick:focus-visible { box-shadow: 0 6px 0 var(--t-lip), var(--focus-ring); }
.ua-trick.is-armed { box-shadow: 0 6px 0 var(--t-lip), 0 0 0 4px var(--gold), 0 0 28px 6px rgba(255, 194, 51, .55); animation: ua-wobble 1.6s ease-in-out infinite; }
.ua-trick.is-back { background: var(--grape); }
.ua-trick.is-back .ua-trick__art { background: repeating-linear-gradient(45deg, var(--grape-lip) 0 8px, var(--grape) 8px 16px); }
.ua-hand { display: flex; align-items: flex-end; padding: 18px 12px 0; }
.ua-hand .ua-trick { margin: 0 -14px; transform-origin: 50% 120%; }
.ua-hand .ua-trick:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.ua-hand .ua-trick:nth-child(2) { transform: rotate(0deg); }
.ua-hand .ua-trick:nth-child(3) { transform: rotate(9deg) translateY(8px); }
.ua-trick--mini { width: 44px; height: 60px; padding: 3px; border-radius: 9px; border-width: 2px; box-shadow: 0 3px 0 var(--t-lip); grid-template-rows: 1fr; }
.ua-trick--mini .ua-trick__art { border-radius: 6px; }

/* ============ Deal (snake encounter) ============ */
.ua-scrim { position: absolute; inset: 0; background: var(--scrim); animation: ua-fade-in var(--dur-stage) var(--ease-snap) both; }
.ua-deal { position: relative; width: 420px; max-width: 100%; padding: var(--space-5); padding-top: 72px; border-radius: var(--radius-xl);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-cast); text-align: center; animation: ua-stage-in var(--dur-stage) var(--ease-spring) both; }
.ua-deal__portrait { position: absolute; left: 50%; top: -64px; width: 136px; height: 120px; transform: translateX(-50%); }
.ua-deal__eyebrow { display: block; margin-bottom: 6px; }
.ua-deal__title { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ua-deal__copy { margin: 8px auto var(--space-5); max-width: 32ch; font-size: 17px; line-height: 25px; color: var(--ink-soft); text-wrap: pretty; }
.ua-deal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ua-deal__actions .ua-btn { flex-direction: column; gap: 2px; min-height: 76px; padding: 8px 12px; }
.ua-deal__actions .ua-btn small { font-size: 14px; line-height: 18px; font-weight: 600; }
.ua-deal__timer { margin-top: var(--space-4); }
.ua-deal--king .ua-deal__title { color: var(--grape-ink); }

/* ============ Shout (event callout) ============ */
.ua-shout { --s-fill: var(--gold); display: inline-block; font-family: var(--font-display); font-size: 72px; line-height: 64px; font-weight: 700; letter-spacing: .01em;
  color: var(--s-fill); white-space: nowrap; transform: rotate(-4deg);
  text-shadow:
    3px 0 0 var(--outline), -3px 0 0 var(--outline), 0 3px 0 var(--outline), 0 -3px 0 var(--outline),
    2.2px 2.2px 0 var(--outline), -2.2px 2.2px 0 var(--outline), 2.2px -2.2px 0 var(--outline), -2.2px -2.2px 0 var(--outline),
    0 6px 0 var(--outline), 3px 6px 0 var(--outline), -3px 6px 0 var(--outline), 0 9px 0 var(--outline),
    6px 16px 18px rgba(44, 38, 120, .35); }
.ua-shout > span { display: inline-block; }
.ua-shout--bonk { --s-fill: var(--gold); }
.ua-shout--climb { --s-fill: var(--mint); }
.ua-shout--slide { --s-fill: var(--snake-coral); }
.ua-shout--snap { --s-fill: var(--stick); }
.ua-shout--eyes { --s-fill: #b9a6ff; }
.ua-shout--win { --s-fill: var(--gold); font-size: 96px; line-height: 88px; }
.ua-shout--sm { font-size: 44px; line-height: 44px; text-shadow:
    2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 2px 0 var(--outline), 0 -2px 0 var(--outline),
    1.5px 1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px -1.5px 0 var(--outline),
    0 4px 0 var(--outline), 2px 4px 0 var(--outline), -2px 4px 0 var(--outline), 4px 10px 12px rgba(44, 38, 120, .3); }
.ua-shout.is-live { animation: ua-shout-in 1.6s var(--ease-snap) both; }
.ua-shout.is-live > span { animation: ua-shout-letter 520ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ua-shout.is-held { animation: ua-shout-hold 700ms var(--ease-snap) both; }
.ua-shout.is-held > span { animation: ua-shout-letter 520ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ============ Event feed ============ */
.ua-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ua-feed__item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px 6px 6px;
  border-radius: var(--radius-sm); background: var(--paper); font-size: 14px; line-height: 19px; color: var(--ink); }
.ua-feed__item svg, .ua-feed__item img { width: 28px; height: 28px; }
.ua-feed__item b { font-weight: 800; }
.ua-feed__delta { font-size: 13px; font-weight: 800; padding: 0 7px; height: 22px; line-height: 22px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.ua-feed__delta--up { background: var(--mint-soft); color: var(--mint-ink); }
.ua-feed__delta--down { background: var(--tomato-soft); color: var(--tomato-ink); }
.ua-feed__delta--coin { background: var(--gold-soft); color: var(--gold-ink); }
.ua-feed__delta--trick { background: var(--grape-soft); color: var(--grape-ink); }
.ua-feed__item.is-new { animation: ua-slide-in var(--dur-pop) var(--ease-spring) both; }
.ua-feed__item.is-old { opacity: .72; }

/* ============ Turn timer ============ */
.ua-timer { --t: 1; --t-color: var(--sky); position: relative; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ua-timer__track { position: relative; flex: 1; height: 10px; min-width: 120px; border-radius: var(--radius-pill); background: var(--paper-sunk); overflow: hidden;
  box-shadow: inset 0 2px 0 var(--paper-lip); }
.ua-timer__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--t)); border-radius: inherit; background: var(--t-color);
  transition: transform 1s linear, background-color var(--dur-quick); }
.ua-timer.is-running .ua-timer__fill { animation: ua-drain var(--timer-duration, 15s) linear both; }
.ua-timer.is-low { --t-color: var(--tomato); color: var(--tomato-ink); }
.ua-timer.is-low .ua-timer__track { animation: ua-shake 400ms var(--ease-snap) infinite; }
.ua-ring { --t: .7; --t-color: var(--sky); position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--t-color) calc(var(--t) * 360deg), var(--paper-sunk) 0); }
.ua-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--paper); }
.ua-ring > span { position: relative; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.ua-ring.is-low { --t-color: var(--tomato); }

/* ============ Room code ============ */
.ua-code { display: inline-flex; gap: 10px; }
.ua-code__tile { display: grid; place-items: center; width: 64px; height: 72px; border-radius: 14px; background: var(--board); color: var(--board-ink);
  font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 700;
  box-shadow: inset 0 -5px 0 var(--board-alt), 0 5px 0 var(--board-edge), 3px 9px 14px -4px var(--shade); }
.ua-code__tile:nth-child(even) { rotate: 2deg; }
.ua-code__tile:nth-child(odd) { rotate: -2deg; }
.ua-code.is-entering .ua-code__tile { animation: ua-drop-in 520ms var(--ease-spring) both; }
.ua-code.is-entering .ua-code__tile:nth-child(2) { animation-delay: 70ms; }
.ua-code.is-entering .ua-code__tile:nth-child(3) { animation-delay: 140ms; }
.ua-code.is-entering .ua-code__tile:nth-child(4) { animation-delay: 210ms; }
.ua-code-input { display: inline-flex; gap: 8px; }
.ua-code-input input { width: 56px; height: 64px; border: 0; border-radius: 14px; text-align: center; text-transform: uppercase;
  font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--ink); background: var(--paper-sunk);
  box-shadow: inset 0 3px 0 var(--paper-lip); caret-color: var(--tomato); }
.ua-code-input input:focus { outline: none; box-shadow: inset 0 3px 0 var(--paper-lip), var(--focus-ring); }

/* ============ Heat picker ============ */
.ua-heat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ua-heat__opt { --h-solid: var(--mint); --h-soft: var(--mint-soft); --h-ink: var(--mint-ink); --h-on: var(--on-mint);
  appearance: none; border: 0; font: inherit; cursor: pointer; text-align: left; color: var(--ink); position: relative;
  display: grid; gap: 6px; align-content: start; padding: var(--space-4); padding-top: 64px; min-height: 196px; border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: 0 var(--lip-height) 0 var(--paper-lip), var(--shadow-rest); margin-bottom: var(--lip-height);
  transition: transform var(--dur-pop) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-snap); }
.ua-heat__opt--spicy { --h-solid: var(--tomato); --h-soft: var(--tomato-soft); --h-ink: var(--tomato-ink); --h-on: var(--on-tomato); }
.ua-heat__opt--chaos { --h-solid: var(--grape); --h-soft: var(--grape-soft); --h-ink: var(--grape-ink); --h-on: var(--on-grape); }
.ua-heat__icon { position: absolute; top: -18px; left: 14px; width: 72px; height: 72px; padding: 8px; border-radius: 22px; background: var(--h-soft);
  box-shadow: 0 4px 0 var(--paper-lip); transition: transform var(--dur-pop) var(--ease-spring); }
.ua-heat__icon svg, .ua-heat__icon img { width: 100%; height: 100%; }
.ua-heat__name { font-family: var(--font-display); font-size: 26px; line-height: 30px; font-weight: 700; color: var(--h-ink); }
.ua-heat__desc { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ua-heat__rules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ua-heat__opt:hover { transform: translateY(-4px); }
.ua-heat__opt:hover .ua-heat__icon { transform: rotate(-8deg) scale(1.06); }
.ua-heat__opt:focus-visible { outline: none; box-shadow: 0 var(--lip-height) 0 var(--paper-lip), var(--focus-ring); }
.ua-heat__opt[aria-checked="true"] { box-shadow: 0 var(--lip-height) 0 var(--paper-lip), 0 0 0 3px var(--h-solid), var(--shadow-lift); transform: translateY(-4px); }
.ua-heat__opt[aria-checked="true"]::before { content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--h-solid); }
.ua-heat__opt[aria-checked="true"]::after { content: ""; position: absolute; top: 20px; right: 25px; width: 8px; height: 14px; border-right: 3.5px solid var(--h-on); border-bottom: 3.5px solid var(--h-on); border-radius: 1px; transform: rotate(45deg); }
.ua-heat__badge { position: absolute; top: 18px; right: 52px; }

/* ============ Lobby seat ============ */
.ua-seat { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; width: 132px; height: 168px; padding: 12px 10px 14px;
  border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 var(--lip-height-sm) 0 var(--paper-lip), var(--shadow-rest); text-align: center; }
.ua-seat .ua-pip { width: 64px; height: 84px; }
.ua-seat__name { font-size: 16px; line-height: 20px; font-weight: 800; color: var(--ink); }
.ua-seat__status { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.ua-seat.is-ready .ua-seat__status { color: var(--mint-ink); }
.ua-seat.is-ready::after { content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2324203f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.ua-seat.is-empty { background: transparent; box-shadow: inset 0 0 0 3px var(--cloth-check); border: 3px dashed var(--ink-soft); opacity: .8; align-content: center; }
.ua-seat.is-joining .ua-pip { animation: ua-drop-in 600ms var(--ease-spring) both; }
.ua-seat__host { position: absolute; top: 10px; left: 10px; }

/* ============ Emotes ============ */
.ua-emotes { display: inline-flex; gap: 8px; padding: 8px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-lift); }
.ua-emote { --e-bg: var(--gold); --e-fg: var(--on-gold); appearance: none; border: 2.5px solid var(--outline); cursor: pointer;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--e-bg); color: var(--e-fg);
  font-family: var(--font-display); font-size: 18px; line-height: 20px; font-weight: 700; box-shadow: 0 3px 0 var(--outline);
  transition: transform var(--dur-tap) var(--ease-spring); }
.ua-emote:hover { transform: translateY(-3px) rotate(-4deg); }
.ua-emote:active { transform: translateY(3px); box-shadow: 0 0 0 var(--outline); }
.ua-emote:focus-visible { outline: none; box-shadow: 0 3px 0 var(--outline), var(--focus-ring); }
.ua-emote--tomato { --e-bg: var(--tomato); --e-fg: var(--on-tomato); }
.ua-emote--mint { --e-bg: var(--mint); --e-fg: var(--on-mint); }
.ua-emote--sky { --e-bg: var(--sky); --e-fg: var(--on-sky); }
.ua-emote--grape { --e-bg: var(--grape); --e-fg: var(--on-grape); }
.ua-emote--paper { --e-bg: var(--paper); --e-fg: var(--ink); }
.ua-bubble { position: relative; display: inline-block; padding: 6px 14px 8px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--outline);
  font-family: var(--font-display); font-size: 20px; line-height: 22px; font-weight: 700; box-shadow: 3px 5px 0 var(--shade); white-space: nowrap; }
.ua-bubble::after { content: ""; position: absolute; left: 22px; bottom: -11px; width: 16px; height: 16px; background: var(--paper);
  border-right: 2.5px solid var(--outline); border-bottom: 2.5px solid var(--outline); transform: rotate(45deg) skew(8deg, 8deg); }
.ua-bubble.is-live { animation: ua-emote-rise 2.2s var(--ease-snap) both; }

/* ============ Toast (connection and table notices) ============ */
.ua-toast { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px 8px 10px; border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lift); font-size: 15px; line-height: 20px; font-weight: 600; }
.ua-toast__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); flex: none; }
.ua-toast__icon svg, .ua-toast__icon img { width: 26px; height: 26px; }
.ua-toast b { font-weight: 800; }
.ua-toast--warn .ua-toast__icon { background: var(--gold-soft); }
.ua-toast--good .ua-toast__icon { background: var(--mint-soft); }
.ua-toast.is-live { animation: ua-toast-in var(--dur-stage) var(--ease-spring) both; }
.ua-dots { display: inline-flex; gap: 4px; }
.ua-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ua-dot 1.2s ease-in-out infinite; }
.ua-dots i:nth-child(2) { animation-delay: .15s; }
.ua-dots i:nth-child(3) { animation-delay: .3s; }

/* ============ Confetti (victory) ============ */
.ua-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ua-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: ua-confetti 2.8s linear infinite; }

/* ============ Keyframes ============ */
@keyframes ua-hop { 0% { transform: translateY(0) scale(1.1, .88); } 25% { transform: translateY(-18px) scale(.92, 1.1); } 50% { transform: translateY(-26px) scale(1, 1); } 80% { transform: translateY(0) scale(1.12, .86); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes ua-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }
@keyframes ua-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ua-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }
@keyframes ua-pop-in { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes ua-drop-in { 0% { opacity: 0; transform: translateY(-40px) scale(.9); } 60% { opacity: 1; transform: translateY(4px) scale(1.04, .96); } 100% { transform: none; } }
@keyframes ua-stage-in { 0% { opacity: 0; transform: translateY(40px) scale(.86); } 100% { opacity: 1; transform: none; } }
@keyframes ua-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ua-slide-in { 0% { opacity: 0; transform: translateX(-24px); } 100% { opacity: 1; transform: none; } }
@keyframes ua-toast-in { 0% { opacity: 0; transform: translateY(-24px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes ua-wobble { 0%, 100% { transform: translateY(-14px) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes ua-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ua-spin { to { transform: rotate(360deg); } }
@keyframes ua-slither { to { stroke-dashoffset: -40; } }
@keyframes ua-tongue { 0%, 70%, 100% { transform: scaleY(0); } 76%, 90% { transform: scaleY(1); } }
@keyframes ua-head-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ua-glint { 0%, 60% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: -120; } }
@keyframes ua-snap { 0% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 100% { transform: translate(40px, 160px) rotate(70deg); opacity: 0; } }
@keyframes ua-target { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ua-float-up { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: 1; transform: translateY(-6px) scale(1.15); } 70% { opacity: 1; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes ua-coin-flip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-6px); } 100% { transform: rotateY(360deg) translateY(0); } }
@keyframes ua-die-tumble {
  0% { transform: translate3d(-120px, -110px, 0) rotateX(-500deg) rotateY(380deg) rotateZ(160deg); }
  45% { transform: translate3d(-10px, 0, 0) rotateX(-90deg) rotateY(60deg) rotateZ(30deg); }
  62% { transform: translate3d(4px, -22px, 0) rotateX(-24deg) rotateY(14deg) rotateZ(6deg); }
  80% { transform: translate3d(2px, 0, 0) rotateX(8deg) rotateY(-5deg) rotateZ(-2deg); }
  90% { transform: translate3d(0, -3px, 0) rotateX(-2deg) rotateY(1deg) rotateZ(0deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } }
@keyframes ua-die-shadow { 0% { transform: translate(-120px, 20px) scale(.4); opacity: .2; } 45% { transform: none; opacity: 1; } 62% { transform: scale(.75); opacity: .6; } 80%, 100% { transform: none; opacity: 1; } }
@keyframes ua-shout-in { 0% { opacity: 0; transform: rotate(-12deg) scale(.3); } 18% { opacity: 1; transform: rotate(3deg) scale(1.12); } 28% { transform: rotate(-5deg) scale(.96); } 36%, 80% { opacity: 1; transform: rotate(-4deg) scale(1); } 100% { opacity: 0; transform: rotate(-4deg) translateY(-30px) scale(1.08); } }
@keyframes ua-shout-hold { 0% { opacity: 0; transform: rotate(-12deg) scale(.3); } 45% { opacity: 1; transform: rotate(3deg) scale(1.12); } 70% { transform: rotate(-5deg) scale(.96); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes ua-shout-letter { 0% { transform: translateY(30px) scale(.4); } 60% { transform: translateY(-10px) scale(1.15); } 100% { transform: none; } }
@keyframes ua-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ua-emote-rise { 0% { opacity: 0; transform: translateY(16px) scale(.5) rotate(-8deg); } 15% { opacity: 1; transform: translateY(-4px) scale(1.1) rotate(4deg); } 25% { transform: translateY(0) scale(1) rotate(-2deg); } 80% { opacity: 1; transform: translateY(-10px) rotate(0); } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes ua-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes ua-confetti { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }
@keyframes ua-sun-drift { 0% { transform: skewX(-22deg) translateX(-6%); } 100% { transform: skewX(-22deg) translateX(10%); } }

/* ============ Reduced motion: keep the meaning, drop the travel ============ */
@media (prefers-reduced-motion: reduce) {
  .ua-pip__bob, .ua-pip__eyes, .ua-snake__band, .ua-snake__headgroup, .ua-snake__tongue, .ua-sun::before, .ua-sun::after,
  .ua-die.is-picked::before, .ua-trick.is-armed, .ua-timer.is-low .ua-timer__track, .ua-ladder--golden .ua-ladder__glint, .ua-tile--target::before { animation: none !important; }
  .ua-die.is-rolling .ua-die__tumble, .ua-die.is-rolling::after { animation: ua-fade-in var(--dur-quick) linear both !important; }
  .ua-shout.is-live, .ua-shout.is-live > span, .ua-shout.is-held, .ua-shout.is-held > span, .ua-choices.is-entering .ua-choice, .ua-code.is-entering .ua-code__tile, .ua-deal, .ua-bubble.is-live, .ua-toast.is-live, .ua-feed__item.is-new, .ua-seat.is-joining .ua-pip {
    animation: ua-fade-in var(--dur-quick) linear both !important; }
  .ua-btn, .ua-choice, .ua-heat__opt, .ua-trick, .ua-player { transition-duration: 1ms !important; }
  .ua-confetti { display: none; }
}