/* Player surface layout — mobile first. Components come from mds.css. */
.pl-app {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  max-width: 520px; margin: 0 auto;
}
.pl-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--mds-s3) var(--mds-s5) var(--mds-s1);
}
.pl-views { flex: 1; overflow-y: auto; padding: 0 var(--mds-s4) var(--mds-s5); }
.pl-view__head { padding: var(--mds-s2) var(--mds-s1) var(--mds-s4); border-bottom: 1px solid var(--mds-border); margin-bottom: var(--mds-s4); }
.pl-app > .mds-bottomnav { position: sticky; bottom: 0; }

/* Join overlay */
.pl-join {
  position: fixed; inset: 0; z-index: 80;
  background: var(--mds-black);
  overflow-y: auto;
}
.pl-join__inner {
  max-width: 420px; margin: 0 auto;
  padding: var(--mds-s8) var(--mds-s5) var(--mds-s8);
  display: flex; flex-direction: column; gap: var(--mds-s4);
}
.pl-join__hero {
  width: 112px; height: 112px; object-fit: cover;
  border-radius: var(--mds-r-pill);
  border: 2px solid var(--mds-yellow);
}
.pl-join__person {
  display: flex; align-items: center; gap: var(--mds-s3);
  min-height: 56px; padding: var(--mds-s2) var(--mds-s3);
  background: var(--mds-interactive);
  border: 1px solid var(--mds-border);
  border-radius: var(--mds-r);
  color: var(--mds-white);
  font-size: var(--mds-ui-base);
  cursor: pointer; text-align: left;
}
.pl-join__person:hover { border-color: var(--mds-blue); }
.pl-join__person:disabled { opacity: .45; cursor: not-allowed; }

/* Act cards */
.pl-act {
  position: relative;
  border: 1px solid var(--mds-border);
  border-radius: var(--mds-r-lg);
  overflow: hidden;
  background: var(--mds-surface);
}
.pl-act__hero { position: relative; height: 150px; }
.pl-act__hero img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(.85); }
.pl-act__hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,.2), var(--mds-surface) 96%);
}
.pl-act__body { padding: var(--mds-s4); }
.pl-act__title { font-family: var(--mds-font-display); font-size: 26px; text-transform: uppercase; line-height: 1.1; }
.pl-act--live { border-color: var(--mds-yellow); box-shadow: 0 0 0 1px var(--mds-yellow); }

/* Act divider between cards in the Acts view */
.pl-act-divider {
  display: flex; align-items: center; gap: var(--mds-s3);
  margin: var(--mds-s5) 0 var(--mds-s2);
  color: var(--mds-meta);
}
.pl-act-divider__num {
  font-family: var(--mds-font-display); font-size: 18px;
  letter-spacing: .08em; text-transform: uppercase;
}
.pl-act-divider::after { content: ""; flex: 1; height: 1px; background: var(--mds-border); }
.pl-act-divider.is-current { color: var(--mds-yellow); }
.pl-act-divider.is-current::after { background: var(--mds-yellow); }

/* Happy path — the day as one trail: all acts, where we are, what we do */
.pl-path {
  position: sticky; top: 0; z-index: 40;
  background: var(--mds-black);
  border-bottom: 1px solid var(--mds-border);
  padding: var(--mds-s2) var(--mds-s4) var(--mds-s3);
}
.pl-path__strip {
  display: flex; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 0;
}
.pl-path__strip::-webkit-scrollbar { display: none; }
.pl-path__node {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--mds-border);
  background: var(--mds-surface); color: var(--mds-meta);
  font-family: var(--mds-font-display); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.pl-path__node.is-done {
  border-color: var(--mds-green); color: var(--mds-green);
}
.pl-path__node.is-open { border-color: var(--mds-body-muted); color: var(--mds-white); }
.pl-path__node.is-current {
  width: 42px; height: 42px; font-size: 18px;
  border-color: var(--mds-yellow); background: var(--mds-yellow);
  color: var(--mds-black);
}
.pl-path.is-live .pl-path__node.is-current { animation: pl-path-pulse 2s infinite; }
@keyframes pl-path-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 194, 48, .5); }
  50% { box-shadow: 0 0 0 7px rgba(242, 194, 48, 0); }
}
.pl-path__link {
  flex: 1 1 12px; min-width: 10px; height: 2px;
  background: var(--mds-border); margin: 0 3px;
}
.pl-path__link.is-done { background: var(--mds-green); }
.pl-path__now {
  display: flex; align-items: baseline; gap: var(--mds-s2);
  margin-top: var(--mds-s2); flex-wrap: wrap;
}
.pl-path__title {
  font-family: var(--mds-font-display); font-size: 17px;
  text-transform: uppercase; color: var(--mds-white);
}
.pl-path__meta { font-size: 12.5px; color: var(--mds-meta); font-family: var(--mds-font-mono, monospace); }
.pl-path__chips { display: flex; gap: var(--mds-s2); margin-top: var(--mds-s2); flex-wrap: wrap; }
.pl-path__chip {
  border: 1px solid var(--mds-border); border-radius: var(--mds-r-pill);
  background: var(--mds-interactive); color: var(--mds-white);
  font-size: 12.5px; padding: 4px 10px; cursor: pointer;
}
.pl-path__chip--team { border-color: var(--mds-yellow); color: var(--mds-yellow); }