/* Persistent companions use the same animated pixel sprites as the ocean. */
.pet-play[hidden]{display:none}
.pet-play{position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(#092d4866,transparent 40%)}
.pet-play-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#103349ed;border-bottom:2px solid #88dacf;color:#fff1b5}
.pet-play-heading strong{display:block;font:9px/1.6 'Press Start 2P',monospace}
.pet-play-heading span{display:block;margin-top:3px;font:12px/1.3 ui-monospace,monospace;color:#b8f5e5}
.pet-play-heading button{pointer-events:auto;flex:none;min-width:44px;min-height:44px;border:2px solid #8adacf;background:#174864;color:#fff1b5;cursor:pointer}
.pet-play-field,.pet-play-effects{position:absolute;inset:68px 8px 8px;pointer-events:none}
.pet-play-effects{z-index:9}
.pet-play-bubble{--orb-size:50px;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:56px;height:56px;min-width:56px;min-height:56px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
.pet-play-bubble:active{filter:brightness(1.25)}
.pet-play-bubble:focus-visible{outline:3px dashed #fff3a2;outline-offset:5px}
.habitat-stage[data-playing] .pet-mood-chip{visibility:hidden}
.pet-play-wait{margin:0;color:#a8e4dc;font:11px/1.5 ui-monospace,monospace;min-height:2.8em}
.habitat-view { flex: 1; min-height: 0; overflow: auto; background: #0c263b; overscroll-behavior: contain; }
.habitat-layout { width: min(1260px,100%); margin: auto; padding: 20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.habitat-layout[hidden], .habitat-empty[hidden] { display:none; }
.habitat-empty { max-width: 570px; margin: auto; padding: 35px 25px; text-align: center; }
.empty-shell { color: #f5bcab; font: 70px monospace; margin-bottom: 15px; text-shadow: 4px 4px #345f7d; }
.habitat-empty small { color: #8ad7d1; font-size: 9px; }
.habitat-empty h3 { font: 17px/1.8 'Press Start 2P',monospace; color: #ffe4a3; margin: 16px 0; }
.habitat-empty p { color:#bed9d8; line-height:1.8; font-size:14px; margin:16px 0; }
.habitat-empty .habitat-note { font-size:11px; color:#92b8c4; }
.pet-identity { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:14px; min-height:44px; }
.pet-identity small { color:#8bbfc3; font-size:9px; }
.pet-identity h3 { font:clamp(12px,1.5vw,18px)/1.6 'Press Start 2P',monospace; color:#ffe6ae; overflow-wrap:anywhere; }
.pet-return { flex:none; color:#acdcd6; background:#1b4257; border:2px solid #578c99; padding:9px; font:9px/1.5 monospace; }
.habitat-stage { position:relative; isolation:isolate; height:clamp(230px,45vh,410px); overflow:hidden; background:#174464 url('assets/habitat.svg') center/100% 100% no-repeat; border:3px solid #8ac2bd; box-shadow:5px 5px #06192d; image-rendering:pixelated; }
.habitat-caustics { position:absolute; inset:8% 5% 16%; background:repeating-linear-gradient(175deg,transparent 0 57px,#a2ffdd10 57px 60px,transparent 60px 102px); animation:habitat-water 9s steps(12) infinite alternate; pointer-events:none; }
.habitat-night { position:absolute; z-index:3; inset:0; pointer-events:none; background:#061026; opacity:0; transition:opacity .5s; }
[data-mood="sleeping"] .habitat-night { opacity:.57; }
.pet-mood-chip { position:absolute; top:17px; left:17px; z-index:4; color:#d8f8de; background:#103349ce; border-bottom:2px solid #70a6a4; padding:7px 10px; font:8px/1.6 'Press Start 2P',monospace; max-width:85%; }
[data-mood="sick"] .pet-mood-chip { color:#ffde93; }
.pet-position { position:absolute; left:50%; top:52%; width:clamp(115px,16vw,190px); height:clamp(115px,16vw,190px); transform:translate(-50%,-50%); }
.pet-touch { position:relative; width:100%; height:100%; padding:0; background:none; border:0; cursor:pointer; animation:pet-bob 3.2s steps(10) infinite alternate; }
.pet-touch canvas { width:100%; height:100%; image-rendering:pixelated; filter:var(--pet-color,hue-rotate(0deg)); }
[data-kind="whale"] .pet-position { width:clamp(160px,22vw,260px); height:clamp(160px,22vw,260px); }
[data-kind="dolphin"] .pet-position,[data-kind="shark"] .pet-position { width:clamp(150px,20vw,225px); height:clamp(150px,20vw,225px); }
[data-kind="plant"] .pet-position { top:auto; bottom:5%; transform:translateX(-50%); width:125px; height:125px; }
[data-kind="plant"] .pet-touch { animation:none; }
[data-mood="sad"] .pet-touch canvas { filter:var(--pet-color,hue-rotate(0deg)) saturate(.45) brightness(.8); }
[data-mood="sick"] .pet-touch canvas { filter:var(--pet-color,hue-rotate(0deg)) saturate(.3) sepia(.35); }
[data-mood="sick"] .pet-touch { animation:pet-shiver 2s steps(2) infinite; }
[data-mood="sleeping"] .pet-touch { animation:none; }
.pet-emotion { position:absolute; top:10%; right:0; color:#fff1a5; font:25px/1 monospace; text-shadow:3px 3px #103d51; pointer-events:none; }
.pet-reaction { position:absolute; top:-10%; left:45%; color:#ffaac3; font:30px/1 monospace; text-shadow:3px 3px #7b4677; pointer-events:none; }
.pet-sleep-z { position:absolute; right:24%; top:32%; z-index:5; color:#cef5ef; font:16px/1.6 'Press Start 2P',monospace; display:none; }
[data-mood="sleeping"] .pet-sleep-z { display:block; animation:pet-heart 3s steps(8) infinite; }
.pet-waste { position:absolute; inset:0; pointer-events:none; }
.pet-poop { position:absolute; left:var(--waste-x); bottom:9%; width:40px; height:44px; padding:6px; background:none; border:0; pointer-events:auto; cursor:pointer; }
.pet-poop svg { width:100%; height:100%; filter:drop-shadow(2px 3px #062534); }
.pet-advice { min-height:38px; padding:12px 6px 0; color:#a7d7da; font-size:12px; line-height:1.6; }
.habitat-care-panel { display:grid; gap:14px; }
.pet-needs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.pet-needs label:last-child { grid-column:1/-1; }
.pet-needs label>span { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#bdded9; margin-bottom:4px; }
.pet-needs b { color:#f7e5b5; }
.pet-needs meter { display:block; appearance:none; width:100%; height:10px; border:1px solid #689aa7; background:#08223b; border-radius:0; }
.pet-needs meter::-webkit-meter-bar { border:0; border-radius:0; background:#08223b; }
.pet-needs meter::-webkit-meter-optimum-value { background:repeating-linear-gradient(90deg,#8cdec2 0 9px,#5facab 9px 11px); }
.pet-needs meter::-webkit-meter-suboptimum-value { background:#e9bd79; }
.pet-needs meter::-webkit-meter-even-less-good-value { background:#e78d9c; }
.pet-needs meter::-moz-meter-bar { background:#8cdec2; }
.pet-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.pet-actions button { display:grid; justify-items:center; gap:8px; padding:10px 3px; border:2px solid #8dcfc3; color:#ffdf9d; background:#24566a; box-shadow:3px 3px #071d32; font:9px/1.4 monospace; min-height:63px; }
.pet-actions svg { width:23px; height:23px; }
.pet-actions button[data-care="play"] { color:#f5aebf; }
.pet-actions button[data-care="clean"] { color:#a9e8df; }
.pet-actions button:hover:not(:disabled) { background:#367b87; transform:translateY(-2px); }
.pet-actions button:disabled { opacity:.38; }
.pet-message { min-height:34px; color:#f9df9e; font-size:12px; line-height:1.5; padding:0 2px; }
.pet-bond { padding:13px; border:2px solid #648b9a; background:#19394f; }
.pet-bond>div:first-child { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#96cfc6; font:7px/1.8 'Press Start 2P',monospace; }
.pet-bond strong { color:#f2c5bd; }
.pet-bond #pet-bond-number { font-size:12px; color:#ffe6a4; }
.pet-bond progress { appearance:none; display:block; width:100%; height:7px; margin:9px 0; border:0; background:#09263d; }
.pet-bond progress::-webkit-progress-bar { background:#09263d; }
.pet-bond progress::-webkit-progress-value { background:#efa7bc; }
.pet-bond progress::-moz-progress-bar { background:#efa7bc; }
.pet-bond>small { font-size:10px; line-height:1.6; color:#bfd9d5; display:block; }
.pet-colors { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:12px; }
.pet-colors button { border:2px solid #385d73; background:#102c45; padding:7px 3px; color:#c8e3df; display:grid; justify-items:center; gap:5px; font-size:9px; }
.pet-colors button[aria-pressed="true"] { border-color:#f9dc93; color:#ffe3a2; }
.pet-colors i { display:block; width:15px; height:15px; background:var(--swatch); box-shadow:inset -3px -3px #102b4c44; }
.pet-colors small { font-size:8px; }
.pet-details { color:#a7cbd1; font-size:11px; line-height:1.7; }
.pet-details summary { cursor:pointer; color:#b6ddd6; }
.pet-details p { margin:10px 0; }
.pet-name-form { margin:10px 0; }
.pet-name-form label { display:block; margin-bottom:5px; }
.pet-name-form>div { display:flex; gap:6px; }
.pet-name-form input { min-width:0; flex:1; background:#0b2239; border:2px solid #6a9eaa; color:#ffebbe; padding:7px; font:16px monospace; }
.pet-name-form button { border:2px solid #8ccebe; background:#28616c; color:#ffe6a3; padding:7px; }
.museum-card.is-owned .museum-care-button { color:#ffe5a3; background:#285b69; border-color:#8bcdbe; }
[data-action="play"] .pet-touch { animation:pet-play .6s steps(8) 3; }
[data-action="play"] .pet-reaction,[data-action="medicine"] .pet-reaction { animation:pet-heart 1.8s steps(10) both; }
[data-action="feed"] .pet-touch { animation:pet-eat .25s steps(2) 6; }
[data-action="feed"] .pet-reaction { color:#e4cb83; animation:pet-food 1.4s steps(10) both; }
[data-action="clean"] .habitat-caustics { background:repeating-linear-gradient(175deg,transparent 0 28px,#abffe966 28px 32px,transparent 32px 70px); animation:habitat-water .4s steps(5) 4; }
[data-action="medicine"] .pet-touch { animation:pet-heal .6s steps(4) 3; }
@keyframes habitat-water { to { transform:translateY(12px); } }
@keyframes pet-bob { to { transform:translateY(-8px) rotate(3deg); } }
@keyframes pet-breathe { 50% { transform:scaleY(.94); } }
@keyframes pet-shiver { 8%,16% { transform:translateX(-2px); } 12%,20% { transform:translateX(2px); } }
@keyframes pet-play { 25% { transform:translateY(-20px) rotate(-8deg); } 70% { transform:translateY(-8px) rotate(9deg); } }
@keyframes pet-eat { 50% { transform:scale(1.07,.96); } }
@keyframes pet-heart { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-35px); } }
@keyframes pet-food { from { transform:translateY(-20px); } to { transform:translateY(65px) scale(.3); opacity:0; } }
@keyframes pet-heal { 50% { filter:brightness(1.6); } }
@media (max-width:650px) {
 .commerce-tabs { gap:4px; padding:6px; }
 .commerce-tabs button { padding:8px 7px; font-size:6px; }
 .habitat-layout { grid-template-columns:1fr; padding:10px 12px 16px; gap:8px; }
 .pet-identity { margin-bottom:8px; min-height:36px; }
 .pet-identity small { font-size:8px; }
 .pet-identity h3 { font-size:11px; }
 .pet-return { font-size:8px; padding:7px; }
 .habitat-stage { height:clamp(170px,25dvh,230px); }
 .pet-position { width:115px; height:115px; }
 .pet-mood-chip { font-size:6px; top:10px; left:10px; padding:5px 7px; }
 .pet-advice { font-size:10px; min-height:28px; padding-top:7px; }
 .habitat-care-panel { gap:9px; }
 .pet-needs { gap:6px 12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .pet-needs label:last-child { grid-column:span 2; }
 .pet-needs label>span { font-size:9px; }
 .pet-needs meter { height:8px; }
 .pet-actions { gap:6px; }
 .pet-actions button { font-size:8px; padding:7px 2px; gap:4px; min-height:52px; }
 .pet-actions svg { width:19px; height:19px; }
 .pet-message { min-height:28px; font-size:10px; }
 .pet-bond { padding:9px; }
 .pet-bond>div:first-child { font-size:6px; }
 .pet-bond progress { margin:6px 0; }
 .pet-bond>small { font-size:9px; }
 .pet-colors { margin-top:8px; }
 .pet-colors button { grid-template-columns:14px 1fr; gap:4px; padding:5px; font-size:8px; }
 .pet-colors small { grid-column:2; }
 .pet-colors i { grid-row:span 2; align-self:center; width:12px; height:12px; }
 .pet-details { font-size:10px; }
 .pet-poop { width:34px; height:40px; bottom:8%; }
 [data-kind="plant"] .pet-position { width:85px; height:85px; bottom:5%; }
}
@media (max-height:500px) and (orientation:landscape) {
 .habitat-layout { grid-template-columns:1fr 1.15fr; gap:14px; padding:8px 14px; }
 .habitat-stage { height:190px; }
 .pet-identity { min-height:28px; margin-bottom:6px; }
 .pet-identity h3 { font-size:11px; }
 .pet-position { width:125px; height:125px; }
 .pet-mood-chip { font-size:6px; padding:4px; }
 .habitat-care-panel { gap:8px; }
 .pet-needs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px 8px; }
 .pet-needs label:last-child { grid-column:span 2; }
 .pet-needs label>span { font-size:9px; }
 .pet-actions button { min-height:49px; padding:5px; gap:4px; }
 .pet-actions svg { width:18px; height:18px; }
 .pet-message { min-height:25px; font-size:10px; }
 .pet-bond { padding:8px; }
}

.habitat-stage[data-kind="fairy"] { background-image:url('assets/habitat-garden.svg'); }
@media (max-height:500px) and (orientation:landscape) {
 .pet-colors { margin-top:6px; }
 .pet-colors button { grid-template-columns:12px 1fr; gap:2px; padding:4px; font-size:8px; }
 .pet-colors i { grid-row:span 2; align-self:center; width:11px; height:11px; }
 .pet-colors small { grid-column:2; font-size:7px; }
 .pet-bond progress { margin:5px 0; }
 .pet-bond>small { font-size:9px; }
}