/* Loaded LAST, on purpose.
   These rules re-state paddings owned by lobby.css / table.css /
   reactions.css and add device insets. Loading earlier would let those
   files win on source order and silently drop the insets. */

/* ══════════════════════════════════════════════════════════════════════
   Safe areas — notch, rounded corners, gesture bar
   ══════════════════════════════════════════════════════════════════════
   The pages set viewport-fit=cover, which lets the layout use the whole
   screen — and therefore lets content slide under the notch and the home
   indicator. These insets resolve to 0px on hardware without cutouts, so
   they apply unconditionally rather than behind a media query.
   Values below re-state each rule's original padding and add the inset. */

.topbar {
  padding-top: calc(0.9rem + env(safe-area-inset-top));
  padding-left: calc(1.25rem + env(safe-area-inset-left));
  padding-right: calc(1.25rem + env(safe-area-inset-right));
}

.lobby {
  padding-left: calc(1.25rem + env(safe-area-inset-left));
  padding-right: calc(1.25rem + env(safe-area-inset-right));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
/* On phones the start bar is pinned to the bottom, so the lobby needs room
   underneath it for the last card to scroll clear. */
@media (max-width: 820px) {
  .lobby { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}

.table-view {
  padding-left: calc(1.5rem + env(safe-area-inset-left));
  padding-right: calc(1.5rem + env(safe-area-inset-right));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* Wide screens reserve an empty right gutter the same width as the Scores
   column, which is what actually centres the felt on screen — see the
   "centre the TABLE" block in table.css for the reasoning. It has to live here
   rather than there because this file owns the last word on .table-view's
   horizontal padding, so the same declaration written in table.css is
   overwritten by the rule above. */
@media (min-width: 1700px) {
  .table-view {
    padding-right: calc(
      var(--side-col) + var(--side-gap) + var(--page-pad) + env(safe-area-inset-right)
    );
  }
}

/* Fixed-position furniture has to clear the gesture bar itself. */
#toast {
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Note: the phone table sheet (.ts-sheet) applies its own bottom inset in
   table_sheet.css, where its base padding lives — deliberately not restated
   here, so there is only one place that decides its spacing. */
.reaction-dock {
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ── Connection banner (core/connection.js) ─────────────────────────── */
#conn-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  margin-top: 8px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}