/* App glue on top of tokens.css + components.css: page layout, the live
   table stage, and the few pieces the design system leaves to the app.
   Everything visual lives in components.css. */

/* the resets components.css scopes to .pool; the body is only .pool-app so
   that the light theme on :root is not shadowed by .pool's dark tokens */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  display: flex; flex-direction: column; min-height: 100%;
}
[hidden] { display: none !important; }
button { cursor: pointer; }

/* header: the design's .hdr; the score block is a placeholder until a
   match score exists */
.hdr { flex: none; }
.score__vs { font: 600 13px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-disabled); }
.hold__arc { transition: stroke-dashoffset 1s linear; }
.hold--big { width: 40px; height: 40px; }
.hold--big svg { width: 40px; height: 40px; }
.hold--big .hold__num { font-size: 13px; }

/* game column: stage grows, status and panel slot keep their heights */
main.game { flex: 1; min-height: 0; overflow: hidden; }
.stage__table { touch-action: none; user-select: none; }

/* power bar: a flex sibling of the table; the fill is full height and
   clipped, so the colour at its edge always matches the power */
.pbar { align-self: stretch; height: auto; }
.pbar--left { order: -1; }
.pbar__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pbar__fill {
  height: 100%;
  background: linear-gradient(180deg, var(--power-low) 0%, var(--power-mid) 55%, var(--power-high) 100%);
  clip-path: inset(0 0 calc(100% - var(--fill, 0%)) 0);
}
.pbar:not(.pbar--drag) .pbar__fill { background: var(--text-muted); opacity: .6; }
.pbar--settle .pbar__fill { transition: clip-path var(--dur-2) var(--ease-in); }
.pbar--spring .pbar__fill { transition: clip-path 250ms var(--ease-spring); }
.pbar--drag .pbar__label, .pbar--disabled .pbar__label { display: none; }
.pbar--cancel .pbar__readout { color: var(--foul); }
.pbar--disabled .pbar__track { pointer-events: none; }
.pbar--flash .pbar__track { transition: box-shadow var(--dur-2) var(--ease-in); }
.stage .tip { right: 66px; }
.stage .tip.tip--right { right: auto; left: 66px; }
.call__line--pulse { animation: pool-row-in var(--dur-4) var(--ease-out) 2; }

