/* Pool · components v0.1 — flat BEM classes, no framework. Needs tokens.css.
   Copied from design/components.css without its "Mockup only" section;
   app-specific glue lives in style.css. */

/* ---------- base ---------- */
.pool, .pool-app {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.pool *, .pool *::before, .pool *::after { box-sizing: border-box; }
.pool h1, .pool h2, .pool h3, .pool p, .pool ul { margin: 0; }
.pool ul { padding: 0; list-style: none; }
.pool button, .pool input { font: inherit; color: inherit; }

.eyebrow { font: 700 12px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.caption { font: 400 12px/16px var(--font-ui); color: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; }
.code-text { font: 600 24px/28px var(--font-display); letter-spacing: .16em; }
.link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hit); padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 15px/20px var(--font-ui); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); transform: scale(.98); }
.btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--hairline-strong); }
.btn--secondary:hover { background: var(--surface-3); }
.btn--secondary:active { background: var(--surface-3); border-color: var(--text-muted); transform: scale(.98); }
.btn--quiet { background: transparent; color: var(--text-muted); padding: 0 14px; }
.btn--quiet:hover { color: var(--text); background: var(--surface-2); }
.btn--small { min-height: 32px; padding: 0 14px; font-size: 14px; gap: 6px; }
.btn--small::before { content: ""; position: absolute; inset: -6px -2px; }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: 17px; padding: 0 28px; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled { background: var(--surface-2); color: var(--text-disabled); border-color: var(--hairline); cursor: not-allowed; transform: none; }
.btn svg { flex: none; }

.icon-btn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hit); height: var(--hit); border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.icon-btn--framed { background: var(--surface-2); border-color: var(--hairline-strong); color: var(--text); }

/* toggle button (Safety): fills from the left when on */
.toggle {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--text);
  font: 600 14px/20px var(--font-ui); cursor: pointer; white-space: nowrap;
}
.toggle::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.toggle__box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; }
.toggle[aria-pressed="true"] { color: var(--on-accent); border-color: transparent; }
.toggle[aria-pressed="true"]::before { transform: scaleX(1); }
.toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: 600 13px/18px var(--font-ui); color: var(--text-muted); }
.field__msg { display: flex; align-items: center; gap: 6px; font: 400 13px/18px var(--font-ui); color: var(--foul); }
.input-group { position: relative; }
.input-group .input { padding-right: 48px; }
.input-group .icon-btn { position: absolute; right: 0; top: 0; border-radius: var(--r-md); }
.input {
  display: block; width: 100%; height: var(--hit); padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--hairline-strong);
  background: var(--input-bg); color: var(--text); font: 400 16px/24px var(--font-ui);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }
.input--error, .input--error:focus { border-color: var(--foul); box-shadow: 0 0 0 3px var(--foul-soft); }
.input--code { font: 600 22px/24px var(--font-display); letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: 0 10px; }
.input--code::placeholder { letter-spacing: .12em; font-size: 18px; }
.field--shake .input { animation: pool-shake 300ms var(--ease-out) 1; }

/* ---------- tags & chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-3); color: var(--text); font: 600 12px/16px var(--font-ui); letter-spacing: .02em; white-space: nowrap;
}
.tag--you { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-ring); }
.tag--ready { background: var(--ok-soft); color: var(--ok); }
.tag--offline { background: transparent; color: var(--foul); border: 1px dashed var(--foul); }
.tag--icon { width: 22px; padding: 0; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-2);
  font: 600 12px/16px var(--font-ui); letter-spacing: .02em; white-space: nowrap;
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--lobby { color: var(--ok); }
.chip--playing { color: var(--accent-text); border-color: var(--accent-ring); }
.chip--finished { color: var(--text-muted); }
.chip--finished .chip__dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- DOM balls (trays, seat dots, spin pad) ---------- */
.ball {
  --size: 20px; --c: var(--ball-ivory);
  position: relative; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--c);
  box-shadow: inset calc(var(--size) * -.12) calc(var(--size) * -.16) calc(var(--size) * .28) rgba(0,0,0,.38),
              inset calc(var(--size) * .06) calc(var(--size) * .08) calc(var(--size) * .16) rgba(255,255,255,.14),
              0 0 0 1px rgba(0,0,0,.35);
}
.ball--stripe { background: linear-gradient(180deg, var(--ball-ivory) 0 21%, var(--c) 21% 79%, var(--ball-ivory) 79% 100%); }
.ball--gone { opacity: .22; filter: grayscale(1); box-shadow: inset 0 0 0 1.5px var(--text-muted); background: transparent; }
.ball__num { position: absolute; inset: 26%; border-radius: 50%; background: var(--ball-disc); color: #111316;
  display: flex; align-items: center; justify-content: center; font: 700 calc(var(--size) * .3)/1 var(--font-ui); }

