/* A tactile diorama; only this playground captures dragging, not the whole page. */
.profile-page .personal-companions { margin-bottom:12px; }
.personal-companions button { grid-template-columns:62px 1fr; grid-template-rows:1fr 1fr; column-gap:2px; min-height:92px; padding:8px 9px 8px 3px; text-align:left; justify-items:start; align-content:center; border-radius:20px; }
.personal-companions [data-companion-art] { grid-row:1 / 3; width:62px; align-self:center; }
.personal-companions strong { margin:0; align-self:end; font-size:17px; }
.personal-companions small { margin:3px 0 0; align-self:start; text-align:left; font-size:9px; }
.personal-companions button[aria-pressed="true"]::after { width:15px; height:15px; top:6px; right:6px; font-size:10px; }
.pet-room { height:290px; margin-top:16px; border-color:rgba(194,157,255,.25); background:radial-gradient(ellipse at 50% 76%,#493352 0,#22172e 45%,#120d1e 90%); isolation:isolate; touch-action:none; user-select:none; cursor:crosshair; }
.pet-room::before { inset:51% -20% -5%; opacity:.7; transform:perspective(190px) rotateX(32deg); mask-image:linear-gradient(transparent,#000 30%); }
.pet-room::after { content:""; position:absolute; z-index:-1; width:180px; height:80px; left:calc(50% - 90px); bottom:48px; border:1px solid #ae7fe52b; border-radius:50%; box-shadow:0 0 35px #b773ff22,inset 0 0 25px #b773ff0d; }
.pet-room-hint { position:absolute; top:14px; left:16px; right:16px; color:#c4b2d6; font-size:11px; text-align:center; pointer-events:none; }
.pet-room-glow { position:absolute; width:150px; height:150px; left:calc(50% - 75px); top:45px; background:#c592ff12; border-radius:50%; filter:blur(25px); pointer-events:none; }
.pet-runner { z-index:2; width:216px; height:216px; left:calc(50% - 108px); top:32px; padding:0; border:0; border-radius:50%; background:transparent; cursor:grab; touch-action:none; transform-origin:50% 84%; }
.pet-runner:active { cursor:grabbing; }
.pet-runner:focus-visible { outline:2px solid var(--lime); outline-offset:-20px; }
.pet-runner .rig-shadow { bottom:14%; left:29%; right:22%; height:5%; background:#05000880; }
.pet-room-caption { z-index:4; bottom:14px; padding:0 12px; font-size:11px; line-height:1.4; color:#e0c9ee; pointer-events:none; }
.pet-toy { position:absolute; z-index:3; width:46px; height:46px; left:calc(50% - 23px); top:calc(70% - 25px); pointer-events:none; filter:drop-shadow(0 0 6px #b6f23266); }
.pet-toy::after { content:""; position:absolute; inset:8px; border:1px dashed #b6f23288; border-radius:50%; animation:pet-toy-halo 2s linear infinite; }
.pet-effects { position:absolute; z-index:5; inset:0; pointer-events:none; overflow:hidden; }
.pet-feedback { position:absolute; width:18px; height:18px; margin-left:-9px; opacity:0; color:#ff96c9; animation:pet-affection 1000ms var(--delay) ease-out both; }
.pet-feedback svg { width:100%; height:100%; fill:currentColor; filter:drop-shadow(0 0 6px #f175b980); }
.pet-feedback--paw { color:#c7f47a; }
.pet-interactions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 0; }
.pet-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 8px; border:1px solid #70518c66; border-radius:14px; background:linear-gradient(145deg,#362542,#271b34); color:#f4e6ff; font-size:12px; font-weight:800; box-shadow:inset 0 1px 0 #ffffff0c; transition:border-color 150ms,background 150ms; }
.pet-action svg { width:20px; height:20px; fill:none; stroke:#c3a0e8; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.pet-action[aria-pressed="true"] { border-color:var(--lime); background:#b6f23217; color:var(--lime); }
.pet-action[aria-pressed="true"] svg { stroke:var(--lime); }
.pet-direction-hint { text-align:center; margin:12px 0 -4px; color:var(--muted); font-size:10px; }
.profile-page .direction-controls { margin:10px 0 22px; }
@media(hover:hover) { .pet-action:hover { border-color:#bf8aef; background:#3e294e; } }
@keyframes pet-affection { 0%{opacity:0;transform:translateY(8px) scale(.6)} 20%{opacity:1} 80%{opacity:.9} 100%{opacity:0;transform:translate(var(--drift),-60px) scale(1.2) rotate(12deg)} }
@keyframes pet-toy-halo { to{transform:rotate(360deg)} }
html[data-animation-preview] .pet-feedback { animation:pet-affection 1000ms var(--delay) ease-out both; }
html[data-animation-preview] .pet-toy::after { animation:pet-toy-halo 2s linear infinite; }
@media(prefers-reduced-motion:reduce) { .pet-toy::after,.pet-feedback { animation:none; }.pet-action { transition:none; } }