/* The Android shell supplies safe system/keyboard bounds to the whole page. */
.homeReveal { --home-reveal: 0; --catalog-shift: 0px; overscroll-behavior-y: none; }
.homeReveal:not(.catalog-open) body { overflow: hidden; }
.homeReveal:not(.catalog-open) body.launching main { visibility: visible; }
.homeReveal main > header {
  position: relative; z-index: 4;
  opacity: var(--home-reveal);
  transform: translateY(calc((1 - var(--home-reveal)) * -16px));
}
.homeReveal .app-home-slot {
  position: relative; height: min(clamp(230px, 34vh, 330px), max(130px, calc(100dvh - 230px)));
  margin-bottom: 0;   /* (its pull tab hangs from its bottom edge) */
}
/* on a touch screen (the apps, Discord on a phone or tablet) a little lower, so more games show under it */
@media (pointer: coarse) {
  .homeReveal .app-home-slot { height: min(clamp(200px, 28vh, 270px), max(130px, calc(100dvh - 230px))); }
}
.homeReveal .room { margin: 0; z-index: 5; border: 0; }
/* its faint white edge, docked: a layer of its own that only fades (opacity, on the compositor), not a
   shadow repainted every frame of a move; inside its edge, as the room clips what it holds */
.homeReveal .room::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); opacity: var(--home-reveal);
}
.homeReveal.home-moving .room::after { will-change: opacity; }
.homeReveal.catalog-open .room { z-index: 1; }
.homeReveal .room .hint { display: none; }
.home-preview-open {
  position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: inherit; background: transparent;
  cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.home-preview-open[hidden] { display: none; }
.home-preview-open:focus-visible { outline: 3px solid #92c884; outline-offset: -4px; }
/* a new player's opening waits in the docked card for the tap that opens Home (iso-home.js HUB_DOCKS):
   a soft ring pulses around it twice, once the room is on screen (home-opening-waits, home-reveal.js openingWaits).
   Only its opacity moves: the room is live underneath */
.home-preview-open::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 3px #92c884, inset 0 0 26px rgba(146, 200, 132, .55);
}
.homeReveal.home-opening-waits .home-preview-open::after { animation: openingCardPulse 1.6s ease-in-out 2; }
@keyframes openingCardPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .homeReveal.home-opening-waits .home-preview-open::after { animation: none; }
}
.homeReveal.catalog-open .room iframe { pointer-events: none; }
/* docked, the handle is the room's pull tab: slim, centred, hanging from the room's bottom edge */
/* (its top 8px tucked up behind the room: a longer tab, showing where it did) */
.homeReveal .app-games-handle-slot { position: relative; width: 136px; height: 44px; margin: -8px auto 6px; }
/* At Home: the top of a sheet tucked under the screen's bottom edge (flush,
   inset from the sides, only its top rounded), its grip bold over its title.
   Docked under the room: the card it was. */