/* ---------- toast ---------- */
.toasts { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; max-width: 360px; padding: 12px 16px;
  border-radius: var(--r-md); background: var(--toast-bg); color: var(--toast-text);
  box-shadow: var(--shadow-toast); font: 400 15px/22px var(--font-ui);
  animation: pool-toast-in var(--dur-3) var(--ease-out) both;
}
.toast.is-leaving { animation: pool-toast-out var(--dur-2) var(--ease-in) both; }
.toast__icon { flex: none; margin-top: 3px; color: var(--toast-ok); }
.toast--error .toast__icon { color: var(--toast-foul); }
.toast--info .toast__icon { color: var(--accent); }
.toast__close { margin: -8px -10px -8px 0; color: var(--toast-text); opacity: .7; }

/* ---------- card / landing ---------- */
.card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.backdrop__table { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: blur(var(--scrim-blur)) saturate(.8); opacity: .9; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.landing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: var(--z-overlay); }
.landing__card { position: relative; width: 100%; max-width: 448px; padding: 28px; display: flex; flex-direction: column; gap: 24px;
  box-shadow: var(--shadow-overlay); animation: pool-enter var(--dur-4) var(--ease-out) both; }
.landing__brand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wordmark { font: 700 28px/32px var(--font-display); letter-spacing: .06em; }
.landing__title { font: 600 24px/30px var(--font-ui); }
.landing__lead { font: 400 15px/22px var(--font-ui); color: var(--text-muted); }
.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--text); font: 400 14px/20px var(--font-ui); }
.note__icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.note--foul { background: var(--foul-soft); }
.note--foul .note__icon { color: var(--foul); }

.rooms { display: flex; flex-direction: column; }
.rooms__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.room-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 60px; padding: 8px 0; border-top: 1px solid var(--hairline); animation: pool-row-in var(--dur-4) var(--ease-out) both; }
.room-row__code { font: 600 22px/26px var(--font-display); letter-spacing: .14em; }
.room-row__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.room-row__names { font: 400 15px/20px var(--font-ui); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-row__vs { color: var(--text-muted); }
.room-row__names--empty { color: var(--text-muted); font-style: italic; }
.rooms__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px; border-top: 1px solid var(--hairline); text-align: center; }
.join-row { display: flex; gap: 10px; align-items: flex-end; }
.join-row .field { flex: 1; }

