/* Friends feature (Phase 4) — Multiplayer panel trigger + Friends overlay.
   Self-contained neon styling; scoped under .cr-fr-* / .friends-* so it never
   collides with existing select-mode ids/classes. */

:root {
  --fr-cyan: #00e5ff;
  --fr-pink: #ff4d6d;
  --fr-green: #3ddc84;
  --fr-amber: #ffd166;
  --fr-ink: #05060d;
  --fr-panel: rgba(10, 14, 26, 0.92);
  --fr-line: rgba(0, 229, 255, 0.22);
  --fr-text: #eaf6ff;
  --fr-muted: #8ea3c0;
}

/* ── Multiplayer heading + Friends trigger ─────────────────────────────── */
.multiplayer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.friends-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--fr-line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.12), rgba(0, 229, 255, 0.04));
  color: var(--fr-text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.friends-pill:hover,
.friends-pill:focus-visible {
  border-color: var(--fr-cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 6px 20px rgba(0, 229, 255, 0.16);
  outline: none;
}
.friends-pill:active { transform: scale(0.96); }
.friends-pill-icon { display: inline-flex; width: 18px; height: 18px; color: var(--fr-cyan); }
.friends-pill-icon svg { width: 100%; height: 100%; }
.friends-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(61, 220, 132, 0.16);
  color: var(--fr-green);
  font-size: 11px;
  font-weight: 800;
}
.friends-pill-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fr-green);
  box-shadow: 0 0 6px var(--fr-green);
}
/* A class selector's `display` beats the UA `[hidden]` rule (equal specificity,
   later source order) — restore hidden behaviour for these flex/inline badges. */
.friends-pill-badge[hidden],
.cr-fr-tabbadge[hidden] { display: none; }

/* ── Home "Friends Online" strip ───────────────────────────────────────── */
/* Slightly smaller CAVE RUSH wordmark + tighter hero spacing on the home page
   only, reclaiming enough vertical room for the Friends Online strip so the
   hub never clips or shifts when the strip appears. */
html[data-cave-page="startup"] .logo-line {
  font-size: clamp(4.9rem, 20vw, 12rem);
}
/* startup.css pins .title-wrap to height:min(34vh,172px) on portrait, so the
   smaller font alone wouldn't reclaim space — let it hug the smaller logo. */
html[data-cave-page="startup"] .title-wrap {
  margin-top: 6px;
  height: auto;
  min-height: 0;
  max-height: 150px;
}
html[data-cave-page="startup"] .start-hero-content {
  gap: 5px;
  /* startup.css biases the hero up by -4vh; with the compact layout the
     content fits the viewport, so that shift only clips the wordmark. */
  transform: translateY(-4px);
}
html[data-cave-page="startup"] #playerHome {
  position: relative;
  margin-bottom: 8px;
}
/* Leave enough room below the hub for the out-of-flow friends strip. */
html[data-cave-page="startup"] #startOverlay .start-overlay-stack {
  padding-top: calc(48px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
/* Slightly shorter Battle hero to absorb the strip row. Its clamp stays above
   the variants panel's clamp(200px, 27vh, 280px), so the shared 1/1 grid row
   is still sized by the hero and the Single-card cross-fade doesn't jump. */
html[data-cave-page="startup"] .player-home-battle {
  min-height: clamp(248px, 33vh, 316px);
}

.home-friends-strip {
  /* Keep the strip out of the startup grid's height calculation. Otherwise
     the centred hero moves up by half the strip height, then jumps back down
     when Leaderboard hides the strip. Anchor it just below #playerHome so the
     Battle and Leaderboard states retain the same vertical position. */
  width: calc(100vw - 24px);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 6px 0 0;
  z-index: 3;
  /* The anchored row remains present while signed in, so friends coming
     online/offline only change its visibility and never move the hero. */
  min-height: 42px;
}
.home-friends-strip.is-empty { visibility: hidden; }
/* Fully removed while signed out (gate/identity states). */
.home-friends-strip[hidden] { display: none; }
/* Hidden in the signed-out hub states and while the in-hub leaderboard is open,
   matching the Leaderboard button's own visibility. */
.player-home.is-gate .home-friends-strip,
.player-home.is-identity .home-friends-strip,
.player-home.is-leaderboard-open .home-friends-strip { display: none; }

/* Heading removed from startup markup; keep selectors inert for safety. */
.home-friends-head,
.home-friends-title { display: none; }

/* Corner Friends button (same glyph as the Multiplayer panel's Friends pill).
   Fixed to the bottom-right, safe-area aware; sits under the startup nav
   (z 9999) and the battle-search overlay (z 10001) so it never floats over
   the Searching screen. */
.home-friends-fab {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  width: 46px;
  height: 46px;
  min-width: 46px; max-width: 46px;
  min-height: 46px; max-height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fr-line);
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.94), rgba(6, 10, 20, 0.94));
  color: var(--fr-cyan);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 229, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.home-friends-fab[hidden] { display: none; }
