nav .nav-acct,
.nav-drawer .nav-acct,
.drawer .nav-acct{ position: relative; display: flex; align-items: center; }

/* The slot is filled by a DEFERRED script, so before this rule it collapsed to nothing at
   first paint and then snapped open once the chip arrived -- the right-aligned nav jumped 64px
   sideways and 10px up, which is the twitch people actually see on load. display:none was the
   direct cause: no width a layout can reserve survives it.

   Which width is knowable synchronously (localStorage, no network), so the inline head script
   stamps data-acct on <html> before first paint and the slot opens at the size it is about to
   need. Measured in the browser: 36px signed in, 78.5px signed out, 36px tall either way.

   Unstamped -- an old cached page, or the stamp throwing -- collapses exactly as before, so
   nothing that works today depends on the attribute being there. */
.nav-acct:empty{ display: none; }
html[data-acct="in"] .nav-acct:empty,
html[data-acct="out"] .nav-acct:empty{ display: flex; }
html[data-acct="in"] .nav-acct{ min-width: 36px; }
html[data-acct="out"] .nav-acct{ min-width: 79px; }
html[data-acct] .nav-acct{ min-height: 36px; justify-content: flex-end; }

/* The mobile drawer lays these out full-width, where a min-width would fight the drawer's own
   sizing and a reserved gap buys nothing -- the drawer is not on screen at first paint. */
.nav-drawer .nav-acct, .drawer .nav-acct{ min-width: 0; }