/* ---------- header & seats ---------- */
.hdr { position: relative; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 20px; background: var(--surface-1); border-bottom: 1px solid var(--hairline); }
.hdr__room { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr__code { font: 600 22px/26px var(--font-display); letter-spacing: .16em; }
.hdr__match { display: flex; align-items: center; gap: 14px; min-width: 0; }
.seat {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 300px;
  height: 46px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong); background: var(--surface-2);
  transition: border-color var(--dur-5) var(--ease-out), background-color var(--dur-5) var(--ease-out), opacity var(--dur-5) var(--ease-out), filter var(--dur-5) var(--ease-out);
}
.seat__body { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.seat__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seat__name { font: 600 15px/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.seat__dots { display: flex; gap: 3px; }
.seat__dots .ball { --size: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.seat__state { font: 600 12px/16px var(--font-ui); color: var(--text-muted); white-space: nowrap; }
.seat__cue { flex: none; color: var(--accent); }
.seat--turn { border-color: var(--accent); background: var(--accent-soft); animation: pool-pulse var(--dur-pulse) var(--ease-inout) infinite; }
.seat--turn .seat__state { color: var(--accent-text); }
.seat--turn.is-moving { animation: none; }
.seat--theirs { border-color: var(--accent-ring); }
.seat--offline { border-style: dashed; border-color: var(--foul); background: transparent; filter: saturate(.25); }
.seat--offline .seat__name { color: var(--text-muted); }
.seat--empty { border-style: dashed; background: transparent; color: var(--text-muted); font-style: italic; }
.hold { position: relative; width: 26px; height: 26px; flex: none; }
.hold svg { display: block; transform: rotate(-90deg); }
.hold__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 10px/1 var(--font-ui); color: var(--foul); font-variant-numeric: tabular-nums; }

.score { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.score__nums { display: flex; align-items: center; gap: 8px; font: 600 32px/34px var(--font-display); font-variant-numeric: tabular-nums; }
.score__sep { color: var(--text-muted); font-weight: 500; }
.score__slot { position: relative; height: 34px; overflow: hidden; display: inline-flex; flex-direction: column; }
.score__race { font: 600 11px/14px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.score--empty .score__nums { color: var(--text-disabled); }

/* ---------- game screen ---------- */
.game { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px 8px; }
.stage__table { display: block; max-width: 100%; max-height: 100%; }
.stage__wrap { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.status {
  min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 15px/22px var(--font-ui); color: var(--text); transition: color var(--dur-3) var(--ease-out);
}
.status__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline); max-width: 100%; }
.status--foul .status__pill { background: var(--foul-soft); border-color: transparent; }
.status--foul .status__icon { color: var(--foul); }
.status--ok .status__pill { background: var(--ok-soft); border-color: transparent; }
.status--ok .status__icon { color: var(--ok); }
.status__icon { flex: none; color: var(--text-muted); }
.status--2line { min-height: 64px; }

.slot { position: relative; height: 140px; padding: 0 20px 16px; }
.panel {
  height: 100%; display: flex; align-items: center; gap: 24px; padding: 12px 20px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  animation: pool-fade var(--dur-3) var(--ease-out) both;
}
.panel--center { justify-content: center; text-align: center; }
.panel__msg { font: 400 16px/24px var(--font-ui); }
.panel__msg strong { font-weight: 600; }
.panel__sub { font: 400 13px/18px var(--font-ui); color: var(--text-muted); }
.panel__group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.panel__sep { align-self: stretch; width: 1px; background: var(--hairline); flex: none; }

.call { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.call__line { font: 400 16px/24px var(--font-ui); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform var(--dur-3) var(--ease-out); }
.call__line--called { color: var(--text); }
.call__value { color: var(--accent-text); font-weight: 600; }
.call__actions { display: flex; gap: 8px; align-items: center; }

.angle { display: flex; flex-direction: column; gap: 8px; }
.angle__row { display: flex; align-items: center; gap: 6px; }
.nudge { position: relative; min-width: 40px; min-height: 36px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong);
  background: var(--surface-2); color: var(--text); font: 600 13px/16px var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.nudge::before { content: ""; position: absolute; inset: -4px -3px; }
.nudge:hover { background: var(--surface-3); }
.nudge:active { transform: scale(.96); }
.nudge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.angle__readout { min-width: 84px; text-align: center; font: 600 22px/28px var(--font-ui); font-variant-numeric: tabular-nums; }

.spin { display: flex; align-items: center; gap: 14px; }
.spin__pad {
  --pad: 84px; position: relative; flex: none; width: var(--pad); height: var(--pad); border-radius: 50%; cursor: crosshair; touch-action: none;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #F4EFE2 34%, #D9D2C1 78%, #B9B09D 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 6px 14px -6px rgba(0,0,0,.6);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.spin__pad:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 0 4px var(--accent-soft), 0 6px 14px -6px rgba(0,0,0,.6); }
.spin__pad:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.spin__limit { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px dashed rgba(17,19,22,.35); }
.spin__cross { position: absolute; inset: 0; background:
  linear-gradient(rgba(17,19,22,.14), rgba(17,19,22,.14)) center / 1px 100% no-repeat,
  linear-gradient(rgba(17,19,22,.14), rgba(17,19,22,.14)) center / 100% 1px no-repeat; border-radius: 50%; }
.spin__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ball-3); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.5); }
.spin__dot--reset { transition: left var(--dur-3) var(--ease-spring), top var(--dur-3) var(--ease-spring); }
.spin__meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.spin__label { font: 600 15px/20px var(--font-ui); }

.hint { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font-ui); color: var(--text-muted); }
.hint kbd { font: 600 11px/16px var(--font-mono); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--text); }

