/* Companion redesign: keep pixel art crisp while giving it a proper home in the grid. */
#pet-side-host{display:none!important}
#remote-companions{display:block!important;position:relative;inset:auto;top:auto;right:auto;left:auto;z-index:1;width:auto;max-width:none;transform:none;margin:0;padding:15px;border:1px solid #2b3440;border-radius:20px;background:linear-gradient(155deg,#151b24,#0c1016);box-shadow:0 18px 44px #0004;backdrop-filter:none;color:#f3f6fb}
#remote-companions[hidden]{display:none!important}
.remote-head{grid-template-columns:34px minmax(0,1fr) 34px 34px;gap:6px;padding-bottom:12px;border-bottom:1px solid #29313c}
.remote-head>div{min-width:0;align-items:flex-start;text-align:left;gap:4px}
.remote-head .profile-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:transparent;color:#f4f6fa;font-size:1rem;font-weight:650;text-align:left}
.remote-head small{font-size:.67rem;color:#a7b2c1}
.remote-head>button:not(.profile-name){height:32px;padding:0;border:1px solid #303b49;border-radius:10px;background:#1b222c;color:#dce4ef;font-size:1rem}
.remote-pet{flex-direction:column;align-items:center;gap:8px;margin-top:12px;padding:10px 8px 2px}
.remote-visual{width:min(100%,206px);height:176px;flex:0 0 176px;filter:drop-shadow(0 12px 18px #0007)}
.remote-pet>div{width:100%;align-items:center;text-align:center;gap:5px}
.remote-pet strong{font-size:1rem;font-weight:650}
.remote-pet span{font-size:.72rem;color:#adb9c9;line-height:1.4}
.remote-pet .health-name{color:#f4f6fa}
.remote-pet .health-name-critical{color:#ff747b}
.remote-hp{height:7px;margin:9px 2px 0;background:#262d38;border-radius:999px}
.remote-hp i{background:linear-gradient(90deg,#77d7a5,#b5e38d);border-radius:999px;transition:width .3s}
.remote-social{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:11px}
.remote-social button{min-height:40px;padding:7px 4px;border:1px solid #303b49;border-radius:10px;background:#1a212a;color:#e2e8f0;font-size:.63rem;line-height:1.25;white-space:normal}
.remote-social button:hover{background:#232e39;border-color:#536477;transform:translateY(-1px)}
.remote-action{font-size:.66rem;color:#b4c0cf}
.remote-empty-head{padding:2px 2px 12px;border-bottom:1px solid #29313c}
.remote-empty-head strong{font-size:.96rem}
.remote-empty-head small{font-size:.65rem;color:#9daaba}
.remote-empty{min-height:210px;padding:20px 10px 12px;gap:9px}
.remote-empty-icon{width:48px;height:48px;border-radius:15px;color:#9dddc3;font-size:1.35rem;background:#9dddc30d;border-color:#9dddc329}
.remote-empty strong{font-size:.82rem}.remote-empty small{max-width:230px;font-size:.7rem;line-height:1.55;color:#a6b1c0}
.remote-no-pet{padding:25px 8px 15px;font-size:.75rem;color:#aab5c3}
.remote-collapsed{width:100%;padding:12px;border:1px solid #303b49;border-radius:12px;background:#1a212a;color:#e7edf6;font-size:.78rem}
.remote-trades{margin-top:12px;padding-top:11px;border-color:#29313c;gap:7px}
.remote-trades>b{font-size:.69rem;color:#c4cfdd}
.remote-trades span{font-size:.66rem;color:#e0e7ef}
.remote-trades button{min-height:30px;border-radius:8px;font-size:.65rem}
#pet-bottom-host{min-height:0;margin-top:22px;padding:8px;border:1px solid #252d37;border-radius:20px;background:linear-gradient(145deg,#131922,#0b0f14)}
#pet-bottom-host #pet-lane,#pet-bottom-host #pet-lane.side-mode,#pet-bottom-host #pet-lane.bottom-mode{position:relative;inset:auto;left:auto;top:auto;width:100%;min-height:98px;margin:0;padding:4px 10px;transform:none;flex-direction:row;text-align:left;align-items:center;gap:12px;background:transparent}
#pet-bottom-host #pet-lane.side-mode #pet-actor{width:78px;height:78px}
#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:96px;height:96px}
#pet-bottom-host #pet-caption{max-width:none;flex:1;color:#b9c3d0;font-size:.75rem}
#pet-bottom-host #pet-caption strong{font-size:.9rem;color:#f4f6fa}
#pet-bottom-host #pet-caption small{justify-content:flex-start;color:#aab5c3;font-size:.68rem}
#pet-bottom-host .pet-lane-actions{margin-left:auto!important;align-self:center!important;flex-wrap:wrap;justify-content:flex-end}
#pet-dock-toggle,#pet-toggle,#pet-admin-toggle{padding:8px 10px;border:1px solid #303a47;border-radius:10px;background:#171e27;color:#e2e8f0;font-size:.68rem}
#pet-dock-toggle:hover,#pet-toggle:hover,#pet-admin-toggle:hover{background:#222d38;border-color:#526477}
#pet-panel,#pet-admin-panel,#social-dialog,#battle-setup-dialog,#battle-live-dialog{width:min(780px,calc(100vw - 24px));max-height:min(90dvh,900px);padding:clamp(17px,3vw,28px);border-radius:22px}
#pet-panel .dialog-head,#pet-admin-panel .dialog-head,#social-dialog .dialog-head,#battle-setup-dialog .dialog-head,#battle-live-dialog .dialog-head{position:sticky;top:-1px;z-index:4;margin:-2px 0 16px;padding:2px 0 12px;background:linear-gradient(#171c25 86%,transparent);border-bottom:1px solid #29313c}
.pet-tabs{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:17px}
.pet-tabs button,.pet-tabs .pet-tab-link{display:flex;min-width:0;min-height:61px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border:1px solid #2c3541;border-radius:13px;background:#111720;color:#bac5d3;font-size:.67rem;text-decoration:none}
.pet-tabs button img,.pet-tabs .pet-tab-link img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;opacity:.86}
.pet-tabs button.active{border-color:#6b9c89;background:linear-gradient(145deg,#244034,#172920);color:#d8f1e4;box-shadow:inset 0 0 0 1px #9dddc319}
#pet-body h3{margin:18px 0 9px;color:#d8e0ea;font-size:.82rem;letter-spacing:.01em}
.pet-stage{width:190px;height:170px;margin:0 auto 4px}
.pet-stage .pet-visual,.pet-stage .pet-portrait{width:190px;height:170px}
.pet-identity{margin:0 0 14px}.pet-identity strong{font-size:1rem}.pet-identity span{font-size:.72rem;color:#a8b4c3}
.pet-core-stats>div,.pet-bars label,.setting-card,.pet-box-card,.shop-item{border-color:#2b3440;background:#111720;border-radius:14px}
.pet-wallet{border-radius:15px;background:linear-gradient(100deg,#e6bb6813,#e6bb6805);border-color:#e6bb6828}
.pet-food,.pet-shop-grid{gap:9px}.pet-food button,.pet-shop-grid button{min-height:106px;border:1px solid #2b3440;border-radius:13px;background:#111720}
.pet-food button:hover,.pet-shop-grid button:hover,.pet-box-card:hover{border-color:#536c80;background:#18212b}
@media(max-width:840px){#dashboard-companion-slot{position:static}.remote-visual{width:220px;height:185px;flex-basis:185px}.pet-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#remote-companions{padding:12px;border-radius:16px}.remote-pet{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;padding:10px 0 2px}.remote-visual{width:112px;height:112px;flex-basis:112px}.remote-pet>div{align-items:flex-start;text-align:left}.remote-social button{min-height:42px;font-size:.61rem}#pet-bottom-host{margin-top:15px;padding:5px;border-radius:15px}#pet-bottom-host #pet-lane,#pet-bottom-host #pet-lane.side-mode,#pet-bottom-host #pet-lane.bottom-mode{gap:8px;padding:3px}#pet-bottom-host #pet-lane.side-mode #pet-actor{width:65px;height:65px}#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:72px;height:72px}#pet-bottom-host #pet-caption{font-size:.66rem}#pet-bottom-host #pet-caption strong{font-size:.78rem}#pet-bottom-host #pet-caption small{font-size:.59rem}.pet-lane-actions{gap:4px!important}#pet-dock-toggle,#pet-toggle,#pet-admin-toggle{padding:7px 8px;font-size:.6rem}.pet-tabs{gap:5px}.pet-tabs button{min-height:56px;font-size:.62rem}.pet-stage,.pet-stage .pet-visual,.pet-stage .pet-portrait{width:148px;height:140px}}
@media(prefers-reduced-motion:reduce){#dashboard-companion-slot *,#pet-bottom-host *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Compact, persistent companion rail with a full-size own Pokémon option. */
#dashboard-companion-slot{display:grid;align-content:start;gap:13px}
#remote-companions{margin:0;padding:13px;border-radius:17px}
.remote-pet{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;margin-top:8px;padding:8px 2px 0}
.remote-visual{width:104px;height:104px;flex:none;filter:drop-shadow(0 7px 11px #0006)}
.remote-pet>div{align-items:flex-start;text-align:left;gap:4px}
.remote-pet strong{font-size:.9rem}.remote-pet span{font-size:.67rem}
.remote-hp{margin-top:8px}
#pet-bottom-host{margin:0;padding:11px;border-radius:17px;background:linear-gradient(150deg,#141b23,#0d1117)}
#pet-bottom-host #pet-lane,#pet-bottom-host #pet-lane.side-mode,#pet-bottom-host #pet-lane.bottom-mode{min-height:0;gap:8px;padding:0;align-items:center;text-align:center}
#pet-bottom-host #pet-lane.bottom-mode{min-height:245px;flex-direction:column;justify-content:center;padding:8px 5px 3px}
#pet-bottom-host #pet-lane.side-mode{min-height:84px;flex-direction:row;text-align:left;padding:3px}
#pet-bottom-host #pet-actor{display:block;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#pet-bottom-host #pet-actor:hover{transform:translateY(-3px) scale(1.025)}
#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:164px;height:154px}
#pet-bottom-host #pet-lane.side-mode #pet-actor{width:69px;height:69px}
#pet-bottom-host #pet-caption{flex:0 1 auto;max-width:100%;text-align:center;align-items:center;font-size:.71rem;line-height:1.35}
#pet-bottom-host #pet-lane.side-mode #pet-caption{flex:1;text-align:left;align-items:flex-start}
#pet-bottom-host #pet-caption strong{font-size:.88rem}
#pet-bottom-host #pet-caption small{justify-content:center;font-size:.64rem}
#pet-bottom-host #pet-lane.side-mode #pet-caption small{justify-content:flex-start}
#pet-bottom-host .pet-lane-actions{margin:3px 0 0!important;align-self:center!important;justify-content:center;gap:6px}
#pet-bottom-host #pet-lane.side-mode .pet-lane-actions{margin-left:0!important;align-self:center!important}
#pet-dock-toggle,#pet-toggle,#pet-admin-toggle{min-height:34px;padding:7px 9px;font-size:.63rem}
#pet-panel[open],#pet-admin-panel[open],#social-dialog[open],#battle-setup-dialog[open],#battle-live-dialog[open]{animation:companion-dialog-in .24s cubic-bezier(.2,.8,.2,1) both}
#pet-panel::backdrop,#pet-admin-panel::backdrop,#social-dialog::backdrop,#battle-setup-dialog::backdrop,#battle-live-dialog::backdrop{animation:companion-backdrop-in .2s ease both}
#pet-body>*{animation:companion-content-in .28s cubic-bezier(.2,.75,.25,1) both}
#pet-body> :nth-child(2){animation-delay:.035s}#pet-body> :nth-child(3){animation-delay:.07s}
.pet-tabs button,.pet-tabs .pet-tab-link{transition:transform .18s,border-color .18s,background .18s,color .18s,box-shadow .18s}
.pet-tabs button:hover,.pet-tabs .pet-tab-link:hover{transform:translateY(-2px);border-color:#658575}
.pet-tabs button.active{transform:translateY(-1px)}
.pet-food button,.pet-shop-grid button,.pet-box-card,.setting-card{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.pet-food button:hover,.pet-shop-grid button:hover,.pet-box-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0003}
@keyframes companion-dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes companion-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes companion-content-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:840px){#dashboard-companion-slot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-height:none;overflow:visible}.remote-pet{grid-template-columns:88px minmax(0,1fr)}.remote-visual{width:88px;height:88px}#pet-bottom-host{grid-row:1}#remote-companions{grid-row:1}}
@media(max-width:600px){#dashboard-companion-slot{grid-template-columns:1fr;gap:10px}.remote-pet{grid-template-columns:96px minmax(0,1fr)}.remote-visual{width:96px;height:96px}#pet-bottom-host{grid-row:auto;padding:10px}#pet-bottom-host #pet-lane.bottom-mode{min-height:210px}#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:140px;height:132px}#pet-bottom-host #pet-lane.side-mode #pet-actor{width:62px;height:62px}.remote-social button{font-size:.59rem}}

/* Keep the companion controls in their own row so compact mode never covers them. */
#pet-bottom-host{box-sizing:border-box;min-width:0;overflow:visible}
#pet-bottom-host #pet-lane,#pet-bottom-host #pet-lane.side-mode,#pet-bottom-host #pet-lane.bottom-mode{box-sizing:border-box;width:100%;height:auto;min-width:0;min-height:0;overflow:visible;flex-wrap:wrap;justify-content:center;gap:7px}
#pet-bottom-host #pet-lane.bottom-mode{padding:12px 8px 8px}
#pet-bottom-host #pet-lane.side-mode{padding:10px 5px}
#pet-bottom-host .pet-lane-actions,#pet-bottom-host #pet-lane.side-mode .pet-lane-actions,#pet-bottom-host #pet-lane.bottom-mode .pet-lane-actions{position:static!important;inset:auto!important;display:flex;flex:1 0 100%;width:100%;max-width:100%;height:auto;margin:6px 0 0!important;padding:0;align-self:center!important;flex-wrap:wrap;justify-content:center;gap:6px;transform:none!important}
#pet-bottom-host .pet-lane-actions button{position:static!important;flex:0 1 auto;min-width:0;max-width:100%;white-space:normal;line-height:1.25}
#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:min(145px,44vw);height:min(138px,42vw)}
#pet-bottom-host #pet-lane.side-mode #pet-actor{width:76px;height:76px}
#pet-bottom-host #pet-caption{min-width:0;overflow-wrap:anywhere}
@media(max-width:840px){#remote-companions{max-height:none;overflow:visible}.remote-pet{min-width:0}.remote-pet>div{min-width:0}}
@media(max-width:600px){#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:min(132px,42vw);height:min(124px,40vw)}#pet-bottom-host #pet-lane.side-mode #pet-actor{width:68px;height:68px}#pet-bottom-host .pet-lane-actions button{padding:8px 9px!important;font-size:.62rem!important}}

/* Companion menus: polished, compact fields that remain clear at every screen size. */
#pet-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),#pet-panel select,#pet-panel textarea,#pet-admin-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),#pet-admin-panel select,#pet-admin-panel textarea,#social-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),#social-dialog select,#social-dialog textarea{appearance:none;box-sizing:border-box;min-width:0;min-height:40px;padding:9px 11px;border:1px solid #354151;border-radius:11px;background:linear-gradient(180deg,#151c25,#10151c);color:#edf3f8;font:inherit;font-size:.82rem;line-height:1.35;box-shadow:inset 0 1px 0 #ffffff08,0 2px 7px #0002;transition:border-color .16s,box-shadow .16s,background .16s}
#pet-panel input::placeholder,#pet-admin-panel input::placeholder,#social-dialog input::placeholder{color:#748195;opacity:1}
#pet-panel input:focus-visible,#pet-panel select:focus-visible,#pet-panel textarea:focus-visible,#pet-admin-panel input:focus-visible,#pet-admin-panel select:focus-visible,#pet-admin-panel textarea:focus-visible,#social-dialog input:focus-visible,#social-dialog select:focus-visible,#social-dialog textarea:focus-visible{outline:0;border-color:#84c9ae;box-shadow:0 0 0 3px #84c9ae25,inset 0 1px 0 #ffffff0a;background:#151d26}
#pet-panel select,#pet-admin-panel select,#social-dialog select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#a8b8c7 50%),linear-gradient(135deg,#a8b8c7 50%,transparent 50%),linear-gradient(180deg,#151c25,#10151c);background-repeat:no-repeat;background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px,0 0;background-size:5px 5px,5px 5px,100% 100%}
#pet-panel input[type="checkbox"],#pet-admin-panel input[type="checkbox"],#social-dialog input[type="checkbox"]{accent-color:#8fd2b4}
#pet-panel label,#pet-admin-panel .admin-fields label,#pet-admin-panel .setting-card label,#social-dialog label{min-width:0;color:#aebac9;font-size:.72rem;line-height:1.4}
#pet-admin-panel .admin-fields input,#pet-admin-panel .admin-fields select{margin-top:6px}
#pet-admin-panel details>summary{padding:7px 3px;color:#e5edf5}
#pet-admin-panel details[open]>summary{margin-bottom:8px;color:#bce9d3}
#pet-panel button,#pet-admin-panel button,#social-dialog button{transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
#pet-panel button:hover,#pet-admin-panel button:hover,#social-dialog button:hover{border-color:#58786b;box-shadow:0 5px 14px #0003}
@media(prefers-reduced-motion:reduce){#pet-panel[open],#pet-admin-panel[open],#social-dialog[open],#battle-setup-dialog[open],#battle-live-dialog[open],#pet-body>*,.pet-tabs button,.pet-food button,.pet-shop-grid button,.pet-box-card{animation:none!important;transition:none!important}}

/* Compact dashboard companion sprite; keeps the card controls and caption unchanged. */
#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:88px!important;height:84px!important}
@media(max-width:600px){#pet-bottom-host #pet-lane.bottom-mode #pet-actor{width:70px!important;height:68px!important}}