html{background:#090d0f;color-scheme:dark}
.kino-avatar-frame{--avatar-color:#35bccc;position:relative!important;display:inline-block;flex-shrink:0;overflow:hidden!important;isolation:isolate;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 8%)!important;aspect-ratio:1;background:#061319!important}
.kino-avatar-frame>img.kino-avatar{width:100%!important;height:100%!important;display:block;object-fit:cover;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;outline:0!important}
.kino-avatar-frame>img[data-stock-avatar=true]{transform:scale(1.12)}
.kino-avatar-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--avatar-color);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8.2 .5H99.5V99.5H.5V8.2Z' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* Selection uses its checkmark; the thin frame keeps the image accent. */
.kino-avatar-frame>svg,.avatar-choice>span{z-index:2}
.kino-avatar-frame:focus-visible{outline:2px solid white!important;outline-offset:2px!important}
.friend-chip .kino-avatar-frame{width:30px;height:30px}.walk-friends .kino-avatar-frame{width:35px;height:35px}
.profile-avatar-grid .kino-avatar-frame.selected{box-shadow:none!important;border:0!important}

/* A bounded inner gallery keeps the form actions reachable on every screen. */
.auth-stage>.auth-panel[data-step=register] .avatar-grid{max-height:clamp(132px,35dvh,350px)!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start;grid-auto-rows:max-content;scrollbar-gutter:stable!important;padding:4px 16px 6px 4px;scrollbar-width:thin;scrollbar-color:#24778a transparent;overscroll-behavior-y:contain}
.auth-panel[data-step=register] .avatar-grid::-webkit-scrollbar{width:6px}.auth-panel[data-step=register] .avatar-grid::-webkit-scrollbar-thumb{background:#24778a;border-radius:4px}
@media(max-width:600px){.auth-stage>.auth-panel[data-step=register] .avatar-grid{max-height:clamp(118px,31dvh,270px)!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
.auth-panel button.primary{display:flex;align-items:center;justify-content:center;gap:10px}
.auth-panel button.auth-pending::before{content:'';display:block;flex:none;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:auth-submit-spin .7s linear infinite}
.auth-panel button.auth-pending{opacity:1;cursor:wait}
@keyframes auth-submit-spin{to{transform:rotate(360deg)}}
.kino-profile .profile-avatar-grid{max-height:350px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
.kino-profile .profile-header .profile-top-actions>:is(a,button){transition:border-color .18s ease,background-color .18s ease,color .18s ease;cursor:pointer;transform:none}
.kino-profile .profile-header .profile-top-actions>:is(a,button):hover{border-color:#00bdce;background-color:#0a252d;color:#d8faff;transform:none;box-shadow:none}
.kino-profile button.profile-save,.kino-profile button.profile-save:hover{transform:none!important;animation:none!important;background-image:none!important;box-shadow:none!important;transition:background-color .18s ease,border-color .18s ease,color .18s ease!important}
.kino-profile button.profile-save:not([data-saved=true]):hover{background-color:#00313a;border-color:#00dce7;color:#baffff}
.kino-profile button.profile-save::before,.kino-profile button.profile-save::after{display:none!important}
@media(prefers-reduced-motion:reduce){.auth-panel button.auth-pending::before{animation-duration:1.8s}}

/* Registration has one scroll surface: the avatar gallery. */
html:has(.auth-panel[data-step=register]),body.auth-body:has(.auth-panel[data-step=register]){height:100%;overflow:hidden;overscroll-behavior:none}
.auth-stage:has(>.auth-panel[data-step=register]){height:100svh;min-height:0;padding:24px!important;overflow:hidden}
.auth-stage>.auth-panel[data-step=register]{height:min(820px,100%)!important;max-height:100%!important;min-height:0!important;width:min(900px,100%)!important;display:flex!important;gap:12px!important;padding:24px 32px!important;overflow:hidden!important;justify-content:flex-start}
.auth-stage>.auth-panel[data-step=register] .auth-brand{margin:0!important;flex:0 0 auto}
.auth-stage>.auth-panel[data-step=register] .profile-preview{margin:0!important;padding:0!important;min-height:64px;flex:0 0 auto;border:0;gap:14px}
.auth-stage>.auth-panel[data-step=register] .profile-preview>.kino-avatar-frame{width:64px!important;height:64px!important;min-width:64px!important;flex:0 0 64px!important}
.auth-stage>.auth-panel[data-step=register] #register-view{display:flex!important;flex:1 1 0!important;min-height:0!important;overflow:hidden}
.auth-stage>.auth-panel[data-step=register] #register-form{height:100%;min-height:0;display:grid;grid-template-rows:auto 44px minmax(0,1fr) 46px;gap:10px;width:100%;overflow:hidden}
.auth-stage>.auth-panel[data-step=register] .name-input{margin:0!important;height:44px}
.auth-stage>.auth-panel[data-step=register] .avatar-field{display:flex;flex-direction:column;min-height:0;margin:0!important;padding:0;overflow:hidden}
.auth-stage>.auth-panel[data-step=register] .avatar-field legend{float:left;width:100%;margin:0 0 10px;flex:none}
.auth-stage>.auth-panel[data-step=register] #register-form .avatar-grid{flex:1 1 0;min-height:0;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;align-content:start;grid-auto-rows:max-content;padding:3px 12px 6px 3px;overscroll-behavior:contain;touch-action:pan-y;contain:layout paint}
.auth-stage>.auth-panel[data-step=register] #register-form>.primary{height:46px;min-height:46px;margin:0;flex:none}
.auth-stage>.auth-panel[data-step=register] .auth-message{display:none!important}
@media(max-width:600px){
 .auth-stage:has(>.auth-panel[data-step=register]){padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))!important}
 .auth-stage>.auth-panel[data-step=register]{height:100%!important;padding:16px!important;gap:12px!important}
 .auth-stage>.auth-panel[data-step=register] .auth-brand img{width:150px!important}
 .auth-stage>.auth-panel[data-step=register] .profile-preview{min-height:48px;gap:10px}
 .auth-stage>.auth-panel[data-step=register] .profile-preview>.kino-avatar-frame{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important}
 .auth-stage>.auth-panel[data-step=register] #register-form .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
}
@media(max-height:480px){
 .auth-stage>.auth-panel[data-step=register]{padding:12px 16px!important;gap:6px!important}
 .auth-stage>.auth-panel[data-step=register] .auth-brand{display:none}
 .auth-stage>.auth-panel[data-step=register] .profile-preview{min-height:40px}
 .auth-stage>.auth-panel[data-step=register] .profile-preview>.kino-avatar-frame{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important}
 .auth-stage>.auth-panel[data-step=register] #register-form{gap:6px;grid-template-rows:auto 40px minmax(0,1fr) 44px}
}