/* ── PixelDev · live session sharing ────────────────────────────────────────
   A separate stylesheet rather than additions to style.css: pixelforge/ is
   merged down from the upstream PixelForge repo, and style.css is one of the
   files that conflicts. A new file never does. */

/* Presence strip — who else is in the room, next to the cloud pill. */
#presence-strip {
  display: none;
  align-items: center;
  gap: 4px;
  margin-right: 2px;
  /* The topbar is a flex row with no width to spare, and flex items shrink by
     default. Squeezed, the faces overlap into an unreadable smear rather than
     the bar admitting it is full. */
  flex: none;
}
#presence-strip.on { display: flex; }

.presence-face {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #1a1c2c;
  margin-left: -6px;
  cursor: default;
  user-select: none;
}
.presence-face:first-child { margin-left: 0; }
.presence-face.is-you { border-color: #a7f070; }

/* The Share button.
 *
 * Deliberately almost no rules: it is a <button> in the topbar, so style.css's
 * own `button` already gives it the family's height, padding, radius, border,
 * font and hover. It used to override all of that with a solid blue slab and sat
 * among Games ▾, Publish ▸ and Import looking like it had been pasted in from
 * another product. Inheriting rather than restating also means it keeps up with
 * the toolbar on its own — anything that retunes those buttons retunes this one,
 * with nothing here to go stale and nothing to unpick out of the upstream
 * stylesheet later. */
#btn-share {
  /* The bar is full and its items shrink by default. A shrunk button wraps its
     label, and one wrapped label makes the whole topbar taller. */
  white-space: nowrap;
  flex: none;
}

/* Joined. Filled and weighted, which is exactly how this toolbar already says
   "this one is different" — Publish and Export Game are `button.accent`. Green
   rather than the accent purple because it is reporting a state, not offering
   the primary action, and it is the same green the presence faces use.

   Padding, border width and font-size are untouched on purpose: a status must
   not be able to change the height of the bar it lives in. */
#btn-share[data-live='1'] {
  background: #38b764;
  border-color: #38b764;
  color: #fff;
  font-weight: 600;
}
#btn-share[data-live='1']:hover { background: #45cf76; border-color: #45cf76; }

/* The panel. Docked, not modal: a host watches the roster while they work. */
#share-panel {
  position: fixed;
  top: 56px;
  right: 12px;
  width: 320px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  background: #29366f;
  border: 2px solid #3b5dc9;
  border-radius: 10px;
  padding: 14px;
  z-index: 60;
  color: #f4f4f4;
  font-size: 13px;
  box-shadow: 0 14px 40px #000a;
}
#share-panel[hidden] { display: none; }
#share-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94b0c2;
}
#share-panel section + section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #3b5dc9;
}
#share-panel p { margin: 0 0 8px; line-height: 1.45; color: #c9d4e4; }
#share-panel button {
  font: inherit;
  font-size: 13px;
  border: 0;
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  background: #3b5dc9;
  color: #fff;
}
#share-panel button:hover { background: #41a6f6; }
#share-panel button.ghost { background: #1a1c2c; color: #94b0c2; }
#share-panel button.ghost:hover { background: #333c57; color: #f4f4f4; }
#share-panel button[disabled] { opacity: 0.5; cursor: default; }
#share-panel input {
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border-radius: 6px;
  border: 2px solid #3b5dc9;
  background: #1a1c2c;
  color: #f4f4f4;
  width: 100%;
  box-sizing: border-box;
}

/* The code itself. Big, monospaced and letter-spaced because its whole job is
   to be read out loud across a classroom and typed correctly first time. */
.share-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 12px 4px;
  background: #1a1c2c;
  border-radius: 8px;
  color: #ffcd75;
  user-select: all;
}
.share-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.share-row > * { flex: 1; }
.share-note { font-size: 11.5px; color: #94b0c2; margin-top: 8px; }

.share-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.share-member .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-member .role {
  font-size: 11px;
  color: #94b0c2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.share-error { color: #ef7d57; margin-top: 8px; }