.nav-acct .acct-signin{
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 17px; border-radius: 999px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  color: var(--text-muted, rgba(250,250,250,0.74));
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  /* The label was sitting low: an inline-flex box centres the LINE BOX, and an inherited
     line-height of 1.55 hangs its extra leading below a cap-height-dominant word. */
  line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.nav-acct .acct-signin:hover{
  color: var(--text, #FAFAFA); border-color: var(--accent, rgba(255,255,255,0.32));
  background: color-mix(in srgb, var(--accent, #fff) 12%, transparent);
}
.nav-acct .acct-signin:focus-visible{ outline: 2px solid var(--accent, #5BBF85); outline-offset: 2px; }

.nav-acct .acct-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(120% 120% at 32% 22%, var(--glass-top, rgba(255,255,255,0.11)), transparent 62%),
    var(--glass, rgba(255,255,255,0.02));
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.15));
  color: var(--text, rgba(250,250,250,0.94));
  box-shadow: 0 1px 0 var(--glass-top, rgba(255,255,255,0.06)) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-acct .acct-btn:hover,
.nav-acct .acct-btn[aria-expanded="true"]{
  border-color: color-mix(in srgb, var(--accent, #fff) 55%, transparent);
  background:
    radial-gradient(120% 120% at 32% 22%, var(--glass-top, rgba(255,255,255,0.15)), transparent 62%),
    color-mix(in srgb, var(--accent, #fff) 12%, transparent);
}
.nav-acct .acct-btn:focus-visible{ outline: 2px solid var(--accent, #5BBF85); outline-offset: 3px; }

.nav-acct .acct-av{
  display: block;
  /* Not the mono face, and not the display serif. Both were wrong for different reasons:
     Azeret reads as an instrument label sitting in a circle, and Cormorant is a high-contrast
     display face being asked to work at 19px -- exactly backwards from optical sizing, where
     small sizes need MORE weight, not a more delicate one. An initial is part of a name, and
     DM Sans is the face this site reads names in.
     No letter-spacing: on a single glyph it only adds trailing space and pulls the letter
     off-centre, which is the usual reason a monogram looks a shade wrong without it being
     obvious why. */
  font-family: var(--display, var(--body, 'DM Sans', 'Helvetica Neue', sans-serif));
  font-size: 16px;
  font-weight: 640;
  line-height: 1;
  /* The headline's tracking. On one glyph negative tracking does not close a gap -- it
     trims the trailing sidebearing, which is what actually centres a monogram in a circle. */
  letter-spacing: -0.03em;
  text-indent: -0.03em;
  color: var(--text, rgba(250,250,250,0.88));
  -webkit-font-smoothing: antialiased;
}

.nav-acct .acct-menu{
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 300;
  width: 262px; padding: 6px;
  /* The same pane as the nav and the hero panel: a translucent ground, a lit top edge and
     a shaded underside. It opens from under a glass bar, so it should be made of glass. */
  background: var(--glass-nav, var(--surface-raised, #16151399));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.1));
  border-radius: 16px;
  box-shadow: 0 1px 0 var(--glass-top, rgba(255,255,255,0.05)) inset,
              0 -1px 0 var(--glass-bot, transparent) inset,
              var(--shadow-lg, 0 24px 60px rgba(0,0,0,0.62));
  text-align: left;
}
.nav-acct .acct-menu[hidden]{ display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-acct .acct-menu{ animation: acctIn .15s ease both; }
  @keyframes acctIn { from { opacity: 0; transform: translateY(-6px); } }
}

.nav-acct .acct-head{ padding: 11px 12px 12px; }
.nav-acct .acct-email{
  font-size: 13px; line-height: 1.35; color: var(--text, rgba(250,250,250,0.9));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-acct .acct-tier{
  display: inline-flex; align-items: center; margin-top: 8px;
  height: 20px; padding: 0 9px; border-radius: 999px;
  font-family: var(--mono, 'Azeret Mono', monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  background: color-mix(in srgb, var(--text, #fff) 6%, transparent);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
  color: var(--text-muted, rgba(250,250,250,0.6));
}
/* Paid and trialling are the two states worth marking, and they are marked with the one
   brand colour rather than with a gold and a green borrowed from the old palette. */
.nav-acct .acct-tier.is-pro{
  background: color-mix(in srgb, var(--accent, #fff) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, #fff) 42%, transparent);
  color: var(--accent, #C9A84C);
}
.nav-acct .acct-tier.is-trial{
  background: color-mix(in srgb, var(--accent, #fff) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent, #fff) 26%, transparent);
  color: var(--text-muted, #5BBF85);
}
.nav-acct .acct-sep{ height: 1px; margin: 5px 7px; background: var(--border, rgba(255,255,255,0.075)); }

.nav-acct a.acct-item, .nav-acct button.acct-item{
  display: flex; align-items: center; width: 100%;
  min-height: 36px; padding: 8px 12px; margin: 0;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--text-muted, rgba(250,250,250,0.8));
  font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.3;
  text-align: left; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav-acct a.acct-item:hover, .nav-acct button.acct-item:hover{
  background: color-mix(in srgb, var(--text, #fff) 7%, transparent);
  color: var(--text, #FAFAFA);
}
.nav-acct a.acct-item:focus-visible, .nav-acct button.acct-item:focus-visible{
  outline: 2px solid var(--accent, #5BBF85); outline-offset: -2px;
}
.nav-acct button.acct-out{ color: var(--text-faint, rgba(250,250,250,0.52)); }
/* Signing out is the one destructive item here, so it keeps a warning hue -- from the
   token, not from a literal. */
.nav-acct button.acct-out:hover{
  background: color-mix(in srgb, var(--negative, #E08B7A) 12%, transparent);
  color: var(--negative, #E08B7A);
}

@media (max-width: 900px){
  nav .nav-acct { margin-left: auto; margin-right: 14px; }
  /* The account block was sitting flush under the Lab button with nothing between them, so a
     personal section read as another nav item. It is a different kind of thing from the four
     links above it, and a rule plus space is what says so. */
  /* In the drawer the account is a card at the foot of the sheet (account-menu.js renders it):
     who you are on top, the two things you can do about it underneath. */
  .nav-drawer .nav-acct,
  .drawer .nav-acct {
    display: flex; justify-content: center; width: 100%;
    margin: 18px 0 4px; padding: 18px 20px 0; box-sizing: border-box;
    border-top: 1px solid var(--border);
  }
  .acct-card {
    width: 100%; max-width: 380px; box-sizing: border-box; display: grid; gap: 12px; padding: 14px;
    border-radius: 16px; border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
    background: color-mix(in srgb, var(--text, #FAFAFA) 3%, transparent);
    text-align: left;
  }
  .acct-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
  /* The circle belongs to .acct-btn in the bar; here the initial carries its own. */
  .acct-card .acct-av {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
    font-size: 16px; color: var(--text, #FAFAFA);
    background:
      radial-gradient(120% 120% at 32% 22%, var(--glass-top, rgba(255,255,255,0.11)), transparent 62%),
      color-mix(in srgb, var(--accent, #fff) 10%, transparent);
    border: 1px solid var(--glass-edge, rgba(255,255,255,0.15));
  }
  .acct-card-id { display: grid; gap: 5px; min-width: 0; justify-items: start; }
  .acct-card .acct-email {
    max-width: 100%; font-size: 14px; font-weight: 600; color: var(--text, #FAFAFA);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .acct-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav-drawer .acct-card .acct-act,
  .drawer .acct-card .acct-act {
    display: flex; align-items: center; justify-content: center; width: auto; height: 40px;
    margin: 0; padding: 0 10px; box-sizing: border-box; border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.08)); background: transparent;
    font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: var(--text, #FAFAFA); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-drawer .acct-card .acct-act:active,
  .drawer .acct-card .acct-act:active { background: color-mix(in srgb, var(--text, #FAFAFA) 6%, transparent); }
  .nav-drawer .acct-card .acct-out,
  .drawer .acct-card .acct-out { color: var(--text-muted, rgba(250,250,250,0.62)); }
  /* Same shape as the Lab button beside it. Full width made it the loudest thing in the sheet,
     which is the wrong order: signing in is the secondary action there. */
  .nav-drawer .acct-signin,
  .drawer .acct-signin {
    width: auto; align-self: center; justify-content: center;
    height: 40px; padding: 0 34px;
  }
}

/* ── the Play menu ─────────────────────────────────────────────────────────────
   Lives here, not in the synced nav block, because this file is the one stylesheet every page
   loads -- the Lab's hand-kept nav included -- so one copy styles both. Opens on hover where there is a
   pointer, and from the button -- a tap, a click or Enter -- anywhere (.open, set by account-menu.js). */
nav .nav-play{ position: relative; display: flex; align-items: center; }
nav .nav-play-btn{
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; margin: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500;
  letter-spacing: 0; color: var(--text-muted); transition: color .18s;
  -webkit-tap-highlight-color: transparent;
}
nav .nav-play-btn svg{ width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
nav .nav-play-btn:hover, nav .nav-play.open .nav-play-btn{ color: var(--text); }
nav .nav-play.open .nav-play-btn svg{ transform: rotate(180deg); }
nav .nav-play-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
nav .nav-play-menu{
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 130;
  min-width: 252px; padding: 6px; display: grid; gap: 2px;
  border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--surface-raised, #161614);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 22px 48px -18px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* A bridge over the 14px gap, so the pointer can travel from the word to the menu. */
nav .nav-play-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
@media (hover: hover){
  nav .nav-play:hover .nav-play-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}
nav .nav-play.open .nav-play-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
nav .nav-links .nav-play-menu a{
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--text) !important; white-space: normal;
  transition: background .15s;
}
nav .nav-links .nav-play-menu a::after{ display: none; }
nav .nav-links .nav-play-menu a:hover,
nav .nav-links .nav-play-menu a:focus-visible{ background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; }
nav .nav-play-menu a span{ font-size: 12px; font-weight: 400; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce){ nav .nav-play-menu, nav .nav-play-btn svg{ transition: none; } }

/* The drawer holds the three games in one panel -- the same material as the account card at the
   foot of the sheet -- as three tiles under a Play label. */
.nav-drawer .nav-group, .drawer .nav-group{
  width: calc(100% - 40px); max-width: 380px; box-sizing: border-box; margin: 6px auto 12px;
  padding: 12px; border-radius: 16px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--text, #FAFAFA) 3%, transparent);
}
.nav-drawer .nav-group-t, .drawer .nav-group-t{
  display: block; padding: 0 0 10px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent, #93AFCC);
}
.nav-drawer .nav-group-row, .drawer .nav-group-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nav-drawer .nav-group-row a, .drawer .nav-group-row a{
  display: flex; align-items: center; justify-content: center; width: auto; height: 52px;
  margin: 0; padding: 0 6px; box-sizing: border-box; border-radius: 11px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: color-mix(in srgb, var(--text, #FAFAFA) 3%, transparent);
  font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.15; text-align: center;
  color: var(--text, #FAFAFA); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.nav-drawer .nav-group-row a:active, .drawer .nav-group-row a:active{
  background: color-mix(in srgb, var(--accent, #93AFCC) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, #93AFCC) 40%, transparent);
}
.nav-drawer .nav-group-row a[aria-current], .drawer .nav-group-row a[aria-current]{
  border-color: color-mix(in srgb, var(--accent, #93AFCC) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #93AFCC) 12%, transparent);
}