/* status: two layers in one cell cross-fade; the row never changes height */
.status { height: 48px; display: grid; place-items: center; }
.status__layer { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-3) var(--ease-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status__layer.is-active { opacity: 1; transition-timing-function: var(--ease-out); }
.status__pill[data-tone="foul"] { background: var(--foul-soft); border-color: transparent; }
.status__pill[data-tone="foul"] .status__icon { color: var(--foul); }
.status__pill[data-tone="ok"] { background: var(--ok-soft); border-color: transparent; }
.status__pill[data-tone="ok"] .status__icon { color: var(--ok); }

/* panel slot: panels stack in one grid cell and cross-fade */
.slot { display: grid; }
.slot .panel { grid-area: 1 / 1; overflow: hidden; }
.panel.is-leaving { animation: none; opacity: 0; transition: opacity var(--dur-1) var(--ease-in); }
.panel--between { justify-content: space-between; }
.panel__group--center { align-items: center; text-align: center; }
.panel__title { font: 600 28px/32px var(--font-display); letter-spacing: .01em; }
.panel__actions { display: flex; gap: 10px; align-items: center; }
#lobbyPanel { gap: 20px; }
.call__line--enter { animation: pool-row-in var(--dur-3) var(--ease-out) both; }
.hint__close { width: 28px; height: 28px; margin: -6px 0; }
.spin__reset-dot { transition: none; }
.spin__limit--max { border-color: var(--ball-3); }
.tray--right { justify-content: flex-end; }
.trays { flex: none; }

/* landing: the design's overlay is absolute (for mock-up frames); the app
   covers the viewport and dims the live table behind it */
.landing { position: fixed; background: var(--scrim); }
body.is-landing #top, body.is-landing main { filter: blur(var(--scrim-blur)) saturate(.8); }
.landing__invite { display: flex; flex-direction: column; gap: 8px; }
.wordmark--small { font-size: 20px; line-height: 24px; color: var(--text-muted); }
.landing__create { display: flex; flex-direction: column; gap: 12px; }
.landing__switch { text-align: center; font-size: 14px; line-height: 20px; }
.landing--invited .landing__create, .landing--invited .rooms, .landing--invited .divider,
.landing--invited .join-row .field { display: none; }
.landing--invited .join-row .btn { flex: 1; }
.room-row.is-leaving { opacity: 0; transition: opacity var(--dur-2) var(--ease-in); }
#roomList { max-height: 40vh; overflow-y: auto; }
.rooms__empty-title { font: 600 16px/22px var(--font-ui); }

/* overlays: the design positions them for mock-up frames; the app covers
   the viewport */
.scrim { position: fixed; -webkit-backdrop-filter: blur(4px); }
.dialog__head { display: flex; flex-direction: column; gap: 8px; }
.dialog__eyebrow { color: var(--foul); }
.banner, .result { position: absolute; }
.result { -webkit-backdrop-filter: blur(6px); }
.toasts { position: fixed; pointer-events: none; }
.toast { pointer-events: none; } /* notices never block the controls beneath them */
.toast__close { pointer-events: auto; }
.toast__close { width: 36px; height: 36px; color: var(--toast-text); }

/* connectivity */
.scrim--conn { backdrop-filter: blur(3px) saturate(.6); -webkit-backdrop-filter: blur(3px) saturate(.6); }
.conn__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.conn__icon--accent { background: var(--accent-soft); color: var(--accent-text); }
.splash { position: fixed; }
.splash__bar span { animation: pool-splash 1.2s var(--ease-inout) infinite alternate; }
@keyframes pool-splash { from { transform: translateX(-40%); } to { transform: translateX(110%); } }

/* settings */
.dialog--settings { max-width: 400px; gap: 18px; }
.setting { display: flex; flex-direction: column; gap: 8px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- compact layouts ---------- */

/* shared by portrait phones and landscape phones: the panel stacks */
@media (max-width: 600px), ((orientation: landscape) and (max-height: 500px)) {
  .panel { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .panel--center { align-items: center; justify-content: center; }
  .panel__sep, .hint { display: none; }
  .call { flex-direction: row; align-items: center; gap: 8px; min-height: 36px; }
  .call__line { flex: 1; }
  #shotPanel .nudge { min-width: 0; flex: 1; padding: 0 2px; font-size: 12px; }
  #shotPanel .angle__readout { min-width: 0; font-size: 17px; padding: 0 2px; }
  .spin__pad { --pad: 64px; }
  .spin__meta { gap: 2px; align-items: flex-end; text-align: right; width: 58px; }
  .spin__meta .field__label { display: none; }
  .spin__label { font-size: 13px; line-height: 18px; }
  .panel__title { font-size: 22px; line-height: 26px; }
  #overPanel { flex-direction: row; align-items: center; }
  #settingsBtn { width: 36px; height: 36px; }
}

/* portrait phones */
@media (max-width: 600px) {
  .hdr { height: 52px; padding: 0 8px 0 12px; gap: 6px; }
  .hdr .eyebrow { display: none; }
  .hdr__room { flex: none; gap: 2px; }
  .hdr__code { font-size: 17px; letter-spacing: .12em; }
  #copyLink span { display: none; }
  #copyLink { padding: 0 8px; min-height: 32px; }
  #settingsBtn { width: 32px; height: 32px; }
  .hdr__match { flex: 1; min-width: 0; justify-content: flex-end; gap: 6px; }
  .seat { flex: 0 1 auto; min-width: 0; }
  .seat--compact { max-width: 124px; padding: 0 8px; }
  .seat--compact .seat__name { max-width: 7ch; }
  .score__vs { font-size: 11px; }
  .stage { padding: 8px 12px 4px 16px; gap: 8px; }
  .status { height: 40px; padding: 0 16px; font-size: 15px; line-height: 20px; }
  .status__layer { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 12px; border-radius: 12px; text-align: left; }
  .slot { height: 150px; padding: 0 16px 8px; }
  #shotPanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 10px 8px; align-content: start; }
  #shotPanel .call { grid-column: 1 / -1; }
  #shotPanel .angle { grid-row: 2; grid-column: 1; min-width: 0; gap: 4px; }
  #shotPanel .angle > .field__label { display: none; }
  #shotPanel .angle__row { gap: 4px; }
  #shotPanel .spin { grid-row: 2; grid-column: 2; flex-direction: row-reverse; gap: 8px; }
  .trays { height: 22px; padding: 0 16px; align-items: center; }
  .trays .ball { --size: 14px; }
}

/* short screens: give the table room; trays go first, the hint is already gone */
@media (max-height: 700px) and (max-width: 600px) {
  .trays { display: none; }
  .stage { min-height: 340px; }
}

/* landscape phones: table | bar on the left, the shot panel as a sidebar */
@media (orientation: landscape) and (max-height: 500px) {
  .hdr { height: 36px; padding: 0 4px; border-bottom: 0; background: transparent; gap: 10px; }
  .hdr .eyebrow { display: none; }
  .hdr__code { font-size: 16px; letter-spacing: .12em; }
  #copyLink span { display: none; }
  #copyLink { padding: 0 8px; min-height: 30px; }
  .seat { height: 30px; padding: 0 10px; gap: 6px; border-radius: var(--r-md); }
  .seat__name { font-size: 14px; }
  .seat__state, .seat__cue { display: none; }
  .seat__dots .ball { --size: 8px; }
  main.game { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: minmax(0, 1fr); gap: 0 12px; position: relative; padding: 0 8px 6px 0; }
  .stage { grid-row: 1; grid-column: 1; padding: 4px 0 4px 8px; gap: 10px; }
  .status { position: absolute; left: 8px; right: 232px; bottom: 10px; height: auto; min-height: 0; padding: 0; z-index: 2; pointer-events: none; }
  .status__layer { font-size: 14px; line-height: 20px; padding: 4px 12px; background: rgba(13, 18, 24, .88); }
  .slot { grid-row: 1; grid-column: 2; height: auto; padding: 4px 0; }
  .slot .panel { height: 100%; justify-content: center; gap: 14px; }
  .slot .panel .call { flex: none; flex-direction: column; align-items: stretch; gap: 8px; }
  .slot .panel .call__line { font-size: 15px; }
  .hdr__match { flex: 1; min-width: 0; justify-content: flex-end; }
  .seat { flex: 0 1 auto; min-width: 0; }
  #shotPanel .angle > .field__label { display: none; }
  #shotPanel .angle__row { justify-content: space-between; gap: 4px; }
  #shotPanel .spin { gap: 10px; }
  .trays { display: none; }
  .landing__card { max-height: 100%; overflow-y: auto; }
}