body[data-active-tab="moo"] { overflow: hidden; }
body[data-active-tab="moo"] .site-footer,
body[data-active-tab="moo"] aside.book-support-banner:not([hidden]),
body[data-active-tab="moo"] [data-monkster-chat] { display: none !important; }
.moo-page { --moo-gold: #d7b775; --moo-muted: #a3a29c; height: 100dvh; padding-top: var(--header-height); background: #090909; font-family: Aptos, "Segoe UI", Helvetica, Arial, sans-serif; }
.moo-shell { display: grid; grid-template-columns: clamp(140px, 13vw, 190px) clamp(180px, 20vw, 290px) minmax(0, 1fr) auto; height: 100%; max-width: 1900px; margin: auto; }
.moo-shell [hidden] { display: none !important; }
.moo-shell button { cursor: pointer; }
.moo-shell button:disabled { cursor: default; opacity: .5; }
.moo-shell button:focus-visible, .moo-shell input:focus-visible, .moo-shell a:focus-visible { outline: 2px solid var(--moo-gold); outline-offset: 4px; }
.moo-shell button span { margin-left: 0; }
.moo-rail { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #1b1b19; padding: clamp(42px, 7dvh, 72px) 20px; min-height: 0; }
.moo-rail-label { margin: 0; color: var(--moo-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.moo-rail ol { list-style: none; padding: 0; margin: 28px 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.moo-rail li { position: relative; display: flex; align-items: baseline; gap: 12px; color: #f4f3ef; font-size: 11px; line-height: 1.5; letter-spacing: .055em; }
.moo-rail li:not(:last-child) { flex: 1; padding-bottom: 18px; }
.moo-rail li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 26px; bottom: 10px; width: 1px; background: #393731; }
.moo-rail li.is-reached { color: var(--moo-gold); }
.moo-rail li.is-reached::after { background: #776343; }
.moo-step-number { font-size: 9px; opacity: .7; font-variant-numeric: tabular-nums; }
.moo-speaker { padding: 32px 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; background: #090909; }
.moo-speaker img { width: 100%; max-width: 260px; height: auto; max-height: 46dvh; object-fit: contain; }
.moo-speaker em { margin-top: -12px; color: var(--moo-muted); font-size: clamp(11px, 1.1vw, 15px); text-align: center; }
.moo-speaker strong { font-size: 13px; font-weight: 500; }
.moo-speaker > span { font-size: 10px; color: var(--moo-muted); }
.moo-cast { border-left: 1px solid #252522; padding: 18px 10px; display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--moo-cast-columns, 1), var(--moo-cast-cell, 96px)); grid-template-rows: repeat(var(--moo-cast-rows, 6), var(--moo-cast-row, 116px)); align-content: center; gap: 10px; }
.moo-cast button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 3px 0; border: 0; color: var(--moo-muted); background: none; }
.moo-cast button > span, .moo-cast img { display: grid; place-items: center; width: 68px; height: 68px; flex-shrink: 0; border: 1px solid #45443d; border-radius: 0; background: #1b1b18; font-size: 26px; object-fit: cover; }
.moo-cast small { max-width: 100%; font-size: 9px; overflow-wrap: anywhere; }
.moo-cast .is-mentioned { color: #e5d4af; }
.moo-cast .is-mentioned > span, .moo-cast .is-mentioned img { border-color: #98845c; }
.moo-person-preview { display: grid; place-items: center; min-height: 210px; font-size: 90px; }
.moo-person-preview img { max-height: 350px; object-fit: contain; }
.moo-conversation { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.moo-header { padding: 22px clamp(20px, 4vw, 62px); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.moo-header > div { display: grid; grid-template-columns: 7px auto; column-gap: 10px; align-items: center; }
.moo-header strong { font-size: 15px; font-weight: 500; }
.moo-header small { grid-column: 2; color: var(--moo-muted); font-size: 11px; }
.moo-presence { width: 5px; height: 5px; border-radius: 50%; background: var(--moo-gold); }
.moo-header nav { display: flex; gap: 22px; }
.moo-header button { padding: 7px 0; border: 0; background: none; color: var(--moo-muted); font-size: 11px; }
.moo-header button:hover { color: var(--moo-gold); }
.moo-header button span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; border: 1px solid #444039; border-radius: 50%; font-size: 9px; }
.moo-messages { overflow-y: auto; overscroll-behavior: contain; padding: 28px clamp(20px, 5vw, 76px) 32px; scrollbar-width: thin; scrollbar-color: #4d493f transparent; }
.moo-welcome { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 620px; margin: 0 auto; padding: 25px 0; }
.moo-kicker { color: var(--moo-gold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 20px; }
.moo-welcome h1 { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; font-weight: 400; letter-spacing: -.035em; }
.moo-welcome h1 span { display: block; margin-top: 26px; font-size: clamp(23px, 3.5vw, 43px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; }
.moo-welcome > p:not(.moo-kicker) { color: var(--moo-muted); font-size: 14px; line-height: 1.6; margin: 24px 0 18px; }
.moo-welcome > small { font-size: 11px; color: #74746d; }
.moo-message { max-width: 700px; margin: 0 auto 30px; }
.moo-message > span { color: var(--moo-gold); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.moo-message p { margin: 9px 0 0; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.moo-message.is-player { text-align: right; }
.moo-message.is-player > span { color: #85857e; }
.moo-message.is-player p { display: inline-block; max-width: 90%; padding: 10px 17px; background: #1b1b18; border: 1px solid #33322b; border-radius: 14px 14px 2px 14px; text-align: left; font-size: 13px; }
.moo-message.is-player > span { display: block; }
.moo-bubble { margin-top: 8px; padding: 16px 20px; border: 1px solid #292925; border-radius: 3px 14px 14px 14px; background: #141412; }
.moo-bubble p { margin: 0 0 .85em; white-space: normal; }
.moo-bubble p:last-child { margin-bottom: 0; }
.moo-paragraph-pause { height: .6em; }
.moo-typing { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 12px 0; color: var(--moo-muted); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.5; }
.moo-typing .moo-dots { flex-shrink: 0; gap: 6px; padding: 16px 18px; margin: 0; border: 1px solid #292925; border-radius: 12px; background: #141412; }
.moo-typing .moo-dots i { width: 7px; height: 7px; }
.moo-attachment { margin: 10px 0 0; max-width: 410px; }
.moo-attachment img, .moo-attachment video { display: block; width: 100%; max-height: 380px; border-radius: 8px; object-fit: contain; background: #10100f; }
.moo-attachment figcaption { margin-top: 10px; color: var(--moo-muted); font-size: 12px; }
.is-media .moo-credit-card { max-width: 410px; margin-top: 10px; }
.moo-composer { padding: 18px clamp(20px, 5vw, 76px) max(30px, env(safe-area-inset-bottom)); }
.moo-options { display: flex; flex-wrap: wrap; gap: 8px; max-width: 700px; margin: 0 auto 12px; }
.moo-options:empty { display: none; }
.moo-options > button, .moo-end > button { border: 1px solid #504736; padding: 9px 13px; border-radius: 5px; background: #15140f; color: #e1d0aa; font-size: 12px; text-align: left; min-height: 40px; }
.moo-options > button:hover { background: #2b2518; border-color: var(--moo-gold); }
.moo-composer form { display: flex; align-items: center; gap: 12px; max-width: 700px; margin: auto; padding: 8px; border: 1px solid #46443b; border-radius: 8px; background: #11110f; }
.moo-composer input { width: 100%; min-width: 0; background: none; border: 0; padding: 8px 10px; color: #f4f3ef; font-size: 16px; }
.moo-composer input::placeholder { color: #85857e; }
.moo-composer form button { flex: 0 0 38px; height: 38px; border-radius: 5px; border: 0; background: var(--moo-gold); color: #15120b; font-size: 24px; }
.moo-hint { margin: 8px auto 0; color: #85857e; font-size: 10px; max-width: 700px; }
.moo-payment { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; }
.moo-payment > span { font-size: 12px; color: var(--moo-muted); }
.moo-payment > strong { font-size: 30px; font-weight: 400; }
.moo-payment > button, .moo-payment > small { grid-column: 1 / -1; }
.moo-payment > small { text-align: center; color: var(--moo-muted); font-size: 11px; }
.moo-primary { padding: 13px 20px; min-height: 44px; border: 1px solid var(--moo-gold); background: var(--moo-gold); color: #15120b; border-radius: 4px; font-size: 13px; }
.moo-secondary { padding: 13px 20px; min-height: 44px; border: 1px solid #4a453b; background: transparent; color: #e3dfd4; border-radius: 4px; font-size: 13px; }
.moo-dialog { --moo-gold: #d7b775; --moo-muted: #a3a29c; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #625239; background: #11110f; color: #f4f3ef; padding: clamp(24px, 5vw, 42px); border-radius: 8px; box-shadow: 0 30px 100px #0009; font-family: var(--moo-copy-font); }
.moo-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.moo-dialog h2 { margin: 0 0 22px; font-size: clamp(27px, 5vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.moo-dialog h2 > span { font-size: 14px; color: var(--moo-muted); }
.moo-modal-copy { color: var(--moo-muted); font-size: var(--moo-copy-size); line-height: var(--moo-copy-leading); margin-bottom: 26px; }
.moo-dialog .moo-primary, .moo-dialog .moo-secondary { width: 100%; margin-top: 10px; }
.moo-reward-card { margin: 0 0 20px; }
.moo-reward-card img { max-height: 340px; object-fit: contain; background: #050505; }
.moo-photo-placeholder { min-height: 210px; border: 1px solid #39352b; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 24px; background: #171610; text-align: center; }
.moo-photo-placeholder > span { font-size: 9px; color: #9d927a; letter-spacing: .16em; }
.moo-photo-placeholder > strong { font-size: 32px; line-height: 1.1; font-weight: 400; letter-spacing: -.03em; }
.moo-reward-card figcaption { margin-top: 12px; font-size: 12px; color: var(--moo-muted); text-align: center; }
.moo-credit-card { display: grid; place-content: center; justify-items: center; min-height: 260px; background: #000; color: #fff; margin-bottom: 20px; }
.moo-credit-card strong { font-size: 76px; letter-spacing: -.06em; line-height: 1.15; }
.moo-credit-card span { margin-top: 20px; font-size: 12px; }
.moo-credit-card p { font-size: 16px; }
.moo-gallery { display: grid; gap: 8px; margin-bottom: 20px; }
.moo-gallery button { border: 1px solid #423c31; background: #191711; color: #f4f3ef; padding: 15px; display: flex; justify-content: space-between; text-align: left; }
.moo-gallery p { color: var(--moo-muted); font-size: 14px; }
.moo-finale { position: absolute; inset: 0; z-index: 4; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 18px; }
.moo-finale > p { font-size: clamp(13px, 2vw, 22px); letter-spacing: .09em; }
.moo-finale > div { position: absolute; bottom: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.moo-finale button { border: 0; background: none; color: #a3a29c; padding: 12px; font-size: 12px; }
.moo-dots { display: inline-flex; gap: 4px; margin-left: 8px; }
.moo-dots i { width: 4px; height: 4px; background: white; border-radius: 50%; animation: moo-dot 1.1s infinite ease-in-out; }
.moo-dots i:nth-child(2) { animation-delay: .14s; }
.moo-dots i:nth-child(3) { animation-delay: .28s; }
.moo-end { width: 100%; text-align: center; }
.moo-end p { color: var(--moo-gold); font-size: 17px; }
.moo-end > button { margin: 0 4px 8px; }
@keyframes moo-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@media (max-width: 650px) {
  .moo-shell { grid-template-columns: 72px 42px minmax(0, 1fr) 42px; }
  .moo-rail { padding: 24px 9px; }
  .moo-rail-label { font-size: 8px; }
  .moo-speaker { padding: 24px 4px; gap: 8px; }
  .moo-speaker img { height: 65px; width: 33px; }
  .moo-speaker strong, .moo-speaker > span { display: none; }
  .moo-cast { padding: 16px 3px; gap: 12px; }
  .moo-cast button > span, .moo-cast img { width: 30px; height: 30px; font-size: 15px; }
  .moo-cast small { font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .moo-rail ol { margin-top: 35px; }
  .moo-rail li { display: block; font-size: 8px; letter-spacing: 0; overflow-wrap: anywhere; }
  .moo-step-number { display: block; font-size: 8px; margin-bottom: 4px; }
  .moo-rail li:not(:last-child) { padding-bottom: 30px; }
  .moo-rail li:not(:last-child)::after { top: auto; height: 16px; bottom: 7px; left: 1px; }
  .moo-header { padding: 16px 14px; align-items: flex-start; }
  .moo-header nav { flex-direction: column; gap: 0; align-items: flex-end; }
  .moo-header small { display: none; }
  .moo-header strong { font-size: 13px; }
  .moo-header button { font-size: 10px; min-height: 28px; }
  .moo-messages { padding: 22px 16px; }
  .moo-welcome h1 { font-size: 25px; }
  .moo-welcome h1 span { font-size: 26px; }
  .moo-welcome > p:not(.moo-kicker) { font-size: 12px; }
  .moo-message p { font-size: 14px; }
  .moo-bubble { padding: 12px; }
  .moo-messages { padding: 20px 10px; }
  .moo-header { padding: 14px 10px; gap: 7px; }
  .moo-photo-placeholder { min-height: 130px; padding: 14px; }
  .moo-photo-placeholder > strong { font-size: 23px; }
  .moo-credit-card strong { font-size: 46px; }
  .moo-credit-card p { font-size: 13px; text-align: center; }
  .moo-message.is-player p { max-width: 100%; font-size: 12px; padding: 9px 11px; }
  .moo-composer { padding: 12px 12px max(24px, env(safe-area-inset-bottom)); }
  .moo-options { gap: 6px; }
  .moo-options > button { font-size: 11px; padding: 8px 10px; }
  .moo-composer input { padding-left: 4px; }
  .moo-composer form { gap: 4px; }
  .moo-hint { font-size: 9px; }
  .moo-kicker { font-size: 8px; }
}
@media (max-height: 650px) {
  .moo-rail { padding-top: 16px; }
  .moo-rail ol { margin-top: 22px; }
  .moo-rail li:not(:last-child) { padding-bottom: 23px; }
  .moo-composer { max-height: 48dvh; overflow-y: auto; }
  .moo-welcome h1 { font-size: 26px; }
  .moo-welcome h1 span { font-size: 24px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .moo-page { animation: none; }
  .moo-dots i { animation: none; }
}

/* Dashboard editing uses the site's light administration palette. */
[data-moo-admin] fieldset { padding: 0; border: 0; margin: 0; min-width: 0; }
.moo-admin-tracks, .moo-admin-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.moo-admin-card { padding: 22px; border: 1px solid #ccc9bd; background: #f3f1e9; min-width: 0; }
.moo-admin-card h3, .moo-admin-card h4 { margin: 0 0 12px; font-size: 17px; }
.moo-admin-card p { color: #68685f; font-size: 12px; line-height: 1.6; }
.moo-admin-preview { margin: 14px 0; }
.moo-admin-preview img, .moo-admin-preview video { width: 100%; height: 130px; object-fit: contain; background: #242420; }
.moo-admin-preview audio { width: 100%; }
.moo-admin-empty { color: #77776b; font-size: 12px; }
.moo-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.moo-admin-heading { margin: 32px 0 16px; font-size: 22px; }
.moo-admin-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.moo-admin-save { position: sticky; bottom: 0; background: #eeece3; padding: 18px; display: flex; gap: 18px; justify-content: space-between; align-items: center; border: 1px solid #c7c4b9; margin-top: 26px; }
.moo-admin-save p { margin: 0; font-size: 12px; }
@media (max-width: 700px) { .moo-admin-tracks, .moo-admin-timing { grid-template-columns: 1fr; } .moo-admin-save { align-items: stretch; flex-direction: column; } }

.moo-admin-story { display: grid; gap: 12px; }
.moo-admin-story summary { cursor: pointer; line-height: 1.5; }
.moo-admin-story textarea { width: 100%; resize: vertical; line-height: 1.6; }
.moo-admin-story .field { margin-top: 18px; }
.moo-admin-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; }
.moo-admin-check input { width: auto; }
@media (max-width: 900px) {
  .moo-speaker { padding: 18px 8px; }
  .moo-speaker { gap: 0; }
  .moo-speaker em { margin-top: -4px; }
  .moo-speaker img { width: 100%; height: auto; max-height: 40dvh; }
  .moo-rail { padding: 32px 10px; }
  .moo-rail ol { margin: 24px 0; }
  .moo-rail li { font-size: 9px; }
  .moo-rail li:not(:last-child) { padding-bottom: 18px; }
  .moo-rail li:not(:last-child)::after { top: 38px; height: auto; bottom: 10px; }
  .moo-cast small { font-size: 10px; white-space: normal; }
  .moo-cast button > span, .moo-cast img { width: 68px; height: 68px; font-size: 26px; }
}
@media (max-width: 450px) {
  .moo-speaker em { font-size: 11px; }
}

/* Bring the speaker and conversation closer; keep the caption outside the portrait. */
.moo-shell { grid-template-columns: clamp(100px, 11vw, 160px) clamp(150px, 18vw, 250px) minmax(0, 1fr) auto; }
.moo-speaker { padding-right: 10px; padding-left: 10px; }
.moo-speaker img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .75); }
.moo-speaker em { display: block; width: 100%; max-width: 260px; margin: 12px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.moo-speaker em[hidden] { display: none; }
.moo-header, .moo-messages, .moo-composer { padding-left: clamp(12px, 2vw, 28px); padding-right: clamp(12px, 2vw, 28px); }
.moo-message, .moo-options, .moo-composer form, .moo-hint { margin-left: 0; margin-right: 0; }
.moo-cast { gap: 10px; padding: 18px 10px; }
.moo-cast button > span, .moo-cast img { width: var(--moo-cast-image, 88px); height: var(--moo-cast-image, 88px); font-size: 30px; }
.moo-cast small { font-size: 10px; white-space: normal; }
@media (max-width: 450px) {
  .moo-speaker { padding-left: 6px; padding-right: 6px; }
  .moo-speaker em { font-size: 10px; }
  .moo-header, .moo-messages, .moo-composer { padding-left: 10px; padding-right: 10px; }
}

/* Multiple-choice replies are the only player input. */
.moo-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; }
.moo-options > button { width: 100%; min-height: 58px; padding: 16px 20px; font-size: 16px; line-height: 1.45; border-radius: 8px; }
.moo-options > button:focus-visible { outline: 2px solid #f4f3ef; outline-offset: 3px; }
.moo-options > button:disabled { opacity: .55; cursor: default; }
.moo-outline-checkpoint { margin: 28px 0 4px; padding: 12px 0; border-bottom: 1px solid #bbb9b0; font-size: 15px; }
.moo-outline-photo { margin-left: 24px; padding: 16px; border: 1px solid #c5b681; background: #f0ecdd; }
.moo-outline-photo summary { cursor: pointer; font-weight: 500; }
.moo-outline-photo > .moo-admin-card { border: 0; padding: 16px 0; background: transparent; }
.moo-outline-insert { justify-self: start; padding: 9px 14px; border: 1px dashed #8c8878; background: transparent; color: #454438; cursor: pointer; }
.moo-outline-controls { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 7px; }
@media (max-width: 600px) {
  .moo-options > button { min-height: 54px; padding: 13px 12px; font-size: 14px; }
  .moo-composer { padding-bottom: 18px; }
  .moo-outline-photo { margin-left: 10px; }
}

/* Let the transcript and choices fill their column, with a compact cast rail. */
.moo-message, .moo-options { max-width: none; }
.moo-cast { align-content: start; padding-top: 24px; }
.moo-shell:not(.is-mobile) .moo-cast { align-self: stretch; overflow-y: auto; min-height: 0; }
.moo-cast button { min-width: 0; }
.moo-cast small { line-height: 1.3; }
.moo-financial-settings > p { line-height: 1.6; }
@media (max-width: 600px) {
  .moo-rail { padding: 24px 6px; }
  .moo-rail li { display: block; font-size: 8px; overflow-wrap: anywhere; }
  .moo-rail li .moo-step-number { display: block; margin-bottom: 5px; }
  .moo-rail li:not(:last-child)::after { left: 0; top: 58px; }
  .moo-rail-label { font-size: 8px; letter-spacing: .04em; }
}

/* Photos keep their proportions and fit inside the conversation viewport. */
.moo-messages .moo-attachment img, .moo-messages .moo-attachment video {
  width: auto; height: auto; max-width: 100%;
  max-height: max(40px, calc(var(--moo-transcript-height, 460px) - 96px));
  object-fit: contain;
}
.moo-mobile-control { display: none; }
.moo-mobile-name { display: none; }
.moo-character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.moo-character-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; color: #f4f3ef; padding: 0; }
.moo-character-grid img, .moo-character-grid button > span { width: min(100%, 76px); height: 76px; object-fit: cover; border-radius: 12px; background: #252522; display: grid; place-items: center; font-size: 32px; }
.moo-character-grid small { font-size: 12px; overflow-wrap: anywhere; }
.moo-timeline { display: flex; overflow-x: auto; list-style: none; padding: 12px 0 24px; margin: 0 0 16px; gap: 0; }
.moo-timeline li { position: relative; flex: 0 0 110px; display: flex; flex-direction: column; gap: 16px; padding-right: 12px; font-size: 11px; line-height: 1.5; color: var(--moo-muted); }
.moo-timeline .moo-step-number { width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.moo-timeline li:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: #45443d; top: 13px; left: 32px; right: 6px; }
.moo-timeline .is-reached { color: var(--moo-gold); }
.moo-timeline [aria-current] .moo-step-number { background: var(--moo-gold); color: #111; }
.moo-admin-payments { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.moo-admin-payment-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-moo-payment-editor] [hidden] { display: none !important; }

/* On mobile, the conversation fills the game; characters and progress open on demand. */
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  body[data-active-tab="moo"]:has(.is-mobile) { height: 100dvh; overflow: hidden; }
  .moo-page:has(.is-mobile) { height: 100dvh; min-height: 0; overflow: hidden; }
  .moo-shell.is-mobile { position: relative; height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .moo-shell.is-mobile .moo-rail, .moo-shell.is-mobile .moo-cast { display: none; }
  .moo-shell.is-mobile .moo-conversation { grid-column: 1; grid-row: 1; height: 100%; min-height: 0; overflow: hidden; }
  .moo-shell.is-mobile .moo-speaker { position: absolute; top: 8px; left: 12px; width: 84px; height: 92px; padding: 0; z-index: 1; justify-content: flex-start; }
  .moo-shell.is-mobile .moo-speaker img { width: 80px; height: 80px; max-height: none; object-fit: contain; border: 0; border-radius: 10px; }
  .moo-shell.is-mobile .moo-speaker em, .moo-desktop-name { display: none; }
  .moo-mobile-name { display: block; }
  .moo-header { min-height: 108px; padding: 12px 12px 12px 108px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; border-bottom: 1px solid #252522; background: #111110; }
  .moo-header nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .moo-header button { min-height: 36px; padding: 8px 10px; border: 1px solid #393731; border-radius: 18px; font-size: 11px; }
  .moo-mobile-control { display: block; }
  .moo-timeline { flex-direction: column; overflow-x: visible; gap: 14px; }
  .moo-timeline li { flex: none; flex-direction: row; align-items: center; gap: 14px; padding: 0 0 16px; }
  .moo-timeline .moo-step-number { flex-shrink: 0; }
  .moo-timeline li:not(:last-child)::after { left: 13px; right: auto; top: 32px; bottom: -8px; width: 1px; height: auto; }
  .moo-speaker { background: transparent; }
  .moo-messages { padding: 16px 12px; }
  .moo-message { margin-bottom: 18px; }
  .moo-message.is-monkter { margin-right: 24px; }
  .moo-message > span { font-size: 9px; }
  .moo-bubble { padding: 12px 14px; border-radius: 18px 18px 18px 4px; }
  .moo-message p { font-size: 15px; line-height: 1.55; }
  .moo-message.is-player p { background: #343021; border-color: #5c5139; border-radius: 18px 18px 4px 18px; font-size: 14px; }
  .moo-composer { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #252522; background: #111110; }
  .moo-options { gap: 8px; margin-bottom: 0; }
  .moo-options > button { min-height: 44px; padding: 10px 14px; font-size: 14px; border-radius: 18px; }
}
@media (min-width: 600px) and (max-width: 900px) and (max-height: 500px) {
  .moo-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.moo-edward-notification { position: absolute; z-index: 120; top: 14px; left: 0; width: 100%; padding: 14px 18px 16px; border: 1px solid #ffffff70; border-radius: 22px; background: #ededf0ee; backdrop-filter: blur(22px); color: #17171b; box-shadow: 0 12px 40px #0005; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; animation: moo-notification-arrive .25s ease-out; }
.moo-edward-notification[hidden] { display: none; }
.moo-notification-app { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #65656c; }
.moo-notification-app > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #32c759; color: white; font-size: 16px; }
.moo-notification-app small { font-size: 10px; letter-spacing: .04em; }
.moo-notification-app time { margin-left: auto; font-size: 11px; }
.moo-notification-app button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #65656c; font-size: 22px; cursor: pointer; }
.moo-edward-notification > strong { font-size: 15px; font-weight: 650; }
.moo-edward-notification > p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.moo-payment button:disabled, [data-moo-confirm-pay]:disabled { opacity: .5; cursor: wait; }
@keyframes moo-notification-arrive { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .moo-edward-notification { animation: none; } }

/* Authored replies can contain full paragraphs or long unbroken text. */
.moo-composer { min-height: 0; max-height: 48dvh; overflow-y: auto; overscroll-behavior-y: contain; }
.moo-options > button { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.moo-message.is-player p { overflow-wrap: anywhere; white-space: pre-wrap; }