/* FrankenSITE 1.3 — a specimen catalogue, with the experiment kept clear. */
.manual-launch { width: auto; min-width: 44px; padding: 0 12px; gap: 8px; }
.manual-launch > span { font-size: 11px; font-weight: 800; white-space: nowrap; }
.manual-launch > b { min-width: 18px; color: var(--lime); font: 500 14px var(--display); }
body:not([data-phase='menu']):not([data-phase='ended']) .manual-launch { visibility: hidden; }
.challenge-invitation { margin: 22px 0; padding: 14px 17px 6px; border: 1px solid #c1b1f043; border-left: 3px solid var(--lavender); border-radius: 0 12px 12px 0; background: #c1b1f009; }
.challenge-invitation .section-label { color: var(--lavender); font-size: 8px; letter-spacing: 1.3px; }
.challenge-invitation > strong { display: block; margin-top: 5px; color: var(--cream); font: 400 23px/1.2 var(--display); overflow-wrap: anywhere; }
.challenge-invitation p { margin: 5px 0 0; color: #bdc9cd; font-size: 13px; }
.challenge-invitation .text-button { padding-left: 0; font-size: 11px; }
body:not([data-phase='menu']) .challenge-invitation { display: none; }
body[data-challenge='true'][data-phase='menu'] .lab-notes { display: none; }
.machine-best[data-challenge='true'] { color: var(--lime); }
.stamped { max-width: calc(100% - 24px); }
#demo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Results give one next goal, then quiet ways to keep or pass on a creature. */
.next-goal { display: grid; gap: 4px; margin: -3px 0 15px; }
.results-modal .next-goal .section-label { color: #9aaeb2; font-size: 8px; letter-spacing: 1.4px; }
.next-goal > strong { font-size: 14px; line-height: 1.35; color: var(--cream); font-weight: 800; }
.next-goal > span:last-child { color: #9caebb; font-size: 11px; line-height: 1.45; }
.challenge-result { display: grid; gap: 3px; padding: 10px 12px; margin-top: 15px; background: #c1b1f009; border: 1px solid #c1b1f025; border-radius: 9px; }
.challenge-result > strong { color: var(--lavender); font-size: 13px; }
.challenge-result > span { color: #b1bfcb; font-size: 11px; line-height: 1.5; }
.challenge-result[data-outcome='beat'] { background: #d3f88c0a; border-color: #d3f88c29; }
.challenge-result[data-outcome='beat'] > strong { color: var(--lime); }
.result-actions .share-buttons { grid-template-columns: .9fr 1.25fr; }
.copy-challenge { display: block; width: 100%; min-height: 44px; font-size: 11px; color: #a6bcb6; }
.result-collection-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.result-collection-actions .secondary-button { min-height: 44px; font-size: 10px; }
.favourite-button[aria-pressed='true'] { color: var(--lime); border-color: #d3f88c66; background: #d3f88c0a; }
.favourite-button[aria-pressed='true'] svg use { fill: currentColor; }
.secondary-button:disabled { opacity: .48; }
.collection-save-note { margin: 10px 0 0; color: #9dafb4; text-align: center; font-size: 10px; line-height: 1.5; }
.collection-save-note[data-saved='false'] { color: #edc5a7; }

/* The Manual is an independent view, never a layer over the moving character. */
.manual-modal { width: min(940px, calc(100% - 40px)); max-width: none; padding: 32px; }
.manual-heading { position: relative; padding: 0 32px 22px 0; border-bottom: 1px solid var(--line); }
.manual-heading .section-label { font-size: 9px; letter-spacing: 1.5px; color: var(--mint); }
.manual-heading h2 { margin: 12px 0 10px; font-size: clamp(32px, 4.2vw, 46px); }
.manual-heading h2 > span { color: var(--lime); }
.manual-heading p { max-width: 560px; margin: 0; color: #a9b9c5; font-size: 12px; line-height: 1.6; }
.manual-modal:has(#manual-detail:not([hidden])) .manual-heading { padding: 0 36px 16px 0; }
.manual-modal:has(#manual-detail:not([hidden])) .manual-heading h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.manual-modal:has(#manual-detail:not([hidden])) .manual-heading > .section-label,
.manual-modal:has(#manual-detail:not([hidden])) .manual-heading p,
.manual-modal:has(#manual-detail:not([hidden])) .manual-capacity { display: none; }
.manual-capacity { display: inline-flex; margin-top: 13px; padding: 4px 9px; color: var(--mint); border: 1px solid #9bd6c730; border-radius: 5px; background: #9bd6c708; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
#manual-title:focus, #specimen-name:focus { outline: none; }
.specimen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 6px; }
.specimen-card { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 12px 12px 15px; text-align: left; color: var(--cream); border: 1px solid #849b9435; border-radius: 14px; background: radial-gradient(ellipse at 50% 42%, #7b965e15, transparent 70%), #17212a; transition: border-color .15s, background .15s; }
.specimen-card:hover { border-color: #b5d29b9c; background-color: #1e2e31; }
.specimen-card[data-favourite='true'], .specimen-card.is-favourite { border-color: #d3f88c80; background-color: #23302c; }
.specimen-card-number { color: #94aaa6; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.specimen-card-art { display: block; width: 100%; height: 178px; margin: 9px 0 11px; }
.specimen-card-name { display: block; font: 400 19px/1.15 var(--display); overflow-wrap: anywhere; }
.specimen-card-height { display: block; color: #a8bdb8; font-size: 10px; margin-top: 7px; }
.specimen-card-badge { position: absolute; right: 10px; top: 10px; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .3px; background: #23302c; padding: 0 3px; }
.manual-empty { padding: 38px 20px 24px; text-align: center; }
.manual-empty > svg { width: 58px; height: 58px; color: var(--mint); opacity: .7; }
.manual-empty h3 { margin: 13px 0 9px; font: 400 29px/1.2 var(--display); }
.manual-empty p { color: #a7b9c4; font-size: 13px; line-height: 1.7; }
.manual-empty .primary-button { max-width: 310px; margin-top: 12px; }
.manual-footnote { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); color: #91a5b2; font-size: 10px; line-height: 1.6; }
.manual-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; padding-top: 8px; }
.specimen-back { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
.archived-creature { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 38px 19px 18px; border: 1px solid #9bbba62f; border-radius: 16px; background: radial-gradient(ellipse at 50% 60%, #93ba6e18, transparent 64%), repeating-linear-gradient(0deg, #8fb3a007 0px, #8fb3a007 1px, transparent 1px, transparent 24px), repeating-linear-gradient(90deg, #8fb3a007 0px, #8fb3a007 1px, transparent 1px, transparent 24px), #151f28; }
#specimen-preview { display: block; width: 100%; height: 360px; min-height: 0; }
.archived-creature figcaption { margin-top: auto; padding-top: 13px; text-align: center; color: var(--lavender); font: 400 17px/1.25 var(--display); }
.specimen-copy { min-width: 0; padding-top: 7px; }
.specimen-copy > .section-label { color: #9aafa9; font-size: 8px; padding: 0; letter-spacing: 1.1px; }
.specimen-copy h3 { margin: 12px 0; font: 500 36px/1.05 var(--display); letter-spacing: -.4px; overflow-wrap: anywhere; }
.specimen-copy > p { color: #a9bac6; font-size: 12px; line-height: 1.6; }
.specimen-copy .specimen-note { font-size: 11px; color: #92b2a6; }
.specimen-stats { display: grid; grid-template-columns: .9fr 1.2fr 1fr; gap: 10px; padding: 18px 0; margin: 19px 0 17px; border-block: 1px solid var(--line); }
.specimen-stats strong { display: block; font: 500 29px/1 var(--display); color: var(--lime); font-variant-numeric: tabular-nums; }
.specimen-stats > div:nth-child(2) strong { color: var(--cream); }
.specimen-stats > div:nth-child(3) strong { color: var(--lavender); }
.specimen-stats span { display: block; margin-top: 6px; font-size: 10px; color: #9bafbe; }
.specimen-copy > .favourite-button { width: 100%; }
.specimen-copy .share-buttons { grid-template-columns: .9fr 1.3fr; }
.release-button { display: block; width: max-content; margin: 4px auto 0; color: #a695a5; font-size: 10px; }
.release-confirm { margin-top: 9px; padding: 13px; border: 1px solid #ddbaa642; border-radius: 10px; background: #ddbaa606; }
.release-confirm p { color: #ddc8bc; font-size: 12px; margin: 0 0 10px; }
.release-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.link-modal label { display: block; color: #bac9cf; font-size: 13px; }
.link-modal textarea { display: block; width: 100%; resize: vertical; min-height: 105px; padding: 12px; margin: 12px 0; color: var(--cream); background: #0f1a23; border: 1px solid #789c8c7a; border-radius: 10px; font: 12px/1.6 var(--body); overflow-wrap: anywhere; }
.link-modal textarea:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

@media (max-width: 1100px) { .manual-launch > span { display: none; } }
@media (min-width: 761px) { #result-preview { height: clamp(300px, 45dvh, 450px); } }
@media (max-width: 760px) {
  .manual-launch { padding: 0 7px; gap: 4px; }
  .manual-launch > b { font-size: 12px; min-width: 13px; }
  .manual-heading { padding-right: 22px; padding-bottom: 17px; }
  .manual-modal { width: calc(100% - 24px); padding: 24px 18px 19px; }
  .manual-heading h2 { font-size: 30px; line-height: 1.06; margin-top: 11px; }
  .manual-heading .section-label { font-size: 7px; letter-spacing: 1px; }
  .manual-heading p { font-size: 11px; }
  .manual-capacity { margin-top: 10px; font-size: 8px; }
  .specimen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 17px; }
  .specimen-card { padding: 10px 10px 13px; }
  .specimen-card-art { height: 150px; margin-top: 6px; }
  .specimen-card-name { font-size: 18px; }
  .specimen-card-number { font-size: 7px; letter-spacing: .8px; }
  .specimen-card-badge { font-size: 7px; top: 9px; right: 7px; }
  .manual-detail { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .specimen-back { padding-block: 8px; }
  .archived-creature { padding: 30px 16px 14px; }
  #specimen-preview { height: clamp(180px, 32svh, 280px); }
  .archived-creature figcaption { font-size: 15px; padding-top: 5px; }
  .specimen-copy h3 { font-size: 30px; }
  .specimen-copy .result-personality { margin-top: 12px; }
  .specimen-stats { margin-top: 15px; padding-block: 14px; }
  .specimen-copy > .favourite-button { min-height: 48px; }
  .manual-footnote { font-size: 9px; }
  .manual-empty { padding: 27px 4px 16px; }
  .next-goal { margin: 0 0 12px; gap: 3px; }
  .result-actions { display: flex; flex-direction: column; }
  .result-actions > .primary-button { order: -1; margin-bottom: 17px; }
  .next-goal > strong { font-size: 13px; }
  .next-goal > span:last-child { font-size: 10px; }
  .result-collection-actions .secondary-button { min-height: 46px; font-size: 11px; }
  .collection-save-note { font-size: 9px; }
  .challenge-invitation { margin: 15px 0 0; padding: 10px 12px 2px; text-align: left; }
  .challenge-invitation > strong { font-size: 20px; }
  .challenge-invitation p { font-size: 12px; }
  .challenge-invitation .text-button { min-height: 40px; }
  .challenge-result { margin-top: 11px; }
  body[data-challenge='true'][data-phase='menu'] .playfield { height: max(190px, calc(100svh - 480px)); }
}
/* Keep accepting a challenge within reach on short phones, without shrinking its creature. */
@media (max-width: 760px) and (max-height: 650px) {
  body[data-challenge='true'][data-phase='menu'] .arcade { padding-top: 4px; gap: 8px; }
  body[data-challenge='true'][data-phase='menu'] h1 { font-size: 34px; }
  body[data-challenge='true'][data-phase='menu'] .tagline { display: none; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 2px 10px; margin-top: 6px; padding: 8px 10px; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation > .section-label,
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation > strong,
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation > p { grid-column: 1; min-width: 0; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation .section-label { font-size: 7px; letter-spacing: .7px; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation > strong { margin: 0; font-size: 18px; line-height: 1.15; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation p { margin: 0; font-size: 10px; line-height: 1.4; }
  body[data-challenge='true'][data-phase='menu'] .challenge-invitation .text-button { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 90px; min-height: 44px; padding: 6px 7px; border: 1px solid #c1b1f033; border-radius: 8px; font-size: 10px; line-height: 1.25; text-align: center; }
  body[data-challenge='true'][data-phase='menu'] .feedback-heading { display: none; }
  body[data-challenge='true'][data-phase='menu'] .feedback { min-height: 24px; margin-bottom: 8px; }
}
@media (max-width: 370px) {
  .manual-modal { padding-inline: 15px; }
  .specimen-card { padding-inline: 9px; }
  .specimen-card-name { font-size: 16px; }
  .specimen-card-art { height: 136px; }
  .specimen-card-badge { max-width: 39px; overflow: hidden; }
  .manual-heading h2 { font-size: 28px; }
}