/* The rail and the top bar are one frame.
   Both sit on the rail's colour with no line between them, and the page is a
   well set into that frame, its top left corner rounded where the two meet.
   That is what makes the chrome read as one object rather than a sidebar and
   a separate header. The bar takes its own row in the shell's grid, so it
   stays put while a section scrolls, and a section that fits the viewport is
   simply given the height that is left. */

html.ui-v2 .pf-dash { --pf-frame: #0d0e12; grid-template-rows: auto minmax(0, 1fr); background: var(--pf-frame); }
html.ui-v2 .pf-rail { grid-row: 1 / span 2; border-right: 0; background: var(--pf-frame); }
html.ui-v2 .pf-body {
  grid-column: 2; grid-row: 2; height: auto;
  background: var(--pf-canvas, #050506);
  border-top-left-radius: 20px;
}
/* The build number used to sit in this corner; the rail's foot carries it. */
html.ui-v2 .pf-dash-v { display: none; }

html.ui-v2 .pf-topbar {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: 14px; min-width: 0;
  height: 64px; padding: 0 32px 0 24px;
  background: var(--pf-frame);
  --tb-hover: 150ms; --tb-menu: 180ms; --tb-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* The game switcher. Its real icon, its short name and how many are playing
   now, readable from every section; it opens the watched games beside it.
   No live dot: the figures are the signal. */
html.ui-v2 .pf-topbar-game { position: relative; flex: 0 1 auto; min-width: 0; display: flex; }
html.ui-v2 .pf-gamepill {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0;
  height: 38px; padding: 0 10px 0 8px; margin-left: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--pf-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--tb-hover) ease;
}
html.ui-v2 .pf-gamepill:hover, html.ui-v2 .pf-gamepill:focus-visible,
html.ui-v2 .pf-topbar:has(.pf-game-menu:popover-open) .pf-gamepill { background: #171920; outline: none; }
html.ui-v2 .pf-gamepill-icon {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 6px; overflow: hidden; color: #ccd5ff; font-size: 9.5px; font-weight: 700;
}
html.ui-v2 .pf-gamepill-icon, html.ui-v2 .pf-game-icon { position: relative; }
html.ui-v2 .pf-gamepill-icon img, html.ui-v2 .pf-game-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
html.ui-v2 .pf-gamepill-name { font-weight: 560; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.ui-v2 .pf-gamepill-figure { color: var(--pf-dim); font-variant-numeric: tabular-nums; }
html.ui-v2 .pf-gamepill-figure:empty { display: none; }
html.ui-v2 .pf-gamepill-figure b { color: var(--pf-text); font-weight: 560; }
html.ui-v2 .pf-gamepill-caret { display: grid; place-items: center; color: var(--pf-dimmer); margin-left: -2px; }
html.ui-v2 .pf-gamepill-caret svg { transition: transform var(--tb-menu) var(--tb-ease); }
html.ui-v2 .pf-topbar:has(.pf-game-menu:popover-open) .pf-gamepill-caret svg { transform: rotate(180deg); }

html.ui-v2 .pf-topsearch {
  position: relative; flex: 1 1 auto; max-width: 520px; margin-left: auto; min-width: 0;
}
html.ui-v2 .pf-topsearch svg {
  position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  color: var(--pf-dim); pointer-events: none;
}
html.ui-v2 .pf-topsearch input {
  width: 100%; height: 38px; padding: 0 36px 0 36px;
  background: #171920; color: var(--pf-text);
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 13px;
  transition: border-color var(--tb-hover) ease, background-color var(--tb-hover) ease;
}
html.ui-v2 .pf-topsearch input::placeholder { color: var(--pf-dimmer); }
html.ui-v2 .pf-topsearch input:hover { background: #1b1d25; }
html.ui-v2 .pf-topsearch input::-webkit-search-cancel-button { display: none; }
/* The slash that focuses it, shown where it will be typed. Geist, not a
   monospace key cap. */
html.ui-v2 .pf-topsearch-hint {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; background: #252833; color: #aab0c2;
  font-size: 11.5px; font-weight: 560; pointer-events: none;
  transition: opacity var(--tb-hover) ease;
}
html.ui-v2 .pf-topsearch:focus-within .pf-topsearch-hint { opacity: 0; }
html.ui-v2 .pf-topsearch input:focus { outline: none; border-color: rgba(141, 162, 255, .55); background: #1b1d25; }

html.ui-v2 .pf-topbar-end { position: relative; flex: 0 0 auto; }
html.ui-v2 .pf-new { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
html.ui-v2 .pf-new svg { width: 13px; height: 13px; transition: transform var(--tb-menu) var(--tb-ease); }
html.ui-v2 .pf-topbar:has(.pf-new-menu:popover-open) .pf-new svg { transform: rotate(180deg); }

/* The New menu. Opens from the corner its button sits in, and leaves the way
   it came. A browser without discrete transitions simply shows and hides it. */
html.ui-v2 .pf-new-menu {
  position: fixed; inset: auto; top: 58px; right: 32px; margin: 0;
  width: 260px; padding: 6px;
  background: #1a1c24; color: var(--pf-text);
  border: 0; border-radius: 12px;
  transform-origin: top right;
  opacity: 0; transform: translateY(-4px) scale(.98);
  transition:
    opacity var(--tb-menu) var(--tb-ease),
    transform var(--tb-menu) var(--tb-ease),
    overlay var(--tb-menu) allow-discrete,
    display var(--tb-menu) allow-discrete;
}
html.ui-v2 .pf-new-menu:popover-open { display: flex; flex-direction: column; gap: 2px; opacity: 1; transform: none; }
@starting-style {
  html.ui-v2 .pf-new-menu:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); }
}
html.ui-v2 .pf-new-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 9px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--pf-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--tb-hover) ease;
}
html.ui-v2 .pf-new-menu button:hover, html.ui-v2 .pf-new-menu button:focus-visible { background: #252833; outline: none; }
html.ui-v2 .pf-new-menu b { font-size: 13px; font-weight: 560; }
html.ui-v2 .pf-new-menu span { font-size: 11.5px; color: var(--pf-dim); }

/* The bar's icon buttons: the glyph alone, brightening under the pointer,
   with no tile around it at rest. */
html.ui-v2 .pf-topbar-notes { position: relative; flex: 0 0 auto; }
html.ui-v2 .pf-topbar-icon {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: #c9cdd9; cursor: pointer;
  transition: background-color var(--tb-hover) ease, color var(--tb-hover) ease;
}
html.ui-v2 .pf-topbar-icon:hover, html.ui-v2 .pf-topbar-icon:focus-visible,
html.ui-v2 .pf-topbar:has(.pf-notes-menu:popover-open) .pf-topbar-icon { background: #171920; color: #ffffff; outline: none; }
html.ui-v2 .pf-topbar-icon:active { transform: scale(.96); }
html.ui-v2 .pf-topbar-icon > svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* How many are new: a number, not a dot. */
html.ui-v2 .pf-bell-count {
  position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--v2-accent); color: #0b0d14; font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
html.ui-v2 .pf-bell-count[hidden] { display: none; }

/* The bar's two popovers, drawn like the New menu: one surface, no outline,
   opening from the corner their button sits in. */
html.ui-v2 .pf-topbar-pop {
  position: fixed; inset: auto; top: 58px; margin: 0; padding: 6px;
  max-height: min(560px, calc(100dvh - 76px)); overflow-y: auto;
  background: #1a1c24; color: var(--pf-text); border: 0; border-radius: 12px;
  opacity: 0; transform: translateY(-4px) scale(.98);
  transition:
    opacity var(--tb-menu) var(--tb-ease),
    transform var(--tb-menu) var(--tb-ease),
    overlay var(--tb-menu) allow-discrete,
    display var(--tb-menu) allow-discrete;
}
html.ui-v2 .pf-topbar-pop:popover-open { display: flex; flex-direction: column; gap: 2px; opacity: 1; transform: none; }
@starting-style {
  html.ui-v2 .pf-topbar-pop:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); }
}
html.ui-v2 .pf-game-menu { left: calc(var(--pf-rail, 248px) + 16px); width: 380px; transform-origin: top left; }
html.ui-v2 .pf-notes-menu { right: 32px; width: 380px; transform-origin: top right; }
html.ui-v2 .pf-pop-head, html.ui-v2 .pf-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; }
html.ui-v2 .pf-pop-head b { font-size: 13px; font-weight: 620; }
html.ui-v2 .pf-pop-foot { justify-content: flex-start; padding-top: 6px; }
html.ui-v2 .pf-pop-label { margin: 10px 10px 4px; font-size: 11px; font-weight: 560; color: var(--pf-dimmer); }
html.ui-v2 .pf-pop-quiet { margin: 0; padding: 14px 10px; font-size: 13px; color: var(--pf-dim); }
html.ui-v2 .pf-pop-link {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; margin: 0 -8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--v2-accent);
  font: inherit; font-size: 12.5px; font-weight: 560; white-space: nowrap; cursor: pointer;
  transition: background-color var(--tb-hover) ease, color var(--tb-hover) ease;
}
html.ui-v2 .pf-pop-link:hover, html.ui-v2 .pf-pop-link:focus-visible { background: #252833; color: #ccd5ff; outline: none; }
html.ui-v2 .pf-pop-link:disabled { opacity: .5; cursor: progress; }
html.ui-v2 .pf-pop-link[hidden] { display: none; }
html.ui-v2 .pf-pop-link svg { width: 16px; height: 16px; }

/* The switcher's rows: the workspace's own game first, then the watched. */
html.ui-v2 .pf-game-own, html.ui-v2 .pf-game-row {
  display: grid; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 9px;
  background: transparent; color: var(--pf-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--tb-hover) ease;
}
html.ui-v2 .pf-game-own { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px; background: #20232c; }
html.ui-v2 .pf-game-row { grid-template-columns: 24px minmax(0, 1fr) auto; height: 40px; padding: 0 10px; }
html.ui-v2 .pf-game-own:hover, html.ui-v2 .pf-game-own:focus-visible { background: #282c38; outline: none; }
html.ui-v2 .pf-game-row:hover, html.ui-v2 .pf-game-row:focus-visible { background: #252833; outline: none; }
html.ui-v2 .pf-game-icon {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; overflow: hidden;
  color: #ccd5ff; font-size: 11px; font-weight: 700;
}
html.ui-v2 .pf-game-own .pf-game-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 12px; }
html.ui-v2 .pf-game-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .pf-game-copy b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .pf-game-copy span { font-size: 12px; color: var(--pf-dim); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .pf-game-go { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 560; color: var(--v2-accent); white-space: nowrap; }
html.ui-v2 .pf-game-go svg { width: 16px; height: 16px; }
html.ui-v2 .pf-game-name { font-size: 13px; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .pf-game-players { font-size: 12px; color: var(--pf-dim); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .pf-game-players b { color: var(--pf-text); font-weight: 560; }
html.ui-v2 .pf-game-list { display: flex; flex-direction: column; gap: 1px; }

/* A notification: the kind's glyph in its own colour, the line, and when. */
html.ui-v2 .pf-note {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  width: 100%; padding: 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--pf-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--tb-hover) ease;
}
html.ui-v2 .pf-note:hover, html.ui-v2 .pf-note:focus-visible { background: #252833; outline: none; }
html.ui-v2 .pf-note-glyph { display: grid; place-items: center; height: 18px; color: var(--pf-dim); }
html.ui-v2 .pf-note[data-tone="bad"] .pf-note-glyph { color: var(--pf-bad); }
html.ui-v2 .pf-note[data-tone="warn"] .pf-note-glyph { color: var(--pf-warn, #f5c26b); }
html.ui-v2 .pf-note[data-tone="good"] .pf-note-glyph { color: var(--pf-good); }
html.ui-v2 .pf-note-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .pf-note-copy b { font-size: 13px; font-weight: 520; color: var(--pf-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .pf-note.is-new .pf-note-copy b { color: var(--pf-text); font-weight: 620; }
html.ui-v2 .pf-note-copy span { font-size: 12px; color: var(--pf-dimmer); line-height: 1.45; }
html.ui-v2 .pf-note.is-new .pf-note-copy span { color: var(--pf-dim); }
html.ui-v2 .pf-note time { font-size: 11.5px; color: var(--pf-dimmer); white-space: nowrap; line-height: 18px; font-variant-numeric: tabular-nums; }

/* Press feedback on the workspace's buttons: they give a little under the
   pointer and spring back. */
html.ui-v2 .pf-btn { transition: background-color var(--tb-hover, 150ms) ease, color var(--tb-hover, 150ms) ease, border-color var(--tb-hover, 150ms) ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
html.ui-v2 .pf-btn:active:not(:disabled) { transform: scale(.985); }

@media (max-width: 1180px) {
  html.ui-v2 .pf-topbar { padding: 0 24px 0 16px; gap: 12px; }
  html.ui-v2 .pf-new-menu, html.ui-v2 .pf-notes-menu { right: 24px; }
}
@media (max-width: 1100px) {
  html.ui-v2 .pf-gamepill-name { display: none; }
}
@media (max-width: 820px) {
  /* One bar on a phone. The drawer's button and the mark keep the first
     column, the search and New take the rest of the same row, and the page
     spans both beneath. The section's name is the page's own heading, so the
     bar does not repeat it. */
  html.ui-v2 .pf-dash { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); }
  html.ui-v2 .pf-mobile-bar { grid-column: 1; grid-row: 1; padding: 0 4px 0 12px; gap: 8px; background: var(--pf-frame); }
  html.ui-v2 .pf-mobile-title { display: none; }
  html.ui-v2 .pf-topbar { grid-column: 2; grid-row: 1; height: 56px; padding: 0 12px 0 4px; gap: 10px; }
  html.ui-v2 .pf-body { grid-column: 1 / -1; grid-row: 2; }
  html.ui-v2 .pf-body { border-top-left-radius: 14px; }
  html.ui-v2 .pf-topsearch-hint, html.ui-v2 .pf-gamepill-figure, html.ui-v2 .pf-gamepill-caret { display: none; }
  html.ui-v2 .pf-topsearch { margin-left: 0; max-width: none; }
  html.ui-v2 .pf-topsearch input { padding-right: 10px; }
  /* The switcher keeps the game's own icon, one tap from its games. */
  html.ui-v2 .pf-topbar-game { order: 3; }
  html.ui-v2 .pf-topbar-notes { order: 2; }
  html.ui-v2 .pf-topbar-end { order: 4; }
  html.ui-v2 .pf-gamepill { width: 38px; padding: 0; justify-content: center; }
  html.ui-v2 .pf-new-menu { top: 52px; right: 14px; }
  html.ui-v2 .pf-topbar-pop { top: 52px; left: 12px; right: 12px; width: auto; }
}
@media (max-width: 500px) {
  html.ui-v2 .pf-topsearch input { padding-left: 34px; font-size: 13px; }
  html.ui-v2 .pf-new { padding-left: 10px; padding-right: 10px; }
  html.ui-v2 .pf-topbar { gap: 6px; }
}
@media (max-width: 500px) {
  /* A phone keeps the search, notifications and New; the switcher's game is
     the Dashboard, the first entry in the menu. */
  html.ui-v2 .pf-topbar-game { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .pf-new svg { transition: none; }
  html.ui-v2 .pf-btn:active:not(:disabled) { transform: none; }
  html.ui-v2 .pf-new-menu, html.ui-v2 .pf-topbar-pop { transform: none; transition: opacity var(--tb-menu) ease, overlay var(--tb-menu) allow-discrete, display var(--tb-menu) allow-discrete; }
  @starting-style { html.ui-v2 .pf-new-menu:popover-open, html.ui-v2 .pf-topbar-pop:popover-open { transform: none; } }
  html.ui-v2 .pf-gamepill-caret svg { transition: none; }
}

/* A platform's own mark beside the words that name it. The tile carries its
   own ground, so it sits on any surface without a frame. */
html.ui-v2 .pf-brandmark { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 4px; display: block; }

/* The interface set at its two sizes, whatever a surrounding rule says:
   the shell sizes every svg to 1em, which drew a 16px glyph at 13px. */
html.ui-v2 svg.pf-glyph[width="16"], html.ui-v2 .pf-dash svg.pf-glyph[width="16"] { width: 16px; height: 16px; flex: 0 0 auto; }
html.ui-v2 svg.pf-glyph[width="20"], html.ui-v2 .pf-dash svg.pf-glyph[width="20"] { width: 20px; height: 20px; flex: 0 0 auto; }

/* GSAP owns the opening motion once loaded; native popovers retain closing,
   focus, Escape, outside-click dismissal and their no-JS/CSS fallback. */
html.ui-v2 [popover].pf-motion-menu:popover-open {
  transition: none; opacity: 1; transform: none;
}
@starting-style {
  html.ui-v2 [popover].pf-motion-menu:popover-open { opacity: 1; transform: none; }
}
html.ui-v2 .toast.pf-motion-toast { transition: none; }