.trays { display: flex; justify-content: space-between; gap: 16px; padding: 0 20px 12px; }
.tray { display: flex; align-items: center; gap: 4px; min-height: 24px; }
.tray .ball { --size: 18px; }
.tray__label { font: 600 12px/16px var(--font-ui); color: var(--text-muted); margin-right: 6px; }

/* ---------- power bar ---------- */
.pbar { position: relative; flex: none; width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; touch-action: none; user-select: none; }
.pbar__track { position: relative; flex: 1; width: 100%; border-radius: var(--r-pill); overflow: hidden; cursor: ns-resize;
  background: var(--surface-2); border: 1px solid var(--hairline-strong); }
.pbar__cancel { position: absolute; left: 0; right: 0; top: 0; height: 8%; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px dashed var(--hairline-strong); color: var(--text-muted); }
.pbar__last { position: absolute; left: 0; right: 0; top: 0; background: var(--text-muted); opacity: .14; }
.pbar__fill { position: absolute; left: 0; right: 0; top: 0; border-radius: 0 0 var(--r-pill) var(--r-pill); }
.pbar__label { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted); font: 700 11px/14px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.pbar__label span { writing-mode: vertical-rl; transform: rotate(180deg); }
.pbar__readout { position: absolute; right: calc(100% + 12px); transform: translateY(-50%); padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--toast-bg); color: var(--toast-text); font: 600 22px/28px var(--font-display); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-toast); white-space: nowrap; }
.pbar--left .pbar__readout { right: auto; left: calc(100% + 12px); }
.pbar--drag .pbar__track { border-color: var(--text-muted); }
.pbar--cancel .pbar__cancel { background: var(--foul-soft); color: var(--foul); border-bottom-color: var(--foul); }
.pbar--flash .pbar__track { box-shadow: 0 0 0 3px var(--accent-ring); }
.pbar--disabled { opacity: .35; }
.pbar--disabled .pbar__track { cursor: default; }

.tip { position: absolute; z-index: var(--z-banner); max-width: 220px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--toast-bg); color: var(--toast-text); font: 400 14px/20px var(--font-ui); box-shadow: var(--shadow-toast); }
.tip::after { content: ""; position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; margin-top: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tip--right::after { right: auto; left: -6px; }

/* ---------- overlays ---------- */
.scrim { position: absolute; inset: 0; z-index: var(--z-dialog); background: var(--scrim); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: pool-fade var(--dur-3) var(--ease-out) both; }
.dialog { width: 100%; max-width: 480px; padding: 28px; display: flex; flex-direction: column; gap: 20px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay);
  animation: pool-dialog-in var(--dur-4) var(--ease-out) both; }
.dialog__title { font: 600 24px/30px var(--font-ui); }
.dialog__text { font: 400 16px/24px var(--font-ui); color: var(--text-muted); }
.dialog__options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  animation: pool-row-in var(--dur-4) var(--ease-out) both;
}
.option:hover { background: var(--surface-3); border-color: var(--text-muted); }
.option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.option__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.option__title { font: 600 16px/22px var(--font-ui); }
.option__sub { font: 400 14px/20px var(--font-ui); color: var(--text-muted); }
.option__chev { flex: none; color: var(--text-muted); }
.option--primary { border-color: var(--accent-ring); background: var(--accent-soft); }
.option--primary .option__chev { color: var(--accent-text); }