.home-friends-fab svg { width: 22px; height: 22px; }
.home-friends-fab:active { transform: scale(0.94); }
.home-friends-fab:hover,
.home-friends-fab:focus-visible {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 18px rgba(0, 229, 255, 0.3);
  outline: none;
}

.home-friends-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* The visible track ends before the fixed corner Friends button, so chips
     never sit (or scroll) underneath it. */
  margin-right: 60px;
  padding: 1px 8px 2px 2px;
  scrollbar-width: none;
}
.home-friends-track::-webkit-scrollbar { display: none; }
.home-friends-track[hidden] { display: none; }

.home-friend-chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(61, 220, 132, 0.28);
  background: linear-gradient(180deg, rgba(61, 220, 132, 0.12), rgba(61, 220, 132, 0.04));
  color: var(--fr-text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.home-friend-chip:active { transform: scale(0.95); }
.home-friend-chip:hover,
.home-friend-chip:focus-visible {
  box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.5), 0 6px 16px rgba(61, 220, 132, 0.16);
  outline: none;
}
.home-friend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fr-green);
  box-shadow: 0 0 8px var(--fr-green);
}
.home-friend-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-friends-toast {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -100%) translateY(6px);
  max-width: 90%;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.98);
  border: 1px solid var(--fr-line);
  color: var(--fr-text);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
.home-friends-toast.is-shown { opacity: 1; transform: translate(-50%, -100%) translateY(0); }

/* ── Incoming Live Battle invite modal (Phase 7) ───────────────────────── */
.cr-inv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cr-inv-overlay[hidden] { display: none; }
.cr-inv-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 12, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cr-inv-overlay.is-open .cr-inv-scrim { opacity: 1; }
.cr-inv-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 22px;
  border-radius: 22px;
  border: 1px solid var(--fr-line);
  background: var(--fr-panel);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.1);
  text-align: center;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.cr-inv-overlay.is-open .cr-inv-card { transform: translateY(0) scale(1); opacity: 1; }
.cr-inv-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-cyan);
}
.cr-inv-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: var(--fr-text);
  word-break: break-word;
}
.cr-inv-sub { margin: 4px 0 0; font-size: 14px; color: var(--fr-muted); }
.cr-inv-timer { margin: 16px 0 18px; font-size: 13px; font-weight: 700; color: #9ef0ff; }
.cr-inv-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.14);
  color: var(--fr-text);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.cr-inv-actions { display: flex; gap: 10px; }
.cr-inv-btn {
  flex: 1;
  padding: 13px 10px;
  border-radius: 13px;
  border: 1px solid var(--fr-line);
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cr-inv-btn:active { transform: scale(0.96); }
.cr-inv-btn--accept {
  background: linear-gradient(180deg, var(--fr-green), #2fb96f);
  border-color: var(--fr-green);
  color: #05130b;
  box-shadow: 0 6px 18px rgba(61, 220, 132, 0.3);
}
.cr-inv-btn--decline { background: rgba(255, 255, 255, 0.05); color: var(--fr-text); }

/* ── Overlay shell ─────────────────────────────────────────────────────── */
.cr-fr-locked { overflow: hidden; }

.cr-fr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* `display:flex` above beats the UA `[hidden]` rule (equal specificity, later
   source order), so without this the closed overlay stays a full-screen layer
   that silently swallows clicks — including the Friends button. */
.cr-fr-overlay[hidden] { display: none; }
.cr-fr-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cr-fr-overlay.is-open .cr-fr-scrim { opacity: 1; }

.cr-fr-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 88vh;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.08);
  /* Pull-up: the sheet slides in from fully below the viewport. */
  transform: translateY(100%);
  opacity: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}
.cr-fr-overlay.is-open .cr-fr-sheet { transform: translateY(0); }

/* iOS standalone/fullscreen viewport tuning:
   - keep the startup logo clear of the status bar notch area
   - place the Friends FAB slightly lower (below leaderboard row)
   - keep Friends sheet/close button below native status icons */
html.ios-standalone-web-app[data-cave-page="startup"] .logo-line {
  font-size: clamp(4.4rem, 17vw, 8.5rem);
}

html.ios-standalone-web-app[data-cave-page="startup"] #startOverlay .start-overlay-stack {
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
}

html.ios-standalone-web-app[data-cave-page="startup"] .start-hero-content {
  transform: translateY(0);
}

