/* Approved open-stage composition; only this route owns these rules. */
main.main:has(> #dailyPetView.active) { padding-top: 48px !important; }
#dailyPetView { --pet-lilac: #8984a8; --pet-peach: #b78376; --pet-sage: #6f8973; color: var(--daily-skin-ink, #2d2a34); padding: 0 24px 40px; max-width: 1440px; margin-inline: auto; }
#dailyPetView p { margin: 0; line-height: 1.65; }
#dailyPetView [hidden] { display: none !important; }
#dailyPetView ::selection { background: var(--daily-skin-soft); color: var(--daily-skin-ink); }
#dailyPetView .pet-page-heading { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; margin-bottom: 20px; }
#dailyPetView .pet-page-heading h2 { margin: 0; font-size: 26px; font-weight: 650; line-height: 1.3; }
#dailyPetView .pet-page-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(240px, 1fr); gap: 7%; align-items: start; }
#dailyPetView .pet-companion { min-width: 0; }
#dailyPetView h3 { font-size: 24px; line-height: 1.4; font-weight: 650; letter-spacing: -.025em; margin: 0 0 10px; }
#dailyPetView .pet-companion-copy h3 { font-size: clamp(30px, 3.7vw, 52px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
#dailyPetView .pet-companion-copy p { color: var(--daily-skin-muted, #66636d); font-size: clamp(16px, 1.7vw, 23px); }
#dailyPetView .pet-stage-surface { position: relative; margin: 20px 0 0; border-radius: 32px; isolation: isolate; overflow: hidden; }
#dailyPetView .pet-home-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; }
#dailyPetView .daily-pet-stage { position: relative; width: 100%; aspect-ratio: 616 / 456; min-height: 0; }
#dailyPetView .daily-pet-stage canvas { border-radius: 32px; }
#dailyPetView .pet-poster { position: absolute; width: 56.5%; height: auto; inset: 17.5% auto auto 21.75%; object-fit: contain; pointer-events: none; }
#dailyPetView .pet-companion[data-pet-background="clear"] .pet-stage-surface { background: transparent !important; }
#dailyPetView .pet-companion-bottom { text-align: center; }
#dailyPetView .pet-response { min-height: 28px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 15px; color: var(--daily-skin-muted, #66636d); }
#dailyPetView .pet-moment-mark { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--pet-sage); }
#dailyPetView .pet-actions { display: flex; justify-content: center; padding: 10px 18px; margin-top: 18px; border-radius: 999px; background: linear-gradient(150deg, var(--daily-skin-control-a), var(--daily-skin-card)); box-shadow: 0 16px 36px rgba(54,52,65,.10), inset 0 1px 2px var(--daily-skin-edge), inset 0 -1px 2px var(--daily-skin-edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#dailyPetView button, #dailyPetView summary { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#dailyPetView .pet-actions button { position: relative; display: flex; flex: 1; min-width: 0; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 17px; transition: background-color 180ms ease-out, transform 180ms ease-out; }
#dailyPetView .pet-actions button + button::before { content: ""; position: absolute; width: 1px; height: 34px; left: 0; background: color-mix(in srgb, var(--daily-skin-muted) 20%, transparent); }
#dailyPetView svg { width: 24px; height: 24px; flex-shrink: 0; }
#dailyPetView .pet-actions svg { width: 30px; height: 30px; }
#dailyPetView .pet-change svg { color: var(--pet-lilac); }
#dailyPetView .pet-feed svg { color: var(--pet-sage); }
#dailyPetView .pet-feed-note { color: var(--daily-skin-muted); font-size: 13px; margin-top: 10px; }
#dailyPetView .pet-quiet svg { color: var(--pet-peach); fill: color-mix(in srgb, var(--pet-peach) 18%, transparent); }
#dailyPetView button:disabled { cursor: default; color: var(--daily-skin-muted); }
#dailyPetView .pet-actions button:disabled svg { opacity: .6; }
#dailyPetView :is(button, summary, canvas):focus-visible { outline: 2px solid var(--daily-skin-focus); outline-offset: 4px; }
#dailyPetView .pet-actions button:active:not(:disabled) { transform: scale(.96); }
#dailyPetView .pet-side { padding-top: 54px; min-width: 0; }
#dailyPetView .pet-side-intro { color: var(--daily-skin-muted); font-size: 17px; }
#dailyPetView summary { list-style: none; }
#dailyPetView summary::-webkit-details-marker { display: none; }
#dailyPetView .pet-moment-details { margin-top: 28px; }
#dailyPetView .pet-moment-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--daily-skin-muted); font-size: 15px; }
#dailyPetView .pet-moment-details[open] > summary svg { transform: rotate(90deg); }
#dailyPetView .pet-moment-content { display: flex; gap: 12px; margin-top: 20px; }
#dailyPetView .pet-moment-mark { margin-top: 10px; background: var(--pet-lilac); }
#dailyPetView [data-pet-moment-title] { font-size: 17px; font-weight: 550; }
#dailyPetView [data-pet-moment-copy], #dailyPetView .pet-local-note { margin-top: 8px; color: var(--daily-skin-muted); font-size: 14px; }
#dailyPetView .pet-footnote { margin-top: 20px; color: var(--daily-skin-muted); font-size: 13px; }
#dailyPetView .pet-retry { padding: 10px 18px; min-height: 44px; border: 0; border-radius: 999px; background: var(--daily-skin-card); margin: 10px 0 0; }
html[data-theme="dark"] #dailyPetView { --pet-lilac: #bbb5d6; --pet-peach: #d7ad9e; --pet-sage: #a9c2ac; }
#dailyPetView .pet-picker { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid var(--daily-skin-edge); border-radius: 28px; color: var(--daily-skin-ink, #2d2a34); background: var(--daily-skin-page, #efefec); box-shadow: 0 24px 80px rgba(35,32,44,.22); }
#dailyPetView .pet-picker::backdrop { background: rgba(35,32,44,.28); }
#dailyPetView .pet-picker header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#dailyPetView .pet-picker header h3 { margin: 0; }
#dailyPetView .pet-picker header button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--daily-skin-soft); font-size: 28px; line-height: 1; box-shadow: none; }
#dailyPetView .pet-picker-tabs { display: flex; padding: 4px; gap: 4px; border-radius: 18px; background: var(--daily-skin-soft); margin-bottom: 24px; }
#dailyPetView .pet-picker-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 14px; background: transparent; box-shadow: none; }
#dailyPetView .pet-picker-tabs button[aria-selected="true"] { background: var(--daily-skin-card); box-shadow: inset 0 1px 1px var(--daily-skin-edge); }
#dailyPetView .pet-resource-card { display: flex; align-items: center; gap: 16px; }
#dailyPetView .pet-resource-card img { width: 112px; height: 112px; object-fit: contain; }
#dailyPetView .pet-resource-card h4 { font-size: 21px; margin: 0 0 8px; }
#dailyPetView .pet-resource-card p, #dailyPetView .pet-resource-note { color: var(--daily-skin-muted, #66636d); font-size: 14px; }
#dailyPetView .pet-resource-note { margin: 16px 0; min-height: 46px; }
#dailyPetView .pet-resource-primary, #dailyPetView .pet-resource-secondary { width: 100%; min-height: 48px; padding: 12px; border: 0; border-radius: 16px; box-shadow: none; }
#dailyPetView .pet-resource-primary { background: var(--daily-skin-soft); font-weight: 600; }
#dailyPetView .pet-resource-secondary { margin-top: 8px; background: transparent; color: var(--daily-skin-muted); }
#dailyPetView .pet-background-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#dailyPetView .pet-background-options button { min-width: 0; padding: 6px; border: 2px solid transparent; border-radius: 18px; background: transparent; box-shadow: none; }
#dailyPetView .pet-background-options button[aria-pressed="true"] { border-color: var(--pet-lilac); }
#dailyPetView .pet-background-options img, #dailyPetView .pet-clear-preview { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
#dailyPetView .pet-clear-preview { background: var(--daily-skin-soft); outline: 1px dashed var(--daily-skin-muted); outline-offset: -8px; }
#dailyPetView .pet-background-options button > span:last-child { display: block; padding: 10px 0 4px; }
@media (hover: hover) { #dailyPetView .pet-actions button:hover:not(:disabled) { background: var(--daily-skin-soft); } }
@media (max-width: 720px) {
  main.main:has(> #dailyPetView.active) { padding-top: 38px !important; }
  #dailyPetView { padding: 0 8px 32px; }
  #dailyPetView .pet-page-heading { min-height: 52px; margin-bottom: 38px; }
  #dailyPetView .pet-page-heading h2 { font-size: 23px; }
  #dailyPetView .pet-page-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  #dailyPetView .pet-companion-copy h3 { font-size: clamp(27px, 7.2vw, 38px); letter-spacing: -.025em; }
  #dailyPetView .pet-companion-copy p { font-size: 16px; }
  #dailyPetView .pet-stage-surface { margin: 22px 0 0; border-radius: 24px; }
  #dailyPetView .pet-actions { padding: 7px 9px; margin-top: 16px; }
  #dailyPetView .pet-actions button { min-height: 70px; font-size: 16px; }
  #dailyPetView .pet-actions svg { width: 27px; height: 27px; }
  #dailyPetView .pet-response { font-size: 14px; }
  #dailyPetView .pet-side { padding-top: 0; }
  #dailyPetView .pet-side h3 { font-size: 21px; }
  #dailyPetView .pet-side-intro { font-size: 15px; }
  #dailyPetView .pet-moment-details { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { #dailyPetView *, #dailyPetView *::before, #dailyPetView *::after { transition: none !important; animation: none !important; } }
@media (prefers-reduced-transparency: reduce) {
  #dailyPetView .pet-actions { background: var(--daily-skin-page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}