/* Original Pixel Party palette and artwork; application state remains service-owned. */
:root {
  color-scheme: dark;
  --ground: #152b35;
  --paper: #223f49;
  --ink: #fff5d6;
  --muted: #bdd0be;
  --line: #546b70;
  --forest: #bdd47b;
  --forest-hover: #d1e695;
  --focus: #e6d58a;
  --notice: #f6e5bd;
  --notice-ink: #152b35;
  --coral: #eda27d;
  --deep: #0e2029;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  accent-color: var(--forest);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--line) var(--ground); }
body { margin: 0; }
::selection { background: var(--forest); color: var(--ground); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
a { color: var(--focus); text-underline-offset: .25em; }
a:hover { color: var(--ink); }
:where(h1, h2, h3, h4):where(:not(#clerk-signin *)) { line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
h1 { margin: 0; min-width: 0; }
:where(h2):where(:not(#clerk-signin *)) { margin: 0 0 .75rem; font-size: clamp(1.5rem, 2vw, 1.85rem); }
:where(h3):where(:not(#clerk-signin *)) { margin: 0 0 .65rem; font-size: 1.2rem; }
:where(h4):where(:not(#clerk-signin *)) { margin: 0 0 .5rem; font-size: 1rem; }
:where(p):where(:not(#clerk-signin *)) { margin: .5rem 0 1rem; max-width: 72ch; overflow-wrap: anywhere; }
:where(button, input, select, textarea):where(:not(#clerk-signin *)) { font: inherit; max-width: 100%; min-width: 0; }
:where(button):where(:not(#clerk-signin *)) { min-height: 46px; padding: .65rem 1rem; border: 2px solid var(--forest); border-radius: 0; background: var(--forest); color: var(--ground); box-shadow: 0 3px 0 var(--deep); cursor: pointer; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
:where(button):where(:not(#clerk-signin *)):hover:not(:disabled) { background: var(--forest-hover); border-color: var(--forest-hover); color: var(--ground); }
:where(button):where(:not(#clerk-signin *)):active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--deep); }
:where(button):where(:not(#clerk-signin *)):disabled { background: #334e53; border-color: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
:where(input, select, textarea):where(:not(#clerk-signin *)) { width: 100%; min-height: 46px; border: 2px solid #8b9f96; border-radius: 0; padding: .65rem .75rem; background: #fff5d6; color: var(--ground); color-scheme: light; caret-color: var(--ground); }
:where(textarea):where(:not(#clerk-signin *)) { resize: vertical; }
:where(input, textarea):where(:not(#clerk-signin *))::placeholder { color: #526568; opacity: 1; }
:where(label):where(:not(#clerk-signin *)) { display: block; margin: 1.1rem 0 .4rem; font-weight: 650; }
:where(form):where(:not(#clerk-signin *)) { min-width: 0; }
:where(form > button[type="submit"]):where(:not(#clerk-signin *)) { margin-top: 1.4rem; }
.help { color: var(--muted); font-size: .925rem; }
.checkbox-label { display: flex; gap: .7rem; align-items: center; min-height: 44px; }
.checkbox-label input { width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; accent-color: var(--forest); }
.masthead { padding: 1rem 1.5rem; min-width: 0; }
.header-inner { max-width: 1320px; margin: auto; }
.brand-lockup { display: flex; align-items: center; gap: .75rem; }
.brand-lockup h1 { max-width: 245px; }
.brand-mark { flex: 0 0 40px; image-rendering: pixelated; }
.wordmark { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pixel-world { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.app-layout { width: 100%; min-width: 0; max-width: 1168px; margin-inline: auto; padding: 0 1.5rem; }
.save-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.save-strip p { margin: 0; font-weight: 650; }
.save-strip #sync-status { margin-top: .35rem; font-weight: 400; }
.save-strip button { flex-shrink: 0; }
#auth { max-width: 660px; margin: 1.5rem auto 0; padding: 2rem; background: var(--paper); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--deep); }
.auth-switch { margin-bottom: 1.5rem; }
#clerk-status:empty { display: none; }
#clerk-signin { color-scheme: dark; min-width: 0; margin-top: 1.5rem; }
#account-back { margin: 0 0 1.5rem; background: transparent; border-color: var(--line); color: var(--ink); }
#account-intro { color: var(--muted); }
#account-retry { margin-block: 1rem; }
#clerk-signin:empty { display: none; }
/* Stable Clerk element classes: retain provider validation, branding and icons. */
#clerk-signin .cl-formFieldInput::placeholder { color: #526568; opacity: 1; }
#clerk-signin .cl-socialButtonsBlockButton { background: #152b35; border: 2px solid #8b9f96; color: #fff5d6; }
#clerk-signin .cl-socialButtonsBlockButton:hover { background: #2b4a50; }
#clerk-account-controls { margin-block: 1rem; }
#clerk-choices .button-row { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; gap: .85rem; }
#clerk-choices .button-row button { text-align: left; }
#clerk-create { background: var(--forest); color: var(--ground); border-color: var(--forest); }
#clerk-back { margin-block: 1rem; }
#setup-participants fieldset { min-width: 0; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); }
#setup-participants legend { padding-inline: .4rem; font-weight: 650; }
#setup-add-participant { margin: .35rem 0 .5rem; background: transparent; color: var(--forest); }
.household-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.household-bar p { margin: 0; font-weight: 750; }
.household-bar button { flex-shrink: 0; background: transparent; color: var(--muted); border-color: var(--line); }
.chooser { padding-bottom: 1.25rem; }
.chooser h2 { font-size: 1.15rem; margin: 0; }
.chooser p { margin: .5rem 0 .85rem; font-size: .925rem; color: var(--muted); }
.button-row, nav { display: flex; flex-wrap: wrap; gap: .65rem; }
.button-row button, nav button { background: transparent; color: var(--ink); border-color: var(--line); }
.button-row button[aria-pressed="true"], nav button[aria-current="page"] { background: var(--forest); color: var(--ground); border-color: var(--forest); }
nav { padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
nav #refresh { margin-left: auto; color: var(--muted); }
nav #refresh:hover:not(:disabled) { color: var(--ground); }
main { padding: 1.75rem 0 2rem; min-width: 0; }
main:has(#surface:empty) { padding: 0; }
.participant-context { color: var(--muted); font-weight: 650; margin-top: -.25rem; }
.work-item { margin-top: 1rem; padding: 1.25rem 1.5rem; border: 2px solid var(--line); background: var(--paper); box-shadow: 3px 3px 0 var(--deep); }
.work-item:first-of-type { margin-top: 1.5rem; }
.steps { padding: 0; margin: 0; list-style: none; }
.steps li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; }
.steps li > span:first-child { overflow-wrap: anywhere; }
.steps button { flex: 0 1 auto; }
.done { color: var(--forest); font-weight: 700; }
.empty { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); }
.notice { color: var(--notice-ink); background: var(--notice); padding: 1rem; }
.celebration { background: var(--forest); color: var(--ground); padding: 1rem; font-weight: 700; }
.progress-item { padding: 1.15rem 0; min-width: 0; }
.progress-item p { font-variant-numeric: tabular-nums; }
.progress-item .level { color: var(--forest); font-weight: 700; margin: 0 0 .4rem; }
progress { width: 100%; height: 16px; accent-color: var(--forest); }
progress::-webkit-progress-bar { background: var(--deep); border: 1px solid var(--line); }
progress::-webkit-progress-value { background: var(--forest); }
progress::-moz-progress-bar { background: var(--forest); }
.specialists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 2rem; margin: 1.5rem 0; border-top: 1px solid var(--line); }
.specialists .progress-item { border-bottom: 1px solid var(--line); }
.parent-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.parent-forms form { padding: 1.5rem; border: 1px solid var(--line); background: var(--paper); }
#unlock-form { max-width: 440px; margin-top: 1.75rem; }
#correction-reason { max-width: 640px; }
#surface > section { margin-top: 1.75rem; }
.starter-setup { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); }
.starter-setup form, #member-create-form, #coin-adjust-form { max-width: 640px; }
.management-detail { margin: 1rem 0; border: 1px solid var(--line); padding: 0 1.25rem; background: var(--paper); }
summary { cursor: pointer; min-height: 46px; padding: .85rem 0; font-weight: 650; overflow-wrap: anywhere; }
summary:hover { color: var(--forest); }
.management-detail > form, .management-detail > section { padding-bottom: 1.25rem; }
.management-detail button, .approval-item button, .request-management button { margin: .75rem .6rem 0 0; }
.weekday-fields { display: flex; flex-wrap: wrap; gap: .25rem 1rem; min-width: 0; margin: 1rem 0; padding: .5rem .75rem; border: 1px solid var(--line); }
.weekday-fields legend { font-weight: 650; padding: 0 .25rem; }
.weekday-fields .checkbox-label { margin: 0; }
.step-editor { padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); }
.pause-controls, .fresh-start { padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); }
.pause-controls > input { max-width: 640px; display: block; }
.pause-controls > button { margin-top: 1rem; }
.pause-controls > h4 { margin-top: 1.25rem; }
.round-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.exception-item > input, .exception-item > select { max-width: 640px; display: block; }
.fresh-start { margin-top: 1rem; }
.approval-attention { padding: 1rem; background: var(--notice); color: var(--notice-ink); }
.avatar-label { display: inline-block; margin-left: .5rem; font-size: .8rem; font-weight: 400; }
#parent-attention { margin: 1rem 0 0; }
#surface section > h3:not(:first-child) { margin-top: 1.75rem; }
.starter-setup > form { margin-top: 1.5rem; }
#coin-adjust-form { margin-top: 1.75rem; }
#surface > section + h3 { margin-top: 2rem; }
#pin-recovery-form { max-width: 640px; }
.history-item { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.history-item + h3, .parent-forms + h3 { margin-top: 2rem; }
.ledger { padding-left: 1.3rem; }
.ledger li { padding: .5rem 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
footer { border-top: 1px solid var(--line); margin-top: 1.5rem; padding: 1.25rem 0; color: var(--muted); font-size: .9rem; }
.legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .75rem; background: var(--ink); color: var(--ground); z-index: 10; }
.skip-link:focus { top: 1rem; }
.skip-link:hover { color: var(--ground); }
/* A real household collapses the welcome world, leaving the daily work in front. */
body:has(#household-shell:not([hidden])) { display: block; max-width: none; padding: 0; }
body:has(#household-shell:not([hidden])) .masthead { position: static; padding: 1rem 1.5rem; background: var(--paper); border-bottom: 2px solid var(--line); }
body:has(#household-shell:not([hidden])) .header-inner { max-width: 1120px; }
body:has(#household-shell:not([hidden])) .brand-lockup { max-width: 310px; }
body:has(#household-shell:not([hidden])) .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
body:has(#household-shell:not([hidden])) :is(.world-frame, .brand-promise, .world-caption) { display: none; }
body:has(#household-shell:not([hidden])) .app-layout { max-width: 1168px; margin-inline: auto; padding: 0 1.5rem; }
@media (max-width: 900px) {
  .masthead { position: static; }
  #auth { margin-top: 1.25rem; }
}
@media (max-width: 720px) {
  .app-layout { padding: 0 1rem; }
  .brand-lockup { gap: .5rem; }
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }

  #auth { padding: 1.25rem; }
  .save-strip { align-items: flex-start; flex-direction: column; gap: .6rem; min-height: 0; }
  .specialists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .parent-forms { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  nav #refresh { margin-left: 0; }
  .steps li { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .work-item, .starter-setup { padding: 1.25rem; }
  main { padding-top: 1.25rem; }
  body:has(#household-shell:not([hidden])) .masthead { padding: .85rem 1rem; }
  body:has(#household-shell:not([hidden])) .app-layout { padding: 0 1rem; }
}
@media (max-width: 420px) {
  .specialists { grid-template-columns: minmax(0, 1fr); }
  nav button { flex: 1 1 40%; }
  .household-bar { align-items: flex-start; }
  .parent-forms form { padding: 1.25rem; }
}
/* First-round Pixel Party: the world leads, the menu enters the real app. */
.hero-shell { margin: 0 24px; padding: 6px; background: var(--line); border: 2px solid #78918c; }
.hero { position: relative; isolation: isolate; min-height: 640px; height: min(58.33vw, 820px); background: #eda27d; color: var(--ground); overflow: hidden; }
.landscape { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: 50% 100%; }
.hero-copy { position: absolute; top: 5%; left: 5%; width: 90%; text-align: center; }
.hero-wordmark { width: min(680px, 90%); margin: 0 auto 18px; }
.hero-copy h2 { font-size: clamp(1.5rem, 2.5vw, 2.3rem); background: var(--notice); width: fit-content; padding: 10px 24px 0; margin: auto; }
.hero-copy .intro { margin: 0 auto; padding: 8px 24px 12px; background: var(--notice); width: fit-content; font-size: 18px; }
.hero-menu { position: absolute; left: 28px; bottom: 28px; width: min(320px, 40%); padding: 18px; display: grid; gap: 10px; background: var(--ground); border: 2px solid var(--line); }
.hero-menu button { min-height: 48px; text-align: left; }
.hero-menu .primary { background: var(--focus); border-color: var(--focus); color: var(--ground); }
#title-continue { background: transparent; color: var(--ink); border-color: var(--muted); }
#title-continue:hover { background: var(--forest); color: var(--ground); }
.hero-menu a { min-height: 44px; display: flex; align-items: center; }
#title-screen .hero-menu button:focus-visible { outline-color: var(--ink); }
.homepage-content { max-width: 1120px; margin: auto; padding: 0 32px; }
.homepage-content > section { margin: 64px 0; }
.homepage-content h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.025em; }
.sample-console { display: grid; grid-template-columns: 1fr 1.4fr; border: 2px solid var(--line); background: var(--paper); }
.sample-party { padding: 32px; border-right: 1px solid var(--line); }
.sample-party h2 { margin-bottom: 24px; }
.sample-avatars { display: flex; gap: 16px; margin-bottom: 24px; }
.sample-avatars img { image-rendering: pixelated; }
.sample-quests { padding: 32px; }
.sample-quests [data-sample-quest] { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); box-shadow: none; text-align: left; }
.sample-quests [data-sample-quest] span:last-child { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.sample-quests [data-sample-quest][aria-pressed="true"] { color: var(--forest); text-decoration: line-through; }
#title-example-start { margin-top: 24px; }
.home-faq { max-width: 800px; margin-inline: auto !important; }
.home-faq details { border-bottom: 1px solid var(--line); }
.home-faq p { color: var(--muted); }
.home-sendoff { padding: 32px; background: var(--notice); color: var(--ground); }
.home-sendoff p { max-width: 42ch; }
body:has(#title-screen:not([hidden])) :is(.save-strip, #main, #account-status) { display: none; }
@media (min-width: 1600px) { .hero-shell { max-width: 1510px; margin-inline: auto; } }
@media (max-width: 800px) {
 .sample-console { grid-template-columns: 1fr; }
 .sample-party { border-right: 0; border-bottom: 1px solid var(--line); }
 .hero-menu { width: 280px; }
}
@media (max-width: 650px) {
 .hero-shell { margin: 0 10px; padding: 3px; }
 .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
 .hero-copy { position: static; width: 100%; padding: 20px 16px 0; }
 .hero-copy h2 { background: transparent; padding: 0; }
 .hero-copy .intro { font-size: 16px; background: transparent; padding: 8px 0 0; }
 .hero-wordmark { width: 100%; margin-bottom: 16px; }
 .landscape { position: static; height: auto; aspect-ratio: 480 / 280; margin-top: 12px; }
 .hero-menu { position: static; width: auto; margin: 0 12px 12px; padding: 14px; grid-template-columns: 1fr 1fr; }
 .hero-menu .primary, .hero-menu a { grid-column: 1 / -1; }
 .hero-menu #title-continue { grid-column: 1 / -1; }
 .hero-menu a { min-height: 30px; }
 .homepage-content { padding: 0 18px; }
 .homepage-content > section { margin-block: 40px; }
 .sample-party, .sample-quests, .home-sendoff { padding: 22px; }
 .sample-quests [data-sample-quest] { gap: 12px; }
}
/* Room setup uses the existing Pixel Party forms, not a separate onboarding app. */
.inline-help { margin: .2rem 0 1rem; color: var(--muted); font-size: .925rem; }
.inline-help summary { width: fit-content; color: var(--focus); font-weight: 600; }
.inline-help p { margin-top: .5rem; }
.setup-continuation { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.setup-continuation h3 { font-size: 1.35rem; }
#room-setup { padding-bottom: 1.25rem; }
#room-setup > summary { font-size: 1.25rem; color: var(--forest); }
/* Compact room choices: selecting one enables its entire catalog. */
.room-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-block: 1rem; }
.room-choice { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: .65rem; row-gap: .25rem; align-content: center; align-items: center; text-align: left; background: var(--paper); color: var(--ink); border-color: var(--line); min-height: 82px; }
.room-choice[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--ground); }
.room-picture { width: 24px; height: 24px; grid-row: 1 / 3; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.room-choice-name { font-weight: 750; }
.room-choice-count { grid-column: 2; font-size: .875rem; font-weight: 500; }
.secondary-action { background: transparent; color: var(--focus); border-color: var(--line); }
#room-setup { min-width: 0; }
#room-named-options { margin-block: 1rem; }
#room-add-form { max-width: 600px; }
.room-apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--line); margin-top: 1.25rem; }
.room-selection-summary { margin: 0; color: var(--forest); font-weight: 750; font-variant-numeric: tabular-nums; }
#saved-rooms { margin-top: 2rem; }
.room-task-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-top: 1px solid var(--line); }
.room-task-row > div { min-width: 0; }
.room-task-row strong { overflow-wrap: anywhere; }
.room-task-row p { margin: .25rem 0 0; }
.room-task-row button { flex: 0 0 auto; max-width: 48%; background: transparent; color: var(--focus); border-color: var(--line); }
@media (max-width: 900px) { .room-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
 .room-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
 .room-choice { padding: .65rem; min-height: 80px; }
 .room-apply { align-items: stretch; flex-direction: column; }
 .room-task-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
 .room-task-row button { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Parent sections preserve live form nodes and drafts on local navigation. */
#parent-sections { gap: .5rem; margin-top: 1.5rem; padding-block: 1rem; background: var(--ground); }
#parent-sections button { flex: 0 1 auto; }
[data-parent-panel] { min-width: 0; margin-top: 1.5rem; }
[data-parent-panel] > h3 { margin-bottom: 1.5rem; color: var(--forest); }
[data-parent-panel] > section, [data-parent-panel] > details { margin-block: 1.5rem; }
.player-avatar { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
#member-picker button { display: flex; align-items: center; gap: .75rem; }
.character-avatar { width: 128px; height: 128px; }
.avatar-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block: 1rem; }
.avatar-picker button { display: flex; flex-direction: column; align-items: center; background: var(--ground); color: var(--ink); border-color: var(--line); }
.avatar-picker button[aria-pressed="true"] { border-color: var(--focus); }
.rotation-pool { min-width: 0; padding: 1rem; margin-block: 1.25rem; border: 1px solid var(--line); }
.rotation-pool legend { font-weight: 650; }
.template-bulk { grid-column: 1 / -1; margin-block: .5rem; }
#back-to-top, #feedback-open { position: fixed; inset-inline-end: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 6; width: 48px; height: 48px; min-height: 48px; padding: 0; margin: 0; background: var(--ground); color: var(--focus); border-color: var(--focus); box-shadow: 0 3px 8px var(--deep); font-size: 1.6rem; }
#feedback-open { bottom: calc(68px + max(0px, env(safe-area-inset-bottom))); display: grid; place-items: center; }
#feedback-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(1.25rem, 4vw, 2rem); overflow: auto; color: var(--ink); background: var(--paper); border: 2px solid var(--line); box-shadow: 0 12px 32px var(--deep); }
#feedback-dialog::backdrop { background: rgb(14 32 41 / 85%); }
#feedback-dialog h2 { font-size: 1.5rem; text-wrap: wrap; }
#feedback-dialog textarea { min-height: 8rem; }
#feedback-dialog .help { margin-block: .65rem; }
#feedback-status:empty { display: none; }
#feedback-status { margin-block: 1.25rem; font-weight: 650; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
#feedback-close { background: transparent; color: var(--ink); border-color: var(--line); }
@media (min-width: 1320px) { #feedback-open { inset-inline-end: calc(68px + max(0px, env(safe-area-inset-right))); bottom: max(12px, env(safe-area-inset-bottom)); } }
/* A narrow utility rail keeps the floating target off chore, nav and footer actions. */
.app-layout, body:has(#household-shell:not([hidden])) .app-layout { padding-inline-end: calc(64px + max(12px, env(safe-area-inset-right))); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (max-width: 420px) { .room-choice { padding: .5rem; column-gap: .4rem; grid-template-columns: 20px minmax(0, 1fr); } .room-choice .room-picture { width: 20px; height: 20px; } }
@media (min-width: 1320px) { .app-layout, body:has(#household-shell:not([hidden])) .app-layout { padding-inline-end: 1.5rem; } }
.repair-controls { border-block: 1px solid var(--line); padding-block: 1.25rem; }
.repair-controls .button-row { margin-top: 1rem; }
#repair-preview { margin-top: 1.25rem; overflow-wrap: anywhere; }
.repair-list { padding-inline-start: 1.3rem; }
.repair-list li { padding-block: .65rem; border-bottom: 1px solid var(--line); }
.repair-list p { margin: .3rem 0; font-variant-numeric: tabular-nums; }
#repair-preview > h4 { color: var(--forest); }
#account-status { border-top: 1px solid var(--line); padding-top: 1.5rem; color: var(--muted); }
#account-status h2 { font-size: 1rem; }
#account-status #sign-out { display: inline-block; }
body:not(:has(#household-shell:not([hidden]))) #sign-out { display: none; }
#attention-stack { position: sticky; top: 0; z-index: 5; background: var(--ground); }
#action-status { background: var(--notice); color: var(--notice-ink); padding: 1rem; }
@media (max-width: 650px) {
 #parent-sections { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #parent-sections button { min-height: 48px; }
 #member-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #member-picker button { flex-direction: column; gap: .4rem; }
 .household-bar { flex-wrap: wrap; }
 .avatar-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.parent-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; background: var(--ground); border-bottom: 1px solid var(--line); }
.parent-toolbar p { margin: 0; }
.parent-toolbar button { flex: 0 0 auto; }
/* Exact-card work stays within the existing Pixel Party surface. */
.growth-icon { display: inline-block; width: 32px; height: 32px; max-width: none; object-fit: contain; image-rendering: pixelated; vertical-align: middle; margin-inline-end: .35rem; }
.quick-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block: 1.25rem; }
.quick-actions button { margin: 0; }
.quick-actions .secondary-action { background: transparent; color: var(--focus); border-color: var(--line); }
.step-actions { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.child-undo { min-width: 64px; min-height: 44px; padding-inline: .65rem; }
.quick-bottom-actions { border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 0; }
@media (max-width: 480px) {
  #surface[data-play-view="today"] .steps li { flex-wrap: wrap; }
  #surface[data-play-view="today"] .step-caption { flex: 1 1 100%; }
  #surface[data-play-view="today"] .step-actions { margin-left: auto; }
}

.today-growth { padding-block: .75rem 1.25rem; border-bottom: 1px solid var(--line); max-width: 720px; }
.today-growth h3 { color: var(--forest); margin-bottom: .35rem; }
.today-growth p, .round-awards, .today-rewards { font-variant-numeric: tabular-nums; }
.today-growth progress { display: block; max-width: 480px; margin-block: .65rem 1rem; }
.today-growth .button-row { margin-top: .8rem; }
.today-growth .button-row button { min-height: 44px; padding: .5rem .75rem; }
.chore-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.chore-heading h3 { margin-block: .5rem; min-width: 0; }
.chore-edit { flex: 0 0 auto; min-width: 60px; min-height: 44px; padding: .5rem .75rem; }
.routine-work .chore-heading { display: block; position: relative; }
.routine-work .chore-edit { position: absolute; inset: 0 0 auto auto; }
.routine-bundle > summary { padding: .5rem 5rem .5rem 0; min-height: 54px; }
.routine-bundle > summary h3 { display: inline; font-size: 1.25rem; overflow-wrap: anywhere; }
.routine-progress { display: block; margin-top: .35rem; color: var(--muted); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.routine-checklist { padding-block: .5rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.routine-step { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.routine-starter-confirm { padding-block: .75rem; }
.routine-starter-confirm button { margin: .25rem .5rem .25rem 0; }
.round-awards { color: var(--forest); margin-block: .65rem 1rem; }
.quick-context { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quick-context > h3 { font-size: 1.15rem; }
.quick-context > fieldset { min-width: 0; margin: 1.25rem 0; padding: .75rem 1rem 1.25rem; border: 1px solid var(--line); }
.quick-context legend { font-weight: 700; }
.quick-context > button { margin: 1rem .6rem .25rem 0; }
.quick-context .management-detail { background: transparent; }
#quick-unlock-form { max-width: 440px; }
#quick-edit-result { scroll-margin-top: 8rem; }
.today-rewards { padding-block: 1.25rem; border-top: 1px solid var(--line); }
.today-rewards ul { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.today-rewards li { padding-block: .65rem; }
.today-rewards li p { margin-bottom: 0; }
@media (max-width: 650px) { .quick-context > fieldset { padding-inline: .75rem; } }
/* Server-backed fitting room: the approved camp scene lives inside Pixel Party. */
.creator-sprite { position: relative; display: inline-block; flex: 0 0 64px; width: 64px; height: 64px; }
.creator-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#surface[data-play-view="character"] .creator-sprite.character-avatar { width: 128px; height: 128px; flex-basis: 128px; }
.creator-entry { padding-block: 1rem 1.5rem; border-top: 1px solid var(--line); }
.creator-entry .button-row { margin-top: 1.25rem; }
.creator-entry .creator-credits { margin-bottom: 0; }
.creator-editor { margin-top: .75rem !important; }
.creator-editor > h3 { font-size: 1.5rem; }
.creator-editor > p { color: var(--muted); margin-bottom: 1.5rem; }
.creator-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.creator-side, .creator-wardrobe { min-width: 0; }
.creator-scene { isolation: isolate; position: relative; overflow: hidden; min-height: 352px; margin: 0; background: #efd0a5; border: 3px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px var(--deep); }
.creator-scene::before { content: ""; position: absolute; z-index: -2; inset: 54% 0 0; background: #9db07a; border-top: 7px solid #cbd09a; }
.creator-scene::after { content: ""; position: absolute; z-index: -1; bottom: 0; left: 18%; width: 64%; height: 24%; background: #c7ba83; box-shadow: 0 -7px 0 #dac895, 0 9px 0 #b7ac75; }
.creator-tree { position: absolute; z-index: -1; top: 28px; left: -25px; width: 104px; height: 167px; background: #52795d; clip-path: polygon(43% 0,57% 0,57% 12%,68% 12%,68% 24%,80% 24%,80% 37%,91% 37%,91% 51%,100% 51%,100% 68%,60% 68%,60% 100%,42% 100%,42% 68%,0 68%,0 51%,10% 51%,10% 37%,23% 37%,23% 24%,34% 24%,34% 12%,43% 12%); }
.creator-tree.far { left: auto; right: -12px; top: 5px; background: #879d73; scale: .8; }
.creator-tent { position: absolute; right: 16px; bottom: 74px; width: 95px; height: 92px; background: #c68e69; clip-path: polygon(44% 0,56% 0,56% 12%,65% 12%,65% 25%,74% 25%,74% 42%,83% 42%,83% 61%,92% 61%,92% 78%,100% 78%,100% 100%,0 100%,0 78%,9% 78%,9% 61%,18% 61%,18% 42%,27% 42%,27% 25%,36% 25%,36% 12%,44% 12%); z-index: -1; }
.creator-tent::after { content: ""; position: absolute; bottom: 0; left: 42%; width: 23%; height: 48%; background: #5c6550; border-top: 8px solid #e1af7f; }
.creator-flowers { position: absolute; width: 5px; height: 5px; background: #ffe6a6; bottom: 48px; left: 26px; box-shadow: 8px 0 0 #ffe6a6,4px -4px 0 #f2bd98,4px 4px 0 #f2bd98,4px 9px 0 #456c50,26px 16px 0 #fff6df,30px 12px 0 #fff6df,34px 16px 0 #fff6df,30px 20px 0 #e3b587,30px 25px 0 #456c50; }
.creator-flowers.right { left: auto; right: 46px; bottom: 34px; }
.creator-firefly { position: absolute; top: 84px; right: 88px; width: 5px; height: 5px; background: #fff6bf; box-shadow: -32px 37px 0 #fff6bf,49px 59px 0 #fff6bf; }
.creator-scene .creator-sprite { width: 256px; height: 256px; flex-basis: 256px; z-index: 1; margin-top: 28px; }
.creator-side > p { margin-block: .85rem; }
.creator-slots { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.creator-slots li { border: 1px solid var(--line); padding: .35rem .6rem; color: var(--muted); font-size: .925rem; }
.creator-wardrobe fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 1.75rem; }
.creator-wardrobe legend { padding: 0; margin-bottom: 1rem; font-weight: 750; font-size: 1.2rem; }
.creator-appearance-group + .creator-appearance-group { margin-top: 1.5rem; }
.creator-appearance-group h4 { margin: 0 0 .65rem; }
.creator-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.creator-choices button { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 48px; padding: .55rem .6rem; text-align: left; font-size: .925rem; background: var(--paper); border-color: var(--line); color: var(--ink); }
.creator-choices button[aria-pressed="true"] { border-color: var(--focus); background: var(--forest); color: var(--ground); box-shadow: inset 0 0 0 1px var(--focus); }
.creator-choices button:hover:not(:disabled) { border-color: var(--focus); background: var(--paper); color: var(--ink); }
.creator-choices button[aria-pressed="true"]:hover:not(:disabled) { background: var(--forest); color: var(--ground); }
.creator-choices .creator-style-choice { flex-direction: column; justify-content: center; gap: .25rem; padding: .35rem .2rem .65rem; text-align: center; }
.creator-style-frame { position: relative; display: block; width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; }
.creator-style-frame .creator-sprite { position: absolute; width: 128px; height: 128px; left: -32px; top: -20px; }
#creator-hair-color-label + .creator-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creator-swatch { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid currentColor; background: #f0c7ab; }
@media (min-width: 901px) {
  .creator-side { position: sticky; top: 6rem; }
}
@media (max-width: 480px) {
  .creator-swatch-choices, #creator-hair-color-label + .creator-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.creator-gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-block: 1rem; }
.creator-gear-item { display: flex; align-items: center; gap: .4rem; padding: .5rem; min-width: 0; min-height: 112px; background: var(--paper); border-color: var(--line); color: var(--ink); text-align: left; }
.creator-gear-item[aria-pressed="true"] { border-color: var(--focus); }
.creator-gear-item img { width: 64px; height: 64px; flex: 0 0 64px; image-rendering: pixelated; }
.creator-gear-item > span { min-width: 0; }
.creator-gear-item strong, .creator-gear-item small { display: block; }
.creator-gear-item small { font-size: .8rem; font-weight: 500; margin-top: .35rem; }
.creator-actions { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.5rem; }
.creator-actions #save-character { background: var(--forest); color: var(--ground); border-color: var(--forest); }
.creator-actions #save-character:disabled { background: #334e53; color: var(--muted); border-color: var(--line); }
.creator-credits { margin-top: 1rem; }
@media (max-width: 1000px) {
  .creator-workbench { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .creator-side { max-width: 540px; width: 100%; }
}
@media (max-width: 650px) {
  .creator-scene { min-height: 264px; }
  .creator-scene .creator-sprite { width: 192px; height: 192px; flex-basis: 192px; }
  .creator-tent { width: 85px; height: 80px; bottom: 55px; }
  .creator-gear { grid-template-columns: minmax(0, 1fr); }
  .creator-gear-item { min-height: 96px; gap: .75rem; }
  .creator-actions { flex-direction: column; align-items: stretch; }
  .creator-actions button { width: 100%; }
}

/* Small daily work and room browsing reuse the established Pixel Party world. */
.today-work-heading { margin-top: 2rem; }
.today-browse { margin-top: 1.5rem; padding-block: .75rem 1.25rem; }
.browse-room > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; list-style: none; }
.browse-room > summary::after { content: '+'; margin-inline-start: auto; color: var(--focus); }
.browse-room[open] > summary::after { content: '−'; }
.browse-room > summary .help { font-weight: 400; }
.available-quest { padding-block: 1.25rem; border-top: 1px solid var(--line); }
.available-quest p { margin-bottom: .75rem; }
.first-spark { display: flex; align-items: center; gap: 1.25rem; max-width: 720px; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.first-spark img { flex: 0 0 64px; image-rendering: pixelated; }
.first-spark[data-earned="false"] img { filter: grayscale(1); opacity: .55; }
.first-spark p { margin: .35rem 0 0; }
.first-spark h3 { margin: 0; }
.first-spark[data-earned="true"] h3 { color: var(--forest); }
#sample-progress { display: block; min-height: 18px; height: 18px; }
@media (max-width: 650px) { .room-queue li { flex-wrap: wrap; } .room-queue li > span { flex-basis: 100%; } .parent-toolbar { font-size: .9rem; } }

/* Child play refinement: local pictures lead; saved work and native controls stay.
   All layout rules stop at participant views, never parent forms or the homepage. */
#surface[data-play-view] .play-picture { display: block; width: 128px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; border: 2px solid var(--deep); }
#surface[data-play-view="today"], #surface[data-play-view="rewards"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; align-items: start; }
#surface:is([data-play-view="today"], [data-play-view="rewards"]) > * { min-width: 0; margin-block: 0; }
#surface[data-play-view="today"] > .today-work-heading { margin-top: 1.1rem; }
#surface[data-play-view="today"] > .routine-work { position: relative; padding: .85rem; border-color: #8da988; }
#surface[data-play-view="today"] .routine-work .chore-heading { position: static; display: block; }
#surface[data-play-view="today"] .routine-footer { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: .85rem; }
#surface[data-play-view="today"] .routine-work .chore-edit { position: static; min-width: 54px; }
#surface[data-play-view="today"] .routine-bundle > summary { display: flex; align-items: center; gap: .85rem; padding: 0; list-style: none; min-height: 80px; }
#surface[data-play-view="today"] .routine-bundle > summary::-webkit-details-marker { display: none; }
#surface[data-play-view="today"] .routine-bundle > summary .play-picture { width: 80px; }
#surface[data-play-view="today"] .routine-caption { min-width: 0; flex: 1; }
#surface[data-play-view="today"] .routine-caption h3 { display: block; font-size: 1.1rem; margin: 0; text-wrap: wrap; }
#surface[data-play-view="today"] .routine-progress { margin-top: .4rem; font-size: .925rem; }
#surface[data-play-view="today"] .routine-caption progress { display: block; height: 8px; margin-top: .4rem; }
#surface[data-play-view="today"] .routine-open-label { display: block; margin-top: .4rem; color: var(--focus); font-size: .85rem; }
#surface[data-play-view="today"] .routine-open-label::after { content: ' +'; }
#surface[data-play-view="today"] .routine-bundle[open] .routine-open-label::after { content: ' −'; }
#surface[data-play-view="today"] .routine-footer > .round-awards { margin: 0; min-width: 0; }
#surface[data-play-view="today"] .routine-checklist { border: 0; margin: .85rem 0; padding: 0; }
#surface[data-play-view="today"] .steps li { display: flex; flex-direction: row; align-items: center; gap: .65rem; border-top: 1px solid var(--line); padding-block: .75rem; }
#surface[data-play-view="today"] .step-caption { display: flex; align-items: center; gap: .65rem; min-width: 0; }
#surface[data-play-view="today"] .step-caption .play-picture { width: 48px; }
#surface[data-play-view="today"] .step-caption > span { min-width: 0; overflow-wrap: anywhere; }
#surface[data-play-view="today"] .routine-step { flex-shrink: 0; padding-inline: .65rem; }
#surface[data-play-view] .award-badge { width: fit-content; padding: .35rem .55rem; background: var(--deep); color: var(--forest); font-size: .925rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#surface[data-play-view="today"] .routine-footer > .award-badge { padding: .3rem .5rem; }
#surface[data-play-view] .play-details { margin-top: .75rem; border-top: 1px solid var(--line); min-width: 0; }
#surface[data-play-view] .play-details > summary { width: fit-content; min-height: 44px; color: var(--focus); padding-block: .65rem; }
#surface[data-play-view] .play-details p { margin-block: .35rem .75rem; white-space: pre-line; }
#surface[data-play-view] .play-round-details { padding-top: .85rem; }
#surface[data-play-view] .play-round-details h4 { margin: 0 0 .5rem; color: var(--muted); }
#surface[data-play-view] .play-details .play-round-details h4 { display: none; }
#surface[data-play-view="today"] .quest-work { display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: .35rem 1.5rem; padding: 1.25rem; }
#surface[data-play-view="today"] .quest-work > * { grid-column: 2; min-width: 0; margin-block: 0; }
#surface[data-play-view="today"] .quest-work > .play-picture { grid-column: 1; grid-row: 1 / span 5; width: 100%; align-self: start; }
#surface[data-play-view="today"] .quest-work .chore-heading h3 { font-size: 1.4rem; margin: 0; align-self: center; }
#surface[data-play-view="today"] .selected-quest-label { font-size: .925rem; color: var(--muted); }
#surface[data-play-view="today"] .quest-work > button { justify-self: start; margin-top: .65rem; }
#surface[data-play-view="today"] .quest-work > .play-details { grid-column: 1 / -1; margin-top: .5rem; }
#surface[data-play-view="today"] .quest-work > .quick-context { grid-column: 1 / -1; }
#surface[data-play-view="today"] > :is(.today-browse, .today-growth, .today-rewards) { margin-top: .65rem; }
#surface[data-play-view="today"] .today-browse p { margin: 0 0 .75rem; }
#surface[data-play-view="today"] .today-growth { max-width: none; }
#surface[data-play-view="today"] .today-rewards li { padding-block: .35rem; }
#surface[data-play-view="rooms"] .room-browser { display: grid; gap: 1rem; margin-top: 1.5rem; }
#surface[data-play-view="rooms"] .browse-room { margin: 0; padding-inline: 1rem; border: 2px solid var(--line); }
#surface[data-play-view="rooms"] .browse-room > summary { flex-wrap: nowrap; gap: 1rem; min-height: 100px; }
#surface[data-play-view="rooms"] .browse-room > summary .room-picture { width: 52px; height: 52px; flex: 0 0 52px; padding: 6px; color: var(--ground); background: var(--forest); }
#surface[data-play-view="rooms"] .browse-room-label { min-width: 0; flex: 1; }
#surface[data-play-view="rooms"] .browse-room-label > span { display: block; }
#surface[data-play-view="rooms"] .browse-room-name { font-size: 1.25rem; font-weight: 750; }
#surface[data-play-view="rooms"] .available-quest { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .6rem 1rem; align-items: start; }
#surface[data-play-view="rooms"] .available-quest > .play-picture { width: 96px; grid-row: 1 / span 2; }
#surface[data-play-view="rooms"] .available-caption { min-width: 0; }
#surface[data-play-view="rooms"] .available-quest > :not(.play-picture) { grid-column: 2; margin-block: 0; }
#surface[data-play-view="rooms"] .available-quest > button { justify-self: start; margin-top: 0; }
#surface[data-play-view="rooms"] .available-quest .round-awards { margin: .5rem 0 0; }
#surface[data-play-view="rooms"] .available-scope { white-space: pre-line; }
#surface[data-play-view="rewards"] .reward-work { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: .6rem 1.25rem; padding: 1.25rem; }
#surface[data-play-view="rewards"] .reward-work > * { grid-column: 2; min-width: 0; margin-block: 0; }
#surface[data-play-view="rewards"] .reward-work > .play-picture { grid-column: 1; grid-row: 1 / span 3; width: 128px; }
#surface[data-play-view="rewards"] .reward-work > h3 { align-self: center; font-size: 1.25rem; text-wrap: wrap; }
#surface[data-play-view="rewards"] .reward-price { font-weight: 750; color: var(--focus); }
#surface[data-play-view="rewards"] .reward-work > button { justify-self: start; }
#surface[data-play-view="rewards"] .reward-work > .play-details { grid-column: 1 / -1; margin-top: .25rem; }
#surface[data-play-view="rewards"] > h3 { margin-top: 1.5rem; }
#surface[data-play-view="character"] .character-identity { display: flex; align-items: center; gap: 1.25rem; margin-block: 1.5rem; }
#surface[data-play-view="character"] .character-identity > div { min-width: 0; }
#surface[data-play-view="character"] .character-identity h3 { margin: 0; }
#surface[data-play-view="character"] .character-identity p { margin: .35rem 0 0; }
#surface[data-play-view="character"] .character-avatar { width: 96px; height: 96px; flex: 0 0 96px; margin: 0; }
#surface[data-play-view="character"] .first-spark { max-width: none; }
#surface[data-play-view="character"] .progress-heading { display: flex; align-items: center; gap: .85rem; }
#surface[data-play-view="character"] .progress-heading > div { min-width: 0; }
#surface[data-play-view="character"] .progress-heading h3 { margin: 0 0 .25rem; }
#surface[data-play-view="character"] .progress-heading .level { margin: 0; }
#surface[data-play-view="character"] .progress-heading .play-picture { width: 64px; }
#surface[data-play-view="character"] .progress-heading .growth-icon { width: 48px; height: 48px; margin: 0; }
#surface[data-play-view="character"] .progress-item > p { margin-block: .75rem .5rem; font-size: .925rem; }
#surface[data-play-view="character"] .progress-item progress { height: 10px; }
#surface[data-play-view="character"] .celebration { max-width: none; }
@media (min-width: 651px) and (max-width: 1050px) {
  #surface[data-play-view="character"] .specialists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  #surface[data-play-view="today"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  #surface[data-play-view="today"] > * { grid-column: 1 / -1; }
  #surface[data-play-view="today"] > .routine-work { grid-column: auto; align-self: stretch; }
  #surface[data-play-view="today"] > .routine-work:has(.routine-bundle[open]), #surface[data-play-view="today"] > .routine-work:has(.quick-context) { grid-column: 1 / -1; }
  #surface[data-play-view="today"] .routine-bundle > summary .play-picture { width: 96px; }
}
@media (max-width: 650px) {
  #surface[data-play-view="today"] .routine-bundle > summary { display: flow-root; }
  #surface[data-play-view="today"] .routine-bundle > summary .play-picture { width: 64px; float: left; margin: 0 .65rem .4rem 0; }
  #surface[data-play-view="today"] .routine-caption { display: contents; }
  #surface[data-play-view="today"] .routine-caption progress { clear: both; }
  #surface[data-play-view="today"] .quest-work { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: .65rem; }
  #surface[data-play-view="today"] .quest-work > *, #surface[data-play-view="today"] .quest-work > .play-picture { grid-column: 1; grid-row: auto; }
  #surface[data-play-view="today"] .quest-work > .play-picture { max-width: 256px; justify-self: center; }
  #surface[data-play-view="today"] .quest-work .chore-heading h3 { font-size: 1.25rem; }
  #surface[data-play-view="rooms"] .available-quest { grid-template-columns: 64px minmax(0, 1fr); gap: .65rem; }
  #surface[data-play-view="rooms"] .available-quest > .play-picture { width: 64px; grid-row: 1; }
  #surface[data-play-view="rooms"] .available-quest > :is(button, .available-scope, .help) { grid-column: 1 / -1; }
  #surface[data-play-view="rewards"] .reward-work { display: flow-root; padding: 1rem; }
  #surface[data-play-view="rewards"] .reward-work > .play-picture { width: 80px; float: left; margin: 0 .85rem .5rem 0; }
  #surface[data-play-view="rewards"] .reward-work > h3 { margin-bottom: .65rem; }
  #surface[data-play-view="rewards"] .reward-price { clear: both; padding-top: .5rem; }
  #surface[data-play-view="rewards"] .reward-work > button { margin-top: .65rem; }
  #surface[data-play-view="rewards"] .reward-work > .play-details { margin-top: .75rem; }
  #surface[data-play-view="character"] .specialists { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block: 1rem; }
  #surface[data-play-view="character"] .specialists .progress-item { padding-block: .85rem; }
  #surface[data-play-view="character"] .progress-heading .play-picture { width: 48px; }
  #surface[data-play-view="character"] .first-spark { align-items: start; gap: .85rem; }
}

/* Optional parent reward ideas inherit Pixel Party; no child/Today layout changes. */
#reward-form { margin-block: 1.5rem 2.5rem; }
#reward-starters { margin-block: 1rem; }
#reward-starters > summary { min-height: 44px; padding-block: .65rem; cursor: pointer; }
#reward-starters .reward-starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
#reward-starters [data-reward-starter] { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; min-width: 0; margin: 0; padding: .5rem; background: var(--paper); border: 2px solid var(--line); color: var(--ink); text-align: center; }
#reward-starters [data-reward-starter] img { display: block; width: 128px; max-width: 100%; height: auto; image-rendering: pixelated; }
#reward-starters [data-reward-starter]:hover { border-color: var(--forest); }
#reward-starters [aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: var(--ground); }
#reward-starters .reward-starter-title { overflow-wrap: normal; word-break: normal; }
#reward-form > .secondary-action { margin-block: .5rem; }
#reward-replace { margin-block: 1rem; padding-block: 1rem; border-block: 1px solid var(--focus); }
#reward-replace button { margin: .25rem .5rem .25rem 0; }
#reward-draft-status { margin-block: 1rem; }
@media (max-width: 900px) { #reward-starters .reward-starter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #reward-starters .reward-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }

/* Separate clothes and the optional Living Room inherit the camp's Pixel Party world. */
.creator-clothing-group { margin-top: 1.5rem; }
.creator-jumps { position: sticky; top: 0; z-index: 3; padding-block: .65rem; margin-bottom: 1rem; background: var(--ground); border-block: 1px solid var(--line); }
.creator-jumps button { padding: .5rem .75rem; }
.adventure-link { margin: .5rem 0; }
.adventure-link summary { color: var(--focus); }
.adventure-link label { font-size: .925rem; }
@media (min-width: 1001px) { #creator-hair-color-label + .creator-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.creator-clothing-group > h4 { margin-bottom: .75rem; }
.adventure > h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .35rem; }
.adventure-intro { color: var(--muted); margin: 0 0 1rem; }
#adventure-sound { min-height: 44px; margin: .5rem .75rem .5rem 0; }
#adventure-sound[aria-pressed="true"] { background: var(--forest); color: var(--ground); }
.adventure-rules { margin-top: 2rem; border-top: 1px solid var(--line); }
.adventure-rules > summary { min-height: 44px; padding-block: .75rem; color: var(--focus); cursor: pointer; }
.adventure-rules p { max-width: 70ch; }
.adventure-rescue h4 { margin-bottom: .5rem; }
.adventure-credit-crew { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.adventure-credit-crew legend { width: auto; }
.adventure-credit-crew .checkbox-label { flex: 0 1 auto; }
.adventure-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.adventure-world, .adventure-console { min-width: 0; }
.adventure-room { margin: 0; background: var(--deep); border: 2px solid var(--line); }
.adventure-room > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.adventure-map-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.adventure-map-status span { padding: .65rem .5rem; background: var(--deep); color: var(--notice); font-size: .85rem; text-align: center; }
.adventure-map-status .safe { background: var(--forest); color: var(--ground); font-weight: 750; }
.adventure-console { padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); }
.adventure-console fieldset { min-width: 0; padding: .5rem .75rem; border: 1px solid var(--line); }
.adventure-console legend { padding-inline: .25rem; }
.adventure-console .checkbox-label { margin: .25rem 0; }
.adventure-timer { margin: .5rem 0 0; font-size: 1.5rem; font-weight: 750; color: var(--focus); font-variant-numeric: tabular-nums; }
.adventure-progress { font-weight: 750; color: var(--forest); }
#adventure-extend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: center; margin: .75rem 0 1rem; }
#adventure-extend label { grid-column: 1 / -1; margin: 0; }
#adventure-extend button { margin: 0; }
.adventure-cancel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.adventure-cancel button { margin: .25rem .5rem .25rem 0; }
.adventure-reward { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; margin: 1.25rem 0 2rem; border-block: 1px solid var(--line); }
.adventure-reward img { flex: 0 0 64px; image-rendering: pixelated; }
.adventure-reward p { margin: 0; color: var(--muted); font-size: .925rem; }
.adventure-rescues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.25rem 0; }
.adventure-rescue { min-width: 0; padding-top: 1rem; border-top: 2px solid var(--coral); }
.adventure-rescue.rescue-safe { border-top-color: var(--forest); }
.adventure-rescue label { margin-top: .75rem; }
.adventure-rescue .help { margin: .75rem 0; }
.adventure-rescue button { width: 100%; margin-top: .5rem; }
.adventure-credit-crew { min-width: 0; margin: 1rem 0; padding: .5rem .75rem; border: 1px solid var(--line); }
.adventure-credit-crew legend { padding-inline: .25rem; font-weight: 700; }
.adventure-credit-crew .checkbox-label { margin: .25rem 0; min-height: 44px; }
.adventure-credit-status { overflow-wrap: anywhere; }
/* Snapshot-controlled lava lives only inside the room art, never over work controls. */
.adventure-room-stage { position: relative; isolation: isolate; overflow: hidden; }
.adventure-room-stage > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
#adventure-lava { position: absolute; inset: 0; pointer-events: none; background: url("/static/adventure-lava.svg") center / 100% 100% no-repeat; image-rendering: pixelated; clip-path: inset(92% 0 0 0); transition: clip-path 200ms ease-out; }
.adventure-pickup { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.adventure-pickup h4, .adventure-finish h4 { margin: 0 0 .5rem; font-size: 1.125rem; }
.adventure-pickup button { width: 100%; }
.adventure-timed-extra { margin-block: 1rem 1.5rem; }
.adventure-timed-extra summary { min-height: 44px; color: var(--focus); cursor: pointer; padding-block: .65rem; }
.adventure-finish { margin: 1.5rem 0 2rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--paper); }
.adventure-finish p { max-width: 72ch; }
.adventure-inspection { padding-block: 1.25rem; margin-bottom: 1.5rem; border-block: 1px solid var(--line); }
.adventure-inspection .checkbox-label { min-height: 44px; }
.adventure-keepsakes { margin-block: 1.5rem 2rem; }
.adventure-keepsake { display: flex; align-items: flex-start; gap: 1.25rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.adventure-keepsake img { flex: 0 0 96px; image-rendering: pixelated; }
.adventure-keepsake h4 { margin: 0 0 .5rem; font-size: 1.25rem; }
.adventure-keepsake p { margin-block: .5rem; }
.keepsake-achievement { font-weight: 750; }
.adventure-timer span { display: block; }
.adventure-timer-detail { font-size: 1rem; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { #adventure-lava { transition: none; } }
@media (max-width: 760px) {
  .adventure-keepsake { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .25rem .75rem; }
  .adventure-keepsake > div { display: contents; }
  .adventure-keepsake img { grid-column: 1; grid-row: 1 / 3; }
  .adventure-keepsake h4, .adventure-keepsake h4 + p { grid-column: 2; }
  .adventure-keepsake p { grid-column: 1 / -1; }
  .adventure-keepsake img { flex-basis: 64px; width: 64px; height: 64px; }
  .adventure-finish { padding: 1rem; }
  .adventure-layout, .adventure-rescues { grid-template-columns: minmax(0, 1fr); }
  .adventure-layout { gap: .75rem; }
  .adventure-console { padding: 1rem; }
  .adventure-reward { align-items: flex-start; gap: .65rem; }
  .adventure-map-status span { padding: .5rem .3rem; }
}