html.ios-standalone-web-app[data-cave-page="startup"] .home-friends-fab {
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

html.ios-standalone-web-app .cr-fr-sheet {
  height: min(82svh, calc(100svh - env(safe-area-inset-top, 0px) - 14px));
  max-height: min(82svh, calc(100svh - env(safe-area-inset-top, 0px) - 14px));
}

html.ios-standalone-web-app .cr-fr-head {
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}

.cr-fr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
}
.cr-fr-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--fr-text);
  background: linear-gradient(90deg, var(--fr-cyan), #7c5cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cr-fr-close {
  flex: none;
  box-sizing: border-box;
  width: 34px; height: 34px;
  /* Override any global button min-height (a taller touch-target rule was
     stretching this into an oval). */
  min-width: 34px; max-width: 34px;
  min-height: 34px; max-height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fr-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fr-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cr-fr-close:active { transform: scale(0.94); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.cr-fr-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
}
.cr-fr-tab {
  flex: 1;
  position: relative;
  padding: 9px 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fr-muted);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.cr-fr-tab.is-active {
  color: var(--fr-ink);
  background: linear-gradient(180deg, var(--fr-cyan), #46c8ff);
  border-color: var(--fr-cyan);
  box-shadow: 0 6px 18px rgba(0, 229, 255, 0.28);
}
.cr-fr-tabbadge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--fr-pink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  vertical-align: middle;
}

/* ── Body + panels ─────────────────────────────────────────────────────── */
.cr-fr-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px 18px;
}
.cr-fr-panel { min-width: 0; }
.cr-fr-subhead {
  margin: 14px 4px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-muted);
}
.cr-fr-listing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.cr-fr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
.cr-fr-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--fr-ink);
  background: var(--fr-avatar, var(--fr-cyan));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.cr-fr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-fr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-fr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fr-muted);
}
.cr-fr-dot { width: 8px; height: 8px; border-radius: 50%; background: #55627a; }
.cr-fr-status.is-available .cr-fr-dot { background: var(--fr-green); box-shadow: 0 0 8px var(--fr-green); }
.cr-fr-status.is-available { color: var(--fr-green); }
.cr-fr-status.is-busy .cr-fr-dot { background: var(--fr-amber); box-shadow: 0 0 8px var(--fr-amber); }
.cr-fr-status.is-busy { color: var(--fr-amber); }

.cr-fr-actions { display: inline-flex; align-items: center; gap: 8px; }
.cr-fr-btn {
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--fr-line);
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cr-fr-btn--primary {
  background: linear-gradient(180deg, var(--fr-cyan), #38baff);
  color: var(--fr-ink);
  border-color: var(--fr-cyan);
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.28);
}
.cr-fr-btn--ghost { background: rgba(255, 255, 255, 0.05); color: var(--fr-text); }
.cr-fr-btn:active { transform: scale(0.95); }
.cr-fr-pending { font-size: 12px; font-weight: 700; color: var(--fr-muted); }
.cr-fr-kebab {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fr-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cr-fr-empty {
  list-style: none;
  padding: 22px 12px;
  text-align: center;
  color: var(--fr-muted);
  font-size: 14px;
}

/* ── Add Friend ────────────────────────────────────────────────────────── */
.cr-fr-mycode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  margin: 8px 2px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--fr-line);
  background: rgba(0, 229, 255, 0.05);
}
.cr-fr-mycode-label { font-size: 12px; color: var(--fr-muted); font-weight: 700; }
.cr-fr-mycode-value {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--fr-line);
  background: rgba(2, 4, 12, 0.5);
  color: var(--fr-cyan);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-fr-copy { font-style: normal; font-size: 13px; filter: grayscale(0.2); }
.cr-fr-searchbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 12px;
}
.cr-fr-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--fr-line);
  background: rgba(2, 4, 12, 0.5);
  color: var(--fr-text);
  font: inherit;
  font-size: 15px;
}
.cr-fr-input::placeholder { color: var(--fr-muted); }
.cr-fr-input:focus {
  outline: none;
  border-color: var(--fr-cyan);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25);
}

/* ── Kebab menu + toast ────────────────────────────────────────────────── */
.cr-fr-kebab-menu {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--fr-line);
  background: rgba(8, 12, 22, 0.98);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
  z-index: 3;
}
.cr-fr-kebab-name {
  margin: 4px 8px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-muted);
}
.cr-fr-kebab-item {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: none;
  background: none;
  color: var(--fr-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}
.cr-fr-kebab-item:active { background: rgba(255, 255, 255, 0.06); }
.cr-fr-kebab-item--danger { color: var(--fr-pink); }

.cr-fr-toast {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 12px);
  max-width: 84%;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.98);
  border: 1px solid var(--fr-line);
  color: var(--fr-text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 4;
}
.cr-fr-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 560px) {
  .cr-fr-overlay { align-items: center; }
  .cr-fr-sheet { height: 82vh; border-radius: 22px; border-bottom: 1px solid var(--fr-line); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-fr-scrim, .cr-fr-sheet, .cr-fr-toast { transition: none; }
}