/* refresh/shell.css — loaded last. The page frame every sub-screen shares,
   measured from the designs: 16px/20px page padding, then a 44px header with
   a round back button, a left-aligned serif title and a chip on the right. */

:is(#screen-play, #screen-universe, #screen-groups, #screen-universe, #screen-group, #screen-puzzles, #screen-online, #screen-friends, #screen-wardrobe,
    #screen-theme, #screen-pack, #screen-drills, #screen-coords, #screen-leaders).active {
  padding: 16px 20px 24px;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--rf-gradient-bg);
  color: var(--rf-text);
  font-family: var(--rf-font-sans);
}
/* These four sit above the tab bar. */
:is(#screen-puzzles, #screen-online, #screen-friends).active { padding-bottom: 108px; }

:is(#screen-play, #screen-universe, #screen-groups, #screen-universe, #screen-group, #screen-puzzles, #screen-online, #screen-friends, #screen-wardrobe,
    #screen-theme, #screen-pack, #screen-drills, #screen-coords, #screen-leaders) > .body {
  padding: 0;
  margin: 0;
}

.screen > .rf-head {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.screen > .rf-head > button:first-child {
  flex: none;
  width: 46px;
  height: 46px;
  min-width: 46px;
  margin: -1px 0;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-card-line) !important;
  color: var(--rf-text) !important;
  font-size: 20px;
  box-shadow: none !important;
}
.screen > .rf-head > button:first-child svg { width: 20px; height: 20px; }
.screen > .rf-head > :is(b, h1, .title) {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  font: 700 26px var(--rf-font-display);
  color: var(--rf-text);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-play > .rf-head > b { font-size: 24px; }
.screen > .rf-head > :is(.chip, .badge, .chip-badge) {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 18px !important;
  background: var(--rf-surface);
  border: 1px solid var(--rf-line-2);
  color: var(--rf-accent);
  font: 800 15px var(--rf-font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.screen > .rf-head > :is(.chip, .badge, .chip-badge):empty { display: none; }
/* Plain count chips (Wardrobe, Theme): no fill, a little smaller. */
:is(#screen-wardrobe, #screen-theme, #screen-archive) > .rf-head > :is(.chip, .badge) {
  height: 34px; padding: 0 12px; border-radius: 16px !important; background: transparent; font-size: 13px;
}
.screen > .rf-head > :is(.chip, .badge, .chip-badge) svg { width: 16px; height: 16px; }

/* iPhone home bar: pages without the tab bar keep their bottom actions clear of it. */
:is(#screen-play, #screen-universe, #screen-groups, #screen-universe, #screen-group, #screen-wardrobe, #screen-theme, #screen-pack, #screen-drills, #screen-coords, #screen-leaders,
    #screen-puzzle, #screen-review, #screen-game).active {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
#screen-wardrobe-detail .wd-cta { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
#screen-bought .bought-sheet { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .screen, .bought-sheet {
    transition: opacity 0.18s ease !important;
  }
}