/* Apex mast aligned with PlayTopBar (Home · Task Center; How-to flyout). */
.play-mast {
  --play-nav-panel-bg: rgba(10, 9, 8, 0.9);
  --play-panel-rule: color-mix(in srgb, #2c2a24 80%, transparent);
  --play-masthead-serif: var(--serif);
  overflow: visible;
  position: relative;
  z-index: 40;
}
.play-mast-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  justify-content: flex-start;
}
.play-mast .play-wordmark {
  min-width: 0;
  flex: 0 1 auto;
  color: var(--ink, #ece7dc);
  font-family: var(--play-masthead-serif);
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.play-mast .play-wordmark:hover { color: var(--accent-hover, #e0c48a); }
.play-mast .play-wordmark .zh {
  display: block;
  font-size: 0.95rem;
  font-family: var(--play-masthead-serif);
}
.play-mast .play-wordmark .en {
  display: block;
  color: var(--ink-muted, #9a9488);
  font-family: var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 400;
}
@media (min-width: 720px) {
  .play-mast .play-wordmark .zh,
  .play-mast .play-wordmark .en { display: inline; }
  .play-mast .play-wordmark .en:before {
    content: " / ";
    color: var(--ink-faint, #6a655c);
    letter-spacing: 0;
    text-transform: none;
  }
  .play-mast .play-wordmark .en {
    font-family: var(--play-masthead-serif);
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 1.05rem;
  }
}
.play-nav-cluster {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  font-family: var(--sans);
}
.play-nav-link,
.play-nav-trigger {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--ink, #ece7dc);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.play-nav-link:hover,
.play-nav-menu:hover .play-nav-trigger,
.play-nav-menu:focus-within .play-nav-trigger,
.play-nav-trigger:focus-visible {
  color: var(--accent, #c9a36a);
  border-color: var(--play-panel-rule);
}
.play-nav-menu { position: relative; }
.play-nav-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  padding-top: 8px;
  display: none;
  flex-direction: row;
  align-items: flex-start;
  z-index: 80;
  background: transparent;
  border: none;
  box-shadow: none;
}
.play-nav-menu:hover .play-nav-dropdown,
.play-nav-menu:focus-within .play-nav-dropdown { display: flex; }
.play-nav-panel {
  display: flex;
  width: min(32rem, calc(100vw - 16px));
  max-height: calc(100dvh - 6rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--play-panel-rule);
  border-radius: 0.45rem;
  background: var(--play-nav-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--ink, #ece7dc);
}
@media (min-width: 720px) {
  .play-nav-panel { max-height: calc(100dvh - 4.75rem); }
}
.play-nav-panel-title {
  flex: none;
  margin: 0;
  padding: 0.65rem 0.85rem 0.4rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--play-panel-rule);
}
.play-nav-panel-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0.85rem 1.75rem;
  -webkit-overflow-scrolling: touch;
}
.play-ledger-copy { display: flex; flex-direction: column; gap: 0.85rem; }
.play-ledger-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #c9a36a 85%, #ece7dc);
}
.play-ledger-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.15;
  text-wrap: balance;
}
.play-ledger-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted, #9a9488);
}
.play-ledger-cards {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.play-ledger-card {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--play-panel-rule);
  border-radius: 0.4rem;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted, #9a9488);
}
.play-ledger-card a { color: var(--ink, #ece7dc); }
.play-ledger-season {
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--play-panel-rule);
  border-radius: 0.45rem;
}
.play-ledger-season-title {
  margin: 0 0 0.45rem;
  font-family: var(--serif);
  font-size: 1rem;
}
.play-ledger-ol {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted, #9a9488);
}
.play-ledger-ol li + li { margin-top: 0.35rem; }
.play-task-status { display: flex; flex-direction: column; gap: 0.2rem; }
.play-task-status-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #c9a36a 85%, #ece7dc);
}
.play-task-status-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted, #9a9488);
}
.play-idle-play-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  color: var(--accent, #c9a36a);
  font-size: 0.8rem;
  text-decoration: none;
}
.play-idle-play-link:hover { color: var(--accent-hover, #e0c48a); }
.play-user-handle {
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 400;
}
@media (max-width: 519px) {
  .play-user-handle { display: none; }
}


/* Full-bleed mast (match play top bar width) */
header.play-mast > .wrap.play-mast-inner {
  width: 100%;
  max-width: none;
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.play-nav-panel-title-row {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem 0.4rem;
  border-bottom: 1px solid var(--play-panel-rule);
}
.play-nav-panel-title-row .play-nav-panel-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
  font-family: var(--serif);
  min-width: 0;
}
.play-save-universe {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding: 0 0.55rem;
  border: 1px solid var(--accent, #c9a36a);
  border-radius: 999px;
  color: var(--accent, #c9a36a);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.play-save-universe:hover {
  color: var(--accent-hover, #e0c48a);
  border-color: var(--accent-hover, #e0c48a);
  background: rgba(201, 163, 106, 0.1);
}
/* Apex quest board (Task Center) */
.apex-quest-board { display: flex; flex-direction: column; gap: 0.45rem; }
.apex-quest-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.apex-quest-step {
  display: flex; gap: 0.45rem; align-items: flex-start;
  padding: 0.35rem 0.25rem; border-radius: 0.3rem;
  font-size: 11px; line-height: 1.4; color: var(--ink-muted, #9a9488);
}
.apex-quest-step.is-current { background: rgba(201, 163, 106, 0.1); color: var(--ink, #ece7dc); }
.apex-quest-step.is-done { opacity: 0.55; }
.apex-quest-badge {
  flex: 0 0 auto; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, #c9a36a 85%, #ece7dc); min-width: 2.6rem;
}
.apex-quest-step-title { margin: 0; color: inherit; font-size: 12px; }
.apex-quest-step-detail { margin: 0.15rem 0 0; color: var(--ink-muted, #9a9488); font-size: 11px; }
.apex-quest-lock { margin: 0.15rem 0 0; color: #9a9488; font-size: 10px; }


/* Match play-top-bar height (Tailwind py-2 + ~1.75rem controls) */
header.mast.play-mast {
  padding-block: 0.5rem;
}
header.play-mast > .wrap.play-mast-inner {
  align-items: center;
  min-height: 2.25rem;
}
.play-mast .play-wordmark {
  font-size: 1rem;
  line-height: 1.2;
}
.play-mast .play-wordmark .zh {
  font-size: 0.9rem;
}
@media (min-width: 720px) {
  .play-mast .play-wordmark .en {
    font-size: 1rem;
  }
}


/* Match Play Task Center quest board + tools */
.apex-task-full { display: flex; flex-direction: column; gap: 0.85rem; }
.play-quest-board {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.7rem 0.75rem 0.55rem;
  border: 1px solid var(--play-panel-rule, color-mix(in srgb, #2c2a24 80%, transparent));
  border-radius: 0.45rem;
  background: rgba(10, 9, 8, 0.5);
}
.play-quest-kicker {
  margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, #c9a36a 85%, #ece7dc);
}
.play-quest-hint { margin: 0; font-size: 11px; line-height: 1.4; color: #9a9488; }
.play-quest-steps { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.play-quest-step-hit {
  display: flex; width: 100%; align-items: flex-start; gap: 0.45rem;
  padding: 0.35rem 0.15rem; margin: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; border-radius: 0.3rem;
}
.play-quest-step.is-current .play-quest-step-hit { background: rgba(201, 163, 106, 0.1); }
.play-quest-mark { flex: none; width: 1rem; color: #9a9488; font-size: 12px; line-height: 1.35; }
.play-quest-step.is-current .play-quest-mark { color: #c9a36a; }
.play-quest-step.is-done .play-quest-mark { color: #6a655c; }
.play-quest-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.1rem; }
.play-quest-title { font-size: 12px; line-height: 1.35; color: #ece7dc; }
.play-quest-detail, .play-quest-lock { font-size: 11px; line-height: 1.35; color: #9a9488; }
.play-quest-badge {
  flex: none; margin-left: auto; padding: 0.1rem 0.35rem; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9488;
  border: 1px solid color-mix(in srgb, #2c2a24 80%, transparent);
}
.play-quest-badge.is-ready { color: #c9a36a; border-color: color-mix(in srgb, #c9a36a 45%, transparent); }
.play-quest-badge.is-locked { color: #9a9488; }
.play-quest-badge.is-done { color: #6a655c; }
.play-season-tools {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 0.55rem 0.65rem; border: 1px solid var(--play-panel-rule); border-radius: 0.45rem;
}
.play-season-tools-label {
  margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #9a9488;
}
.apex-btn-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.45rem; }
.apex-action {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 0.35rem 0.55rem; border-radius: 0.4rem;
  border: 1px solid var(--play-panel-rule); background: transparent;
  color: #ece7dc; font-size: 11px; line-height: 1.3; text-decoration: none;
}
.apex-action.is-ready { border-color: color-mix(in srgb, #c9a36a 50%, transparent); color: #c9a36a; }
.apex-action.is-blocked { opacity: 0.55; cursor: default; }
.apex-action-reason { display: block; margin-top: 0.15rem; font-size: 10px; color: #9a9488; }
.apex-section-label {
  margin: 0 0 0.35rem; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9a9488;
}
.play-lane-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  padding: 0.25rem 0.15rem; border-radius: 0.3rem; border: 1px solid transparent;
}
.play-lane-row.is-quest-current {
  border-color: color-mix(in srgb, #c9a36a 45%, transparent);
  background: rgba(201, 163, 106, 0.06);
}
.play-lane-name { min-width: 0; flex: 1; padding-top: 0.25rem; font-size: 11px; color: #ece7dc; }
.play-already-done { font-size: 11px; color: #9a9488; padding-top: 0.25rem; }
.apex-card {
  border: 1px solid var(--play-panel-rule); border-radius: 0.45rem;
  padding: 0.65rem 0.75rem; background: rgba(10,9,8,0.35);
}
.apex-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; font-family: var(--serif); font-weight: 500; }
.apex-card p, .apex-card li { margin: 0; font-size: 12px; line-height: 1.4; color: #9a9488; }
.apex-card ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.apex-badge {
  display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.15rem 0.4rem;
  border-radius: 999px; border: 1px solid var(--play-panel-rule);
  font-size: 10px; color: #c9a36a;
}
.apex-muted { margin: 0; font-size: 11px; line-height: 1.4; color: #9a9488; }


/* === PlayTopBar twin (exact chrome) === */
header.mast.play-mast {
  /* Play uses 16px rem; apex html is 112.5% — lock rem here so 0.8rem matches Play */
  font-size: 16px;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border-bottom: 1px solid color-mix(in srgb, #2c2a24 50%, transparent);
  background: color-mix(in srgb, #0e0d0b 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
  position: relative;
  z-index: 40;
  --play-nav-panel-bg: rgba(10, 9, 8, 0.9);
  --play-panel-rule: color-mix(in srgb, #2c2a24 80%, transparent);
  --play-masthead-serif: var(--serif);
}
header.mast.play-mast > .wrap.play-mast-inner,
header.mast.play-mast .play-mast-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important; /* vertical center like Play */
  justify-content: flex-start !important;
  gap: 0.5rem !important; /* gap-2 */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
  box-sizing: border-box;
}
header.mast.play-mast .play-wordmark {
  min-width: 0;
  flex: 0 1 auto;
  color: #ece7dc;
  font-family: var(--play-masthead-serif);
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
header.mast.play-mast .play-wordmark:hover { color: #e0c48a; }
header.mast.play-mast .play-wordmark .zh {
  display: block;
  font-size: 0.95rem;
  font-family: var(--play-masthead-serif);
  color: inherit;
}
header.mast.play-mast .play-wordmark .en {
  display: block;
  color: #9a9488;
  font-family: var(--sans), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 400;
}
@media (min-width: 720px) {
  header.mast.play-mast .play-wordmark .zh,
  header.mast.play-mast .play-wordmark .en { display: inline; }
  header.mast.play-mast .play-wordmark .en:before {
    content: " / ";
    color: #6a655c;
    letter-spacing: 0;
    text-transform: none;
  }
  header.mast.play-mast .play-wordmark .en {
    font-family: var(--play-masthead-serif);
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 1.05rem;
    color: #ece7dc;
  }
}
header.mast.play-mast .play-nav-cluster {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  font-family: var(--sans), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
header.mast.play-mast .play-nav-link,
header.mast.play-mast .play-nav-trigger {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: #ece7dc;
  font: inherit;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
header.mast.play-mast .play-nav-link:hover,
header.mast.play-mast .play-nav-menu:hover .play-nav-trigger,
header.mast.play-mast .play-nav-menu:focus-within .play-nav-trigger,
header.mast.play-mast .play-nav-trigger:focus-visible {
  color: #c9a36a;
  border-color: var(--play-panel-rule);
}
header.mast.play-mast .ledger-auth {
  margin-left: 0;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  min-height: 1.75rem;
  flex-shrink: 0;
  font-family: var(--sans), ui-sans-serif, system-ui, sans-serif;
}
header.mast.play-mast .ledger-auth-signin {
  height: 1.75rem;
  padding: 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 0.4rem;
}
header.mast.play-mast .play-user-handle {
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 400;
}

/* How-to row + left quest/howto flyout (UX plan A) */
.play-howto-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--play-panel-rule);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ink, #ece7dc);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.play-howto-row:hover,
.play-howto-row:focus-visible {
  background: rgba(201, 163, 106, 0.1);
  border-color: color-mix(in srgb, #c9a36a 45%, transparent);
  color: var(--accent-hover, #e0c48a);
  outline: none;
}
.play-quest-flyout {
  flex: none;
  width: min(22rem, calc(100vw - 18rem));
  max-height: calc(100dvh - 6rem);
  padding-right: 8px;
  overflow: hidden;
}
.play-quest-flyout[hidden] { display: none !important; }
.play-quest-flyout.is-howto,
.play-quest-flyout:has(.play-howto-flyout-panel) {
  width: min(26rem, calc(100vw - 16rem));
}
@media (min-width: 720px) {
  .play-quest-flyout { max-height: calc(100dvh - 4.75rem); }
}
.play-quest-flyout-panel {
  display: flex;
  max-height: inherit;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--play-panel-rule);
  border-radius: 0.45rem;
  background: var(--play-nav-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--ink, #ece7dc);
}
.play-quest-flyout-title {
  flex: none;
  margin: 0;
  padding: 0.65rem 0.85rem 0.4rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--play-panel-rule);
}
.play-quest-flyout-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 0.85rem 1.1rem;
}
.play-howto-flyout-panel { max-height: inherit; }
.play-howto-flyout-panel .play-quest-flyout-body {
  overflow-x: hidden;
  overflow-y: auto;
}
button.play-quest-step-hit {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}


/* colophon site nav (IA light top-nav; links live in footer) */
.colophon-site-nav {
  margin-top: 0.65rem;
  font-size: 0.9em;
  color: #8a8378;
}
.colophon-site-nav a {
  color: #b8b0a0;
  text-decoration: none;
}
.colophon-site-nav a:hover {
  color: #c9a36a;
}