/* Spatial scene layer. Shared controls/reading pages remain in app.css. */
.app-shell { max-width: 1440px; padding-inline: clamp(20px, 4.5vw, 72px); }
.companion { --room-height: 580px; min-height: 690px; padding: 0; }
.room { inset: 0; height: var(--room-height); overflow: visible; background: none; }
.room::after { left: -12%; right: -12%; bottom: 0; height: 80%; background: linear-gradient(155deg, #fffdf700, #edece438 80%, #fbfaf700); box-shadow: none; transform: skewY(-3deg); }
.room-line { display: none; }
.room-glow { top: 4%; left: 24%; width: 60%; height: 55%; background: linear-gradient(135deg, #ffffffd9, #fffefa00 70%); filter: blur(12px); transform: skewX(-18deg); }
.room-ledge { position: absolute; z-index: 1; height: 17px; border-top: 1px solid #ffffff; background: linear-gradient(#ecebe3a0, #f5f4ef00); box-shadow: 0 7px 12px -10px #55594b60; transform: skewX(-12deg); }
.room-ledge-low { left: 53%; top: 248px; width: 47%; height: 65px; }
.room-ledge-window { left: 74%; top: 213px; width: 26%; height: 35px; }
.content-panel { width: 100%; max-width: none; min-height: 650px; padding-top: 394px; margin: 0; }
.content-panel > .eyebrow { position: absolute; top: 78px; left: 0; font-size: .72rem; letter-spacing: .07em; }
.content-panel > h1 { position: absolute; top: 32px; left: 0; font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: .12em; }
.entrust-form, .active-card, .content-panel > .status-message, .compact-note { width: min(32%, 370px); margin: 0 0 0 auto; }
.entrust-form label, .card-label { font-size: .78rem; margin-bottom: 10px; }
.input-row { gap: 8px; }
.input-row input { border-width: 0 0 1px; border-radius: 0; background: transparent; padding-inline: 2px; }
.primary-button { font-size: .86rem; font-weight: 500; border-color: var(--line); }
.entrust-form .primary-button { background: transparent; border-color: #e2e3da; }
.entrust-form .primary-button:hover { background: #efefe8; border-color: var(--line-strong); }
.entrust-form label { color: #62685f; font-weight: 400; }
.entrust-form input:not(:hover):not(:focus) { border-color: #e2e3da; }
.quiet-button, .beside-button { font-size: .83rem; border-color: var(--line); }
.field-help, .content-panel > .status-message { font-size: .7rem; margin-top: 12px; }
.card-text { font-size: clamp(1rem, 1.7vw, 1.3rem); min-height: 2em; line-height: 1.8; }
.card-actions { gap: 8px; margin-top: 16px; }
.beside-button { width: auto; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin-top: 8px; }
.site-footer { margin-top: 14px; }
.network-mark { font-size: .64rem; letter-spacing: .22em; }

/* Foot positions are room coordinates. The DOM adapter reads these exact
   positions rather than maintaining a second mobile geometry in JavaScript. */
.cat-stage { --foot: 330px; --cat-size: 310px; --cat-opacity: 1; --ground-alpha: .14; --ground-inset: 19%; --ground-blur: 8px; width: var(--cat-size); opacity: 1; z-index: 2; }
.cat-stage[data-place] { top: calc(var(--foot) - var(--cat-size) * .625); right: auto; bottom: auto; filter: none; }
.cat-ground-shadow { position: absolute; left: var(--ground-inset); right: var(--ground-inset); top: 90%; height: 6%; border-radius: 50%; background: rgb(67 75 53 / var(--ground-alpha)); filter: blur(var(--ground-blur)); pointer-events: none; transform-origin: center; }
.cat-facing { display: block; position: relative; transform: scaleX(1); }
.cat-stage[data-direction="right"] .cat-facing { transform: scaleX(-1); }
.cat-pet-zone { cursor: grab; touch-action: pan-y; transform-origin: 50% 93.75%; }
.cat-pet-zone:active { cursor: grabbing; }
.cat-pose { filter: none; transition: none; }
.cat-stage[data-place="far_corner"] { --cat-size: 220px; --foot: 258px; left: 15%; }
.cat-stage[data-place="under_title"] { --cat-size: 300px; --foot: 356px; left: 43%; }
.cat-stage[data-place="near_card"] { --cat-size: 350px; --foot: 494px; left: 30%; }
.cat-stage[data-place="screen_edge"] { --cat-size: 315px; --foot: 419px; left: -19%; }
.cat-stage[data-place="foreground"] { --cat-size: 430px; --foot: 607px; left: 9%; }
.cat-stage[data-place="beside_user"] { --cat-size: 380px; --foot: 534px; left: 23%; }
.cat-stage[data-place="ledge_base"] { --cat-size: 220px; --foot: 312px; left: 68%; }
.cat-stage[data-place="low_ledge"] { --cat-size: 220px; --foot: 248px; left: 54%; }
.cat-stage[data-place="window_ledge"] { --cat-size: 220px; --foot: 213px; left: 76%; }
.cat-stage[data-depth="far"] { --ground-alpha: .085; --ground-inset: 24%; --ground-blur: 6px; }
.cat-stage[data-depth="near"] { --ground-alpha: .19; --ground-inset: 15%; --ground-blur: 10px; z-index: 4; }
.cat-stage[data-pose="peek"] .cat-facing { clip-path: inset(0 0 0 20%); }
.cat-stage[data-activity="rolling"] .cat-pose { animation: roll-weight 2400ms ease-in-out 1; transform-origin: 50% 83%; }
.cat-stage[data-activity="washing"] .cat-pose { animation: wash-weight 1400ms ease-in-out 3; transform-origin: 50% 91%; }
.cat-ear, .cat-tail { display: none; position: absolute; inset: 0; background-image: var(--pose-image); background-size: 100% 100%; pointer-events: none; }
.cat-stage[data-pose="loaf"][data-activity="ear-twitch"] .cat-ear { display: block; clip-path: polygon(17% 0, 34% 0, 34% 27%, 18% 24%); mask-image: linear-gradient(#000 0 15%, transparent 27%); transform-origin: 27% 24%; animation: ear-twitch 900ms ease-in-out 1; }
.cat-stage[data-pose="stand"][data-activity="tail-sway"] .cat-tail { display: block; clip-path: polygon(73% 31%, 78% 31%, 80% 63%, 85% 75%, 92% 76%, 92% 86%, 82% 86%, 76% 70%, 74% 53%); transform-origin: 75% 33%; animation: tail-sway 1400ms ease-in-out 1; }
.cat-stage[data-pose="stand"][data-activity="tail-sway"] .cat-pose { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 73% 31%, 78% 31%, 80% 63%, 85% 75%, 92% 76%, 92% 86%, 82% 86%, 76% 70%, 74% 53%, 73% 31%, 0 0); }
@keyframes ear-twitch { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(1deg); } }
@keyframes tail-sway { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(4deg); } }
@keyframes roll-weight { 35% { transform: rotate(-3deg) scaleY(.96); } 65% { transform: rotate(1deg); } }
@keyframes wash-weight { 50% { transform: rotate(-1deg) translateY(1px); } }
.beside-page { background: var(--bg); }
.beside-cat img { filter: drop-shadow(0 8px 9px #39412b14); }

@media (min-width: 761px) and (max-width: 1000px) {
  .cat-stage[data-place="far_corner"], .cat-stage[data-place="ledge_base"], .cat-stage[data-place="low_ledge"], .cat-stage[data-place="window_ledge"] { --cat-size: 160px; }
  .cat-stage[data-place="under_title"] { --cat-size: 260px; }
  .cat-stage[data-place="near_card"] { --cat-size: 300px; left: 8%; }
  .cat-stage[data-place="beside_user"] { --cat-size: 320px; left: 5%; }
  .cat-stage[data-place="foreground"] { --cat-size: 360px; left: 0; }
  .companion { min-height: 660px; }
  .content-panel { padding-top: 370px; }
  .entrust-form, .active-card, .content-panel > .status-message { width: 37%; }
}
@media (max-width: 760px) {
  .app-shell { padding: 22px 24px; }
  .companion { --room-height: 382px; min-height: 660px; padding: 0; }
  .room { inset: 0; }
  .room-ledge-low { left: 51%; top: 187px; width: 49%; height: 48px; }
  .room-ledge-window { left: 71%; top: 162px; width: 29%; height: 25px; }
  .content-panel { min-height: 650px; padding-top: 424px; }
  .content-panel > h1 { top: 26px; font-size: 1.42rem; letter-spacing: .08em; }
  .content-panel > .eyebrow { top: 67px; font-size: .65rem; letter-spacing: .02em; }
  .entrust-form, .active-card, .content-panel > .status-message, .compact-note { width: 100%; max-width: 400px; margin-inline: auto; }
  .input-row { grid-template-columns: minmax(0, 1fr) auto; }
  .input-row .primary-button { width: auto; }
  .card-actions > * { flex: 0 1 auto; }
  .cat-stage { max-width: none; top: calc(var(--foot) - var(--cat-size) * .625); }
  .cat-stage[data-place="far_corner"] { --cat-size: min(43vw, 180px); --foot: 220px; left: 1%; }
  .cat-stage[data-place="under_title"] { --cat-size: min(56vw, 250px); --foot: 300px; left: 35%; }
  .cat-stage[data-place="near_card"] { --cat-size: min(67vw, 285px); --foot: 392px; left: 27%; }
  .cat-stage[data-place="screen_edge"] { --cat-size: min(63vw, 270px); --foot: 308px; left: -43%; }
  .cat-stage[data-place="foreground"] { --cat-size: min(90vw, 390px); --foot: 400px; left: -10%; }
  .cat-stage[data-place="beside_user"] { --cat-size: min(78vw, 340px); --foot: 400px; left: 4%; }
  .cat-stage[data-place="ledge_base"] { --cat-size: min(39vw, 170px); --foot: 260px; left: 61%; }
  .cat-stage[data-place="low_ledge"] { --cat-size: min(37vw, 160px); --foot: 187px; left: 44%; }
  .cat-stage[data-place="window_ledge"] { --cat-size: min(34vw, 148px); --foot: 162px; left: 65%; }
  .site-footer { margin-top: 0; }
  .site-footer nav { gap: 0 18px; }
}
body.is-compact .content-panel { padding: 0; min-height: 0; }
body.is-compact .content-panel > .eyebrow, body.is-compact .content-panel > h1 { display: none; }
body.is-compact .entrust-form, body.is-compact .active-card, body.is-compact .content-panel > .status-message { width: 100%; }
body.is-compact .cat-stage { position: relative; inset: auto; width: min(80vw, 320px); margin: 0 auto; }
body.is-compact .companion { min-height: 0; }