.pet-dock-avatar { display:grid; place-items:center; width:88px; height:88px; padding:0; border:0; background:transparent; color:var(--baton-text); cursor:pointer; border-radius:50%; }
.pet-dock-avatar svg { display:block; width:96px; height:86px; filter:drop-shadow(0 3px 1px rgb(0 0 0 / .08)); }
.pet-dock-avatar:hover svg { transform:translateY(-2px); }
.pet-dock-avatar:focus-visible { outline:2px solid var(--baton-action); outline-offset:3px; }
.pet-mobile-button { width:100%; min-height:44px; border:1px solid var(--baton-border); border-radius:8px; padding:10px 12px; color:var(--baton-text); background:var(--baton-canvas); font:14px Arial,sans-serif; cursor:pointer; }
.pet-dialog { box-sizing:border-box; width:min(520px,calc(100% - 28px)); max-width:100vw; max-height:calc(100dvh - 28px); padding:18px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--baton-border); border-radius:16px; background:var(--baton-panel); color:var(--baton-text); box-shadow:var(--baton-shadow); }
.pet-dialog::backdrop { background:rgb(0 0 0 / .5); }
.pet-dialog-top { position:sticky; top:-18px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-18px -18px 12px; padding:8px 12px 8px 18px; border-bottom:1px solid var(--baton-border); background:var(--baton-panel); }
.pet-dialog-top h2 { margin:0; font:600 19px/1.2 Arial,sans-serif; letter-spacing:-.02em; }
.pet-dialog button { box-sizing:border-box; min-height:44px; border:1px solid var(--baton-border); border-radius:8px; padding:9px 12px; background:var(--baton-canvas); color:var(--baton-text); font:13px/1.3 Arial,sans-serif; cursor:pointer; }
.pet-dialog button:hover { border-color:var(--baton-action); }
.pet-dialog button:disabled { cursor:default; opacity:.5; }
.pet-dialog [data-pet-close] { width:44px; padding:0; border:0; background:transparent; font-size:24px; }
.pet-dialog .pet-primary { color:var(--baton-panel); background:var(--baton-action); border-color:var(--baton-action); }
.pet-dialog .pet-secondary { margin-top:12px; }
.pet-dialog-hero { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:12px; margin:8px 0 16px; }
.pet-portrait { width:112px; height:112px; display:grid; place-items:center; background:var(--baton-canvas); border:1px solid var(--baton-border); border-radius:24px; }
.pet-portrait svg { width:118px; height:107px; }
[data-pet-name] { display:block; overflow-wrap:anywhere; font:600 21px/1.2 Arial,sans-serif; }
[data-pet-mode] { margin:8px 0; color:var(--baton-muted); font-size:12px; line-height:1.4; }
[data-pet-progress] { display:grid; gap:7px; }
.pet-level,.pet-guest-note { color:var(--baton-muted); font:11px/1.4 ui-monospace,monospace; }
.pet-dialog progress { display:block; box-sizing:border-box; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--baton-action); background:var(--baton-canvas); }
.pet-dialog progress::-webkit-progress-bar { background:var(--baton-canvas); }
.pet-dialog progress::-webkit-progress-value { background:var(--baton-action); }
.pet-dialog progress::-moz-progress-bar { background:var(--baton-action); }
.pet-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:12px; }
.pet-tabs button[aria-selected="true"] { background:var(--baton-action); border-color:var(--baton-action); color:var(--baton-panel); }
.pet-status { color:var(--baton-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.pet-status:empty { display:none; }
.pet-panel { min-width:0; }
.pet-profile-form,.pet-skills-form { display:grid; gap:12px; }
.pet-dialog label { display:grid; gap:6px; color:var(--baton-muted); font-size:12px; line-height:1.4; }
.pet-dialog input,.pet-dialog select { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:9px 11px; border:1px solid var(--baton-border); border-radius:8px; color:var(--baton-text); background:var(--baton-canvas); font:16px Arial,sans-serif; }
.pet-dialog h3 { margin:0 0 8px; color:var(--baton-text); font-size:15px; }
.pet-small { margin:8px 0; color:var(--baton-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.pet-rewards,.pet-human-practice { margin-top:20px; padding-top:16px; border-top:1px solid var(--baton-border); }
.pet-receipt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
.pet-receipt code { color:var(--baton-muted); font-size:11px; }
.pet-ledger summary { display:flex; align-items:center; min-height:44px; color:var(--baton-text); font-size:13px; cursor:pointer; }
.pet-skill-card { padding:12px; border:1px solid var(--baton-border); border-radius:10px; }
.pet-battle-panel { display:grid; }
.pet-arena { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:8px; margin:12px 0; padding:8px; border:1px solid var(--baton-border); border-radius:12px; background:var(--baton-canvas); }
.pet-fighter { display:grid; min-width:0; justify-items:center; gap:7px; text-align:center; }
.pet-fighter-art { display:grid; place-items:center; width:96px; height:88px; }
.pet-fighter-art svg { width:96px; height:88px; }
.pet-opponent-mark { color:var(--baton-action); font-size:48px; }
.pet-fighter strong { max-width:100%; overflow-wrap:anywhere; font-size:12px; }
.pet-fighter progress { width:100%; background:var(--baton-panel); }
.pet-fighter progress::-webkit-progress-bar { background:var(--baton-panel); }
.pet-hp { color:var(--baton-muted); font:10px/1.4 ui-monospace,monospace; }
.pet-versus { color:var(--baton-muted); font:11px ui-monospace,monospace; }
.pet-battle-skills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.pet-battle-skills button { min-width:0; padding:9px 6px; font-size:12px; overflow-wrap:anywhere; }
.pet-battle-result { margin:12px 0; color:var(--baton-action); font-size:14px; font-weight:600; }
.pet-battle-log { margin:12px 0 0; }
.pet-battle-log p { margin:3px 0; color:var(--baton-muted); font:11px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
.pet-staking-note { margin:16px 0 0; color:var(--baton-muted); font-size:11px; line-height:1.5; }
.pet-portrait[data-action="strike"] svg,.pet-fighter-art[data-action="strike"] svg { animation:pet-strike 320ms ease-out; }
.pet-portrait[data-action="guard"],.pet-fighter-art[data-action="guard"] { animation:pet-guard 320ms ease-out; }
.pet-portrait[data-action="pulse"] svg,.pet-fighter-art[data-action="pulse"] svg { animation:pet-pulse 360ms ease-out; }
.pet-portrait[data-action="hurt"] svg,.pet-fighter-art[data-action="hurt"] svg { animation:pet-hurt 250ms ease-out; }
@keyframes pet-strike { 0%,100%{transform:translateX(0) rotate(0)} 40%{transform:translateX(7px) rotate(-5deg)} 65%{transform:translateX(-2px)} }
@keyframes pet-guard { 0%,100%{box-shadow:0 0 0 0 transparent} 40%{box-shadow:0 0 0 5px color-mix(in srgb,var(--baton-action) 35%,transparent)} }
@keyframes pet-pulse { 0%,100%{transform:scale(1)} 45%{transform:scale(1.055)} }
@keyframes pet-hurt { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-3px)} 70%{transform:translateX(3px)} }
@media(max-width:700px) {
  .pet-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; padding:16px 16px calc(20px + env(safe-area-inset-bottom)); border:0; border-radius:0; }
  .pet-dialog-top { top:-16px; margin:-16px -16px 12px; padding-left:16px; }
  .pet-dialog-hero { grid-template-columns:96px minmax(0,1fr); }
  .pet-portrait { width:96px; height:100px; }
  .pet-portrait svg { width:106px; height:96px; }
  [data-pet-name] { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { .pet-portrait,.pet-portrait svg,.pet-fighter-art,.pet-fighter-art svg,.pet-dock-avatar svg { animation:none!important; transform:none!important; } }

.pet-credit-balance { color:var(--baton-action); font:600 11px/1.4 ui-monospace,monospace; }
.pet-credit-box { margin:12px 0; padding:12px; border:1px solid var(--baton-border); border-radius:10px; background:var(--baton-canvas); }
.pet-credit-box > strong { font-size:14px; }
.pet-credit-risk { margin:8px 0 12px; color:var(--baton-muted); font-size:12px; line-height:1.5; }

/* The inherited Range skin uses important heading colors. Keep every pet heading/label semantic in both themes. */
html[data-theme] .pet-dialog :is(h2,h3,strong,label) { color:var(--baton-text)!important; }
html[data-theme] .pet-dialog :is(.pet-small,.pet-status,.pet-hp,.pet-credit-risk,[data-pet-mode],.pet-level,.pet-guest-note) { color:var(--baton-muted)!important; }
html[data-theme] .pet-dialog .pet-credit-balance { color:var(--baton-action)!important; }
html[data-theme] .pet-dialog .pet-tabs button[aria-selected="true"],html[data-theme] .pet-dialog button.pet-primary { color:var(--baton-panel)!important; background:var(--baton-action)!important; border-color:var(--baton-action)!important; }
html[data-theme] .pet-dock-avatar { background:transparent!important; border:0!important; box-shadow:none!important; }