.pet-page { max-width:1240px; margin:auto; color:var(--ink); }
.home-heading-actions { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }
.pet-settings-section { margin-bottom:30px; }
.pet-settings-section .pet-heading h2 { margin:0 0 8px;font-size:23px; }
.pet-visibility-toggle { display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px; }
.pet-visibility-toggle input { width:18px;height:18px;accent-color:#205e49; }
.settings-page>.settings-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%; }
.settings-page>.settings-list>.settings-card { margin:0; }
.guest-preview-banner { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin-bottom:16px;background:#f3ecd8;color:#53634c;border-radius:10px;font-size:12px; }
.workspace>.guest-preview-banner { margin:10px 24px 0;flex:0 0 auto; }
.guest-preview-banner[hidden] { display:none; }
.pet-companion { position:fixed;right:20px;bottom:48px;width:128px;z-index:1150;touch-action:none;user-select:none; }
.pet-companion[hidden] { display:none; }
.pet-companion>button { display:block;width:100%;padding:0;background:transparent;border:0;color:#315545;cursor:grab;touch-action:none; }
.pet-companion>button:active { cursor:grabbing; }
.pet-companion canvas { display:block;width:100%;height:auto;image-rendering:pixelated;pointer-events:none; }
.pet-companion-label { display:block;width:max-content;max-width:180px;margin:-12px auto 0;background:#faf9f5e8;border:1px solid #e2e6da;padding:3px 7px;border-radius:8px;font-size:11px;opacity:0;transition:opacity .15s; }
.pet-companion:hover .pet-companion-label,.pet-companion:focus-within .pet-companion-label { opacity:1; }
@media(max-width:700px) { .settings-page>.settings-list { grid-template-columns:1fr; }.pet-visibility-toggle { font-size:12px; }.guest-preview-banner { flex-wrap:wrap; }.pet-companion { width:102px;right:8px;bottom:90px; } }
.pet-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px; }
.pet-heading h1 { font-size:30px;margin:6px 0; }
.pet-heading p { color:var(--muted);margin:0; }
.pet-picker { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:24px; }
.pet-picker button { display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 8px 12px;border:1px solid var(--line);border-radius:16px;background:#fffefb;color:var(--ink);cursor:pointer; }
.pet-picker button[aria-pressed=true] { border-color:#49795e;background:#edf3e9;box-shadow:inset 0 0 0 1px #49795e; }
.pet-picker canvas { display:block;width:100%;max-width:116px;height:auto;image-rendering:pixelated; }
.pet-picker small { color:var(--muted);font-size:11px; }
.pet-picker button>span,.pet-room-title>span { min-width:0;overflow-wrap:anywhere; }
.pet-name-form { margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line); }
.pet-name-form>label { display:block;margin-bottom:10px;font-size:14px;font-weight:650; }
.pet-name-controls { display:flex;gap:8px; }
.pet-name-controls input { flex:1;min-width:0;width:0;padding:10px 12px;border:1px solid var(--line-dark);border-radius:9px;background:#fffefb;color:var(--ink);font:inherit;font-size:14px; }
.pet-name-controls input:focus-visible { outline:2px solid #49795e;outline-offset:2px; }
.pet-name-controls .button { flex-shrink:0;white-space:nowrap; }
.pet-name-meta { display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px; }
.pet-name-meta p { margin:0;color:var(--muted);font-size:12px;line-height:1.7; }
.pet-name-reset { flex-shrink:0;padding:3px 0;background:transparent;color:#315b47;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.pet-name-reset:disabled { opacity:.45;cursor:default; }
.pet-name-status { margin:8px 0 0;color:#49664f;font-size:12px;line-height:1.7;overflow-wrap:anywhere; }
.pet-companion-label { max-width:100%;box-sizing:border-box;text-align:center;overflow-wrap:anywhere; }
.pet-companion.has-custom-name .pet-companion-label { opacity:1; }
.pet-workspace { display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);gap:28px;align-items:start; }
.pet-room { background:#f3efe2;border:1px solid #e1ddcf;border-radius:22px;padding:20px; }
.pet-room-title,.pet-room-footer,.pet-xp-line { display:flex;justify-content:space-between;align-items:center;gap:12px; }
.pet-room-title b { background:#e6d8ae;padding:6px 12px;border-radius:20px; }
.pet-main-canvas { display:block;width:100%;max-width:400px;height:auto;margin:auto;image-rendering:pixelated; }
.pet-room-footer { color:#687664;font-size:12px; }
.pet-details { padding:10px 0;min-width:0; }
.pet-details h2,.pet-roadmap h2 { font-size:21px;margin:0 0 24px; }
.pet-xp-line { font-size:13px; }
.pet-progress { display:block;width:100%;height:12px;margin:10px 0 16px;accent-color:#4d7855; }
.pet-next { padding:12px 14px;border-radius:10px;background:#f5edd6;font-size:13px; }
.pet-earning,.pet-save-note,.pet-roadmap>p { color:var(--muted);font-size:12px;line-height:1.8; }
.pet-tabs { display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap; }
.pet-tabs button[aria-pressed=true],.pet-rewards button[aria-pressed=true] { color:#fff;background:#205e49;border-color:#205e49; }
.pet-equipped h3 { font-size:13px;margin:0 0 12px; }
.pet-rewards { display:flex;gap:8px;flex-wrap:wrap; }
.pet-rewards .button { min-height:36px; }
.pet-save-note { margin:24px 0; }
.pet-notice { color:#a04b35;line-height:1.7; }
.pet-adopt { text-align:center;padding:50px 20px;background:#f3efe2;border-radius:20px; }
.pet-adopt h2 { font-size:23px; }.pet-adopt p { color:var(--muted); }
.pet-roadmap { margin:32px 0; }.pet-roadmap h2 { margin-bottom:8px; }
.pet-roadmap-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.pet-roadmap-item { display:grid;grid-template-columns:54px 1fr;gap:5px;padding:12px;background:#f0f0e8;border-radius:9px;font-size:12px; }
.pet-roadmap-item small { grid-column:2;color:#7f6b37;font-size:11px; }.pet-roadmap-item.is-unlocked { background:#e7efdf; }
@media(max-width:1000px) { .pet-workspace { gap:18px;grid-template-columns:1fr 1fr; }.pet-picker { gap:7px; }.pet-roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .pet-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }.pet-workspace { grid-template-columns:1fr; }.pet-heading { align-items:flex-start; }.pet-heading h1 { font-size:26px; }.pet-heading>.button { padding:8px; }.pet-room { padding:16px; }.pet-roadmap-grid { grid-template-columns:1fr; } }

.pet-companion-speech { position:absolute;right:4px;bottom:calc(100% - 14px);width:max-content;max-width:min(224px,calc(100vw - 24px));box-sizing:border-box;padding:12px 15px;border:1px solid #dce5d4;border-radius:15px 15px 5px 15px;background:#fffdf5;color:#3c5e4d;box-shadow:0 6px 22px #244b3414;font-size:12px;line-height:1.75;pointer-events:none;animation:pet-speech-in .22s ease-out; }
.pet-companion-speech[hidden] { display:none; }
.pet-companion.speech-align-left .pet-companion-speech { right:auto;left:4px;border-radius:15px 15px 15px 5px; }
.pet-companion.speech-below .pet-companion-speech { bottom:auto;top:calc(100% - 10px);border-radius:5px 15px 15px 15px; }
@keyframes pet-speech-in { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .pet-companion-speech { animation:none; }.pet-companion-label { transition:none; } }