.games-pull {
  z-index: 8; position: fixed; bottom: 0; left: 0; width: 100%; height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px;
  padding: 8px 20px 0; overflow: hidden; border: 1px solid #d4e3ff; border-bottom-width: calc(var(--home-reveal) * 1px);
  border-radius: 26px 26px calc(var(--home-reveal) * 18px) calc(var(--home-reveal) * 18px);
  background: var(--brand-gradient, linear-gradient(100deg, #3ee6f2 0%, #559bff 52%, #c78aff 100%)); color: #fff; font: inherit;
  /* Its blue edge continues below the viewport when the sheet lifts or nudges. */
  box-shadow: 0 -10px 30px rgba(19, 32, 66, calc(.32 * (1 - var(--home-reveal)))), 0 calc(var(--home-reveal) * 3px) 0 #6177bf,
    0 calc((1 - var(--home-reveal)) * 28px) 0 #739fff;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  -webkit-touch-callout: none;
  /* (its shape eases between the sheet and the tab; its place is set every frame) */
  transition: border-radius .16s ease, box-shadow .16s ease, border-width .16s ease;
}
.games-pull:focus-visible { outline: 3px solid #172c50; outline-offset: -5px; }
.games-pull .pull-grip { flex: 0 0 auto; width: 48px; height: 6px; border-radius: 9px; background: #ffffff80; }
.games-pull .pull-content { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.games-pull b { font-size: 25px; line-height: 1; font-weight: 800; }
.games-pull .pull-games { flex: 0 0 auto; width: 25px; height: 25px; fill: currentColor; }
.games-pull .pull-caret { flex: 0 0 auto; width: 22px; height: 22px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull { justify-content: flex-start; padding-top: 8px; }   /* keep the grip near the sheet’s top edge */
/* until it has been used once: it rises and settles, twice */
.games-pull.pull-nudge { animation: pullNudge 1.4s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes pullNudge {
  0%, 100% { translate: 0 0; } 18% { translate: 0 -16px; } 38% { translate: 0 0; }
  54% { translate: 0 -9px; } 72% { translate: 0 0; }
}
.games-pull .pull-home { display: none; flex: 0 0 auto; }
.homeReveal.catalog-open .games-pull {
  z-index: 0;   /* (behind the room, which covers its tucked-in top) */
  justify-content: center; padding: 8px 12px 2px; border: 0; border-radius: 0 0 18px 18px;
  box-shadow: none;
}
.games-pull.pull-docked .pull-grip,
.games-pull.pull-docked .pull-games { display: none; }
.games-pull.pull-docked .pull-content { gap: 5px; align-items: center; }
.games-pull.pull-docked .pull-caret { width: 18px; height: 18px; transform: none; }
.games-pull.pull-docked .pull-home { display: block; width: 15px; height: 15px; fill: currentColor; }
.games-pull.pull-docked b { font-size: 15px; }
.homeReveal .app-game-list { opacity: var(--home-reveal); transform: translateY(var(--catalog-shift)); }
.homeReveal.home-moving .games-pull { cursor: grabbing; }
.homeReveal.home-moving .room iframe { pointer-events: none; }
.homeReveal.home-moving .room, .homeReveal.home-moving .room iframe { will-change: transform; }
.homeReveal.home-moving .app-game-list { will-change: transform, opacity; }
.homeReveal.home-opening .games-pull { visibility: hidden; }
.homeReveal.home-typing:not(.catalog-open) .games-pull { visibility: hidden; }
.homeReveal.home-shop-open:not(.catalog-open) .games-pull { visibility: hidden; }
.homeReveal.home-modal-open:not(.catalog-open) .games-pull { visibility: hidden; }
.homeReveal body.playing .games-pull { visibility: hidden; }
/* Discord's picture-in-picture: Home alone, no way into the games from it */
.homeReveal body.pip .games-pull { visibility: hidden; }
@media (max-width: 520px) and (max-height: 260px) { .homeReveal body:not(.playing) .games-pull { visibility: hidden; } }
.homeReveal .home-stage .note { padding: 24px 16px; }

/* Discord on a wide screen: "Today" beside Home's card in the games (the
   banner's column, index.html), Home's card taller to match. The column
   fades in with the games; at Home it is inert under the room. */
.homeReveal .app-home-row.wide {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 27%, 300px); gap: 14px; align-items: start;
}
.homeReveal .app-home-lead { min-width: 0; }
.homeReveal .app-home-row.wide .app-home-slot { height: min(clamp(320px, 36vw, 420px), max(130px, calc(100dvh - 230px))); }
.homeReveal .app-home-row.wide > .today {
  display: flex; flex-direction: column; gap: 7px; min-width: 0; overflow: hidden auto;
  height: min(clamp(320px, 36vw, 420px), max(130px, calc(100dvh - 230px)));
  padding: 12px; border-radius: 18px; border: 1px solid var(--line, #3f4147); background: var(--panel, #2b2d31);
  scrollbar-width: thin; opacity: var(--home-reveal);
}

/* A mouse: nothing is dragged, so the sheet at Home is a compact tab to click (or
   scroll down on), the docked Home tab's twin: home-reveal.js MOUSE_SHEET's size, no
   grip, its words a size up from that tab's and its arrow as heavy as they are, close
   by. Hovered, each tab moves toward its destination (a margin: its translate
   is the press's), with its arrow pointing the way. */
@media (hover: hover) and (pointer: fine) {
  .games-pull {
    cursor: pointer;
    transition: border-radius .16s ease, box-shadow .16s ease, border-width .16s ease, margin-top .12s ease;
  }
  .games-pull .pull-caret { transition: translate .12s ease; }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull {
    justify-content: center; gap: 0; padding: 0 16px;
    border-radius: 18px 18px calc(var(--home-reveal) * 18px) calc(var(--home-reveal) * 18px);
  }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull .pull-grip { display: none; }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull .pull-content { gap: 8px; }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull b { font-size: 19px; }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull .pull-games { width: 20px; height: 20px; }
  .homeReveal:not(.catalog-open):not(.pull-as-tab) .games-pull .pull-caret {
    width: 16px; height: 16px; margin-left: -2px; stroke-width: 4;
  }
  .homeReveal:not(.catalog-open):not(.home-moving) .games-pull:hover {
    margin-top: -2px; box-shadow: 0 -12px 34px rgba(19, 32, 66, .38), 0 28px 0 #739fff;
  }
  .homeReveal:not(.catalog-open):not(.home-moving) .games-pull:hover .pull-caret { translate: 0 -2px; }
  .homeReveal.catalog-open:not(.home-moving) .games-pull:hover {
    margin-top: 2px; box-shadow: none;
  }
  .homeReveal.catalog-open:not(.home-moving) .games-pull:hover .pull-caret { translate: 0 2px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .homeReveal .games-pull, .homeReveal .games-pull .pull-caret { transition: none; }
}

/* (its words fade out and back in as they change between Games and Home) */
.games-pull > * { transition: opacity 90ms ease; }
.games-pull.pull-fading > * { opacity: 0; }

/* Moving as the Home tab (from the games list, or near that end): slim, square
   top, hanging just below the room, behind it. */
.homeReveal.pull-as-tab .games-pull {
  z-index: 4;   /* (under the room, z-index 5) */
  justify-content: center; padding: 8px 12px 2px; border: 0; border-radius: 0 0 18px 18px;
  box-shadow: none;
}
.homeReveal.pull-as-tab .games-pull .pull-grip { display: none; }
.homeReveal.pull-as-tab .games-pull .pull-games { width: 15px; height: 15px; }
.homeReveal.pull-as-tab .games-pull .pull-caret { width: 18px; height: 18px; }
.homeReveal.pull-as-tab .games-pull .pull-content { gap: 5px; align-items: center; }
.homeReveal.pull-as-tab .games-pull b { font-size: 15px; }
/* and as the Games sheet (from Home, or near that end): in front of the room */
.homeReveal.pull-as-sheet .games-pull {
  border-radius: 26px; border-bottom-width: 1px;   /* (a fraction of a pixel drew a seam) */
  box-shadow: 0 -8px 26px rgba(19, 32, 66, .3), 0 8px 18px rgba(20, 8, 28, .2);   /* (no docked lip or strip under it) */
}

.home-companion-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.home-companion-layer[hidden], body.playing .home-companion-layer, body.launching .home-companion-layer { display: none; }
.home-companion { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; border-radius: 40%; background: none; box-shadow: none; overflow: visible;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: grab; transform-origin: 0 0; will-change: transform; }
.home-companion[data-dragging="true"] { cursor: grabbing; }
.home-companion:disabled { pointer-events: none; }
.home-companion:focus-visible { outline: 2px solid #92c884; outline-offset: 4px; }
.home-companion canvas { position: absolute; pointer-events: none; }