.banner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: var(--z-banner);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--shadow-toast); font: 400 15px/22px var(--font-ui); white-space: nowrap; }

.result { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: var(--z-banner); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 24px; text-align: center;
  background: rgba(13, 18, 24, .86); backdrop-filter: blur(6px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  animation: pool-fade var(--dur-4) var(--ease-out) both; }
.result__title { font: 600 44px/48px var(--font-display); letter-spacing: .02em; color: #E8ECF1; }
.result__reason { font: 400 16px/24px var(--font-ui); color: #9BA8B7; }
.result--win { border-color: var(--accent-ring); }
.result--win .result__title { color: #E3B25C; }
.result--win::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 226, 170, .16), transparent); animation: pool-sweep var(--dur-7) var(--ease-inout) 200ms 1 both; }

.conn { width: 100%; max-width: 360px; padding: 22px; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay);
  animation: pool-dialog-in var(--dur-4) var(--ease-out) both; }
.conn__head { display: flex; gap: 12px; align-items: flex-start; }
.conn__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--foul-soft); color: var(--foul); }
.conn__title { font: 600 18px/24px var(--font-ui); }
.conn__text { font: 400 15px/22px var(--font-ui); color: var(--text-muted); }
.retry { display: flex; flex-direction: column; gap: 8px; }
.retry__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.retry__step { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.retry__step--done { background: var(--text-muted); }
.retry__step--now { position: relative; }
.retry__step--now::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, .5)); }
.retry__meta { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/18px var(--font-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.conn__actions { display: flex; gap: 8px; }
.conn__actions .btn { flex: 1; }

.splash { position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg); animation: pool-fade var(--dur-3) var(--ease-out) 150ms both; }
.splash__code { font: 600 40px/44px var(--font-display); letter-spacing: .18em; }
.splash__bar { width: 120px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.splash__bar span { display: block; height: 100%; width: 60%; background: var(--accent); border-radius: 2px; }

/* ---------- phone shells ---------- */
.phone { position: relative; width: 390px; height: 844px; overflow: hidden; padding-top: 47px; padding-bottom: 34px; display: flex; flex-direction: column; }
.phone--short { height: 660px; padding-top: 20px; padding-bottom: 20px; }
.phone--land { width: 844px; height: 390px; padding: 0 47px 21px; }
.phone .hdr { height: 52px; padding: 0 12px 0 16px; }
.phone .hdr__code { font-size: 18px; letter-spacing: .14em; }
.phone .stage { padding: 8px 12px 4px 16px; gap: 8px; }
.phone .status { min-height: 40px; padding: 0 16px; font-size: 15px; line-height: 20px; }
.phone .slot { height: 150px; padding: 0 16px 8px; }
.phone .panel { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
.phone .panel--center { align-items: center; justify-content: center; }
.phone .trays { height: 22px; padding: 0 16px; align-items: center; }
.phone .trays .ball { --size: 14px; }
.phone--land .hdr { height: 36px; padding: 0 4px; border-bottom: 0; background: transparent; }
.seat--compact { height: 44px; max-width: 132px; padding: 0 10px; border-radius: var(--r-md); gap: 6px; }
.seat--compact .seat__name { font-size: 14px; max-width: 8ch; }
.seat--compact .seat__dots { gap: 2px; }
.seat--compact .seat__dots .ball { --size: 7px; }
.score--compact { min-width: 52px; }
.score--compact .score__nums { font-size: 24px; line-height: 26px; gap: 5px; }
.score--compact .score__slot { height: 26px; }
.score--compact .score__race { font-size: 10px; }

/* ---------- motion ---------- */
@keyframes pool-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 8px rgba(217, 164, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); } }
@keyframes pool-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pool-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pool-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pool-dialog-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pool-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pool-toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes pool-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes pool-sweep { from { left: -40%; } to { left: 110%; } }
@keyframes pool-tick-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes pool-tick-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pool *, .pool *::before, .pool *::after,
  .pool-app *, .pool-app *::before, .pool-app *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .seat--turn { animation: none; box-shadow: 0 0 0 3px var(--accent-ring); }
  .result--win::after { display: none; }
}