/* Thirsty Joe: his stage on the left, how he is feeling beside it. */
html,body.pets-page{height:100%}
body.pets-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden;text-align:left}
body.pets-page header{flex:none}
.pets{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,30vw,440px);gap:clamp(12px,1.6vw,22px);padding:clamp(12px,1.8vw,22px) clamp(12px,3.4vw,44px) clamp(14px,2vw,24px)}
.pets-stage{min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px}
.pets-head{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pets-head h1{margin:0;font:800 clamp(1.6rem,3vw,2.5rem)/1 Manrope,sans-serif;letter-spacing:-.04em}
.pets-head h1 span{background:linear-gradient(90deg,#ff5fb0,#5fb4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pets-tag{margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--dim);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pets-do{margin-left:auto;display:flex;gap:8px}
.pets-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;font-size:.9375rem;cursor:pointer}
.pets-btn:hover{border-color:#5fb4ff}.pets-btn:active{transform:scale(.96)}
.pets-btn b{min-width:26px;padding:2px 8px;border-radius:999px;background:#5fb4ff;color:#07121d;font-size:.8125rem;text-align:center}
.pets-floor{position:relative;flex:1;min-height:0;border-radius:clamp(22px,3vw,40px);background:radial-gradient(120% 90% at 50% 40%,#fff 0,#f4f6f9 70%,#e9edf2 100%);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;box-shadow:0 18px 60px #0007}
.pets-floor canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pets-hint{position:absolute;left:50%;bottom:clamp(12px,2.4vh,22px);translate:-50% 0;padding:8px 14px;border-radius:999px;background:#0e1218e6;color:#dbe4f0;font-size:.8125rem;font-weight:600;pointer-events:none;white-space:nowrap;transition:opacity .6s}
.pets-hint.is-off{opacity:0}
.pets-side{min-height:0;display:flex;flex-direction:column;gap:18px;padding:clamp(16px,1.8vw,24px);border-radius:clamp(20px,2vw,28px);background:var(--panel);border:1px solid var(--line);overflow-y:auto;scrollbar-width:thin}
.pets-who{display:flex;flex-direction:column;gap:6px}
.pets-who small{color:var(--dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.pets-who b{font:800 1.5rem/1.1 Manrope,sans-serif;letter-spacing:-.03em}
.pets-who p{margin:4px 0 0;color:#c9d3e0;font-size:1.0625rem;line-height:1.45}
.pets-chips{display:flex;flex-wrap:wrap;gap:8px}
.pets-chips span{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:.8125rem;font-weight:700}
.meter{display:flex;flex-direction:column;gap:8px}
.meter div{display:flex;align-items:baseline;justify-content:space-between}
.meter b{font-size:.9375rem}.meter em{font-style:normal;color:var(--dim);font-size:.8125rem}
.meter i{display:block;height:8px;border-radius:999px;background:#1a212c;overflow:hidden}
.meter i u{display:block;height:100%;width:0;border-radius:999px;transition:width .6s}
.meter.att u{background:linear-gradient(90deg,#ff7ab8,#f2c94c)}
.meter.thr u{background:linear-gradient(90deg,#5aa9ff,#5fd3a6)}
.says{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:#0a0e14;border:1px solid var(--line)}
.says h2{margin:0;color:var(--dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.says p{margin:0;font-size:1rem;line-height:1.5}
.says p.old{color:#8a97aa;font-size:.9375rem}
.talk{display:flex;flex-direction:column;gap:8px}
.talk label{color:var(--dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.talk div{display:flex;gap:8px}
.talk input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#0a0e14;color:var(--ink);font:inherit;font-size:1rem}
.talk input:focus{outline:2px solid #5fb4ff;outline-offset:1px}
.talk button{height:44px}.talk button:disabled{opacity:.5;cursor:default}
.talk p{margin:0;color:#c9d3e0;font-size:.9375rem}.talk a{color:#5fb4ff}
@media (max-width:860px){body.pets-page{height:auto;overflow:auto}.pets{grid-template-columns:1fr}.pets-floor{min-height:58vh}.pets-do{margin-left:0}}